/* B2B page prototypes: Business and GO NOW Screen.
   These reuse the landing tokens, header, footer, buttons and FAQ styles. */

/* Shared page hero */

.subpage-hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line-light);
  background-color: var(--ink);
  background-image: url("assets/transit-lines.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: var(--paper);
}

.subpage-hero::before {
  content: none;
}

.subpage-hero::after {
  content: "";
  position: absolute;
  top: -360px;
  right: -240px;
  width: 800px;
  height: 800px;
  border: 1px solid rgba(245, 207, 51, 0.13);
  border-radius: 50%;
  pointer-events: none;
}

.subpage-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  align-items: center;
  gap: 64px;
  padding-block: 74px 88px;
}

.subpage-hero h1 {
  max-width: 13ch;
  margin: 22px 0 24px;
  font-size: clamp(3rem, 5.4vw, 5.2rem);
  font-weight: 900;
  letter-spacing: -0.058em;
  line-height: 0.91;
  text-wrap: balance;
}

.subpage-hero h1 .accent {
  color: var(--yellow);
}

.subpage-lede {
  max-width: 52ch;
  color: #b9c5cf;
  font-size: clamp(1.02rem, 1.3vw, 1.18rem);
  line-height: 1.6;
}

.subpage-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 26px;
  margin-top: 32px;
}

.subpage-note {
  margin-top: 22px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  line-height: 1.6;
  text-transform: uppercase;
}

.hero-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 14px;
  max-width: 52ch;
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--line-light);
}

.hero-price strong {
  color: var(--yellow);
  font-size: clamp(1.7rem, 2.8vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1;
}

.hero-price span {
  color: #b9c5cf;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  line-height: 1.5;
  text-transform: uppercase;
}

.subpage-visual {
  position: relative;
}

.subpage-frame {
  position: relative;
  border: 1px solid var(--ink);
  background: var(--ink);
  box-shadow: 14px 14px 0 var(--yellow);
}

.subpage-frame.subpage-frame-free {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.subpage-frame img {
  display: block;
  width: 100%;
  height: auto;
}

.frame-tag {
  position: absolute;
  top: 18px;
  left: 18px;
  padding: 7px 9px;
  border: 1px solid var(--ink);
  background: var(--yellow);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
}

.subpage-caption {
  max-width: 46ch;
  margin: 20px 0 0 auto;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.07em;
  line-height: 1.6;
  text-transform: uppercase;
}

/* Business page */

.biz-hero .subpage-frame img {
  aspect-ratio: 1200 / 881;
  object-fit: cover;
}

.stats-band {
  border-block: 1px solid rgba(10, 17, 24, 0.3);
  background: var(--yellow);
  color: var(--ink);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Three stats once the live App Store rating is available. */
.stats-grid.has-rating {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.stats-band .rating-stars {
  width: 120px;
  height: 19px;
  background-color: rgba(10, 17, 24, 0.22);
}

.stats-band .rating-stars .rating-stars-fill {
  background-color: var(--ink);
}

.stat-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 25px 30px;
  border-left: 1px solid rgba(10, 17, 24, 0.2);
  text-align: center;
}

.stat-block[hidden] {
  display: none;
}

.stat-block:first-child {
  border-left: 0;
}

.stat-block strong {
  display: block;
  font-size: clamp(2.1rem, 3.5vw, 3.3rem);
  font-weight: 800;
  letter-spacing: -0.055em;
  line-height: 1;
}

.stat-block span {
  display: block;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  line-height: 1.5;
  text-transform: uppercase;
}

.stats-note {
  padding: 0 0 13px;
  color: rgba(10, 17, 24, 0.6);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.reason-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-bottom: 1px solid var(--line-dark);
}

.reason {
  padding: 28px 26px 34px;
  border-left: 1px solid var(--line-dark);
}

.reason:first-child {
  padding-left: 0;
  border-left: 0;
}

.reason-index,
.value-index,
.step-index,
.audience-index {
  color: var(--muted-dark);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.1em;
}

.reason h3 {
  margin: 15px 0 9px;
  font-size: 1.16rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.2;
}

.reason p {
  color: var(--muted-dark);
  font-size: 0.88rem;
  line-height: 1.58;
}

.surface-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--ink);
}

.surface-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 26px;
  border-top: 1px solid var(--ink);
  border-left: 1px solid var(--ink);
  background: var(--paper-3);
}

.surface-card:nth-child(1),
.surface-card:nth-child(2) {
  border-top: 0;
}

.surface-card:nth-child(odd) {
  border-left: 0;
}

.surface-media {
  position: relative;
  display: grid;
  min-height: 210px;
  margin: 18px 0 20px;
  place-items: center;
  overflow: hidden;
  background: transparent;
  aspect-ratio: 4 / 5;
}

.surface-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.surface-video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: transparent;
  object-fit: contain;
}

.surface-card h3 {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.1;
}

.surface-tagline {
  margin-top: 6px;
  color: var(--muted-dark);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.45;
}

.surface-desc {
  margin-top: 14px;
  color: var(--muted-dark);
  font-size: 0.88rem;
  line-height: 1.6;
}

.surface-best {
  margin-top: 16px;
  color: var(--muted-dark);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.06em;
  line-height: 1.6;
  text-transform: uppercase;
}

.surface-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--line-dark);
}

.surface-price {
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.radar-mock,
.bus-mock {
  position: relative;
  display: grid;
  width: 100%;
  height: 100%;
  min-height: 210px;
  place-items: center;
  overflow: hidden;
  background: var(--ink-2);
}

.radar-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 74%;
  aspect-ratio: 1;
  border: 1px solid rgba(126, 200, 227, 0.25);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.radar-circle:nth-child(2) {
  width: 48%;
}

.radar-circle:nth-child(3) {
  width: 22%;
}

.radar-ping {
  position: relative;
  z-index: 1;
  display: grid;
  width: 110px;
  height: 110px;
  place-items: center;
  border: 1px solid rgba(245, 207, 51, 0.7);
  border-radius: 50%;
  background: rgba(245, 207, 51, 0.12);
  color: var(--yellow);
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}

.bus-mock {
  justify-items: stretch;
  align-items: center;
}

.bus-route {
  position: absolute;
  top: 50%;
  right: 16%;
  left: 16%;
  height: 3px;
  background: var(--regional);
  transform: translateY(-50%);
}

.bus-route::before,
.bus-route::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 11px;
  height: 11px;
  border: 2px solid var(--paper);
  border-radius: 50%;
  background: var(--ink);
  transform: translateY(-50%);
}

.bus-route::before {
  left: 0;
}

.bus-route::after {
  right: 0;
}

.bus-chip {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--ink);
  background: var(--yellow);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transform: translate(-50%, -50%);
}

.bus-chip::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink);
}

.step-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line-dark);
}

.step {
  display: block;
  padding: 26px 26px 30px;
  border-left: 1px solid var(--line-dark);
}

.step:first-child {
  padding-left: 0;
  border-left: 0;
}

.step h3 {
  margin: 14px 0 8px;
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.step p {
  color: var(--muted-dark);
  font-size: 0.88rem;
  line-height: 1.58;
}

.vertical-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line-dark);
}

.vertical {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--line-dark);
  border-left: 1px solid var(--line-dark);
}

.vertical:nth-child(odd) {
  padding-left: 0;
  border-left: 0;
}

.vertical h3 {
  margin-bottom: 4px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.vertical p {
  color: var(--muted-dark);
  font-size: 0.86rem;
  line-height: 1.55;
}

.value-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line-dark);
}

.value {
  padding: 24px 22px 28px;
  border-left: 1px solid var(--line-dark);
}

.value:first-child {
  padding-left: 0;
  border-left: 0;
}

