/* ==========================================================================
   ROADPROCONNECT - Halloween "After Dark" edition
   --------------------------------------------------------------------------
   Seasonal skin for the home page and the checkout pages ONLY.

   Every rule is scoped under body.hw, which only those pages set, so no
   other page of the site can pick any of this up. Nothing here changes
   markup hooks, ids, form fields or JavaScript: it is presentation only and
   loads after style.css / checkout-pro.css to override them.

   Revert: Admin > Settings > Theme > Default (the file is then never loaded).
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
body.hw {
    --hw-ink:      #0D0A12;   /* page */
    --hw-ink-2:    #120E19;   /* alternate bands */
    --hw-plum:     #1B1424;   /* cards */
    --hw-plum-2:   #251A33;   /* raised / featured */
    --hw-line:     rgba(244, 236, 226, .10);
    --hw-line-2:   rgba(244, 236, 226, .18);

    --hw-ember:    #F2743B;   /* the one accent */
    --hw-ember-2:  #FF9B63;   /* hover, highlights on dark */
    --hw-ember-3:  #FFC39E;   /* prices, large numerals */
    --hw-ember-deep: #C4511C; /* hover fills (white text: 4.9:1) */
    --hw-on-ember: #1B0F0A;   /* text on ember gradients (9:1); white would be 3:1 */

    --hw-bone:     #F4ECE2;   /* primary text */
    --hw-bone-2:   #D5CABE;   /* secondary text */
    --hw-muted:    #9C90A6;   /* captions */
    --hw-ok:       #8BD5A6;
    --hw-bad:      #FF8A8A;

    --hw-glow:     0 0 0 1px rgba(242, 116, 59, .35), 0 18px 48px -18px rgba(242, 116, 59, .55);
    --hw-shadow:   0 1px 0 rgba(255, 255, 255, .03) inset, 0 24px 60px -30px rgba(3, 1, 8, .9);
    --hw-ease:     cubic-bezier(.2, .7, .3, 1);
    --hw-display:  "Playfair Display", Georgia, "Times New Roman", serif;

    /* style.css reads these */
    --primary:   var(--hw-ember);
    --secondary: var(--hw-bone);
    --lightGray: var(--hw-plum);
    --textGray:  var(--hw-bone-2);

    background: var(--hw-ink);
    color: var(--hw-bone);
    color-scheme: dark;
}

/* checkout-pro.css declares its palette on these elements, so the dark
   palette has to be declared on them too (an inherited value would lose). */
body.hw .tvx-pricing,
body.hw .tvx-checkout,
body.hw .tvx-modal {
    --tvx-primary:      var(--hw-ember);
    --tvx-primary-btn:  var(--hw-ember-deep);
    --tvx-primary-dark: #A8431A;
    --tvx-primary-soft: rgba(242, 116, 59, .12);
    --tvx-primary-line: rgba(242, 116, 59, .40);
    --tvx-accent:       var(--hw-ember);
    --tvx-accent-btn:   var(--hw-ember-deep);
    --tvx-accent-soft:  rgba(242, 116, 59, .10);
    --tvx-navy:         #120D18;
    --tvx-green:        var(--hw-ok);
    --tvx-green-soft:   rgba(139, 213, 166, .12);
    --tvx-bg:           var(--hw-plum);
    --tvx-bg-alt:       var(--hw-ink);
    --tvx-text:         var(--hw-bone);
    --tvx-muted:        var(--hw-muted);
    --tvx-border:       var(--hw-line-2);
    --tvx-error:        var(--hw-bad);
    --tvx-shadow-sm:    0 1px 2px rgba(0, 0, 0, .4);
    --tvx-shadow:       0 1px 2px rgba(0, 0, 0, .35), 0 12px 32px -10px rgba(0, 0, 0, .6);
    --tvx-shadow-lg:    0 2px 4px rgba(0, 0, 0, .4), 0 24px 60px -18px rgba(0, 0, 0, .75);
    --tvx-grad:         linear-gradient(135deg, #F2743B 0%, #C4511C 100%);
    --tvx-grad-hi:      linear-gradient(135deg, #FF8B55 0%, #D45B24 100%);
    --tvx-grad-gold:    linear-gradient(135deg, #F2743B 0%, #C4511C 100%);
}

/* film grain: fixed, non-interactive, breaks the digital flatness */
body.hw::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: .045;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    background-size: 160px 160px;
}

body.hw ::selection { background: rgba(242, 116, 59, .45); color: #fff; }

body.hw a { color: var(--hw-ember-2); }
body.hw a:hover, body.hw a:focus { color: var(--hw-ember-3); }

body.hw :focus-visible {
    outline: 2px solid var(--hw-ember);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ---------- 2. Header ---------------------------------------------------- */
body.hw #HeaderID,
body.hw #HeaderID.content_fixed {
    background: rgba(13, 10, 18, .72);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
    border-bottom: 1px solid var(--hw-line);
    box-shadow: 0 10px 30px -20px rgba(0, 0, 0, .8);
}
/* keep the sticky header under Bootstrap's modals (1050/1055) so a modal's close button is never covered */
body.hw #HeaderID.content_fixed { z-index: 1040; }
body.hw nav .main-logo a span { color: var(--hw-bone); }
body.hw nav .main-logo a span i { color: var(--hw-ember) !important; }
body.hw nav .main-logo a img { filter: drop-shadow(0 0 10px rgba(242, 116, 59, .35)); }
body.hw .top-sec-menu li a {
    color: var(--hw-bone-2);
    letter-spacing: .08em;
    transition: color .2s var(--hw-ease);
}
body.hw .top-sec-menu li a:hover,
body.hw .top-sec-menu li a.active { color: var(--hw-bone); }
body.hw .top-sec-menu li a.active { position: relative; }
body.hw .top-sec-menu li a.active::after {
    content: "";
    position: absolute;
    left: 10px; right: 10px; bottom: -6px;
    height: 2px;
    background: var(--hw-ember);
    border-radius: 2px;
}
body.hw .mob_nav button { background: transparent; color: var(--hw-bone); }
body.hw .row.mob_navigation { background: var(--hw-ink-2) !important; }
body.hw .mob_navigation ul li { border-top-color: var(--hw-line); }
body.hw .mob_navigation ul li a { color: var(--hw-bone); }
body.hw .booknow {
    background: var(--hw-ember) !important;
    color: var(--hw-on-ember) !important;
    border-color: transparent !important;
}
body.hw .prepaid-reports-left p, body.hw .prepaid-reports-left span { color: var(--hw-bone); }

/* ---------- 3. Hero ------------------------------------------------------ */
body.hw #topBanner {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(ellipse 60% 55% at 78% 22%, rgba(255, 196, 140, .22) 0%, rgba(255, 196, 140, 0) 60%),
        radial-gradient(ellipse 80% 60% at 20% 110%, rgba(66, 36, 90, .55) 0%, rgba(66, 36, 90, 0) 65%),
        linear-gradient(180deg, #110C18 0%, #0D0A12 100%);
    color: var(--hw-bone);
}
/* the moon, one soft disc behind the vehicle */
body.hw #topBanner::before {
    content: "";
    position: absolute;
    top: 3%;
    right: 3%;
    width: clamp(160px, 22vw, 300px);
    aspect-ratio: 1;
    border-radius: 50%;
    background:
        radial-gradient(circle at 38% 36%, #FFF7EA 0%, #F6E6CF 38%, #E2C9AC 62%, rgba(226, 201, 172, .85) 100%);
    box-shadow:
        0 0 60px 10px rgba(255, 224, 190, .22),
        0 0 160px 60px rgba(255, 190, 130, .10);
    opacity: .9;
    pointer-events: none;
}
/* fog along the ground */
body.hw #topBanner::after {
    content: "";
    position: absolute;
    left: -10%;
    right: -10%;
    bottom: -8%;
    height: 42%;
    background:
        radial-gradient(ellipse 50% 60% at 30% 100%, rgba(214, 190, 220, .14) 0%, rgba(214, 190, 220, 0) 70%),
        radial-gradient(ellipse 60% 70% at 75% 100%, rgba(242, 116, 59, .10) 0%, rgba(242, 116, 59, 0) 70%);
    filter: blur(18px);
    pointer-events: none;
}
body.hw #topBanner .container { position: relative; z-index: 1; }
body.hw .topBaannerNew { padding-top: 56px !important; padding-bottom: 72px !important; }

body.hw .hw-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    padding: 6px 14px 6px 8px;
    border: 1px solid var(--hw-line-2);
    border-radius: 999px;
    background: rgba(255, 255, 255, .04);
    color: var(--hw-bone-2);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
}
body.hw .hw-eyebrow i {
    width: 16px; height: 16px;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 40%, #FFF2DF, #E9C79E 70%);
    box-shadow: 0 0 12px rgba(255, 220, 170, .6);
    position: relative;
    overflow: hidden;
}
body.hw .hw-eyebrow i::after {        /* crescent */
    content: "";
    position: absolute;
    top: -3px; left: 5px;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: #110C18;
}

body.hw .topBaannerNew h3 {
    font-family: var(--hw-display);
    font-size: clamp(38px, 4.6vw, 62px);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -.02em;
    color: var(--hw-bone);
    text-wrap: balance;
    margin-bottom: 14px !important;
}
body.hw .topBaannerNew h3 em {
    font-style: italic;
    font-weight: 600;
    color: var(--hw-ember-2);
}
body.hw .topBaannerNew h4 {
    font-size: 15px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: var(--hw-bone-2);
    max-width: 52ch;
    line-height: 1.6;
}
body.hw .topBaannerNew .newsBox p { color: var(--hw-muted); font-size: 14px; line-height: 1.65; max-width: 56ch; }

/* VIN search: a glass tray holding the input and button */
body.hw .topBaannerNew .newsBox form {
    padding: 8px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--hw-line-2);
    box-shadow: var(--hw-shadow);
    max-width: 560px;
}
body.hw .topBaannerNew .inputBx {
    flex-direction: row !important;
    gap: 8px;
}
body.hw .topBaannerNew .inputBx input {
    flex: 1 1 auto;
    width: auto !important;
    min-height: 54px !important;
    border-radius: 12px !important;
    background: rgba(13, 10, 18, .85);
    border: 1px solid transparent;
    color: var(--hw-bone);
    font-weight: 600;
    letter-spacing: .06em;
    transition: border-color .2s var(--hw-ease), box-shadow .2s var(--hw-ease);
}
body.hw .topBaannerNew .inputBx input::placeholder { color: var(--hw-muted); letter-spacing: 0; font-weight: 500; }
body.hw .topBaannerNew .inputBx input:focus {
    outline: none;
    border-color: var(--hw-ember);
    box-shadow: 0 0 0 3px rgba(242, 116, 59, .25);
}
body.hw .topBaannerNew .inputBx button {
    flex: 0 0 auto;
    width: auto !important;
    min-height: 54px !important;
    padding: 0 26px;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #FF9B63 0%, #F2743B 55%, #D95F28 100%);
    color: var(--hw-on-ember);
    font-weight: 800;
    letter-spacing: .06em;
    box-shadow: 0 10px 24px -10px rgba(242, 116, 59, .7), inset 0 1px 0 rgba(255, 255, 255, .22);
    transition: transform .25s var(--hw-ease), filter .25s var(--hw-ease), box-shadow .25s var(--hw-ease);
}
body.hw .topBaannerNew .inputBx button:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 14px 30px -10px rgba(242, 116, 59, .85), inset 0 1px 0 rgba(255, 255, 255, .22); }
body.hw .topBaannerNew .inputBx button:active { transform: translateY(1px) scale(.99); }
body.hw .topBaannerNew .find-vin { color: var(--hw-bone-2); }
body.hw .topBaannerNew .find-vin a { color: var(--hw-ember-2); font-size: 14px; border-bottom: 1px solid rgba(255, 155, 99, .35); }
body.hw .topBaannerNew .find-vin span { color: var(--hw-muted); }
body.hw .alert.find-vin { background: rgba(255, 138, 138, .08); border: 1px solid rgba(255, 138, 138, .35); border-radius: 12px; }
body.hw .alert.find-vin p { color: var(--hw-bad) !important; }

