/* Q / Signal, identity v2. Product colours retain their semantic roles. */
.brand { font-family: var(--font); font-weight: 700; letter-spacing: -.035em; }
.brand small { letter-spacing: 0; }
.hero h1 {
  font-family: var(--font); font-weight: 700;
  font-size: clamp(2.3rem, 4.4vw, 3.7rem);
  letter-spacing: -.045em; line-height: 1.13;
}
.hero::before { background: none; }
.hero-visual::before {
  inset: 0 0 10px 12%; border: 26px solid var(--line); border-radius: 50%;
  background: none; opacity: .28; transform: none; pointer-events: none;
}
.route-demo { background: var(--surface); box-shadow: 0 8px 24px var(--shadow); }
.delay-notification { background: var(--surface2); box-shadow: none; }
.feature-icon { border-radius: 50%; }
.how::before {
  inset: auto -90px -220px auto; width: 560px; height: 560px;
  border: 56px solid #a9bbcf; border-radius: 50%; background: none;
}
@media (max-width: 760px) {
  .hero h1 { font-size: clamp(2.15rem, 9vw, 3.3rem); }
  .hero-visual::before { border-width: 18px; }
}