.value h3 {
  margin: 14px 0 7px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.value p {
  color: var(--muted-dark);
  font-size: 0.86rem;
  line-height: 1.55;
}

/* Screen page */

.screen-hero .subpage-frame img {
  aspect-ratio: 1672 / 941;
  object-fit: cover;
}

.facts-band {
  border-block: 1px solid rgba(10, 17, 24, 0.3);
  background: var(--yellow);
  color: var(--ink);
}

.facts-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.fact {
  padding: 20px 30px;
  border-left: 1px solid rgba(10, 17, 24, 0.2);
  text-align: center;
}

.fact:first-child {
  border-left: 0;
}

.fact strong {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.fact span {
  display: block;
  margin-top: 5px;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.08em;
  line-height: 1.5;
  text-transform: uppercase;
}

.feature-quad {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
}

.feature-quad .reason {
  border-bottom: 1px solid var(--line-dark);
}

.feature-quad .reason:nth-child(3),
.feature-quad .reason:nth-child(4) {
  border-bottom: 0;
}

.feature-quad .reason:nth-child(3) {
  padding-left: 0;
  border-left: 0;
}

.showroom-large {
  position: relative;
  max-width: 900px;
  margin: 42px auto 0;
}

.showroom-large img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(14px 14px 0 var(--yellow));
}

.showroom-large .frame-tag {
  top: 18px;
  left: 18px;
}

.showroom-large figcaption {
  max-width: 54ch;
  margin: 18px auto 0;
  color: var(--muted-dark);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  line-height: 1.6;
  text-transform: uppercase;
}

.price-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  align-items: start;
  gap: 64px;
}

.price-card {
  padding: 32px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  box-shadow: 12px 12px 0 rgba(10, 17, 24, 0.2);
}

.price-card > .mono {
  color: var(--muted);
  font-size: 9px;
}

.price-card .btn {
  width: 100%;
  margin-top: 24px;
}

.price-amount {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 22px 0 4px;
  color: var(--yellow);
}

.price-amount strong {
  font-size: clamp(3rem, 4.8vw, 4.8rem);
  font-weight: 800;
  letter-spacing: -0.07em;
  line-height: 0.9;
}

.price-amount span {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.price-free {
  color: var(--regional);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.price-list {
  margin-top: 22px;
  border-top: 1px solid var(--line-light);
}

.price-list li {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-light);
  color: #c3cfd8;
  font-size: 0.86rem;
  line-height: 1.45;
}

.price-list li::before {
  content: "·";
  color: var(--yellow);
  font-size: 1rem;
  line-height: 1;
}

.price-extras {
  margin-top: 18px;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.6;
}

.price-extras strong {
  color: var(--paper);
  font-weight: 600;
}

.price-note {
  margin-top: 20px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.05em;
  line-height: 1.6;
  text-transform: uppercase;
}

.pricing-copy h2 {
  max-width: 14ch;
}

.pricing-copy p {
  max-width: 43ch;
  margin-top: 24px;
  color: var(--muted-dark);
  font-size: 0.96rem;
  line-height: 1.66;
}

.pricing-copy .text-link {
  margin-top: 26px;
}

.screen-step-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line-dark);
}

.screen-step {
  padding: 24px 22px 28px;
  border-left: 1px solid var(--line-dark);
}

.screen-step:first-child {
  padding-left: 0;
  border-left: 0;
}

.screen-step h3 {
  margin: 14px 0 8px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.screen-step p {
  color: var(--muted-dark);
  font-size: 0.85rem;
  line-height: 1.55;
}

.audience-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
  align-items: center;
  gap: 56px;
}

.audience-list {
  border-top: 1px solid var(--line-dark);
}

.audience-item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 14px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line-dark);
}

.audience-item h3 {
  margin-bottom: 4px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.audience-item p {
  color: var(--muted-dark);
  font-size: 0.86rem;
  line-height: 1.55;
}

.audience-visual {
  position: relative;
  border: 1px solid var(--ink);
  background: var(--ink);
  box-shadow: 12px 12px 0 var(--yellow);
}

.audience-visual img {
  display: block;
  width: 100%;
  height: auto;
}

.closing-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 48px;
}

.closing-grid h2 {
  max-width: 15ch;
}

.closing-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 26px;
}

.closing-copy {
  max-width: 48ch;
  margin-top: 18px;
  color: rgba(10, 17, 24, 0.72);
  font-size: 0.98rem;
  line-height: 1.66;
}

.closing-note {
  margin-top: 18px;
  color: var(--muted-dark);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.06em;
  line-height: 1.6;
  text-transform: uppercase;
}

/* Responsive */

@media (max-width: 980px) {
  .subpage-hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 44px;
    padding-block: 58px 68px;
  }

  .subpage-hero h1 {
    max-width: 15ch;
    font-size: clamp(2.6rem, 7.2vw, 4rem);
  }

  .subpage-visual {
    width: min(100%, 700px);
  }

  .surface-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .surface-card,
  .surface-card:nth-child(1),
  .surface-card:nth-child(2),
  .surface-card:nth-child(odd) {
    border-top: 1px solid var(--ink);
    border-left: 0;
  }

  .surface-card:first-child {
    border-top: 0;
  }

  .feature-quad .reason:nth-child(3) {
    padding-left: 26px;
    border-left: 1px solid var(--line-dark);
  }

  .price-grid,
  .audience-grid,
  .closing-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .price-card {
    max-width: 620px;
  }

  .showroom-large {
    margin-top: 34px;
  }
}

@media (max-width: 720px) {
  .subpage-hero h1 {
    font-size: clamp(2.35rem, 8vw, 3.6rem);
  }

  .reason-grid,
  .step-grid,
  .screen-step-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .reason,
  .reason:first-child,
  .step,
  .step:first-child,
  .screen-step,
  .screen-step:first-child {
    padding: 20px 0;
    border-left: 0;
    border-top: 1px solid var(--line-dark);
  }

  .reason:first-child,
  .step:first-child,
  .screen-step:first-child {
    border-top: 0;
  }

  .feature-quad {
    grid-template-columns: minmax(0, 1fr);
  }

  .feature-quad .reason,
  .feature-quad .reason:nth-child(2) {
    border-bottom: 1px solid var(--line-dark);
    padding: 20px 0;
    border-left: 0;
  }

  .feature-quad .reason:nth-child(3) {
    padding: 20px 0;
    border-left: 0;
  }

  .feature-quad .reason:nth-child(4) {
    border-bottom: 0;
  }

  .vertical-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .vertical,
  .vertical:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }

  .value-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .value,
  .value:first-child {
    padding: 20px;
    border-top: 1px solid var(--line-dark);
    border-left: 1px solid var(--line-dark);
  }

  .value:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }

  .value:nth-child(1),
  .value:nth-child(2) {
    border-top: 0;
  }

  .facts-grid,
  .stats-grid,
  .stats-grid.has-rating {
    grid-template-columns: minmax(0, 1fr);
  }

  .fact,
  .fact:first-child,
  .stat-block,
  .stat-block:first-child {
    padding: 16px 0;
    border-top: 1px solid rgba(10, 17, 24, 0.2);
    border-left: 0;
  }

  .fact:first-child,
  .stat-block:first-child {
    border-top: 0;
  }

  .showroom-large img {
    filter: drop-shadow(8px 8px 0 var(--yellow));
  }

  .subpage-frame {
    box-shadow: 8px 8px 0 var(--yellow);
  }

  .closing-actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .closing-actions .btn {
    width: 100%;
  }
}