/* the vehicle: keep the existing scan animation, retint its light from
   cyan to candle-light */
body.hw .tvx-hero-glow { background: radial-gradient(circle, rgba(242, 116, 59, .30) 0%, rgba(242, 116, 59, .10) 45%, rgba(242, 116, 59, 0) 70%); }
body.hw .tvx-hero-glow::after { background: radial-gradient(circle, rgba(120, 70, 160, .22) 0%, rgba(120, 70, 160, 0) 68%); }
body.hw .tvx-hero-ring { border-color: rgba(255, 196, 140, .40); }
body.hw .tvx-hero-ring-2::after { border-color: rgba(255, 155, 99, .34); }
body.hw .tvx-hero-scan { background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 195, 158, .30) 42%, rgba(255, 255, 255, .08) 52%, rgba(255, 255, 255, 0) 100%); }
body.hw .tvx-hero-scan::after { background: linear-gradient(90deg, transparent, rgba(255, 210, 170, .9), transparent); box-shadow: 0 0 12px rgba(255, 155, 99, .8); }
body.hw .tvx-hero-road { background: radial-gradient(ellipse at center, rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, 0) 70%); }
body.hw .tvx-hero-anim::before {
    background:
        linear-gradient(#FFC39E, #FFC39E) left top / 26px 2px no-repeat,
        linear-gradient(#FFC39E, #FFC39E) left top / 2px 26px no-repeat,
        linear-gradient(#FFC39E, #FFC39E) right top / 26px 2px no-repeat,
        linear-gradient(#FFC39E, #FFC39E) right top / 2px 26px no-repeat,
        linear-gradient(#FFC39E, #FFC39E) left bottom / 26px 2px no-repeat,
        linear-gradient(#FFC39E, #FFC39E) left bottom / 2px 26px no-repeat,
        linear-gradient(#FFC39E, #FFC39E) right bottom / 26px 2px no-repeat,
        linear-gradient(#FFC39E, #FFC39E) right bottom / 2px 26px no-repeat;
}
body.hw .tvx-hero-anim::after {
    background-image:
        linear-gradient(rgba(255, 195, 158, .13) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 195, 158, .13) 1px, transparent 1px);
}
body.hw .tvx-hero-img { filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .7)) brightness(.92) contrast(1.04); }

/* ---------- 3b. Hero visual: the car, lit ------------------------------ */
/* A photographed car in a double-bezel frame. Layers, bottom to top: the
   photo (slow drift), a canvas of warm volumetric light (technique adapted
   from 21st.dev "Beams Background"), two fog blobs, the VIN scan sweep, a
   vignette, and three glass chips that name what the report checks. */
body.hw .bnr_img { padding-left: 0 !important; }
body.hw .hw-visual { position: relative; max-width: 640px; margin: 0 0 0 auto; }
body.hw .hw-visual-shell {
    padding: 8px;
    border-radius: 28px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02));
    border: 1px solid var(--hw-line-2);
    box-shadow: var(--hw-shadow), 0 50px 100px -50px rgba(242, 116, 59, .40);
    transform: rotate(-1.2deg);
    animation: hw-float 9s ease-in-out infinite;
}
body.hw .hw-visual-core {
    position: relative;
    overflow: hidden;
    border-radius: 21px;
    aspect-ratio: 3 / 2;
    background: #0B0910;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
    isolation: isolate;
}
body.hw .hw-slides { position: absolute; inset: 0; }
body.hw .hw-slide {
    position: absolute; inset: 0;
    opacity: 0;
    animation: hw-slide 24s linear infinite;
    will-change: opacity;
}
/* 4 slides x 6 s. Each fades in over 1 s while the previous fades out, so the
   two opacities always sum to 1 and nothing shows through. The first slide
   starts 1 s into its cycle so it is already visible on load. */
body.hw .hw-slide-car   { animation-delay: -1s; }
body.hw .hw-slide-truck { animation-delay: 5s; }
body.hw .hw-slide-rv    { animation-delay: 11s; }
body.hw .hw-slide-moto  { animation-delay: 17s; }
body.hw .hw-car {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    filter: sepia(.32) hue-rotate(-16deg) saturate(1.4) contrast(1.06) brightness(.96);
    transform: scale(1.04);
    animation: hw-ken 18s ease-in-out infinite alternate;
    will-change: transform;
}
body.hw .hw-slide-truck .hw-car { filter: sepia(.25) hue-rotate(-12deg) saturate(1.3) contrast(1.08) brightness(1.35); }
body.hw .hw-slide-rv .hw-car    { filter: sepia(.45) hue-rotate(-22deg) saturate(1.3) contrast(1.05) brightness(.95); }
body.hw .hw-slide-moto .hw-car  { filter: sepia(.1) saturate(1.15) contrast(1.04) brightness(.95); }
body.hw .hw-slide-rv .hw-car    { animation-direction: alternate-reverse; }
body.hw .hw-slide-moto .hw-car  { animation-delay: -6s; }
@keyframes hw-slide {
    0%   { opacity: 0; }
    4.2% { opacity: 1; }
    25%  { opacity: 1; }
    29.2%, 100% { opacity: 0; }
}
/* legend: the active type lights up in step with the slides */
body.hw .hw-types {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
    margin: 18px 0 0; padding: 0; list-style: none;
}
body.hw .hw-types li {
    padding: 6px 13px;
    border: 1px solid var(--hw-line);
    border-radius: 999px;
    color: var(--hw-muted);
    font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    animation: hw-type 24s linear infinite;
}
body.hw .hw-types .hw-type-car   { animation-delay: -1s; }
body.hw .hw-types .hw-type-truck { animation-delay: 5s; }
body.hw .hw-types .hw-type-rv    { animation-delay: 11s; }
body.hw .hw-types .hw-type-moto  { animation-delay: 17s; }
@keyframes hw-type {
    0%   { color: var(--hw-muted); border-color: var(--hw-line); background: transparent; }
    4.2%, 25% { color: var(--hw-ember-2); border-color: rgba(242, 116, 59, .5); background: rgba(242, 116, 59, .10); }
    29.2%, 100% { color: var(--hw-muted); border-color: var(--hw-line); background: transparent; }
}
body.hw .hw-beams {
    position: absolute; inset: 0; z-index: 1;
    width: 100%; height: 100%;
    mix-blend-mode: screen;
    opacity: .8;
    filter: blur(7px);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 48%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 48%);
    pointer-events: none;
}
body.hw .hw-fog {
    position: absolute; z-index: 2;
    width: 75%; height: 55%;
    bottom: -14%;
    border-radius: 50%;
    filter: blur(30px);
    mix-blend-mode: screen;
    pointer-events: none;
}
body.hw .hw-fog-1 { left: -18%; background: radial-gradient(ellipse, rgba(214, 190, 220, .17), transparent 70%); animation: hw-fog 22s ease-in-out infinite alternate; }
body.hw .hw-fog-2 { right: -22%; background: radial-gradient(ellipse, rgba(242, 116, 59, .15), transparent 70%); animation: hw-fog 26s ease-in-out -9s infinite alternate-reverse; }
body.hw .hw-scan {
    position: absolute; z-index: 3;
    top: 0; bottom: 0;
    width: 18%; left: -20%;
    background: linear-gradient(90deg, transparent, rgba(255, 195, 158, .08) 40%, rgba(255, 214, 180, .40) 50%, rgba(255, 195, 158, .08) 60%, transparent);
    animation: hw-scan 7.5s cubic-bezier(.45, .05, .55, .95) infinite;
    pointer-events: none;
    will-change: transform, opacity;
}
body.hw .hw-scan::after {
    content: "";
    position: absolute; top: 0; bottom: 0; left: 50%;
    width: 1px;
    background: rgba(255, 224, 200, .9);
    box-shadow: 0 0 14px rgba(255, 155, 99, .9);
}
body.hw .hw-vignette {
    position: absolute; inset: 0; z-index: 4;
    pointer-events: none;
    background:
        radial-gradient(ellipse 85% 80% at 55% 50%, transparent 55%, rgba(5, 3, 8, .70) 100%),
        linear-gradient(180deg, rgba(13, 10, 18, .35) 0%, transparent 28%, transparent 72%, rgba(13, 10, 18, .60) 100%);
}
body.hw .hw-chips {
    position: absolute; z-index: 5;
    right: 4.5%; bottom: 7%;
    display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
}
body.hw .hw-chip {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 13px 7px 8px;
    border-radius: 999px;
    background: rgba(27, 20, 36, .74);
    border: 1px solid var(--hw-line-2);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: var(--hw-bone-2);
    font-size: 11.5px; font-weight: 600; letter-spacing: .02em; white-space: nowrap;
    box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .9);
    opacity: 0;
    transform: translate3d(-10px, 0, 0);
    animation: hw-chip .8s var(--hw-ease) forwards;
}
body.hw .hw-chip b { font-weight: 800; color: var(--hw-bone); }
body.hw .hw-chip i { position: relative; flex: 0 0 16px; width: 16px; height: 16px; border-radius: 50%; background: rgba(139, 213, 166, .16); }
body.hw .hw-chip i::after { content: ""; position: absolute; left: 5px; top: 3px; width: 5px; height: 8px; border: solid var(--hw-ok); border-width: 0 2px 2px 0; transform: rotate(45deg); }
body.hw .hw-chip-1 { animation-delay: 1.1s; }
body.hw .hw-chip-2 { animation-delay: 1.9s; margin-right: 14px; }
body.hw .hw-chip-3 { animation-delay: 2.7s; margin-right: 6px; }
@keyframes hw-float { 0%, 100% { transform: translate3d(0, 0, 0) rotate(-1.2deg); } 50% { transform: translate3d(0, -8px, 0) rotate(-1.2deg); } }
@keyframes hw-ken   { from { transform: scale(1.04) translate3d(0, 0, 0); } to { transform: scale(1.10) translate3d(-1.5%, 1%, 0); } }
@keyframes hw-fog   { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(12%, -6%, 0); } }
@keyframes hw-scan  { 0% { transform: translate3d(0, 0, 0); opacity: 0; } 6% { opacity: 1; } 52% { transform: translate3d(680%, 0, 0); opacity: 1; } 58% { opacity: 0; } 100% { transform: translate3d(680%, 0, 0); opacity: 0; } }
@keyframes hw-chip  { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    body.hw .hw-visual-shell, body.hw .hw-car, body.hw .hw-fog, body.hw .hw-scan, body.hw .hw-slide, body.hw .hw-types li { animation: none; }
    body.hw .hw-slide-car, body.hw .hw-slide-car .hw-car { opacity: 1; }
    body.hw .hw-types .hw-type-car { color: var(--hw-ember-2); border-color: rgba(242, 116, 59, .5); }
    body.hw .hw-scan { display: none; }
    body.hw .hw-chip { animation: none; opacity: 1; transform: none; }
}
@media (max-width: 991.98px) {
    body.hw .hw-visual { max-width: 560px; margin: 28px auto 0; }
    body.hw .hw-visual-shell { transform: none; animation: none; }
}
@media (max-width: 575.98px) {
    body.hw .hw-visual-shell { padding: 6px; border-radius: 22px; }
    body.hw .hw-visual-core { border-radius: 16px; }
    body.hw .hw-chip { font-size: 10.5px; padding: 6px 10px 6px 7px; }
}

