.brand-logo {
  width: 2rem;
  height: 2rem;
  border-radius: .6rem;
  box-shadow: 0 .35rem .85rem rgba(69, 83, 230, .24);
}

.logo-stage {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: min(25rem, 82vw);
  padding: 2rem;
  border: 1px solid rgba(255, 255, 255, .82);
  border-radius: 2.5rem;
  background: rgba(255, 255, 255, .48);
  box-shadow: 0 2rem 4rem rgba(55, 61, 149, .18);
  backdrop-filter: blur(14px);
}

.logo-stage img {
  display: block;
  width: min(16rem, 62vw);
  height: auto;
  filter: drop-shadow(0 1.2rem 1.5rem rgba(58, 68, 164, .2));
}

.logo-stage p {
  margin: 1.25rem 0 0;
  color: var(--muted);
  font-weight: 750;
  letter-spacing: -.02em;
}

.roof-gear-scene { position: relative; z-index: 2; width: min(34rem, 100%); height: auto; filter: drop-shadow(0 1.5rem 1.8rem rgba(58, 68, 164, .18)); }
.roof-gear-scene .gear-label { fill: #555d93; font: 800 .68rem/1 -apple-system, sans-serif; letter-spacing: .08em; text-anchor: middle; }
.mountain { opacity: .9; }.mountain-a { fill: #c7d8ff; }.mountain-b { fill: #d8cbff; }.road { fill: #202a59; }.clearance-arch { fill: none; stroke: #5b6cff; stroke-width: 20; stroke-linecap: round; }.clearance-mark { stroke: #53d6a6; stroke-width: 8; stroke-linecap: round; }.roof-box { fill: #ff806d; }.skis { fill: none; stroke: #37b9ff; stroke-width: 10; stroke-linecap: round; }.bike-wheel { fill: #fff; stroke: #5b6cff; stroke-width: 6; }.bike-frame { fill: none; stroke: #303967; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }.car > path:first-child { fill: #5b6cff; }.car-window { fill: #d9efff; }.car circle { fill: #202a59; }.car .hub { fill: #fff; }.car-line { fill: none; stroke: #9ba7ff; stroke-width: 4; }.trip-badge circle { fill: #53d6a6; }.trip-badge path { fill: none; stroke: #fff; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 48rem) {
  .logo-stage { width: min(19rem, 78vw); padding: 1.35rem; }
  .roof-gear-scene { width: min(29rem, 100%); }
}

.app-shot-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem;
  margin-top: 3.5rem;
}

.app-shot {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  padding: 2rem 1.5rem 1.5rem;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 2rem;
  background: linear-gradient(145deg, #f3f5ff, #fff);
  box-shadow: var(--shadow);
}

.app-shot-alert { background: linear-gradient(145deg, #fff2ef, #fff); }

.app-shot img {
  display: block;
  width: min(16rem, 100%);
  height: auto;
  margin: 0 auto 1.75rem;
  border-radius: 1.75rem;
  box-shadow: 0 1.75rem 3rem rgba(27, 32, 74, .22);
}

.app-shot-map img { transform: rotate(4deg); }
.app-shot-alert img { transform: rotate(-4deg); }

.app-shot figcaption {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  width: 100%;
  max-width: 27rem;
}

.app-shot figcaption > span {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 50%;
  color: #fff;
  background: var(--indigo);
  font-size: .68rem;
  font-weight: 800;
}

.app-shot-alert figcaption > span { background: var(--coral); }
.app-shot figcaption strong { font-size: 1rem; letter-spacing: -.025em; }
.app-shot figcaption p { margin: .2rem 0 0; color: var(--muted); font-size: .82rem; line-height: 1.4; }

@media (max-width: 48rem) {
  .app-shot-gallery { grid-template-columns: 1fr; }
  .app-shot { padding: 1.5rem 1rem 1.25rem; }
  .app-shot img { width: 14.5rem; }
}