/* Elio waitlist — layout cloned from the Soar landing page, Elio brand assets. */

:root {
  --ink:        #0f172a;   /* headline navy */
  --ink-body:   #4b5563;   /* body grey     */
  --ink-mute:   #6b7280;
  --line:       #e5e7eb;
  --brand:      #2563eb;
  --brand-dark: #1d4ed8;
  --card-w:     388px;
  --radius:     24px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { color-scheme: light; }

body {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  color: var(--ink);
  background: #10182c;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* -------------------------------------------------------------- background */
.bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; }

.bg__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 62%;
}

/* Just enough darkening at the top for the white nav to hold contrast. */
.bg__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6, 12, 28, 0.34) 0%, rgba(6, 12, 28, 0.06) 22%, transparent 46%);
}

/* ------------------------------------------------------------------ topbar */
.topbar {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px;
  padding: 22px clamp(18px, 2.4vw, 34px);
}

.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brand__mark { height: 28px; width: auto; display: block;
  filter: drop-shadow(0 2px 8px rgba(4, 10, 26, 0.45)); }
.brand__word { height: 21px; width: auto; display: block; }

.nav { display: flex; align-items: center; gap: 10px; }

.nav__link {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14.5px; font-weight: 500;
  color: rgba(255, 255, 255, 0.96);
  text-decoration: none;
  text-shadow: 0 1px 10px rgba(4, 10, 26, 0.35);
  padding: 10px 19px;
  border-radius: 999px;
  transition: transform .22s cubic-bezier(.32,.72,0,1),
              box-shadow .22s cubic-bezier(.32,.72,0,1);
}
.nav__link:hover  { transform: translateY(-1.5px); box-shadow: 0 10px 26px rgba(4, 10, 26, 0.32); }
.nav__link:active { transform: translateY(0) scale(.986); }
.nav__link:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.nav__icon { width: 19px; height: 19px; }

/* The CTA reads as the same material, lit a little brighter. */
.nav__link--cta { --glass-tint-opacity: 0.2; font-weight: 600; }

/* ------------------------------------------------------------------- glass */
/*
 * .lg is applied by js/liquid-glass.js. --lg-backdrop is either an SVG
 * refraction filter (Chromium) or a plain frost (Safari / Firefox).
 *   ::after  = the refracted backdrop, behind the element's content
 *   ::before = tint + inner rim light, over it
 */
:root {
  --glass-tint: 255, 255, 255;
  --glass-tint-opacity: 0.1;
  --glass-inner-blur: 16px;
  --glass-inner-spread: -6px;
  --glass-inner-color: rgba(255, 255, 255, 0.5);
}

.lg { position: relative; isolation: isolate; }

.lg::after {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  backdrop-filter: var(--lg-backdrop, blur(14px) saturate(1.7));
  -webkit-backdrop-filter: var(--lg-backdrop, blur(14px) saturate(1.7));
  isolation: isolate;
}

.lg::before {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  background-color: rgba(var(--glass-tint), var(--glass-tint-opacity));
  box-shadow: inset 0 0 var(--glass-inner-blur) var(--glass-inner-spread) var(--glass-inner-color);
}

/* No refraction means no rim from the filter, so draw a hairline instead —
   otherwise the pill reads as a flat translucent box. */
.lg--fallback::before {
  box-shadow:
    inset 0 0 var(--glass-inner-blur) var(--glass-inner-spread) var(--glass-inner-color),
    inset 0 0 0 1px rgba(255, 255, 255, 0.24);
}

.lg > * { position: relative; z-index: 2; }

/* -------------------------------------------------------------------- card */
.stage {
  position: relative; z-index: 2;
  flex: 1 1 auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(46px, 7vh, 78px) 18px 40px;
}

.card {
  position: relative;
  width: min(100%, var(--card-w));
  background: rgba(252, 252, 253, 0.97);
  border-radius: var(--radius);
  padding: 52px 32px 26px;
  text-align: center;
  box-shadow:
    0 1px 2px rgba(11, 18, 40, 0.06),
    0 18px 44px rgba(11, 18, 40, 0.22),
    0 46px 90px rgba(11, 18, 40, 0.14);
}