/* ---------- 3c. Pumpkins ------------------------------------------------ */
/* Three carved pumpkins (partials/pumpkins.blade.php). The hero cluster sits
   in front of the frame's lower-left corner; a smaller one sits in the
   checkout header. Candle light flickers; the flicker stops under reduced
   motion. */
body.hw .hw-pumpkins { position: absolute; pointer-events: none; z-index: 3; }
body.hw .hw-pk { position: absolute; bottom: 0; overflow: visible; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .55)); }
body.hw .hw-pk-ground {
    position: absolute; left: 8%; right: 8%; bottom: -8px; height: 36px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(255, 170, 80, .45) 0%, rgba(255, 140, 50, .18) 40%, rgba(255, 140, 50, 0) 72%);
    filter: blur(8px);
}
body.hw .hw-pk-face {
    filter: drop-shadow(0 0 5px rgba(255, 190, 90, .95)) drop-shadow(0 0 14px rgba(255, 140, 40, .6));
    animation: hw-candle 3.6s ease-in-out infinite;
    transform-origin: 50% 70%;
}
body.hw .hw-pk-2 .hw-pk-face { animation-delay: -1.3s; animation-duration: 4.4s; }
body.hw .hw-pk-3 .hw-pk-face { animation-delay: -2.1s; animation-duration: 3.1s; }
@keyframes hw-candle {
    0%, 100% { opacity: 1; }
    13%  { opacity: .82; }
    27%  { opacity: .97; }
    41%  { opacity: .78; }
    55%  { opacity: 1; }
    70%  { opacity: .9; }
    86%  { opacity: .75; }
}
/* hero: anchored to the frame */
body.hw .hw-pumpkins--hero { left: -54px; bottom: 44px; width: 250px; height: 150px; }
body.hw .hw-pumpkins--hero .hw-pk-1 { left: 56px; width: 148px; height: 136px; z-index: 2; }
body.hw .hw-pumpkins--hero .hw-pk-2 { left: 0; width: 96px; height: 88px; bottom: 4px; transform: rotate(-7deg); z-index: 3; }
body.hw .hw-pumpkins--hero .hw-pk-3 { left: 176px; width: 72px; height: 66px; bottom: 2px; transform: rotate(8deg); z-index: 1; }
/* checkout header: lower right */
body.hw .tvx-head { position: relative; overflow: hidden; }
body.hw .hw-pumpkins--head { right: 4%; bottom: -6px; width: 190px; height: 112px; }
body.hw .hw-pumpkins--head .hw-pk-1 { left: 44px; width: 112px; height: 102px; z-index: 2; }
body.hw .hw-pumpkins--head .hw-pk-2 { left: 0; width: 72px; height: 66px; bottom: 2px; transform: rotate(-6deg); z-index: 3; }
body.hw .hw-pumpkins--head .hw-pk-3 { left: 134px; width: 54px; height: 50px; transform: rotate(7deg); z-index: 1; }
@media (prefers-reduced-motion: reduce) {
    body.hw .hw-pk-face { animation: none; }
}
@media (max-width: 991.98px) {
    body.hw .hw-pumpkins--hero { left: -8px; bottom: 48px; transform: scale(.56); transform-origin: left bottom; }
    body.hw .hw-pumpkins--hero .hw-pk-3 { display: none; }   /* two pumpkins on phones: keeps clear of the chips */
    body.hw .hw-pumpkins--head { display: none; }
}

