/* Trade-in page — аккуратная сетка, mobile-first */
:root{
  --ti-gap: 12px;
  --ti-radius: var(--r-panel, 16px);
  --ti-surface: var(--surface, #fff);
  --ti-text: var(--text, #111);
  --ti-muted: color-mix(in srgb, var(--ti-text) 60%, #fff);
  --ti-border: color-mix(in srgb, var(--ti-text) 10%, transparent);
  --ti-shadow: 0 8px 24px rgba(0,0,0,.06);
  --ti-accent: var(--brand-emerald, #0c7a43);
}

.ti__container{max-width:1200px;margin:0 auto;padding:0 16px}
.ti__section{padding:clamp(20px,4vw,36px) 0}

/* Hero */
.ti__hero{background: linear-gradient(180deg, rgba(12,122,67,.06), transparent 60%); padding: 18px 0 8px}
.ti__title{margin:.25rem 0 .25rem; font-size:clamp(24px,3.2vw,32px); line-height:1.2}
.ti__subtitle{margin:0 0 .75rem; color:var(--ti-muted)}

/* Crumbs */
.ti__crumbs ol{display:flex;gap:8px;list-style:none;padding:0;margin:0 0 8px}
.ti__crumbs li{color:var(--ti-muted);font-size:14px}
.ti__crumbs a{color:inherit;text-decoration:none}
.ti__crumbs li+li:before{content:"/";margin:0 4px}

/* Stepper */
.ti-stepper{list-style:none;padding:0;margin:10px 0 0;display:flex;gap:10px;flex-wrap:wrap}
.ti-stepper li{display:flex;align-items:center;gap:8px;background:var(--ti-surface);border:1px solid var(--ti-border);
  border-radius:999px;padding:6px 10px;box-shadow:var(--sh-chip, 0 2px 10px rgba(0,0,0,.04))}
.ti-stepper__num{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--ti-accent);color:#fff;font-weight:700}
.ti-stepper__text{font-size:14px}

/* Form */
.ti-form{background:var(--ti-surface);border:1px solid var(--ti-border);border-radius:var(--ti-radius);box-shadow:var(--ti-shadow);padding:16px}
.ti-form__grid{display:grid;gap:var(--ti-gap);grid-template-columns:1fr}
.f{display:flex;flex-direction:column;gap:6px}
.f input,.f select{height:44px;border:1px solid var(--ti-border);border-radius:12px;background:var(--ti-surface);padding:0 12px}
.f input:focus,.f select:focus{outline:2px solid color-mix(in srgb, var(--ti-accent) 60%, #fff);outline-offset:1px}
.f__hint{font-size:12px;color:var(--ti-muted)}
.f--2{grid-column:1 / -1}

.agree{display:flex;align-items:center;gap:10px;margin:8px 0}
.agree input{inline-size:18px;block-size:18px}

.ti-form__actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:6px}
.btn.primary{background:var(--ti-accent);color:#fff;border:none;height:44px;border-radius:12px;padding:0 16px;cursor:pointer}
.btn.primary:hover{filter:brightness(1.02)}
.ti-form__count{font-size:14px;color:var(--ti-muted)}

.ti-help{margin:.5rem 0 0;color:var(--ti-muted)}
.ti-result{display:block;margin:.5rem 0 0;padding:.5rem .75rem;border:1px dashed var(--ti-border);border-radius:12px;color:var(--ti-text)}

/* Cards */
.ti-cards{display:grid;gap:16px}
.ti-cards--2{grid-template-columns:1fr}
.card{background:var(--ti-surface);border:1px solid var(--ti-border);border-radius:var(--ti-radius);box-shadow:var(--ti-shadow);padding:16px}
.card h3{margin:0 0 8px}
.card ul{margin:0;padding:0 0 0 18px}

/* FAQ */
.ti-faq details{background:var(--ti-surface);border:1px solid var(--ti-border);border-radius:12px;padding:10px;margin:8px 0}
.ti__h2{font-size:20px;margin:0 0 8px}

/* Desktop layout */
@media (min-width: 700px){
  .ti-form__grid{grid-template-columns:repeat(2, minmax(0,1fr))}
}
@media (min-width: 1024px){
  .ti-cards--2{grid-template-columns:repeat(2, minmax(0,1fr))}
}