/* Yau Apps website. Clean and calm: white, lots of space, deep navy with one jade accent.
   System fonts only (nothing is loaded from other companies' servers: no tracking, fast). */

:root {
  --navy: #0E2747;
  --navy-2: #173A66;
  --ink: #0E2747;          /* headings */
  --text: #243447;         /* body text, 11:1 on white */
  --muted: #526276;        /* small print, 6.3:1 on white */
  --bg: #FFFFFF;
  --soft: #F5F7FA;         /* quiet section background */
  --line: #E2E7EE;
  --jade: #0B6B57;         /* jade text and links on white, 6.5:1 */
  --jade-bright: #2FBF9B;  /* decoration only (never text on white) */
  --jade-soft: #E7F5F0;
  --radius: 14px;
  --radius-big: 24px;
  --max: 1120px;
  --shadow: 0 1px 2px rgba(14, 39, 71, 0.06), 0 10px 30px rgba(14, 39, 71, 0.08);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", sans-serif;
}

:lang(zh-CN) {
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto; /* keep the picture's shape when its width is set */
}

a {
  color: var(--jade);
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--navy);
}

:focus-visible {
  outline: 3px solid var(--jade-bright);
  outline-offset: 3px;
  border-radius: 6px;
}

h1,
h2,
h3 {
  color: var(--ink);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0;
}

/* Headings break at a natural place: in Chinese only at punctuation (not inside a word), and
   balanced lines in browsers that can. */
h1,
h2,
h3 {
  text-wrap: balance;
}

:lang(zh-HK) h1, :lang(zh-HK) h2, :lang(zh-HK) h3,
:lang(zh-CN) h1, :lang(zh-CN) h2, :lang(zh-CN) h3 {
  letter-spacing: 0;
  line-height: 1.3;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

p {
  margin: 0;
}

.wrap {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 1.25rem;
}

.skip {
  position: absolute;
  left: -999px;
}

.skip:focus {
  left: 1rem;
  top: 1rem;
  z-index: 100;
  padding: 0.5rem 1rem;
  background: var(--navy);
  color: #fff;
}

/* ---- Header ---- */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}

.header .wrap {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 4.25rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--ink);
  text-decoration: none;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.brand img {
  width: 2rem;
  height: 2rem;
}

.brand span {
  font-weight: 500;
}

.nav {
  display: flex;
  gap: 0.25rem;
  margin-left: auto;
}

.nav a {
  padding: 0.5rem 0.75rem;
  border-radius: 999px;
  color: var(--text);
  font-weight: 600;
  font-size: 0.98rem;
  text-decoration: none;
}

.nav a:hover,
.nav a[aria-current='page'] {
  background: var(--soft);
  color: var(--ink);
}

.langs {
  display: flex;
  gap: 0.15rem;
  padding: 0.2rem;
  border: 1px solid var(--line);
  border-radius: 999px;
}

.langs a {
  min-width: 2.25rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}

.langs a[aria-current='true'] {
  background: var(--navy);
  color: #fff;
}

.menu-button {
  display: none;
}

/* Phones: the page links move under the logo, the languages stay at the top right. */
@media (max-width: 860px) {
  .header .wrap {
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    padding-top: 0.6rem;
    padding-bottom: 0.4rem;
  }

  .langs {
    margin-left: auto;
  }

  .nav {
    order: 3;
    width: 100%;
    margin: 0 -0.5rem;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .nav a {
    padding: 0.45rem 0.65rem;
    white-space: nowrap;
  }
}

/* ---- Buttons ---- */
.buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3.1rem;
  padding: 0.7rem 1.4rem;
  border-radius: 999px;
  border: 2px solid var(--navy);
  background: var(--navy);
  color: #fff;
  font-weight: 700;
  font-size: 1.02rem;
  text-decoration: none;
  transition: transform 0.15s ease, background 0.15s ease;
}

.button:hover {
  background: var(--navy-2);
  border-color: var(--navy-2);
  color: #fff;
  transform: translateY(-1px);
}

.button.secondary {
  background: transparent;
  color: var(--navy);
}

.button.secondary:hover {
  background: var(--soft);
}

.button.light {
  background: #fff;
  border-color: #fff;
  color: var(--navy);
}

.button.light:hover {
  background: var(--jade-soft);
  border-color: var(--jade-soft);
}

.soon {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 3.1rem;
  padding: 0.55rem 1.1rem 0.55rem 0.9rem;
  border-radius: 12px;
  border: 1.5px dashed currentColor;
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.25;
  opacity: 0.9;
}

.soon small {
  display: block;
  font-weight: 500;
  font-size: 0.8rem;
  opacity: 0.85;
}

/* ---- Hero ---- */
.hero {
  position: relative;
  overflow: hidden;
  padding: 4.5rem 0 4rem;
  background:
    radial-gradient(60rem 30rem at 85% -10%, rgba(47, 191, 155, 0.12), transparent 60%),
    radial-gradient(50rem 30rem at -10% 110%, rgba(23, 58, 102, 0.07), transparent 60%);
}

.hero .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 3rem;
  align-items: center;
}

.hero h1 {
  font-size: clamp(2.5rem, 6vw, 4.25rem);
  font-weight: 800;
}

.hero h1 .second {
  display: block;
  color: var(--navy-2);
  opacity: 0.78;
  font-weight: 700;
}