/* App tile straddles the card's top edge, exactly as in the reference. */
.card__appicon {
  position: absolute;
  top: -34px; left: 50%;
  transform: translateX(-50%);
  width: 72px; height: 72px;
  object-fit: contain;
  /* drop-shadow, not box-shadow: it follows the mascot's alpha instead of
     casting a rectangle around a transparent PNG. */
  filter: drop-shadow(0 8px 18px rgba(11, 18, 40, 0.34));
}

/* Squircles, not pills/circles. `corner-shape` is a real superellipse in
   Chromium 139+; elsewhere the border-radius alone still reads as a soft
   rounded rect, which is the right graceful failure. */
.trustpill {
  display: inline-flex; align-items: center; gap: 9px;
  margin-bottom: 22px;
  padding: 6px 12px;
  border-radius: 999px;
  corner-shape: squircle;
  background: #dce8fb;
  color: #1e293b;
  font-size: 13px; font-weight: 500;
  white-space: nowrap;
}
/* One flex item, so the container gap only separates avatars from text.
   Bare text nodes would each become an anonymous flex item and inherit it. */
.trustpill__text { white-space: nowrap; }

/* The laurels: a small premium cue flanking the social proof. Drawn in
   currentColor so they inherit the pill's ink and stay one colour family. */
.laurel {
  width: 15px; height: 25px;
  flex: 0 0 auto;
  color: #1e293b;
  opacity: 0.6;
}
.laurel--r { transform: scaleX(-1); }
.trustpill strong { font-weight: inherit; font-variant-numeric: tabular-nums; }

/* Real travellers, lifted from ColumbusPage's /consumer avatar stack. */
.avatars { display: inline-flex; }
.avatars > img {
  width: 21px; height: 21px;
  border-radius: 50%;
  /* squircle is a squarer superellipse than a circle; 1.4 sits between the
     two, which is what "a little more round" comes out to at this size. */
  corner-shape: superellipse(1.4);
  border: 1.5px solid #dce8fb;
  object-fit: cover;
  margin-right: -6px;
  display: block;
}
.avatars > img:last-child { margin-right: 0; }

.card__title {
  font-size: 33px;
  line-height: 1.16;
  letter-spacing: -0.028em;
  font-weight: 700;
  color: var(--ink);
  text-wrap: balance;
}
.flag { font-size: 0.86em; }

