/* Compact phone layout (<= 640 px). Loaded last: spacing, sizes and touch targets only; markup and behaviour are unchanged. */
@media (max-width: 640px) {
  html, body { overflow-x: hidden; }
  body { font-size: 15px; }
  .wrap { padding: 8px 10px 40px; }
  .topbar { padding: 4px 12px; }
  .brand-mark { width: 24px; height: 24px; font-size: .8rem; }
  h2 { font-size: 1.05rem; margin-bottom: 6px; } h3 { font-size: .95rem; margin: 10px 0 4px; }
  .card { padding: 10px 12px; margin-bottom: 8px; border-radius: 12px; }
  label { margin: 8px 0 3px; font-size: .8rem; }
  input[type=text], input[type=search], input[type=number], select, textarea { min-height: 40px; padding: 6px 10px; }
  button, .btn { min-height: 38px; padding: 5px 12px; font-size: .92rem; }

  /* sections: all of them fit one line, no sideways drag */
  .tabs { gap: 0; margin-bottom: 10px; overflow-x: visible; }
  .tab { flex: 1 1 0; min-width: 0; padding: 8px 2px; min-height: 42px; font-size: .8rem; text-align: center; border-bottom-width: 2px; }

  /* sale / buyback / trade-in controls */
  .seg { width: 100%; } .seg-btn { min-height: 36px; font-size: .92rem; }
  .sale-top { margin-bottom: 6px; gap: 4px 10px; }
  .picker input[type=search] { min-height: 42px; font-size: 1rem; }
  .picker-steps { gap: 6px; margin-top: 6px; }
  .picker-row { gap: 6px; } .picker-row-label { min-width: 0; flex: 1 0 100%; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: -2px; }
  .picker-row-buttons { gap: 5px; }
  .picker-opt-btn { min-height: 34px; padding: 3px 11px; font-size: .88rem; gap: 6px; }
  .picker-opt-btn.picker-mem { min-width: 0; }
  .picker-gen, .picker-ver { min-width: 0; }
  .picker-models { gap: 6px; margin-bottom: 8px; }
  .picker-chosen { padding: 8px 10px; } .picker-name { font-size: 1.05rem; }
  .picker-price .amount { font-size: 1.9rem; line-height: 1.15; }
  .picker-add { min-height: 36px; }
  .choice-row { gap: 6px; } .choice { min-height: 42px; min-width: 0; flex: 1 1 28%; padding: 4px 8px; font-size: .92rem; border-radius: 10px; }
  .assess { gap: 10px; margin: 8px 0; } .assess h3 { margin-bottom: 4px; }
  .bigchecks { grid-template-columns: 1fr 1fr; gap: 6px; } .bigcheck { min-height: 42px; padding: 4px 10px; font-size: .88rem; gap: 8px; }
  .sale-row { padding: 8px 10px; } .sale-what strong { font-size: .98rem; }
  .fold > summary { padding: 8px 12px; font-size: .92rem; } .fold { margin-top: 8px; }
  .amount { font-size: 1.5rem; } .result-card .amount { font-size: 1.9rem; }
  .cmp-strip { padding: 8px; margin-top: 8px; } .cmp-pick { min-height: 48px; padding: 6px 10px; }
  .draft-head { margin-bottom: 6px; } .draft-new button { min-height: 30px; }
  .table-wrap { margin: 0; }

  /* home: shorter hero, smaller cards */
  .hb-hero { min-height: 0; padding: 16px 15px 15px; border-radius: 20px; }
  .hb-hero-content { max-width: 100%; padding-right: 74px; }
  .hb-h1 { font-size: 23px; margin: 12px 0 7px; letter-spacing: -.8px; }
  .hb-hero p { font-size: 11.5px; margin-bottom: 12px; max-width: 220px; }
  .hb-hero-cta { min-height: 38px; padding: 8px 12px; }
  .hb-mark { width: 60px; height: 60px; right: 14px; bottom: 14px; border-radius: 16px; }
  .hb-section { margin: 16px 2px 8px; } .hb-section h2 { font-size: 17px; margin-top: 3px; }
  .hb-grid { gap: 8px; }
  .hb-card { min-height: 0; padding: 11px; border-radius: 16px; gap: 3px; }
  .hb-icon { width: 38px; height: 38px; border-radius: 12px; } .hb-icon svg { width: 22px; height: 22px; }
  .hb-name { margin-top: 3px; font-size: 13px; } .hb-desc { min-height: 0; font-size: 11px; line-height: 1.35; }
  .hb-bottom { margin-top: 3px; } .hb-arrow { width: 22px; height: 22px; font-size: 14px; }
  .hb-fresh { margin-top: 10px; padding: 8px 12px; font-size: 11px; }
  .hb-notice { padding: 12px; margin-top: 10px; }
  .hb-nav { padding-top: 4px; } .hb-nav-item { min-height: 44px; }
  .hb-sub { padding: 16px; } .hb-sub h2 { font-size: 19px; margin: 12px 0 6px; }
  body.has-nav .wrap { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px) + var(--tg-bottom, 0px) + var(--kb, 0px)); }
}
@media (max-width: 359px) {
  .tab { font-size: .72rem; }
  .picker-opt-btn { padding: 3px 9px; font-size: .84rem; }
  .hb-hero-content { padding-right: 0; } .hb-mark { display: none; }
  .hb-grid { gap: 6px; } .hb-card { padding: 9px; }
}