.lead {
  max-width: 34rem;
  margin-top: 1.4rem;
  font-size: 1.22rem;
  color: var(--text);
}

.hero .buttons {
  margin-top: 2rem;
}

.ticks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-weight: 600;
  font-size: 0.97rem;
}

.ticks li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.ticks li::before {
  content: '';
  width: 1.1rem;
  height: 1.1rem;
  flex: none;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23E7F5F0'/%3E%3Cpath d='M5.5 10.3l3 3 6-6.3' stroke='%230B6B57' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* A phone with a real screen of the app. */
.phone {
  position: relative;
  width: min(100%, 19rem);
  margin: 0 auto;
  padding: 0.7rem;
  border-radius: 2.6rem;
  background: #0B1626;
  box-shadow: 0 2px 4px rgba(14, 39, 71, 0.1), 0 30px 60px rgba(14, 39, 71, 0.22);
}

.phone img {
  width: 100%;
  border-radius: 2rem;
  background: #fff;
}

.phone.tilt {
  transform: rotate(2deg);
}

.hero-art {
  position: relative;
}

.hero-art::before {
  content: '';
  position: absolute;
  inset: 8% -6% 4% 10%;
  border-radius: 40%;
  background: radial-gradient(closest-side, rgba(47, 191, 155, 0.22), transparent);
  filter: blur(10px);
}

@media (max-width: 860px) {
  .hero {
    padding: 2.75rem 0 3rem;
  }

  .hero .wrap {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
  }

  .phone {
    width: min(78%, 17rem);
  }
}

/* ---- Sections ---- */
.section {
  padding: 5rem 0;
}

.section.soft {
  background: var(--soft);
}

.section-head {
  max-width: 44rem;
  margin-bottom: 2.75rem;
}

.section-head h2 {
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  font-weight: 800;
}

.section-head p {
  margin-top: 0.9rem;
  font-size: 1.12rem;
  color: var(--muted);
}

.kicker {
  display: block;
  margin-bottom: 0.75rem;
  color: var(--jade);
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

:lang(zh-HK) .kicker,
:lang(zh-CN) .kicker {
  letter-spacing: 0.08em;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.25rem;
}

.card {
  padding: 1.75rem;
  border-radius: var(--radius-big);
  background: var(--bg);
  border: 1px solid var(--line);
}

.section.soft .card {
  border-color: transparent;
  box-shadow: var(--shadow);
}

.card h3 {
  margin: 1.1rem 0 0.5rem;
  font-size: 1.25rem;
}

.card p {
  color: var(--muted);
}

.icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 14px;
  background: var(--jade-soft);
  color: var(--jade);
}

.icon svg {
  width: 1.6rem;
  height: 1.6rem;
}

.more-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 2rem;
  font-weight: 700;
  text-decoration: none;
}

.more-link::after {
  content: '→';
  transition: transform 0.15s ease;
}

.more-link:hover::after {
  transform: translateX(3px);
}

/* ---- The featured app, on navy ---- */
.band {
  position: relative;
  overflow: hidden;
  padding: 3.5rem;
  border-radius: 32px;
  background:
    radial-gradient(40rem 22rem at 100% 0%, rgba(47, 191, 155, 0.25), transparent 60%),
    linear-gradient(150deg, #0E2747, #12305A);
  color: #D9E2EE;
}

.band .wrap {
  padding: 0;
}

.band-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 3rem;
  align-items: center;
}

.band h2,
.band h3 {
  color: #fff;
}

.band .kicker {
  color: var(--jade-bright);
}