/* ---------- 3d. Pumpkins hanging from the top edge ----------------------- */
/* partials/pumpkins-hanging.blade.php, included by the layout on hw pages.
   Each item is a string + pumpkin pivoting at the very top of the page;
   positions, lengths, sizes and timings come from inline custom properties. */
body.hw { position: relative; }
body.hw .hw-hang { position: absolute; top: 0; left: 0; right: 0; height: 0; z-index: 1045; pointer-events: none; }
body.hw .hw-hang-item {
    position: absolute; top: 0; left: var(--x);
    width: var(--size);
    margin-left: calc(var(--size) / -2);
    display: flex; flex-direction: column; align-items: center;
    transform-origin: 50% 0;
    animation: hw-swing var(--d) ease-in-out var(--s) infinite alternate;
    will-change: transform;
}
body.hw .hw-hang-string {
    width: 1px; height: var(--len);
    background: linear-gradient(180deg, rgba(244, 236, 226, .0) 0%, rgba(244, 236, 226, .45) 20%, rgba(244, 236, 226, .55) 100%);
}
body.hw .hw-hang-pk {
    width: var(--size); height: calc(var(--size) * .92);
    margin-top: -4px;
    overflow: visible;
    filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .55));
}
body.hw .hw-hang-pk .hw-pk-face { animation-duration: 4.8s; }
body.hw .hw-hang-2 .hw-pk-face { animation-delay: -1.6s; }
body.hw .hw-hang-4 .hw-pk-face { animation-delay: -2.9s; }
@keyframes hw-swing {
    from { transform: rotate(-5deg); }
    to   { transform: rotate(5deg); }
}
@media (prefers-reduced-motion: reduce) {
    body.hw .hw-hang-item { animation: none; }
}
@media (max-width: 991.98px) {
    body.hw .hw-hang-1, body.hw .hw-hang-2 { display: none; }
    body.hw .hw-hang-item { --size: 28px; }
    body.hw .hw-hang-3 { --x: 58%; --len: 92px; }
    body.hw .hw-hang-4 { --x: 73%; --len: 66px; }
    body.hw .hw-hang-5 { --x: 90%; --len: 80px; }
}

/* drifting embers and a few bats - decoration only, hidden from AT */
body.hw .hw-embers { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
body.hw .hw-embers span {
    position: absolute;
    bottom: -10px;
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--hw-ember-2);
    box-shadow: 0 0 10px 2px rgba(255, 155, 99, .55);
    opacity: 0;
    animation: hw-ember var(--d, 16s) linear var(--s, 0s) infinite;
}
body.hw .hw-embers span:nth-child(1)  { left: 6%;  --d: 19s; --s: -3s; }
body.hw .hw-embers span:nth-child(2)  { left: 14%; --d: 23s; --s: -11s; width: 3px; height: 3px; }
body.hw .hw-embers span:nth-child(3)  { left: 23%; --d: 17s; --s: -7s; }
body.hw .hw-embers span:nth-child(4)  { left: 31%; --d: 26s; --s: -15s; width: 2px; height: 2px; }
body.hw .hw-embers span:nth-child(5)  { left: 44%; --d: 21s; --s: -2s; }
body.hw .hw-embers span:nth-child(6)  { left: 52%; --d: 18s; --s: -9s; width: 3px; height: 3px; }
body.hw .hw-embers span:nth-child(7)  { left: 61%; --d: 24s; --s: -17s; }
body.hw .hw-embers span:nth-child(8)  { left: 69%; --d: 20s; --s: -5s; width: 2px; height: 2px; }
body.hw .hw-embers span:nth-child(9)  { left: 78%; --d: 22s; --s: -13s; }
body.hw .hw-embers span:nth-child(10) { left: 86%; --d: 19s; --s: -1s; width: 3px; height: 3px; }
body.hw .hw-embers span:nth-child(11) { left: 93%; --d: 25s; --s: -19s; }
body.hw .hw-embers span:nth-child(12) { left: 38%; --d: 27s; --s: -21s; width: 2px; height: 2px; }
@keyframes hw-ember {
    0%   { transform: translate3d(0, 0, 0) scale(1); opacity: 0; }
    8%   { opacity: .9; }
    60%  { opacity: .55; }
    100% { transform: translate3d(28px, -115vh, 0) scale(.4); opacity: 0; }
}
body.hw .hw-bat {
    position: absolute;
    width: 26px; height: 12px;
    color: #06040A;
    opacity: .55;
    animation: hw-bat var(--d, 14s) ease-in-out var(--s, 0s) infinite alternate;
    pointer-events: none;
}
body.hw .hw-bat svg { width: 100%; height: 100%; display: block; fill: currentColor; }
body.hw .hw-bat-1 { top: 14%; right: 24%; --d: 13s; }
body.hw .hw-bat-2 { top: 9%;  right: 31%; --d: 17s; --s: -6s; width: 18px; height: 8px; opacity: .4; }
body.hw .hw-bat-3 { top: 24%; right: 16%; --d: 15s; --s: -10s; width: 20px; height: 9px; opacity: .45; }
@keyframes hw-bat {
    0%   { transform: translate3d(0, 0, 0) rotate(-4deg); }
    50%  { transform: translate3d(-60px, -18px, 0) rotate(5deg); }
    100% { transform: translate3d(-120px, 10px, 0) rotate(-3deg); }
}

