/* =========================================================
   PAYLANCE — Trade-In page styles (full redesign)
   ========================================================= */

/* ---------- Tokens ---------- */
:root {
  --ti-dark:    #0C1219;
  --ti-dark2:   #131B25;
  --ti-accent:  #1F3A5F;
  --ti-gold:    #B8852E;
  --ti-gold2:   #D4A24A;
  --ti-green:   #3D7A5A;
  --ti-surface: #FFFFFF;
  --ti-bg:      #F5F5F7;
  --ti-border:  #D2D2D7;
  --ti-text:    #15181D;
  --ti-muted:   #6B7280;
  --ti-faint:   #98A0AD;
  --font: 'Geist Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --pill: 999px;
  --r:    10px;
  --r-lg: 14px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box }
html, body { margin: 0; padding: 0 }
body {
  font-family: var(--font);
  background: var(--ti-bg);
  color: var(--ti-text);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none }

/* =========================================================
   HEADER — inherited from app.css (white premium)
   ========================================================= */
.mp-header__row {
  max-width: 1280px; margin: 0 auto;
  padding: 0 24px;
  display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center;
  height: 56px;
}

/* =========================================================
   SUBNAV
   ========================================================= */
.mp-subnav {
  background: rgba(255,255,255,.97);
  border-bottom: 1px solid #E5E5EA;
  position: sticky; top: 54px; z-index: 30;
}
.mp-subnav__row {
  max-width: 1280px; margin: 0 auto; padding: 0 24px;
  display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none;
}
.mp-subnav__row::-webkit-scrollbar { display: none }
.mp-subnav a {
  padding: 13px 14px; font: 600 13.5px/1 var(--font);
  color: #6B7280; border-bottom: 2px solid transparent;
  white-space: nowrap; transition: .15s;
}
.mp-subnav a:hover { color: #15181D }
.mp-subnav a.is-active { color: #15181D; border-bottom-color: #15181D }
.dot-new {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: #E94545; margin-left: 4px; vertical-align: middle; margin-top: -2px;
}

/* =========================================================
   HERO
   ========================================================= */
.ti-hero {
  background: linear-gradient(180deg, #F8F9FC 0%, #FFFFFF 60%);
  color: var(--ti-text);
  position: relative;
  overflow: hidden;
  padding: 0;
}

/* BG decorations */
.ti-hero__bg { position: absolute; inset: 0; pointer-events: none; z-index: 0 }
.ti-hero__bg-blob {
  position: absolute; border-radius: 50%;
  filter: blur(80px); opacity: .08;
}
.ti-hero__bg-blob--1 {
  width: 640px; height: 640px;
  background: radial-gradient(circle, #1F3A5F 0%, transparent 70%);
  top: -200px; right: -120px;
}
.ti-hero__bg-blob--2 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, #B8852E 0%, transparent 70%);
  bottom: -100px; left: 10%;
  opacity: .10;
}

/* Inner layout */
.ti-hero__inner {
  max-width: 1280px; margin: 0 auto;
  padding: 80px 24px 72px;
  display: grid; grid-template-columns: 1fr 420px; gap: 64px; align-items: center;
  position: relative; z-index: 1;
}

/* Left */
.ti-hero__left { display: flex; flex-direction: column; gap: 0 }

.ti-hero__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 12px/1 var(--font); letter-spacing: .08em; text-transform: uppercase;
  color: var(--ti-muted); margin-bottom: 22px;
}
.ti-hero__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ti-green);
  box-shadow: 0 0 0 3px rgba(61,122,90,.25);
  flex-shrink: 0;
}

