/* Bring The Truck — public choice page.

   Its own bundle: it does not sit on top of app.css and app.css never loads
   here, so it carries its own box model. Without that, width:100% plus padding
   overflows the viewport by exactly the padding at every mobile size.

   The page is one column at every width. Desktop is not the mobile layout
   stretched — the column is capped and centred, and the spacing scales — but
   the composition is the same, because the answer to "customer or driver" does
   not change shape on a bigger screen. */

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

body.choice-page {
  --c-navy:      #12294A;
  --c-navy-deep: #0A1B33;
  --c-ink:       #14243A;
  --c-body:      #5A6B80;
  --c-muted:     #6E7F92;
  --c-line:      #E8EDF4;
  --c-page:      #F5F7FA;
  --c-blue:      #2563EB;
  --c-blue-dk:   #1D4FD8;
  --c-blue-wash: #E4EDFD;
  --c-orange:    #F26B21;
  --c-orange-dk: #DA5910;
  --c-orange-wash: #FDEDE2;

  margin: 0;
  background: var(--c-page);
  color: var(--c-ink);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

.choice { position: relative; min-height: 100dvh; overflow-x: hidden; }

/* ---- Banner --------------------------------------------------------------
   The artwork carries the wordmark, the subtitle and the white curve that
   fades into this section. Nothing is overlaid and nothing is cropped: the
   image is placed at its own aspect ratio and the page continues underneath.
   Any object-fit here would clip the truck at some width, which is the one
   thing the artwork cannot survive. */
.choice__banner { display: block; background: var(--c-navy-deep); line-height: 0; }
.choice__banner-img { display: block; width: 100%; height: auto; }

/* ---- Content -------------------------------------------------------------
   Pulled up over the banner's curve so the trust row sits in the white rather
   than below a band of empty page. */
.choice__body {
  position: relative;
  z-index: 2;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4.5vw, 28px) clamp(40px, 9vw, 72px);
  margin-top: clamp(-26px, -4vw, -14px);
}

/* ---- Trust row -----------------------------------------------------------
   One card, four cells, hairline dividers between them. It wraps to two rows
   below ~520px rather than shrinking the text, because four items across a
   360px screen leaves each one unreadable. */
.trust {
  list-style: none;
  margin: 0 0 clamp(30px, 7vw, 46px);
  padding: clamp(12px, 3vw, 16px) clamp(6px, 2vw, 10px);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(18, 41, 74, .05), 0 10px 28px rgba(18, 41, 74, .07);
}
@media (min-width: 620px) { .trust { grid-template-columns: repeat(4, 1fr); } }

.trust__item {
  display: flex;
  align-items: center;
  gap: clamp(8px, 2.2vw, 12px);
  padding: clamp(8px, 2vw, 10px) clamp(8px, 2.4vw, 14px);
  min-height: 48px;
  position: relative;
}
/* Dividers drawn with a pseudo-element rather than a border, so the first cell
   of each row never carries a stray line. */
.trust__item + .trust__item::before {
  content: "";
  position: absolute; left: 0; top: 14%; bottom: 14%;
  width: 1px; background: var(--c-line);
}
@media (max-width: 619.98px) {
  .trust__item:nth-child(odd)::before { display: none; }
  .trust__item:nth-child(n+3) { border-top: 1px solid var(--c-line); }
}

.trust__icon { flex: none; display: grid; place-items: center; }
.trust__glyph { width: clamp(22px, 6vw, 26px); height: clamp(22px, 6vw, 26px); }
.trust__icon--orange { color: var(--c-orange); }
.trust__icon--blue   { color: var(--c-blue); }
.trust__icon--navy   { color: var(--c-navy); }

.trust__text { display: flex; flex-direction: column; min-width: 0; }
.trust__text span {
  font-size: clamp(.8rem, 3.1vw, .92rem);
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -.01em;
  color: var(--c-ink);
}

/* ---- Headings ------------------------------------------------------------ */
.choice__title {
  margin: 0 0 8px;
  text-align: center;
  font-size: clamp(1.5rem, 6.4vw, 2.1rem);
  line-height: 1.18;
  font-weight: 800;
  letter-spacing: -.028em;
  color: var(--c-ink);
}
.choice__lede {
  margin: 0 0 clamp(22px, 5.5vw, 34px);
  text-align: center;
  font-size: clamp(.95rem, 3.9vw, 1.06rem);
  color: var(--c-muted);
}

/* ---- Choice cards --------------------------------------------------------
   Side by side from 560px. Below that they stack, because two cards on a
   360px screen leaves the body copy four words wide. */