/* ---------- 4. Section headings ----------------------------------------- */
body.hw .genHead,
body.hw .genHeadW {
    font-family: var(--hw-display);
    font-size: clamp(30px, 3.4vw, 44px);
    font-weight: 700;
    letter-spacing: -.015em;
    line-height: 1.1;
    color: var(--hw-bone);
    text-wrap: balance;
}
body.hw .genHead:before,
body.hw .genHeadW:before {
    width: 56px;
    height: 2px;
    bottom: -16px;
    background: linear-gradient(90deg, var(--hw-ember), rgba(242, 116, 59, 0));
    border-radius: 2px;
}
body.hw .genHead:before { left: 50%; transform: translateX(-50%); background: linear-gradient(90deg, rgba(242, 116, 59, 0), var(--hw-ember), rgba(242, 116, 59, 0)); }
body.hw .lineStart .genHead:before { background: linear-gradient(90deg, var(--hw-ember), rgba(242, 116, 59, 0)); }
body.hw .genPara { color: var(--hw-bone-2); font-weight: 400; line-height: 1.7; }
body.hw section.py-5 { padding-top: 5.5rem !important; padding-bottom: 5.5rem !important; }
body.hw #aboutID { background: var(--hw-ink); }
body.hw #aboutID .text-center > p { color: var(--hw-muted); }

/* ---------- 5. "Always check" cards ------------------------------------- */
body.hw .carHistoryBx {
    background: linear-gradient(180deg, var(--hw-plum-2) 0%, var(--hw-plum) 100%);
    border: 1px solid var(--hw-line);
    border-bottom: 1px solid var(--hw-line);
    border-radius: 20px;
    padding: 28px 24px 26px;
    box-shadow: var(--hw-shadow);
    transition: transform .35s var(--hw-ease), border-color .35s var(--hw-ease), box-shadow .35s var(--hw-ease);
}
body.hw .carHistoryBx:hover {
    transform: translateY(-6px);
    border-color: rgba(242, 116, 59, .45);
    box-shadow: var(--hw-glow);
}
body.hw .carHistoryBx .number {
    background: var(--hw-ink);
    border: 1px solid rgba(242, 116, 59, .6);
    color: var(--hw-ember-2);
    font-weight: 800;
    font-size: 14px;
    box-shadow: 0 0 18px rgba(242, 116, 59, .35);
}
body.hw .carHistoryBx .icon img { filter: invert(.92) sepia(.25) saturate(.6) opacity(.85); width: 64px; }
body.hw .carHistoryBx h2 { color: var(--hw-bone); font-size: 17px; letter-spacing: .06em; }
body.hw .carHistoryBx p { color: var(--hw-bone-2); font-size: 14.5px; line-height: 1.65; }
body.hw .carHistoryBx button {
    background: transparent;
    color: var(--hw-ember-2);
    border: 1px solid rgba(242, 116, 59, .5);
    border-radius: 12px;
    font-weight: 700;
    transition: background .25s var(--hw-ease), color .25s var(--hw-ease), border-color .25s var(--hw-ease);
}
body.hw .carHistoryBx button:hover { background: var(--hw-ember-deep); color: #fff; border-color: transparent; }

/* ---------- 6. Comparison table ----------------------------------------- */
body.hw #carFaxID { background: var(--hw-ink-2); border-top: 1px solid var(--hw-line); border-bottom: 1px solid var(--hw-line); }
body.hw #carFaxID .text-uppercase { color: var(--hw-ember-2); letter-spacing: .1em; font-size: 12px; }
body.hw .carFaxtable { border: 1px solid var(--hw-line-2); border-radius: 18px; padding: 6px; background: rgba(255, 255, 255, .02); }
body.hw .carFaxtable .table { color: var(--hw-bone); margin: 0; --bs-table-bg: transparent; --bs-table-color: var(--hw-bone); }
body.hw .carFaxtable .table > :not(caption) > * > * { background: transparent; color: var(--hw-bone); border-bottom-color: var(--hw-line); padding: 14px 16px; }
body.hw .carFaxtable thead th { color: var(--hw-muted); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; border-bottom: 1px solid var(--hw-line-2); }
body.hw .carFaxtable thead th:nth-child(2) { color: var(--hw-ember-2); }
body.hw .carFaxtable tbody th { font-weight: 600; color: var(--hw-bone-2); }
body.hw .carFaxtable tbody td:nth-child(2) { background: rgba(242, 116, 59, .06); }
body.hw .carFaxtable tbody tr:last-child > * { border-bottom: 0; }
body.hw .carFaxtable svg[width="24"] path { fill: var(--hw-ok); }
body.hw .carFaxtable svg[width="18"] path { fill: rgba(244, 236, 226, .28); }

/* ---------- 7. Testimonials --------------------------------------------- */
body.hw #customerSay { background-color: var(--hw-ink); padding: 96px 0; }
body.hw #customerSay::before { background: linear-gradient(180deg, rgba(13, 10, 18, .94) 0%, rgba(37, 26, 51, .92) 100%); opacity: 1; }
body.hw #customerSay .container { position: relative; z-index: 1; }
body.hw #customerSlider .customerBx {
    background: rgba(27, 20, 36, .8);
    border: 1px solid var(--hw-line-2);
    border-radius: 24px;
    box-shadow: var(--hw-shadow);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
body.hw .customerBx p { color: var(--hw-bone); font-style: italic; font-weight: 500; font-size: 16px; letter-spacing: 0; line-height: 1.75; }
body.hw .customerBx p::before { content: "\201C"; font-family: var(--hw-display); font-size: 44px; line-height: 0; color: var(--hw-ember); vertical-align: -14px; margin-right: 6px; }
body.hw .customerBx h3 { color: var(--hw-bone-2); font-size: 13px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; }
body.hw .customerBx .avatar img { border-color: var(--hw-plum-2); box-shadow: 0 0 0 1px var(--hw-line-2), 0 10px 30px rgba(0, 0, 0, .5) !important; }
body.hw .customerBx .svgIocn { background: var(--hw-ember-deep); box-shadow: 0 0 14px rgba(242, 116, 59, .5); }
body.hw #customerSlider .swiper-button-next:after,
body.hw #customerSlider .swiper-button-prev:after,
body.hw #brandSlider .swiper-button-next:after,
body.hw #brandSlider .swiper-button-prev:after {
    background: var(--hw-plum-2);
    color: var(--hw-ember-2);
    border: 1px solid var(--hw-line-2);
    border-radius: 12px;
    font-size: 16px;
    padding: 12px 14px;
    transition: background .2s var(--hw-ease), color .2s var(--hw-ease);
}
body.hw #customerSlider .swiper-button-next:hover:after,
body.hw #customerSlider .swiper-button-prev:hover:after,
body.hw #brandSlider .swiper-button-next:hover:after,
body.hw #brandSlider .swiper-button-prev:hover:after { background: var(--hw-ember-deep); color: #fff; }

