/* ======================================================================
   Vehicle Check Data - CONTRAST LAYER
   ----------------------------------------------------------------------
   Loaded last, on every page. This is the ONE place text colour is
   decided. If a word is hard to read anywhere on the site, the fix
   belongs in this file and nowhere else.

   WHY THE SELECTORS LOOK LIKE :is(#vcd, .thing)
   ---------------------------------------------
   An older rebrand left a generated rule in every page that reads
       .card.card.card *:not(.btn):not(.btn-place)... { color:#3C4753 !important }
   Each repeated class and each :not() adds weight, so that rule scores
   (0,10,0) and beats any normal selector, even one marked !important.
   It paints one grey onto EVERY element inside a section, including the
   ones sitting on a dark blue card, which is what made the service card,
   the step numbers, the hero heading and the checkout labels unreadable.

   :is() takes the weight of its heaviest argument, so :is(#vcd, .card)
   scores as an ID, (1,0,0). One ID outranks any number of classes, so
   these rules win outright. #vcd does not exist in the markup and never
   needs to - it is there purely to carry the weight.

   THE PALETTE, WITH THE MEASURED RATIO AGAINST ITS BACKGROUND
   ----------------------------------------------------------
     #FFFFFF on #0B1622 ink ............ 18.2:1
     #FFFFFF on #111E2D ink-2 .......... 16.8:1
     #FFFFFF on #0A66D6 blue ...........  5.4:1
     #C8D6E4 quiet text on ink ......... 12.3:1
     #8FC2FF links on ink ..............  9.8:1
     #0B1622 headings on white ......... 18.2:1
     #3C4753 body on white .............  9.5:1
     #54626F quiet text on white .......  6.3:1
     #0A5BC0 links on white ............  6.4:1

   Nothing here is below 4.5:1 for body text or 3:1 for large text.
   On the blue #0A66D6 only pure white clears 4.5:1, so blue surfaces
   get white for everything - no quiet grey, no pale blue.
   ====================================================================== */

:root{
  --vcd-ink:#0B1622;
  --vcd-ink-2:#111E2D;
  --vcd-blue:#0A66D6;
  --vcd-blue-dark:#0850AC;
  --vcd-on-dark:#FFFFFF;
  --vcd-quiet-dark:#C8D6E4;
  --vcd-link-dark:#8FC2FF;
  --vcd-heading:#0B1622;
  --vcd-body:#3C4753;
  --vcd-quiet:#54626F;
  --vcd-link:#0A5BC0;
  --vcd-green:#1C7346;
}


/* ======================================================================
   1. DARK BANDS - header, hero, page title, stats, CTA, footer
   Everything sitting on the navy gets white. Quiet copy gets #C8D6E4,
   which is still 12:1, so "quiet" never means "faint".
   ====================================================================== */