@media (max-width: 560px) {
  .subpage-hero-grid {
    padding-block: 42px 52px;
  }

  .subpage-hero h1 {
    font-size: clamp(2.1rem, 8.6vw, 2.8rem);
  }

  .subpage-lede {
    font-size: 0.98rem;
  }

  .subpage-actions {
    align-items: stretch;
    flex-direction: column;
    gap: 14px;
  }

  .subpage-actions .btn {
    width: 100%;
  }

  .subpage-actions .text-link {
    align-self: flex-start;
  }

  .subpage-caption {
    margin-left: 0;
  }

  .value-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .value,
  .value:first-child {
    padding-left: 0;
    border-left: 0;
  }

  .value:nth-child(1),
  .value:nth-child(2) {
    border-top: 1px solid var(--line-dark);
  }

  .value:first-child {
    border-top: 0;
  }

  .price-card {
    padding: 24px;
  }

  .showroom-large img {
    filter: drop-shadow(6px 6px 0 var(--yellow));
  }

  .showroom-large .frame-tag {
    top: 10px;
    left: 10px;
  }

  .subpage-frame {
    box-shadow: 6px 6px 0 var(--yellow);
  }

  .subpage-frame .frame-tag {
    top: 10px;
    left: 10px;
  }
}

/* Quote form modal (business and Screen prototypes) */

body.quote-open {
  overflow: hidden;
}

.quote-backdrop {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(10, 17, 24, 0.78);
}

.quote-backdrop[hidden],
.quote-body[hidden],
.quote-success[hidden],
.quote-format[hidden],
.quote-error[hidden],
.quote-demo[hidden],
.quote-field[hidden] {
  display: none;
}

.quote-panel {
  width: min(620px, 100%);
  max-height: 88vh;
  overflow-y: auto;
  border: 1px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  box-shadow: 14px 14px 0 var(--yellow);
}

.quote-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 24px;
  border-bottom: 1px solid var(--line-dark);
}

.quote-head .mono {
  margin-bottom: 8px;
  color: var(--muted-dark);
  font-size: 8px;
}

.quote-head h2 {
  font-size: clamp(1.55rem, 3vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
}

.quote-subtitle {
  margin-top: 7px;
  color: var(--muted-dark);
  font-size: 0.86rem;
  line-height: 1.45;
}

.quote-close {
  display: grid;
  width: 36px;
  height: 36px;
  flex: none;
  place-items: center;
  border: 1px solid var(--line-dark);
  background: var(--paper-3);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 20px;
  line-height: 1;
  transition: background-color 160ms ease;
}

.quote-close:hover {
  background: var(--yellow);
}

.quote-body {
  padding: 24px;
}

.quote-format {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-dark);
}

.quote-format span {
  color: var(--muted-dark);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.quote-format strong {
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.quote-form {
  display: grid;
  gap: 14px;
}

.quote-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.quote-field {
  display: block;
}

.quote-field > span {
  display: block;
  margin-bottom: 6px;
  color: var(--muted-dark);
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.quote-field input,
.quote-field select,
.quote-field textarea {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--line-dark);
  border-radius: 2px;
  outline: none;
  background: var(--paper-3);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 0.92rem;
  line-height: 1.4;
}

.quote-field input:focus,
.quote-field select:focus,
.quote-field textarea:focus {
  border-color: var(--ink);
  outline: 2px solid var(--yellow);
  outline-offset: 0;
}

.quote-field textarea {
  min-height: 96px;
  resize: vertical;
}

.quote-honeypot {
  display: none;
}

.quote-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  margin-top: 2px;
}

.quote-submit {
  width: 100%;
}

.quote-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.quote-mail {
  border-bottom: 1px solid currentColor;
  color: var(--muted-dark);
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.4;
  text-transform: uppercase;
}

.quote-mail:hover {
  color: var(--ink);
}

.quote-demo {
  width: 100%;
  margin: 0;
  color: var(--muted-dark);
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: 0.05em;
  line-height: 1.5;
  text-transform: uppercase;
}

.quote-error {
  margin: 0;
  color: #a7441a;
  font-size: 0.82rem;
  line-height: 1.5;
}

.quote-success {
  padding: 48px 32px 52px;
  text-align: center;
}

.quote-check {
  display: inline-grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border: 1px solid var(--ink);
  background: var(--yellow);
  color: var(--ink);
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
}

.quote-success h3 {
  margin: 18px 0 8px;
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -0.04em;
}

.quote-success p {
  margin: 0 auto;
  max-width: 38ch;
  color: var(--muted-dark);
  font-size: 0.9rem;
  line-height: 1.6;
}

@media (max-width: 560px) {
  .quote-backdrop {
    padding: 12px;
  }

  .quote-panel {
    max-height: 92vh;
    box-shadow: 8px 8px 0 var(--yellow);
  }

  .quote-head,
  .quote-body {
    padding: 18px;
  }

  .quote-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .quote-success {
    padding: 38px 22px 42px;
  }
}

/* Screen showroom teaser */

.showroom-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  align-items: center;
  gap: 56px;
}

.showroom-copy h2 {
  max-width: 15ch;
}

.showroom-copy > p:not(.section-index) {
  max-width: 45ch;
  margin-top: 22px;
  color: var(--muted-dark);
  font-size: 0.98rem;
  line-height: 1.66;
}

.showroom-copy .btn {
  margin-top: 28px;
}

.showroom-note {
  margin-top: 14px;
  color: var(--muted-dark);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.06em;
  line-height: 1.5;
  text-transform: uppercase;
}

.showroom-teaser {
  position: relative;
  width: 100%;
  max-width: 620px;
  margin-left: auto;
}

.showroom-teaser-link {
  position: relative;
  display: block;
}

.showroom-teaser-link img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(12px 12px 0 var(--yellow));
}

.showroom-teaser .frame-tag {
  top: 14px;
  left: 14px;
}

.showroom-teaser-cta {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  border: 1px solid var(--ink);
  background: var(--yellow);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  transition: transform 160ms ease;
}

.showroom-teaser-link:hover .showroom-teaser-cta {
  transform: translate(-2px, -2px);
}

.showroom-teaser figcaption {
  max-width: 44ch;
  margin: 18px 0 0 auto;
  color: var(--muted-dark);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  line-height: 1.6;
  text-transform: uppercase;
}

@media (max-width: 980px) {
  .showroom-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }

  .showroom-copy h2 {
    max-width: 18ch;
  }

  .showroom-teaser {
    max-width: 720px;
    margin-left: 0;
  }
}

@media (max-width: 720px) {
  .showroom-teaser-link img {
    filter: drop-shadow(8px 8px 0 var(--yellow));
  }

  .showroom-teaser figcaption {
    margin-left: 0;
  }
}

@media (max-width: 560px) {
  .showroom-copy .btn {
    width: 100%;
  }

  .showroom-teaser-link img {
    filter: drop-shadow(6px 6px 0 var(--yellow));
  }

  .showroom-teaser .frame-tag {
    top: 10px;
    left: 10px;
  }

  .showroom-teaser-cta {
    right: 10px;
    bottom: 10px;
    padding: 7px 9px;
  }

  .showroom-teaser figcaption {
    font-size: 8px;
  }
}
/* Screen purpose and story */

.purpose-section {
  padding: 64px 0;
}

.purpose-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  align-items: center;
  gap: 56px;
}

.purpose-copy h2 {
  max-width: 16ch;
  font-size: clamp(2.1rem, 3.3vw, 3.2rem);
  line-height: 1;
}

.purpose-copy > p:not(.section-index) {
  max-width: 45ch;
  margin-top: 20px;
  color: var(--muted-dark);
  font-size: 0.98rem;
  line-height: 1.66;
}

.purpose-copy .btn {
  margin-top: 26px;
}

.purpose-visual {
  border: 1px solid var(--ink);
  background: var(--ink);
  box-shadow: 12px 12px 0 var(--yellow);
}

.purpose-visual img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1536 / 1024;
  object-fit: cover;
}

.screen-story {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 46px;
  margin: 38px 0 6px;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--line-dark);
}

.screen-story h3 {
  max-width: 12ch;
  font-size: clamp(1.8rem, 2.8vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1;
}

.screen-story p {
  color: var(--muted-dark);
  font-size: 0.98rem;
  line-height: 1.66;
}

.screen-story p + p {
  margin-top: 16px;
}

.screen-story-quote {
  padding-left: 18px;
  border-left: 3px solid var(--yellow);
  color: var(--ink) !important;
  font-weight: 600;
}

/* Screen message cards */

.message-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--ink);
}

