/* JMA Cars — phone layer (loads last on every page).
   Goal: one clear action per screen, 2-up car grids, full-width buttons, nothing oversized. */

@media (max-width:600px){
  body{font-size:16px}

  /* ---------- rhythm + type ---------- */
  .sec{padding-block:52px}
  .sec.tight{padding-block:32px}
  .h-sec{font-size:28px;line-height:1.08}
  .eyebrow{font-size:11.5px;letter-spacing:.12em}
  .sec-head{margin-bottom:20px;gap:12px}
  .page-head{padding-block:28px 16px}
  .page-head h1,.letter h1{font-size:34px!important;line-height:1.05}
  .page-head .lede,.page-head p{font-size:15.5px}

  /* ---------- floating glass nav ---------- */
  .site-head{top:calc(env(safe-area-inset-top,0px) + 10px);margin-top:10px}
  .nav,.site-head.scrolled .nav{height:56px;padding:0 6px 0 14px}
  .nav .logo img,.site-head.scrolled .nav .logo img{height:36px}
  .nav .menu-btn{width:44px;height:44px;min-height:0}

  /* ---------- buttons: consistent size, full width in groups ---------- */
  .btn{min-height:50px;font-size:15.5px;padding:0 20px}
  .btn-lg{min-height:54px;font-size:16px;padding:0 22px}
  .btn-sm{min-height:40px}
  .icon-btn{width:42px;height:42px;padding:0}
  .acts,.done-acts,.btn-pair{display:grid!important;grid-template-columns:1fr;gap:10px!important;width:100%}
  .acts .btn,.done-acts .btn,.btn-pair .btn{width:100%;margin:0}
  .btn.two-line{min-height:62px;padding:8px 16px;font-size:15px;letter-spacing:-.01em;text-wrap:balance}
  .btn.two-line .sub{font-size:12px}

  /* ---------- car cards: 2-up grid, compact text ---------- */
  .cards,.b-cards{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:22px 12px!important}
  .ucard .ph{border-radius:18px}
  .ucard .badge{left:8px;top:8px;height:24px;padding:0 9px;font-size:11px}
  .ucard .go{display:none}
  .ucard .bd{padding:10px 2px 0;gap:2px}
  .ucard .yr{font-size:12px}
  .ucard h3{font-size:16.5px;line-height:1.15}
  .ucard .meta{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ucard .money{margin-top:6px;gap:0 4px}
  .ucard .mo{font-size:20px}
  .ucard .mo-l{font-size:11.5px}
  .ucard .dp{font-size:12.5px;line-height:1.35}
  .ucard .dp{display:flex;flex-direction:column}
  .ucard .dp>span+span::before{content:none}
  .incl-tag{font-size:11.5px;margin-top:6px;gap:4px}
  .ucard .mo-was{font-size:11px;line-height:1.3}
  .mydp{width:100%;justify-content:space-between}
  .mydp-in{flex:1;min-width:0;max-width:200px}
  .dpx-edit .input{width:130px}
  .incl-tag svg{width:13px;height:13px}
  .gap{font-size:12px;padding:5px 8px;line-height:1.35}

  /* ---------- controls ---------- */
  .seg{display:flex;width:100%}
  .seg button{flex:1;padding:0 10px}
  .opts{gap:8px}
  .opts .opt{flex:1 1 auto}
  .opt span{width:100%;justify-content:center;padding:0 14px}
  .chip{height:38px;padding:0 14px;font-size:14px}

  /* ---------- panels ---------- */
  .panel{border-radius:20px;padding:20px}
  .kv div{padding:12px 14px}

  /* ---------- footer ---------- */
  .site-foot .wrap{grid-template-columns:1fr 1fr;gap:28px 16px;padding-block:44px 32px}
  .site-foot .brand,.site-foot .legal{grid-column:1/-1}
  .site-foot .wrap>div:nth-child(4){grid-column:1/-1}
  .site-foot .brand .logo-tile img{height:40px}
  .site-foot h4{margin-bottom:10px;font-size:12px}
  .site-foot ul{gap:8px;font-size:15px}

  /* ================= HOME ================= */
  .hero{margin-top:-66px;padding-top:84px}
  .hero::after{height:60px}
  .hero-in{padding-bottom:20px}
  .hero-in>.eyebrow{font-size:10.5px}
  .hero-pre{font-size:17px;margin-top:8px}
  .hero-word-wrap,.hero-word{--fs:13.4vw}
  .hero-word{margin-top:2px}
  .hero-car{width:78vw;margin-top:calc(var(--fs) * -.12)}
  .finder,.hero .finder{grid-template-columns:1fr 1fr;border-radius:24px;padding:6px;margin-top:-10px;width:100%}
  .fsel{min-height:54px;padding:6px 28px 6px 14px;border-radius:18px}
  .fsel+.fsel::before{left:0;right:auto;top:22%;bottom:22%;width:1px;height:auto;background:linear-gradient(180deg,rgba(17,18,20,0),rgba(17,18,20,.14),rgba(17,18,20,0))}
  .fsel span{font-size:10px;letter-spacing:.06em;white-space:nowrap}
  .fsel select{font-size:15.5px}
  .fsel::after{right:12px;width:7px;height:7px}
  .finder .btn{grid-column:1/-1;min-height:52px;margin:6px 0 0;font-size:16px}
  .hero-proof{display:none}
  .marquee-item{padding:14px 16px;font-size:16px;gap:16px}
  .marquee-item::after{margin-left:16px;width:6px;height:6px}

  .row-ctrl .icon-btn{display:none}
  .row-ctrl .link-arrow{margin-left:0!important}
  .sec-head{align-items:flex-end}
  .hrow{grid-auto-columns:58%;gap:12px}

  .slide-ctl{border-radius:24px;padding:22px;gap:14px}
  .slide-ctl .h-sec{font-size:24px!important}
  .slide-mo{font-size:46px}
  .slide-res{font-size:15px}
  .slide-res b{font-size:24px}
  .slide-cards{gap:12px;min-height:0}

  .band{border-radius:26px;padding:28px 20px;gap:24px}
  .band h2{font-size:30px}
  .band p{font-size:16px;margin-top:12px}
  .band .acts{margin-top:22px}
  .band-stats{grid-template-columns:1fr 1fr;gap:10px}
  .bstat{flex-direction:column;align-items:flex-start;justify-content:space-between;gap:6px;padding:14px 16px;border-radius:16px}
  .bstat span{font-size:12.5px;line-height:1.3;text-wrap:balance}
  .bstat b{font-size:22px!important;line-height:1.05}

  .merick{grid-template-columns:auto 1fr!important;gap:16px;align-items:center}
  .merick .portrait{width:84px;aspect-ratio:1;border-radius:24px;box-shadow:0 8px 20px rgba(207,16,25,.25)}
  .merick .portrait .mono{font-size:48px}
  .merick .portrait .tag{display:none}
  .merick>div:last-child{display:contents}
  .merick .eyebrow{grid-column:2;grid-row:1;align-self:center}
  .merick .quote{grid-column:1/-1;font-size:24px;margin:4px 0 0}
  .merick .sig{grid-column:1/-1;margin-top:4px}
  .merick .sig .dot{display:none}
  .merick .btn-pair{grid-column:1/-1;margin-top:8px!important}

  .steps3{gap:10px}
  .step{padding:20px 20px 22px;border-radius:20px;display:grid;grid-template-columns:44px 1fr;column-gap:12px;row-gap:4px}
  .step::before{font-size:26px;grid-row:1/3;padding-top:2px}
  .step h3{font-size:18px}
  .step p{font-size:14.5px}

  .closing{border-radius:26px;padding:36px 20px}
  .closing h2{font-size:34px}
  .closing p{font-size:16px;margin:12px auto 22px}

  /* ================= UNIT ================= */
  .gal{border-radius:22px}
  .gal-track{aspect-ratio:4/5}
  .g-prev,.g-next{display:none}
  .g-full{top:10px;right:10px}
  .g-count{left:10px;bottom:10px}
  .g-thumbs{gap:8px}
  .g-thumbs button{width:64px;height:64px;border-radius:12px}
  .g-prev,.g-next{width:40px;height:40px}
  .u-info{gap:16px}
  .u-title{font-size:32px}
  .pricebox{padding:18px 18px;border-radius:20px;gap:12px}
  .pb-mo{font-size:40px}
  .pb-row b{font-size:17px}
  .pb-sub{font-size:14px}
  .pb-cashv{font-size:26px}
  .incl-box{padding:18px}
  .hl-list{grid-template-columns:1fr 1fr;column-gap:12px}
  .hl-list li,.incl-list li{font-size:14px}
  .u-desc{font-size:16px}
  .u-more{margin-top:40px;gap:24px}
  .sticky-cta{padding-left:12px;padding-right:12px}
  .sticky-cta .in{border-radius:20px}
  .sticky-cta .btn{min-height:46px;padding:0 18px}

  /* ================= LISTINGS / BUDGET ================= */
  .filters{padding:10px;border-radius:20px}
  .count{margin:2px 0 16px}
  .calc{border-radius:24px;padding:20px;gap:20px}
  .knob-val{font-size:36px}
  .knob-edit input{flex:1;width:auto;min-width:0}
  .calc,.calc>*{min-width:0}
  .presets{display:grid;grid-template-columns:1fr;gap:8px}
  .presets .chip{width:100%;min-width:0;height:40px;font-size:14px}
  .res-n{font-size:56px}
  .res-t{font-size:22px}
  .res-head{margin-bottom:16px}

  /* ================= APPLY ================= */
  .fs{padding:20px;border-radius:24px;gap:16px}
  .fs legend{font-size:20px}
  .fs legend .n{width:30px;height:30px;font-size:14px}
  .next{padding:18px}

  /* ================= ABOUT ================= */
  .ab{gap:22px;padding-top:24px}
  .ab .portrait{max-width:none;width:100%;aspect-ratio:4/3;border-radius:26px}
  .ab .portrait .mono{font-size:110px}
  .ab .portrait.has-photo{aspect-ratio:4/5}
  .merick .portrait.has-photo picture img{object-position:50% 40%}
  .letter{gap:16px}
  .letter .pull{font-size:22px;padding-left:16px}
  .letter p{font-size:16.5px}
  .promise{padding:20px;border-radius:20px}
  .promise h3{font-size:19px}

  /* ================= HOW IT WORKS ================= */
  .rule{margin-top:36px;border-radius:24px;padding:24px 20px}
  .rule .big{font-size:52px}
  summary{font-size:16px;padding:16px 2px}
}

/* very small phones (iPhone SE, older Androids) */
@media (max-width:360px){
  .ucard h3{font-size:15px}
  .ucard .mo{font-size:18px}
  .fsel span{font-size:9px}
  .hrow{grid-auto-columns:66%}
}