/* ══════════════════════════════════════════════
   PAGE-SPECIFIC OVERRIDES (sell page)
   All styles duplicated verbatim from cr-style.css
   have been removed; only rules below actually
   differ from the shared stylesheet. Their class
   names have been suffixed with "-sell" so they no
   longer collide with the shared/common class names
   of the same base name defined later in cr-style.css.
══════════════════════════════════════════════ */
.reveal-sell { opacity: 1; }

.cr-logo-sell {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-flex); font-variation-settings: 'wght' 800;
  font-size: 21px; color: var(--cr-navy); flex-shrink: 0;
  letter-spacing: -0.5px;
}

.cr-logo-mark-sell {
  width: 36px; height: 36px; border-radius: 10px;
  background: linear-gradient(135deg, var(--cr-teal), var(--cr-teal-deep));
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(143,0,255,0.4); color: #fff; font-size: 19px;
  flex-shrink: 0;
}

.cr-logo-sell span { color: var(--cr-teal); }


.cr-nav-right-sell { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }


/* ══════════════════════════════════════════════
   HERO — dark, matches v7's cr-hero-sell
══════════════════════════════════════════════ */
.cr-hero-sell {
  padding-top: var(--nav-h);
  background: linear-gradient(160deg, #FBF8FF 0%, #F6EEFF 45%, #FDF9FF 100%);
  position: relative; overflow: hidden;
  display: flex; align-items: center;
}

.hero-grid-sell {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(143,0,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(143,0,255,0.05) 1px, transparent 1px);
  background-size: 64px 64px;
}

.hero-orb1-sell {
  position: absolute; width: 700px; height: 700px; border-radius: 50%;
  background: radial-gradient(circle, rgba(143,0,255,0.10) 0%, transparent 65%);
  top: -200px; right: -100px;
}

.hero-orb2-sell {
  position: absolute; width: 400px; height: 400px; border-radius: 50%;
  background: radial-gradient(circle, rgba(110,0,196,0.08) 0%, transparent 65%);
  bottom: -100px; left: 5%;
}

.hero-eyebrow-sell {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--cr-teal-pale); border: 1px solid var(--cr-border);
  color: var(--cr-teal-deep); font-size: 11px; font-weight: 600; letter-spacing: 1.5px;
  text-transform: uppercase; padding: 7px 14px; border-radius: 30px;
  margin-bottom: 24px;
}

.hero-eyebrow-sell .pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--cr-teal); animation: pulse-dot 2s ease-in-out infinite; }


.hero-title-sell {
  font-family: var(--font-flex);
  font-size: clamp(40px, 4.6vw, 64px);
  font-variation-settings: 'wght' 800;
  line-height: 1.08; letter-spacing: -1px;
  color: var(--cr-navy); margin-bottom: 22px;
}

.hero-title-sell .accent { color: var(--cr-teal); }


.hero-desc-sell { font-size: 17px; line-height: 1.75; color: var(--cr-slate); margin-bottom: 36px; max-width: 460px; }

.hero-desc-sell strong { color: var(--cr-navy); font-weight: 500; }


.hero-stats-sell { display: flex; gap: 32px; flex-wrap: wrap; }

.widget-sub-sell { font-size: 13px; color: var(--cr-muted); margin-bottom: 26px; }


/* ══════════════════════════════════════════════
   HOW IT WORKS — identical steps-grid-sell pattern to v7
══════════════════════════════════════════════ */
.cr-steps-sell { padding: 50px 0; background: var(--cr-light); }

.cr-steps-header-sell { text-align: center; margin-bottom: 64px; }

.cr-steps-header-sell .section-sub { margin: 0 auto; }

.steps-grid-sell { display: grid; grid-template-columns: repeat(4,1fr); gap: 28px; position: relative; }

.steps-grid-sell::before {
  content: ''; position: absolute; top: 48px; left: 12%; right: 12%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--cr-teal), transparent); opacity: 0.3;
}

.step-card-sell {
  background: #fff; border-radius: var(--r-xl); padding: 32px 24px; text-align: center;
  border: 1.5px solid rgba(0,0,0,0.05); transition: all 0.35s; position: relative; overflow: hidden;
}

.step-card-sell::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: var(--cr-teal); transform: scaleX(0); transform-origin: center; transition: transform 0.35s; }

.step-card-sell:hover { border-color: var(--cr-border); box-shadow: var(--cr-shadow); transform: translateY(-6px); }

.step-card-sell:hover::after { transform: scaleX(1); }

.step-num-sell { position: absolute; top: 18px; right: 20px; font-family: var(--font-flex); font-variation-settings: 'wght' 900; font-size: 48px; color: rgba(143,0,255,0.07); line-height: 1; }

.step-card-sell:hover .step-num-sell { color: rgba(143,0,255,0.12); }

.step-icon-wrap-sell {
  width: 72px; height: 72px; border-radius: 50%; background: var(--cr-teal-pale);
  border: 2px solid rgba(143,0,255,0.2); display: flex; align-items: center; justify-content: center;
  margin: 0 auto 22px; color: var(--cr-teal); font-size: 32px; transition: all 0.3s; position: relative; z-index: 1;
}