:is(#vcd, .sub-header),          :is(#vcd, .sub-header) *,
:is(#vcd, .m-nav),               :is(#vcd, .m-nav) *,
:is(#vcd, .hero),                :is(#vcd, .hero) *,
:is(#vcd, .page-title),          :is(#vcd, .page-title) *,
:is(#vcd, .why),                 :is(#vcd, .why) *,
:is(#vcd, .pr-cta),              :is(#vcd, .pr-cta) *,
:is(#vcd, .legal-contact),       :is(#vcd, .legal-contact) *,
:is(#vcd, footer),               :is(#vcd, footer) *{
  color:#FFFFFF !important;
}

/* Supporting copy on those same bands. */
:is(#vcd, .hero) p,              :is(#vcd, .hero) .sub,
:is(#vcd, .page-title) p,        :is(#vcd, .page-title) .page-sub,
:is(#vcd, .why) p,               :is(#vcd, .why) .stat p,
:is(#vcd, .pr-cta) p,
:is(#vcd, .legal-contact) p,
:is(#vcd, footer) p,             :is(#vcd, footer) li,
:is(#vcd, footer) .f-links li{
  color:#C8D6E4 !important;
}

/* Links on the dark bands, hover included. */
:is(#vcd, .why) a,
:is(#vcd, .pr-cta) a,
:is(#vcd, .legal-contact) a,
:is(#vcd, footer) a,
:is(#vcd, footer) .f-links a{
  color:#8FC2FF !important;
}
:is(#vcd, .why) a:hover,
:is(#vcd, .pr-cta) a:hover,
:is(#vcd, .legal-contact) a:hover,
:is(#vcd, footer) a:hover,
:is(#vcd, footer) .f-links a:hover{
  color:#FFFFFF !important;
}


/* ======================================================================
   2. HEADER NAVIGATION - white, as asked for
   Was #5AA6FF, a mid blue that read as washed out against the navy.
   Plain white now; the active and hovered item keeps the blue underline
   so you can still see where you are without dimming the word.
   ====================================================================== */

/* On the home page the menu sits inside .hero, not .sub-header, so both
   containers have to be named or the home page keeps the old blue. */
:is(#vcd, .hero) .navbar nav a,
:is(#vcd, .hero) .navbar nav a:link,
:is(#vcd, .hero) .navbar nav a:visited,
:is(#vcd, .hero) .navbar nav a:hover,
:is(#vcd, .hero) .navbar nav a.active{ color:#FFFFFF !important; }
:is(#vcd, .hero) .navbar nav a::after{ background:#5AA6FF !important; }
:is(#vcd, .hero) .navbar .menu-btn{ color:#FFFFFF !important; }

:is(#vcd, .sub-header) nav a,
:is(#vcd, .sub-header) nav ul li a,
:is(#vcd, .navbar) nav a,
:is(#vcd, .m-nav) a{
  color:#FFFFFF !important;
  font-weight:600 !important;
}
:is(#vcd, .sub-header) nav a:hover,
:is(#vcd, .sub-header) nav a.active,
:is(#vcd, .navbar) nav a:hover,
:is(#vcd, .navbar) nav a.active,
:is(#vcd, .m-nav) a:hover{
  color:#FFFFFF !important;
}
:is(#vcd, .sub-header) nav a::after,
:is(#vcd, .navbar) nav a::after{
  background:#5AA6FF !important;
  height:2px !important;
}
:is(#vcd, .m-nav) .m-small{ color:#C8D6E4 !important; }
:is(#vcd, .m-nav) .m-close,
:is(#vcd, .sub-header) .menu-btn{ color:#FFFFFF !important; }


/* ======================================================================
   3. THE HERO - heading was #B7C4D2 over a photo, 2.5:1
   Two fixes: white text, and a heavier scrim under it so the photo
   cannot lift the background luminance back up.
   ====================================================================== */

:is(#vcd, .hero) h1,
:is(#vcd, .hero) .welcome,
:is(#vcd, .hero) .sub,
:is(#vcd, .hero-content) h1,
:is(#vcd, .hero-content) .welcome{
  color:#FFFFFF !important;
  text-shadow:0 2px 18px rgba(4,10,18,0.55) !important;
}
:is(#vcd, .hero-content) .sub,
:is(#vcd, .hero) p.sub{
  color:#EAF1F9 !important;
  text-shadow:0 1px 12px rgba(4,10,18,0.55) !important;
}
/* Darken the overlay: white on the old scrim measured 4.47:1. */
:is(#vcd, .hero)::after,
:is(#vcd, .hero) .hero-scrim{
  content:'' !important;
  position:absolute !important;
  inset:0 !important;
  background:linear-gradient(90deg, rgba(7,16,27,0.86) 0%, rgba(7,16,27,0.66) 46%, rgba(7,16,27,0.34) 100%) !important;
  pointer-events:none !important;
  z-index:0 !important;
}
:is(#vcd, .hero) .wrap,
:is(#vcd, .hero) .hero-content{ position:relative !important; z-index:2 !important; }


/* ======================================================================
   4. BLUE SURFACES - buttons, chips, the featured card, payment box
   On #0A66D6 only pure white clears 4.5:1, so everything on blue is
   white including headings, body copy and icons.
   ====================================================================== */

:is(#vcd, .btn),            :is(#vcd, .btn) *,
:is(#vcd, .btn-place),      :is(#vcd, .btn-place) *,
:is(#vcd, .btn-download),   :is(#vcd, .btn-download) *,
:is(#vcd, .ps-dl),          :is(#vcd, .ps-dl) *,
:is(#vcd, .send-btn),       :is(#vcd, .send-btn) *,
:is(#vcd, .legal-badge),    :is(#vcd, .legal-badge) *,
:is(#vcd, .vs-chip),        :is(#vcd, .vs-chip) *,
:is(#vcd, .vs-foot),        :is(#vcd, .vs-foot) *,
:is(#vcd, .rc-samplechip),  :is(#vcd, .rc-samplechip) *,
:is(#vcd, .pop-badge),      :is(#vcd, .pop-badge) *{
  color:#FFFFFF !important;
}

/* The highlighted service card. This is the "Junk and Salvage Records"
   tile - it was dark grey on blue at 1.75:1. */
:is(#vcd, .card).featured,
:is(#vcd, .card).featured *,
:is(#vcd, .card).featured h3,
:is(#vcd, .card).featured h4,
:is(#vcd, .card).featured p,
:is(#vcd, .card).featured strong{
  color:#FFFFFF !important;
}
:is(#vcd, .card).featured a{ color:#FFFFFF !important; text-decoration:underline !important; }
/* Its icon disc flips: white disc, blue glyph. */
:is(#vcd, .card).featured .circle{ background:#FFFFFF !important; }
:is(#vcd, .card).featured .circle svg,
:is(#vcd, .card).featured .circle svg *{
  stroke:#0A66D6 !important; color:#0A66D6 !important;
}

/* The same treatment while a service card is HOVERED. The blue panel in
   the screenshots is not a class on the tile - it is a gradient that
   slides up behind the text on hover, so the rule has to key off :hover
   or the text stays grey on blue. */
@media (hover:hover) and (pointer:fine){
  :is(#vcd, .card):hover,
  :is(#vcd, .card):hover *,
  :is(#vcd, .card):hover h3,
  :is(#vcd, .card):hover h4,
  :is(#vcd, .card):hover p,
  :is(#vcd, .card):hover strong,
  :is(#vcd, .card):hover li{
    color:#FFFFFF !important;
  }
  :is(#vcd, .card):hover a{ color:#FFFFFF !important; text-decoration:underline !important; }
  /* The blue behind the text is drawn by .card::before. Setting the card's
     own background to the same blue as well means the white text is safe
     even if that overlay is ever switched off (it already is on touch
     devices, where ::before is set to display:none). */
  :is(#vcd, .card):hover{ background:#0A66D6 !important; }
  :is(#vcd, .card):hover .circle{ background:#FFFFFF !important; }
  :is(#vcd, .card):hover .circle svg,
  :is(#vcd, .card):hover .circle svg *{
    stroke:#0A66D6 !important; color:#0A66D6 !important;
  }
}

/* Checkout payment box. */
:is(#vcd, .pm-opt),
:is(#vcd, .pm-opt) *,
:is(#vcd, .pm-opt) .pm-label{
  color:#FFFFFF !important;
}
:is(#vcd, .pm-opt) .pm-label{ font-weight:700 !important; }
:is(#vcd, .pm-opt) .pm-cards svg text{ fill:inherit !important; }


/* ======================================================================
   5. THE NUMBERED STEPS - 1 2 3 4
   Both kinds: the checkout progress pills and the "How it works" discs.
   The digit was inheriting the section's dark grey, so a dark number sat
   on a dark blue disc.
   ====================================================================== */

/* "How it works" discs on the home and services pages. */
:is(#vcd, .proc-step) .n,
:is(#vcd, .proc-step) .n *{
  color:#FFFFFF !important;
  background:#0A66D6 !important;
  font-weight:700 !important;
}

/* Checkout / order-complete progress pills. */
:is(#vcd, .steps) li{               color:#54626F !important; background:#FFFFFF !important; }
:is(#vcd, .steps) li span{          color:#3C4753 !important; background:#DDE3EA !important; font-weight:700 !important; }
:is(#vcd, .steps) li.active{        color:#0B1622 !important; font-weight:700 !important; }
:is(#vcd, .steps) li.active span{   color:#FFFFFF !important; background:#0A66D6 !important; }
:is(#vcd, .steps) li.done{          color:#0B1622 !important; }
/* The old green was #2E8B63; white on it measured 4.2:1, just under. */
:is(#vcd, .steps) li.done span{     color:#FFFFFF !important; background:#1C7346 !important; }

/* Icon discs anywhere else on the site. */
:is(#vcd, .circle) svg,      :is(#vcd, .circle) svg *,
:is(#vcd, .icon-circle) svg, :is(#vcd, .icon-circle) svg *,
:is(#vcd, .f-icon) svg,      :is(#vcd, .f-icon) svg *{
  stroke:#FFFFFF !important; color:#FFFFFF !important; fill:none !important;
}


/* ======================================================================
   6. LIGHT CARDS AND PANELS
   ====================================================================== */

:is(#vcd, .card),        :is(#vcd, .card) p,
:is(#vcd, .co-main),     :is(#vcd, .co-main) p,
:is(#vcd, .summary),     :is(#vcd, .summary) p,
:is(#vcd, .oc-card),     :is(#vcd, .oc-card) p,
:is(#vcd, .plan-card),   :is(#vcd, .plan-card) p,
:is(#vcd, .faq-item),    :is(#vcd, .faq-item) p,
:is(#vcd, .val-item),    :is(#vcd, .val-item) p,
:is(#vcd, .proc-step),   :is(#vcd, .proc-step) p,
:is(#vcd, .t-card),      :is(#vcd, .t-card) p,
:is(#vcd, .review-box),  :is(#vcd, .review-box) p,
:is(#vcd, .legal-content) p,
:is(#vcd, .legal-content) li{
  color:#3C4753 !important;
}

:is(#vcd, .card) h2,      :is(#vcd, .card) h3,      :is(#vcd, .card) h4,
:is(#vcd, .co-main) h2,   :is(#vcd, .co-main) h3,
:is(#vcd, .summary) h2,   :is(#vcd, .summary) h3,
:is(#vcd, .oc-card) h1,   :is(#vcd, .oc-card) h2,   :is(#vcd, .oc-card) h3,
:is(#vcd, .plan-card) h3, :is(#vcd, .proc-step) h4, :is(#vcd, .val-item) h4,
:is(#vcd, .legal-content) h2,
:is(#vcd, .legal-content) h3,
:is(#vcd, .legal-content) strong,
:is(#vcd, .sec-title){
  color:#0B1622 !important;
}
:is(#vcd, .sec-sub), :is(#vcd, .muted), :is(#vcd, .ps-meta){ color:#54626F !important; }

/* Links on light. */
:is(#vcd, .legal-content) a,
:is(#vcd, .oc-spam) a,
:is(#vcd, .oc-help) a,
:is(#vcd, .fineprint) a,
:is(#vcd, .ps-delivery) a,
:is(#vcd, .terms-note) a,
:is(#vcd, .consent-item) span a{
  color:#0A5BC0 !important; text-decoration:underline !important;
}


/* ======================================================================
   7. ORDER COMPLETE PAGE
   The "What happens now" panel started life dark (#111E2D) and was later
   repainted light (#F0F6F6), but its text kept the pale on-dark colour,
   so the list sat at about 1.2:1. That is the washed out block in the
   screenshot. Panel stays light, text goes dark.
   ====================================================================== */

:is(#vcd, .oc-next){ background:#F0F6F6 !important; border:1px solid #DDE3EA !important; }
:is(#vcd, .oc-next) h2,
:is(#vcd, .oc-next) h3{ color:#0B1622 !important; }
:is(#vcd, .oc-next) p,
:is(#vcd, .oc-next) li,
:is(#vcd, .oc-next) ol,
:is(#vcd, .oc-next) ul{ color:#3C4753 !important; }
:is(#vcd, .oc-next) a{ color:#0A5BC0 !important; text-decoration:underline !important; }

:is(#vcd, .oc-spam){ background:#FFFFFF !important; border-left:4px solid #0A66D6 !important; }
:is(#vcd, .oc-spam) h3{ color:#0B1622 !important; }
:is(#vcd, .oc-spam) p{ color:#3C4753 !important; }

/* The order summary grid: labels were a pale uppercase grey. */
:is(#vcd, .oc-details) div{ background:#FFFFFF !important; }
:is(#vcd, .oc-details) span{ color:#54626F !important; font-weight:600 !important; }
:is(#vcd, .oc-details) strong{ color:#0B1622 !important; font-weight:700 !important; }

:is(#vcd, .oc-card) h1,
:is(#vcd, .oc-card) .oc-lead{ color:#0B1622 !important; }
:is(#vcd, .oc-card) .oc-lead{ color:#3C4753 !important; }
:is(#vcd, .oc-state){ background:#EAF2FD !important; border:1px solid #C3D9F5 !important; color:#0B1622 !important; }
:is(#vcd, .oc-state) strong{ color:#0B1622 !important; }
:is(#vcd, .oc-help){ color:#3C4753 !important; }

/* The ghost button next to Back to Home. */
:is(#vcd, .btn-ghost){
  color:#0A5BC0 !important;
  border:2px solid #0A5BC0 !important;
  background:#FFFFFF !important;
}
:is(#vcd, .btn-ghost):hover{ background:#0A5BC0 !important; color:#FFFFFF !important; }


/* ======================================================================
   8. FORM FIELDS - what you type has to be the darkest thing in the box
   ====================================================================== */

:is(#vcd, input), :is(#vcd, textarea), :is(#vcd, select),
:is(#vcd, .co-main) input,
:is(#vcd, .co-main) textarea,
:is(#vcd, .co-main) select,
:is(#vcd, .vin-form) input,
:is(#vcd, .rc-link) input{
  color:#0B1622 !important;
  background:#FFFFFF !important;
  border:1px solid #A9B7C4 !important;
  font-weight:500 !important;
  -webkit-text-fill-color:#0B1622 !important;   /* Safari and autofill */
  opacity:1 !important;
}
:is(#vcd, input)::placeholder,
:is(#vcd, textarea)::placeholder{
  color:#6E7C8A !important;
  -webkit-text-fill-color:#6E7C8A !important;
  opacity:1 !important;
}
/* Chrome paints autofilled fields pale yellow with its own text colour. */
:is(#vcd, input):-webkit-autofill,
:is(#vcd, input):-webkit-autofill:hover,
:is(#vcd, input):-webkit-autofill:focus,
:is(#vcd, textarea):-webkit-autofill,
:is(#vcd, select):-webkit-autofill{
  -webkit-text-fill-color:#0B1622 !important;
  -webkit-box-shadow:0 0 0 40px #FFFFFF inset !important;
  box-shadow:0 0 0 40px #FFFFFF inset !important;
  caret-color:#0B1622 !important;
}
:is(#vcd, input):focus,
:is(#vcd, textarea):focus,
:is(#vcd, select):focus{
  border-color:#0A66D6 !important;
  box-shadow:0 0 0 3px rgba(10,102,214,0.22) !important;
  outline:none !important;
}
:is(#vcd, input).err, :is(#vcd, select).err, :is(#vcd, textarea).err{
  border-color:#C0281D !important;
  box-shadow:0 0 0 3px rgba(192,40,29,0.16) !important;
}

/* Field labels and the required star. */
:is(#vcd, .co-main) label,
:is(#vcd, .vin-form) label{ color:#0B1622 !important; font-weight:600 !important; }
/* The payment row is itself a <label>, and it sits on blue, so the rule
   above was landing near-black on it at 3.37:1. Two wrappers outrank one
   wrapper plus an element name, so this puts it back to white. */
:is(#vcd, .co-main) :is(#vcd, .pm-opt),
:is(#vcd, .co-main) :is(#vcd, .pm-opt) *:not(input):not(select):not(textarea),
:is(#vcd, .co-main) :is(#vcd, .pm-opt) label,
:is(#vcd, .co-main) :is(#vcd, .pm-opt) span{ color:#FFFFFF !important; }
:is(#vcd, .req){ color:#C0281D !important; }
:is(#vcd, .field-msg), :is(#vcd, .err-msg){ color:#C0281D !important; }

/* The two consent rows. */
:is(#vcd, .consent-item),
:is(#vcd, .consent-item) span,
:is(#vcd, .consent-item) label{ color:#3C4753 !important; }
:is(#vcd, .consent-item):has(input:checked){
  border-color:#1C7346 !important; background:#F1FAF5 !important;
}


/* ======================================================================
   9. TABLES - white on the navy header row, dark in the body
   ====================================================================== */

:is(#vcd, table) thead th,
:is(#vcd, table) th,
:is(#vcd, thead) th,
:is(#vcd, table) thead th *,
:is(#vcd, table) th *{
  color:#FFFFFF !important; background:#0B1622 !important;
}
:is(#vcd, table) td,
:is(#vcd, table) tbody td{ color:#3C4753 !important; }
:is(#vcd, table) tbody td strong,
:is(#vcd, table) tbody th{ color:#0B1622 !important; }


/* ======================================================================
   10. SAMPLE REPORT CARD - navy head band, light body
   ====================================================================== */

:is(#vcd, .rc-top), :is(#vcd, .rc-top) *,
:is(#vcd, .vs-card-top), :is(#vcd, .vs-card-top) *{ color:#FFFFFF !important; }
/* .rc-note sits inside the navy head band; .vs-note sits under the card on
   the light page, so the two cannot share a colour. */
:is(#vcd, .rc-top) .rc-note{ color:#C8D6E4 !important; }
:is(#vcd, .vs-note){ color:#54626F !important; }
:is(#vcd, .rc-vinbadge), :is(#vcd, .vs-vin){
  color:#FFFFFF !important; border-color:#5AA6FF !important;
}
:is(#vcd, .rc-section) h4{ color:#0A5BC0 !important; border-bottom-color:#0A66D6 !important; }
:is(#vcd, .rc-row) span:first-child{ color:#0B1622 !important; }
:is(#vcd, .rc-row) span:last-child{ color:#54626F !important; }


/* ======================================================================
   12. DARK ISLANDS SITTING INSIDE LIGHT PAGES
   The legal pages are light, but each one ends with a navy contact card
   nested inside .legal-content. Because it is nested, the light rules in
   section 6 were reaching into it and painting near-black text on navy.
   These rules sit after section 6 and win on source order, so the island
   keeps its own colours.
   ====================================================================== */

:is(#vcd, .legal-contact),
:is(#vcd, .legal-contact) *,
:is(#vcd, .legal-contact) h2,
:is(#vcd, .legal-contact) h3,
:is(#vcd, .legal-contact) h4,
:is(#vcd, .legal-contact) strong,
:is(#vcd, .legal-content) .legal-contact,
:is(#vcd, .legal-content) .legal-contact *,
:is(#vcd, .legal-content) .legal-contact h3,
:is(#vcd, .legal-content) .legal-contact strong{
  color:#FFFFFF !important;
}
:is(#vcd, .legal-contact) p,
:is(#vcd, .legal-content) .legal-contact p{ color:#C8D6E4 !important; }
:is(#vcd, .legal-contact) a,
:is(#vcd, .legal-content) .legal-contact a{
  color:#8FC2FF !important; text-decoration:underline !important;
}

/* .legal-note is the navy "read this before ordering" box on the legal
   pages. It is nested inside .legal-content too, so its bold lead-in was
   coming out near-black on navy at 1.08:1. */
:is(#vcd, .legal-note),
:is(#vcd, .legal-note) *,
:is(#vcd, .legal-note) h2,
:is(#vcd, .legal-note) h3,
:is(#vcd, .legal-note) h4,
:is(#vcd, .legal-note) strong,
:is(#vcd, .legal-note) b,
:is(#vcd, .legal-note) li,
:is(#vcd, .legal-content) .legal-note,
:is(#vcd, .legal-content) .legal-note *,
:is(#vcd, .legal-content) .legal-note strong,
:is(#vcd, .legal-content) .legal-note b{
  color:#FFFFFF !important;
}
:is(#vcd, .legal-note) p,
:is(#vcd, .legal-content) .legal-note p{ color:#C8D6E4 !important; }
:is(#vcd, .legal-note) a,
:is(#vcd, .legal-content) .legal-note a{
  color:#8FC2FF !important; text-decoration:underline !important;
}

/* The blue callout strip used on the legal pages and the about page. */
:is(#vcd, .legal-badge),
:is(#vcd, .legal-badge) *,
:is(#vcd, .legal-badge) strong,
:is(#vcd, .legal-content) .legal-badge,
:is(#vcd, .legal-content) .legal-badge *,
:is(#vcd, .legal-content) .legal-badge strong,
:is(#vcd, .orange-box),
:is(#vcd, .orange-box) *,
:is(#vcd, .orange-box) h2,
:is(#vcd, .orange-box) h3,
:is(#vcd, .orange-box) p,
:is(#vcd, .orange-box) strong{
  color:#FFFFFF !important;
}
:is(#vcd, .orange-box) a,
:is(#vcd, .legal-badge) a{ color:#FFFFFF !important; text-decoration:underline !important; }

/* A button keeps its own white-on-blue wherever it lands, including
   inside the dark CTA band where section 1 would otherwise tint it. */
:is(#vcd, .pr-cta) a.btn,      :is(#vcd, .pr-cta) a.btn *,
:is(#vcd, .pr-cta) .btn,       :is(#vcd, .pr-cta) .btn *,
:is(#vcd, .why) .btn,          :is(#vcd, .why) .btn *,
:is(#vcd, .hero) .btn,         :is(#vcd, .hero) .btn *,
:is(#vcd, footer) .btn,        :is(#vcd, footer) .btn *,
:is(#vcd, .legal-contact) .btn,:is(#vcd, .legal-contact) .btn *,
:is(#vcd, .orange-box) .btn,   :is(#vcd, .orange-box) .btn *{
  color:#FFFFFF !important; text-decoration:none !important;
}
/* The solid buttons. Stated in hex rather than through the --orange
   variable, which is a leftover name from the pre-rebrand theme and is
   easy to change by accident. */
:is(#vcd, .btn),
:is(#vcd, .btn-place),
:is(#vcd, .btn-download),
:is(#vcd, .ps-dl),
:is(#vcd, .send-btn){
  background:#0A66D6 !important;
  border-color:#0A66D6 !important;
}

/* Button hover states. Several older rules turned the hover state into
   dark navy text on dark navy, or dark navy on blue - 3.4:1 and 1.2:1.
   The button stays the brand blue it already is; only the hover shade
   moves, and the text stays white throughout. */
:is(#vcd, .btn):hover,          :is(#vcd, .btn):hover *,
:is(#vcd, .btn-place):hover,    :is(#vcd, .btn-place):hover *,
:is(#vcd, .btn-download):hover, :is(#vcd, .btn-download):hover *,
:is(#vcd, .ps-dl):hover,        :is(#vcd, .ps-dl):hover *,
:is(#vcd, .send-btn):hover,     :is(#vcd, .send-btn):hover *{
  background:#0850AC !important;
  border-color:#0850AC !important;
  color:#FFFFFF !important;
}
:is(#vcd, .hero) .btn,
:is(#vcd, .pr-cta) .btn{
  background:#0A66D6 !important; color:#FFFFFF !important;
  border:1px solid #4E97E8 !important;   /* defines the edge against navy */
}
:is(#vcd, .hero) .btn:hover,
:is(#vcd, .pr-cta) .btn:hover{
  background:#0850AC !important; color:#FFFFFF !important;
  border-color:#4E97E8 !important;
}
/* The outlined secondary button: blue text on white, white on dark. */
:is(#vcd, .btn-ghost), :is(#vcd, .btn-ghost) *{ color:#0A5BC0 !important; }
:is(#vcd, .btn-ghost):hover{ background:#E7F0FC !important; color:#083C82 !important; }


/* ======================================================================
   11. SAFETY NET
   If a new block ever lands on the ink or the blue without a rule of its
   own, these two catch it rather than letting grey-on-navy through.
   ====================================================================== */

[style*="background:#0B1622"], [style*="background:#111E2D"],
[style*="background: #0B1622"], [style*="background: #111E2D"]{ color:#FFFFFF !important; }

@media (prefers-color-scheme: dark){
  /* The site is light-only. Without this, some browsers repaint form
     controls and headings and quietly undo everything above. */
  :is(#vcd, html), :is(#vcd, body){ color-scheme:light only !important; background:#F4F6F8 !important; }
  :is(#vcd, input), :is(#vcd, textarea), :is(#vcd, select){
    color:#0B1622 !important; background:#FFFFFF !important;
    -webkit-text-fill-color:#0B1622 !important;
  }
}

@media print{
  :is(#vcd, .sub-header), :is(#vcd, .m-nav), :is(#vcd, footer){ display:none !important; }
  :is(#vcd, body), :is(#vcd, body) *{ color:#000000 !important; background:#FFFFFF !important; }
}

/* ----------------------------------------------------------------------
   ORDER COMPLETE: the tick follows the state
   It used to render green the instant the page loaded, so a customer whose
   payment was still settling saw a green success tick above the words
   "Confirming your payment" and a note underneath. Three different signals
   at once, which is what made the note read like a warning.
   Blue while we are checking, green only once Stripe has confirmed.
   ---------------------------------------------------------------------- */
:is(#vcd, .oc-tick-wait) .oc-circ,
:is(#vcd, .oc-tick-info) .oc-circ{ stroke:#0A66D6 !important; }
:is(#vcd, .oc-tick-wait) .oc-check,
:is(#vcd, .oc-tick-info) .oc-check{ stroke:#0A66D6 !important; }
:is(#vcd, .oc-tick-ok) .oc-circ,
:is(#vcd, .oc-tick-ok) .oc-check{ stroke:#1C7346 !important; }

/* The three notice tones. All readable, none of them alarming: there is no
   red on this page, because nothing that happens here is the customer's
   fault or their emergency. */
:is(#vcd, .oc-state){
  background:#EAF2FC !important;
  border-left:3px solid #0A66D6 !important;
  color:#3C4753 !important;
}
:is(#vcd, .oc-state) strong{ color:#0B1622 !important; }
:is(#vcd, .oc-state) a{ color:#0A5BC0 !important; text-decoration:underline !important; }

:is(#vcd, .oc-state).ok{
  background:#E8F5EE !important;
  border-left-color:#1C7346 !important;
}
:is(#vcd, .oc-state).ok strong{ color:#12502F !important; }

:is(#vcd, .oc-state).wait{
  background:#EAF2FC !important;
  border-left-color:#0A66D6 !important;
}
:is(#vcd, .oc-state).bad{
  background:#EAF2FC !important;
  border-left-color:#0A66D6 !important;
}

/* ----------------------------------------------------------------------
   FOOTER TRUST BAR
   The legal entity, where the data comes from, and how to reach a person.
   All three are things a card issuer looks for in a dispute, and a cautious
   buyer looks for before paying. Sits on the dark footer, so everything
   here is checked against #0B1622.
   ---------------------------------------------------------------------- */
:is(#vcd, .f-trust){
  margin:26px 0 0 !important;
  padding:20px 0 4px !important;
  border-top:1px solid rgba(255,255,255,0.12) !important;
}
:is(#vcd, .f-trust) p{ margin:0 0 10px !important; line-height:1.65 !important; }

:is(#vcd, .f-entity){
  color:#FFFFFF !important;          /* 17.9:1 on the footer ink */
  font-size:.94rem !important;
}
:is(#vcd, .f-entity) strong{ color:#FFFFFF !important; }

:is(#vcd, .f-sources){
  color:#C7D4E2 !important;          /* 11.4:1 - quieter, still easy to read */
  font-size:.86rem !important;
  max-width:70ch !important;
}
:is(#vcd, .f-contact){
  color:#C7D4E2 !important;
  font-size:.88rem !important;
}
:is(#vcd, .f-contact) a{
  color:#7FB6FF !important;          /* 6.1:1 on the footer ink */
  text-decoration:none !important;
}
:is(#vcd, .f-contact) a:hover{ text-decoration:underline !important; }

:is(#vcd, .copyright){
  color:#A9BDD0 !important;          /* 8.1:1 */
  font-size:.82rem !important;
}

/* ----------------------------------------------------------------------
   ORDER COMPLETE: the two buttons at the bottom
   "Back to Home" and "View Sample Report" were built from different box
   models, so they never lined up: the solid one had border:none with 15px
   padding, the outlined one had a 2px border with 14px padding. Two pixels
   of border on one and none on the other is enough to make the pair look
   crooked, and the heavy drop shadow on the solid one pushed it lower still.

   The fix is to give both the SAME box: same padding, same 2px border (the
   solid one's is just its own colour so it stays invisible), same height,
   same type. Then centre them as a pair.
   ---------------------------------------------------------------------- */
:is(#vcd, .oc-actions){
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:14px !important;
  flex-wrap:wrap !important;
  margin-top:32px !important;
}

:is(#vcd, .oc-actions) .btn-place,
:is(#vcd, .oc-actions) .btn-ghost{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-sizing:border-box !important;
  width:auto !important;
  min-width:220px !important;
  height:52px !important;              /* one height, so the pair sits level */
  margin:0 !important;
  padding:0 26px !important;
  border-width:2px !important;
  border-style:solid !important;
  border-radius:100px !important;
  font-size:1rem !important;
  font-weight:600 !important;
  line-height:1 !important;
  text-align:center !important;
  text-decoration:none !important;
  transform:none !important;           /* no lift, or one drifts off the line */
}

/* The solid button: its border matches its fill, so it reads as borderless
   while still occupying the same box as the outlined one. */
:is(#vcd, .oc-actions) .btn-place{
  background:#0A66D6 !important;
  border-color:#0A66D6 !important;
  color:#FFFFFF !important;
  box-shadow:0 6px 18px rgba(10,102,214,0.22) !important;
}
:is(#vcd, .oc-actions) .btn-place:hover{
  background:#0850AC !important;
  border-color:#0850AC !important;
  color:#FFFFFF !important;
  transform:none !important;
}

/* The outlined button. */
:is(#vcd, .oc-actions) .btn-ghost{
  background:transparent !important;
  border-color:#C0CDDA !important;
  color:#0A5BC0 !important;            /* 6.4:1 on white */
  box-shadow:none !important;
}
:is(#vcd, .oc-actions) .btn-ghost:hover{
  background:#EAF2FC !important;
  border-color:#0A66D6 !important;
  color:#083C82 !important;
  transform:none !important;
}

/* On a narrow phone they stack, and then full width looks deliberate. */
@media (max-width:560px){
  :is(#vcd, .oc-actions) .btn-place,
  :is(#vcd, .oc-actions) .btn-ghost{
    width:100% !important;
    min-width:0 !important;
  }
}