/* ==========================================================================
   DL RACING SKIN -- Team Dirt Legal Velocity Offshore
   --------------------------------------------------------------------------
   Loaded AFTER finder-styles-dl.css. This file contains ONLY overrides.
   It never edits the base sheet, so /finder is mathematically unaffected:
   the standard finder does not load this file at all.

   Visual reference: https://dirt-legal.com/racing/speedboat/
     - near-black canvas (#0A0A0A) with #141414 panels
     - DL tangerine #FF632C as the single accent (already the base --g2)
     - heavy uppercase Oswald headlines, white, with the lead phrase in orange

   THE ONE TRICKY BIT -- the --g1 flip.
   In the base sheet --g1 (#141414 "Tarmac") does double duty: it is both the
   primary TEXT color and the background of several dark chrome elements. On a
   dark canvas those two roles diverge. --g1 is redefined here as the primary
   FOREGROUND (white) because it has more text usages than background usages,
   and every background usage is explicitly re-darkened below using --ink.
   If you add a rule that uses var(--g1) as a background, use var(--ink).
   ========================================================================== */

:root{
  /* Canvas */
  --bg:#0A0A0A;
  --card:#151515;
  --ink:#0A0A0A;          /* NEW -- the dark that --g1 used to supply as a bg */
  --ink-2:#1F1F1F;        /* NEW -- raised surface (inputs, secondary buttons) */

  /* Type */
  --text:#FFFFFF;
  --muted:#9CA3AF;
  --g1:#FFFFFF;           /* redefined: primary foreground, see note above */

  /* Accent -- unchanged from the base sheet, DL and the racing page share it */
  --g2:#FF632C;
  --g3:#FF8A5C;
  --amber:#FF632C;
  --amber-d:#E5501A;

  /* Tints, re-derived for a dark canvas */
  --gl:rgba(255,99,44,.30);
  --gb:#1A1A1A;
  --amber-l:rgba(255,99,44,.13);
  --border:rgba(255,255,255,.14);

  /* Support colors, lightened so they read on black */
  --blue:#7FB0FF;--blue-l:rgba(127,176,255,.12);--blue-b:rgba(127,176,255,.35);
  --red:#FF6B6B;--red-l:rgba(255,107,107,.13);

  --shadow:0 10px 34px rgba(0,0,0,.6);
}

html{background:var(--bg);scroll-behavior:smooth}
body{background:var(--bg);color:var(--text)}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ==========================================================================
   1. RACING HERO
   --------------------------------------------------------------------------
   The boat photo is a BACKGROUND, never a stacked block. That is deliberate:
   the Grandpa ad finder stacked its hero art, pushed the start button to
   y~658, and lost 88% of ad traffic before question one. Here the art costs
   zero vertical space, so the CTA lands around y~320 on a 375px phone.
   ========================================================================== */
.rc-hero{
  position:relative;
  /* The ?v= MUST stay byte-identical to the <link rel="preload"> in
     racing.html, or the browser treats them as two URLs and downloads the
     hero twice (killing the point of the preload). */
  background:#000 url('./assets/racing/hero-boat.jpg?v=20260728-racing-v1') center 30% / cover no-repeat;
  border-bottom:3px solid var(--g2);
  overflow:hidden;
}
/* Scrim -- keeps white text legible over the water without hiding the boat */
.rc-hero::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,10,10,.86) 0%,rgba(10,10,10,.70) 45%,rgba(10,10,10,.92) 100%);
}
@media(min-width:900px){
  /* On desktop there is room to let the boat breathe on the right */
  .rc-hero::after{
    background:linear-gradient(100deg,rgba(10,10,10,.94) 0%,rgba(10,10,10,.86) 42%,rgba(10,10,10,.35) 100%);
  }
}
.rc-hero-inner{position:relative;z-index:1;max-width:680px;margin:0 auto;padding:14px 16px 20px}

.rc-topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.rc-topbar img{height:30px;width:auto;display:block}
.rc-topbar a{
  color:#fff;text-decoration:none;font-family:'Oswald',sans-serif;font-weight:600;
  font-size:13px;letter-spacing:.6px;white-space:nowrap;
  border:1.5px solid rgba(255,255,255,.4);border-radius:6px;padding:6px 12px;transition:all .15s
}
.rc-topbar a:hover{border-color:var(--g2);color:var(--g2)}