.step-card-sell:hover .step-icon-wrap-sell { background: var(--cr-teal); color: #fff; border-color: var(--cr-teal); box-shadow: 0 8px 28px rgba(143,0,255,0.35); }

.step-title-sell { font-size: 17px; font-weight: 700; color: var(--cr-navy); margin-bottom: 9px; font-family: var(--font-flex); }

.step-desc-sell { font-size: 13.5px; line-height: 1.7; color: var(--cr-muted); }

@media(max-width:900px){ .steps-grid-sell{grid-template-columns:1fr 1fr;} .steps-grid-sell::before{display:none;} }

@media(max-width:560px){ .steps-grid-sell{grid-template-columns:1fr;} }


/* ══════════════════════════════════════════════
   STORIES — identical pattern to v7
══════════════════════════════════════════════ */
.cr-stories-sell { padding: 50px 0; background: #fff; overflow: hidden; }

.stories-rating-badge-sell { display: flex; align-items: center; gap: 12px; background: var(--cr-light); border-radius: var(--r-lg); padding: 14px 20px; box-shadow: var(--cr-shadow); border: 1px solid rgba(143,0,255,0.1); flex-shrink: 0; }

.rating-stars-sell { font-size: 18px; letter-spacing: 2px; color: var(--cr-amber); }

.story-card-sell { flex: 0 0 320px; background: var(--cr-light); border-radius: var(--r-xl); padding: 28px; border: 1px solid rgba(0,0,0,0.05); scroll-snap-align: start; transition: all 0.3s; display: flex; flex-direction: column; gap: 16px; }

.story-card-sell:hover { transform: translateY(-5px); box-shadow: var(--cr-shadow); border-color: var(--cr-border); background: #fff; }

.story-stars-sell { font-size: 14px; letter-spacing: 1px; color: var(--cr-amber); }

.story-car-sell { display: flex; align-items: center; gap: 8px; background: var(--cr-teal-pale); border-radius: var(--r-sm); padding: 8px 12px; font-size: 12px; color: var(--cr-teal-deep); font-weight: 500; width: fit-content; }

.story-car-sell .mi { font-size: 16px; }


/* ══════════════════════════════════════════════
   FAQ — identical pattern to v7
══════════════════════════════════════════════ */
.cr-faq-sell { padding: 50px 0; background: var(--cr-light); }

.faq-item-sell { background: #fff; border-radius: var(--r-lg); border: 1.5px solid transparent; overflow: hidden; transition: all 0.3s; }

.faq-item-sell.open { border-color: var(--cr-teal); box-shadow: 0 6px 24px rgba(143,0,255,0.1); }

.faq-item-sell.open .faq-icon { background: var(--cr-teal); color: #fff; transform: rotate(45deg); }

.faq-item-sell.open .faq-a { max-height: 220px; padding: 0 22px 20px; }

.cr-footer-grid-sell { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; padding: 0 48px 48px; }

.footer-brand-logo .cr-logo-mark-sell { width: 32px; height: 32px; font-size: 16px; }

.footer-bottom-sell { border-top: 1px solid rgba(43,26,51,0.08); padding: 20px 48px; max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }

.footer-bottom-sell p { font-size: 13px; color: var(--cr-muted); }

@media(max-width:900px){ .cr-footer-grid-sell{grid-template-columns:1fr 1fr;} }

.opt-icon-sell { width: 40px; height: 40px; border-radius: 10px; background: var(--cr-teal-pale); color: var(--cr-teal); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }

.opt-card.selected .opt-icon-sell { background: var(--cr-teal); color: #fff; }

.opt-desc-sell { font-size: 12px; color: var(--cr-muted); margin-top: 2px; }

.wiz-input-sell { width: 100%; padding: 15px 16px; border: 1.5px solid rgba(143,0,255,0.14); border-radius: var(--r); font-size: 16px; font-family: var(--font-body); color: var(--cr-navy); transition: all .2s; background: #fff; }

.wiz-input-sell:focus { outline: none; border-color: var(--cr-teal); box-shadow: 0 0 0 3px rgba(143,0,255,0.1); }

.otp-box-sell { width: 56px; height: 64px; border: 1.5px solid rgba(143,0,255,0.14); border-radius: var(--r); text-align: center; font-family: var(--font-flex); font-variation-settings: 'wght' 750; font-size: 26px; color: var(--cr-navy); background: #fff; transition: all .2s; }

.otp-box-sell:focus { outline: none; border-color: var(--cr-teal); box-shadow: 0 0 0 3px rgba(143,0,255,0.1); }

.otp-box-sell.filled { border-color: var(--cr-teal); background: var(--cr-teal-pale); }

.otp-resend-sell { font-size: 13px; color: var(--cr-muted); }

.otp-resend-sell b { color: var(--cr-teal); cursor: pointer; }

@media(max-width:560px){ .opt-grid{grid-template-columns:1fr;} .otp-box-sell{width:46px;height:56px;font-size:22px;} .car-found-card{flex-direction:column;text-align:center;} }

/* ══════════════════════════════════════════════
   HERO — mobile alignment fixes
   (kept here, not just in cr-style.css, so this
   page renders correctly even if a stale copy of
   the shared stylesheet is being served)
══════════════════════════════════════════════ */


/* hero-title-sell: the hard-coded <br/> is tuned for
   desktop line lengths — hide it on narrow screens so
   the headline reflows naturally instead of wrapping
   into a lopsided 3-line block */
@media (max-width: 600px) {
  .hero-title-sell br { display: none; }
}

/* hero-stats-sell: allow the stat row to wrap with a
   tighter gap on narrow phones instead of overflowing
   at a fixed 32px gap */
@media (max-width: 480px) {
  .hero-stats-sell { flex-wrap: wrap; gap: 20px; }
  .hero-widget { padding: 24px; }
  .plate-input-wrap { width: 100%; }
  #plateInput { font-size: 20px; padding: 18px 10px; }
  .plate-flag { width: 38px; }
}