.card__sub {
  margin: 16px auto 0;
  max-width: 31ch;
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--ink-body);
}
.card__sub strong { font-weight: 700; color: #374151; }

/* ------------------------------------------------------------------ signup */
.signup { margin-top: 26px; }

.phone {
  display: flex; align-items: stretch;
  height: 48px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
  overflow: hidden;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.phone:focus-within { border-color: #9db8f2; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14); }

.phone__country {
  position: relative;
  display: flex; align-items: center; gap: 6px;
  padding: 0 11px 0 13px;
  border-right: 1px solid var(--line);
  color: var(--ink);
  font-size: 14.5px; font-weight: 500;
}
.phone__flag { font-size: 17px; line-height: 1; }
.phone__chevron { width: 15px; height: 15px; color: #9ca3af; }

/* Real <select> laid over the pretty display, so it stays keyboard-accessible. */
.phone__country select {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0;
  border: 0;
  cursor: pointer;
  font: inherit;
}
.phone__country:focus-within { background: #f6f8fd; }

.phone input {
  flex: 1 1 auto; min-width: 0;
  border: 0; background: transparent;
  padding: 0 14px;
  font: inherit; font-size: 14.5px;
  color: var(--ink);
}
.phone input::placeholder { color: #9ca3af; }
.phone input:focus { outline: none; }

.submit {
  display: block; width: 100%;
  margin-top: 13px;
  padding: 13px 16px;
  border: 0; border-radius: 11px;
  background: var(--brand);
  color: #fff;
  font: inherit; font-size: 14.5px; font-weight: 600;
  cursor: pointer;
  transition: background .16s ease, transform .16s ease, box-shadow .16s ease;
  box-shadow: 0 2px 10px rgba(37, 99, 235, 0.28);
}
.submit:hover  { background: var(--brand-dark); box-shadow: 0 6px 18px rgba(37, 99, 235, 0.34); }
.submit:active { transform: translateY(1px); }
.submit:focus-visible { outline: 2px solid var(--brand-dark); outline-offset: 2px; }

.consent {
  display: flex; align-items: flex-start; gap: 9px;
  margin-top: 14px;
  text-align: left;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ink-mute);
  cursor: pointer;
}
.consent input {
  flex: 0 0 auto;
  width: 14px; height: 14px;
  margin-top: 1px;
  accent-color: var(--brand);
  cursor: pointer;
}

.formnote {
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.45;
  min-height: 0;
  text-align: left;
}
.formnote[data-state='error'] { color: #b42318; }
.formnote[data-state='ok']    { color: #0f7b42; }

/* ------------------------------------------------------------------ footer */
.footer {
  position: relative; z-index: 2;
  padding: 18px 18px 20px;
  text-align: center;
  font-size: 11px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.42);
}
.footer a { color: inherit; text-decoration: none; }
.footer a:hover { color: rgba(255, 255, 255, 0.72); text-decoration: underline; }

/* ------------------------------------------------------------- adaptations */
@media (max-width: 560px) {
  .nav { gap: 8px; }
  .nav__link { font-size: 13.5px; padding: 9px 16px; }
  .card { padding: 48px 22px 26px; }
  .card__title { font-size: 28px; min-height: 3.48em; }
  .stage { align-items: center; padding-top: 54px; }

  /* Two footer lines were colliding once each wrapped. */
  .footer { padding: 14px 16px 18px; line-height: 1.55; }
  .footer p + p { margin-top: 6px; }
}

/* Two pills fit beside the wordmark even at 360px once the padding tightens,
   so nothing gets hidden. Dropping Take Off is what made this possible. */
@media (max-width: 400px) {
  .topbar { padding-left: 14px; padding-right: 14px; }
  .nav { gap: 7px; }
  .nav__link { padding: 9px 14px; font-size: 13px; }
  .brand__mark { height: 24px; }
  .brand__word { height: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .bg__video { display: none; }
  .bg { background: url('./assets/airplane-twilight-poster.jpg') center 62% / cover no-repeat; }
  * { transition-duration: .001ms !important; }
}
@media (prefers-reduced-motion: reduce) and (max-aspect-ratio: 1/1) {
  .bg { background-image: url('./assets/airplane-twilight-portrait-poster.jpg'); }
}

/* ============================================================ About page */
/* Deliberately no card: just text on the footage, per the brief. The scrim
   below does the legibility work so nothing has to sit on a panel. */
.bg--dim .bg__scrim {
  background:
    linear-gradient(180deg, rgba(6, 12, 28, 0.5) 0%, rgba(6, 12, 28, 0.28) 30%, rgba(6, 12, 28, 0.42) 100%),
    rgba(6, 12, 28, 0.24);
}

.nav__link[aria-current='page'] { --glass-tint-opacity: 0.2; }

.prose {
  position: relative; z-index: 2;
  flex: 1 1 auto;
  width: min(100%, 660px);
  margin: 0 auto;
  padding: clamp(40px, 8vh, 84px) clamp(20px, 4vw, 34px) 60px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 16px;
  line-height: 1.72;
  text-shadow: 0 1px 16px rgba(4, 10, 26, 0.55);
}

.prose__lede {
  font-size: clamp(26px, 3.6vw, 38px);
  line-height: 1.22;
  letter-spacing: -0.025em;
  font-weight: 600;
  color: #fff;
  text-wrap: balance;
  margin-bottom: 34px;
}

.prose h2 {
  margin: 40px 0 10px;
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.prose p + p { margin-top: 18px; }

.prose__quotes {
  display: flex; flex-wrap: wrap; gap: 9px;
  margin-top: 26px;
}
.prose__quotes span {
  padding: 7px 15px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.07);
  font-size: 13.5px;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.86);
  text-shadow: none;
}

.prose__close {
  margin-top: 44px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 15px;
  color: rgba(255, 255, 255, 0.68);
}

.prose a { color: #fff; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose a:hover { text-decoration-color: rgba(255, 255, 255, 0.5); }

/* ========================================================== Contact page */
.stage--form { align-items: flex-start; padding-top: clamp(28px, 5vh, 56px); }

.card--form {
  --card-w: 468px;
  padding: 34px 32px 30px;
  text-align: left;
}

.card__heading {
  font-size: 27px; font-weight: 700;
  letter-spacing: -0.026em;
  color: var(--ink);
}
.card__kicker {
  margin-top: 8px;
  font-size: 14px; line-height: 1.55;
  color: var(--ink-body);
}

.contact { margin-top: 24px; display: grid; gap: 18px; }

.field { display: grid; gap: 7px; }
.field__label { font-size: 13.5px; font-weight: 500; color: #374151; }

.field__input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 11px 13px;
  font: inherit; font-size: 14.5px;
  color: var(--ink);
  background: #fff;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.field__input::placeholder { color: #9ca3af; }
.field__input:focus {
  outline: none;
  border-color: #9db8f2;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}

.field__textarea { resize: vertical; min-height: 104px; line-height: 1.55; }

.field__select {
  appearance: none;
  cursor: pointer;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 15px;
}

.field__count { justify-self: end; font-size: 12px; color: var(--ink-mute); }
.field__count.is-over { color: #b42318; font-weight: 600; }
.field__error { font-size: 12px; line-height: 1.45; color: #b42318; }

.card--form .consent { margin-top: 0; font-size: 13px; }
.card--form .submit { margin-top: 4px; }
.card--form .formnote { margin-top: 0; }

@media (max-width: 560px) {
  .card--form { padding: 28px 20px 24px; }
  .card__heading { font-size: 24px; }
  .prose { font-size: 15.5px; }
}

/* ==================================================== Waitlist conversion */
/*
 * Implements the four strategies from the brief:
 *   1. live signup count beside the form, not only in the header
 *   2. "Join for early access" as the CTA
 *   3. a confirmation view that leads with position + referral incentive
 *   4. expectations set, plus one low-friction next step
 */

.invited {
  margin-top: 14px;
  padding: 9px 14px;
  border-radius: 12px;
  corner-shape: squircle;
  background: #eaf5ec;
  color: #1c5b32;
  font-size: 13px;
  line-height: 1.5;
}

/* Same anonymous-flex-item trap as .trustpill: the count and the words would
   otherwise be separate items and inherit the container gap. */
.livecount__text { white-space: nowrap; }
.livecount {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin-top: 11px;
  font-size: 12.5px;
  color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
}
.livecount__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.6);
  animation: live-pulse 2.4s ease-out infinite;
}
@keyframes live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.55); }
  70%  { box-shadow: 0 0 0 7px rgba(37, 99, 235, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
}

/* ------------------------------------------------------- confirmation */
.confirm__badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 15px 7px 11px;
  border-radius: 16px;
  corner-shape: squircle;
  background: #e6f6ea;
  color: #15803d;
  font-size: 13px; font-weight: 600;
}
.confirm__badge svg { width: 14px; height: 14px; }

.confirm__position {
  margin-top: 16px;
  display: flex; align-items: baseline; justify-content: center; gap: 9px;
  color: var(--ink);
}
.confirm__rank {
  display: inline-flex; align-items: baseline;
  font-size: 44px; font-weight: 700;
  letter-spacing: -0.038em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.confirm__hash { font-size: 0.62em; color: #9aa6bb; margin-right: 1px; }
.confirm__inline { font-size: 15px; font-weight: 500; color: var(--ink-mute); }

/* ---------------------------------------------------------------- crowd */
/* The line, drawn as people, one row. Sixty-odd figures do not fit across the
   card, so the row slides under a fixed viewport: you sit towards the right,
   the front of the line is off to the left, and previewing a jump carries you
   forward past everyone you would overtake. */
.crowd {
  margin-top: 18px;
  padding: 10px 0 8px;
  border-radius: 16px;
  corner-shape: squircle;
  background: #eef2f8;
}

.crowd__labels {
  display: flex; justify-content: space-between;
  padding: 0 14px 6px;
  font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: #9aa8bd;
}

.crowd__view {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
}

.crowd__row {
  display: flex;
  padding: 3px 0;
  will-change: transform;
  transition: transform .62s cubic-bezier(.32,.72,0,1);
}

.crowd__slot {
  flex: 0 0 26px;
  width: 26px;
  font-size: 15px;
  line-height: 1.6;
  text-align: center;
  border-radius: 7px;
  corner-shape: squircle;
  opacity: 0.55;
  filter: grayscale(1);
  transition: opacity .35s ease, filter .35s ease, background-color .35s ease,
              transform .35s ease, box-shadow .35s ease;
}

/* Everyone behind you in the line matters less to the story. */
.crowd__slot--behind { opacity: 0.22; }

/* Where you are, or where the preview has carried you. */
.crowd__slot--you {
  opacity: 1;
  filter: none;
  background: var(--brand);
  transform: scale(1.18);
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.4);
}

/* Where you were, while a preview shows you somewhere better. */
.crowd__slot--ghost {
  opacity: 1;
  filter: none;
  box-shadow: inset 0 0 0 2px rgba(37, 99, 235, 0.45);
}

/* Everyone you would move ahead of. */
.crowd__slot--passed { opacity: 0.75; filter: none; }

.confirm__reward {
  margin-top: 14px;
  font-size: 14px; line-height: 1.6;
  color: var(--ink-body);
}
.confirm__reward strong { color: var(--ink); font-weight: 700; }
.confirm__reward.is-preview { color: var(--brand); }
.confirm__reward.is-preview strong { color: var(--brand); }

/* --------------------------------------------------------------- ladder */
.ladder {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px;
  margin-top: 14px;
}
.ladder__step {
  appearance: none;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 10px 6px 9px;
  border: 1px solid var(--line);
  border-radius: 13px;
  corner-shape: squircle;
  background: #fff;
  font: inherit;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.ladder__step:hover,
.ladder__step.is-active {
  border-color: #9db8f2;
  background: #f4f8ff;
  transform: translateY(-1px);
}
.ladder__step:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.ladder__n { font-size: 11.5px; font-weight: 500; color: var(--ink-mute); }
.ladder__to {
  font-size: 15px; font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.ladder__step:hover .ladder__to,
.ladder__step.is-active .ladder__to { color: var(--brand); }

.share { margin-top: 22px; }
.share__primary { margin-top: 0; }

.share__row {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 7px;
  margin-top: 10px;
}
.share__chip {
  appearance: none;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 12px;
  corner-shape: squircle;
  padding: 7px 13px;
  font: inherit; font-size: 12.5px; font-weight: 500;
  color: #374151;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.share__chip:hover { border-color: #c3d3f2; background: #f6f9ff; }
.share__chip:active { transform: translateY(1px); }
.share__chip:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.confirm__eta {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 13px; line-height: 1.6;
  color: var(--ink-mute);
}
.confirm__eta strong { color: #374151; font-weight: 600; }

.confirm__next {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 12px;
  font-size: 13.5px; font-weight: 600;
  color: var(--brand);
  text-decoration: none;
}
.confirm__next:hover { text-decoration: underline; }
.confirm__next svg { width: 15px; height: 15px; transition: transform .18s ease; }
.confirm__next:hover svg { transform: translateX(3px); }

@media (max-width: 560px) {
  .confirm__rank { font-size: 38px; }
  .crowd__slot { flex-basis: 24px; width: 24px; font-size: 14px; }
  .ladder { gap: 6px; }
  .ladder__to { font-size: 14px; }
}


/* ------------------------------------------------- cycling destinations */
/* Each half of the route swaps on its own, staggered, so the headline reads
   as a trip being re-planned rather than two words blinking together. */
/* Three explicit lines. City names vary enough that letting them wrap freely
   made the headline flip between two and three lines every few seconds,
   shunting the whole card up and down. */
.card__title { min-height: 3.48em; }

.route {
  display: inline-block;
  white-space: nowrap;
  transition: opacity .34s ease, transform .34s cubic-bezier(.32,.72,0,1);
}
.route.is-out {
  opacity: 0;
  transform: translateY(-0.22em);
}

@media (prefers-reduced-motion: reduce) {
  .route { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  .crowd__row { transition: none; }
}