@charset "UTF-8";

    :root {
        /* Brand palette, built around the logo (sky-blue globe + coral swoosh, navy anchor) */
        --cbp-sky:        #5bbbe8;
        --cbp-blue:       #2f93cf;
        --cbp-blue-deep:  #1f6fa8;
        --cbp-navy:       #0e2c4f;
        --cbp-navy-2:     #16386a;
        --cbp-red:        #e8334e;
        --cbp-red-2:      #f2566c;
        --cbp-ink:        #15263d;
        --cbp-body:       #46586f;
        --cbp-muted:      #7d8ca3;
        --cbp-line:       #e7eef6;
        --cbp-surface:    #ffffff;
        --cbp-bg:         #f3f7fc;
        --cbp-bg-2:       #eaf1f9;

        /* soft, blue-tinted elevation */
        --cbp-sh-sm: 0 1px 2px rgba(20,52,92,.05), 0 1px 3px rgba(20,52,92,.04);
        --cbp-sh-md: 0 6px 18px -8px rgba(20,52,92,.20), 0 2px 6px rgba(20,52,92,.06);
        --cbp-sh-lg: 0 24px 50px -22px rgba(16,44,79,.42), 0 8px 18px -12px rgba(16,44,79,.18);
        --cbp-sh-glow: 0 12px 30px -10px rgba(47,147,207,.5);
        --cbp-sh-red: 0 12px 28px -10px rgba(232,51,78,.55);

        --cbp-r-sm: 10px; --cbp-r-md: 14px; --cbp-r-lg: 18px; --cbp-r-xl: 24px;
        --cbp-ease: cubic-bezier(.22,1,.36,1);

        /* keep the existing dealer tokens in sync toward the softer brand blue */
        /* These are declared here AND redeclared by the dealer rail, which loads later
           and wins -- so the value written here has never been the value that renders,
           and about a hundred and thirty places in the views write var(--brand, #2f5496)
           as though #2f5496 were it. The declaration and its own fallbacks disagreed.
           Declared once, at the value the product actually uses. Anything that genuinely
           wants the cyan should ask for --cbp-blue, which is what that token is for. */
        --brand: #2f5496; --brand-2: #4a7fd4; --line: #e7eef6;
    }

    /* ---- Type: soft, rounded, friendly (Nunito Sans), site-wide ---- */
    body, .dealer-shell, .dealer-sidebar, .dealer-main,
    .ft-header-section, .cbp-nav, button, input, select, textarea, .lp-article, .ql-editor {
        font-family: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif !important;
        -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
    }
    body { color: var(--cbp-body); letter-spacing: .1px; }

    /* ---- The same page on an iPhone (Safari) ----
       iOS only hands a tap to a handler that listens higher up (jQuery's
       $(document).on('click', '.thing', ...)) when the tapped element looks clickable.
       A touch screen shows no cursor, so on one everything may look clickable. */
    @media (hover: none) and (pointer: coarse) { body, body * { cursor: pointer; } }
    /* iOS paints its own inset shadow and rounding on text fields unless told not to. */
    input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]):not([type=date]):not([type=time]):not([type=datetime-local]):not([type=month]),
    textarea { -webkit-appearance: none; appearance: none; }
    input[type=search]::-webkit-search-decoration, input[type=search]::-webkit-search-cancel-button,
    input[type=search]::-webkit-search-results-button { -webkit-appearance: none; }
    /* A field smaller than 16px makes iPhone Safari zoom the page on focus and leave it zoomed. */
    @media (hover: none) and (pointer: coarse) and (max-width: 900px) {
        input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]), select, textarea { font-size: 16px !important; }
    }
    /* Safari otherwise inflates text on its own when the phone turns. */
    html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
    h1, h2, h3, h4, .dp-title, .lp-hero-title, .auth-head h1, .lp-page-head h1, .cbp-logo {
        font-family: 'Nunito', 'Nunito Sans', system-ui, sans-serif !important; letter-spacing: -.2px;
    }

    /* A page heading is a page heading on every page.
       The bought-in theme sets a bare `h1 { font-size: 82px }` for its marketing
       hero, and .dp-title's own 22px lives in the dealer sidebar partial. Any page
       that uses .dp-title WITHOUT rendering that sidebar — the Calculator is one —
       inherited the 82px instead: fine-ish on a wide screen, and on a phone the
       word "Calculator" filled the viewport edge to edge and clipped.
       Declaring it here, in the partial every page includes, is what makes the
       size independent of which shell happened to render. */
    .dp-title {
        font-size: clamp(19px, 2.2vw, 22px);
        line-height: 1.25;
        font-weight: 800;
        margin: 0;
        color: var(--cbp-navy, #16243a);
        text-wrap: balance;
    }

    /* gentle, brand-tinted niceties */
    html { scroll-behavior: smooth; }
    ::selection { background: rgba(47,147,207,.22); color: var(--cbp-navy); }
    a, button { -webkit-tap-highlight-color: transparent; }
    :focus-visible { outline: 2px solid var(--cbp-blue); outline-offset: 2px; border-radius: 4px; }

    /* ---- Scroll-reveal + soft entrance (opt-in via .reveal / [data-reveal]) ---- */
    /* Hidden only once the script below has marked <html>: if it never runs, the content is
       simply there. The homepage's services and contact band were blank without it. */
    html.cbp-rv .reveal, html.cbp-rv [data-reveal] { opacity: 0; transform: translateY(18px); will-change: opacity, transform;
        transition: opacity .6s var(--cbp-ease), transform .7s var(--cbp-ease); }
    html.cbp-rv .reveal.in, html.cbp-rv [data-reveal].in { opacity: 1; transform: none; }
    .reveal[data-delay="1"] { transition-delay: .07s; } .reveal[data-delay="2"] { transition-delay: .14s; }
    .reveal[data-delay="3"] { transition-delay: .21s; } .reveal[data-delay="4"] { transition-delay: .28s; }

    /* soft fade-up for primary content shells (subtle, app-appropriate) */
    @keyframes cbpFadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
    .dealer-page, .lp-article, .auth-card { animation: cbpFadeUp .5s var(--cbp-ease) both; }

    /* soft, lively hover lift used opportunistically */
    .cbp-lift { transition: transform .22s var(--cbp-ease), box-shadow .22s var(--cbp-ease); }
    .cbp-lift:hover { transform: translateY(-3px); box-shadow: var(--cbp-sh-lg); }

    @media (prefers-reduced-motion: reduce) {
        html { scroll-behavior: auto; }
        .reveal, [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
        .dealer-page, .lp-article, .auth-card { animation: none !important; }
    }

    /* ---- The chrome family ----------------------------------------------------
       Every deep-blue surface on the site: the top bar, the footer, the dealer rail,
       the page heads, the call-to-action bands and the hero panels. They are one
       surface with one colour, one texture and one light, so they read as parts of
       the same object rather than as separate blue rectangles — and so dark mode
       moves all of them together. Each keeps its OWN gradient, which is its local
       character; only the colour, size and repeat are shared.
       These are the longhands. Each surface still declares its own background-image
       (its wash, then the texture) beside its own rules. */
    .cbp-nav, .cbp-footer, .dealer-sidebar,
    .lp-cta-band, .lp-page-head, .lp-reach, .apps-hero, .ci-hero,
    .calc-result, .lp-slide-apps {
        background-color: var(--cbp-chrome, #0e2c4f);
        background-size: var(--cbp-chrome-size, auto, cover);
        background-position: center, center;
        background-repeat: no-repeat, no-repeat;
    }
    /* Panels that carry a filled brand button take the light at half strength: the red
       button on a surface lit to .10 reads 2.64:1, under the 3:1 boundary rule for a
       control's edge. At .05 it reads 3.04:1. */
    .lp-cta-band, .lp-reach { --cbp-aurora-peak: .05; }
    /* The light paints above the surface's own background and below its contents. */
    .cbp-nav-inner, .dealer-sidebar > * { position: relative; z-index: 1; }

    /* EVERY surface that carries the contour texture, in one place, so none of them can
       be missed the way half of them were. The texture asset is a NAVY image: a grey wash
       over it still comes out blue, which is why the top bar measured rgb(32,38,46) with
       99% of its dark pixels carrying a blue bias while its CSS said #262626.
       `luminosity` keeps the image's light and shade and takes the hue from whatever is
       underneath -- navy in daylight, so nothing changes there; neutral grey at night, so
       the contours come out grey. One token, flipped once, in theme-core. */
    .cbp-nav, .cbp-nav.scrolled, .cbp-links, .cbp-footer, .dealer-sidebar,
    .lp-slide-apps, .lp-cta-band, .lp-page-head, .lp-reach, .apps-hero, .ci-hero,
    .calc-result, .lp-svc-img, .scw-head, #title .modal-header {
        background-blend-mode: var(--cbp-chrome-blend, normal, normal);
    }