.message-card {
  padding: 26px;
  border-left: 1px solid var(--ink);
  background: var(--paper-3);
}

.message-card:first-child {
  border-left: 0;
}

.message-card h3 {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.message-card p {
  margin-top: 12px;
  color: var(--muted-dark);
  font-size: 0.9rem;
  line-height: 1.6;
}

.message-price {
  display: block;
  margin-top: 18px;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Screen pricing payment note */

.price-payment {
  margin-top: 14px;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.6;
}

@media (max-width: 980px) {
  .purpose-grid,
  .screen-story {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .purpose-visual {
    width: min(100%, 720px);
  }
}

@media (max-width: 720px) {
  .purpose-section {
    padding: 46px 0;
  }

  .message-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .message-card,
  .message-card:first-child {
    border-top: 1px solid var(--ink);
    border-left: 0;
  }

  .message-card:first-child {
    border-top: 0;
  }

  .purpose-visual {
    box-shadow: 8px 8px 0 var(--yellow);
  }
}

@media (max-width: 560px) {
  .purpose-visual {
    box-shadow: 6px 6px 0 var(--yellow);
  }
}

.feature-title {
  max-width: 24ch;
  margin: 34px 0 26px;
  font-size: clamp(1.7rem, 2.8vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1.02;
}

/* GO NOW Screen In-Room add-on */

.inroom-section h2 {
  max-width: 20ch;
  font-size: clamp(2.2rem, 3.8vw, 3.6rem);
}

.inroom-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: start;
  gap: 56px;
  margin-top: 42px;
}

.inroom-copy > p {
  max-width: 48ch;
  color: var(--muted-dark);
  font-size: 1rem;
  line-height: 1.66;
}

.inroom-copy > p + p {
  margin-top: 18px;
}

.inroom-note a {
  border-bottom: 1px solid currentColor;
  color: var(--ink);
  font-weight: 600;
}

.inroom-note a:hover {
  color: var(--muted-dark);
}

.inroom-card {
  width: 100%;
  max-width: 620px;
  margin-left: auto;
}

.inroom-card-title {
  margin: 26px 0 10px;
  color: var(--yellow);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.inroom-card .price-list {
  margin-top: 0;
}

.inroom-card .price-payment {
  margin-top: 8px;
}

.inroom-tier-list {
  border-top: 1px solid var(--line-light);
}

.inroom-tier-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-light);
  color: #c3cfd8;
  font-size: 0.86rem;
  line-height: 1.45;
}

.inroom-tier-list strong {
  color: var(--paper);
  font-weight: 600;
  white-space: nowrap;
}

.inroom-card .btn {
  margin-top: 24px;
}

.inroom-card .price-note {
  margin-top: 18px;
}

@media (max-width: 980px) {
  .inroom-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .inroom-card {
    max-width: 620px;
    margin-left: 0;
  }
}

@media (max-width: 560px) {
  .inroom-tier-list li {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

  .inroom-tier-list strong {
    white-space: normal;
  }
}

/* GO NOW Screen terms page */

.legal-hero .subpage-hero-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  padding-block: 64px 58px;
}

.legal-hero h1 {
  max-width: 18ch;
  margin: 22px 0 18px;
  font-size: clamp(2.75rem, 4.8vw, 4.6rem);
  line-height: 0.94;
}

.legal-hero .subpage-lede {
  max-width: 66ch;
}

.legal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 30px;
  max-width: 66ch;
  margin: 26px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line-light);
}

.legal-meta dt,
.legal-meta dd {
  margin: 0;
}

.legal-meta > div {
  display: flex;
  align-items: baseline;
  gap: 9px;
}

.legal-meta dt {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.legal-meta dd {
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
}

.legal-hero .subpage-actions {
  margin-top: 22px;
}

.legal-section {
  padding: 76px 0 104px;
}

.legal-layout {
  display: grid;
  grid-template-columns: minmax(200px, 240px) minmax(0, 1fr);
  align-items: start;
  gap: 64px;
}

.legal-toc {
  position: sticky;
  top: 110px;
}

.legal-toc .section-index {
  margin-bottom: 12px;
}

.legal-toc ol {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line-dark);
  counter-reset: legal-toc;
}

.legal-toc li {
  counter-increment: legal-toc;
}

.legal-toc a {
  display: grid;
  grid-template-columns: 2.2em minmax(0, 1fr);
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line-dark);
  color: var(--muted-dark);
  font-size: 0.88rem;
  line-height: 1.35;
  transition: color 160ms ease;
}

.legal-toc a::before {
  content: counter(legal-toc, decimal-leading-zero);
  color: var(--muted-dark);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  line-height: 1.9;
}

.legal-toc a:hover {
  color: var(--ink);
}

.legal-doc {
  max-width: 820px;
}

.legal-block {
  padding: 30px 0;
  border-bottom: 1px solid var(--line-dark);
  scroll-margin-top: 110px;
}

.legal-block:first-child {
  padding-top: 0;
}

.legal-block:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.legal-block h2 {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 16px;
  color: var(--ink);
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.12;
}

.legal-h2-number {
  flex: none;
  color: var(--muted-dark);
  font-family: var(--font-mono);
  font-size: 0.62em;
  font-weight: 500;
  letter-spacing: 0.04em;
}

.legal-block p {
  color: var(--muted-dark);
  font-size: 0.96rem;
  line-height: 1.72;
}

.legal-block p + p {
  margin-top: 10px;
}

.clause-no {
  display: inline-block;
  min-width: 2.7em;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.8em;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.legal-alpha {
  display: grid;
  gap: 6px;
  margin: 12px 0 0;
}

.legal-alpha li {
  display: grid;
  grid-template-columns: 2em minmax(0, 1fr);
  gap: 8px;
  color: var(--muted-dark);
  font-size: 0.94rem;
  line-height: 1.65;
}

.legal-alpha-label {
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.82em;
  font-weight: 600;
}

.legal-contact {
  margin-top: 4px;
  padding: 20px 22px;
  border: 1px solid var(--line-dark);
  background: var(--paper-3);
}

.legal-contact > p {
  color: var(--ink);
  font-weight: 600;
}

.legal-contact ul {
  display: grid;
  gap: 6px;
  margin-top: 12px;
}

.legal-contact li {
  color: var(--muted-dark);
  font-size: 0.94rem;
  line-height: 1.6;
}

.legal-contact li > span {
  display: inline-block;
  min-width: 10.5em;
  color: var(--muted-dark);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.legal-contact a {
  border-bottom: 1px solid var(--line-dark);
  color: var(--ink);
}

.legal-contact a:hover {
  border-color: var(--ink);
}

@media (max-width: 980px) {
  .legal-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .legal-toc {
    position: static;
  }

  .legal-toc ol {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 24px;
  }

  .legal-doc {
    max-width: none;
  }
}

@media (max-width: 720px) {
  .legal-hero .subpage-hero-grid {
    padding-block: 46px 52px;
  }

  .legal-section {
    padding: 52px 0 72px;
  }
}

@media (max-width: 560px) {
  .legal-toc ol {
    grid-template-columns: minmax(0, 1fr);
  }

  .legal-block {
    padding: 24px 0;
  }

  .legal-block h2 {
    font-size: 1.32rem;
  }

  .legal-contact {
    padding: 16px;
  }

  .legal-contact li > span {
    display: block;
    min-width: 0;
    margin-bottom: 2px;
  }
}

/* Format comparison (Business page) */
.format-scroll {
  margin-bottom: 28px;
}

.format-compare {
  width: 100%;
  margin-bottom: 0;
  border: 1px solid var(--ink);
  border-collapse: collapse;
  background: var(--paper-3);
  text-align: left;
}

.format-compare caption {
  padding: 14px 18px;
  border-bottom: 1px solid var(--ink);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.format-compare th,
.format-compare td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-dark);
  vertical-align: top;
  font-size: 0.95rem;
  line-height: 1.5;
}

.format-compare tr:last-child th,
.format-compare tr:last-child td {
  border-bottom: 0;
}

.format-compare thead th {
  color: var(--muted-dark);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.format-compare tbody th {
  font-weight: 700;
}

.format-compare-price {
  white-space: nowrap;
}

/* Two-plan comparison (Screen page) */
.plan-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 28px;
}

.plan-grid .price-card {
  display: flex;
  height: 100%;
  flex-direction: column;
}

/* Two plans are read side by side, so their buttons have to line up: the
   reader compares the price, not where the call to action happens to land. */
.plan-grid .price-card .btn {
  margin-top: auto;
}

.plan-grid .price-card > ul:last-of-type {
  margin-bottom: 24px;
}

.plan-note {
  max-width: 78ch;
  margin-top: 24px;
  color: var(--muted-dark);
  font-size: 1rem;
  line-height: 1.6;
}

/* Compact setup and audience section (Screen page) */
.setup-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: start;
  gap: 56px;
}