/* ---------- 8. Pricing (tvx) -------------------------------------------- */
body.hw .tvx-pricing { background: var(--hw-ink); padding: 88px 0; }
body.hw .tvx-p-eyebrow { background: rgba(242, 116, 59, .10) !important; border-color: rgba(242, 116, 59, .35) !important; color: var(--hw-ember-2) !important; }
body.hw .tvx-p-eyebrow svg path { stroke: var(--hw-ember-2); }
body.hw .tvx-p-title { font-family: var(--hw-display); font-weight: 700; letter-spacing: -.015em; color: var(--hw-bone); }
body.hw .tvx-p-sub, body.hw .tvx-p-note, body.hw .tvx-p-desc, body.hw .tvx-p-per, body.hw .tvx-p-cur { color: var(--hw-bone-2) !important; }
body.hw .tvx-p-card {
    background: linear-gradient(180deg, var(--hw-plum-2) 0%, var(--hw-plum) 100%) !important;
    border: 1px solid var(--hw-line-2) !important;
    box-shadow: var(--hw-shadow) !important;
    color: var(--hw-bone);
}
body.hw .tvx-p-card.is-popular {
    border-color: rgba(242, 116, 59, .6) !important;
    box-shadow: var(--hw-glow), var(--hw-shadow) !important;
    background: linear-gradient(180deg, #2E1E3F 0%, var(--hw-plum) 100%) !important;
}
body.hw .tvx-p-name { color: var(--hw-bone) !important; font-family: var(--hw-display); font-weight: 700; letter-spacing: 0; text-transform: none; font-size: 1.6rem; }
body.hw .tvx-p-amt { color: var(--hw-ember-3) !important; font-variant-numeric: tabular-nums; }
body.hw .tvx-p-badge, body.hw .tvx-plan-badge { background: linear-gradient(135deg, #FF9B63 0%, #F2743B 100%) !important; color: var(--hw-on-ember) !important; box-shadow: 0 6px 16px -4px rgba(242, 116, 59, .7) !important; }
body.hw .tvx-p-badge.tvx-badge-value, body.hw .tvx-plan-badge.tvx-badge-value { background: var(--hw-plum-2) !important; border: 1px solid rgba(242, 116, 59, .5); color: var(--hw-ember-2) !important; box-shadow: none !important; }
body.hw .tvx-p-feats li, body.hw .tvx-plan-feats li { color: var(--hw-bone-2); }
body.hw .tvx-p-feats li.is-off, body.hw .tvx-plan-feats li.tvx-off { color: var(--hw-muted); }
body.hw .tvx-p-feats svg circle, body.hw .tvx-plan-feats svg circle { fill: rgba(139, 213, 166, .14); }
body.hw .tvx-p-feats li.is-off svg circle, body.hw .tvx-plan-feats li.tvx-off svg circle { fill: rgba(255, 255, 255, .06); }
body.hw .tvx-p-feats li.is-off svg path, body.hw .tvx-plan-feats li.tvx-off svg path { stroke: rgba(244, 236, 226, .35); }
body.hw .tvx-p-feats svg path, body.hw .tvx-plan-feats svg path { stroke: var(--hw-ok); }
body.hw .priceBtn {
    background: linear-gradient(135deg, #FF9B63 0%, #F2743B 55%, #D95F28 100%) !important;
    color: var(--hw-on-ember) !important;
    border: 0 !important;
    box-shadow: 0 10px 24px -10px rgba(242, 116, 59, .75), inset 0 1px 0 rgba(255, 255, 255, .2) !important;
}
body.hw .priceBtn:hover { filter: brightness(1.08); }
body.hw .tvx-p-card:not(.is-popular) .priceBtn {
    background: transparent !important;
    color: var(--hw-ember-2) !important;
    border: 1px solid rgba(242, 116, 59, .55) !important;
    box-shadow: none !important;
}
body.hw .tvx-p-card:not(.is-popular) .priceBtn:hover { background: var(--hw-ember-deep) !important; color: #fff !important; }
body.hw .tvx-p-trust li { color: var(--hw-bone-2); }
body.hw .tvx-p-trust svg rect, body.hw .tvx-p-trust svg circle, body.hw .tvx-trust svg rect, body.hw .tvx-trust svg circle { fill: rgba(242, 116, 59, .12); stroke: var(--hw-ember-2); }
body.hw .tvx-p-trust svg path, body.hw .tvx-trust svg path { stroke: var(--hw-ember-2); }
body.hw .tvx-p-trust li:nth-child(2) svg path, body.hw .tvx-trust li:nth-child(2) svg path { stroke: var(--hw-ok); }

/* ---------- 9. How it works / contact / FAQ / blog ---------------------- */
body.hw #howItWork { background: var(--hw-ink-2); border-top: 1px solid var(--hw-line); }
body.hw #howItWork img.img-fluid {
    border-radius: 22px;
    filter: grayscale(.35) sepia(.3) hue-rotate(-18deg) saturate(1.3) brightness(.72) contrast(1.08);
    box-shadow: var(--hw-shadow), 0 0 0 1px var(--hw-line-2);
}
body.hw .howDetailBx .list li { border-bottom-color: var(--hw-line); padding: 16px 0; }
body.hw .howDetailBx .detail p { color: var(--hw-bone); font-weight: 500; }
body.hw .howDetailBx img { filter: invert(.9) sepia(.4) saturate(1.2) hue-rotate(-20deg); width: 42px; }

body.hw #contactHome { background-color: var(--hw-plum-2); padding: 56px 0; }
body.hw #contactHome::before { background: linear-gradient(90deg, rgba(196, 81, 28, .92) 0%, rgba(37, 26, 51, .94) 100%); opacity: 1; }
body.hw #contactHome .genHead { color: #fff; }
body.hw #contactHome .lineStart .genHead:before { background: rgba(255, 255, 255, .7); }
body.hw #contactHome .contBtn { background: var(--hw-bone); color: var(--hw-ink); border-color: var(--hw-bone); border-radius: 12px; }
body.hw #contactHome .contBtn:hover { background: transparent; color: var(--hw-bone); }

body.hw #fqas { background: var(--hw-ink); }
body.hw .faqsBx .accordion-item { background: var(--hw-plum); border: 1px solid var(--hw-line); color: var(--hw-bone); }
body.hw .faqsBx .accordion-item:first-of-type { border-radius: 16px 16px 0 0; }
body.hw .faqsBx .accordion-item:last-of-type { border-radius: 0 0 16px 16px; }
body.hw .faqsBx .accordion-button { background: transparent; color: var(--hw-bone); font-weight: 600; }
body.hw .faqsBx .accordion-button:not(.collapsed) { background: rgba(242, 116, 59, .10); color: var(--hw-ember-2); box-shadow: inset 0 -1px 0 var(--hw-line); }
body.hw .faqsBx .accordion-button::after,
body.hw .faqsBx .accordion-button:not(.collapsed)::after { filter: invert(1) sepia(1) saturate(3) hue-rotate(-20deg) brightness(1.1); }
body.hw .faqsBx .accordion-body { color: var(--hw-bone-2); line-height: 1.7; }
body.hw .faqsBx .accordion-body .fw-600 { color: var(--hw-bone); }

body.hw #blogs { background: var(--hw-ink-2); border-top: 1px solid var(--hw-line); }
body.hw .blogbx .blog-box-layout2 { background: var(--hw-plum); border: 1px solid var(--hw-line); border-radius: 18px; overflow: hidden; box-shadow: var(--hw-shadow); transition: transform .35s var(--hw-ease), border-color .35s var(--hw-ease); }
body.hw .blogbx .blog-box-layout2:hover { transform: translateY(-4px); border-color: rgba(242, 116, 59, .4); }
body.hw .blogbx .item-img img { filter: saturate(.75) brightness(.85) contrast(1.05); transition: transform .6s var(--hw-ease); }
body.hw .blogbx .blog-box-layout2:hover .item-img img { transform: scale(1.04); }
body.hw .blogbx .item-img { overflow: hidden; }
body.hw .blog-entry-meta li, body.hw .blog-entry-meta li.text-dark { color: var(--hw-muted) !important; }
body.hw .blog-entry-meta a { color: var(--hw-bone-2); }
body.hw .blogbx .blog-box-layout2 .item-content h3.item-title a { color: var(--hw-bone) !important; font-family: var(--hw-display); font-weight: 700; font-size: 20px; }
body.hw .blogbx .blog-box-layout2:hover .item-content h3.item-title a { color: var(--hw-ember-2) !important; }

/* ---------- 10. VIN band, brands, footer -------------------------------- */
body.hw .newsletter {
    background: linear-gradient(180deg, #16101F 0%, #0D0A12 100%);
    border-top: 1px solid var(--hw-line);
    padding: 72px 0 80px;
}
body.hw .newsletter::before {
    background: linear-gradient(90deg, rgba(242, 116, 59, .18), rgba(242, 116, 59, .02));
    right: -30%;
    width: 70%;
}
body.hw .newsletter .genHead { font-family: var(--hw-display); }
body.hw .newsletter .genPara { color: var(--hw-bone-2) !important; }
body.hw .newsletter .title h3 { color: var(--hw-bone); font-weight: 600; }
body.hw .newsletter .title svg path { fill: var(--hw-ember-2); }
body.hw .newsletter .newsBox form { padding: 8px; border-radius: 16px; background: rgba(255, 255, 255, .04); border: 1px solid var(--hw-line-2); }
body.hw .newsletter .inputBx { flex-direction: row !important; gap: 8px; }
body.hw .newsletter .inputBx input { width: auto !important; flex: 1 1 auto; border-radius: 10px !important; background: rgba(13, 10, 18, .85); color: var(--hw-bone); border: 1px solid transparent; }
body.hw .newsletter .inputBx input::placeholder { color: var(--hw-muted); }
body.hw .newsletter .inputBx input:focus { outline: none; border-color: var(--hw-ember); box-shadow: 0 0 0 3px rgba(242, 116, 59, .25); }
body.hw .newsletter .inputBx button { width: auto !important; flex: 0 0 auto; padding: 0 22px; border-radius: 10px !important; background: linear-gradient(135deg, #FF9B63 0%, #F2743B 55%, #D95F28 100%); color: var(--hw-on-ember); font-weight: 800; box-shadow: 0 10px 24px -10px rgba(242, 116, 59, .7); }

body.hw #brands { background: var(--hw-ink); border-top: 1px solid var(--hw-line); }
/* logos are dark-on-white: invert, then screen the (now black) card away */
body.hw #brands img { filter: grayscale(1) invert(1) brightness(1.25) contrast(1.05); mix-blend-mode: screen; opacity: .7; transition: opacity .25s var(--hw-ease); }
body.hw #brands img:hover { opacity: 1; }

body.hw footer { background-color: #0A070F; padding-top: 0; }
body.hw .tj-footer { background: #0A070F !important; border-top: 1px solid var(--hw-line); padding-top: 48px !important; }
body.hw .tj-footer .main-logo span { color: var(--hw-bone); }
body.hw .tj-footer .main-logo span i { color: var(--hw-ember) !important; }
body.hw .tj-footer h2 { color: var(--hw-bone) !important; font-size: 12px; letter-spacing: .18em; }
body.hw .tj-footer .footerService li { border-bottom-color: var(--hw-line) !important; }
body.hw .tj-footer .footerService a, body.hw .tj-footer .footerService span, body.hw .tj-footer .footerService i { color: var(--hw-bone-2) !important; }
body.hw .tj-footer .footerService a:hover span { color: var(--hw-ember-2) !important; }
body.hw .copyRight { border-top: 1px solid var(--hw-line); }
body.hw .copyRight p { color: var(--hw-muted) !important; font-size: 13px; }

body.hw .language-selector { background: var(--hw-plum); border-color: var(--hw-line-2); color: var(--hw-bone); }
body.hw .language-selector select { color: var(--hw-bone); }
body.hw .language-selector select option { color: #111; }

/* ---------- 11. Modals (Read more, VIN) --------------------------------- */
body.hw .modal-content { background: var(--hw-plum); color: var(--hw-bone); border: 1px solid var(--hw-line-2); border-radius: 20px; }
body.hw .modal-header, body.hw .modal-footer { border-color: var(--hw-line); }
body.hw .btn-close { filter: invert(1) grayscale(1); opacity: .7; }
body.hw .tvx-m-head { background: linear-gradient(180deg, #2A1B3C 0%, #1B1424 100%) !important; }
body.hw .tvx-m-head p { color: var(--hw-bone-2); }
body.hw .tvx-m-hint { color: var(--hw-bone-2); }
body.hw .modal .btn-secondary { background: transparent; border: 1px solid var(--hw-line-2); color: var(--hw-bone-2); }
body.hw .modal .btn-secondary:hover { background: rgba(255, 255, 255, .06); color: var(--hw-bone); }
body.hw .popModal .inputBx input { background: rgba(13, 10, 18, .85) !important; color: var(--hw-bone); border: 1px solid var(--hw-line-2) !important; }
body.hw .popModal .inputBx button { background: linear-gradient(135deg, #FF9B63 0%, #F2743B 55%, #D95F28 100%) !important; color: var(--hw-on-ember) !important; }
body.hw .modal-backdrop.show { opacity: .75; }

/* ---------- 12. Checkout ------------------------------------------------ */
body.hw .tvx-checkout { background: var(--hw-ink); color: var(--hw-bone); }
body.hw .tvx-head {
    background:
        radial-gradient(ellipse 50% 80% at 85% 0%, rgba(255, 196, 140, .18) 0%, rgba(255, 196, 140, 0) 60%),
        linear-gradient(180deg, #16101F 0%, #0D0A12 100%) !important;
    border-bottom: 1px solid var(--hw-line);
    padding: 44px 0 40px !important;
}
body.hw .tvx-checkout .tvx-head h1 { font-family: var(--hw-display); font-weight: 700; letter-spacing: -.015em; color: var(--hw-bone); }
body.hw .tvx-head .tvx-sub { color: var(--hw-bone-2); }
body.hw .tvx-found { background: rgba(139, 213, 166, .12); border: 1px solid rgba(139, 213, 166, .35); color: var(--hw-ok); }
body.hw .tvx-vin { background: rgba(255, 255, 255, .06); border: 1px solid var(--hw-line-2); color: var(--hw-ember-3); }
body.hw .tvx-card, body.hw .tvx-sum-card { background: var(--hw-plum); border-color: var(--hw-line-2); color: var(--hw-bone); }
body.hw .tvx-checkout .tvx-step h2 { color: var(--hw-bone); }
body.hw .tvx-step-n { background: var(--hw-ember-deep); color: #fff; box-shadow: 0 0 14px rgba(242, 116, 59, .4); }
body.hw .tvx-hint, body.hw .tvx-help { color: var(--hw-muted); }
body.hw .tvx-checkout .pack.tvx-plan { background: rgba(13, 10, 18, .55); border-color: var(--hw-line-2); color: var(--hw-bone); }
body.hw .tvx-checkout .pack.tvx-plan.tvx-plan-featured { background: linear-gradient(180deg, #2A1B3C 0%, rgba(13, 10, 18, .6) 60%); border-color: rgba(242, 116, 59, .35); }
body.hw .tvx-checkout .pack.tvx-plan.active { border-color: var(--hw-ember); box-shadow: 0 0 0 4px rgba(242, 116, 59, .18), var(--tvx-shadow-lg); background: linear-gradient(180deg, rgba(242, 116, 59, .12) 0%, rgba(13, 10, 18, .6) 60%); }
/* the card's radio indicator is an image in the base theme; draw it instead */
body.hw .tvx-checkout .pack.tvx-plan::before {
    background: transparent !important;
    border: 2px solid var(--hw-line-2);
    border-radius: 50%;
    box-sizing: border-box;
    transition: border-color .2s var(--hw-ease), background .2s var(--hw-ease);
}
body.hw .tvx-checkout .pack.tvx-plan.active::before {
    border-color: var(--hw-ember);
    background: radial-gradient(circle, var(--hw-ember) 0 4px, transparent 5px) !important;
    box-shadow: 0 0 10px rgba(242, 116, 59, .6);
}
body.hw .tvx-checkout .tvx-plan-name { color: var(--hw-bone); font-family: var(--hw-display); font-size: 1.25rem; font-weight: 700; }
body.hw .tvx-plan-desc { color: var(--hw-muted); }
body.hw .tvx-checkout .tvx-plan-price { color: var(--hw-ember-3); font-variant-numeric: tabular-nums; }
body.hw .tvx-checkout .tvx-plan-per { color: var(--hw-muted); }
body.hw .tvx-plan-select { background: rgba(255, 255, 255, .05); color: var(--hw-bone-2); border: 1px solid var(--hw-line-2); }
body.hw .tvx-checkout .pack.tvx-plan.active .tvx-plan-select { background: linear-gradient(135deg, #FF9B63 0%, #F2743B 100%); color: var(--hw-on-ember); border-color: transparent; }
body.hw .tvx-checkout .tvx-field label { color: var(--hw-bone-2); }
body.hw .tvx-checkout .form-control,
body.hw .tvx-checkout .tvx-coupon-row input {
    background: rgba(13, 10, 18, .7) !important;
    border: 1px solid var(--hw-line-2) !important;
    color: var(--hw-bone) !important;
}
body.hw .tvx-checkout .form-control::placeholder, body.hw .tvx-checkout .tvx-coupon-row input::placeholder { color: var(--hw-muted); }
body.hw .tvx-checkout .form-control:focus, body.hw .tvx-checkout .tvx-coupon-row input:focus { border-color: var(--hw-ember) !important; box-shadow: 0 0 0 3px rgba(242, 116, 59, .25) !important; }
body.hw .tvx-checkout .form-control.is-invalid { border-color: var(--hw-bad) !important; box-shadow: 0 0 0 3px rgba(255, 138, 138, .2) !important; }
body.hw .payment-option { background: rgba(13, 10, 18, .55); border: 1px solid var(--hw-line-2); color: var(--hw-bone); }
body.hw .payment-option.selected { border-color: var(--hw-ember); background: rgba(242, 116, 59, .08); box-shadow: 0 0 0 3px rgba(242, 116, 59, .15); }
body.hw .payment-option .payment-radio { border-color: var(--hw-line-2); background: transparent; }
body.hw .payment-option.selected .payment-radio { border-color: var(--hw-ember); }
body.hw .payment-option.selected .radio-dot { background: var(--hw-ember); }
body.hw .tvx-pm-name { color: var(--hw-bone); }
body.hw .tvx-pm-desc { color: var(--hw-muted); }
body.hw .tvx-pm-icon svg rect:first-child { fill: rgba(242, 116, 59, .12); stroke: var(--hw-ember-2); }
body.hw .tvx-pm-icon svg path, body.hw .tvx-pm-icon svg rect:last-child { stroke: var(--hw-ember-2); fill: var(--hw-ember-2); }
body.hw .tvx-pm-logos img, body.hw .tvx-accepted img { background: #fff; border-radius: 4px; padding: 1px; }
body.hw .tvx-note { background: rgba(242, 116, 59, .08) !important; border: 1px solid rgba(242, 116, 59, .3) !important; color: var(--hw-bone-2) !important; }
body.hw .tvx-note strong { color: var(--hw-ember-2); }
body.hw .tvx-sum-head { background: linear-gradient(180deg, #2A1B3C 0%, #1F1630 100%) !important; border-bottom: 1px solid var(--hw-line); }
body.hw .tvx-sum-head h2 { color: var(--hw-bone); font-family: var(--hw-display); font-weight: 700; }
body.hw .tvx-sum-veh { background: rgba(255, 255, 255, .08); border-radius: 10px; }
body.hw .tvx-row dt { color: var(--hw-muted); }
body.hw .tvx-row dd { color: var(--hw-bone); }
body.hw .tvx-sep { background: var(--hw-line); }
body.hw .tvx-checkout .tvx-coupon label { color: var(--hw-bone-2); }
body.hw .tvx-checkout .tvx-coupon-row button { background: var(--hw-plum-2); color: var(--hw-bone); border: 1px solid var(--hw-line-2); }
body.hw .tvx-checkout .tvx-coupon-row button:hover { background: var(--hw-ember-deep); color: #fff; border-color: transparent; }
body.hw .tvx-checkout .tvx-discount-row #coupon-remove { color: var(--hw-ember-2); }
body.hw .tvx-t-label { color: var(--hw-bone-2); }
body.hw .tvx-checkout .tvx-t-val { color: var(--hw-ember-3); font-variant-numeric: tabular-nums; }
body.hw .tvx-checkout .tvx-btn { background: linear-gradient(135deg, #FF9B63 0%, #F2743B 55%, #D95F28 100%) !important; color: var(--hw-on-ember) !important; box-shadow: 0 12px 28px -10px rgba(242, 116, 59, .8), inset 0 1px 0 rgba(255, 255, 255, .2) !important; }
body.hw .tvx-checkout .tvx-btn:hover { filter: brightness(1.06); }
body.hw .tvx-checkout .tvx-btn .tvx-spin { border-color: rgba(27, 15, 10, .25); border-top-color: var(--hw-on-ember); }
body.hw .tvx-secure-note { background: rgba(139, 213, 166, .08); border: 1px solid rgba(139, 213, 166, .3); color: var(--hw-bone-2); }
body.hw .tvx-secure-note svg path:first-child { fill: rgba(139, 213, 166, .15); stroke: var(--hw-ok); }
body.hw .tvx-secure-note svg path:last-child { stroke: var(--hw-ok); }
body.hw .tvx-trust li { color: var(--hw-bone-2); }
body.hw .tvx-accepted span { color: var(--hw-muted); }
/* brand-blue hardcoded into inline SVGs / inline styles on the checkout pages */
body.hw .tvx-checkout [stroke="#0379a8"], body.hw .tvx-checkout [stroke="#2563EB"] { stroke: var(--hw-ember-2); }
body.hw .tvx-checkout [fill="#0379a8"], body.hw .tvx-checkout [fill="#2563EB"] { fill: var(--hw-ember-2); }
body.hw .tvx-checkout [fill="#E8F6FC"], body.hw .tvx-checkout [fill="#EFF4FF"] { fill: rgba(242, 116, 59, .12); }
body.hw .tvx-checkout .tvx-card p[style*="color"] { color: var(--hw-bone-2) !important; }
body.hw .tvx-checkout .tvx-card h2 { color: var(--hw-bone); }
body.hw .tvx-adv h5 { color: var(--hw-bone); }
body.hw .tvx-adv .txt { color: var(--hw-muted); }
body.hw .tvx-adv img { filter: invert(.9) sepia(.4) saturate(1.2) hue-rotate(-20deg); }
body.hw a.tvx-btn { color: var(--hw-on-ember) !important; }
body.hw a.tvx-btn svg circle, body.hw a.tvx-btn svg path { stroke: var(--hw-on-ember); }

/* ---------- 13. Entrance motion ----------------------------------------- */
/* Hero: plays once on load. Sections: a few lines of script add .hw-reveal
   and .is-in as cards scroll into view. Without that script (or with reduced
   motion) nothing is ever hidden, so content can never go missing. */
@media (prefers-reduced-motion: no-preference) {
    body.hw .hw-rise { animation: hw-rise .9s var(--hw-ease) both; }
    body.hw .hw-rise-2 { animation-delay: .12s; }
    body.hw .hw-rise-3 { animation-delay: .24s; }
    body.hw .hw-reveal {
        opacity: 0;
        transform: translate3d(0, 22px, 0);
        transition: opacity .8s var(--hw-ease), transform .8s var(--hw-ease);
    }
    body.hw .hw-reveal.is-in { opacity: 1; transform: none; }
}
@keyframes hw-rise {
    from { opacity: 0; transform: translate3d(0, 22px, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
    body.hw .hw-embers span, body.hw .hw-bat { animation: none; opacity: 0; }
}

/* ---------- 14. Small screens ------------------------------------------- */
@media (max-width: 767.98px) {
    body.hw #topBanner::before { width: 150px; top: 3%; right: -8%; }
    body.hw .topBaannerNew { padding-top: 32px !important; padding-bottom: 40px !important; }
    body.hw .topBaannerNew h3 { font-size: 36px; }
    body.hw .topBaannerNew .inputBx { flex-direction: column !important; }
    body.hw .topBaannerNew .inputBx input, body.hw .topBaannerNew .inputBx button { width: 100% !important; }
    body.hw .newsletter .inputBx { flex-direction: column !important; }
    body.hw .newsletter .inputBx input, body.hw .newsletter .inputBx button { width: 100% !important; min-height: 50px !important; }
    body.hw section.py-5 { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; }
    body.hw #customerSay { padding: 64px 0; }
    body.hw .tvx-pricing { padding: 56px 0; }
    body.hw .hw-bat { display: none; }
    body.hw .tvx-head { padding: 28px 0 26px !important; }
}