@font-face {
  font-family: "Manrope";
  src: url("assets/fonts/Manrope-Variable.ttf") format("truetype");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --lime: #d0ff45;
  --ink: #050505;
  font-family: "Manrope", sans-serif;
  background: #fff;
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 280px; }
button { font: inherit; }

.welcome {
  width: 100%;
  max-width: 480px;
  margin-inline: auto;
  padding: max(40px, env(safe-area-inset-top)) 13px max(24px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: center;
  container-type: inline-size;
}

.brand { display: flex; align-items: center; justify-content: center; gap: 5px; font-weight: 800; line-height: 1; }
.brand-name { font-size: 7.15cqw; letter-spacing: -.3px; }
.brand-badge { background: var(--lime); border-radius: 8px; font-size: 5.25cqw; padding: 5px 6px; }

.roles { width: 100%; display: flex; flex-direction: column; gap: 10px; margin-top: 19px; }
.role {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  width: 100%;
  border: 0;
  border-radius: 6.3cqw;
  padding: 7cqw 5.8cqw 0;
  overflow: hidden;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 150ms ease;
}
.role-passenger { aspect-ratio: 878 / 554; background: #050505; color: #fff; }
.role-driver { aspect-ratio: 878 / 514; background: var(--lime); color: var(--ink); padding-top: 5.5cqw; }
.role-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 5px; position: relative; z-index: 2; }
.role-copy { display: flex; flex-direction: column; padding-top: 1cqw; }
.role-title { font-size: 10.65cqw; font-weight: 800; line-height: 1.05; letter-spacing: -.4cqw; }
.role-subtitle { margin-top: 1.25cqw; font-size: 4.8cqw; line-height: 1.15; letter-spacing: -.1cqw; }
.role-arrow { display: flex; align-items: center; justify-content: center; flex: 0 0 14cqw; width: 14cqw; height: 14cqw; border-radius: 50%; background: var(--lime); color: var(--ink); }
.role-driver .role-arrow { background: var(--ink); color: #fff; }
.role-arrow svg { width: 57%; height: 57%; fill: none; stroke: currentColor; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }

/* Transparent product images scale within the card without affecting its layout. */
.art { position: absolute; z-index: 1; overflow: hidden; pointer-events: none; }
.art img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: right bottom; user-select: none; }
.art-car { right: 2%; bottom: 2%; width: 74%; height: 53%; }
.art-wheel { right: 5%; bottom: 2%; width: 44%; height: 70%; }

.role:active { transform: scale(.985); }
.role:focus-visible { outline: 3px solid #666; outline-offset: 4px; }
.selection-status { margin: 0; position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .role { transition: none; } }