.setup-steps {
  display: grid;
  gap: 0;
  margin: 24px 0 0;
  padding: 0;
  border-top: 1px solid var(--line-dark);
  list-style: none;
}

.setup-steps li {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line-dark);
}

.setup-steps strong {
  display: block;
  margin-bottom: 3px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.setup-steps p {
  color: var(--muted-dark);
  font-size: 0.95rem;
  line-height: 1.6;
}

.setup-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.setup-tags li {
  padding: 7px 10px;
  border: 1px solid var(--line-dark);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.setup-copy > p {
  max-width: 44ch;
  color: var(--muted-dark);
  font-size: 1rem;
  line-height: 1.65;
}

.setup-grid h2 + .setup-copy,
.setup-grid h3 + .setup-copy {
  margin-top: 18px;
}

/* Quote form inline validation and persistent success */
.quote-field-error {
  margin: 6px 0 0;
  color: #b42318;
  font-size: 0.92rem;
  line-height: 1.4;
}

.quote-field input[aria-invalid="true"] {
  border-color: #b42318;
}

.quote-success .btn {
  margin-top: 18px;
}

@media (max-width: 980px) {
  .plan-grid,
  .setup-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
}

/* Four columns cannot be read at 390px. The table keeps a width its cells
   can hold and scrolls inside its own frame, so the price column stops
   breaking into four lines and the caption no longer slides out of view. */
@media (max-width: 720px) {
  .format-scroll {
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }

  .format-compare {
    min-width: 660px;
  }

  /* The caption labels the whole table, so it reads from the table's left
     edge instead of centring itself under columns that are off screen. */
  .format-compare caption {
    text-align: left;
  }
}

/* Audience rows without a visible index use the full width. */
.vertical.vertical-plain {
  grid-template-columns: minmax(0, 1fr);
}

.plan-notes-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  margin-top: 26px;
}

.plan-notes-grid .plan-notes {
  margin-top: 0;
}

@media (max-width: 980px) {
  .plan-notes-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
}

.plan-notes {
  display: grid;
  gap: 10px;
  max-width: 60ch;
  margin-top: 26px;
  color: var(--muted-dark);
  font-size: 0.95rem;
  line-height: 1.6;
}

.plan-notes a {
  border-bottom: 1px solid currentColor;
  color: var(--ink);
  font-weight: 600;
}

.plan-inherit {
  margin: 26px 0 10px;
  color: var(--paper);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.35;
}

.setup-grid .audience-visual {
  margin-top: 24px;
}

/* City stop list */

.stop-list {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: 720px;
}

.stop-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  padding: 14px 18px;
  border: 1px solid var(--line-dark, rgba(10, 17, 24, 0.16));
  background: rgba(255, 255, 255, 0.4);
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}

.stop-list a:hover,
.stop-list a:focus-visible {
  border-color: var(--ink);
}

.stop-list .mono {
  color: var(--muted-dark, #5a6570);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Traveller guide lead answer */

.airport-answer {
  max-width: 760px;
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.2rem, 2.2vw, 1.6rem);
  line-height: 1.45;
  font-weight: 600;
}

/* Tallinn Airport guide
   The page is one ride, so it is drawn as the ride itself: a board for
   tram 2 in the hero, a fare ledger, a numbered walk to the platform and
   the fare as a paper ticket. Ink, paper, timetable yellow, tram pink. */

.subpage-hero--airport .subpage-hero-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
  align-items: center;
  gap: 64px;
}

.subpage-hero--airport h1 {
  max-width: 15ch;
}

/* The ride board: line, track, two stops, travel time */

.airport-route {
  width: 100%;
  padding: 20px 22px 18px;
  border: 1px solid var(--ink);
  border-radius: 2px;
  background: var(--paper);
  color: var(--ink);
}

.airport-route-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  line-height: 1;
}

.airport-route-line {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.airport-route-badge {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border: 1px solid var(--ink);
  border-radius: 2px;
  background: var(--tram);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
}

.airport-route-mode {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.airport-route-code {
  padding: 4px 7px;
  border: 1px dashed rgba(10, 17, 24, 0.5);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  line-height: 1;
}

.airport-route-track {
  position: relative;
  height: 46px;
  margin: 16px 0 8px;
}

.airport-route-track::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: 13px;
  background-image: repeating-linear-gradient(90deg, rgba(10, 17, 24, 0.22) 0 2px, transparent 2px 13px);
  transform: translateY(-50%);
}

.airport-route-track::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: 7px;
  background-image: linear-gradient(var(--tram), var(--tram)), linear-gradient(var(--tram), var(--tram));
  background-repeat: no-repeat;
  background-position: 0 0, 0 100%;
  background-size: 100% 2px;
  transform: translateY(-50%);
}

.airport-route-cap {
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 2;
  width: 10px;
  height: 10px;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
  transform: translate(-50%, -50%);
}

.airport-route-cap--end {
  right: 0;
  left: auto;
  transform: translate(50%, -50%);
}

.airport-route-tram {
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 3;
  width: 40px;
  height: 24px;
  color: var(--ink);
  transform: translateY(-50%);
  animation: airport-ride 2100ms cubic-bezier(0.34, 0.01, 0.2, 1) 450ms both;
}