.app-title {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.app-title img {
  width: 4.25rem;
  height: 4.25rem;
  border-radius: 18px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.app-title h2 {
  font-size: clamp(2rem, 4vw, 2.6rem);
  font-weight: 800;
}

.app-title .zh {
  display: block;
  margin-top: 0.15rem;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #A9B9CE;
}

.band .lead {
  color: #D9E2EE;
}

.checklist {
  display: grid;
  gap: 0.7rem;
  margin: 1.75rem 0 2rem;
  padding: 0;
  list-style: none;
}

.checklist li {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
}

.checklist li::before {
  content: '';
  flex: none;
  width: 1.35rem;
  height: 1.35rem;
  margin-top: 0.18rem;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%232FBF9B'/%3E%3Cpath d='M5.5 10.3l3 3 6-6.3' stroke='%230E2747' stroke-width='2.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.band .soon {
  color: #fff;
}

@media (max-width: 860px) {
  .band {
    padding: 2.25rem 1.5rem;
    border-radius: 24px;
  }

  .band-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.25rem;
  }
}

.next-apps {
  margin-top: 2.5rem;
  text-align: center;
  color: var(--muted);
  font-weight: 600;
}

.next-apps span {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  background: var(--soft);
}

.next-apps span::before {
  content: '';
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--jade-bright);
  box-shadow: 0 0 0 4px rgba(47, 191, 155, 0.2);
}

/* ---- Page heads (inner pages) ---- */
.page-head {
  padding: 4rem 0 2.5rem;
  background: radial-gradient(50rem 22rem at 90% -20%, rgba(47, 191, 155, 0.1), transparent 60%);
}

.page-head h1 {
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  font-weight: 800;
}

.page-head .lead {
  max-width: 42rem;
}

/* ---- Promise list ---- */
.promises {
  display: grid;
  gap: 1.25rem;
  counter-reset: promise;
}

.promise {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.25rem;
  padding: 1.75rem;
  border-radius: var(--radius-big);
  border: 1px solid var(--line);
}

.promise h2 {
  font-size: 1.4rem;
  margin-bottom: 0.4rem;
}

.promise p {
  color: var(--muted);
  max-width: 46rem;
}

/* ---- The YauBus page ---- */
.app-hero {
  padding: 4rem 0 3rem;
  background:
    radial-gradient(50rem 26rem at 90% -10%, rgba(47, 191, 155, 0.14), transparent 60%);
}

.app-hero .app-title h1 {
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  font-weight: 800;
}

.app-hero .app-title .zh {
  color: var(--muted);
}

.app-hero .lead {
  max-width: 40rem;
}

.app-hero .buttons {
  margin-top: 1.75rem;
  align-items: center;
}

.app-hero .soon {
  color: var(--navy);
}

.screens {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
  align-items: start;
}

.screen {
  text-align: center;
}

.screen .phone {
  width: min(100%, 16rem);
}

.screen h3 {
  margin-top: 1.4rem;
  font-size: 1.15rem;
}

.screen p {
  margin-top: 0.35rem;
  color: var(--muted);
  font-size: 0.98rem;
}

@media (max-width: 860px) {
  .screens {
    grid-template-columns: minmax(0, 1fr);
    gap: 3rem;
  }
}

.note {
  padding: 1.5rem 1.75rem;
  border-radius: var(--radius-big);
  background: var(--soft);
  color: var(--muted);
  font-size: 0.97rem;
}

.note h2 {
  font-size: 1.15rem;
  margin-bottom: 0.5rem;
}

.note p + p {
  margin-top: 0.6rem;
}

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 1.25rem;
}

/* ---- Text pages (about, privacy) ---- */
.prose {
  max-width: 46rem;
}

.prose h2 {
  margin: 2.5rem 0 0.75rem;
  font-size: 1.5rem;
}

.prose h2:first-child {
  margin-top: 0;
}

.prose p,
.prose ul {
  margin: 0 0 1rem;
}

.prose ul {
  padding-left: 1.25rem;
}

.prose li {
  margin-bottom: 0.5rem;
}

.prose .muted {
  color: var(--muted);
  font-size: 0.95rem;
}

/* ---- FAQ ---- */
.faq {
  display: grid;
  gap: 0.75rem;
  max-width: 50rem;
}

.faq details {
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--bg);
}

.faq summary {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.35rem;
  cursor: pointer;
  list-style: none;
  color: var(--ink);
  font-weight: 700;
  font-size: 1.08rem;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: '+';
  flex: none;
  color: var(--jade);
  font-size: 1.4rem;
  line-height: 1;
}

.faq details[open] summary::after {
  content: '−';
}

.faq details p {
  padding: 0 1.35rem 1.2rem;
  color: var(--muted);
}

.contact-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 2rem;
  border-radius: var(--radius-big);
  background: var(--navy);
  color: #D9E2EE;
}

.contact-card h2 {
  color: #fff;
  font-size: 1.5rem;
}

.contact-card p {
  margin-top: 0.35rem;
}

/* ---- Footer ---- */
.footer {
  margin-top: 5rem;
  padding: 3.5rem 0 2.5rem;
  border-top: 1px solid var(--line);
  background: var(--soft);
  font-size: 0.97rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: 2rem;
}

