/* =========================================================================
   AmpAuto v8 — DTC page overrides
   Loaded AFTER per-page inline <style> blocks.
   Targets ONLY shared selectors used in /dtc/*.html files.
   ========================================================================= */

@keyframes ampDtcScan{0%{background-position:200% 0}100%{background-position:-200% 0}}
@keyframes ampDtcShimmer{0%{left:-100%}55%{left:150%}100%{left:150%}}
@keyframes ampDtcGrad{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes ampDtcPulseAmber{0%{box-shadow:0 0 0 0 rgba(251,191,36,.5),0 0 12px rgba(251,191,36,.7)}70%{box-shadow:0 0 0 10px rgba(251,191,36,0),0 0 12px rgba(251,191,36,.7)}100%{box-shadow:0 0 0 0 rgba(251,191,36,0),0 0 12px rgba(251,191,36,.7)}}

/* ===== DTC HERO ===== */
.dtc-hero{position:relative !important;overflow:hidden !important}
.dtc-hero::after{
  content:'' !important;position:absolute !important;top:0;left:0;right:0;height:3px !important;z-index:5 !important;
  background:linear-gradient(90deg,transparent 0%,#ff5a1f 30%,#fbbf24 50%,#3b82f6 70%,transparent 100%) !important;
  background-size:200% 100% !important;animation:ampDtcScan 4.5s linear infinite !important;
}
.dtc-code-badge{
  font-family:'JetBrains Mono',ui-monospace,monospace !important;
  font-size:72px !important;font-weight:800 !important;letter-spacing:-2px !important;line-height:1 !important;
  background:linear-gradient(135deg,#fbbf24 0%,#ff5a1f 100%) !important;
  -webkit-background-clip:text !important;background-clip:text !important;-webkit-text-fill-color:transparent !important;
  text-shadow:0 0 60px rgba(251,191,36,.35) !important;
  display:inline-block !important;
}
@media(max-width:760px){.dtc-code-badge{font-size:48px !important;letter-spacing:-1px !important}}
.dtc-title{font-size:28px !important;font-weight:800 !important;color:#fff !important;letter-spacing:-.5px !important;line-height:1.2 !important;margin:10px 0 8px !important}
@media(max-width:760px){.dtc-title{font-size:22px !important}}
.dtc-subtitle{font-size:18px !important;color:#cbd5e1 !important;line-height:1.55 !important}
@media(max-width:760px){.dtc-subtitle{font-size:16px !important}}
.severity-pills{margin-top:20px !important;gap:10px !important}
.pill{
  padding:7px 14px !important;border-radius:8px !important;font-size:13px !important;font-weight:800 !important;
  font-family:'JetBrains Mono',monospace !important;letter-spacing:.6px !important;text-transform:uppercase !important;
  box-shadow:0 4px 12px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.08) !important;
}
.pill-yellow{background:rgba(251,191,36,.12) !important;color:#fbbf24 !important;border:1.5px solid rgba(251,191,36,.4) !important}
.pill-blue{background:rgba(59,130,246,.12) !important;color:#93c5fd !important;border:1.5px solid rgba(59,130,246,.4) !important}
.pill-red{background:rgba(239,68,68,.12) !important;color:#fca5a5 !important;border:1.5px solid rgba(239,68,68,.4) !important}
.pill-green{background:rgba(34,197,94,.12) !important;color:#86efac !important;border:1.5px solid rgba(34,197,94,.4) !important}

/* Hero scan count stat block */
.hero-stat-block{
  background:rgba(15,23,42,.55) !important;backdrop-filter:blur(10px) !important;
  border:1.5px solid rgba(59,130,246,.25) !important;border-radius:14px !important;
  padding:22px 26px !important;
  box-shadow:0 12px 32px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.06) !important;
  position:relative;overflow:hidden;
}
.hero-stat-block::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 0%,rgba(251,191,36,.5) 50%,transparent 100%)}

/* ===== JUMP NAV ===== */
.jump-nav{
  display:flex !important;align-items:center !important;gap:14px !important;flex-wrap:wrap !important;
  background:rgba(15,23,42,.5) !important;border:1px solid var(--border) !important;border-radius:12px !important;
  padding:10px 16px !important;margin-bottom:24px !important;
  box-shadow:0 6px 18px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.04) !important;
}
.jump-nav-label{
  font-family:'JetBrains Mono',monospace !important;font-size:11px !important;letter-spacing:1.2px !important;
  text-transform:uppercase !important;color:#94a3b8 !important;font-weight:800 !important;
  display:inline-flex !important;align-items:center !important;gap:8px !important;
}
.jump-nav-label::before{content:'';display:inline-block;width:12px;height:2px;background:linear-gradient(90deg,#ff5a1f,#fbbf24);border-radius:1px;box-shadow:0 0 8px rgba(255,90,31,.5)}
.jump-nav a{
  font-family:'JetBrains Mono',monospace !important;font-size:12px !important;letter-spacing:.4px !important;
  color:#93c5fd !important;font-weight:700 !important;padding:5px 10px !important;border-radius:6px !important;
  transition:background .15s, color .15s !important;
}
.jump-nav a:hover{background:rgba(59,130,246,.12) !important;color:#fff !important;text-decoration:none !important}

/* ===== H2 SECTION HEADERS ===== */
.main-col h2,
section > h2{
  font-size:26px !important;font-weight:800 !important;color:#fff !important;
  letter-spacing:-.4px !important;line-height:1.2 !important;margin-bottom:18px !important;
  padding-bottom:12px !important;border-bottom:2px solid var(--border) !important;
  position:relative;
}
.main-col h2::after,section > h2::after{
  content:'';position:absolute;bottom:-2px;left:0;width:60px;height:2px;
  background:linear-gradient(90deg,#ff5a1f,#fbbf24);box-shadow:0 0 12px rgba(255,90,31,.4);
}
@media(max-width:760px){.main-col h2,section > h2{font-size:22px !important}}

/* ===== PLAIN ENGLISH BOX ===== */
.plain-english{
  background:linear-gradient(135deg,rgba(34,197,94,.08) 0%,rgba(15,23,42,.4) 60%,rgba(34,197,94,.04) 100%) !important;
  border:1.5px solid rgba(34,197,94,.3) !important;border-left:4px solid #22c55e !important;border-radius:14px !important;
  padding:24px 28px !important;
  box-shadow:0 12px 30px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.04) !important;
}
.plain-english-label{
  font-family:'JetBrains Mono',monospace !important;font-size:11px !important;letter-spacing:1.3px !important;
  text-transform:uppercase !important;color:#22c55e !important;font-weight:800 !important;
  display:inline-flex !important;align-items:center !important;gap:8px !important;margin-bottom:10px !important;
}
.plain-english-label::before{content:'';display:inline-block;width:14px;height:2px;background:linear-gradient(90deg,#16a34a,#22c55e);border-radius:1px;box-shadow:0 0 8px rgba(34,197,94,.5)}
.plain-english h3{font-size:19px !important;font-weight:800 !important;color:#fff !important;letter-spacing:-.3px !important;margin-bottom:8px !important}
.plain-english p{font-size:16px !important;color:#cbd5e1 !important;line-height:1.65 !important}

/* ===== CAUSE CARDS (arc-probability redesign) ===== */
.cause-card{
  background:var(--surface) !important;border:1.5px solid var(--border) !important;border-radius:16px !important;
  padding:24px 26px !important;position:relative !important;overflow:hidden !important;
  box-shadow:0 14px 36px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.05) !important;
  transition:transform .2s, border-color .2s, box-shadow .25s !important;
}
.cause-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent 0%,#3b82f6 50%,transparent 100%);
}
.cause-card:hover{transform:translateY(-3px) !important;border-color:rgba(59,130,246,.4) !important;box-shadow:0 22px 50px rgba(37,99,235,.22),inset 0 1px 0 rgba(255,255,255,.08) !important}
.cause-card--top{border-color:rgba(59,130,246,.5) !important;box-shadow:0 20px 48px rgba(37,99,235,.3),inset 0 1px 0 rgba(255,255,255,.08) !important}
.cause-card--top::before{background:linear-gradient(90deg,transparent 0%,#3b82f6 30%,#fbbf24 50%,#3b82f6 70%,transparent 100%) !important;background-size:200% 100% !important;animation:ampDtcScan 4s linear infinite !important;height:3px !important}

.cause-pct-big{font-family:'JetBrains Mono',monospace !important;font-weight:800 !important;font-size:22px !important;letter-spacing:-.5px !important}
.cause-pct-big--1{
  background:linear-gradient(135deg,#3b82f6,#7c3aed);
  -webkit-background-clip:text !important;background-clip:text !important;-webkit-text-fill-color:transparent !important;
}
.cause-pct-big--2{
  background:linear-gradient(135deg,#fbbf24,#ff5a1f);
  -webkit-background-clip:text !important;background-clip:text !important;-webkit-text-fill-color:transparent !important;
}
.cause-pct-big--3{
  background:linear-gradient(135deg,#94a3b8,#64748b);
  -webkit-background-clip:text !important;background-clip:text !important;-webkit-text-fill-color:transparent !important;
}
.arc-fill--1{stroke:#3b82f6 !important;filter:drop-shadow(0 0 6px rgba(59,130,246,.5))}
.arc-fill--2{stroke:#fbbf24 !important;filter:drop-shadow(0 0 6px rgba(251,191,36,.5))}
.arc-fill--3{stroke:#94a3b8 !important}

.cause-rank-badge{
  font-family:'JetBrains Mono',monospace !important;font-size:11px !important;font-weight:800 !important;
  letter-spacing:1.2px !important;padding:4px 10px !important;border-radius:6px !important;
  box-shadow:0 4px 10px rgba(0,0,0,.15),inset 0 1px 0 rgba(255,255,255,.08) !important;
}
.cause-rank-badge--1{background:rgba(59,130,246,.18) !important;color:#93c5fd !important;border:1.5px solid rgba(59,130,246,.4) !important}
.cause-rank-badge--2{background:rgba(251,191,36,.15) !important;color:#fbbf24 !important;border:1.5px solid rgba(251,191,36,.35) !important}
.cause-rank-badge--3{background:rgba(148,163,184,.15) !important;color:#cbd5e1 !important;border:1.5px solid rgba(148,163,184,.3) !important}

.cause-name{font-size:18px !important;font-weight:800 !important;color:#fff !important;letter-spacing:-.3px !important;line-height:1.3 !important}
.cause-desc{font-size:15.5px !important;color:#cbd5e1 !important;line-height:1.65 !important}
.cost-row{margin-top:14px !important;padding:12px 16px !important;background:rgba(0,0,0,.25) !important;border:1px solid var(--border) !important;border-radius:10px !important;gap:16px !important}
.cost-label{font-family:'JetBrains Mono',monospace !important;font-size:10px !important;letter-spacing:.8px !important;text-transform:uppercase !important;color:#94a3b8 !important;font-weight:700 !important}
.cost-val{font-family:'JetBrains Mono',monospace !important;font-size:14px !important;font-weight:800 !important;color:#fff !important}

/* ===== SCAN CALLOUT (affiliate) ===== */
.scan-callout{
  background:linear-gradient(135deg,rgba(251,191,36,.06) 0%,rgba(15,23,42,.5) 60%,rgba(255,90,31,.04) 100%) !important;
  border:1.5px solid rgba(251,191,36,.3) !important;border-left:4px solid #fbbf24 !important;border-radius:14px !important;
  padding:18px 22px !important;
  box-shadow:0 12px 30px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.04) !important;
}
.scan-callout a{color:#fbbf24 !important;font-weight:700 !important}

/* ===== CTA BANNER (mid-page diagnose form) ===== */
.cta-banner{
  background:radial-gradient(ellipse 100% 100% at 20% 0%,rgba(124,58,237,.3) 0%,transparent 50%),radial-gradient(ellipse 100% 100% at 100% 100%,rgba(251,191,36,.15) 0%,transparent 50%),linear-gradient(135deg,#0f172a 0%,#1e3a8a 50%,#1e1b4b 100%) !important;
  border:1.5px solid rgba(59,130,246,.4) !important;border-radius:18px !important;
  padding:32px 36px !important;position:relative !important;overflow:hidden !important;
  box-shadow:0 24px 60px rgba(37,99,235,.32),inset 0 1px 0 rgba(255,255,255,.06) !important;
}
.cta-banner::before{
  content:'' !important;position:absolute !important;top:0;left:0;right:0;height:3px !important;z-index:5 !important;
  background:linear-gradient(90deg,transparent 0%,#3b82f6 30%,#fbbf24 50%,#3b82f6 70%,transparent 100%) !important;
  background-size:200% 100% !important;animation:ampDtcScan 4s linear infinite !important;
}
.cta-banner > *{position:relative;z-index:1}
.cta-banner p:first-child{font-size:26px !important;font-weight:800 !important;color:#fff !important;letter-spacing:-.5px !important;line-height:1.2 !important}
.dmf-wrap{margin-top:16px !important}
.dmf-code-pill{
  display:inline-flex !important;align-items:center !important;gap:8px !important;
  background:rgba(251,191,36,.15) !important;color:#fbbf24 !important;
  padding:6px 12px !important;border-radius:7px !important;
  font-family:'JetBrains Mono',monospace !important;font-weight:800 !important;font-size:13px !important;letter-spacing:.5px !important;
  border:1.5px solid rgba(251,191,36,.35) !important;
  box-shadow:0 4px 12px rgba(251,191,36,.2),inset 0 1px 0 rgba(255,255,255,.1) !important;
}
.dmf-hint{font-family:'JetBrains Mono',monospace !important;font-size:11px !important;letter-spacing:.8px !important;text-transform:uppercase !important;color:#93c5fd !important;font-weight:700 !important}
.dmf-fields{display:grid !important;grid-template-columns:1fr 1.3fr 1.4fr !important;gap:10px !important;margin-top:12px !important}
@media(max-width:680px){.dmf-fields{grid-template-columns:1fr 1fr !important}}
.dmf-select,.dmf-input{
  background:rgba(0,0,0,.4) !important;border:1.5px solid rgba(59,130,246,.3) !important;color:#fff !important;
  padding:13px 15px !important;border-radius:10px !important;font-size:15px !important;font-weight:600 !important;
}
.dmf-select option{color:#0a0e1a !important;background:#fff !important}
.dmf-select:focus,.dmf-input:focus{outline:none !important;border-color:#fbbf24 !important;box-shadow:0 0 0 4px rgba(251,191,36,.15),0 0 20px rgba(251,191,36,.2) !important}
.btn-diag{
  position:relative !important;width:100% !important;margin-top:12px !important;
  background:linear-gradient(135deg,#fbbf24 0%,#f97316 100%) !important;
  color:#0a0e1a !important;border:none !important;
  padding:16px 24px !important;border-radius:11px !important;
  font-size:16px !important;font-weight:800 !important;letter-spacing:.4px !important;text-transform:uppercase !important;
  cursor:pointer !important;overflow:hidden !important;
  box-shadow:0 10px 28px rgba(251,191,36,.5),inset 0 1px 0 rgba(255,255,255,.35) !important;
  display:flex !important;align-items:center !important;justify-content:center !important;gap:10px !important;
}
.btn-diag::before{content:'';position:absolute;top:0;left:-100%;width:50%;height:100%;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.55) 50%,transparent 100%);transform:skewX(-25deg);animation:ampDtcShimmer 2.8s ease-in-out infinite;pointer-events:none}
.btn-diag:hover{filter:brightness(1.05) !important}

/* ===== DIAGRAM WRAP ===== */
.diagram-wrap{
  background:linear-gradient(180deg,#0a0e1a 0%,#0f172a 100%) !important;
  border:1.5px solid rgba(59,130,246,.25) !important;border-radius:14px !important;
  padding:24px !important;
  box-shadow:0 14px 36px rgba(0,0,0,.3),0 0 0 1px rgba(59,130,246,.1),inset 0 1px 0 rgba(255,255,255,.04) !important;
  position:relative;overflow:hidden;
}
.diagram-wrap::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent 0%,#3b82f6 50%,transparent 100%)}
.diagram-label{font-family:'JetBrains Mono',monospace !important;font-size:11px !important;letter-spacing:1.1px !important;text-transform:uppercase !important;color:#94a3b8 !important;font-weight:700 !important;margin-top:14px !important}

/* ===== VEHICLES & COMPARE TABLES ===== */
.vehicles-table,.compare-table{
  border-collapse:collapse !important;font-size:15px !important;width:100% !important;
}
.vehicles-table thead,.compare-table thead{background:linear-gradient(180deg,rgba(59,130,246,.15) 0%,rgba(0,0,0,.2) 100%) !important}
.vehicles-table th,.compare-table th{
  font-family:'JetBrains Mono',monospace !important;font-size:12px !important;font-weight:800 !important;
  letter-spacing:1.2px !important;text-transform:uppercase !important;color:#93c5fd !important;
  padding:14px 18px !important;border-bottom:2px solid rgba(59,130,246,.3) !important;text-align:left !important;
}
.vehicles-table td,.compare-table td{padding:14px 18px !important;border-bottom:1px solid var(--border) !important;color:#cbd5e1 !important;line-height:1.5 !important}
.vehicles-table tr:last-child td,.compare-table tr:last-child td{border-bottom:none !important}
.vehicles-table td:first-child,.compare-table td:first-child{color:#fff !important;font-weight:600 !important}
.vehicles-table tbody tr:hover,.compare-table tbody tr:hover{background:rgba(59,130,246,.06) !important}
.affect-bar{
  display:inline-block !important;height:6px !important;border-radius:3px !important;margin-right:10px !important;vertical-align:middle !important;
  background:linear-gradient(90deg,#ef4444,#f97316,#fbbf24) !important;
  box-shadow:0 0 8px rgba(239,68,68,.35) !important;
}
.compare-code{
  font-family:'JetBrains Mono',monospace !important;font-size:15px !important;font-weight:800 !important;
  background:linear-gradient(135deg,#fbbf24,#ff5a1f) !important;
  -webkit-background-clip:text !important;background-clip:text !important;-webkit-text-fill-color:transparent !important;
}

/* ===== STEPS LIST ===== */
.steps-list{counter-reset:step;list-style:none !important;padding:0 !important}
.steps-list li{
  counter-increment:step;padding:20px 20px 20px 70px !important;position:relative !important;
  border-bottom:1px solid var(--border) !important;font-size:15.5px !important;color:#cbd5e1 !important;line-height:1.65 !important;
}
.steps-list li:last-child{border-bottom:none !important}
.steps-list li::before{
  content:counter(step,decimal-leading-zero) !important;
  position:absolute !important;left:14px !important;top:18px !important;
  width:42px !important;height:42px !important;border-radius:11px !important;
  background:linear-gradient(135deg,#2563eb 0%,#1d4ed8 50%,#7c3aed 100%) !important;
  background-size:200% 200% !important;animation:ampDtcGrad 5s ease-in-out infinite !important;
  color:#fff !important;font-family:'JetBrains Mono',monospace !important;font-weight:800 !important;font-size:14px !important;
  display:flex !important;align-items:center !important;justify-content:center !important;
  box-shadow:0 8px 20px rgba(37,99,235,.45),inset 0 1px 0 rgba(255,255,255,.25) !important;
}
.steps-list li strong{display:inline !important;color:#fff !important;font-weight:800 !important;font-size:16px !important}

.steps-teaser{
  margin-top:22px !important;padding:22px 26px !important;
  background:linear-gradient(135deg,rgba(59,130,246,.06) 0%,rgba(0,0,0,0) 100%) !important;
  border:1.5px dashed rgba(59,130,246,.35) !important;border-radius:14px !important;
}
.steps-teaser-head{font-size:16px !important;font-weight:800 !important;color:#fff !important;display:flex !important;align-items:center !important;gap:8px !important;margin-bottom:14px !important;letter-spacing:-.2px !important}
.steps-teaser-list{list-style:none !important;padding:0 !important;display:flex !important;flex-direction:column !important;gap:10px !important}
.steps-teaser-list li{display:flex !important;align-items:flex-start !important;gap:12px !important;font-size:14.5px !important;color:#cbd5e1 !important;line-height:1.55 !important}
.stnum{
  width:28px !important;height:28px !important;border-radius:7px !important;flex-shrink:0 !important;
  background:rgba(59,130,246,.12) !important;border:1.5px solid rgba(59,130,246,.35) !important;color:#93c5fd !important;
  display:flex !important;align-items:center !important;justify-content:center !important;
  font-family:'JetBrains Mono',monospace !important;font-weight:800 !important;font-size:12px !important;
}
.steps-teaser-btn{
  display:inline-block !important;margin-top:16px !important;
  background:linear-gradient(135deg,#2563eb 0%,#1d4ed8 100%) !important;color:#fff !important;
  padding:11px 20px !important;border-radius:10px !important;font-size:14px !important;font-weight:800 !important;
  text-decoration:none !important;letter-spacing:.3px !important;
  box-shadow:0 6px 18px rgba(37,99,235,.4),inset 0 1px 0 rgba(255,255,255,.2) !important;
}
.steps-teaser-btn:hover{filter:brightness(1.08) !important;text-decoration:none !important}

/* ===== FORUM POSTS (community reports) ===== */
.forum-post{
  background:var(--surface) !important;border:1.5px solid var(--border) !important;border-radius:14px !important;
  padding:20px 24px !important;margin-bottom:14px !important;
  box-shadow:0 10px 28px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.04) !important;
  position:relative;overflow:hidden;transition:border-color .2s, transform .2s;
}
.forum-post::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent 0%,#fbbf24 50%,transparent 100%)}
.forum-post:hover{transform:translateY(-2px) !important;border-color:rgba(251,191,36,.3) !important}
.forum-avatar{
  width:42px !important;height:42px !important;border-radius:50% !important;
  background:linear-gradient(135deg,#3b82f6 0%,#7c3aed 100%) !important;color:#fff !important;
  font-family:'JetBrains Mono',monospace !important;font-size:14px !important;font-weight:800 !important;
  display:flex !important;align-items:center !important;justify-content:center !important;flex-shrink:0 !important;
  box-shadow:0 6px 16px rgba(37,99,235,.4),inset 0 1px 0 rgba(255,255,255,.25) !important;
}
.forum-meta{font-family:'JetBrains Mono',monospace !important;font-size:12px !important;color:#94a3b8 !important;letter-spacing:.3px !important}
.forum-meta strong{color:#fff !important;font-weight:700 !important}
.forum-badge{
  background:linear-gradient(135deg,#16a34a,#22c55e) !important;color:#fff !important;
  padding:3px 9px !important;border-radius:5px !important;
  font-family:'JetBrains Mono',monospace !important;font-size:10px !important;font-weight:800 !important;letter-spacing:.8px !important;
  box-shadow:0 4px 10px rgba(22,163,74,.35),inset 0 1px 0 rgba(255,255,255,.25) !important;
}
.forum-body{font-size:15px !important;color:#cbd5e1 !important;line-height:1.65 !important;margin-top:10px !important}
.forum-stat{font-family:'JetBrains Mono',monospace !important;font-size:12px !important;color:#94a3b8 !important;letter-spacing:.3px !important}
.forum-stat strong{color:#fff !important}

/* ===== SIDEBAR ===== */
.sidebar{position:sticky !important;top:80px !important}
.cta-card{
  background:linear-gradient(180deg,#0a0e1a 0%,#0f172a 100%) !important;
  border:1.5px solid rgba(59,130,246,.4) !important;border-radius:16px !important;
  padding:24px 26px !important;position:relative !important;overflow:hidden !important;
  box-shadow:0 18px 44px rgba(37,99,235,.28),inset 0 1px 0 rgba(255,255,255,.06) !important;
}
.cta-card::before{
  content:'' !important;position:absolute !important;top:0;left:0;right:0;height:2px !important;z-index:2 !important;
  background:linear-gradient(90deg,transparent 0%,#3b82f6 30%,#fbbf24 50%,#3b82f6 70%,transparent 100%) !important;
  background-size:200% 100% !important;animation:ampDtcScan 4s linear infinite !important;
}
.cta-card::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(59,130,246,.18),transparent 70%);pointer-events:none}
.cta-card > *{position:relative;z-index:1}
.cta-card h3{font-size:19px !important;font-weight:800 !important;color:#fff !important;letter-spacing:-.3px !important;line-height:1.25 !important;margin-bottom:8px !important}
.cta-card p{font-size:14px !important;color:#94a3b8 !important;line-height:1.55 !important;margin-bottom:14px !important}
.btn-cta{
  position:relative !important;width:100% !important;
  background:linear-gradient(135deg,#2563eb 0%,#1d4ed8 50%,#7c3aed 100%) !important;
  background-size:200% 200% !important;animation:ampDtcGrad 4s ease-in-out infinite !important;
  color:#fff !important;border:none !important;
  padding:14px 18px !important;border-radius:11px !important;
  font-size:15px !important;font-weight:800 !important;letter-spacing:.3px !important;text-transform:uppercase !important;
  cursor:pointer !important;overflow:hidden !important;text-align:center !important;text-decoration:none !important;
  box-shadow:0 10px 26px rgba(37,99,235,.5),inset 0 1px 0 rgba(255,255,255,.25) !important;
  display:flex !important;align-items:center !important;justify-content:center !important;
}
.btn-cta::before{content:'';position:absolute;top:0;left:-100%;width:50%;height:100%;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.45) 50%,transparent 100%);transform:skewX(-25deg);animation:ampDtcShimmer 2.8s ease-in-out infinite;pointer-events:none}
.btn-cta:hover{filter:brightness(1.1) !important;text-decoration:none !important}

/* Parts widget */
.parts-widget,.sidebar-card{
  background:var(--surface) !important;border:1.5px solid var(--border) !important;border-radius:14px !important;
  padding:20px 22px !important;margin-top:18px !important;
  box-shadow:0 10px 28px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.04) !important;
}
.parts-widget h3,.sidebar-card h3{
  font-size:14px !important;font-weight:800 !important;color:#fff !important;
  font-family:'JetBrains Mono',monospace !important;letter-spacing:1.1px !important;text-transform:uppercase !important;
  display:flex !important;align-items:center !important;gap:8px !important;margin-bottom:14px !important;
}
.parts-widget h3::before,.sidebar-card h3::before{content:'';display:inline-block;width:14px;height:2px;background:linear-gradient(90deg,#fbbf24,#ff5a1f);border-radius:1px;box-shadow:0 0 8px rgba(251,191,36,.5)}
.part-link{
  display:flex !important;align-items:center !important;gap:11px !important;
  padding:12px 0 !important;border-bottom:1px solid var(--border) !important;
  color:#cbd5e1 !important;font-size:14.5px !important;font-weight:500 !important;text-decoration:none !important;
  transition:color .15s !important;
}
.part-link:last-child{border-bottom:none !important}
.part-link:hover{color:#fbbf24 !important;text-decoration:none !important}
.part-emoji{font-size:18px !important;flex-shrink:0 !important}
.part-name{flex:1 !important}
.part-arrow{color:#64748b !important;font-family:'JetBrains Mono',monospace !important}
.parts-aff-note{font-family:'JetBrains Mono',monospace !important;font-size:10px !important;color:#64748b !important;letter-spacing:.6px !important;text-transform:uppercase !important;margin-top:10px !important;padding-top:10px !important;border-top:1px solid var(--border) !important}

/* VIN-Recall card */
.vin-recall-card{
  background:linear-gradient(135deg,rgba(124,58,237,.06) 0%,var(--surface) 100%) !important;
  border:1.5px solid rgba(124,58,237,.3) !important;border-radius:14px !important;
  padding:20px 22px !important;margin-top:18px !important;
  box-shadow:0 10px 28px rgba(124,58,237,.18),inset 0 1px 0 rgba(255,255,255,.04) !important;
}
.vin-recall-input{
  background:rgba(0,0,0,.4) !important;border:1.5px solid rgba(124,58,237,.3) !important;color:#fff !important;
  padding:12px 14px !important;border-radius:9px !important;font-size:14px !important;font-family:'JetBrains Mono',monospace !important;
  letter-spacing:.5px !important;width:100% !important;
}
.vin-recall-input:focus{outline:none !important;border-color:#a855f7 !important;box-shadow:0 0 0 4px rgba(168,85,247,.2) !important}
.vin-recall-btn{
  background:linear-gradient(135deg,#7c3aed,#a855f7) !important;color:#fff !important;border:none !important;
  padding:12px 18px !important;border-radius:9px !important;font-size:14px !important;font-weight:800 !important;
  letter-spacing:.3px !important;text-transform:uppercase !important;cursor:pointer !important;
  box-shadow:0 6px 16px rgba(124,58,237,.4),inset 0 1px 0 rgba(255,255,255,.2) !important;
}

/* ===== PRINT BUTTON ===== */
.dtc-print-btn{
  background:rgba(59,130,246,.08) !important;border:1.5px solid rgba(59,130,246,.3) !important;color:#93c5fd !important;
  padding:7px 14px !important;border-radius:8px !important;font-size:13px !important;font-weight:700 !important;
  font-family:'JetBrains Mono',monospace !important;letter-spacing:.4px !important;cursor:pointer !important;
}
.dtc-print-btn:hover{background:rgba(59,130,246,.16) !important;color:#fff !important;border-color:#3b82f6 !important}

/* ===== SHOP FINDER ===== */
.shop-zip-input{
  background:rgba(0,0,0,.4) !important;border:1.5px solid rgba(59,130,246,.3) !important;color:#fff !important;
  padding:14px 16px !important;border-radius:10px !important;font-size:16px !important;font-family:'JetBrains Mono',monospace !important;
  letter-spacing:1px !important;
}
.shop-zip-input:focus{outline:none !important;border-color:#3b82f6 !important;box-shadow:0 0 0 4px rgba(59,130,246,.2) !important}
.btn-find-shop{
  background:linear-gradient(135deg,#2563eb 0%,#1d4ed8 100%) !important;color:#fff !important;border:none !important;
  padding:14px 22px !important;border-radius:10px !important;font-weight:800 !important;font-size:15px !important;letter-spacing:.3px !important;text-transform:uppercase !important;
  box-shadow:0 8px 20px rgba(37,99,235,.4),inset 0 1px 0 rgba(255,255,255,.2) !important;
}

/* ===== BREADCRUMB ===== */
.breadcrumb{font-family:'JetBrains Mono',monospace !important;font-size:13px !important;color:#94a3b8 !important;letter-spacing:.3px !important;margin-bottom:18px !important}
.breadcrumb a{color:#94a3b8 !important;font-weight:500 !important}
.breadcrumb a:hover{color:#fbbf24 !important}

/* ====================================================================
   MOBILE LAYOUT FIXES (applies to all DTC pages)
   Fixes observed issues: text cutoff at right edge, jump nav truncation,
   cause cards overflow, sticky CTA covering content, form field overflow
   ==================================================================== */

@media (max-width: 760px) {

  /* 1. Force ALL containers to respect viewport width */
  html, body { overflow-x: hidden !important; max-width: 100vw !important; }
  body * { max-width: 100vw; }

  /* 2. Hero / CTA banner — fix word cutoff at right edge */
  .cta-banner, .dtc-hero, .hero, .hero-grid {
    padding-left: 18px !important;
    padding-right: 18px !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }
  .cta-banner h1, .cta-banner h2, .cta-banner p,
  .dtc-hero h1, .dtc-hero p,
  .hero h1, .hero p {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
    max-width: 100% !important;
  }
  .cta-banner p:first-child {
    font-size: 19px !important;
    line-height: 1.3 !important;
  }
  .cta-banner h2, .dtc-hero h2, .hero h1 { font-size: 22px !important; line-height: 1.25 !important }

  /* 3. Jump nav — wrap instead of horizontal scroll, shorter labels */
  .jump-nav {
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding: 10px 12px !important;
  }
  .jump-nav a {
    font-size: 11px !important;
    padding: 4px 8px !important;
    white-space: nowrap !important;
  }
  .jump-nav-label {
    width: 100% !important;
    margin-bottom: 4px !important;
  }

  /* 4. CAUSE CARDS — stack vertically instead of 3-col grid */
  .causes-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .cause-card {
    padding: 18px 16px !important;
    margin: 0 !important;
    max-width: 100% !important;
  }
  .cause-card-header {
    flex-direction: row !important;
    gap: 14px !important;
  }
  .cause-arc-wrap {
    width: 70px !important;
    height: 70px !important;
    flex-shrink: 0 !important;
  }
  .cause-arc { width: 70px !important; height: 70px !important }
  .cause-pct-big { font-size: 16px !important }
  .cause-name { font-size: 15px !important; line-height: 1.25 !important }
  .cause-rank-badge { font-size: 10px !important; padding: 3px 7px !important }
  .cause-desc { font-size: 14px !important; line-height: 1.55 !important }
  .cost-row { gap: 8px !important; padding: 10px 12px !important; flex-wrap: wrap !important }
  .cost-item { flex: 1 1 30% !important; min-width: 70px !important }
  .cost-label { font-size: 9px !important }
  .cost-val { font-size: 12px !important }

  /* 5. CTA-BANNER form fields — single column on mobile */
  .dmf-fields {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .dmf-select, .dmf-input {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    font-size: 16px !important; /* prevents iOS zoom */
  }
  .dmf-code-pill {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .dmf-header-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }
  .btn-diag {
    font-size: 14px !important;
    padding: 14px 18px !important;
    white-space: normal !important;
    line-height: 1.3 !important;
  }

  /* 6. STICKY MOBILE CTA — make smaller, only show after scrolling past hero */
  .sticky-cta, [class*="sticky"][class*="cta"] {
    padding: 8px 12px !important;
    font-size: 13px !important;
  }
  .sticky-cta-text { font-size: 12px !important; line-height: 1.2 !important }
  .sticky-cta-text small { font-size: 10px !important }
  .sticky-cta a, .sticky-cta button {
    font-size: 13px !important;
    padding: 8px 12px !important;
    white-space: nowrap !important;
  }
  /* Body padding so sticky bar doesn't overlap final content */
  body { padding-bottom: 70px !important }

  /* 7. Vehicles / Compare tables — horizontal scroll */
  .table-scroll, .vehicles-table, .compare-table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-width: 100% !important;
  }
  .vehicles-table table, .compare-table table {
    min-width: 100% !important;
    font-size: 13px !important;
  }

  /* 8. DIAGRAMS — prevent overflow */
  .diagram-wrap, .diagram-wrap svg, .scope-svg {
    max-width: 100% !important;
    height: auto !important;
    overflow: hidden !important;
  }

  /* 9. Trust/meta strips — wrap properly */
  .trust-strip, [class*="trust-strip"], [class*="meta-strip"] {
    flex-wrap: wrap !important;
    gap: 8px !important;
    font-size: 12px !important;
  }

  /* 10. SECTION PADDING — tighter on mobile */
  section, .section, .main-col > section {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  h2[data-num], .main-col h2, section > h2 {
    font-size: 19px !important;
    line-height: 1.25 !important;
  }

  /* 11. Hero stat block — hide redundant secondary stats on mobile */
  .hero-stat-block { display: none !important }

  /* 12. Plain English box — tighter mobile padding */
  .plain-english {
    padding: 16px 18px !important;
  }
  .plain-english h3 { font-size: 16px !important }
  .plain-english p { font-size: 14.5px !important }

  /* 13. Forum/community cards — proper mobile width */
  .forum-post {
    padding: 14px 16px !important;
    margin-bottom: 10px !important;
  }
  .forum-body { font-size: 14px !important }

  /* 14. Sidebar parts widget on mobile — full width, less padding */
  .parts-widget, .sidebar-card {
    padding: 16px 18px !important;
  }

  /* 15. Steps list — tighter padding */
  .steps-list li {
    padding: 14px 14px 14px 56px !important;
    font-size: 14px !important;
  }
  .steps-list li::before {
    width: 36px !important;
    height: 36px !important;
    left: 10px !important;
    top: 14px !important;
    font-size: 12px !important;
  }
}

/* iPhone-specific landscape fixes */
@media (max-width: 480px) {
  /* Even tighter spacing on small phones */
  .cta-banner, .dtc-hero { padding: 18px 14px !important }
  .console, .cta-card { padding: 18px 14px !important }
  h1, .code-readout { font-size: 36px !important }
  body { font-size: 15px !important }
}