@keyframes airport-ride {
  from {
    left: 0;
  }

  to {
    left: calc(100% - 46px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .airport-route-tram {
    left: calc(100% - 46px);
    animation: none;
  }
}

.airport-route-stops {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.airport-route-stop {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.airport-route-stop--end {
  justify-items: end;
  text-align: right;
}

.airport-route-stop-name {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.airport-route-stop-meta {
  color: var(--muted-dark);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
}

.airport-route-measure {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0 0;
  color: var(--muted-dark);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

.airport-route-measure::before,
.airport-route-measure::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(10, 17, 24, 0.2);
}

.airport-route-measure span {
  padding-inline: 2px;
}

/* Glanceable summary: the answer beside a fare ledger */

.airport-summary {
  padding: 72px 0;
}

.airport-summary-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  align-items: start;
  gap: 64px;
}

/* The answer and its ticket button are one thought, so they share one cell.
   As two grid children the button dropped into a second row, and the fare
   ledger next to it set that row's height, leaving the call to action
   stranded a hundred pixels under the sentence it answers. */
.airport-answer-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.airport-summary .airport-answer {
  max-width: 36ch;
  color: var(--ink);
}

.airport-ledger {
  margin: 0;
  border-top: 1px solid rgba(10, 17, 24, 0.34);
}

.airport-ledger-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 0 15px;
  border-bottom: 1px solid rgba(10, 17, 24, 0.34);
}

.airport-ledger dt {
  color: rgba(10, 17, 24, 0.74);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.airport-ledger dd {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* The walk to the platform, drawn as one line */

.airport-steps-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
  align-items: start;
  gap: 64px;
}

.airport-steps {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line-dark);
  list-style: none;
}

.airport-steps li {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: start;
  gap: 20px;
  padding: 20px 0 24px;
  border-bottom: 1px solid var(--line-dark);
}

.airport-steps li::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 22px;
  width: 1px;
  background: rgba(10, 17, 24, 0.2);
}

.airport-steps li:first-child::before {
  top: 42px;
}

.airport-steps li:last-child::before {
  bottom: auto;
  height: 42px;
}

.airport-steps li:nth-child(n + 3)::before {
  background: var(--tram);
}

.airport-step-no {
  position: relative;
  z-index: 1;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid rgba(10, 17, 24, 0.28);
  border-radius: 50%;
  background: var(--paper-2);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.airport-steps li:nth-child(n + 3) .airport-step-no {
  border-color: var(--ink);
  background: var(--tram);
}

.airport-step-copy {
  display: grid;
  gap: 7px;
  padding-top: 5px;
}

.airport-step-tag {
  color: var(--muted-dark);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
}

.airport-steps p {
  max-width: 58ch;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.65;
}

.airport-lines {
  display: grid;
  align-content: start;
  gap: 16px;
  padding-top: 20px;
  border-top: 1px solid var(--line-dark);
}

.airport-lines-label {
  color: var(--muted-dark);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
}

.airport-lines-groups {
  display: grid;
  gap: 10px;
}

.airport-lines-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.airport-lines .text-link {
  justify-self: start;
  margin-top: 4px;
}

.airport-lines-mode {
  margin-right: 2px;
  color: var(--muted-dark);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.airport-line-chip {
  display: inline-grid;
  min-width: 34px;
  height: 34px;
  place-items: center;
  padding: 0 8px;
  border-radius: 2px;
  color: #07131c;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.airport-line-chip--tram {
  background: var(--tram);
}

.airport-line-chip--bus {
  background: var(--bus);
}

/* The fare, on a paper ticket */

.airport-fares-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  align-items: start;
  gap: 64px;
}

.airport-fares-copy h2 {
  max-width: 12ch;
}

.airport-fares-body {
  max-width: 46ch;
  margin-top: 26px;
  color: var(--muted-dark);
  font-size: 1rem;
  line-height: 1.68;
}

.airport-ticket-wrap {
  position: relative;
  width: 100%;
  max-width: 452px;
  justify-self: end;
}

.airport-ticket {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px;
  border: 1px solid var(--ink);
  border-radius: 2px;
  background: var(--paper-3);
  color: var(--ink);
  box-shadow: 0 22px 34px -26px rgba(10, 17, 24, 0.55);
}

.airport-ticket::before,
.airport-ticket::after {
  content: "";
  position: absolute;
  right: 96px;
  z-index: 2;
  width: 16px;
  height: 16px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
  transform: translateX(50%);
}

.airport-ticket::before {
  top: -9px;
}

.airport-ticket::after {
  bottom: -9px;
}

.airport-ticket-main {
  padding: 22px 24px 20px;
}

.airport-ticket-issuer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  color: rgba(10, 17, 24, 0.7);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
}

.airport-ticket-label {
  margin: 24px 0 0;
  color: rgba(10, 17, 24, 0.7);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
}

.airport-ticket-price {
  margin: 7px 0 0;
  font-size: clamp(3.4rem, 5.6vw, 4.4rem);
  font-weight: 800;
  letter-spacing: -0.06em;
  line-height: 0.85;
  font-variant-numeric: tabular-nums;
}

.airport-ticket-valid {
  margin: 12px 0 0;
  color: rgba(10, 17, 24, 0.7);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  line-height: 1.4;
}

.airport-ticket-methods {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 22px 0 0;
  padding: 18px 0 0;
  border-top: 1px dashed rgba(10, 17, 24, 0.32);
  list-style: none;
}

.airport-ticket-methods li {
  padding: 7px 9px;
  border: 1px solid rgba(10, 17, 24, 0.24);
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  line-height: 1;
}

.airport-ticket-stub {
  display: grid;
  grid-template-rows: auto 1fr;
  justify-items: center;
  gap: 10px;
  padding: 74px 12px 20px;
  border-left: 1px dashed rgba(10, 17, 24, 0.45);
  background: var(--yellow);
  text-align: center;
}

.airport-ticket-stub-no {
  font-size: 2.7rem;
  font-weight: 800;
  letter-spacing: -0.06em;
  line-height: 0.85;
  font-variant-numeric: tabular-nums;
}

.airport-ticket-barcode {
  align-self: end;
  width: 100%;
  height: 48px;
  background-image: repeating-linear-gradient(
    90deg,
    var(--ink) 0 1.5px,
    transparent 1.5px 4px,
    var(--ink) 4px 4.8px,
    transparent 4.8px 9px
  );
  opacity: 0.82;
}

/* The postmark sits on the stub corner, half off the paper */

.airport-ticket-stamp {
  position: absolute;
  top: -52px;
  right: 44px;
  width: 104px;
  height: 104px;
  color: var(--ink);
  font-family: var(--font-mono);
  opacity: 0.56;
  transform: rotate(-11deg);
  pointer-events: none;
  mix-blend-mode: multiply;
}

.airport-ticket-stamp-arc {
  fill: currentColor;
  font-size: 6.4px;
  font-weight: 500;
  letter-spacing: 1.1px;
}

.airport-ticket-stamp-code {
  fill: currentColor;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -1px;
}

@media (max-width: 980px) {
  .subpage-hero--airport .subpage-hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 44px;
  }

  .airport-route {
    max-width: 540px;
  }

  .airport-summary-grid,
  .airport-fares-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }

  .airport-steps-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
  }

  .airport-lines {
    padding-top: 0;
    border-top: 0;
  }

  .airport-summary .airport-answer {
    max-width: 34ch;
  }

  .airport-ticket-wrap {
    justify-self: start;
  }
}

@media (max-width: 720px) {
  .airport-summary {
    padding: 56px 0;
  }

  .airport-steps li {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 16px;
    padding: 18px 0 20px;
  }

  .airport-steps li::before {
    left: 20px;
  }

  .airport-steps li:first-child::before {
    top: 38px;
  }

  .airport-steps li:last-child::before {
    height: 38px;
  }

  .airport-step-no {
    width: 40px;
    height: 40px;
  }

  .airport-step-copy {
    padding-top: 4px;
  }

  .airport-steps p {
    font-size: 0.97rem;
  }
}

@media (max-width: 560px) {
  .airport-route {
    padding: 18px;
  }

  .airport-route-stops {
    gap: 16px;
  }

  .airport-route-stop-name {
    font-size: 0.94rem;
  }

  .airport-route-track {
    height: 40px;
  }

  .airport-ticket {
    grid-template-columns: minmax(0, 1fr) 84px;
  }

  .airport-ticket::before,
  .airport-ticket::after {
    right: 84px;
  }

  .airport-ticket-main {
    padding: 18px 18px 16px;
  }

  .airport-ticket-price {
    font-size: 3.3rem;
  }

  .airport-ticket-valid {
    font-size: 11px;
  }

  .airport-ticket-methods {
    margin-top: 18px;
    padding-top: 14px;
  }

  .airport-ticket-stub {
    padding: 66px 8px 16px;
  }

  .airport-ticket-barcode {
    height: 40px;
  }

  .airport-ticket-stamp {
    top: -44px;
    right: 38px;
    width: 92px;
    height: 92px;
  }

  .airport-ledger dd {
    font-size: 1.18rem;
  }
}

/* The close: the line runs into the city, then hands over to the app */

.airport-close-route {
  display: flex;
  align-items: center;
  margin: 0 0 42px;
}

.airport-close-line {
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 143, 160, 0.55) 32%, var(--tram));
}

