/* =============================================================================
   The Car Liaison — mobile homepage, matched to the Figma frame
   -----------------------------------------------------------------------------
   File: IFFq2XjLloQfQSXhfEqksq · node 1:4 · "iPhone 16 & 17 Pro - 1" (402x874)

   Every number below is taken from that frame. Horizontal values that scale are
   expressed as a percentage of the 402pt artboard so the layout holds from 320
   to 520; vertical values stay in points because the design is a fixed stack.

   Only the first two bands are specified by the design. Everything further down
   the page keeps the responsive system.
   ========================================================================== */

/* Carousel-only element; visibility is governed in site.css. */
.dcard__model { display: none; }

@media (max-width: 560px) {

  /* The frame uses an 18pt gutter throughout. */
  :root { --gut: 18px; }

  /* ------------------------------------------------------------ 1. header */
  /* Message Us pill 99x24 at (243,31); burger rules 27 wide at x=359.5. */

  .hdr__inner { height: 74px; gap: 0; align-items: flex-start; padding-top: 14px; padding-right: 15.5px; }
  .hdr__actions { padding-top: 17px; }   /* pill top edge lands on y=31 */

  .brand { gap: 8px; }
  .brand .wordmark { font-size: 12px; line-height: 1.06; }
  .brand__rule { height: 36px; }
  .brand__mark { width: 84px; }

  .hdr__actions { margin-left: auto; gap: 18px; align-items: flex-start; }

  .btn--pill {
    height: 24px;
    min-width: 99px;
    padding: 0 12px;
    border-radius: 13px;
    font-size: 12px;
    box-shadow: inset 0 0 0 2px var(--beige);
  }

  .burger {
    width: 27px; height: 21px;
    margin-top: 2px;
    border-radius: 0;
    box-shadow: none !important;
    background: none;
  }
  .burger svg { width: 27px; height: 20px; }

  /* -------------------------------------------------------------- 2. hero */
  /* Band runs 0-514. Headline centres at 124/173, ghost tops at 157, vehicle
     occupies (88,172) 388x291, price lockup 418-484, CTA 139x49 at (242,437). */

  .hero { padding-top: 0; margin-top: calc(var(--hdr-h) * -1); }

  .hero__wrap {
    display: block;
    position: relative;
    min-height: 514px;
    padding: 0 0 0;
    margin: 0;
  }

  .hero__copy {
    position: relative;
    z-index: 3;
    padding: 100px 0 0;
    margin: 0 var(--gut);
  }

  /* The frame carries no eyebrow and no supporting paragraph. */
  .hero__copy .eyebrow,
  .hero__copy .lede { display: none; }

  .hero__copy h1 {
    margin: 0;
    font-size: 40px;
    line-height: 1.225;
    letter-spacing: -.005em;
    white-space: pre-line;
  }

  .hero__stage {
    position: absolute;
    left: 0; right: 0;      /* absolute children sit on .wrap's padding edge */
    top: 157px;
    height: 306px;
    min-height: 0;
    margin: 0;
    z-index: 1;
  }

  .hero__ghost {
    left: var(--gut); right: 0; top: 0;
    width: auto;                     /* a real width to wrap within */
    transform: none;
    font-size: 110px;
    line-height: .969;
    color: rgba(255, 255, 255, .12);
    -webkit-text-stroke: 0;
    text-align: left;
  }

  .hero__car {
    position: absolute;
    left: 21.9%;            /* 88 / 402  */
    top: 15px;              /* 172 - 157 */
    width: 96.5%;           /* 388 / 402 */
    height: 291px;
    margin: 0;
    object-fit: contain;
    object-position: center;
    transform: none;
    animation-name: carInFlat;
    filter: drop-shadow(0 24px 30px rgba(0, 0, 0, .35));
  }

  .hero__deal {
    position: absolute;
    left: var(--gut); right: var(--gut);
    top: 418px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
    min-height: 76px;
  }

  /* From -> price -> model, as the frame stacks them. */
  .hero__deal .hero__fromlbl { order: 1; }
  .hero__deal .hero__price   { order: 2; }
  .hero__deal .hero__name    { order: 3; }

  .hero__fromlbl {
    margin: 0;
    font-size: 15px;
    line-height: 1;
    color: rgba(255, 255, 255, .51);
  }

  .hero__price {
    margin: -5px 0 0;
    font-size: 40px;
    line-height: 1;
    color: var(--paper);
  }
  .hero__price .price__cur { font-size: .5em; margin-top: .12em; }
  .hero__price .price__per { font-size: .4em; color: rgba(255, 255, 255, .7); }

  .hero__name {
    margin: 1px 0 0;
    font-size: 15px;
    line-height: 1;
    color: var(--beige);
  }
  .hero__name span { display: none !important; }

  /* Class label, term/state meta and the deal dots are not in the frame. */
  .hero__class,
  .hero__meta,
  .hero__switch { display: none; }

  .hero__cta {
    position: absolute;
    right: 3px; top: 19px;    /* 437 - 418; right edge lands on 381 */
    display: block;
  }

  .hero__cta .tlink { display: none; }

  .hero__cta .btn {
    width: 139px;
    height: 49px;
    padding: 0;
    border-radius: 6px;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: .01em;
    gap: 0;
  }
  .hero__cta .btn .chev { display: none; }

  .hero__road { display: none; }
  .hero::before { opacity: .55; }

  /* ------------------------------------------------- 3. fleet / process band */
  /* Grey band 514-874. Headings at 584/618, pills 156x30 at y=648. */

  .wayfind {
    position: relative;
    background: #d9d9d9;
    padding: 53px 0 0;
    min-height: 0;
    overflow: hidden;
  }

  .wayfind__ghost {
    position: absolute;
    left: 10px; top: 36px;
    font-family: var(--ghost);
    color: rgba(22, 63, 66, .1);
    line-height: .767;
    font-size: 96px;
    pointer-events: none;
    user-select: none;
  }
  .wayfind__ghost span { display: block; font-size: 83px; line-height: .83; }

  .wayfind__grid {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 54px;   /* puts column two on x=228 */
    padding-inline: var(--gut);
  }

  .wayfind__h {
    font-size: 32px;
    line-height: 1.06;
    color: var(--teal);
    margin: 0 0 14px;
  }

  .wayfind__pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 156px;
    max-width: 100%;
    height: 30px;
    padding-inline: 8px;   /* base 18px left too little room for the label */
    white-space: nowrap;
    border-radius: 6px;
    background: var(--teal);
    color: var(--beige);
    font-family: var(--display);
    font-size: 12px;
  }

  /* ----------------------------------------------- 4. deal carousel + hint */
  /* Cards 381x178 swiping horizontally, then the swipe hint centred beneath. */

  .sec-deals {
    background: #d9d9d9;
    padding: 49px 0 20px;
    margin-top: 0;
  }

  .sec-deals .sec-head { display: none; }

  .sec-deals > .wrap { padding-inline: 0; }

  .sec-deals .grid-deals {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    /* overflow-x:auto forces overflow-y to auto as well, and the car image
       breaks 33px past the card top and bottom — which is what made the row
       drag vertically. Pad the scroll box so the image fits inside it, clip
       the vertical axis, then pull the box back so spacing is unchanged. */
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    padding: 38px 10px 38px;
    margin-block: -34px;
    margin-inline: 0;
  }
  .sec-deals .grid-deals::-webkit-scrollbar { display: none; }

  .sec-deals .dcard {
    flex: none;
    width: 381px;
    max-width: calc(100vw - 21px);
    height: 112px;
    min-height: 0;
    scroll-snap-align: center;
  }

  .swipe-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: -8px;
    font-family: var(--display);
    font-size: 11px;
    color: rgba(22, 63, 66, .54);
  }

  /* The carousel card is its own tighter composition. */
  .sec-deals .dcard__body { padding: 14px 0 0 14px; }
  .sec-deals .dcard__foot { margin: 0; padding: 0; }
  .sec-deals .dcard__class,
  .sec-deals .dcard__where,
  .sec-deals .dcard__badges { display: none; }
  .sec-deals .dcard__name { display: none; }
  .sec-deals .dcard__foot { margin-top: 0; padding-top: 0; }
  .sec-deals .dcard__price { height: 28px; margin: 0; }
  .sec-deals .dcard__price .from { display: none; }
  .sec-deals .dcard__price .price { font-size: 24px; }
  .sec-deals .dcard__price .price__per { font-size: .42em; }

  .sec-deals .dcard__model {
    display: block;
    height: 23px;
    margin: 0;
    font-family: var(--display);
    font-size: 12px;
    line-height: 12px;
    color: var(--beige);
  }

  .sec-deals .dcard .btn {
    width: 113px;
    height: 34px;
    padding: 0;
    font-size: 11px;
    text-transform: uppercase;
    border-radius: 6px;
    gap: 0;
  }
  .sec-deals .dcard .btn .chev { display: none; }

  /* In the frame the vehicle is 178 tall against a 112 panel and breaks out
     of it top and bottom. */
  .sec-deals .dcard { overflow: visible; }
  .sec-deals .dcard__stage { margin: 0; overflow: visible; }
  .sec-deals .dcard__img {
    top: -33px;
    height: 178px;
    transform: none;
  }
}


