*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  /* Ride Legal Brand Colors (matched to ridelegal.com 2026-09-17) */
  --g1:#0A0A0A;    /* Onyx */
  --g2:#B0FF45;    /* Volt */
  --g3:#C4FF75;    /* Light volt */
  --gl:#F6FFE9;    /* Very light volt */
  --gb:#F9FFF5;    /* Off-white cool */
  --amber:#B0FF45; /* Use brand volt green */
  --amber-d:#9AE830;
  --amber-l:#F3FFE8;
--g2-text:#498000; /* WCAG-AA readable shade of the brand green for text/labels on light backgrounds */
  --blue:#2563EB;--blue-l:#EFF6FF;--blue-b:#BFDBFE;
  --red:#DC2626;--red-l:#FEE2E2;
  --card:#fff;--bg:#F6F6F6;--text:#141414;--muted:#6B7280;--border:#E5E7EB;
  --shadow:0 4px 20px rgba(0,0,0,.09);--r:14px;
}
body{font-family:'Roboto Condensed',system-ui,sans-serif;background:var(--bg);color:var(--text);min-height:100vh}
#app{max-width:680px;margin:0 auto;padding:20px 16px 80px}
.hdr{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.logo{display:flex;align-items:center;gap:8px}
.logo img{height:36px;display:block}
.logo-word{font-family:'Oswald',sans-serif;font-weight:700;font-size:21px;color:var(--g1);letter-spacing:.2px}
.logo-word-accent{color:var(--g2-text)}
.tagline{color:var(--muted);font-size:13px;font-family:'Roboto Condensed',sans-serif}
.prog-wrap{margin-bottom:24px}
.prog-meta{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-bottom:5px}
.prog-track{height:5px;background:var(--gl);border-radius:99px;overflow:hidden}
.prog-fill{height:100%;background:linear-gradient(90deg,var(--g1),var(--g2));border-radius:99px;transition:width .4s ease}
.card{background:var(--card);border-radius:var(--r);padding:28px 24px;box-shadow:var(--shadow);border:1px solid var(--gl);animation:fadeUp .28s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideDown{from{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:translateY(0)}}
.step-tag{font-size:11px;font-weight:700;color:var(--g2-text);text-transform:uppercase;letter-spacing:1.2px;margin-bottom:8px;font-family:'Roboto Condensed',sans-serif}
.question{font-family:'Oswald',sans-serif;font-size:22px;font-weight:600;color:var(--g1);margin-bottom:6px;line-height:1.3;letter-spacing:.3px}
.subtext{font-size:13px;color:var(--muted);margin-bottom:20px;line-height:1.6}
.opts{display:grid;gap:10px}
.opts.two{grid-template-columns:1fr 1fr}
.opt{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;min-height:48px;border:2px solid var(--border);border-radius:10px;background:#fff;cursor:pointer;text-align:left;transition:all .16s;width:100%}
.opt:hover{border-color:var(--g2);background:var(--gb);transform:translateY(-1px);box-shadow:0 4px 12px rgba(27,67,50,.1)}
.opt:active{transform:translateY(0)}
.opt-icon{font-size:22px;flex-shrink:0;margin-top:1px;min-width:26px;text-align:center}
.opt-body{flex:1}
.opt-title{font-weight:600;font-size:14px;color:var(--text);margin-bottom:2px}
.opt-desc{font-size:12px;color:var(--muted);line-height:1.4}
.opt-price{font-family:'Oswald',sans-serif;font-weight:600;color:var(--g2-text);font-size:14px;margin-top:3px;letter-spacing:.3px}
.opt.ext-link{text-decoration:none;display:flex}
/* These options are href links out to the main site, not quiz steps. The
   arrow means a click isn't a surprise. Applies anywhere ext-link is set. */
.opt.ext-link .opt-title::after{content:'\2197';margin-left:5px;font-size:.88em;color:var(--muted);font-weight:400}
.opt.recommended{border-color:var(--amber);background:var(--amber-l)}
.opt.recommended:hover{border-color:var(--amber-d);background:#FEF3C7}
.rec-badge{display:inline-block;background:var(--amber);color:#000;font-size:10px;font-weight:700;padding:2px 7px;border-radius:4px;margin-left:8px;vertical-align:middle;letter-spacing:.3px}
.info-box{border-radius:10px;padding:16px 18px;margin-bottom:20px;font-size:13px;line-height:1.6}
.info-box.green{background:var(--gb);border:1px solid var(--gl);color:var(--g1)}
.info-box.green h3{color:var(--g2-text)}
.info-box.amber{background:var(--amber-l);border:1px solid #FDE68A;color:#78350F}
.info-box.blue{background:var(--blue-l);border:1px solid var(--blue-b);color:#1E3A8A}
.info-box h3{font-size:15px;font-weight:700;margin-bottom:8px}
.info-box ul{padding-left:18px;margin-top:6px}
.info-box ul li{margin-bottom:4px}
.info-box p+p{margin-top:8px}
.qualify-banner{background:linear-gradient(135deg,var(--g1) 0%,#2a2a2a 60%,var(--g2-text) 100%);color:#fff;border-radius:var(--r) var(--r) 0 0;padding:20px 24px;margin:-28px -24px 20px;text-align:center}
.qualify-banner h2{font-family:'Oswald',sans-serif;font-size:20px;font-weight:600;margin-bottom:4px;letter-spacing:.5px}
.qualify-banner p{font-size:13px;opacity:.85}
.back-btn{background:none;border:none;color:var(--muted);font-size:15px;font-weight:600;cursor:pointer;padding:12px 0 0;display:flex;align-items:center;gap:5px;transition:color .15s;font-family:'Roboto Condensed',sans-serif}
.top-back-btn{position:absolute;top:20px;right:20px;background:none;border:none;color:var(--g2-text);font-size:15px;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:4px;transition:color .15s;font-family:'Roboto Condensed',sans-serif;z-index:2}
.top-back-btn:hover{color:var(--amber-d)}
.card{position:relative}
.back-btn:hover{color:var(--g1)}
.dead-icon{font-size:48px;text-align:center;margin-bottom:12px}
.dead-title{font-size:18px;font-weight:700;color:var(--text);text-align:center;margin-bottom:10px}
.dead-body{font-size:14px;color:var(--muted);text-align:center;line-height:1.6;margin-bottom:24px}
/* Class rules like .btn-primary set `display`, which beats the UA
   stylesheet's [hidden]{display:none}. Make the attribute win. */
[hidden]{display:none!important}
.btn-primary{display:inline-flex;align-items:center;gap:6px;background:var(--g1);color:#fff;padding:11px 24px;border-radius:7px;font-family:'Roboto Condensed',sans-serif;font-weight:700;font-size:14px;text-decoration:none;border:none;cursor:pointer;transition:background .15s;letter-spacing:.3px}
.btn-primary:hover{background:#2a2a2a}
.center{text-align:center}
/* Results */
.results-hdr{background:linear-gradient(135deg,var(--g1) 0%,#2a2a2a 60%,var(--g2-text) 100%);color:#fff;border-radius:var(--r) var(--r) 0 0;padding:22px 24px 18px;margin:-28px -24px 20px}
.results-hdr h2{font-family:'Oswald',sans-serif;font-size:20px;font-weight:600;margin-bottom:4px;letter-spacing:.5px}
.results-hdr p{font-size:13px;opacity:.85}
.product-main{border:2px solid var(--g1);border-radius:10px;padding:18px;margin-bottom:14px;position:relative}
.product-badge{position:absolute;top:-11px;left:14px;background:var(--g2);color:#000;font-family:'Roboto Condensed',sans-serif;font-size:10px;font-weight:700;padding:3px 12px;border-radius:4px;letter-spacing:.8px;text-transform:uppercase}
.product-name{font-family:'Oswald',sans-serif;font-size:17px;font-weight:600;color:var(--g1);margin-bottom:5px;letter-spacing:.3px}
.product-desc{font-size:13px;color:var(--muted);line-height:1.5;margin-bottom:12px}
.product-price{font-family:'Oswald',sans-serif;font-size:26px;font-weight:600;color:var(--g1)}
.product-row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.variants-box{background:var(--amber-l);border:1px solid #FDE68A;border-radius:8px;padding:12px 14px;margin-bottom:14px;font-size:13px;color:#78350F}
.variants-box strong{display:block;margin-bottom:4px;font-size:12px;text-transform:uppercase;letter-spacing:.6px}
.variant-pill{display:inline-block;background:#fff;border:1px solid #FDE68A;border-radius:5px;padding:2px 9px;font-size:12px;font-weight:600;margin:2px 3px 2px 0}
.opts-section-hdr{font-family:'Oswald',sans-serif;font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:1.4px;color:var(--g2-text);margin:14px 0 6px 2px;padding-bottom:5px;border-bottom:2px solid var(--gl)}
.opts-section-hdr.first{margin-top:4px}
.addons-lbl{font-family:'Roboto Condensed',sans-serif;font-size:12px;font-weight:700;color:var(--g1);text-transform:uppercase;letter-spacing:1px;margin:18px 0 8px}
.addon-row{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border:1px solid var(--border);border-radius:8px;margin-bottom:8px;gap:10px}
.addon-info{flex:1}
.addon-name{font-weight:600;font-size:13px;margin-bottom:2px}
.addon-desc{font-size:12px;color:var(--muted)}
.btn-addon{background:var(--amber);color:#000;padding:7px 14px;border-radius:7px;font-weight:700;font-size:12px;text-decoration:none;white-space:nowrap;transition:background .15s}
.btn-addon:hover{background:var(--amber-d)}
/* Cart "Remove" — brand volt green (--g2-text is the AA-readable shade used
   for prices and labels elsewhere), not red. Red stays reserved for genuine
   error states (.vin-err); removing a cart line is not an error. */
.btn-remove{background:#fff;border:1.5px solid var(--g2-text);color:var(--g2-text);padding:6px 12px;border-radius:7px;font-weight:700;font-size:12px;cursor:pointer;white-space:nowrap;transition:all .15s}
.btn-remove:hover{background:var(--gl);border-color:var(--g1);color:var(--g1)}
.btn-checkout{display:block;text-align:center;background:var(--g2);color:#000;padding:15px 24px;border-radius:7px;font-family:'Oswald',sans-serif;font-weight:600;font-size:18px;text-decoration:none;margin-bottom:12px;transition:background .15s;letter-spacing:.8px;text-transform:uppercase}
.btn-checkout:hover{background:var(--amber-d)}
.range-btn{padding:7px 14px;min-height:44px;border:1.5px solid var(--border);border-radius:22px;background:#fff;font-size:12px;font-weight:700;font-family:'Roboto Condensed',sans-serif;color:var(--text);cursor:pointer;transition:all .15s}
.range-btn:hover{border-color:var(--g2);color:var(--g2-text)}
.range-btn.active{background:var(--g2);color:#000;border-color:var(--g2)}
.cart{background:#F9FAFB;border-radius:10px;padding:14px 16px;margin-top:18px}
.cart-lbl{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.8px;margin-bottom:8px}
.cart-row{display:flex;justify-content:space-between;font-size:13px;margin-bottom:5px}
.cart-total{display:flex;justify-content:space-between;font-family:'Oswald',sans-serif;font-size:18px;font-weight:600;color:var(--g1);border-top:2px solid var(--g2);padding-top:10px;margin-top:8px;letter-spacing:.3px}
.chat-trigger{width:100%;margin-top:16px;padding:12px;background:var(--blue-l);border:1.5px solid var(--blue-b);border-radius:9px;color:var(--blue);font-size:13px;font-weight:600;cursor:pointer;text-align:center;transition:background .15s}
.chat-trigger:hover{background:#DBEAFE}
.restart{text-align:center;margin-top:14px;font-size:12px;color:var(--muted)}
.restart a{display:inline-block;padding:14px 10px;color:var(--g2-text);text-decoration:none}
.restart a:hover{text-decoration:underline}
/* Floating chat button */
.chat-fab{position:fixed;bottom:58px;right:20px;background:var(--g1);color:#fff;border:none;border-radius:50px;padding:11px 18px 11px 14px;font-family:'Roboto Condensed',sans-serif;font-weight:700;font-size:13px;cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,.25);display:flex;align-items:center;gap:7px;z-index:810;transition:background .15s,transform .15s,bottom .2s;letter-spacing:.3px}
.chat-fab:hover{background:#2a2a2a;transform:translateY(-2px)}
.chat-fab .fab-dot{width:8px;height:8px;background:var(--g2);border-radius:50%;flex-shrink:0}
/* Lift the chat bubble clear of the sticky checkout bar. The old fixed 90px
   was sized for the DESKTOP bar (~70px); on a phone the bar wraps to two rows
   (measured 134px at 375px wide) and the bubble sat on top of the running
   total. --sticky-h is measured at runtime by syncStickyHeight() in app.js, so
   this tracks whichever of the three bar layouts is active. */
body.has-sticky-checkout .chat-fab{bottom:calc(var(--sticky-h, 90px) + 12px)}
/* FAQ Chat */
.overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:900}
.overlay.open{display:block}
.chat{position:fixed;top:0;right:-420px;width:400px;max-width:100vw;height:100vh;background:#fff;z-index:1000;display:flex;flex-direction:column;transition:right .35s cubic-bezier(.4,0,.2,1);box-shadow:-4px 0 32px rgba(0,0,0,.15)}
.chat.open{right:0}
.chat-hdr{background:var(--g1);color:#fff;padding:18px 20px;display:flex;justify-content:space-between;align-items:center;flex-shrink:0;border-bottom:3px solid var(--g2)}
.chat-hdr h3{font-size:15px;margin-bottom:3px}
.chat-hdr p{font-size:12px;opacity:.8}
.chat-x{background:rgba(255,255,255,.15);border:none;color:#fff;width:30px;height:30px;border-radius:50%;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.chat-x:hover{background:rgba(255,255,255,.25)}
.chat-body{padding:14px;overflow-y:auto;flex:1}
.chat-body h4{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.8px;margin-bottom:8px}
.faq-q{display:block;width:100%;text-align:left;padding:10px 13px;margin-bottom:6px;border:1px solid var(--border);border-radius:7px;background:#fff;font-size:13px;color:var(--text);cursor:pointer;transition:all .15s}
.faq-q:hover{border-color:var(--g2);background:var(--gb);color:var(--g1)}
.faq-q.on{border-color:var(--g2);background:var(--amber-l)}
.faq-ans{margin-top:10px;padding:12px 14px;background:var(--gb);border-left:3px solid var(--g2);border-radius:0 7px 7px 0;font-size:13px;line-height:1.6;display:none}
.faq-ans.show{display:block}
.chat-cta{margin:8px 14px 14px;padding:18px 16px;background:var(--amber-l);border-radius:8px;font-size:15px;color:#78350F;text-align:center;line-height:1.7}
/* ── Mini license plate icons ── */
.plate-mini{width:72px;height:36px;border-radius:4px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:2px solid #ccc;flex-shrink:0;line-height:1;overflow:hidden}
.plate-mini.pm-black{background:#111;border-color:#555}
.pm-black .pm-state{color:#fff;font-size:6px;letter-spacing:2px;font-family:'Oswald',sans-serif;text-transform:uppercase;margin-bottom:1px}
.pm-black .pm-text{color:#fff;font-size:13px;font-weight:900;font-family:'Oswald',sans-serif;letter-spacing:1px}
.plate-mini.pm-sky{background:linear-gradient(180deg,#bedcf5 0%,#ddeefa 50%,#f0f7fd 100%);border-color:#b0cce0}
.pm-sky .pm-state{color:#1a5fad;font-size:7px;letter-spacing:2px;font-family:'Oswald',sans-serif;font-weight:700;margin-bottom:1px}
.pm-sky .pm-text{color:#111;font-size:12px;font-weight:900;font-family:'Oswald',sans-serif;letter-spacing:1px}
.plate-mini.pm-temp{background:#fff;border:2px solid #333;border-radius:2px}
.pm-temp .pm-label{color:#333;font-size:6px;letter-spacing:.5px;font-weight:700;font-family:'Roboto Condensed',sans-serif;text-transform:uppercase}
.pm-temp .pm-num{color:#111;font-size:11px;font-weight:900;font-family:'Oswald',sans-serif;letter-spacing:1px}
.pm-temp .pm-sub{color:#666;font-size:5px;font-weight:700;font-family:'Roboto Condensed',sans-serif;text-transform:uppercase;letter-spacing:.5px}
.opt-icon .plate-mini{margin:0 auto}
.plate-opt-img{width:88px;height:52px;object-fit:cover;border-radius:6px;border:1px solid var(--border);display:block}
.year-select,.state-select{width:100%;padding:13px 16px;border:2px solid var(--border);border-radius:10px;font-size:15px;font-family:'Roboto Condensed',sans-serif;font-weight:600;color:var(--text);background:#fff;cursor:pointer;outline:none;transition:border .15s;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B7280' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;margin-bottom:14px}
.year-select:focus,.state-select:focus{border-color:var(--g2)}
.year-select option,.state-select option{font-weight:400}
.value-wrap{position:relative;margin-bottom:14px}
.value-prefix{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:18px;font-weight:700;color:var(--muted);pointer-events:none}
.value-input{width:100%;padding:13px 16px 13px 30px;border:2px solid var(--border);border-radius:10px;font-size:18px;font-family:'Oswald',sans-serif;font-weight:600;color:var(--text);outline:none;transition:border .15s}
.value-input:focus{border-color:var(--g2)}
.value-input::placeholder{color:#ccc;font-weight:400}
.input-lbl{font-size:12px;font-weight:700;color:var(--text);text-transform:uppercase;letter-spacing:.8px;margin-bottom:6px;display:block}
/* Savings box */
.savings-box{border-radius:10px;padding:18px 20px;margin-bottom:14px;background:linear-gradient(135deg,#1a4a1a 0%,#1e5c1e 100%);color:#fff}
.savings-box .sb-head{font-family:'Oswald',sans-serif;font-size:13px;font-weight:600;letter-spacing:1px;text-transform:uppercase;opacity:.8;margin-bottom:12px}
.savings-row{display:flex;justify-content:space-between;font-size:13px;margin-bottom:6px;opacity:.9}
.savings-row.strong{font-weight:700;opacity:1}
.savings-divider{border:none;border-top:1px solid rgba(255,255,255,.25);margin:10px 0}
.savings-total{display:flex;justify-content:space-between;align-items:baseline}
.savings-total .amt{font-family:'Oswald',sans-serif;font-size:28px;font-weight:600;color:#7fff7f}
.savings-multiplier{font-size:12px;background:rgba(255,255,255,.15);border-radius:4px;padding:3px 8px;margin-top:6px;display:inline-block}
.benefits-box{background:var(--gb);border:1px solid var(--gl);border-radius:10px;padding:16px 18px;margin-bottom:14px}
.benefits-box .bb-head{font-size:12px;font-weight:700;color:var(--g2-text);text-transform:uppercase;letter-spacing:.8px;margin-bottom:10px}
.benefits-box li{font-size:13px;color:var(--text);margin-bottom:6px;padding-left:4px;list-style:none}
.benefits-box li::before{content:'✅ ';}
/* ── VIP Package card ── */
.vip-card{background:linear-gradient(135deg,#1a1206 0%,#2d1f08 100%);border:2px solid #c9962a;border-radius:10px;padding:20px;margin-bottom:16px;position:relative;overflow:hidden}
.vip-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#c9962a,#f5c842,#c9962a)}
.vip-badge{display:inline-flex;align-items:center;gap:5px;background:#c9962a;color:#1a1206;font-family:'Oswald',sans-serif;font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:1.2px;padding:3px 10px;border-radius:4px;margin-bottom:10px}
.vip-title{font-family:'Oswald',sans-serif;font-weight:700;font-size:20px;color:#f5c842;margin-bottom:4px}
.vip-subtitle{font-size:13px;color:rgba(255,255,255,.75);margin-bottom:12px}
.vip-features{list-style:none;padding:0;margin:0 0 14px;display:flex;flex-direction:column;gap:5px}
.vip-features li{font-size:13px;color:rgba(255,255,255,.9);display:flex;align-items:flex-start;gap:7px}
.vip-features li::before{content:'✓';color:#f5c842;font-weight:700;flex-shrink:0}
.vip-price-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.vip-price{font-family:'Oswald',sans-serif;font-weight:700;font-size:26px;color:#fff}
.vip-price-note{font-size:11px;color:rgba(255,255,255,.55);margin-top:2px}
.btn-vip{display:block;width:100%;padding:14px;background:linear-gradient(90deg,#c9962a,#f5c842);border:none;border-radius:7px;font-family:'Oswald',sans-serif;font-weight:700;font-size:16px;letter-spacing:.5px;color:#1a1206;cursor:pointer;text-decoration:none;text-align:center;transition:opacity .15s;box-sizing:border-box}
.btn-vip:hover{opacity:.88}
.vip-or{text-align:center;font-size:12px;color:rgba(255,255,255,.35);margin-top:12px;letter-spacing:.3px}
.plate-std{width:88px;height:52px;border-radius:5px;border:2px solid #999;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:space-between;background:#f5f5f0;padding-bottom:3px;flex-shrink:0}
.plate-std-sky{background:linear-gradient(180deg,#5aade0 0%,#a8d4ef 60%,#ddeefa 100%);width:100%;text-align:center;color:#fff;font-family:'Oswald',sans-serif;font-weight:700;font-size:10px;letter-spacing:2px;padding:3px 0 2px;text-shadow:0 1px 2px rgba(0,0,0,.3)}
.plate-std-num{font-family:'Oswald',sans-serif;font-weight:700;font-size:14px;color:#111;letter-spacing:1px;line-height:1}
.plate-std-sub{font-size:6px;font-weight:700;color:#555;letter-spacing:.8px;text-transform:uppercase;font-family:'Roboto Condensed',sans-serif}

/* Trust bar */
.trust-bar{display:flex;align-items:center;justify-content:center;gap:8px;background:#fff;border:1px solid var(--gl);border-radius:8px;padding:9px 16px;margin-bottom:16px;font-size:13px;flex-wrap:wrap;text-align:center}
.trust-stars{color:var(--g2-text);font-size:15px;letter-spacing:1px;flex-shrink:0}
.trust-text{font-weight:700;color:var(--g1)}
.trust-reviews{font-size:12px;color:var(--muted)}

/* Lead capture modal */
.lead-modal-wrap{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1100;align-items:flex-end;justify-content:center;padding:0}
.lead-modal-wrap.open{display:flex}
@media(min-width:500px){.lead-modal-wrap{align-items:center}}
.lead-modal{background:#fff;border-radius:16px 16px 0 0;padding:28px 24px 32px;max-width:460px;width:100%;position:relative;animation:slideUp .3s ease}
@media(min-width:500px){.lead-modal{border-radius:16px}}
@keyframes slideUp{from{transform:translateY(40px);opacity:0}to{transform:translateY(0);opacity:1}}
.lead-modal-x{position:absolute;top:14px;right:16px;background:none;border:none;font-size:20px;color:var(--muted);cursor:pointer;line-height:1;padding:4px}
.lead-modal-x:hover{color:var(--text)}
.lead-modal-ghl{padding:0;overflow:hidden;max-width:500px}
.lead-modal h3{font-family:'Oswald',sans-serif;font-size:20px;font-weight:600;color:var(--g1);margin-bottom:6px;padding-right:24px}
.lead-modal p{font-size:13px;color:var(--muted);margin-bottom:18px;line-height:1.5}
.lead-modal .lm-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
.lead-modal input{width:100%;padding:10px 12px;border:1.5px solid var(--border);border-radius:7px;font-size:14px;font-family:'Roboto Condensed',sans-serif;outline:none;transition:border .15s}
.lead-modal input:focus{border-color:var(--g2)}
.lead-modal .lm-submit{display:block;width:100%;margin-top:4px;padding:13px;background:var(--g2);color:#000;border:none;border-radius:7px;font-family:'Oswald',sans-serif;font-weight:600;font-size:17px;letter-spacing:.5px;cursor:pointer;transition:background .15s}
.lead-modal .lm-submit:hover{background:var(--amber-d)}
.lead-modal .lm-skip{display:block;text-align:center;margin-top:10px;font-size:12px;color:var(--muted);cursor:pointer;text-decoration:underline}
.lead-modal .lm-skip:hover{color:var(--text)}
@media(max-width:580px){
  .opts.two{grid-template-columns:1fr}
  .card{padding:22px 18px}
  .question{font-size:19px;line-height:1.3}
  .subtext{font-size:14px}
  .product-row{flex-direction:column}
  .chat{width:100vw;right:-100vw}
  /* Header / tagline */
  .tagline{font-size:14px}
  .trust-text{font-size:14px}
  .trust-reviews{font-size:13px}
  /* Quiz options,bump for thumb-readability */
  .opt-title{font-size:15px}
  .opt-desc{font-size:14px;line-height:1.45}
  .opt-price{font-size:15px}
  /* Results header */
  .results-hdr{padding:22px 20px 18px}
  .results-hdr h2{font-size:22px;line-height:1.25}
  .results-hdr p{font-size:14px}
  /* Main product card */
  .product-main{padding:20px 16px}
  .product-name{font-size:19px;line-height:1.3}
  .product-desc{font-size:14px;line-height:1.55}
  .product-price{font-size:28px}
  .product-badge{font-size:11px;padding:3px 11px}
  /* Add-ons stack vertically and text gets larger */
  .addons-lbl{font-size:13px}
  .addon-row{flex-direction:column;align-items:flex-start;gap:10px;padding:14px 16px}
  .addon-info{width:100%}
  .addon-name{font-size:15px;line-height:1.35}
  .addon-desc{font-size:14px;line-height:1.5}
  .btn-remove{white-space:normal;width:100%;text-align:center;padding:10px 12px;font-size:13px}
  .btn-addon{padding:10px 16px;font-size:13px}
  /* Cart / Order Summary,total must dominate, not shrink */
  .cart{padding:16px 16px}
  .cart-lbl{font-size:12px}
  .cart-row{font-size:15px;margin-bottom:7px}
  .cart-total{font-size:20px;padding-top:12px;margin-top:10px}
  /* Savings box */
  .savings-box{padding:18px 18px}
  .savings-row{font-size:15px}
  .savings-total .amt{font-size:30px}
  /* Benefits box */
  .benefits-box{padding:16px 18px}
  .benefits-box .bb-head{font-size:13px}
  .benefits-box li{font-size:15px;line-height:1.5;margin-bottom:8px}
  /* VIP card */
  .vip-card{padding:20px 18px}
  .vip-title{font-size:21px;line-height:1.25}
  .vip-subtitle{font-size:14px;line-height:1.45}
  .vip-features li{font-size:15px;line-height:1.5}
  .vip-price{font-size:28px}
  .vip-price-note{font-size:12px}
  .btn-vip{padding:15px;font-size:17px}
  /* Primary CTAs */
  .btn-checkout{padding:16px 20px;font-size:19px}
  .btn-primary{padding:13px 22px;font-size:15px}
  /* Variants box on results */
  .variants-box{font-size:14px;padding:13px 14px}
  .variant-pill{font-size:13px;padding:3px 10px}
  /* Inputs that should never trigger iOS zoom (>=16px) */
  .lead-modal input{font-size:16px;padding:12px 13px}
  .lead-modal h3{font-size:21px}
  .lead-modal p{font-size:14px}
  /* (Sticky-checkout mobile rules live at the end of the file,see bottom,so they win source-order against the base #sticky-checkout block defined later in this stylesheet.) */
  /* FAQ chat */
  .faq-q{font-size:14px;padding:12px 14px}
  .chat-cta{font-size:15px}
  /* Misc small-text bumps */
  .step-tag{font-size:12px}
  .restart{font-size:13px}
}
/* (sticky-checkout mobile overrides live at the end of this file so they win source-order) */
/* Sticky checkout bar */
#sticky-checkout{display:none;position:fixed;bottom:0;left:0;right:0;z-index:800;background:#1a3d2b;border-top:3px solid var(--g2);padding:12px 16px;box-shadow:0 -4px 20px rgba(0,0,0,.25)}
#sticky-checkout .sc-inner{max-width:680px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px}
#sticky-checkout .sc-total{color:#fff;font-family:'Roboto Condensed',sans-serif}
#sticky-checkout .sc-total-label{font-size:11px;opacity:.7;text-transform:uppercase;letter-spacing:.06em}
/* Bright volt, NOT --g2-text: this bar is dark (#1a3d2b) and --g2-text
   (#498000) is the shade for LIGHT backgrounds — it scored 2.50:1 here
   (fails WCAG AA) and read as green-on-green. --g2 scores 9.87:1 and
   matches the GET MY PLATES button. */
#sticky-checkout .sc-total-amt{font-size:20px;font-weight:900;color:var(--g2)}
#sticky-checkout .sc-btn{display:inline-block;background:var(--g2);color:#000;padding:12px 22px;border-radius:7px;font-family:'Oswald',sans-serif;font-weight:600;font-size:16px;text-decoration:none;white-space:nowrap;letter-spacing:.8px;text-transform:uppercase;transition:background .15s;flex-shrink:0}
#sticky-checkout .sc-btn:hover{background:var(--amber-d)}
#sticky-checkout .sc-btn-add{display:inline-block;background:transparent;color:#fff;padding:11px 18px;border-radius:7px;font-family:'Oswald',sans-serif;font-weight:600;font-size:15px;text-decoration:none;white-space:nowrap;letter-spacing:.6px;text-transform:uppercase;transition:background .15s,border-color .15s;flex-shrink:0;border:2px solid rgba(255,255,255,.55);cursor:pointer;position:relative}
#sticky-checkout .sc-btn-add:hover{background:rgba(255,255,255,.12);border-color:#fff}
.sc-add-pulse{position:absolute;top:-5px;right:-5px;width:11px;height:11px;background:var(--g2);border-radius:50%;box-shadow:0 0 0 0 rgba(176,255,69,.5);animation:addPulse 2s ease-in-out infinite;pointer-events:none}
@keyframes addPulse{0%{box-shadow:0 0 0 0 rgba(176,255,69,.6)}70%{box-shadow:0 0 0 8px rgba(176,255,69,0)}100%{box-shadow:0 0 0 0 rgba(176,255,69,0)}}
/* Push page content up so sticky bar doesn't cover the results checkout button */
body.has-sticky-checkout #app{padding-bottom:calc(var(--sticky-h, 100px) + 28px)}
/* Contact bar */
#contact-bar{position:fixed;bottom:0;left:0;right:0;z-index:790;background:var(--g1);padding:12px 16px;text-align:center}
#contact-bar .contact-bar-link{color:#fff;text-decoration:none;font-family:'Oswald',sans-serif;font-weight:600;font-size:16px;letter-spacing:.5px;display:block}
#contact-bar .contact-bar-link:hover{color:var(--g2-text)}
body:not(.has-sticky-checkout) #app{padding-bottom:60px}
body.has-sticky-checkout #contact-bar{display:none}

/* ── Expandable option cards with inline sub-choices ── */
.opt-has-subs{cursor:pointer;user-select:none;flex-wrap:wrap;align-items:flex-start}
.opt-has-subs.expanded{border-color:var(--g2);background:var(--gb)}
.sub-chevron{font-size:16px;color:var(--muted);transition:transform .2s;flex-shrink:0;margin-top:3px;line-height:1}
.opt-has-subs.expanded .sub-chevron{transform:rotate(180deg);color:var(--g2-text)}
.sub-opts{display:none;gap:8px;margin-top:10px;width:100%}
.opt-has-subs.expanded .sub-opts{display:flex}
.sub-opts-grouped{flex-direction:column;gap:0}
.sub-group{margin-bottom:10px}
.sub-group:last-child{margin-bottom:0}
.sub-group-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);margin-bottom:6px;padding-bottom:5px;border-bottom:1px solid var(--border)}
.sub-group-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.sub-reveal-group{display:none;margin-top:8px}
.sub-reveal-group.sub-reveal-visible{display:block}
.sub-opt-reveals.sub-opt-selected{border-color:var(--g2)!important;background:var(--amber-l)!important;color:var(--g2-text)!important}
.sub-opt-btn{flex:1;min-width:100px;padding:9px 12px;border:1.5px solid var(--border);border-radius:8px;background:#fff;font-family:'Roboto Condensed',sans-serif;font-size:13px;font-weight:600;color:var(--text);cursor:pointer;text-align:left;transition:all .15s;display:flex;flex-direction:column;gap:3px;line-height:1.3}
.sub-opt-btn:hover{border-color:var(--g2);background:var(--amber-l);color:var(--g2-text)}
.sub-opt-btn:active{transform:scale(.98)}
.sub-opt-desc{font-size:11px;font-weight:400;color:var(--muted);margin-top:1px;line-height:1.4;display:block}
.sub-opt-btn:hover .sub-opt-desc{color:var(--g2-text)}
@media(max-width:580px){
  .sub-opts{flex-direction:column}
  .sub-group-btns{flex-direction:column}
  .sub-opt-btn{font-size:14px;padding:11px 14px}
  .sub-opt-desc{font-size:12px}
}

/* ==========================================================================
   Results page: objection accordion, guarantee badge, cost-of-inaction
   ========================================================================== */
.objection-accordion{margin:16px 0;border:1.5px solid var(--border);border-radius:10px;overflow:hidden}
.obj-item{border-bottom:1.5px solid var(--border)}
.obj-item:last-child{border-bottom:none}
.obj-toggle{width:100%;background:none;border:none;padding:14px 16px;text-align:left;display:flex;align-items:center;justify-content:space-between;cursor:pointer;font-family:'Roboto Condensed',sans-serif;font-size:14px;font-weight:700;color:var(--text);transition:background .15s}
.obj-toggle:hover{background:var(--gb)}
.obj-chevron{font-size:14px;transition:transform .22s;flex-shrink:0;margin-left:10px;color:var(--g2-text)}
.obj-toggle.open .obj-chevron{transform:rotate(180deg)}
.obj-body{display:none;padding:0 16px 14px;font-size:13px;color:#444;line-height:1.65}
.obj-body.open{display:block}
.guarantee-badge{display:flex;align-items:center;justify-content:center;gap:8px;padding:11px 14px;margin:14px 0 12px;background:#f0faf4;border:1.5px solid #7ecf9e;border-radius:8px;font-size:13px;font-weight:700;color:#1a4a2e;font-family:'Roboto Condensed',sans-serif;letter-spacing:.2px}
.inaction-line{text-align:center;padding:8px 14px;margin:8px 0 4px;background:#fff8e1;border:1px solid #f5c518;border-radius:7px;font-size:13px;color:#7a4f00;font-family:'Roboto Condensed',sans-serif;line-height:1.5}

/* ==========================================================================
   Mobile-only sticky-checkout overrides,placed at the end of the file so
   they win source-order against the base #sticky-checkout block above
   (same specificity; later rules win).
   ========================================================================== */
@media(max-width:580px){
  #sticky-checkout{padding:10px 14px}
  #sticky-checkout .sc-inner{flex-wrap:wrap;gap:10px}
  #sticky-checkout .sc-total-amt{font-size:22px}
  #sticky-checkout .sc-total-label{font-size:11px}
  #sticky-checkout .sc-btn{padding:12px 18px;font-size:15px}
  #sticky-checkout .sc-btn-add{padding:11px 14px;font-size:14px}
  /* Push more page content up to clear the (potentially taller) sticky bar */
  body.has-sticky-checkout #app{padding-bottom:calc(var(--sticky-h, 120px) + 32px)}
}
/* Very narrow phones (≤380px),stack the sticky bar so total + buttons each get their own line */
@media(max-width:380px){
  #sticky-checkout .sc-inner{flex-direction:column;align-items:stretch}
  #sticky-checkout .sc-total{display:flex;justify-content:space-between;align-items:baseline}
  #sticky-checkout .sc-btn,#sticky-checkout .sc-btn-add{flex:1;text-align:center}
  #sticky-checkout .sc-inner > div:last-child{display:flex;width:100%}
  body.has-sticky-checkout #app{padding-bottom:calc(var(--sticky-h, 160px) + 36px)}
}

/* ═══ VIN document upload + examples gallery ═══ */
.vin-field{margin-bottom:14px}
.vin-field>label{display:block;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);margin-bottom:6px}
.vin-field input{width:100%;padding:13px 14px;border:2px solid var(--border);border-radius:8px;font-size:15px;font-family:'Roboto Condensed',sans-serif;color:var(--g1)}
.vin-field input:focus{outline:none;border-color:var(--g2)}
.vin-help{font-size:12px;color:var(--muted);margin-top:6px;line-height:1.5}
.vin-drop{border:2px dashed var(--g3);border-radius:12px;background:var(--gb);padding:24px 16px;text-align:center;cursor:pointer;transition:all .15s}
.vin-drop{display:block}
.vin-drop:hover,.vin-drop:focus,.vin-drop:focus-within,.vin-drop.drag{background:var(--amber-l);border-color:var(--g2);outline:none}
/* Rendered but invisible. Must NOT be display:none / [hidden]: iOS Safari will
   not open a file picker for an input it has not laid out. */
/* Both selectors on purpose: `.vin-field input{width:100%}` (0,1,1) beats a
   bare `.vin-file-input` (0,1,0), which left this "hidden" input 341px wide
   and absolutely positioned - the document went to 528px on a 375px phone
   and iOS Safari shrank the whole page to fit. */
.vin-file-input,.vin-field input.vin-file-input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.vin-di{font-size:28px;line-height:1}
.vin-dt{font-weight:700;margin-top:6px;color:var(--g1);font-size:14.5px}
.vin-ds{font-size:12px;color:var(--muted);margin-top:3px}
.vin-filelist{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
.vin-filelist li{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--border);border-radius:8px;font-size:13px;background:#fff}
.vin-fn{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
.vin-fs{color:var(--muted);font-size:12px;flex-shrink:0}
.vin-rm{background:none;border:none;color:var(--red);cursor:pointer;font-size:18px;line-height:1;font-family:inherit;padding:0 2px}
.vin-err{display:none;background:var(--red-l);color:#991B1B;border:1px solid #FCA5A5;border-radius:8px;padding:11px 13px;font-size:13px;margin:6px 0 12px;font-weight:700}
.vin-err.show{display:block}
.vin-checklist{list-style:none;margin:6px 0 0;padding:0}
.vin-checklist li{padding:7px 0;font-size:13.5px;border-bottom:1px solid rgba(0,0,0,.06)}
.vin-checklist li:last-child{border-bottom:none}
.vin-checklist span{color:var(--muted);font-size:12.5px}
.vin-ex-head{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;opacity:.75;margin-bottom:8px}
.vin-ex-sub{font-size:12.5px;color:var(--muted);line-height:1.5;margin:-2px 0 10px}
.vin-form-ex{display:block;width:100%;border:1.5px solid var(--gl);border-radius:10px;overflow:hidden;background:#fff;cursor:zoom-in;padding:0;font-family:inherit;transition:all .15s}
.vin-form-ex:hover{border-color:var(--g2);box-shadow:0 6px 16px rgba(176,255,69,.14)}
.vin-form-ex img{display:block;width:100%;height:auto}
.vin-cap{display:flex;align-items:center;gap:8px;justify-content:center;padding:9px 12px;font-size:12.5px;font-weight:700;color:var(--g1);border-top:1px solid var(--gl);background:var(--gb)}
.vin-zo{margin-left:auto;color:var(--muted);font-size:11px;font-weight:400}
.vin-cred-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:4px}
.vin-cred{display:flex;flex-direction:column;border:1.5px solid var(--border);border-radius:10px;overflow:hidden;background:#fff;cursor:zoom-in;padding:0;font-family:inherit;text-align:left;transition:all .15s}
.vin-cred:hover{border-color:var(--g2);box-shadow:0 6px 16px rgba(176,255,69,.14)}
.vin-cred-thumb{height:110px;display:flex;align-items:center;justify-content:center;overflow:hidden;border-bottom:1px solid var(--border);background:#fff}
.vin-cred-thumb img{width:100%;height:100%;object-fit:cover;object-position:top}
.vin-cred-meta{padding:8px 10px 10px}
.vin-badge{display:inline-block;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:2px 7px;border-radius:20px;margin-bottom:5px}
.vin-badge.cop{background:var(--blue-l);color:#1E3A8A;border:1px solid var(--blue-b)}
.vin-badge.ver{background:var(--amber-l);color:#7c2d12;border:1px solid #FDE68A}
.vin-badge.doc{background:#ECFDF5;color:#065F46;border:1px solid #A7F3D0}
/* Required-photo examples: the number sits mid-frame, so centre the crop */
.vin-cred.photo-ex .vin-cred-thumb img{object-position:center}
.vin-cred-nm{display:block;font-size:12.5px;font-weight:700;color:var(--g1);line-height:1.25}
.vin-cred-ds{display:block;font-size:11px;color:var(--muted);line-height:1.4;margin-top:2px}
.vin-lb{position:fixed;inset:0;background:rgba(10,10,10,.9);display:none;align-items:center;justify-content:center;z-index:2000;padding:24px}
.vin-lb.open{display:flex}
.vin-lb-inner{max-width:880px;width:100%;display:flex;flex-direction:column;align-items:center}
.vin-lb img{max-width:100%;max-height:80vh;border-radius:8px;background:#fff;box-shadow:0 10px 40px rgba(0,0,0,.5)}
.vin-lb-cap{color:#fff;font-size:13.5px;font-weight:700;margin-top:12px;text-align:center}
.vin-lb-x{position:absolute;top:16px;right:20px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);color:#fff;width:40px;height:40px;border-radius:50%;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center}

/* ═══ Bill-of-sale instant quote ═══ */
.bos-field{margin-bottom:16px}
.bos-field>label{display:block;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);margin-bottom:6px}
.bos-field select,.bos-field input{width:100%;padding:13px 14px;border:2px solid var(--border);border-radius:8px;font-size:15px;font-family:'Roboto Condensed',sans-serif;color:var(--g1);background:#fff;box-sizing:border-box}
.bos-field select:focus,.bos-field input:focus{outline:none;border-color:var(--g2)}
.bos-radio{display:flex;gap:10px}
.bos-radio button{flex:1;padding:13px 12px;border:2px solid var(--border);border-radius:8px;background:#fff;font-size:14px;font-weight:700;font-family:'Roboto Condensed',sans-serif;color:var(--g1);cursor:pointer;transition:all .15s}
.bos-radio button.sel{border-color:var(--g2);background:var(--amber-l)}
.bos-pricebox{margin:16px 0;padding:20px;border:2px solid var(--g2);border-radius:12px;background:var(--gb);text-align:center}
.bos-pricebox.muted{border-color:var(--border);background:#f7f8fa}
.bos-pricebox .pl{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--muted)}
.bos-pricebox .pv{font-family:'Oswald',sans-serif;font-size:34px;font-weight:700;color:var(--g1);margin:5px 0;line-height:1.1}
.bos-pricebox.muted .pv{color:var(--muted);font-size:26px}
.bos-pricebox .pb{font-size:13px;color:#444;line-height:1.55}
.bos-modal{position:fixed;inset:0;background:rgba(10,10,10,.85);display:none;align-items:center;justify-content:center;z-index:2000;padding:16px}
.bos-modal.open{display:flex}
.bos-modal-card{background:#fff;border-radius:12px;width:100%;max-width:920px;height:82vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 12px 48px rgba(0,0,0,.5)}
.bos-modal-head{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border);font-weight:700;color:var(--g1);font-family:'Roboto Condensed',sans-serif;font-size:15px}
.bos-modal-open{margin-left:auto;font-size:13px;color:var(--g2-text);font-weight:700;text-decoration:none;white-space:nowrap}
.bos-modal-x{background:none;border:none;font-size:20px;cursor:pointer;color:var(--muted);line-height:1;padding:0 2px;font-family:inherit}
.bos-modal-card iframe{flex:1;width:100%;border:0;background:#fff}
.bos-modal-note{padding:10px 16px;font-size:12.5px;color:var(--muted);border-top:1px solid var(--border);line-height:1.5}

/* ═══ MCO type chooser (US vs Chinese) ═══ */
.mco-choose{display:flex;gap:14px;flex-wrap:wrap;margin:6px 0 8px}
.mco-card{flex:1;min-width:240px;display:flex;flex-direction:column;text-align:left;border:2px solid var(--border);border-radius:12px;background:#fff;cursor:pointer;padding:0;overflow:hidden;font-family:inherit;transition:all .15s}
.mco-card:hover,.mco-card:focus{border-color:var(--g2);box-shadow:0 8px 20px rgba(176,255,69,.14);outline:none}
.mco-card-img{display:block;height:210px;overflow:hidden;background:#f3f4f6;border-bottom:1px solid var(--border)}
.mco-card-img img{width:100%;height:100%;object-fit:cover;object-position:top}
.mco-card-t{display:block;font-family:'Oswald',sans-serif;font-size:17px;font-weight:600;color:var(--g1);padding:12px 14px 2px}
.mco-card-d{display:block;font-size:13px;color:#444;line-height:1.5;padding:0 14px 10px}
.mco-card-cta{display:block;margin-top:auto;padding:10px 14px;font-weight:700;color:var(--g2-text);font-family:'Roboto Condensed',sans-serif;border-top:1px solid var(--border)}
/* MCO chooser on phones: two documents side by side. The whole point of this
   screen is comparing your document against two examples, and min-width:240px
   forced them to stack on a 375px screen - you had to scroll between them,
   which is exactly when comparison stops working. Side by side keeps both
   headers (the ornate US border vs the blue bilingual Chinese form) in view;
   object-position:top already crops to the distinguishing part. */
@media (max-width:560px){
  .mco-choose{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:stretch}
  .mco-card{min-width:0}
  .mco-card-img{height:132px}
  .mco-card-t{font-size:13.5px;padding:9px 10px 2px;line-height:1.25}
  .mco-card-t svg{width:17px;height:11px;margin-right:4px}
  .mco-card-d{font-size:11.5px;line-height:1.42;padding:0 10px 8px}
  .mco-card-cta{font-size:12.5px;padding:9px 10px}
}
/* keep the $ prefix from overlapping the typed value (override the generic .bos-field input padding) */
.bos-field .value-input{padding:13px 16px 13px 30px;font-family:'Oswald',sans-serif;font-size:18px}

/* Collapsible examples on the upload page */
.vin-examples{margin:4px 0 14px;border:1.5px solid var(--border);border-radius:10px;background:#fff;overflow:hidden}
.vin-examples>summary{list-style:none;cursor:pointer;padding:12px 14px;font-size:13.5px;font-weight:700;color:var(--g1);display:flex;align-items:center;justify-content:space-between;gap:10px}
.vin-examples>summary::-webkit-details-marker{display:none}
.vin-examples[open]>summary{border-bottom:1px solid var(--border)}
.vin-examples .vin-ex-chev{transition:transform .15s;color:var(--muted)}
.vin-examples[open] .vin-ex-chev{transform:rotate(180deg)}
.vin-examples .info-box{margin:12px 12px!important}

/* ── 3-tier anchor screen (Standard / VIP / Concierge) ── */
.tier-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px}
/* Per-tier colour. Each tier sets three custom properties and the shared
   rules below read them, so a tier is re-skinned by editing one line.
     --tier       accent used for the name, the outline button and its hover
                  fill. All three are AA on white (>=4.5:1): slate 6.00,
                  gold-text 6.24, plum 7.38.
     --tier-line  decorative border/edge, not used for text.
     --tier-soft  card tint. The price stays onyx on top of these (17-19:1).
   Brand volt green is deliberately NOT used here: it is the primary-CTA
   colour ("Get My Plates"), and putting it on one tier would read as
   "recommended" rather than as that tier's identity. */
.tier-standard {--tier:#5A6472;--tier-line:#C3CAD4;--tier-soft:#F4F6F8}
.tier-vip      {--tier:#7A5C10;--tier-line:#D4AF37;--tier-soft:#FFFBEF}
.tier-concierge{--tier:#6B3FA0;--tier-line:#C3ACE4;--tier-soft:#F7F3FC}
.tier-card{background:var(--tier-soft,var(--card));border:1.5px solid var(--tier-line,var(--border));border-radius:12px;padding:16px 14px;display:flex;flex-direction:column;text-align:center}
/* VIP keeps the featured treatment, now in gold rather than volt. */
.tier-card.tier-feat{position:relative;box-shadow:0 3px 12px rgba(212,175,55,.22)}
.tier-badge{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:#D4AF37;color:#0A0A0A;font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;padding:3px 10px;border-radius:8px;white-space:nowrap}
.tier-name{font-family:'Oswald',sans-serif;font-size:16px;font-weight:600;color:var(--tier,var(--g1));margin-bottom:4px;letter-spacing:.3px}
.tier-price{font-family:'Oswald',sans-serif;font-size:24px;font-weight:700;color:var(--g1);margin-bottom:8px}
.tier-desc{font-size:12.5px;color:var(--muted);line-height:1.5;margin-bottom:14px;flex:1}
.tier-btn{width:100%;padding:9px 12px;font-family:'Roboto Condensed',sans-serif;font-weight:700;font-size:14px;color:var(--tier,var(--g1));background:#fff;border:1.5px solid var(--tier-line,var(--border));border-radius:8px;cursor:pointer;transition:all .15s}
.tier-btn:hover{background:var(--tier);border-color:var(--tier);color:#fff}
/* Standard's button is the brand volt green: it is the tier most customers
   actually buy, so it gets the same call-to-action colour as "Get My Plates".
   Black on volt is 17.2:1. */
.tier-standard .tier-btn{background:var(--g2);border-color:var(--g2);color:#000}
.tier-standard .tier-btn:hover{background:var(--amber-d);border-color:var(--amber-d);color:#000}
/* VIP is filled gold. Onyx on gold is 9.42:1, far clearer than white on gold
   (2.10:1, which would fail). */
.tier-vip .tier-btn{background:#D4AF37;border-color:#D4AF37;color:#0A0A0A}
.tier-vip .tier-btn:hover{background:#C29B22;border-color:#C29B22;color:#0A0A0A}
.tier-btn-primary{background:var(--g2);border-color:var(--g2);color:#000}
.tier-btn-primary:hover{background:var(--amber-d);border-color:var(--amber-d);color:#fff}
/* ── iOS zoom-on-focus ──────────────────────────────────────────────────────
   Mobile Safari zooms the whole page in when you focus a field whose
   font-size is under 16px, and it does not zoom back out afterwards. Every
   field in the finder was 13-14px, so tapping Name, Email, Phone, the value
   box or the plate search threw the layout off on iPhone. 16px on phones only
   - the smaller desktop sizing is a deliberate look and is left alone. */
@media (max-width:560px){
  /* !important on purpose: the field classes (.vin-input 15px, the contact
     inputs 13px, .plate-search 14px) are class selectors and outrank a bare
     element selector, so without it the rule silently loses and Safari still
     zooms. This is a platform workaround, not styling preference. */
  input,select,textarea{font-size:16px !important}
}

/* Respect a reduced-motion preference: the finder slides banners in, pulses
   the add-vehicle dot and animates transitions throughout. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* Question (i) toggle - folds a long intro paragraph away so the answers stay
   above the fold on a phone. See step.questionInfo in app.js. */
.q-info-btn{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin-left:6px;padding:0;vertical-align:middle;border:1.5px solid var(--g2-text);border-radius:50%;background:#fff;color:var(--g2-text);font-family:'Roboto Condensed',sans-serif;font-weight:700;font-size:12px;line-height:1;cursor:pointer;transition:background .15s,color .15s;flex-shrink:0}
.q-info-btn:hover,.q-info-btn.open{background:var(--g2-text);color:#fff}
/* 20px circle reads right next to the heading, but 20px is far under the 44px
   touch minimum, so an invisible overlay carries the tap without moving the
   circle off the text baseline. */
.q-info-btn{position:relative}
.q-info-btn::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px}
.q-info-panel{margin:8px 0 2px;padding:11px 13px;background:var(--gl);border-left:3px solid var(--g2);border-radius:6px;font-size:13.5px;line-height:1.6;color:var(--text)}

/* Tier comparison on phones. Stacking three full-height cards made the
   comparison unreadable: only ~1.5 fitted on a 375x812 screen, so the three
   prices were never visible together. Below 560px each card collapses to a
   compact row (name + price on one line, description under it, full-width
   button), which fits all three in view. */
@media (max-width:560px){
  .tier-grid{grid-template-columns:1fr;gap:10px}
  .tier-card{display:grid;grid-template-columns:1fr auto;grid-template-areas:"name price" "desc desc" "btn btn";align-items:baseline;text-align:left;padding:13px 14px;row-gap:3px}
  .tier-name{grid-area:name;font-size:15px;margin-bottom:0}
  .tier-price{grid-area:price;font-size:20px;margin-bottom:0;text-align:right;white-space:nowrap}
  .tier-desc{grid-area:desc;font-size:12.5px;line-height:1.45;margin:2px 0 9px;flex:none}
  .tier-btn{grid-area:btn;padding:9px 12px}
  .tier-card.tier-feat{margin-top:9px}
  .tier-badge{top:-10px;left:14px;transform:none;font-size:10px;padding:2px 8px}
}

/* ── VIP upsell strip on the standard results page ── */
.vip-upsell-strip{display:flex;gap:12px;align-items:center;background:var(--amber-l);border:1.5px solid var(--gl);border-radius:12px;padding:14px 16px;margin-bottom:12px}
.vip-upsell-copy{flex:1}
.vip-upsell-hd{font-size:14px;font-weight:700;color:var(--g1);margin:0 0 2px}
.vip-upsell-sub{font-size:12px;color:#7a4a36;margin:0;line-height:1.45}
.vip-upsell-btn{flex-shrink:0;white-space:nowrap;padding:9px 14px;font-family:'Roboto Condensed',sans-serif;font-weight:700;font-size:13px;color:#000;background:var(--g2);border:none;border-radius:8px;cursor:pointer;transition:background .15s}
.vip-upsell-btn:hover{background:var(--amber-d)}
@media (max-width:480px){.vip-upsell-strip{flex-direction:column;align-items:stretch;text-align:center}.vip-upsell-btn{width:100%}}

/* === Montana plate gallery modal (ported from the shared finder codebase) === */
.plate-modal-wrap{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:10000;align-items:center;justify-content:center;padding:16px}
.plate-modal-wrap.open{display:flex}
.plate-modal{background:#fff;border-radius:12px;width:100%;max-width:960px;height:96vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 8px 40px rgba(0,0,0,.35)}
.plate-modal-hdr{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--border);flex-shrink:0}
.plate-modal-hdr h3{font-family:'Oswald',sans-serif;font-size:17px;font-weight:600;color:var(--g1);letter-spacing:.3px;margin:0}
.plate-modal-x{background:none;border:none;font-size:22px;color:var(--muted);cursor:pointer;line-height:1;padding:2px 6px;border-radius:5px;transition:color .15s}
.plate-modal-x:hover{color:var(--g1);background:var(--gb)}
.plate-modal-toolbar{padding:10px 16px;border-bottom:1px solid var(--border);background:#fafafa;flex-shrink:0}
.plate-search{width:100%;padding:9px 12px;border:1.5px solid var(--border);border-radius:7px;font-size:14px;font-family:'Roboto Condensed',sans-serif;outline:none;margin-bottom:8px;-webkit-appearance:none}
.plate-search:focus{border-color:var(--g2)}
.plate-cats{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.plate-cats::-webkit-scrollbar{height:4px}
.plate-cats::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
.plate-cat-pill{flex-shrink:0;background:#fff;border:1.5px solid var(--border);border-radius:999px;padding:5px 12px;font-size:12px;font-weight:600;color:var(--muted);cursor:pointer;font-family:'Roboto Condensed',sans-serif;white-space:nowrap;transition:all .15s}
.plate-cat-pill:hover{border-color:var(--g2);color:var(--g1)}
.plate-cat-pill.on{background:var(--g1);border-color:var(--g1);color:#fff}
.plate-modal-body{flex:1;overflow-y:auto;padding:14px;background:#fafafa;-webkit-overflow-scrolling:touch}
.plate-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
@media(max-width:600px){.plate-grid{grid-template-columns:repeat(2,1fr);gap:8px}}
.plate-card{background:#fff;border:1px solid var(--border);border-radius:8px;overflow:hidden;cursor:pointer;padding:0;font-family:inherit;text-align:left;transition:transform .15s,box-shadow .15s,border-color .15s;width:100%}
.plate-card:hover{transform:translateY(-2px);border-color:var(--g2);box-shadow:0 4px 16px rgba(0,0,0,.1)}
.plate-img{width:100%;aspect-ratio:2/1;object-fit:cover;display:block;background:#eee}
.plate-name{padding:6px 8px;font-size:11px;font-weight:600;color:var(--g1);font-family:'Roboto Condensed',sans-serif;line-height:1.25;min-height:34px;display:flex;align-items:center}
.plate-loading,.plate-empty{padding:40px 20px;text-align:center;color:var(--muted);font-family:'Roboto Condensed',sans-serif;font-size:14px}
.plate-modal-foot{padding:9px 16px;border-top:1px solid var(--border);background:#fafafa;font-size:11px;color:var(--muted);font-family:'Roboto Condensed',sans-serif;text-align:center;flex-shrink:0;line-height:1.4}
.plate-lightbox{display:none;position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:10001;align-items:center;justify-content:center;padding:24px;cursor:zoom-out}
.plate-lightbox.open{display:flex}
.plate-lightbox img{max-width:100%;max-height:100%;object-fit:contain;border-radius:6px;box-shadow:0 8px 40px rgba(0,0,0,.5)}
.plate-browse-link{color:var(--blue);text-decoration:underline;cursor:pointer}