.airport-close-stop {
  width: 13px;
  height: 13px;
  margin-left: -1px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--tram);
}

.airport-close-name {
  margin-left: 12px;
  color: rgba(242, 238, 227, 0.62);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
}

@media (max-width: 560px) {
  .airport-close-route {
    margin-bottom: 32px;
  }

  .airport-close-name {
    letter-spacing: 0.1em;
  }
}

/* The long Lithuanian app label overflows the header below 430px, so the
   button keeps its arrow and its accessible name and drops the label. */

@media (max-width: 430px) {
  html[lang='lt'] .header-cta .btn-compact {
    width: 40px;
    padding: 0;
    gap: 0;
    font-size: 0;
  }

  html[lang='lt'] .header-cta .btn-compact svg {
    width: 16px;
    height: 16px;
  }
}

/* Planner location note under the actions */

.plan-note {
  max-width: 460px;
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.5;
}

/* City hero: a phone screenshot, not a full-bleed illustration */

.subpage-hero--city .subpage-hero-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
  gap: 48px;
}

.subpage-hero--city h1 {
  max-width: 20ch;
  font-size: clamp(2.6rem, 4.4vw, 4.2rem);
}

.subpage-visual--phone {
  width: 100%;
  max-width: 290px;
  justify-self: end;
}

.subpage-visual--phone .subpage-frame {
  box-shadow: 10px 10px 0 var(--yellow);
}

@media (max-width: 980px) {
  .subpage-hero--city .subpage-hero-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .subpage-visual--phone {
    max-width: 260px;
    justify-self: start;
  }
}

/* Airport guide hero photograph */

.airport-photo {
  margin: 0;
  width: 100%;
  max-width: 460px;
  justify-self: end;
  border: 1px solid var(--line-light);
  background: var(--ink);
}

.airport-photo img {
  display: block;
  width: 100%;
  height: auto;
}

.airport-photo-caption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  padding: 12px 14px;
  border-top: 1px solid var(--line-light);
  color: #b9c5cf;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.airport-photo-line {
  color: var(--yellow);
}

.airport-photo-route {
  flex: 1 1 auto;
}

.airport-photo-duration {
  color: var(--yellow);
}

/* Ticket calls to action */

.airport-buy {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 10px;
  margin-top: 20px;
  padding: 12px 16px;
  border: 2px solid var(--ink);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
}

.airport-buy svg {
  width: 16px;
  height: 16px;
}

.airport-buy:hover,
.airport-buy:focus-visible {
  background: var(--ink);
  color: var(--yellow);
}

.airport-ticket-buy {
  margin-top: 22px;
}

@media (max-width: 980px) {
  .airport-photo {
    max-width: 100%;
    justify-self: stretch;
  }
}

/* City pages
   The page is the line. A route spine runs down the sections and fills as
   the reader moves through it, the hero rail names the networks the app
   covers, and the close is the terminus of the ride. Ink, paper, timetable
   yellow, mono only for time and wayfinding labels. */

.city-page .subpage-hero--city {
  border-bottom: 0;
}

.city-page .subpage-hero--city .subpage-hero-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  gap: 48px;
  padding-block: 44px 20px;
}

.city-page .subpage-hero--city h1 {
  max-width: 21ch;
  margin-bottom: 22px;
  font-size: clamp(2.5rem, 4.05vw, 3.95rem);
  letter-spacing: -0.048em;
  line-height: 0.95;
}

.city-page .subpage-hero--city .subpage-lede {
  max-width: 54ch;
}

/* The phone sits on the page like a live board: the real local time is
   printed under it, so the screenshot and the clock agree. */

.city-phone {
  position: relative;
}

.city-phone-caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--line-light);
  color: #b9c5cf;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
}

.city-phone-live {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.city-phone-clock {
  color: var(--yellow);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

/* Cities rail: one line, one stop per network, drawn on load. */

.city-rail {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  padding: 18px 0 26px;
  border-top: 1px solid var(--line-light);
}

.city-rail-label {
  flex: none;
  padding-bottom: 3px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
}

/* The stops share the line. Bunched at the far end they read as a footnote;
   spread along it, the line becomes the route it is named after and the
   current city sits where a rider would look for it. Equal columns keep the
   dots evenly spaced whatever the city count, and each stop draws the
   segment that reaches the next one, so the line starts and ends on a dot. */
.city-rail-list {
  position: relative;
  display: grid;
  flex: 1;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  align-items: start;
}

.city-rail-stop {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 11px;
  color: #c9d3db;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
}

.city-rail-stop::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 0;
  width: 100%;
  height: 1px;
  background: rgba(242, 238, 227, 0.28);
  transform-origin: left center;
  animation: city-line-draw 900ms 160ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.city-rail-list li:last-child .city-rail-stop::before {
  display: none;
}

.city-rail-dot {
  position: relative;
  z-index: 1;
  width: 9px;
  height: 9px;
  border: 1px solid rgba(242, 238, 227, 0.55);
  border-radius: 50%;
  background: var(--ink);
  animation: city-dot-pop 420ms cubic-bezier(0.16, 1, 0.3, 1) both;
  transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.city-rail-list li:nth-child(2) .city-rail-dot {
  animation-delay: 240ms;
}

.city-rail-list li:nth-child(3) .city-rail-dot {
  animation-delay: 320ms;
}

.city-rail-list li:nth-child(4) .city-rail-dot {
  animation-delay: 400ms;
}

.city-rail-list li:nth-child(5) .city-rail-dot {
  animation-delay: 480ms;
}

.city-rail-list li:nth-child(6) .city-rail-dot {
  animation-delay: 560ms;
}

.city-rail-stop:hover,
.city-rail-stop:focus-visible {
  color: var(--yellow);
}

.city-rail-stop:hover .city-rail-dot,
.city-rail-stop:focus-visible .city-rail-dot {
  border-color: var(--yellow);
  background: var(--yellow);
  transform: scale(1.25);
}

.city-rail-stop.is-current {
  color: var(--yellow);
}

.city-rail-stop.is-current .city-rail-dot {
  border-color: var(--yellow);
  background: var(--yellow);
  box-shadow: 0 0 0 4px rgba(245, 207, 51, 0.2);
}

/* The spine: every section is a stop on one continuous line. */

.city-section {
  overflow: hidden;
  padding: 88px 0;
}

.city-section-grid {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 36px;
}

.city-section-rail {
  position: relative;
}

.city-rail-track {
  position: absolute;
  top: -88px;
  bottom: -88px;
  left: 50%;
  width: 2px;
  background: rgba(10, 17, 24, 0.18);
  transform: translateX(-50%);
}

.city-rail-track::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--yellow);
  transform: scaleY(var(--flow, 0));
  transform-origin: top center;
}

.city-stop-dot {
  position: absolute;
  top: 6px;
  left: 50%;
  width: 13px;
  height: 13px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
  transform: translateX(-50%);
  transition: background-color 220ms ease, box-shadow 220ms ease;
}

.city-rail-head {
  position: absolute;
  top: calc(var(--flow, 0) * 100%);
  left: 50%;
  width: 10px;
  height: 10px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--yellow);
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity 200ms ease;
  z-index: 1;
}

.city-section.is-current .city-rail-head {
  opacity: 1;
}

.city-section.is-passed .city-stop-dot {
  background: var(--yellow);
}

.city-section.is-current .city-stop-dot {
  box-shadow: 0 0 0 6px rgba(245, 207, 51, 0.22);
}

/* Section heads on a city page are a step below the display line, so the
   page keeps one loud moment (the hero) instead of five. */

.city-page .city-section h2,
.city-page .city-terminus h2 {
  font-size: clamp(2rem, 3.15vw, 2.85rem);
  letter-spacing: -0.042em;
  line-height: 1.02;
}

.city-page .city-section .section-head {
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  align-items: end;
  gap: 48px;
  padding-bottom: 34px;
}