/* =============================================================== ergonomics

   Fixes found auditing the build on a 390pt screen. These sit outside the
   frame-exact block because they apply to every page, not just the homepage.
   ========================================================================= */

@media (max-width: 700px) {

  /* Two-up section headers were squeezing a heading and a link into half a
     screen each, so both wrapped. Stack them. */
  .quick__head,
  .picker__head,
  .sec-head {
    display: block;
  }

  .quick__head h2,
  .picker h2 { margin-bottom: 6px; }

  .picker__hint { display: block; }

  .sec-head > .btn,
  .sec-head > .tlink { margin-top: 18px; }

  .sec-head__text { max-width: none; }

  /* The frame's pills are 24 and 30 tall. Keep them looking that way but give
     them a finger-sized hit area. */
  .btn--pill,
  .wayfind__pill,
  .tlink,
  .foot__legal a {
    position: relative;
  }
  .btn--pill::after,
  .wayfind__pill::after,
  .tlink::after,
  .foot__legal a::after {
    content: '';
    position: absolute;
    inset: -11px -8px;
  }
  /* .tlink already uses ::after for its underline. */
  .tlink::after { inset: auto; }
  .tlink { padding-block: 10px; }

  /* Smaller float so it stops sitting on top of the term chips. */
  .wa-float { height: 46px; padding-inline: 11px; }
  .wa-float svg { width: 21px; height: 21px; }
}

@media (max-width: 700px) {
  /* Footer links were 19px tall with 10px between them. */
  .foot li + li { margin-top: 4px; }
  .foot ul a { display: inline-block; padding-block: 9px; }
}

/* ------------------------------------------------- empty hero (no deals yet)

   The frame-exact rules above position the hero CTA absolutely against the
   price lockup. With nothing published there is no lockup, so the button has
   to return to normal flow.
   ========================================================================= */

.hero__wrap--bare { display: block; }

.hero__wrap--bare .hero__copy {
  position: static;
  padding: 0;
  margin: 0;
}

.hero__wrap--bare .hero__cta {
  position: static;
  display: flex;
  right: auto;
  top: auto;
}

.hero__wrap--bare .hero__cta .btn {
  width: auto;
  height: auto;
  padding: 15px 26px;
  text-transform: none;
  gap: 10px;
}
.hero__wrap--bare .hero__cta .btn .chev { display: inline-flex; }

@media (max-width: 560px) {
  .hero__wrap--bare {
    min-height: 0;
    padding: 104px var(--gut) 56px;   /* the frame-exact rule zeroes the gutter */
  }
  .hero__wrap--bare .hero__cta .btn { width: 100%; justify-content: center; }
}