.footer h2 {
  margin-bottom: 0.75rem;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.footer ul {
  display: grid;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer a {
  color: var(--text);
  text-decoration: none;
}

.footer a:hover {
  color: var(--jade);
  text-decoration: underline;
}

.footer .tagline {
  margin-top: 0.75rem;
  color: var(--muted);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.9rem;
}

@media (max-width: 860px) {
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-grid > :first-child {
    grid-column: 1 / -1;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .button,
  .more-link::after {
    transition: none;
  }
}

.soon-icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

/* ==== Movement (2026-10-11, Nas: "add some animation to make it more cool") ====
   Calm and short: things slide gently into view, the phones float, the live cards count down, a bus
   rides its route and the sun crosses the bus. All of it stops for visitors who ask their device for
   less motion (end of this file). site.js adds the "js" class, so without JavaScript nothing is
   hidden waiting for a script. */

/* Slides in when scrolled into view (site.js adds "in"); --d staggers a row of cards. The hover
   lift uses "translate", so it never waits for the stagger. */
.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) var(--d, 0ms),
    transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) var(--d, 0ms),
    translate 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

.js .reveal.in {
  opacity: 1;
  transform: none;
}

/* The header gets a soft shadow once the page scrolls under it. */
.header {
  transition: box-shadow 0.25s ease;
}

.header.scrolled {
  box-shadow: 0 6px 24px rgba(14, 39, 71, 0.08);
}

/* The home hero: the words rise one after another, the phone fades up. */
.hero .wrap > div:first-child > * {
  animation: rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.hero .wrap > div:first-child > :nth-child(2) { animation-delay: 0.08s; }
.hero .wrap > div:first-child > :nth-child(3) { animation-delay: 0.16s; }
.hero .wrap > div:first-child > :nth-child(4) { animation-delay: 0.24s; }
.hero .wrap > div:first-child > :nth-child(5) { animation-delay: 0.32s; }

.hero-art {
  animation: rise 1.1s 0.2s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}

/* Phones float gently. */
.phone-float {
  animation: float 7s ease-in-out infinite;
}

.phone-float-slow {
  animation: float 9s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -12px; }
}

/* Several screens in one phone, one at a time (site.js moves "on" along). */
.screens-cycle,
.showcase-screens {
  display: grid;
}

.screens-cycle img,
.showcase-screens img {
  grid-area: 1 / 1;
  opacity: 0;
  transition: opacity 0.9s ease;
}

.screens-cycle img.on,
.showcase-screens img.on {
  opacity: 1;
}

/* ---- The hero stage: a mint circle, tiles drifting round it, the phone with notifications
   sliding in at its top, and 阿友 waving beside it ---- */
.hero-art::before {
  display: none;
}

.hero-art .backdrop {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(30rem, 100%);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: var(--jade-soft);
}

.hero .phone-float {
  position: relative;
  z-index: 1;
}

.tile {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 3.9rem;
  height: 3.9rem;
  border-radius: 1.1rem;
  animation: drift 7s ease-in-out infinite;
}

.tile svg {
  width: 2rem;
  height: 2rem;
}

.tile-sun { left: 1%; top: 6%; --r: -12deg; background: #FFD45C; border-bottom: 5px solid #E0A800; color: #8A5A00; }
.tile-bus { right: -1%; top: 18%; --r: 10deg; background: var(--jade); border-bottom: 5px solid #064437; color: #fff; animation-delay: -2.5s; }
.tile-pin { right: -3%; bottom: 16%; --r: -8deg; background: #fff; border: 2px solid var(--line); border-bottom: 5px solid #CBD3DD; color: var(--jade); animation-delay: -4.5s; }

@keyframes drift {
  0%, 100% { transform: rotate(var(--r, 0deg)); }
  50% { transform: translate(6px, -16px) rotate(calc(var(--r, 0deg) + 8deg)); }
}

/* Notifications at the top of the phone's screen, one after another. */
.notes {
  position: absolute;
  z-index: 2;
  top: 0.7rem;
  left: 0.7rem;
  right: 0.7rem;
  height: 6rem;
  overflow: hidden;
  border-radius: 2rem 2rem 0 0;
  pointer-events: none;
}

.note-pop {
  position: absolute;
  top: 0.55rem;
  left: 0.55rem;
  right: 0.55rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.7rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 10px 24px rgba(14, 39, 71, 0.22);
  opacity: 0;
  transform: translateY(-130%);
  animation: notePop 12s cubic-bezier(0.2, 0.8, 0.2, 1.15) infinite;
}

.note-sun { animation-delay: 4s; }
.note-walk { animation-delay: 8s; }

@keyframes notePop {
  0% { opacity: 0; transform: translateY(-130%); }
  5%, 28% { opacity: 1; transform: none; }
  33%, 100% { opacity: 0; transform: translateY(-130%); }
}

.note-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 0.65rem;
  background: var(--jade);
  color: #fff;
}

.note-sun .note-icon { background: #FFD45C; color: #8A5A00; }
.note-walk .note-icon { background: var(--navy); }

.note-icon svg {
  width: 1.3rem;
  height: 1.3rem;
}

.note-words {
  display: flex;
  flex-direction: column;
  min-width: 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.25;
}

.note-words b {
  color: var(--ink);
  font-size: 0.86rem;
}

/* 阿友 beside the phone: a gentle bob, a wave, a blink now and then. */
.hero-ayau {
  position: absolute;
  z-index: 3;
  bottom: -3%;
  left: calc(50% - 18.5rem);
  width: 10rem;
}

.ayau-bob {
  animation: ayauBob 2.4s ease-in-out infinite;
  transform-origin: 100px 178px;
}

.ayau-wave {
  animation: ayauWave 2.4s ease-in-out infinite;
  transform-origin: 124px 99px;
}

.ayau-blink {
  animation: ayauBlink 4s infinite;
  transform-origin: 100px 64.5px;
}

@keyframes ayauBob {
  0%, 100% { transform: none; }
  50% { transform: translateY(-5px); }
}

@keyframes ayauWave {
  0%, 50%, 100% { transform: rotate(0); }
  10%, 30% { transform: rotate(-20deg); }
  20%, 40% { transform: rotate(12deg); }
}

@keyframes ayauBlink {
  0%, 92%, 100% { transform: none; }
  95% { transform: scaleY(0.1); }
}

@media (max-width: 860px) {
  .tile { width: 2.8rem; height: 2.8rem; border-radius: 0.85rem; }
  .tile svg { width: 1.5rem; height: 1.5rem; }
  .tile-sun { left: 0; top: 2%; }
  .tile-bus { display: none; }
  .tile-pin { right: 0; bottom: 34%; }
  /* Room for 阿友 beside the phone, so he never stands on its screen. */
  .hero .phone { width: min(62%, 15rem); }
  .hero-ayau { left: -2%; bottom: 0; width: 5.6rem; }
}

.chip-badge {
  display: inline-grid;
  place-items: center;
  min-width: 1.8rem;
  height: 1.8rem;
  padding: 0 0.4rem;
  border-radius: 8px;
  background: var(--jade);
  color: #fff;
  font-weight: 800;
}

/* The pulsing "live" dot, and minutes that tick. */
.live {
  flex: none;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--jade-bright);
  animation: livePulse 1.8s ease-out infinite;
}

@keyframes livePulse {
  0% { box-shadow: 0 0 0 0 rgba(47, 191, 155, 0.55); }
  100% { box-shadow: 0 0 0 9px rgba(47, 191, 155, 0); }
}

[data-countdown] {
  display: inline-block;
  color: var(--jade);
  font-variant-numeric: tabular-nums;
}

[data-countdown].tick {
  animation: tick 0.5s ease;
}

@keyframes tick {
  0% { transform: translateY(-6px); opacity: 0; }
  100% { transform: none; opacity: 1; }
}

/* "More apps on the way" with three waiting dots. */
.dots {
  display: inline-flex;
  gap: 0.2rem;
  margin-left: 0.1rem;
}

.dots b {
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 50%;
  background: currentColor;
  animation: dotWait 1.4s ease-in-out infinite;
}

.dots b:nth-child(2) { animation-delay: 0.2s; }
.dots b:nth-child(3) { animation-delay: 0.4s; }

@keyframes dotWait {
  0%, 60%, 100% { opacity: 0.25; transform: none; }
  30% { opacity: 1; transform: translateY(-3px); }
}

/* ---- YauBus page: the hero with route 2 riding along ---- */
.app-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: center;
}

.route-card {
  padding: 1.4rem 1.5rem 1.1rem;
  border-radius: var(--radius-big);
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  animation: rise 1s 0.25s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.route-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--ink);
  font-weight: 700;
}

.route-to {
  flex: 1;
  min-width: 0;
}

.route-next {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--muted);
  font-size: 0.9rem;
  white-space: nowrap;
}