/* Next-race strip -- makes the page read as "built for this weekend" */
.rc-next{
  display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;
  background:rgba(255,99,44,.16);border:1px solid var(--gl);border-radius:999px;
  padding:5px 13px;margin-bottom:14px;
  font-family:'Roboto Condensed',sans-serif;font-size:12px;font-weight:700;
  letter-spacing:.5px;text-transform:uppercase;color:#fff
}
.rc-next b{color:var(--g2)}
.rc-live-dot{
  width:7px;height:7px;border-radius:50%;background:var(--g2);flex-shrink:0;
  animation:rcPulse 1.9s ease-in-out infinite
}
@keyframes rcPulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(255,99,44,.6)}50%{opacity:.65;box-shadow:0 0 0 6px rgba(255,99,44,0)}}

.rc-eyebrow{
  font-family:'Oswald',sans-serif;font-size:12px;font-weight:600;letter-spacing:2.4px;
  text-transform:uppercase;color:var(--g2);margin-bottom:7px
}
.rc-h1{
  font-family:'Oswald',sans-serif;font-weight:700;text-transform:uppercase;
  font-size:clamp(28px,7.4vw,50px);line-height:1.03;letter-spacing:.4px;
  color:#fff;margin-bottom:10px;text-shadow:0 2px 18px rgba(0,0,0,.75)
}
.rc-h1 .rc-or{color:var(--g2);display:block}
.rc-sub{
  font-size:15px;line-height:1.5;color:rgba(255,255,255,.82);
  margin-bottom:16px;max-width:46ch
}
@media(min-width:900px){.rc-sub{font-size:16px}}

/* Primary CTA -- the one thing that MUST clear the mobile fold */
.rc-cta{
  display:block;width:100%;max-width:420px;box-sizing:border-box;
  background:var(--g2);color:#fff;text-decoration:none;text-align:center;
  font-family:'Oswald',sans-serif;font-weight:600;font-size:19px;
  letter-spacing:1px;text-transform:uppercase;
  padding:16px 22px;border:none;border-radius:8px;cursor:pointer;
  box-shadow:0 6px 22px rgba(255,99,44,.38);
  transition:transform .15s,background .15s,box-shadow .15s
}
.rc-cta:hover{background:var(--amber-d);transform:translateY(-2px);box-shadow:0 10px 28px rgba(255,99,44,.45)}
.rc-cta:active{transform:translateY(0)}
.rc-cta-note{font-size:12.5px;color:rgba(255,255,255,.6);margin-top:9px;letter-spacing:.2px}

/* --------------------------------------------------------------------------
   Hero collapse once the quiz is under way (body.rc-quiz-active, set by the
   page-local observer in racing.html).

   WHY: finder-app-dl.js calls window.scrollTo({top:0}) after every answer. A
   full-height hero above #app means scroll-to-top lands on the hero and the
   next question is off-screen, so the customer has to scroll down on every
   single tap. Collapsing to a slim branded bar makes scroll-to-top land on the
   question, which is what the engine intends.
   -------------------------------------------------------------------------- */
body.rc-quiz-active .rc-hero{
  background-position:center 42%;
  border-bottom-width:2px
}
body.rc-quiz-active .rc-hero-inner{padding:10px 16px}
body.rc-quiz-active .rc-eyebrow,
body.rc-quiz-active .rc-h1,
body.rc-quiz-active .rc-sub,
body.rc-quiz-active .rc-cta,
body.rc-quiz-active .rc-cta-note{display:none}
body.rc-quiz-active .rc-topbar{margin-bottom:0}
body.rc-quiz-active .rc-next{margin-bottom:0;margin-left:auto;margin-right:auto}
/* The collapsed hero already shows the logo, so #app's own header row is a
   duplicate -- and 50px of duplicate is 50px the question is pushed down by. */
body.rc-quiz-active #app .hdr{display:none}
body.rc-quiz-active #app{padding-top:14px}
@media(min-width:601px){
  /* Roomy enough to keep the logo and the race strip on one line */
  body.rc-quiz-active .rc-hero-inner{display:flex;align-items:center;justify-content:space-between;gap:16px}
  body.rc-quiz-active .rc-topbar{flex:1;margin-bottom:0}
}
@media(prefers-reduced-motion:no-preference){
  .rc-hero-inner{transition:padding .25s ease}
}

/* ==========================================================================
   2. VIP DOOR -- the "skip the questions" path.
   Sits BELOW the quiz. It used to sit between the hero and the quiz, which
   compounded the scroll-to-top problem described above.
   ========================================================================== */