.choice__cards { display: grid; grid-template-columns: 1fr; gap: clamp(14px, 3.5vw, 20px); }
@media (min-width: 560px) { .choice__cards { grid-template-columns: 1fr 1fr; } }

.pick {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(22px, 5.5vw, 30px) clamp(16px, 4vw, 24px) clamp(18px, 4.5vw, 24px);
  background: #fff;
  border: 1px solid #EEF2F8;
  border-radius: 22px;
  box-shadow: 0 1px 2px rgba(18, 41, 74, .04), 0 12px 32px rgba(18, 41, 74, .08);
  transition: transform .22s cubic-bezier(.2, .7, .3, 1), box-shadow .22s cubic-bezier(.2, .7, .3, 1);
}
.pick:hover { transform: translateY(-3px); box-shadow: 0 2px 6px rgba(18, 41, 74, .06), 0 20px 44px rgba(18, 41, 74, .13); }

.pick__icon {
  width: clamp(64px, 16vw, 78px); height: clamp(64px, 16vw, 78px);
  border-radius: 50%;
  display: grid; place-items: center;
  margin-bottom: clamp(14px, 3.5vw, 20px);
}
.pick__glyph { width: 46%; height: 46%; }
.pick--customer .pick__icon { background: var(--c-blue-wash); color: var(--c-blue); }
.pick--owner .pick__icon { background: var(--c-orange-wash); color: var(--c-orange); }

.pick__name {
  margin: 0 0 10px;
  font-size: clamp(1.2rem, 5vw, 1.5rem);
  font-weight: 800;
  letter-spacing: -.025em;
  color: var(--c-ink);
}
.pick__body {
  margin: 0 0 clamp(18px, 4.5vw, 24px);
  font-size: clamp(.88rem, 3.5vw, .95rem);
  line-height: 1.5;
  color: var(--c-body);
  max-width: 30ch;
}

/* The CTA is the tap target, and it fills the card so the whole lower half of
   a card is pressable on a phone. */
.pick__cta {
  margin-top: auto;
  width: 100%;
  min-height: 52px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  border-radius: 14px;
  font-size: clamp(.95rem, 3.8vw, 1.02rem);
  font-weight: 700;
  letter-spacing: -.01em;
  text-decoration: none;
  color: #fff;
  transition: background .16s ease, transform .12s ease, box-shadow .16s ease;
}
.pick__arrow { width: 20px; height: 20px; flex: none; transition: transform .22s cubic-bezier(.2, .7, .3, 1); }
.pick:hover .pick__arrow { transform: translateX(3px); }
.pick__cta:active { transform: scale(.985); }

.pick__cta--blue { background: var(--c-blue); box-shadow: 0 6px 16px rgba(37, 99, 235, .28); }
.pick__cta--blue:hover { background: var(--c-blue-dk); }
.pick__cta--orange { background: var(--c-orange); box-shadow: 0 6px 16px rgba(242, 107, 33, .28); }
.pick__cta--orange:hover { background: var(--c-orange-dk); }

.pick__cta:focus-visible { outline: 3px solid var(--c-navy); outline-offset: 3px; }

/* ---- Map -----------------------------------------------------------------
   Decorative and behind everything. Pinned to the bottom so it carries the eye
   down toward the cards rather than adding a band of empty page under them. */
/* Height is capped rather than left to the image's own aspect ratio. At a
   desktop width the 1536x1024 artwork is over 1000px tall, so `height:auto`
   made it reach from the bottom of the page all the way up over the banner —
   washing the truck out to near-white. It is a footer graphic, so it gets a
   footer's worth of height and crops from the bottom. */
.choice__map {
  position: absolute; left: 0; right: 0; bottom: 0;
  z-index: 1;
  width: 100%;
  height: clamp(190px, 34vw, 400px);
  object-fit: cover;
  object-position: center bottom;
  pointer-events: none;
  opacity: .95;
}

@media (min-width: 900px) {
  .choice__body { max-width: 860px; }
  .pick__body { max-width: 32ch; }
}

@media (prefers-reduced-motion: reduce) {
  .pick, .pick__cta, .pick__arrow { transition: none; }
  .pick:hover { transform: none; }
  .pick:hover .pick__arrow { transform: none; }
  .pick__cta:active { transform: none; }
}

/* ---- Brand bar -----------------------------------------------------------
   A slim white strip above the banner carrying the real logo. The artwork
   below already shows the wordmark, so this stays small and quiet rather than
   restating it at the same weight. */
.choice__brand {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  background: #fff;
}
.choice__brand .logo { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.choice__brand .logo__img { display: block; height: 40px; width: auto; }
@media (max-width: 599px) {
  .choice__brand { padding: 10px 14px; }
  .choice__brand .logo__img { height: 34px; }
}