.trade-page { background: #f5f5f5; }
.trade-hero { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: stretch; min-height: 610px; padding-top: 72px; background: #fff; }
.trade-hero-copy { align-self: center; width: min(100% - 48px, 520px); margin: 0 auto; padding: 70px 0; }
.trade-hero-copy h1 { margin-bottom: 18px; font-size: clamp(46px, 6vw, 84px); }
.trade-hero-copy > p:not(.eyebrow) { max-width: 480px; color: var(--muted); font-size: 19px; }
.trade-hero-art { min-height: 610px; background: url('https://digitalassets.tesla.com/image/upload/f_auto,q_auto/prod/fulfillment/vehicle/images/trade-in/Trade-In-Social.avif') center / cover no-repeat, linear-gradient(135deg, #c4d0d4, #50636b); }
.trade-workspace { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; gap: clamp(30px, 8vw, 130px); width: min(100% - 48px, 1160px); margin: 0 auto; padding: clamp(76px, 10vw, 132px) 0; }
.trade-intro { max-width: 420px; padding-top: 18px; }
.trade-intro > p:not(.eyebrow) { color: var(--muted); font-size: 17px; }
.trade-card { padding: clamp(24px, 4vw, 46px); border-radius: 16px; background: #fff; box-shadow: 0 18px 45px rgba(0,0,0,.08); }
.trade-progress { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.trade-progress span { display: flex; align-items: center; gap: 8px; color: #92959a; font-size: 13px; font-weight: 700; }
.trade-progress b { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; color: #fff; background: #c9cacc; font-size: 12px; }
.trade-progress span.is-active { color: var(--ink); }.trade-progress span.is-active b { background: var(--red); }
.trade-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 16px; padding-top: 30px; }
.trade-field-group { display: grid; gap: 8px; }
.trade-field-group label { font-size: 14px; font-weight: 700; }.trade-field-group small { color: var(--muted); font-size: 12px; }
.trade-field-group input, .trade-field-group select { width: 100%; height: 50px; padding: 0 14px; border: 1px solid #c7c9cc; border-radius: 8px; color: var(--ink); background: #fff; font: inherit; outline: none; }
.trade-field-group input:focus, .trade-field-group select:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(23,26,32,.1); }
.trade-submit { grid-column: 1 / -1; width: 100%; margin-top: 8px; }
.trade-result { display: flex; align-items: flex-start; gap: 18px; padding-top: 35px; }.trade-result-icon { display: grid; place-items: center; flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; color: #fff; background: #24a148; font-weight: 700; }.trade-result h3 { margin-bottom: 8px; font-size: 26px; }.trade-result p { margin-bottom: 0; color: var(--muted); }
.trade-benefits { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(30px, 8vw, 130px); padding: clamp(76px, 10vw, 132px) max(24px, calc((100% - 1160px) / 2)); background: #fff; }
.trade-benefits-copy { max-width: 360px; }.trade-benefit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }.trade-benefit-grid article { padding-top: 18px; border-top: 1px solid var(--line); }.trade-benefit-grid strong { color: var(--red); font-size: 13px; }.trade-benefit-grid h3 { margin-top: 20px; font-size: 22px; }.trade-benefit-grid p { color: var(--muted); font-size: 14px; }
.trade-cta { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 72px max(24px, calc((100% - 1160px) / 2)); color: #fff; background: var(--red); }.trade-cta h2 { margin-bottom: 0; font-size: clamp(32px, 4vw, 54px); }.trade-cta .button { flex: 0 0 auto; }

@media (max-width: 850px) {
  .trade-hero { grid-template-columns: 1fr; min-height: 0; }.trade-hero-copy { width: min(100% - 48px, 620px); padding: 100px 0 70px; }.trade-hero-art { min-height: 390px; }
  .trade-workspace, .trade-benefits { grid-template-columns: 1fr; gap: 40px; }.trade-intro, .trade-benefits-copy { max-width: 600px; }.trade-benefit-grid { max-width: 700px; }
}
@media (max-width: 600px) {
  .trade-hero-copy { width: calc(100% - 32px); padding: 92px 0 56px; }.trade-hero-art { min-height: 300px; }.trade-workspace { width: calc(100% - 32px); padding: 70px 0; }.trade-card { padding: 22px 18px; }.trade-progress span { gap: 5px; font-size: 11px; }.trade-progress b { width: 22px; height: 22px; }.trade-form { grid-template-columns: 1fr; }.trade-submit { grid-column: auto; }.trade-benefits { padding: 70px 16px; }.trade-benefit-grid { grid-template-columns: 1fr; gap: 28px; }.trade-cta { align-items: flex-start; flex-direction: column; padding: 62px 24px; }.trade-cta .button { width: 100%; }
}