.route-track {
  position: relative;
  height: 4.4rem;
  margin: 1.9rem 2.4rem 0.4rem;
}

.route-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 1.05rem;
  height: 6px;
  overflow: hidden;
  border-radius: 3px;
  background: var(--line);
}

.route-line i {
  position: absolute;
  inset: 0;
  background: var(--jade);
  transform-origin: left center;
  transform: scaleX(0.5);
  animation: routeFill 12s ease-in-out infinite;
}

.route-bus {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 50%;
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  margin-left: -1.2rem;
  border-radius: 12px;
  background: var(--navy);
  color: #fff;
  box-shadow: 0 6px 14px rgba(14, 39, 71, 0.28);
  animation: busRide 12s ease-in-out infinite;
}

.route-bus svg {
  width: 1.45rem;
  height: 1.45rem;
}

.route-stops {
  margin: 0;
  padding: 0;
  list-style: none;
}

.route-stops li {
  position: absolute;
  top: 0;
  left: calc(var(--i) * 25%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  transform: translateX(-50%);
}

.route-stops .dot {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.6rem;
  border-radius: 50%;
  border: 3px solid #B7C3D1;
  background: #fff;
}

.route-stops .name {
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
}

.route-stops li:nth-child(1) .dot { animation: lit0 12s infinite; }
.route-stops li:nth-child(2) .dot { animation: lit1 12s infinite; }
.route-stops li:nth-child(3) .dot { animation: lit2 12s infinite; }
.route-stops li:nth-child(4) .dot { animation: lit3 12s infinite; }
.route-stops li:nth-child(5) .dot { animation: lit4 12s infinite; }

/* The bus waits at each stop, then rides to the next; the line fills behind it. */
@keyframes busRide {
  0%, 7% { left: 0; }
  24%, 31% { left: 25%; }
  48%, 55% { left: 50%; }
  72%, 79% { left: 75%; }
  95%, 100% { left: 100%; }
}

@keyframes routeFill {
  0%, 7% { transform: scaleX(0); }
  24%, 31% { transform: scaleX(0.25); }
  48%, 55% { transform: scaleX(0.5); }
  72%, 79% { transform: scaleX(0.75); }
  95%, 100% { transform: scaleX(1); }
}

@keyframes lit0 {
  0% { background: var(--jade); border-color: var(--jade); transform: scale(1.35); }
  5%, 99% { background: var(--jade); border-color: var(--jade); transform: none; }
}

@keyframes lit1 {
  0%, 23% { background: #fff; border-color: #B7C3D1; transform: none; }
  25% { background: var(--jade); border-color: var(--jade); transform: scale(1.35); }
  30%, 99% { background: var(--jade); border-color: var(--jade); transform: none; }
}

@keyframes lit2 {
  0%, 47% { background: #fff; border-color: #B7C3D1; transform: none; }
  49% { background: var(--jade); border-color: var(--jade); transform: scale(1.35); }
  54%, 99% { background: var(--jade); border-color: var(--jade); transform: none; }
}

@keyframes lit3 {
  0%, 71% { background: #fff; border-color: #B7C3D1; transform: none; }
  73% { background: var(--jade); border-color: var(--jade); transform: scale(1.35); }
  78%, 99% { background: var(--jade); border-color: var(--jade); transform: none; }
}

@keyframes lit4 {
  0%, 94% { background: #fff; border-color: #B7C3D1; transform: none; }
  96% { background: var(--jade); border-color: var(--jade); transform: scale(1.35); }
  99% { background: var(--jade); border-color: var(--jade); transform: none; }
}

@media (max-width: 860px) {
  .app-hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }

  .route-track {
    margin: 1.8rem 1.6rem 0.4rem;
  }

  /* Five names do not fit side by side on a phone: every other one. */
  .route-stops li:nth-child(even) .name {
    visibility: hidden;
  }
}

/* ---- The numbers ---- */
.stats-band {
  padding: 2.75rem 0;
  background: linear-gradient(150deg, #0E2747, #12305A);
  color: #D9E2EE;
}

.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
}

.stat {
  text-align: center;
}

.stat-n {
  display: block;
  color: #fff;
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.stat-n small {
  margin-left: 0.12em;
  color: var(--jade-bright);
  font-size: 0.45em;
}

.stat-label {
  display: block;
  margin-top: 0.55rem;
  font-size: 0.97rem;
}

@media (max-width: 700px) {
  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 2rem;
  }
}

/* ---- The showcase: pick a feature, the phone shows it ---- */
.showcase {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 3rem;
  align-items: center;
}

.showcase-phone .phone {
  width: min(100%, 18rem);
}

.showcase-list {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.showcase-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  width: 100%;
  overflow: hidden;
  padding: 0.95rem 1.15rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.showcase-item:hover {
  background: rgba(255, 255, 255, 0.7);
}

.showcase-item.on {
  background: #fff;
  border-color: var(--line);
  box-shadow: var(--shadow);
}

.showcase-n {
  flex: none;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--jade-soft);
  color: var(--jade);
  font-weight: 800;
  transition: background 0.25s ease, color 0.25s ease;
}

.showcase-item.on .showcase-n {
  background: var(--jade);
  color: #fff;
}

.showcase-words {
  min-width: 0;
}

.showcase-title {
  display: block;
  color: var(--ink);
  font-size: 1.08rem;
  font-weight: 800;
}

.showcase-text {
  display: block;
  margin-top: 0.2rem;
  color: var(--muted);
  font-size: 0.97rem;
}

/* With JavaScript only the chosen feature's words open (without it, all show). */
.js .showcase-text {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, opacity 0.4s ease;
}

.js .showcase-item.on .showcase-text {
  max-height: 7rem;
  opacity: 1;
}

/* How long until the next feature shows by itself. */
.showcase-item .bar {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 3px;
  background: var(--jade-bright);
}

.showcase.auto .showcase-item.on .bar {
  animation: barFill 6s linear forwards;
}

@keyframes barFill {
  to { width: 100%; }
}

@media (max-width: 860px) {
  .showcase {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }

  .showcase-phone .phone {
    width: min(70%, 15rem);
  }
}

/* ---- Features in four groups ---- */
.group + .group {
  margin-top: 3rem;
}

.group-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  color: var(--jade);
  font-size: 1.05rem;
  font-weight: 800;
}

.group-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}

.grid-4 {
  grid-template-columns: repeat(auto-fit, minmax(14.5rem, 1fr));
}

.feature:hover {
  translate: 0 -4px;
  border-color: transparent;
  box-shadow: var(--shadow);
}

.feature .icon {
  transition: transform 0.25s ease;
}

.feature:hover .icon {
  transform: scale(1.08) rotate(-4deg);
}

.feature:hover .icon-bell svg { animation: ring 0.8s ease; }
.feature:hover .icon-sun svg { animation: spin 6s linear infinite; }
.feature:hover .icon-phone svg,
.feature:hover .icon-speaker svg { animation: ring 0.6s ease; }

@keyframes ring {
  0%, 100% { transform: none; }
  20% { transform: rotate(14deg); }
  40% { transform: rotate(-12deg); }
  60% { transform: rotate(8deg); }
  80% { transform: rotate(-4deg); }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ---- Chunky buttons, like Duolingo's: a thick darker bottom edge, and they sink when pressed ---- */
.button {
  border-bottom-width: 5px;
  border-bottom-color: #06132A;
  transition: transform 0.08s ease, border-bottom-width 0.08s ease, filter 0.15s ease, background 0.15s ease;
}

.button:hover {
  transform: none;
  filter: brightness(1.12);
  border-bottom-color: #06132A;
}

.button:active {
  transform: translateY(4px);
  border-bottom-width: 1px;
}

.button.secondary {
  background: #fff;
  border-color: #D5DCE5;
  border-bottom-color: #BCC6D2;
  color: var(--navy);
}

.button.secondary:hover {
  background: var(--soft);
  border-color: #D5DCE5;
  border-bottom-color: #BCC6D2;
  filter: none;
}

.button.light {
  border-bottom-color: #B8C4D4;
}

.button.light:hover {
  border-bottom-color: #B8C4D4;
}

/* Feature cards: the icon acts out its feature when pointed at. */
.feature:hover .icon-train svg,
.feature:hover .icon-clock svg { animation: drive 0.9s ease-in-out; }
.feature:hover .icon-walk svg { animation: stepUp 0.5s ease-in-out 2; }
.feature:hover .icon-map svg,
.feature:hover .icon-pin svg { animation: stepUp 0.6s ease-in-out; }

@keyframes drive {
  0%, 100% { transform: none; }
  45% { transform: translateX(6px); }
  55% { transform: translateX(6px) rotate(-4deg); }
}

@keyframes stepUp {
  0%, 100% { transform: none; }
  50% { transform: translateY(-4px) rotate(6deg); }
}

/* ---- 阿友's scenes: a picture and a few words, side by side, alternating like Duolingo's ---- */
.section-head.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.scene-row {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 4rem;
  align-items: center;
}

.scene-row + .scene-row {
  margin-top: 4.5rem;
}

.scene-row.flip {
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
}

.scene-row.flip .scene {
  order: 2;
}

.scene-words h3 {
  color: var(--jade);
  font-size: clamp(1.8rem, 3.6vw, 2.5rem);
  font-weight: 800;
}

.scene-words p {
  margin-top: 0.9rem;
  color: var(--muted);
  font-size: 1.15rem;
}

@media (max-width: 860px) {
  .scene-row,
  .scene-row.flip {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
  }

  .scene-row.flip .scene {
    order: 0;
  }
}

/* The picture keeps its shape (520 x 360) and everything on it is placed in percent and sized in
   the picture's own width units (cqw), so it scales as one. */
.scene-art {
  position: relative;
  overflow: hidden;
  aspect-ratio: 520 / 360;
  border-radius: 2.25rem;
  container-type: inline-size;
  font-weight: 800;
}

.scene-art > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.scene-bus, .scene-walk { background: #E3F2EE; }
.scene-sun { background: #EAF0F8; }
.scene-lost { background: #FFF4D6; }

/* While a scene is off screen it waits (site.js adds "play" when it shows). */
.js .scene:not(.play) *,
.js .scene:not(.play) *::before,
.js .scene:not(.play) *::after {
  animation-play-state: paused !important;
}

/* 1. The bus pulls in, waits, and goes; 阿友 counts down, then hops. */
.bus-in { animation: busIn 9s cubic-bezier(0.2, 0.75, 0.25, 1) infinite; }
.scene-bus .wheel { animation: wheel 9s linear infinite; transform-box: fill-box; transform-origin: center; }
.hopy { animation: hopy 9s ease infinite; transform-origin: 100px 178px; }

@keyframes busIn {
  0% { transform: translateX(430px); }
  24% { transform: translateX(0); }
  27% { transform: translateX(-6px); }
  30%, 70% { transform: translateX(0); }
  92%, 100% { transform: translateX(-620px); }
}

@keyframes wheel {
  0% { transform: rotate(0); }
  24%, 70% { transform: rotate(-540deg); }
  92%, 100% { transform: rotate(-1260deg); }
}

@keyframes hopy {
  0%, 22%, 32%, 100% { transform: none; }
  25% { transform: translateY(-16px); }
  28% { transform: none; }
}

.say {
  position: absolute;
  left: 13.5%;
  top: 19%;
  display: grid;
  padding: 0.55em 1em;
  border-radius: 1.1em;
  border-bottom: 4px solid #CBD3DD;
  background: #fff;
  color: var(--jade);
  font-size: 20px;
  font-size: 3.8cqw;
  white-space: nowrap;
  transform-origin: 30% 100%;
  animation: bubble 9s ease infinite;
}

.say > span {
  grid-area: 1 / 1;
  opacity: 0;
  animation: 9s steps(1, end) infinite;
}

/* Resting picture (less motion): the bus at the stop, "Here!". */
.say > .say-3 { opacity: 1; }
.say-0 { animation-name: say0; }
.say-1 { animation-name: say1; }
.say-2 { animation-name: say2; }
.say-3 { animation-name: say3; }
.say-4 { animation-name: say4; }

@keyframes say0 { 0% { opacity: 1; } 8%, 100% { opacity: 0; } }
@keyframes say1 { 0% { opacity: 0; } 8% { opacity: 1; } 16%, 100% { opacity: 0; } }
@keyframes say2 { 0% { opacity: 0; } 16% { opacity: 1; } 24%, 100% { opacity: 0; } }
@keyframes say3 { 0% { opacity: 0; } 24% { opacity: 1; } 72%, 100% { opacity: 0; } }
@keyframes say4 { 0% { opacity: 0; } 72%, 100% { opacity: 1; } }

@keyframes bubble {
  0%, 7%, 15%, 23%, 69%, 100% { transform: none; }
  2%, 10%, 18%, 26%, 72% { transform: scale(1.12); }
}

/* 2. The sun crosses over the bus; 阿友 hops to the shady side. */
.sun-top { animation: sunTop 10s ease-in-out infinite; }
.sun-bot { opacity: 0; animation: sunBot 10s ease-in-out infinite; }
.tint-top { animation: tintTop 10s steps(1, end) infinite; }
.tint-bot { opacity: 0; animation: tintBot 10s steps(1, end) infinite; }
.rider { animation: rider 10s ease-in-out infinite; }

@keyframes sunTop {
  0% { transform: translateX(0); opacity: 1; }
  45% { transform: translateX(280px); opacity: 1; }
  50%, 100% { transform: translateX(280px); opacity: 0; }
}

@keyframes sunBot {
  0%, 50% { transform: translateX(280px); opacity: 0; }
  55% { transform: translateX(280px); opacity: 1; }
  95% { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(0); opacity: 0; }
}

@keyframes tintTop { 0% { opacity: 0.55; } 50%, 100% { opacity: 0; } }
@keyframes tintBot { 0% { opacity: 0; } 50%, 100% { opacity: 0.55; } }

@keyframes rider {
  0%, 48% { transform: translateY(0); }
  52% { transform: translateY(-34px) scale(1.15); }
  56%, 96% { transform: translateY(-68px); }
  98% { transform: translateY(-34px) scale(1.15); }
  100% { transform: translateY(0); }
}

/* 3. 阿友 walks the dotted path; a bubble at each turn and at the stop. The corners are the path's
   points in the 520 x 360 picture, in percent; the times follow the length of each stretch. */
.walker {
  position: absolute;
  left: 84.62%;
  top: 25.56%;
  width: 8.8%;
  aspect-ratio: 1;
  translate: -50% -50%;
  animation: walk 9s linear infinite;
}

.walker svg {
  display: block;
  width: 100%;
  height: 100%;
  animation: stepUp 0.45s ease-in-out infinite;
}

@keyframes walk {
  0% { left: 13.46%; top: 83.33%; }
  16.2% { left: 13.46%; top: 52.78%; }
  45.6% { left: 51.92%; top: 52.78%; }
  60% { left: 51.92%; top: 25.56%; }
  85%, 100% { left: 84.62%; top: 25.56%; }
}

.tip {
  position: absolute;
  opacity: 0;
  padding: 0.45em 0.8em;
  border-radius: 0.8em;
  background: var(--navy);
  color: #fff;
  font-size: 15px;
  font-size: 2.9cqw;
  white-space: nowrap;
}

.tip-1 { left: 17%; top: 39%; animation: tip1 9s ease infinite; }
.tip-2 { left: 30%; top: 37%; animation: tip2 9s ease infinite; }
.tip-3 { left: 62%; top: 37%; background: var(--jade); animation: tip3 9s ease infinite; }

@keyframes tip1 { 0%, 11% { opacity: 0; transform: translateY(8px); } 14%, 26% { opacity: 1; transform: none; } 30%, 100% { opacity: 0; } }
@keyframes tip2 { 0%, 41% { opacity: 0; transform: translateY(8px); } 44%, 54% { opacity: 1; transform: none; } 58%, 100% { opacity: 0; } }
@keyframes tip3 { 0%, 83% { opacity: 0; transform: scale(0.6); } 87%, 98% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* 4. An umbrella left on a seat, and the phone ringing the bus company. */
.q {
  position: absolute;
  left: 35%;
  top: 18%;
  display: grid;
  place-items: center;
  width: 8.5%;
  aspect-ratio: 1;
  border-radius: 50%;
  border-bottom: 4px solid #E6CF85;
  background: #fff;
  color: #8A5A00;
  font-size: 24px;
  font-size: 4.6cqw;
  font-weight: 900;
  transform-origin: 50% 100%;
  animation: wonder 2.4s ease-in-out infinite;
}

@keyframes wonder {
  0%, 100% { transform: rotate(-6deg); }
  50% { transform: rotate(6deg) translateY(-4px); }
}

.lost-phone {
  position: absolute;
  right: 10.4%;
  top: 15.5%;
  width: 28.8%;
  aspect-ratio: 150 / 250;
  box-sizing: border-box;
  padding: 1.7cqw;
  border-radius: 5.4cqw;
  background: #0B1626;
  transform-origin: 50% 80%;
  animation: ringing 1.6s ease-in-out infinite;
}

.lost-phone .sound {
  position: absolute;
  left: -17%;
  top: 16%;
  width: 134%;
  aspect-ratio: 1;
  box-sizing: border-box;
  border: 4px solid var(--jade-bright);
  border-radius: 50%;
  animation: sound 1.6s ease-out infinite;
}

.lost-screen {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.4cqw;
  height: 100%;
  border-radius: 4cqw;
  background: #fff;
  text-align: center;
}

.lost-screen b {
  color: var(--ink);
  font-size: 2.9cqw;
}

.lost-screen strong {
  color: var(--jade);
  font-size: 4.1cqw;
  white-space: nowrap;
}

.lost-screen .call {
  display: grid;
  place-items: center;
  width: 10cqw;
  height: 10cqw;
  margin-top: 1.4cqw;
  border-radius: 50%;
  background: var(--jade-bright);
  color: var(--navy);
  animation: callPulse 1.6s ease-in-out infinite;
}

.lost-screen .call svg {
  width: 5cqw;
  height: 5cqw;
}

@keyframes ringing {
  0%, 40%, 100% { transform: rotate(8deg); }
  5%, 15%, 25%, 35% { transform: rotate(2deg); }
  10%, 20%, 30% { transform: rotate(14deg); }
}

@keyframes sound {
  0% { opacity: 0; transform: scale(0.7); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.25); }
}

@keyframes callPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(47, 191, 155, 0.6); }
  60% { box-shadow: 0 0 0 12px rgba(47, 191, 155, 0); }
}

/* ---- Less motion: everything still, each picture in a sensible resting state ---- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
  }

  .route-stops li:nth-child(-n + 3) .dot {
    background: var(--jade);
    border-color: var(--jade);
  }

  /* Each picture at rest: the first notification shown, 阿友 at the stop with "You are here!". */
  .note-pop:first-child,
  .tip-3 {
    opacity: 1;
    transform: none;
  }
}