.rc-vip-door{
  max-width:680px;margin:22px auto 0;padding:0 16px
}
.rc-vip-door-inner{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:linear-gradient(135deg,#1a1206 0%,#2d1f08 100%);
  border:1.5px solid #c9962a;border-radius:12px;padding:15px 17px;
  box-shadow:0 8px 26px rgba(0,0,0,.55)
}
.rc-vip-copy{flex:1;min-width:190px}
.rc-vip-kicker{
  font-family:'Oswald',sans-serif;font-size:10.5px;font-weight:700;letter-spacing:1.5px;
  text-transform:uppercase;color:#f5c842;margin-bottom:3px
}
.rc-vip-hd{font-family:'Oswald',sans-serif;font-size:17px;font-weight:600;color:#fff;margin-bottom:3px;line-height:1.25}
.rc-vip-sub{font-size:12.5px;color:rgba(255,255,255,.68);line-height:1.45;margin:0}
.rc-vip-btn{
  flex-shrink:0;display:inline-block;text-decoration:none;text-align:center;
  background:linear-gradient(90deg,#c9962a,#f5c842);color:#1a1206;
  font-family:'Oswald',sans-serif;font-weight:700;font-size:15px;letter-spacing:.5px;
  padding:12px 20px;border-radius:8px;border:none;cursor:pointer;transition:opacity .15s
}
.rc-vip-btn:hover{opacity:.88}
@media(max-width:520px){
  .rc-vip-door-inner{flex-direction:column;align-items:stretch;text-align:center}
  .rc-vip-btn{width:100%}
}

/* Team credit line under the quiz.
   NOTE: this sits OUTSIDE #app, so the base sheet's
   `body:not(.has-sticky-checkout) #app{padding-bottom:60px}` clearance does
   NOT apply to it -- the fixed #contact-bar (and the taller #sticky-checkout,
   once a total exists) would sit on top of it at the bottom of the page.
   The clearance has to live here instead. The larger value also clears the
   .chat-fab, which floats at bottom:58px / bottom:90px. */
.rc-teamline{
  max-width:680px;margin:26px auto 0;padding:16px 16px 118px;text-align:center;
  border-top:1px solid var(--border);
  font-family:'Roboto Condensed',sans-serif;font-size:12.5px;color:var(--muted);line-height:1.6
}
body.has-sticky-checkout .rc-teamline{padding-bottom:170px}
.rc-teamline b{color:#fff;font-weight:700}
.rc-teamline a{color:var(--g2);text-decoration:none}
.rc-teamline a:hover{text-decoration:underline}

/* App container sits directly under the hero, no extra top gap */
#app{padding-top:4px}

/* ==========================================================================
   3. DARK REMAP -- re-darken every place the base sheet used var(--g1)
      as a BACKGROUND (see the --g1 note at the top of this file)
   ========================================================================== */
.btn-primary{background:var(--g2);color:#fff}
.btn-primary:hover{background:var(--amber-d)}
.chat-fab{background:var(--ink);border:1px solid var(--border)}
.chat-fab:hover{background:#1f1f1f}
.chat-hdr{background:var(--ink);border-bottom:3px solid var(--g2)}
#contact-bar{background:var(--ink);border-top:1px solid var(--border)}
.plate-cat-pill.on{background:var(--g2);border-color:var(--g2);color:#fff}
.prog-fill{background:linear-gradient(90deg,var(--g2),var(--g3))}
.prog-track{background:rgba(255,255,255,.10)}
.qualify-banner{background:linear-gradient(135deg,#141414 0%,#242424 55%,var(--g2) 100%)}
.results-hdr{background:linear-gradient(135deg,#141414 0%,#242424 55%,var(--g2) 100%)}
.product-main{border-color:var(--g2)}
.cart-total{color:#fff}

/* ==========================================================================
   4. DARK REMAP -- surfaces the base sheet hardcoded to #fff / near-white
   ========================================================================== */
.card{border-color:var(--border);box-shadow:var(--shadow)}
.opt{background:var(--ink-2);border-color:var(--border);color:var(--text)}
.opt:hover{border-color:var(--g2);background:#262626;box-shadow:0 6px 18px rgba(255,99,44,.16)}
.opt.recommended{border-color:var(--g2);background:var(--amber-l)}
.opt.recommended:hover{border-color:var(--amber-d);background:rgba(255,99,44,.20)}
.opt-has-subs.expanded{background:#232323}
.sub-opt-btn{background:var(--ink-2);border-color:var(--border);color:var(--text)}
.sub-opt-btn:hover{background:var(--amber-l);border-color:var(--g2);color:var(--g2)}
.range-btn{background:var(--ink-2);border-color:var(--border);color:var(--text)}
.range-btn.active{background:var(--g2);border-color:var(--g2);color:#fff}
.trust-bar{background:var(--card);border-color:var(--border)}
.trust-text{color:#fff}
.faq-q{background:var(--ink-2);border-color:var(--border);color:var(--text)}
.faq-q:hover{background:#262626;color:#fff;border-color:var(--g2)}
.faq-q.on{background:var(--amber-l);border-color:var(--g2)}
.variant-pill{background:var(--ink-2);border-color:var(--gl);color:#fff}
.btn-remove{background:transparent;color:var(--red);border-color:var(--red)}
.btn-remove:hover{background:var(--red-l)}
.cart{background:var(--ink-2)}
.addon-row{border-color:var(--border)}
.chat{background:var(--card);border-left:1px solid var(--border)}
.chat-body h4{color:var(--muted)}
.mco-card{background:var(--ink-2);border-color:var(--border)}
.mco-card-img{background:#222;border-bottom-color:var(--border)}
.mco-card-cta{border-top-color:var(--border)}
.objection-accordion{border-color:var(--border)}
.obj-item{border-bottom-color:var(--border)}
.obj-toggle{color:var(--text)}
.vin-examples{background:var(--ink-2);border-color:var(--border)}
.vin-examples>summary{color:#fff}
.vin-examples[open]>summary{border-bottom-color:var(--border)}
.vin-filelist li{background:var(--ink-2);border-color:var(--border)}
.vin-form-ex,.vin-cred{background:var(--ink-2);border-color:var(--border)}
.vin-cred-thumb{background:#222;border-bottom-color:var(--border)}
.vin-cap{background:var(--gb);border-top-color:var(--border);color:#fff}

/* Form controls */
.year-select,.state-select,.value-input,.vin-field input,.bos-field select,.bos-field input,
.plate-search,#faq-input,.lead-modal input{
  background:var(--ink-2);border-color:var(--border);color:#fff
}
.year-select,.state-select{
  /* base sheet bakes a grey chevron into background-image; brighten it */
  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='%23FF632C' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")
}
.year-select option,.state-select option,.bos-field select option{background:#1F1F1F;color:#fff}
.value-input::placeholder,.vin-field input::placeholder,.plate-search::placeholder,#faq-input::placeholder{color:#6B7280}
.value-prefix{color:var(--muted)}
.bos-radio button{background:var(--ink-2);border-color:var(--border);color:#fff}
.bos-radio button.sel{border-color:var(--g2);background:var(--amber-l)}

/* Modals -- kept dark on purpose so white body text stays readable inside them */
.plate-modal{background:var(--card)}
.plate-modal-hdr{border-bottom-color:var(--border)}
.plate-modal-hdr h3{color:#fff}
.plate-modal-toolbar{background:var(--gb);border-bottom-color:var(--border)}
.plate-modal-body{background:var(--gb)}
.plate-modal-foot{background:var(--gb);border-top-color:var(--border);color:var(--muted)}
.plate-cat-pill{background:var(--ink-2);border-color:var(--border);color:var(--muted)}
.plate-cat-pill:hover{border-color:var(--g2);color:#fff}
.plate-card{background:var(--ink-2);border-color:var(--border)}
.plate-img{background:#222}
.plate-name{color:#fff}
.plate-modal-x:hover{color:#fff;background:var(--ink-2)}
.bos-modal-card{background:var(--card)}
.bos-modal-head{border-bottom-color:var(--border);color:#fff}
.bos-modal-note{border-top-color:var(--border);color:var(--muted)}
/* Lead modal wraps a GHL iframe that renders its own light form -- keep the
   shell dark but leave the iframe alone. */
.lead-modal{background:var(--card)}
.lead-modal h3{color:#fff}

/* ==========================================================================
   5. DARK REMAP -- text colors the base sheet hardcoded for a light canvas
   ========================================================================== */
.info-box.green{background:var(--gb);border-color:var(--gl);color:#E9E9E9}
.info-box.green h3{color:var(--g2)}
.info-box.amber{background:var(--amber-l);border-color:var(--gl);color:#FFD9C4}
.info-box.blue{background:var(--blue-l);border-color:var(--blue-b);color:#CFE0FF}
.variants-box{background:var(--amber-l);border-color:var(--gl);color:#FFD9C4}
.chat-cta{background:var(--amber-l);color:#FFD9C4}
.chat-cta a{color:#fff}
.chat-trigger{background:var(--blue-l);border-color:var(--blue-b);color:var(--blue)}
.chat-trigger:hover{background:rgba(127,176,255,.2)}
.obj-body{color:#C6C6C6}
.bos-pricebox{background:var(--gb)}
.bos-pricebox .pv{color:#fff}
.bos-pricebox .pb{color:#C6C6C6}
.bos-pricebox.muted{background:var(--ink-2);border-color:var(--border)}
.mco-card-t{color:#fff}
.mco-card-d{color:#C6C6C6}
.vin-cred-nm{color:#fff}
.vin-dt{color:#fff}
.vin-field input{color:#fff}
.benefits-box{background:var(--gb);border-color:var(--border)}
.benefits-box li{color:#E9E9E9}
.guarantee-badge{background:rgba(45,138,84,.16);border-color:rgba(126,207,158,.5);color:#8FE5B4}
.inaction-line{background:rgba(245,197,24,.10);border-color:rgba(245,197,24,.45);color:#F3D480}
.savings-box{background:linear-gradient(135deg,#0f2e1a 0%,#164a29 100%);border:1px solid rgba(127,255,127,.22)}
.restart{color:var(--muted)}
.dead-title{color:#fff}
.dead-body{color:var(--muted)}
.sub-group-label{color:var(--muted);border-bottom-color:var(--border)}
.vin-checklist li{border-bottom-color:rgba(255,255,255,.08)}
.opts-section-hdr{border-bottom-color:var(--gl)}
.vin-drop{background:var(--gb);border-color:var(--g3)}
.vin-drop:hover,.vin-drop:focus,.vin-drop.drag{background:var(--amber-l);border-color:var(--g2)}

/* Sticky checkout -- base sheet hardcodes a dark GREEN bar; racing runs black */
#sticky-checkout{background:#101010;border-top:3px solid var(--g2);box-shadow:0 -6px 26px rgba(0,0,0,.7)}

/* Idle nudge banner. finder-app-dl.js builds #idle-banner at runtime with an
   INLINE navy background and gold links, so !important is the only way to
   re-skin it without editing the shared engine. */
#idle-banner{
  background:#141414 !important;
  border-bottom:2px solid var(--g2);
  box-shadow:0 4px 18px rgba(0,0,0,.65) !important
}
#idle-banner a,#idle-banner button{color:var(--g2) !important}

/* ==========================================================================
   6. VIP PROMOTION
   --------------------------------------------------------------------------
   The engine already renders a Standard / VIP / Concierge tier screen and
   already picks VIP as the featured card (.tier-feat). Nothing here changes
   WHO sees it or WHAT it does -- this is pure visual re-weighting so VIP wins
   the glance for an audience that is at an offshore race and not price-led.
   ========================================================================== */
.tier-grid{align-items:stretch;gap:14px;margin-top:22px}
.tier-card{background:var(--ink-2);border-color:var(--border)}
.tier-name{color:#fff}
.tier-price{color:#fff}
.tier-desc{color:var(--muted)}
.tier-btn{background:transparent;border-color:var(--border);color:#fff}
.tier-btn:hover{border-color:var(--g2);color:var(--g2)}

/* Standard + Concierge recede */
.tier-card:not(.tier-feat){opacity:.78;transition:opacity .18s}
.tier-card:not(.tier-feat):hover{opacity:1}

/* VIP dominates */
.tier-card.tier-feat{
  opacity:1;
  background:linear-gradient(160deg,#241a09 0%,#171717 62%);
  border:2px solid var(--g2);
  box-shadow:0 0 0 4px rgba(255,99,44,.12),0 14px 34px rgba(255,99,44,.22);
  padding-top:24px
}
/* "TEAM PICK" ribbon. Injected via ::before because the engine's tier markup
   does not emit a .tier-badge element -- adding one would mean editing the
   shared engine, which this variant must not do. */
.tier-card.tier-feat::before{
  content:'TEAM PICK';
  position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  background:var(--g2);color:#fff;
  font-family:'Oswald',sans-serif;font-size:11px;font-weight:700;
  letter-spacing:1.4px;text-transform:uppercase;
  padding:4px 14px;border-radius:8px;white-space:nowrap;
  box-shadow:0 4px 14px rgba(255,99,44,.5)
}
.tier-card.tier-feat .tier-name{font-size:18px;color:var(--g2)}
.tier-card.tier-feat .tier-price{font-size:30px;color:#fff}
.tier-card.tier-feat .tier-desc{color:#D8D8D8}
.tier-card.tier-feat .tier-btn{
  background:var(--g2);border-color:var(--g2);color:#fff;
  font-size:15px;padding:12px 12px;letter-spacing:.5px
}
.tier-card.tier-feat .tier-btn:hover{background:var(--amber-d);border-color:var(--amber-d);color:#fff}

@media(min-width:561px){
  /* Lift the VIP column above its neighbours on anything wider than a phone */
  .tier-card.tier-feat{transform:scale(1.045);z-index:1}
}
@media(max-width:560px){
  /* Stacked on phones -- VIP is reordered to the top so it is seen first */
  .tier-grid{display:flex;flex-direction:column}
  .tier-card.tier-feat{order:-1;margin-bottom:4px}
}

/* ==========================================================================
   INLINE-STYLE RESCUES
   --------------------------------------------------------------------------
   finder-app-dl.js hardcodes light backgrounds (#fff / #fafafa / #f7f8fa /
   #f0faf4) on a handful of elements and pairs them with color:var(--text) or
   color:var(--muted). On /finder's light canvas that is correct. On this dark
   canvas --text is white, so several of them rendered WHITE ON WHITE.

   These are inline styles, so !important is required. Found by auditing every
   `background:#<light>` inline style in the engine rather than one screenshot
   at a time -- three of them were invisible text, not merely off-theme.

   If the engine grows another light-background inline style, it will show up
   the same way. The audit command:
     grep -nE 'style="[^"]*background:#(fff|fafafa|f9fafb|f0faf4|f7f8fa)' \
       docs/finder/finder-app-dl.js
   -------------------------------------------------------------------------- */

/* WAS NEARLY INVISIBLE: option copy in finder-config.js contains bare
   `<a href="#">` markup with no colour of its own (e.g. "Browse all designs"
   inside the custom-plate option). The browser default #0000EE reads fine on
   /finder's white canvas and disappears on black. Generic on purpose, so any
   future unstyled link in the shared config is covered too. */
#step-container a:not([class]),
#step-container a:not([class]):visited{
  color:var(--g2);
  text-decoration:underline
}
#step-container a:not([class]):hover{color:var(--g3)}

/* WAS INVISIBLE: background:#fff with color:var(--text) (white on white).
   The inline onmouseover/onmouseout handlers also reset color, so the hover
   rule needs !important too. Two render paths use this same button. */
#step-container button[onclick*="addAnotherVehicle"]{
  background:var(--ink-2)!important;
  color:#fff!important;
  border-color:var(--gl)!important
}
#step-container button[onclick*="addAnotherVehicle"]:hover{
  background:#262626!important;
  color:var(--g2)!important;
  border-color:var(--g2)!important
}

/* WAS INVISIBLE: background:#fff and no color at all, so it inherited white. */
#temp-tag-qty{
  background:var(--ink-2)!important;
  color:#fff!important;
  border-color:var(--border)!important
}
#temp-tag-qty option{background:#1F1F1F;color:#fff}

/* WAS LOW CONTRAST: #f7f8fa panel with color:var(--muted) -- grey on near-white. */
#step-container div[style*="#f7f8fa"],
#step-container div[style*="rgb(247, 248, 250)"]{
  background:var(--gb)!important;
  color:#C6C6C6!important
}

/* Light-green success panels (tax preview, VIP savings note, temp-tag confirm).
   Readable as-is, but a pale green island on a black page reads as broken.

   ⚠️ THE rgb() TWIN IS NOT OPTIONAL. The engine calls
   `document.getElementById('vi-tax-preview').style.display = 'block'`, and the
   moment a style attribute is touched via CSSOM the browser RE-SERIALISES the
   whole attribute -- `#f0faf4` becomes `rgb(240, 250, 244)` and a
   [style*="#f0faf4"] selector silently stops matching. That is exactly how this
   one slipped through the first pass. Any attribute selector aimed at an inline
   colour needs both spellings, or an id. */
#vi-tax-preview,
#step-container [style*="#f0faf4"],
#step-container [style*="rgb(240, 250, 244)"]{
  background:rgba(45,138,84,.15)!important;
  border-color:rgba(126,207,158,.45)!important;
  color:#A7E8C4!important
}
/* the green figures inside those panels are set on child spans */
#vi-tax-preview strong,#vi-tax-preview span,
#step-container [style*="#f0faf4"] strong,
#step-container [style*="rgb(240, 250, 244)"] strong{color:#8FE5B4!important}

/* Testimonial card -- #fafafa with color:#444. */
#step-container div[style*="#fafafa"],
#step-container div[style*="rgb(250, 250, 250)"]{
  background:var(--gb)!important;
  border-color:var(--border)!important;
  color:#C6C6C6!important
}

/* "Call us" fallback button -- white slab with orange text.
   Matched on href rather than the inline colour, for the re-serialisation
   reason documented above. */
#step-container a[href^="tel:"]{
  background:transparent!important;
  color:var(--g2)!important
}
#step-container a[href^="tel:"]:hover{
  background:var(--amber-l)!important
}

/* --------------------------------------------------------------------------
   VIP comparison table on the VIP result screen -- REGRESSION FIX.

   renderResultVIP() builds this table inline, assuming a LIGHT canvas:
     header + total rows -> background:var(--g1) with color:#fff
     body rows           -> background:#fff (hardcoded) with color:var(--text)

   The racing skin flips --g1 AND --text to white, so the header rendered
   white-on-white and the left column vanished into the white body rows.

   Fix: re-scope the two variables on the table's own grid rows. Because a
   custom property set on an element resolves for that same element, the header
   gets its dark bar back and the left column reads black on white -- without an
   !important, without touching the shared engine, and without depending on the
   exact inline style string beyond the grid signature.
   -------------------------------------------------------------------------- */
#step-container div[style*="grid-template-columns:1fr 1fr 1fr"]{
  --g1:#0F0F0F;      /* header + total rows: dark bar, white text reads again */
  --text:#111111;    /* left column: black on the white body rows */
  --muted:#4B5563;   /* middle column: readable grey on white */
  --border:#E5E7EB   /* dividers sized for a light row, not a dark one */
}

/* VIP upsell strip on the standard results page -- stronger than the base */
.vip-upsell-strip{
  background:linear-gradient(135deg,#1a1206 0%,#2d1f08 100%);
  border:1.5px solid #c9962a;box-shadow:0 6px 20px rgba(0,0,0,.5)
}
.vip-upsell-hd{color:#f5c842;font-size:15px}
.vip-upsell-sub{color:rgba(255,255,255,.72)}
.vip-upsell-btn{background:linear-gradient(90deg,#c9962a,#f5c842);color:#1a1206;font-weight:700}
.vip-upsell-btn:hover{background:linear-gradient(90deg,#c9962a,#f5c842);opacity:.88}

/* ==========================================================================
   7. MOBILE
   ========================================================================== */
@media(max-width:580px){
  .rc-hero-inner{padding:12px 16px 18px}
  .rc-topbar{margin-bottom:12px}
  .rc-topbar img{height:26px}
  .rc-next{font-size:11px;padding:4px 11px;margin-bottom:12px}
  .rc-h1{margin-bottom:8px}
  .rc-sub{font-size:14.5px;margin-bottom:14px}
  .rc-cta{max-width:none;font-size:18px;padding:15px 20px}
  .rc-vip-door{transform:translateY(-10px)}
}
/* Short phones -- trim the hero to guarantee the CTA clears the fold */
@media(max-width:580px) and (max-height:700px){
  .rc-sub{font-size:14px;margin-bottom:12px;max-width:34ch}
  .rc-h1{font-size:clamp(25px,6.8vw,34px)}
}

/* ==========================================================================
   8. ACCESSIBILITY
   ========================================================================== */
.rc-cta:focus-visible,.rc-vip-btn:focus-visible,.rc-topbar a:focus-visible,
.opt:focus-visible,.tier-btn:focus-visible{
  outline:3px solid #FFB48F;outline-offset:2px
}
@media(prefers-reduced-motion:reduce){
  .rc-live-dot{animation:none}
  .rc-cta,.opt,.tier-card{transition:none}
  .rc-cta:hover{transform:none}
}