/* ClearPath quote funnel (quote-start, quote-form, your-quote) - 04/10/2026
   Trust bar like the homepage, glowing buttons, form visible without scrolling. */

:root{--cpf-teal:#14B8A6;--cpf-teal2:#18D4C2;--cpf-glow:rgba(24,212,194,.55);--cpf-navy:#0B2341}

/* ---------- trust bar (replaces the old sticky header) ---------- */
.cpf-tb{background:linear-gradient(90deg,#0B2341,#0E3B4E);color:#E6F4F1;font:600 13px/1.3 Inter,system-ui,-apple-system,Segoe UI,Arial,sans-serif;position:relative;z-index:50}
.cpf-tb-in{max-width:1240px;margin:0 auto;padding:8px 20px;display:flex;align-items:center;justify-content:space-between;gap:14px;white-space:nowrap}
.cpf-tb a{color:#E6F4F1;text-decoration:none}
.cpf-tb a:hover{color:#fff}
.cpf-left{display:flex;align-items:center;gap:8px}
.cpf-stars{color:#51B37F;letter-spacing:1px}
.cpf-right{display:flex;align-items:center;gap:18px}
.cpf-offer{display:inline-flex;align-items:center;gap:8px;background:rgba(255,213,0,.14);border:1px solid rgba(255,213,0,.6);border-radius:999px;padding:3px 12px 3px 8px;color:#FFE45C!important;font-size:12.5px}
.cpf-offer b{font-weight:800;letter-spacing:.6px;color:#FFD500}
.cpf-offer strong{color:#fff;font-weight:800;letter-spacing:.5px}
.cpf-dot{width:8px;height:8px;border-radius:50%;background:#FFD500;flex:0 0 8px;animation:cpfDot 1.6s infinite}
@keyframes cpfDot{0%{box-shadow:0 0 0 0 rgba(255,213,0,.75)}70%{box-shadow:0 0 0 8px rgba(255,213,0,0)}100%{box-shadow:0 0 0 0 rgba(255,213,0,0)}}
@media(max-width:1000px){.cpf-more{display:none}}
@media(max-width:700px){
  .cpf-tb{font-size:11.5px}
  .cpf-tb-in{padding:7px 10px;gap:8px}
  .cpf-stars{display:none}
  .cpf-offer{padding:2px 8px 2px 6px;font-size:11px;gap:5px}
  .cpf-offer b{display:none}
  .cpf-right{gap:10px}
  .cpf-call-long{display:none}
}
@media(min-width:701px){.cpf-call-short{display:none}}

/* hide the old headers / bars */
body > header,.cp-rating-bar,body > .cp-topbar{display:none!important}

/* ---------- glowing buttons ---------- */
@keyframes cpfGlow{0%,100%{box-shadow:0 0 10px var(--cpf-glow),0 6px 20px rgba(20,184,166,.35)}50%{box-shadow:0 0 22px rgba(45,230,207,.85),0 8px 28px rgba(20,184,166,.5)}}
.quote-card .btn-primary,.quote-container .btn-primary,#payButton{
  background:linear-gradient(135deg,var(--cpf-teal),var(--cpf-teal2))!important;border:0!important;color:#fff!important;
  animation:cpfGlow 2.4s ease-in-out infinite;transition:transform .15s}
.quote-card .btn-primary:hover,.quote-container .btn-primary:hover,#payButton:hover{transform:translateY(-1px)}

/* step 2 progress circles */
.progress-step.active .progress-circle,.progress-step.completed .progress-circle{
  background:linear-gradient(135deg,var(--cpf-teal),var(--cpf-teal2))!important;border-color:var(--cpf-teal2)!important;
  box-shadow:0 0 10px var(--cpf-glow),0 0 22px rgba(20,184,166,.35)}
.progress-step.active .progress-circle{animation:cpfGlow 2.4s ease-in-out infinite}
.progress-step.active .progress-label,.progress-step.completed .progress-label{color:var(--cpf-teal)!important}

/* step 3: terms + payment options in one uniform glowing teal */
#termSelection .term-btn.active{background:linear-gradient(135deg,var(--cpf-teal),var(--cpf-teal2))!important;border-color:var(--cpf-teal2)!important;color:#fff!important;box-shadow:0 0 12px var(--cpf-glow),0 0 26px rgba(20,184,166,.35)}
#termSelection .term-btn:not(.active){border-color:rgba(24,212,194,.45)!important}
#termSelection .term-btn:not(.active):hover{box-shadow:0 0 10px rgba(24,212,194,.35)}
#termSelection .badge{background:linear-gradient(135deg,var(--cpf-teal),var(--cpf-teal2))!important;color:#fff!important}
#payOptions .pay-opt{border-color:rgba(24,212,194,.35)!important}
#payOptions .pay-opt.active{border-color:var(--cpf-teal2)!important;background:rgba(24,212,194,.14)!important;box-shadow:0 0 12px var(--cpf-glow),inset 0 0 0 1px rgba(24,212,194,.4)}

/* ---------- STEP 1: quote-start.html ---------- */
.cp-qs-intro{padding-top:18px!important}
.cp-qs-intro .cp-rating{margin-bottom:10px!important}
.cp-qs-intro .eyebrow{margin-bottom:6px!important}
.cp-qs-intro h1{margin-bottom:6px!important}
.quote-card{padding:24px 28px!important}
.quote-card > .title{margin-bottom:12px!important}
.quote-card .qs-plate-lab{margin-bottom:6px!important}
.quote-card .qs-plate{margin-bottom:14px!important}
.quote-card .form-group{margin-bottom:12px!important}
.quote-card .qs-grid .form-group{margin-bottom:10px!important}
.quote-card select,.quote-card input:not(#registration){height:46px!important;min-height:46px!important}
.quote-card .qs-fuel button{padding-top:8px!important;padding-bottom:8px!important}
.quote-card .btn-primary{margin-top:6px}

@media(min-width:1000px){
  body:has(.cp-qs-intro){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,560px) minmax(0,520px) minmax(0,1fr);column-gap:28px;align-content:start}
  body:has(.cp-qs-intro) > *{grid-column:1/-1}
  body:has(.cp-qs-intro) > .cp-qs-intro{grid-column:2;align-self:center;text-align:left;padding:20px 0!important;margin:0!important;max-width:none!important}
  body:has(.cp-qs-intro) > .cp-qs-intro *{text-align:left}
  body:has(.cp-qs-intro) > .cp-qs-intro .cp-badges{justify-content:flex-start!important}
  body:has(.cp-qs-intro) > .quote-card{grid-column:3;margin:16px 0 16px!important;max-width:none!important;width:auto!important}
}
@media(min-width:1000px) and (max-height:760px){
  .quote-card{padding:18px 24px!important}
  .quote-card .qs-plate{height:52px}
  .quote-card .qs-plate input{font-size:22px!important}
  .quote-card .qs-safe,.quote-card > p:last-child{display:none}
}
@media(max-width:999px){
  .cp-qs-intro .cp-rating,.cp-qs-intro > p,.cp-qs-intro .cp-badges{display:none!important}
  .cp-qs-intro{padding:12px 16px 0!important}
  .cp-qs-intro h1{font-size:24px!important;line-height:1.15!important}
  .quote-card{margin-top:10px!important;padding:16px!important}
  .quote-card .qs-plate{height:50px;margin-bottom:10px!important}
  .quote-card .qs-plate input{font-size:22px!important}
  .quote-card .qs-fuel button{padding-top:6px!important;padding-bottom:6px!important}
  .quote-card .qs-grid{grid-template-columns:1fr 1fr!important;column-gap:10px!important}
  .quote-card .qs-grid .form-group{margin-bottom:8px!important}
  .quote-card label{font-size:13px!important;margin-bottom:4px!important}
  .quote-card select,.quote-card input:not(#registration){height:44px!important;min-height:44px!important;font-size:16px!important}
}

/* ---------- STEP 2: quote-form.html ---------- */
.quote-page{padding:18px 20px 40px!important}
.quote-page .page-header{margin-bottom:12px!important}
.quote-page .page-header .step-label{margin-bottom:4px!important}
.quote-page .page-header h1{font-size:clamp(24px,2.6vw,34px)!important;line-height:1.15!important;margin-bottom:4px!important}
.quote-page .progress-indicator{margin:6px auto 14px!important}
.quote-page .progress-circle{width:30px!important;height:30px!important;line-height:30px!important;font-size:13px!important}
.quote-page .quote-container{padding:22px 28px 20px!important}
.quote-page .car-summary{margin-bottom:14px!important}
.quote-page .form-group{margin-bottom:10px!important}
.quote-page .form-group input{height:46px!important}
@media(max-height:720px){.quote-page .page-header p{display:none}}
@media(max-width:700px){
  .quote-page{padding:10px 12px 30px!important}
  .quote-page .page-header p{display:none}
  .quote-page .page-header h1{font-size:22px!important}
  .quote-page .progress-indicator{margin:4px auto 10px!important}
  .quote-page .progress-label{font-size:11px!important}
  .quote-page .quote-container{padding:14px!important}
  .quote-page .car-summary{padding:8px 10px!important;margin-bottom:10px!important}
  .quote-page .form-grid{grid-template-columns:1fr 1fr!important;gap:0 10px!important}
  .quote-page .form-group label{font-size:13px!important;margin-bottom:4px!important}
  .quote-page .form-group input{height:44px!important;font-size:16px!important}
}
@media(max-width:999px){
  .quote-card .qs-fuel{display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:6px!important}
  .quote-card .qs-fuel button{min-width:0!important;padding:6px 2px!important;font-size:11.5px!important;line-height:1.15!important}
  .cp-qs-intro .eyebrow{font-size:10.5px!important;margin-bottom:2px!important}
  .cp-qs-intro h1{font-size:21px!important;margin-bottom:0!important}
  .quote-card > .title{margin-bottom:8px!important}
}
/* step 3: promo box in the same teal as the rest (was bright green) */
#cpPromo.cp-promo{background:linear-gradient(135deg,rgba(6,43,46,.95),rgba(8,58,62,.95))!important;border-color:var(--cpf-teal2)!important;box-shadow:0 0 14px var(--cpf-glow),0 0 30px rgba(20,184,166,.3)!important}
#cpPromo .cp-promo-lbl,#cpPromo #cpPromoHead,#cpPromo .tick{color:#A7F3EC!important}
#cpPromo .cp-promo-chip,#cpPromo #cpPromoApply{background:linear-gradient(135deg,var(--cpf-teal),var(--cpf-teal2))!important;color:#fff!important;border-color:transparent!important;box-shadow:0 0 10px var(--cpf-glow)}
#cpPromo #cpPromoInput{border-color:var(--cpf-teal2)!important}
#cpPromo b{color:#5EEAD4!important}
#celebrationContinue{background:linear-gradient(135deg,var(--cpf-teal),var(--cpf-teal2))!important;border:0!important;color:#fff!important;animation:cpfGlow 2.4s ease-in-out infinite}
/* mobile polish 04/10/2026 */
@media(max-width:999px){
  body:has(.cp-qs-intro){overflow-x:hidden}
  .quote-card{box-sizing:border-box!important;width:auto!important;max-width:none!important;margin-left:12px!important;margin-right:12px!important;border-radius:18px!important}
  .quote-card select{padding-top:0!important;padding-bottom:0!important;line-height:normal!important}
  .quote-card .qs-fuel button{border-radius:12px!important}
  .quote-card .qs-fuel button.active,.quote-card .qs-fuel button[aria-pressed="true"]{box-shadow:0 0 10px var(--cpf-glow)!important;border-color:var(--cpf-teal2)!important}
  .quote-card input:focus,.quote-card select:focus,.quote-page .form-group input:focus{border-color:var(--cpf-teal2)!important;box-shadow:0 0 0 3px rgba(24,212,194,.25)!important;outline:0!important}
}
@media(max-width:700px){
  .quote-page .quote-container{box-sizing:border-box;border-radius:18px!important}
  .quote-page .car-summary{gap:10px!important}
  #quoteContent .hero{padding:14px 16px 6px!important}
  #quoteContent .hero h1{font-size:24px!important;line-height:1.15!important;margin-bottom:4px!important}
  #quoteContent .hero p{font-size:14px!important;margin-bottom:8px!important}
  #quoteContent .quote-wrap{padding-left:10px!important;padding-right:10px!important}
  #termSelection{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important}
  #termSelection{margin-top:14px!important}
  #termSelection .badge{font-size:8.5px!important;padding:3px 7px!important;white-space:nowrap!important;letter-spacing:.3px!important}
  #termSelection .term-btn{padding:16px 4px 10px!important;border-radius:12px!important;min-width:0!important;width:auto!important}
  #payOptions .pay-opt{border-radius:12px!important}
  #payButton{font-size:17px!important;padding:16px!important;border-radius:14px!important}
}
@media(max-width:700px){
  .quote-page .form-grid .form-group:nth-child(3),.quote-page .form-grid .form-group:nth-child(4){grid-column:1/-1}
  .quote-page .car-summary{flex-wrap:nowrap!important;align-items:center!important}
  .quote-page .car-summary *{font-size:13px!important;line-height:1.3!important}
}
/* 1-2-3 steps, same on all three pages */
.cpf-steps{display:flex;align-items:flex-start;justify-content:center;margin:0 auto 12px;max-width:440px;width:100%}
.cpf-st{display:flex;flex-direction:column;align-items:center;gap:6px;flex:0 0 auto;min-width:86px}
.cpf-c{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:14px;line-height:1;border:2px solid #CBD5E1;color:#64748B;background:#fff;box-sizing:border-box}
.cpf-st.done .cpf-c,.cpf-st.active .cpf-c{background:linear-gradient(135deg,var(--cpf-teal),var(--cpf-teal2));border-color:var(--cpf-teal2);color:#fff;box-shadow:0 0 10px var(--cpf-glow),0 0 22px rgba(20,184,166,.3)}
.cpf-st.active .cpf-c{animation:cpfGlow 2.4s ease-in-out infinite}
.cpf-l{font-size:12.5px;font-weight:600;color:#64748B;white-space:nowrap}
.cpf-st.done .cpf-l,.cpf-st.active .cpf-l{color:#0E9F94}
.cpf-line{flex:1 1 auto;height:3px;background:#E2E8F0;margin-top:15px;min-width:30px;border-radius:3px}
.cpf-line.on{background:linear-gradient(90deg,var(--cpf-teal),var(--cpf-teal2));box-shadow:0 0 8px rgba(24,212,194,.55)}
.cpf-steps ~ .eyebrow,.quote-page .progress-indicator,.quote-page .page-header .step-label{display:none!important}
.quote-card select{padding-top:0!important;padding-bottom:0!important;line-height:normal!important}
@media(min-width:1000px){
  .cp-qs-intro .cp-rating{display:none!important}
  body:has(.cp-qs-intro) > .cp-qs-intro .cpf-steps{margin:0 0 18px;justify-content:flex-start;max-width:400px}
}
@media(max-width:700px){
  .cpf-steps{margin:2px auto 8px;max-width:340px}
  .cpf-st{min-width:70px;gap:3px}
  .cpf-c{width:26px;height:26px;font-size:12px}
  .cpf-l{font-size:11px}
  .cpf-line{margin-top:12px}
}
/* step 2 matches steps 1 and 3 */
.quote-page .container{display:flex;flex-direction:column}
.quote-page .cpf-steps{order:-1;margin-bottom:14px}
.quote-page .page-header h1{font-family:Poppins,Inter,system-ui,sans-serif!important;font-weight:800!important;letter-spacing:-.3px}
@media(min-width:900px) and (min-height:700px){.quote-page{padding-top:clamp(18px,5vh,56px)!important}}
/* completed steps are clickable, to go back and change something */
a.cpf-st{text-decoration:none!important;cursor:pointer}
a.cpf-st .cpf-c{transition:transform .15s}
a.cpf-st:hover .cpf-c,a.cpf-st:focus-visible .cpf-c{transform:scale(1.1);box-shadow:0 0 16px rgba(45,230,207,.9)!important}
a.cpf-st:hover .cpf-l{text-decoration:underline}
.cpf-ed{font-size:.95em;opacity:.8}
/* step 1 premium desktop: dark hero like the homepage, logo, centred, nothing half-visible */
.cpf-logo{display:none}
@media(min-width:1000px){
  body:has(.cp-qs-intro){position:relative;z-index:0;grid-template-rows:auto minmax(calc(100vh - 42px),auto)}
  body:has(.cp-qs-intro)::before{content:"";position:absolute;left:0;right:0;top:42px;height:calc(100vh - 42px);min-height:600px;z-index:-1;
    background:linear-gradient(110deg,rgba(11,35,65,.97) 0%,rgba(11,35,65,.9) 42%,rgba(13,60,78,.7) 100%),url(../images/hero/clearpath-hero.jpg) 70% 82%/cover no-repeat}
  body:has(.cp-qs-intro)::after{content:"";position:absolute;left:0;right:0;top:calc(100vh - 2px);height:2px;z-index:-1;background:linear-gradient(90deg,transparent,rgba(24,212,194,.8),transparent)}
  body:has(.cp-qs-intro) > .cp-qs-intro,body:has(.cp-qs-intro) > .quote-card{grid-row:2;align-self:center}
  body:has(.cp-qs-intro) > .quote-card{margin:28px 0!important;background:rgba(255,255,255,.96)!important;border:1px solid rgba(24,212,194,.55)!important;box-shadow:0 0 0 1px rgba(24,212,194,.15),0 0 30px rgba(24,212,194,.35),0 30px 60px rgba(0,0,0,.35)!important;border-radius:22px!important}
  .cpf-logo{display:inline-block;margin:0 0 26px}
  .cpf-logo img{height:46px;width:auto;display:block}
  .cp-qs-intro h1{color:#fff!important;font-size:clamp(38px,3.4vw,52px)!important;line-height:1.08!important;margin-bottom:12px!important}
  .cp-qs-intro > p{color:#CFE3EA!important;font-size:17px!important;margin-bottom:18px!important}
  .cp-qs-intro .cp-badge{background:rgba(255,255,255,.08)!important;border:1px solid rgba(255,255,255,.18)!important;color:#E6F4F1!important;backdrop-filter:blur(6px)}
  .cp-qs-intro .cp-badge *{color:inherit!important}
  .cp-qs-intro .cp-badge b,.cp-qs-intro .cp-badge strong{color:#fff!important}
  .cp-qs-intro .cp-badge .tick{background:linear-gradient(135deg,var(--cpf-teal),var(--cpf-teal2))!important;color:#fff!important;box-shadow:0 0 8px var(--cpf-glow)}
  .cp-qs-intro .cpf-st:not(.done):not(.active) .cpf-c{background:transparent;border-color:rgba(255,255,255,.35);color:#CBD5E1}
  .cp-qs-intro .cpf-l{color:#94A3B8}
  .cp-qs-intro .cpf-st.done .cpf-l,.cp-qs-intro .cpf-st.active .cpf-l{color:#5EEAD4}
  .cp-qs-intro .cpf-line{background:rgba(255,255,255,.18)}
  body:has(.cp-qs-intro) > .cp-under{margin-top:36px!important}
}
/* step 2 premium desktop, same pattern as step 1 */
@media(min-width:1000px){
  .quote-page{position:relative;min-height:calc(100vh - 42px);box-sizing:border-box;display:flex;align-items:center;justify-content:center;
    padding:28px 20px!important;
    background:linear-gradient(110deg,rgba(11,35,65,.97) 0%,rgba(11,35,65,.9) 42%,rgba(13,60,78,.72) 100%),url(../images/hero/clearpath-hero.jpg) 70% 82%/cover no-repeat!important}
  .quote-page::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,transparent,rgba(24,212,194,.8),transparent)}
  .quote-page .container{width:100%;align-items:center}
  .quote-page .cpf-logo{display:inline-block;order:-2;margin:0 0 18px}
  .quote-page .cpf-logo img{height:44px;width:auto;display:block}
  .quote-page .page-header h1{color:#fff!important;font-size:clamp(30px,2.8vw,40px)!important}
  .quote-page .page-header p{color:#CFE3EA!important}
  .quote-page .cpf-st:not(.done):not(.active) .cpf-c{background:transparent;border-color:rgba(255,255,255,.35);color:#CBD5E1}
  .quote-page .cpf-l{color:#94A3B8}
  .quote-page .cpf-st.done .cpf-l,.quote-page .cpf-st.active .cpf-l{color:#5EEAD4}
  .quote-page .cpf-line{background:rgba(255,255,255,.18)}
  .quote-page .quote-container{width:100%;max-width:600px;box-sizing:border-box;background:rgba(255,255,255,.97)!important;border:1px solid rgba(24,212,194,.55)!important;border-radius:22px!important;
    box-shadow:0 0 0 1px rgba(24,212,194,.15),0 0 30px rgba(24,212,194,.35),0 30px 60px rgba(0,0,0,.35)!important}
}
@media(min-width:1000px){
  .quote-page .page-header{max-width:none!important;width:100%}
  .quote-page .page-header h1{white-space:nowrap}
}
@media(min-width:1000px) and (max-height:700px){
  .quote-page .cpf-logo{margin-bottom:10px}
  .quote-page .cpf-logo img{height:36px}
  .quote-page .page-header p{display:none}
}
/* step 3 premium desktop: dark hero, logo, price card in two columns so all options fit on one screen */
@media(min-width:1000px){
  #quoteContent{position:relative;z-index:0}
  #quoteContent::before{content:"";position:absolute;left:0;right:0;top:0;height:calc(100vh - 42px);min-height:620px;z-index:-1;
    background:linear-gradient(110deg,rgba(11,35,65,.97) 0%,rgba(11,35,65,.9) 42%,rgba(13,60,78,.72) 100%),url(../images/hero/clearpath-hero.jpg) 70% 82%/cover no-repeat}
  #quoteContent .hero{padding:16px 20px 8px!important;background:none!important}
  #quoteContent .cpf-logo{display:inline-block;margin:0 0 10px}
  #quoteContent .cpf-logo img{height:38px;width:auto;display:block}
  #quoteContent .cpf-steps{margin-bottom:8px}
  #quoteContent .hero h1{color:#fff!important;font-size:clamp(26px,2.4vw,34px)!important;white-space:nowrap;margin:0 auto 4px!important;max-width:none!important}
  #quoteContent .hero h1 br{display:none}
  #quoteContent .hero p{display:none}
  #quoteContent .cpf-st:not(.done):not(.active) .cpf-c{background:transparent;border-color:rgba(255,255,255,.35);color:#CBD5E1}
  #quoteContent .cpf-l{color:#94A3B8}
  #quoteContent .cpf-st.done .cpf-l,#quoteContent .cpf-st.active .cpf-l{color:#5EEAD4}
  #quoteContent .cpf-line{background:rgba(255,255,255,.18)}
  .quote-wrap{max-width:1060px!important;padding-top:0!important}
  .quote-wrap > :not(.price-card){max-width:760px;margin-left:auto!important;margin-right:auto!important}
  #vehicleSummary{margin:0 auto 12px!important;width:max-content;max-width:100%}
  .price-card{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:34px;align-items:start;padding:24px 30px!important;border:1px solid rgba(24,212,194,.55)!important;
    box-shadow:0 0 0 1px rgba(24,212,194,.15),0 0 30px rgba(24,212,194,.3),0 30px 60px rgba(0,0,0,.35)!important;border-radius:24px!important}
  .cpf-pcol,.cpf-paycol{min-width:0}
  .cpf-paycol{border-left:1px solid rgba(255,255,255,.08);padding-left:34px;margin-left:-1px}
  .price-card #priceDisplay{margin:6px 0 4px!important}
  .price-card .klarna-note{margin:4px 0 10px!important}
  .price-card #cpPromo{margin:8px 0 14px!important}
  .price-card #termSelection{margin:16px 0 8px!important}
  .price-card #payOptions{margin-top:0!important}
  .price-card #payOptions .pay-opt{padding-top:10px!important;padding-bottom:10px!important}
  .price-card .quote-cta{margin-top:12px!important}
}
@media(min-width:1000px) and (max-height:760px){
  #quoteContent .cpf-logo{display:none}
  .price-card .quote-cta > :not(#payButton):not(:first-child){display:none}
}
@media(min-width:1000px) and (max-height:760px){
  #quoteContent .hero{padding:8px 20px 4px!important}
  #quoteContent .cpf-steps{margin-bottom:4px}
  #quoteContent .cpf-c{width:26px;height:26px;font-size:12px}
  #quoteContent .cpf-line{margin-top:12px}
  #quoteContent .hero h1{font-size:24px!important;margin-bottom:2px!important}
  #vehicleSummary{margin-bottom:8px!important;padding-top:4px!important;padding-bottom:4px!important}
  .price-card{padding:14px 26px!important}
  .price-card .plan-name{margin-bottom:0!important}
  .price-card #priceDisplay{margin:2px 0!important;font-size:46px!important;line-height:1.05!important}

  .price-card .klarna-note{margin:2px 0 6px!important;padding-top:4px!important;padding-bottom:4px!important}
  .price-card #cpPromo{margin:6px 0 8px!important;padding:10px 12px!important}
  .price-card #termSelection{margin:12px 0 4px!important}
  .price-card #discountBanner{margin-top:6px!important;padding:6px!important}
  .price-card .pay-options-title{margin-bottom:6px!important}
  .price-card #payOptions .pay-opt{padding-top:7px!important;padding-bottom:7px!important;margin-bottom:6px!important}
  .price-card #payOptions .po-detail{font-size:12px!important;line-height:1.3!important}
  .price-card .quote-cta{margin-top:6px!important}
  .price-card #payButton{padding-top:12px!important;padding-bottom:12px!important}
}
/* ===== mobile premium (same pattern as desktop) 04/10/2026 ===== */
@media(max-width:999px){
  /* shared dark-mode pieces */
  .cp-qs-intro h1,.quote-page .page-header h1,#quoteContent .hero h1{color:#fff!important}
  .cp-qs-intro .cpf-st:not(.done):not(.active) .cpf-c,.quote-page .cpf-st:not(.done):not(.active) .cpf-c,#quoteContent .cpf-st:not(.done):not(.active) .cpf-c{background:transparent;border-color:rgba(255,255,255,.35);color:#CBD5E1}
  .cp-qs-intro .cpf-l,.quote-page .cpf-l,#quoteContent .cpf-l{color:#94A3B8}
  .cp-qs-intro .cpf-st.done .cpf-l,.cp-qs-intro .cpf-st.active .cpf-l,.quote-page .cpf-st.done .cpf-l,.quote-page .cpf-st.active .cpf-l,#quoteContent .cpf-st.done .cpf-l,#quoteContent .cpf-st.active .cpf-l{color:#5EEAD4}
  .cp-qs-intro .cpf-line,.quote-page .cpf-line,#quoteContent .cpf-line{background:rgba(255,255,255,.18)}
  

  /* step 1 */
  body:has(.cp-qs-intro){position:relative;z-index:0}
  body:has(.cp-qs-intro)::before{content:"";position:absolute;left:0;right:0;top:0;height:max(100svh,640px);z-index:-1;background:linear-gradient(160deg,rgba(11,35,65,.97) 0%,rgba(11,35,65,.92) 55%,rgba(13,60,78,.8) 100%),url(../images/hero/clearpath-hero.jpg) 72% 85%/cover no-repeat}
  body:has(.cp-qs-intro) .quote-card{background:rgba(255,255,255,.97)!important;border:1px solid rgba(24,212,194,.55)!important;box-shadow:0 0 24px rgba(24,212,194,.35),0 20px 40px rgba(0,0,0,.35)!important}
  body:has(.cp-qs-intro) > .cp-under{margin-top:28px!important}

  /* step 2 */
  .quote-page{background:linear-gradient(160deg,rgba(11,35,65,.97) 0%,rgba(11,35,65,.92) 55%,rgba(13,60,78,.8) 100%),url(../images/hero/clearpath-hero.jpg) 72% 85%/cover no-repeat!important;min-height:calc(100svh - 34px);box-sizing:border-box}
  .quote-page .container{align-items:stretch}
  .quote-page .cpf-logo{order:-2}
  .quote-page .page-header p{color:#CFE3EA!important}
  .quote-page .quote-container{background:rgba(255,255,255,.97)!important;border:1px solid rgba(24,212,194,.55)!important;box-shadow:0 0 24px rgba(24,212,194,.35),0 20px 40px rgba(0,0,0,.35)!important}

  /* step 3: dark top and as much as possible on the first screen */
  #quoteContent{position:relative;z-index:0}
  #quoteContent::before{content:"";position:absolute;left:0;right:0;top:0;height:420px;z-index:-1;background:linear-gradient(160deg,rgba(11,35,65,.97) 0%,rgba(11,35,65,.92) 55%,rgba(13,60,78,.8) 100%),url(../images/hero/clearpath-hero.jpg) 72% 85%/cover no-repeat}
  #quoteContent .hero{background:none!important;padding:8px 14px 2px!important}
  #quoteContent .hero p{display:none}
  #quoteContent .hero h1{font-size:19px!important;margin:0 0 6px!important}
  #quoteContent .cpf-steps{margin-bottom:4px}
  #vehicleSummary{margin:0 auto 8px!important;padding:4px 10px!important;font-size:12px!important;width:max-content;max-width:calc(100% - 20px)}
  .price-card{padding:14px 14px 16px!important;border:1px solid rgba(24,212,194,.55)!important;box-shadow:0 0 24px rgba(24,212,194,.3),0 20px 40px rgba(0,0,0,.35)!important;border-radius:20px!important}
  .price-card .plan-name{font-size:10.5px!important;margin-bottom:0!important}
  .price-card #priceDisplay{margin:2px 0!important;font-size:40px!important;line-height:1.05!important}
  .price-card .klarna-note{display:none!important}
  .price-card #cpPromo{margin:8px 0 8px!important;padding:10px 12px!important}
  .price-card #cpPromo .cp-promo-hint{font-size:12px!important;margin-top:6px!important}
  .price-card #termSelection{margin:14px 0 6px!important}
  .price-card #discountBanner{display:none!important}
  .price-card .pay-options-title{margin:8px 0 6px!important;font-size:10.5px!important}
  .price-card #payOptions .pay-opt{padding-top:8px!important;padding-bottom:8px!important;margin-bottom:6px!important}
  .price-card #payOptions .po-name{font-size:14px!important}
  .price-card #payOptions .po-detail{font-size:11.5px!important;line-height:1.3!important}
  .price-card .quote-cta{margin-top:6px!important}
  .price-card .quote-cta > :not(#payButton):not(:first-child){font-size:11.5px}
}
@media(max-width:999px) and (min-height:700px){
  .cpf-logo{display:block;margin:0 auto 6px;width:max-content}
  .cpf-logo img{height:26px;width:auto;display:block}
}
@media(max-width:999px){
  .price-card #cpPromo .cp-promo-hint,.price-card #cpPromo .cp-promo-msg:empty{display:none!important}
  .price-card #cpPromo .cp-promo-lbl{margin-bottom:6px!important;font-size:12.5px!important}
  .price-card #cpPromo input,.price-card #cpPromo button{height:40px!important;min-height:40px!important}
  .price-card #termSelection .term-btn{padding:14px 4px 8px!important}
  .price-card #payOptions .pay-opt:not(.active) .po-detail{display:none!important}
  .price-card #payOptions .pay-opt:not(.active){padding-top:10px!important;padding-bottom:10px!important}
  .price-card .quote-cta > p,.price-card .quote-cta > small{margin:4px 0!important}
}
@media(max-width:999px) and (max-height:760px){
  #vehicleSummary{display:none!important}
  .price-card #priceDisplay{font-size:36px!important}
  .price-card #cpPromo .cp-promo-lbl{display:none!important}
  .price-card #cpPromo{padding:8px 10px!important}
}
@media(max-width:999px){
  #quoteContent .cpf-logo{display:none!important}
  #quoteContent .hero h1{font-size:17px!important;white-space:nowrap}
  #quoteContent .hero h1 br{display:none}
}
/* step 3 desktop polish */
@media(min-width:1000px){
  #quoteContent .hero{max-width:none!important;width:100%!important;text-align:center!important;box-sizing:border-box}
  #quoteContent .hero h1{display:block;width:100%;text-align:center!important}
  #quoteContent .cpf-steps{margin-left:auto!important;margin-right:auto!important}
  #vehicleSummary{background:rgba(255,255,255,.08)!important;border:1px solid rgba(255,255,255,.2)!important;color:#E6F4F1!important;backdrop-filter:blur(6px)}
  #vehicleSummary *{color:inherit!important}
  #vehicleSummary b,#vehicleSummary strong,#vehicleSummary > :first-child{color:#fff!important}
  .price-card{align-items:stretch!important;max-width:980px;margin-left:auto!important;margin-right:auto!important}
  .cpf-pcol{display:flex;flex-direction:column;justify-content:center;text-align:center}
  .cpf-paycol{display:flex;flex-direction:column;justify-content:center}
  .price-card .quote-cta .assurance{display:none!important}
  .price-card .quote-cta .secure-note{margin-top:8px!important}
  .price-card #termSelection{margin-bottom:0!important}
}
@media(min-width:1000px){
  .cpf-pcol > *{width:100%;box-sizing:border-box}
  .cpf-pcol > .klarna-note{width:auto;align-self:center}
  .cpf-pcol #cpPromo{text-align:left}
  .price-card #termSelection{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important}
  .price-card #termSelection .term-btn{width:auto!important;min-width:0!important;margin:0!important}
}
@media(min-width:1000px){ .cpf-pcol #cpPromo{max-width:none!important;width:100%!important;margin-left:0!important;margin-right:0!important} }
/* step 3: dark plan cards, quieter Klarna line, monthly price under the headline price */
#termSelection .term-btn:not(.active){background:rgba(255,255,255,.06)!important;color:#fff!important;border:1.5px solid rgba(24,212,194,.45)!important}
#termSelection .term-btn:not(.active) *{color:inherit!important}
#termSelection .term-btn:not(.active) .term-price{color:#A7F3EC!important}
#termSelection .term-btn:not(.active):hover{background:rgba(24,212,194,.12)!important}
.price-card .klarna-note{background:none!important;border:0!important;color:#CFE3EA!important;font-weight:500!important;font-size:13px!important;padding:0!important}
.cpf-month{margin:-2px 0 6px;color:#5EEAD4;font-weight:700;font-size:16px;text-shadow:0 0 10px rgba(24,212,194,.45)}
.cpf-month small{color:#CFE3EA;font-weight:500;font-size:12.5px;text-shadow:none}
/* ===== step 3 CLEAN version 04/10/2026: one glow (the Pay button), calmer everything else ===== */
#quoteContent::before{background:linear-gradient(180deg,rgba(9,27,48,.97) 0%,rgba(9,27,48,.94) 60%,rgba(11,40,58,.9) 100%),url(../images/hero/clearpath-hero.jpg) 70% 82%/cover no-repeat!important}
#quoteContent .cpf-st.active .cpf-c{animation:none!important;box-shadow:0 0 8px rgba(24,212,194,.4)!important}
#quoteContent .cpf-st.done .cpf-c{box-shadow:none!important}
#quoteContent .cpf-line.on{box-shadow:none!important}
.price-card{border:1px solid rgba(255,255,255,.1)!important;box-shadow:0 24px 50px rgba(0,0,0,.35)!important;background:#0F1E33!important}
.cpf-paycol{border-left-color:rgba(255,255,255,.07)!important}
.price-card .plan-name{opacity:.85}
.price-card .klarna-note{display:none!important}
.cpf-month{text-shadow:none!important;font-weight:600!important}
/* CP20: a slim line, no glowing box */
#cpPromo.cp-promo{background:rgba(255,255,255,.04)!important;border:1px dashed rgba(94,234,212,.45)!important;box-shadow:none!important;padding:12px 14px!important;border-radius:14px!important}
#cpPromo .cp-promo-chip,#cpPromo #cpPromoApply{box-shadow:none!important}
#cpPromo #cpPromoInput{border-color:rgba(255,255,255,.18)!important;background:rgba(255,255,255,.06)!important}
#cpPromo .cp-promo-hint{opacity:.8;font-size:12.5px!important}
/* plans: flat, selected one solid teal without glow */
#termSelection .term-btn.active{box-shadow:none!important}
#termSelection .term-btn:not(.active){border:1px solid rgba(255,255,255,.14)!important;background:rgba(255,255,255,.04)!important}
#termSelection .term-btn:not(.active):hover{border-color:rgba(94,234,212,.6)!important;box-shadow:none!important}
#termSelection .badge{box-shadow:none!important}
/* payment options: flat, selected = teal outline */
#payOptions .pay-opt{border:1px solid rgba(255,255,255,.12)!important;background:transparent!important;box-shadow:none!important}
#payOptions .pay-opt.active{border:1.5px solid var(--cpf-teal2)!important;background:rgba(24,212,194,.07)!important;box-shadow:none!important}
#payOptions .pay-opt:not(.active) .po-detail{opacity:.7}
#payOptions + p,#payOptions .pay-note{opacity:.6}
/* the only glow: Pay */
#payButton{animation:none!important;box-shadow:0 0 18px rgba(24,212,194,.45),0 8px 22px rgba(20,184,166,.35)!important}
#vehicleSummary{opacity:.9}
/* ===== step 3 LIGHT card like steps 1 and 2 (04/10/2026) ===== */
#quoteContent::before{height:var(--cpf-dark,calc(100vh - 42px))!important;min-height:0!important}
.price-card{background:#fff!important;border:1px solid rgba(24,212,194,.55)!important;box-shadow:0 0 0 1px rgba(24,212,194,.12),0 0 28px rgba(24,212,194,.28),0 26px 54px rgba(0,0,0,.35)!important}
.price-card,.price-card *{color:#0B2341}
.price-card .plan-name{color:#0E9F94!important;opacity:1}
.price-card #priceDisplay,.price-card #priceDisplay *{color:#0B2341!important}
.price-card #priceDisplay small,.price-card #priceDisplay span:last-child{color:#64748B!important}
.cpf-month{color:#0E9F94!important}
.cpf-month small{color:#64748B!important}
.cpf-paycol{border-left:1px solid #E2E8F0!important}
#cpPromo.cp-promo{background:#F0FDFA!important;border:1.5px dashed #14B8A6!important}
#cpPromo .cp-promo-lbl,#cpPromo #cpPromoHead,#cpPromo .cp-promo-hint,#cpPromo .cp-promo-msg,#cpPromo .tick{color:#0F3B3A!important}
#cpPromo b{color:#0E9F94!important}
#cpPromo #cpPromoInput{background:#fff!important;border:1px solid #CBD5E1!important;color:#0B2341!important}
#cpPromo #cpPromoInput::placeholder{color:#94A3B8!important}
#cpPromo .cp-promo-chip,#cpPromo #cpPromoApply{color:#fff!important}
#termSelection .term-btn:not(.active){background:#fff!important;border:1.5px solid #CBD5E1!important}
#termSelection .term-btn:not(.active) .term-name{color:#0B2341!important}
#termSelection .term-btn:not(.active) .term-price{color:#64748B!important}
#termSelection .term-btn:not(.active):hover{border-color:#14B8A6!important;background:#F0FDFA!important}
#termSelection .term-btn.active,#termSelection .term-btn.active *{color:#fff!important}
#termSelection .badge{color:#fff!important}
#discountBanner,#discountBanner *{color:#0F3B3A!important}
#discountBanner{background:#F0FDFA!important;border-color:#99F6E4!important}
.price-card .pay-options-title{color:#475569!important}
#payOptions .pay-opt{background:#fff!important;border:1px solid #E2E8F0!important}
#payOptions .pay-opt .po-name{color:#0B2341!important}
#payOptions .pay-opt .po-detail{color:#475569!important;opacity:1!important}
#payOptions .pay-opt .po-detail b{color:#0E9F94!important}
#payOptions .pay-opt.active{background:#F0FDFA!important;border:1.5px solid #14B8A6!important}
#payOptions .pay-opt [class*=badge],#payOptions .pay-opt .po-tag{color:#fff!important}
.price-card .quote-cta .secure-note,.price-card .quote-cta .secure-note *,#payOptions ~ p,#payOptions p{color:#64748B!important}
#payButton,#payButton *{color:#fff!important}
#payOptions .pay-opt:not(.active)::before{border-color:#94A3B8!important}
#payOptions .pay-opt.active::before{border-color:#14B8A6!important}
.price-card{margin-bottom:76px!important}
/* trust bar identical to the homepage (icons, half star, email) + no white line */
.cpf-right a{display:inline-flex;align-items:center;gap:6px}
.cpf-right svg{flex:0 0 auto;opacity:.9}
.cpf-half{background:linear-gradient(90deg,#51B37F 55%,rgba(81,179,127,.35) 55%);-webkit-background-clip:text;background-clip:text;color:transparent}
@media(max-width:1180px){.cpf-mail{display:none!important}}
@media(max-width:700px){.cpf-right svg{display:none}}
body:has(.cp-qs-intro)::before{top:0!important;height:max(100svh,640px)!important}
@media(min-width:1000px){body:has(.cp-qs-intro)::before{height:100vh!important;min-height:640px}}
/* behind the "You're eligible" pop-up: dark, not grey */
body:has(#quoteContent[style*="none"]){background:linear-gradient(160deg,#0B2341 0%,#0E3247 60%,#0F3B4E 100%)!important;min-height:100vh}
body:has(#quoteContent[style*="none"]) > footer{opacity:0}
/* light card: "14 days to change your mind" readable */
.price-card .quote-cta .assurance{background:#F0FDFA!important;border:1px solid #99F6E4!important}
.price-card .quote-cta .assurance,.price-card .quote-cta .assurance *{color:#334155!important}
.price-card .quote-cta .assurance strong,.price-card .quote-cta .assurance b,.price-card .quote-cta .assurance h3,.price-card .quote-cta .assurance h4,.price-card .quote-cta .assurance > :first-child{color:#0E9F94!important}
@media(max-width:999px){.cpf-paycol{border-left:0!important;padding-left:0!important;margin-left:0!important}}
/* CP20 box: crisper */
#cpPromo.cp-promo{border:2px solid #14B8A6!important;background:#ECFDF8!important}
#cpPromo .cp-promo-lbl,#cpPromo #cpPromoHead{color:#0B2341!important;font-weight:700!important}
#cpPromo #cpPromoInput{color:#0B2341!important;font-weight:800!important;letter-spacing:2px!important;border:1.5px solid #14B8A6!important}
#cpPromo #cpPromoApply{box-shadow:0 0 12px rgba(24,212,194,.45)!important;font-weight:800!important}
#cpPromo .cp-promo-hint{color:#1E293B!important;opacity:1!important}
#cpPromo .cp-promo-hint b{color:#0E9F94!important}
/* CP20 applied: show the message with a clear Remove button */
#cpPromo .cp-promo-msg.show{display:flex!important;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:8px!important;color:#0F5132!important;font-weight:600}
#cpPromo .cp-promo-msg.show button.rm{display:inline-flex!important;align-items:center;gap:4px;width:auto!important;height:auto!important;padding:6px 12px!important;border:1.5px solid #94A3B8!important;border-radius:999px!important;background:#fff!important;color:#334155!important;font-size:12.5px!important;font-weight:700!important;cursor:pointer}
#cpPromo .cp-promo-msg.show button.rm::before{content:"\2715";font-size:11px}
#cpPromo .cp-promo-msg.show button.rm:hover{border-color:#DC2626!important;color:#DC2626!important}