.ti-hero__h1 {
  font: 800 62px/1.0 var(--font);
  letter-spacing: -0.04em;
  margin: 0 0 20px;
  color: #fff;
}
.ti-hero__h1 em {
  font-style: normal;
  background: linear-gradient(125deg, #4A8FBF 0%, #7AB8E0 50%, #4A8FBF 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.ti-hero__sub {
  font: 500 18px/1.6 var(--font);
  color: var(--ti-muted);
  margin: 0 0 32px;
  max-width: 480px;
}

/* CTA buttons */
.ti-cta-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font: 700 14.5px/1 var(--font); letter-spacing: -.01em;
  padding: 14px 22px; border-radius: var(--pill);
  border: 0; cursor: pointer; transition: .18s; text-decoration: none;
}
.ti-cta-btn--primary {
  background: #fff; color: var(--ti-dark);
}
.ti-cta-btn--primary:hover { background: #E8E8ED; transform: translateY(-1px) }
.ti-cta-btn--ghost {
  background: transparent;
  border: 1.5px solid var(--ti-border);
  color: var(--ti-text);
}
.ti-cta-btn--ghost:hover { background: var(--ti-bg) }
.ti-cta-btn--dark { background: var(--ti-dark); color: #fff }
.ti-cta-btn--dark:hover { background: #1a2535; transform: translateY(-1px) }
.ti-cta-btn--white { background: #1D1D1F; color: #fff }
.ti-cta-btn--white:hover { background: #E8E8ED; transform: translateY(-1px) }
.ti-cta-btn--ghost-light {
  background: transparent;
  border: 1.5px solid var(--ti-border);
  color: var(--ti-text);
}
.ti-cta-btn--ghost-light:hover { background: var(--ti-bg) }

.ti-hero__btns { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 44px }

/* Stats row */
.ti-hero__stats {
  display: flex; align-items: center; gap: 0;
  padding-top: 28px;
  border-top: 1px solid var(--ti-border);
  flex-wrap: wrap; gap: 0;
}
.ti-hero__stat {
  display: flex; flex-direction: column; gap: 5px;
  padding: 0 28px 0 0;
}
.ti-hero__stat:first-child { padding-left: 0 }
.ti-hero__stat b {
  font: 800 26px/1 var(--font); letter-spacing: -.03em;
  color: #fff;
}
.ti-hero__stat span {
  font: 500 12px/1 var(--font);
  color: var(--ti-muted);
  letter-spacing: .01em;
}
.ti-hero__stat-sep {
  width: 1px; height: 38px;
  background: rgba(255,255,255,.12);
  margin: 0 28px 0 0;
  flex-shrink: 0;
}

/* =========================================================
   ESTIMATOR CARD
   ========================================================= */
.ti-est {
  background: #fff;
  border-radius: 14px;
  padding: 28px 28px 24px;
  color: var(--ti-text);
  box-shadow: 0 40px 80px -20px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.04);
}
.ti-est__header {
  display: flex; align-items: center; gap: 12px; margin-bottom: 20px;
}
.ti-est__header-icon {
  width: 42px; height: 42px; border-radius: 12px;
  background: linear-gradient(135deg, #FFF3D6, #FFE4A0);
  display: grid; place-items: center; font-size: 20px; flex-shrink: 0;
}
.ti-est__title { font: 700 17px/1.2 var(--font); letter-spacing: -.01em; margin: 0 0 3px }
.ti-est__sub { font: 500 12.5px/1.4 var(--font); color: var(--ti-muted); margin: 0 }

.ti-est__field { margin-bottom: 14px }
.ti-est__label {
  font: 700 10.5px/1 var(--font); color: var(--ti-muted);
  text-transform: uppercase; letter-spacing: .06em;
  display: block; margin-bottom: 8px;
}
.ti-est select {
  width: 100%; border: 1.5px solid var(--ti-border);
  border-radius: 10px; padding: 11px 14px;
  font: 500 14px/1.2 var(--font); background: #fff;
  color: var(--ti-text); outline: none; transition: .15s;
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.5'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat; background-position: right 12px center;
}
.ti-est select:focus { border-color: var(--ti-accent); box-shadow: 0 0 0 3px rgba(31,58,95,.1) }

.ti-est__chips { display: flex; gap: 6px; flex-wrap: wrap }
.ti-est__chip {
  flex: 1; min-width: 0; border: 1.5px solid var(--ti-border);
  background: #fff; border-radius: 10px; padding: 9px 6px;
  font: 600 12.5px/1.2 var(--font); cursor: pointer;
  text-align: center; transition: .15s; color: var(--ti-text);
}
.ti-est__chip:hover { border-color: #B0B5BE; background: #FAFAFA }
.ti-est__chip.is-active { background: var(--ti-dark); color: #fff; border-color: var(--ti-dark) }

.ti-est__result {
  margin-top: 16px; padding: 16px 18px;
  background: linear-gradient(135deg, #F2F2F7 0%, #E8E8ED 100%);
  border-radius: 14px; border: 1px solid var(--ti-border);
}
.ti-est__result-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
}
.ti-est__result-row + .ti-est__result-row { margin-top: 6px }
.ti-est__result-label { font: 500 12.5px/1 var(--font); color: var(--ti-muted) }
.ti-est__result-value { font: 800 24px/1 var(--font); letter-spacing: -.02em }
.ti-est__result-value--muted { font-size: 14px; font-weight: 600; color: var(--ti-muted) }

.ti-est__cta {
  display: block; width: 100%; margin-top: 14px;
  background: var(--ti-dark); color: #fff; border: 0;
  border-radius: 12px; padding: 14px;
  font: 700 14px/1 var(--font); text-align: center;
  cursor: pointer; transition: background .15s; text-decoration: none;
}
.ti-est__cta:hover { background: #1a2535 }

.ti-est__trust {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 12px; font: 500 11.5px/1 var(--font);
  color: var(--ti-faint);
}
.ti-est__trust svg { color: var(--ti-green); flex-shrink: 0 }

/* =========================================================
   SHARED SECTION LABEL
   ========================================================= */
.ti-label {
  display: inline-block;
  font: 700 11px/1 var(--font); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ti-accent); margin-bottom: 10px;
}

/* =========================================================
   WHAT WE ACCEPT
   ========================================================= */
.ti-accept { background: #fff; border-bottom: 1px solid var(--ti-border) }
.ti-accept__inner { max-width: 1280px; margin: 0 auto; padding: 72px 24px 80px }
.ti-accept__head { text-align: center; margin-bottom: 48px }
.ti-accept__head h2 {
  font: 800 40px/1.1 var(--font); letter-spacing: -.03em;
  margin: 0 0 12px; color: var(--ti-text);
}
.ti-accept__head p { font: 500 16px/1.6 var(--font); color: var(--ti-muted); max-width: 540px; margin: 0 auto }

.ti-accept__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}
.ti-accept__item {
  background: var(--ti-bg);
  border: 1.5px solid var(--ti-border);
  border-radius: var(--r-lg);
  padding: 24px 20px;
  text-align: center;
  transition: .2s;
  cursor: default;
}
.ti-accept__item:hover {
  border-color: var(--ti-accent);
  background: #fff;
  box-shadow: 0 8px 28px -8px rgba(31,58,95,.14);
  transform: translateY(-3px);
}
.ti-accept__icon {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 68px;
  margin-bottom: 16px;
  color: var(--ti-text);
}
.ti-accept__icon svg { width: 52px; height: 52px; flex-shrink: 0 }
.ti-accept__item h4 {
  font: 700 14px/1.2 var(--font); margin: 0 0 5px; letter-spacing: -.01em;
}
.ti-accept__item p { font: 500 12px/1.4 var(--font); color: var(--ti-muted); margin: 0 0 12px }
.ti-accept__range {
  display: inline-block;
  font: 700 11px/1 var(--font); color: var(--ti-gold);
  background: rgba(184,133,46,.1); border-radius: var(--pill);
  padding: 4px 10px; letter-spacing: .01em;
}

/* =========================================================
   HOW IT WORKS
   ========================================================= */
.ti-how { background: var(--ti-bg); border-bottom: 1px solid var(--ti-border) }
.ti-how__inner { max-width: 1280px; margin: 0 auto; padding: 80px 24px 88px }
.ti-how__head { text-align: center; margin-bottom: 56px }
.ti-how__head h2 {
  font: 800 40px/1.1 var(--font); letter-spacing: -.03em;
  margin: 0; color: var(--ti-text);
}

.ti-how__steps {
  display: flex; align-items: flex-start; gap: 0;
  position: relative;
}
.ti-how__step {
  flex: 1;
  background: #fff;
  border: 1.5px solid var(--ti-border);
  border-radius: var(--r-lg);
  padding: 28px 24px;
  transition: .2s;
}
.ti-how__step:hover {
  border-color: rgba(31,58,95,.3);
  box-shadow: 0 12px 32px -10px rgba(31,58,95,.12);
  transform: translateY(-3px);
}
.ti-how__step-num {
  font: 800 13px/1 var(--font); letter-spacing: .04em;
  color: var(--ti-accent); opacity: .5; margin-bottom: 14px;
}
.ti-how__step-icon { font-size: 30px; margin-bottom: 14px }
.ti-how__step h3 {
  font: 700 16px/1.3 var(--font); margin: 0 0 8px; letter-spacing: -.01em;
}
.ti-how__step p { font: 500 13.5px/1.55 var(--font); color: var(--ti-muted); margin: 0 }

.ti-how__step-arrow {
  flex: 0 0 auto; padding: 0 16px;
  font-size: 22px; color: var(--ti-border);
  margin-top: 48px; line-height: 1;
}

.ti-how__cta {
  display: flex; align-items: center; gap: 16px;
  justify-content: center; margin-top: 48px;
}
.ti-how__cta-note { font: 500 13px/1 var(--font); color: var(--ti-muted) }

/* =========================================================
   CATALOG HEAD
   ========================================================= */
.ti-catalog-head {
  background: #fff;
  border-bottom: 1px solid var(--ti-border);
  scroll-margin-top: 120px;
}
.ti-catalog-head__inner {
  max-width: 1280px; margin: 0 auto;
  padding: 40px 24px 28px;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  flex-wrap: wrap;
}
.ti-catalog-head__inner h2 {
  font: 800 32px/1.1 var(--font); letter-spacing: -.03em;
  margin: 0 0 6px; color: var(--ti-text);
}
.ti-catalog-head__inner p { font: 500 14.5px/1.5 var(--font); color: var(--ti-muted); margin: 0 }

.ti-meta { font: 500 13.5px/1.4 var(--font); color: var(--ti-muted); font-feature-settings: "tnum" }
.ti-meta b { color: var(--ti-text); font-weight: 700 }

/* =========================================================
   FILTERS BAR (sticky)
   ========================================================= */
.ti-filters {
  position: sticky; top: 95px; z-index: 20;
  background: rgba(255,255,255,.95);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1.5px solid var(--ti-border);
}
.ti-filters__inner { max-width: 1280px; margin: 0 auto; padding: 0 24px }

/* Top bar */
.ti-filters__bar {
  display: flex; align-items: center; gap: 10px; padding: 12px 0;
}

/* Filter toggle button */
.ti-filters-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 16px; border-radius: var(--pill);
  background: #fff; border: 1.5px solid var(--ti-border);
  color: var(--ti-text); font: 600 13px/1 var(--font);
  cursor: pointer; transition: .18s; letter-spacing: -.01em; flex-shrink: 0;
}
.ti-filters-btn:hover { border-color: #B0B5BE; background: var(--ti-bg) }
.ti-filters-btn.is-open { background: var(--ti-dark); color: #fff; border-color: var(--ti-dark) }
.ti-filters-btn.is-open svg { stroke: #fff }
.ti-filters-btn__badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  background: #E94545; color: #fff; border-radius: 99px;
  font: 700 10.5px/1 var(--font);
}
.ti-filters-btn.is-open .ti-filters-btn__badge { background: rgba(255,255,255,.25) }

/* Sort select */
.ti-fselect {
  padding: 9px 30px 9px 12px; border-radius: var(--pill);
  background: #fff; border: 1.5px solid var(--ti-border);
  color: var(--ti-text); font: 600 13px/1 var(--font);
  cursor: pointer; outline: none; transition: .15s;
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.5'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat; background-position: right 10px center;
}
.ti-fselect:hover { border-color: #B0B5BE }
.ti-fselect:focus { border-color: var(--ti-accent) }
.ti-fselect--sort { margin-left: auto }

/* Collapsible panel */
.ti-filters__panel {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .28s cubic-bezier(.4,0,.2,1);
}
.ti-filters__panel.is-open { grid-template-rows: 1fr }
.ti-filters__panel-body {
  overflow: hidden; padding-bottom: 0;
  transition: padding-bottom .28s cubic-bezier(.4,0,.2,1);
}
.ti-filters__panel.is-open .ti-filters__panel-body { padding-bottom: 16px }

/* Panel sections */
.ti-fpanel__section { margin-bottom: 14px }
.ti-fpanel__section:last-child { margin-bottom: 0 }
.ti-fpanel__section--row { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap }

.ti-filters__label {
  display: block; font: 600 10.5px/1 var(--font); color: var(--ti-muted);
  text-transform: uppercase; letter-spacing: .06em; padding-left: 2px;
}
.ti-filters__chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px }
.ti-filters__group { display: flex; flex-direction: column; gap: 5px; flex-shrink: 0 }

/* Chips */
.ti-chip {
  flex-shrink: 0; padding: 8px 14px; border-radius: var(--pill);
  background: #fff; border: 1.5px solid var(--ti-border);
  color: var(--ti-muted); font: 600 13px/1 var(--font);
  cursor: pointer; transition: .15s; letter-spacing: -.005em;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.ti-chip:hover { color: var(--ti-text); border-color: #B0B5BE }
.ti-chip.is-on { background: var(--ti-dark); color: #fff; border-color: var(--ti-dark) }
.ti-chip__count { font-size: 11px; opacity: .6; font-weight: 600; font-feature-settings: "tnum" }
.ti-chip.is-on .ti-chip__count { opacity: .85 }

/* Reset button */
.ti-filters__reset {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 14px; border-radius: var(--pill);
  background: transparent; border: 1.5px solid var(--ti-border);
  color: var(--ti-muted); font: 600 12.5px/1 var(--font);
  cursor: pointer; transition: .15s; margin-left: auto; white-space: nowrap;
}
.ti-filters__reset:hover { background: var(--ti-bg); border-color: #B0B5BE; color: var(--ti-text) }

/* =========================================================
   LISTINGS GRID
   ========================================================= */
.ti-listings-wrap { max-width: 1280px; margin: 0 auto; padding: 32px 24px 72px }
.ti-listings {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 18px;
}

.ti-listing {
  background: #fff; border: 1.5px solid var(--ti-border);
  border-radius: 12px; overflow: hidden;
  text-decoration: none; color: inherit;
  display: flex; flex-direction: column;
  transition: .22s; position: relative;
}
.ti-listing:hover {
  transform: translateY(-5px);
  border-color: var(--ti-gold);
  box-shadow: 0 20px 44px -16px rgba(184,133,46,.28);
}

.ti-listing__cover {
  aspect-ratio: 4/3; position: relative; overflow: hidden;
  display: grid; place-items: center; font-size: 64px;
  background: linear-gradient(135deg, #F2F2F7, #E5E5EA);
}
.ti-listing__cover[data-tone="cool"]     { background: linear-gradient(135deg, #E8EEF5, #C9D6E5); color: rgba(31,58,95,.5) }
.ti-listing__cover[data-tone="warm"]     { background: linear-gradient(135deg, #F5E6D3, #E8C497); color: rgba(146,89,38,.55) }
.ti-listing__cover[data-tone="slate"]    { background: linear-gradient(135deg, #3A3F4A, #1F232C); color: rgba(255,255,255,.65) }
.ti-listing__cover[data-tone="lavender"] { background: linear-gradient(135deg, #E8D5F0, #C9A4D6); color: rgba(120,80,150,.55) }
.ti-listing__cover[data-tone="rose"]     { background: linear-gradient(135deg, #F0D4D4, #D69A9A); color: rgba(150,60,60,.55) }

.ti-listing__badge {
  position: absolute; top: 12px; left: 12px;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 11px;
  background: linear-gradient(135deg, var(--ti-gold), var(--ti-gold2));
  color: #fff; font: 800 10px/1 var(--font);
  letter-spacing: .07em; text-transform: uppercase;
  border-radius: 7px;
  box-shadow: 0 6px 18px -4px rgba(184,133,46,.5);
}
.ti-listing__badge svg { flex-shrink: 0; width: 11px; height: 11px }

.ti-listing__body { padding: 18px; display: flex; flex-direction: column; gap: 8px; flex: 1 }

.ti-listing__discount {
  font: 800 11.5px/1 var(--font); color: var(--ti-gold);
  letter-spacing: .05em; text-transform: uppercase;
  display: flex; align-items: center; gap: 4px;
}
.ti-listing__discount::before { content: '−'; font-size: 13px; font-weight: 800 }

.ti-listing__price-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap }
.ti-listing__price-eff { font: 800 22px/1.1 var(--font); letter-spacing: -.02em; font-feature-settings: "tnum" }
.ti-listing__price-eff small { font: 600 11px/1 var(--font); color: var(--ti-muted); text-transform: lowercase }
.ti-listing__price-old { font: 600 13px/1 var(--font); color: var(--ti-muted); text-decoration: line-through; font-feature-settings: "tnum" }

.ti-listing__title {
  font: 600 14px/1.35 var(--font); letter-spacing: -.005em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ti-listing__shop {
  display: flex; align-items: center; gap: 6px;
  font: 500 12px/1.2 var(--font); color: var(--ti-muted);
}
.ti-listing__shop-logo {
  width: 18px; height: 18px; border-radius: 5px;
  background: linear-gradient(135deg, #1F3A5F, #475569);
  color: #fff; display: grid; place-items: center;
  font: 700 9px/1 var(--font); flex-shrink: 0;
}
.ti-listing__shop b { color: var(--ti-text); font-weight: 600 }
.ti-listing__shop svg { color: var(--ti-green); width: 11px; height: 11px }
.ti-listing__accept {
  margin-top: auto; padding-top: 10px;
  border-top: 1px dashed var(--ti-border);
  font: 500 11.5px/1.4 var(--font); color: var(--ti-muted);
}
.ti-listing__accept b { color: var(--ti-text); font-weight: 600 }

/* Empty state */
.ti-listings-empty {
  grid-column: 1/-1; text-align: center;
  padding: 56px 32px; background: #fff;
  border-radius: 20px; border: 1.5px dashed var(--ti-border);
}
.ti-listings-empty__icon { display:grid; place-items:center; margin-bottom: 12px; opacity: .5 }
.ti-listings-empty h3 { font: 700 20px/1.2 var(--font); color: var(--ti-text); margin: 0 0 8px }
.ti-listings-empty p { font: 500 14px/1.5 var(--font); color: var(--ti-muted); margin: 0 }

/* =========================================================
   FAQ
   ========================================================= */
.ti-section--faq { background: #fff; border-top: 1px solid var(--ti-border) }
.ti-section__inner { max-width: 1280px; margin: 0 auto; padding: 72px 24px 80px }
.ti-section__head { text-align: center; margin-bottom: 40px }
.ti-section__head h2 {
  font: 800 36px/1.1 var(--font); letter-spacing: -.03em; margin: 0;
}

.ti-faq { max-width: 760px; margin: 0 auto }
.ti-faq__item {
  background: var(--ti-bg); border: 1.5px solid var(--ti-border);
  border-radius: 14px; margin-bottom: 8px; overflow: hidden; transition: .15s;
}
.ti-faq__item[open] { background: #fff; border-color: #B0B5BE }
.ti-faq__item summary {
  padding: 18px 22px; font: 600 15px/1.4 var(--font);
  cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.ti-faq__item summary::-webkit-details-marker { display: none }
.ti-faq__item summary::after {
  content: '+'; font: 400 22px/1 var(--font);
  color: var(--ti-muted); flex-shrink: 0; transition: transform .2s;
}
.ti-faq__item[open] summary::after { transform: rotate(45deg) }
.ti-faq__item p { padding: 0 22px 18px; font: 500 14px/1.6 var(--font); color: var(--ti-muted); margin: 0 }

/* =========================================================
   BOTTOM CTA
   ========================================================= */
.ti-bottom-cta {
  background: #F5F5F7;
  color: var(--ti-text); border-top: 1px solid var(--ti-border);
  position: relative; overflow: hidden;
}
.ti-bottom-cta::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(800px 300px at 20% 50%, rgba(31,58,95,.04), transparent 70%);
}
.ti-bottom-cta__inner {
  max-width: 1280px; margin: 0 auto;
  padding: 72px 24px 80px;
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; gap: 40px;
  flex-wrap: wrap;
}
.ti-bottom-cta__left h2 {
  font: 800 44px/1.05 var(--font); letter-spacing: -.04em; margin: 0 0 10px; color: var(--ti-text);
}
.ti-bottom-cta__left p {
  font: 500 16px/1.5 var(--font); color: var(--ti-muted); margin: 0 0 28px;
}
.ti-bottom-cta__btns { display: flex; gap: 10px; flex-wrap: wrap }
.ti-bottom-cta__badges {
  display: flex; flex-direction: column; gap: 14px;
}
.ti-bottom-cta__badge {
  display: flex; align-items: center; gap: 10px;
  font: 600 14px/1 var(--font); color: var(--ti-muted);
}
.ti-bottom-cta__badge svg { color: var(--ti-green); flex-shrink: 0 }

/* =========================================================
   FOOTER (uses shared app.css .ft__ classes)
   ========================================================= */
footer { background: var(--ti-bg); color: var(--ti-muted); border-top: 1px solid var(--ti-border) }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1100px) {
  .ti-hero__inner { grid-template-columns: 1fr; gap: 40px; padding: 60px 24px 56px }
  .ti-hero__h1 { font-size: 48px }
  .ti-est { max-width: 480px }
  .ti-accept__grid { grid-template-columns: repeat(3, 1fr) }
  .ti-how__steps { flex-wrap: wrap }
  .ti-how__step { flex-basis: calc(50% - 20px) }
  .ti-how__step-arrow { display: none }
}

@media (max-width: 760px) {
  .mp-header__row { grid-template-columns: auto auto }
  .mp-search { display: none }
  .ti-hero__inner { padding: 48px 20px 44px }
  .ti-hero__h1 { font-size: 36px }
  .ti-hero__sub { font-size: 15px }
  .ti-hero__stats { gap: 0 }
  .ti-hero__stat b { font-size: 20px }
  .ti-hero__stat-sep { margin: 0 16px 0 0 }
  .ti-hero__stat { padding-right: 16px }
  .ti-accept__inner { padding: 48px 20px 56px }
  .ti-accept__head h2 { font-size: 28px }
  .ti-accept__grid { grid-template-columns: repeat(2, 1fr) }
  .ti-how__inner { padding: 56px 20px 64px }
  .ti-how__head h2 { font-size: 28px }
  .ti-how__step { flex-basis: 100% }
  .ti-catalog-head__inner { padding: 28px 20px 20px }
  .ti-catalog-head__inner h2 { font-size: 24px }
  .ti-filters__inner { padding: 0 20px }
  .ti-listings-wrap { padding: 24px 20px 56px }
  .ti-bottom-cta__inner { padding: 56px 20px 64px; flex-direction: column }
  .ti-bottom-cta__left h2 { font-size: 32px }
  .ti-section__inner { padding: 48px 20px 56px }
  .ti-section__head h2 { font-size: 26px }
  .ti-fpanel__section--row { flex-direction: column; align-items: stretch }
  .ti-filters__reset { margin-left: 0 }
}

@media (max-width: 480px) {
  .ti-accept__grid { grid-template-columns: 1fr 1fr }
  .ti-hero__h1 { font-size: 30px }
}