:root{
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);

  /* palette */
  --busgo:#8e1b2e;         /* app-icon maroon */
  --busgo-text:#a01d33;    /* "BusGo" wordmark red */
  --badge:#111214;         /* store badge near-black */
  --page-bg:#f2f3f5;
  --card-bg:#ffffff;
  --card-border:#e6e8eb;
  --ink:#1a1c1f;
  --muted:#5a6067;
  --hairline:#eceef1;
}

.banner{
  display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  background:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:16px;
  padding:20px 26px;
}
.banner .copy{flex:1 1 240px;min-width:220px}
.banner .title{font-size:20px;font-weight:700;letter-spacing:-.01em;margin:0 0 6px}
.banner .title b{color:var(--busgo-text);font-weight:700}
.banner .desc{margin:0;color:var(--muted);font-size:14px;line-height:1.5}
.banner .stores{display:flex;gap:12px;flex-wrap:wrap}

/* ---------- BusGo app icon ---------- */
.app-icon{
  width:76px;height:76px;flex:0 0 auto;
  background:var(--busgo);
  border-radius:20px;
  display:grid;place-items:center;
  box-shadow:0 2px 6px rgba(142,27,46,.25);
}
.app-icon svg{width:52px;height:52px}

/* ---------- store badges ---------- */
.badge{
  display:inline-flex;align-items:center;gap:11px;
  background:var(--badge);
  color:#fff;
  border-radius:12px;
  padding:9px 18px;
  text-decoration:none;
  line-height:1;
  transition:transform .12s ease, filter .12s ease;
}
.badge:hover{transform:translateY(-1px);filter:brightness(1.12)}
.badge svg{flex:0 0 auto}
.badge .txt{display:flex;flex-direction:column;gap:3px}
.badge .txt .small{font-size:11px;font-weight:400;opacity:.92}
.badge .txt .big{font-size:19px;font-weight:600;letter-spacing:.01em}
.badge--apple svg{width:26px;height:26px;margin-top:-2px}
.badge--gplay svg{width:24px;height:24px}