.city-page .city-section .section-head h2 {
  max-width: 26ch;
}

.city-page .city-section .section-lede {
  max-width: 42ch;
  font-size: 1rem;
  line-height: 1.62;
}

/* The three things, drawn as three short routes rather than cards. */

.city-page .feature-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 6px;
  border-bottom: 1px solid var(--line-dark);
}

.city-page .feature {
  padding: 30px 30px 36px;
}

.city-page .feature:first-child {
  padding-left: 0;
}

.city-page .feature:last-child {
  padding-right: 0;
}

.city-feature-line {
  display: block;
  width: 72px;
  height: 24px;
  margin-bottom: 24px;
  color: var(--ink);
}

.city-feature-line svg {
  width: 72px;
  height: 24px;
  overflow: visible;
}

.city-feature-line path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.city-feature-line .is-live {
  fill: var(--yellow);
  stroke: var(--ink);
  stroke-width: 2;
}

.city-feature-line .is-node {
  fill: var(--paper);
  stroke: var(--ink);
  stroke-width: 2;
}

.city-feature-line .is-vehicle {
  fill: var(--ink);
  stroke: var(--ink);
  stroke-width: 2;
}

.city-feature-line .is-window {
  fill: var(--yellow);
  stroke: none;
}

.city-page .feature h3 {
  margin: 0 0 10px;
  font-size: 1.18rem;
  letter-spacing: -0.028em;
}

.city-page .feature p {
  max-width: 34ch;
  font-size: 0.98rem;
  line-height: 1.6;
}

/* The board: main stops as a departures list you can open in one move. */

.city-stops-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: 64px;
  align-items: start;
}

.city-stops-intro h2 {
  max-width: 14ch;
}

.city-stops-intro .section-lede {
  max-width: 34ch;
  margin-top: 22px;
  justify-self: start;
}

.city-board {
  border-top: 1px solid var(--ink);
}

.city-board-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-inline: -16px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--line-dark);
  color: var(--muted-dark);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.13em;
  line-height: 1;
  text-transform: uppercase;
}

.city-board-head span:last-child {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.city-board-head .dot-live {
  width: 6px;
  height: 6px;
}

.city-board-row {
  position: relative;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin-inline: -16px;
  padding: 21px 16px;
  border-bottom: 1px solid var(--line-dark);
  color: var(--ink);
  transition: background-color 200ms ease, color 200ms ease;
}

.city-board-mark {
  width: 9px;
  height: 9px;
  justify-self: start;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: transparent;
  transition: background-color 200ms ease, border-color 200ms ease;
}

.city-board-name {
  font-size: clamp(1.06rem, 1.5vw, 1.24rem);
  font-weight: 600;
  letter-spacing: -0.026em;
  line-height: 1.2;
}

.city-board-go {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--muted-dark);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  transition: color 200ms ease;
}

.city-board-go svg {
  width: 15px;
  height: 15px;
  transition: transform 200ms ease;
}

.city-board-row:hover,
.city-board-row:focus-visible {
  background: var(--ink);
  color: var(--paper);
}

.city-board-row:hover .city-board-mark,
.city-board-row:focus-visible .city-board-mark {
  border-color: var(--yellow);
  background: var(--yellow);
}

.city-board-row:hover .city-board-go,
.city-board-row:focus-visible .city-board-go {
  color: var(--yellow);
}

.city-board-row:hover .city-board-go svg,
.city-board-row:focus-visible .city-board-go svg {
  transform: translateX(4px);
}

.city-board-row:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: -4px;
}

/* The route section: one paragraph, read at the size it deserves. */

.city-route-copy {
  max-width: 62ch;
}

.city-route-copy h2 {
  max-width: 20ch;
  margin-bottom: 24px;
}

.city-route-copy::before {
  content: "";
  display: block;
  width: 64px;
  height: 3px;
  margin-bottom: 28px;
  background: var(--yellow);
}

.city-route-copy p {
  max-width: 52ch;
  color: var(--ink);
  font-size: clamp(1.14rem, 1.55vw, 1.34rem);
  font-weight: 500;
  letter-spacing: -0.016em;
  line-height: 1.56;
}

.city-route-guide {
  margin-top: 28px;
}

.city-page .city-section .faq-intro h2 {
  font-size: clamp(2rem, 3vw, 2.7rem);
}

/* The close: the line runs into the city, then hands over to the app. */

.city-terminus {
  padding: 92px 0 96px;
}

.city-terminus-route {
  display: flex;
  align-items: center;
  margin: 0 0 40px;
}

.city-terminus-line {
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(245, 207, 51, 0.4) 30%, var(--yellow));
}

.city-terminus-stop {
  width: 13px;
  height: 13px;
  margin-left: -1px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--yellow);
}

.city-terminus-name {
  margin-left: 12px;
  color: var(--yellow);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
}

.city-page .city-terminus .section-head {
  padding-bottom: 34px;
  border-color: var(--line-light);
}

.city-page .city-terminus .download-actions {
  margin-top: 30px;
}

.city-page .city-terminus .store-link:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 4px;
}

@keyframes city-line-draw {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

@keyframes city-dot-pop {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.6);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 980px) {
  .city-page .subpage-hero--city .subpage-hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 44px;
    padding-block: 54px 40px;
  }

  .city-page .subpage-visual--phone {
    max-width: 260px;
    justify-self: center;
  }

  .city-section {
    padding: 68px 0;
  }

  .city-section-grid {
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 22px;
  }

  .city-rail-track {
    top: -68px;
    bottom: -68px;
  }

  .city-page .city-section .section-head {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 18px;
  }

  .city-page .feature-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .city-page .feature {
    padding: 28px 0 30px;
    border-left: 0;
    border-top: 1px solid var(--line-dark);
  }

  .city-page .feature:first-child {
    border-top: 0;
  }

  .city-feature-line {
    margin-bottom: 18px;
  }

  .city-stops-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
  }

  .city-stops-intro h2 {
    max-width: 20ch;
  }

  .city-rail {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }

  .city-rail-list {
    width: 100%;
  }

  .city-rail-stop::before {
    display: none;
  }

  .city-board-row {
    margin-inline: 0;
    padding-inline: 0;
    gap: 12px;
  }

  .city-board-head {
    margin-inline: 0;
    padding-inline: 0;
  }

  .city-board-row:hover,
  .city-board-row:focus-visible {
    background: transparent;
    color: var(--ink);
  }

  .city-board-row:hover .city-board-name,
  .city-board-row:focus-visible .city-board-name {
    color: var(--yellow-dark);
  }

  .city-board-row:hover .city-board-go,
  .city-board-row:focus-visible .city-board-go {
    color: var(--ink);
  }

  .city-board-row:hover .city-board-mark,
  .city-board-row:focus-visible .city-board-mark {
    border-color: var(--ink);
    background: var(--yellow);
  }

  .city-board-row:focus-visible {
    outline-color: var(--ink);
    outline-offset: 2px;
  }

  .city-terminus {
    padding: 70px 0 76px;
  }
}

@media (max-width: 720px) {
  .city-section-grid {
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 16px;
  }

  .city-section {
    padding: 58px 0;
  }

  .city-rail-track {
    top: -58px;
    bottom: -58px;
  }

  .city-stop-dot {
    top: 4px;
    width: 11px;
    height: 11px;
  }

  .city-rail-stop {
    font-size: 0.9rem;
  }

  .city-board-head {
    font-size: 11px;
    letter-spacing: 0.1em;
  }

  .city-board-go span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .city-terminus-route {
    margin-bottom: 30px;
  }

  .city-terminus-name {
    letter-spacing: 0.08em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .city-rail-stop::before,
  .city-rail-dot,
  .city-page .dot-live {
    animation: none;
  }

  .city-rail-dot,
  .city-stop-dot,
  .city-board-row,
  .city-board-go,
  .city-board-go svg {
    transition: none;
  }
}