/* =====================================================================
   ACG Capital — Modern Equipment-Financing Application
   Scoped stylesheet for /apply/default2.aspx (modern 2-step redesign).
   Self-contained: does not depend on master.css / lc-master.css / ostrich-black.
   ===================================================================== */

:root {
    --acg-navy: #002b54;
    --acg-navy-700: #00386e;
    --acg-blue: #0066cc;
    --acg-blue-600: #0a5fb8;
    --acg-blue-700: #0052a3;
    --acg-blue-050: #eef5fc;
    --acg-ink: #1f2d3d;
    --acg-muted: #64748b;
    --acg-line: #d9e1ec;
    --acg-line-200: #e7edf5;
    --acg-bg: #eef2f7;
    --acg-bg-grad-top: #f5f8fc;
    --acg-error: #d92d20;
    --acg-error-bg: #fef3f2;
    --acg-success: #1f9254;
    --acg-radius: 14px;
    --acg-radius-sm: 9px;

    /* Shadows and the focus ring are tinted with the brand, so their colors are
       kept as bare "r, g, b" triples rather than baked into the rgba(). A vendor
       theme can then re-tint every shadow on the page by overriding one value.
       (Default triples are --acg-navy and --acg-blue.) */
    --acg-shadow-rgb: 0, 43, 84;
    --acg-focus-rgb: 0, 102, 204;
    --acg-shadow: 0 10px 30px rgba(var(--acg-shadow-rgb), 0.10);
    --acg-shadow-sm: 0 2px 8px rgba(var(--acg-shadow-rgb), 0.07);
    --acg-focus: 0 0 0 3px rgba(var(--acg-focus-rgb), 0.22);
    --acg-btn-shadow: 0 6px 16px rgba(var(--acg-focus-rgb), 0.25);

    /* Text on top of --acg-blue (primary buttons, the active step marker). White
       against ACG's blue, but a light brand color needs dark text here to stay
       readable -- so it is a variable, not a hardcoded #fff. */
    --acg-on-primary: #fff;

    /* The brand color where it is TEXT on the white card -- the terms links in
       the consent row and the "Saving..." label. Separate from --acg-blue, which
       is only ever a background: a light brand gold is perfectly readable behind
       dark text, but the same gold AS text on white lands at 1.6:1. Vendors put
       their darker brand shade here instead. */
    --acg-link: var(--acg-blue);

    /* Header band. White for ACG; a vendor whose logo sits on a dark background
       overrides these so the logo does not read as a box on white. */
    --acg-header-bg: #fff;
    --acg-header-fg: var(--acg-ink);

    /* Neutrals that were previously hardcoded at their point of use. They are
       cool-tinted to match ACG's blue, so a warm brand theme needs them. */
    --acg-placeholder: #9aa7b8;
    --acg-fill-muted: #f6f8fb;
    --acg-success-bg: #e8f6ee;

    /* The site footer is ACG's own corporate footer -- company links, BBB and
       association badges. It stays ACG navy on a vendor-themed page, so it holds
       the color literally instead of following --acg-navy, which vendors retheme. */
    --acg-footer-bg: #002b54;
    --acg-font: "Inter", "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---- Reset (light, scoped to the application body) ---------------- */
body#about {
    margin: 0;
    padding: 0;
    background: linear-gradient(180deg, var(--acg-bg-grad-top) 0%, var(--acg-bg) 100%) no-repeat;
    background-attachment: fixed;
    min-height: 100vh;
    color: var(--acg-ink);
    font-family: var(--acg-font);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body#about * {
    box-sizing: border-box;
}

/* The site footer sizes its logo and association badges with height
   utilities, and an id-carrying selector outranks every one of them.
   This stops short of the footer; Tailwind's own img rule covers it. */
body#about img:not(footer img) {
    max-width: 100%;
    height: auto;
}

/* ---- Layout shell ------------------------------------------------- */
#wrapper {
    width: 100%;
}

.acg-header {
    background: var(--acg-header-bg);
    color: var(--acg-header-fg);
    border-bottom: 1px solid var(--acg-line-200);
    box-shadow: var(--acg-shadow-sm);
}

.acg-header-inner {
    max-width: 1080px;
    margin: 0 auto;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

body#about .acg-header-inner .acg-logo {
    height: 46px;
    width: auto;
    max-width: 460px;
}

.acg-header-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--acg-navy);
    background: var(--acg-blue-050);
    border: 1px solid var(--acg-line);
    padding: 7px 13px;
    border-radius: 999px;
    white-space: nowrap;
}

.acg-header-badge svg {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
}

/* The shield follows the brand rather than a baked-in blue, and its tick
   uses the on-primary color so it stays readable on a light brand color. */
.acg-header-badge svg .acg-shield {
    fill: var(--acg-blue);
}

.acg-header-badge svg .acg-shield-tick {
    stroke: var(--acg-on-primary);
}

/* ---- Vendor co-brand lockup ---------------------------------------
   Rendered only when /apply/ is reached with a ?v= vendor slug. The
   vendor's mark leads, because their flyer is what sent the applicant
   here -- but ACG is named right beside it, since the person is about
   to type a Social Security number and has to see who receives it. */
.acg-vendor-brand {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
}

.acg-vendor-lockup {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    text-decoration: none;
    color: inherit;
    min-width: 0;
}

body#about .acg-header-inner .acg-vendor-lockup .acg-logo {
    height: 44px;
    max-width: 200px;
    flex: 0 0 auto;
}

.acg-vendor-name {
    display: flex;
    flex-direction: column;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--acg-header-fg);
    min-width: 0;
}

.acg-vendor-name small {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    opacity: 0.72;
}

.acg-vendor-by {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding-left: 18px;
    border-left: 1px solid currentColor;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--acg-header-fg);
    opacity: 0.7;
    white-space: nowrap;
}

body#about .acg-header-inner .acg-vendor-by img {
    height: 34px;
    width: auto;
}

/* ---- Main grid: form + trust aside -------------------------------- */
.acg-main {
    max-width: 1080px;
    margin: 0 auto;
    padding: 32px 24px 56px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 28px;
    align-items: start;
}

/* The legacy wrappers should not impose their own widths/backgrounds. */
body#about .Box,
body#about .maincontent,
body#about #content.maincontent,
body#about .middle,
body#about .rightside,
body#about .header {
    all: unset;
}
body#about .maincontent,
body#about #content.maincontent {
    display: contents;
}

/* ---- Card --------------------------------------------------------- */
.acg-card {
    background: #fff;
    border: 1px solid var(--acg-line-200);
    border-radius: var(--acg-radius);
    box-shadow: var(--acg-shadow);
    padding: 30px 32px 34px;
}

.acg-card-head h1 {
    margin: 0 0 4px;
    font-size: 23px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--acg-navy);
}

.acg-card-head p {
    margin: 0 0 22px;
    color: var(--acg-muted);
    font-size: 14px;
}

/* ---- Step progress indicator -------------------------------------- */
.acg-steps {
    display: flex;
    align-items: center;
    gap: 0;
    margin: 0 0 26px;
}

.acg-step {
    display: flex;
    align-items: center;
    gap: 11px;
    flex: 0 0 auto;
}

.acg-step-num {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--acg-line);
    color: var(--acg-muted);
    font-weight: 700;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
}

.acg-step-label {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--acg-muted);
    transition: color 0.25s ease;
}

.acg-step-line {
    flex: 1 1 auto;
    height: 2px;
    background: var(--acg-line);
    margin: 0 16px;
    border-radius: 2px;
    transition: background 0.25s ease;
}

.acg-step.is-active .acg-step-num {
    background: var(--acg-blue);
    border-color: var(--acg-blue);
    color: var(--acg-on-primary);
    box-shadow: 0 0 0 4px var(--acg-blue-050);
}

.acg-step.is-active .acg-step-label {
    color: var(--acg-navy);
}

.acg-step.is-done .acg-step-num {
    background: var(--acg-navy);
    border-color: var(--acg-navy);
    color: #fff;
}

.acg-step.is-done + .acg-step-line {
    background: var(--acg-blue);
}

/* ---- Alert banner (lblErrorMessage) ------------------------------- */
.BodyTextErr,
#ctl00_ContentCenterColumn_lblErrorMessage,
span.acg-alert {
    color: var(--acg-error) !important;
}

.acg-alert-host:empty {
    display: none;
}

.acg-alert-host {
    display: block;
    background: var(--acg-error-bg);
    border: 1px solid #fbd4cf;
    color: var(--acg-error) !important;
    border-radius: var(--acg-radius-sm);
    padding: 12px 15px;
    margin: 0 0 20px;
    font-size: 14px;
    font-weight: 600;
    font-family: var(--acg-font) !important;
}

/* ---- Section headings inside a step ------------------------------- */
.acg-section-title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--acg-navy);
    margin: 4px 0 14px;
    padding-bottom: 9px;
    border-bottom: 1px solid var(--acg-line-200);
}

.acg-section-title:not(:first-child) {
    margin-top: 28px;
}

/* ---- Form grid + fields ------------------------------------------- */
.acg-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 18px;
}

.acg-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.acg-field.col-span-2 {
    grid-column: 1 / -1;
}

.acg-field label {
    font-size: 13px;
    font-weight: 600;
    color: var(--acg-ink);
}

.acg-field label .req {
    color: var(--acg-error);
    margin-left: 2px;
}

/* Inputs / selects / textareas — normalize the legacy server controls */
body#about .acg-field input[type="text"],
body#about .acg-field input[type="email"],
body#about .acg-field input[type="tel"],
body#about .acg-field select,
body#about .acg-field textarea {
    width: 100%;
    height: 46px;
    padding: 0 13px;
    font-family: var(--acg-font);
    font-size: 15px !important;
    color: var(--acg-ink);
    background: #fff;
    border: 1px solid var(--acg-line);
    border-radius: var(--acg-radius-sm);
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    -webkit-appearance: none;
    appearance: none;
}

body#about .acg-field textarea {
    height: auto;
    min-height: 120px;
    padding: 11px 13px;
    line-height: 1.5;
    resize: vertical;
}

body#about .acg-field select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2364748b' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
    cursor: pointer;
}

body#about .acg-field input::placeholder,
body#about .acg-field textarea::placeholder {
    color: var(--acg-placeholder);
}

body#about .acg-field input:focus,
body#about .acg-field select:focus,
body#about .acg-field textarea:focus {
    border-color: var(--acg-blue);
    box-shadow: var(--acg-focus);
}

body#about .acg-field input:disabled,
body#about .acg-field input[readonly] {
    background: var(--acg-fill-muted);
    color: var(--acg-muted);
}

/* ---- Consent + checkboxes ----------------------------------------- */
.acg-consent-box {
    margin-top: 6px;
}

.acg-consent-box .acg-consent-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--acg-navy);
    margin-bottom: 7px;
    display: block;
}

body#about .acg-consent-box textarea {
    width: 100%;
    min-height: 132px;
    padding: 12px 14px;
    font-family: var(--acg-font);
    font-size: 13px;
    line-height: 1.55;
    color: var(--acg-muted);
    background: #f8fafc;
    border: 1px solid var(--acg-line);
    border-radius: var(--acg-radius-sm);
    resize: vertical;
}

.acg-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 14px;
    font-size: 13.5px;
    color: var(--acg-ink);
    line-height: 1.45;
}

.acg-check input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
    flex: 0 0 auto;
    accent-color: var(--acg-blue);
    cursor: pointer;
}

.acg-check label,
.acg-check span {
    cursor: pointer;
}

.acg-check a {
    color: var(--acg-link);
    text-decoration: none;
}

.acg-check a:hover {
    text-decoration: underline;
}

/* ---- Buttons / action row ----------------------------------------- */
.acg-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 26px;
    flex-wrap: wrap;
}

body#about .acg-btn,
body#about input.acg-btn,
body#about #btnSubmit.acg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    min-width: 168px;
    padding: 0 26px;
    font-family: var(--acg-font);
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    border-radius: var(--acg-radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
    text-align: center;
    background-image: none;
    text-shadow: none;
    box-shadow: none;
    width: auto;
}

body#about .acg-btn-primary,
body#about #btnSubmit.acg-btn {
    background: var(--acg-blue);
    color: var(--acg-on-primary);
    box-shadow: var(--acg-btn-shadow);
}

body#about .acg-btn-primary:hover,
body#about #btnSubmit.acg-btn:hover {
    background: var(--acg-blue-700);
}

body#about .acg-btn-primary:active,
body#about #btnSubmit.acg-btn:active {
    transform: translateY(1px);
}

body#about .acg-btn-secondary {
    background: #fff;
    color: var(--acg-navy);
    border-color: var(--acg-line);
    box-shadow: none;
    min-width: 120px;
}

body#about .acg-btn-secondary:hover {
    background: var(--acg-blue-050);
    border-color: var(--acg-blue);
}

.acg-actions .acg-saving,
#lblLeadSaving,
#lblLoading {
    font-size: 14px;
    font-weight: 600;
    color: var(--acg-link);
}

/* Hide unused legacy step buttons cleanly */
#btnNext0,
#btnPrev0 {
    display: none !important;
}

/* Honeypot: kept in the DOM and submittable, but off-screen and unreachable for humans */
body#about .acg-hp {
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    border: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
}

/* Turnstile container — only takes space if a visible challenge is shown */
.acg-turnstile {
    margin: 15px 0 0;
}
.acg-turnstile:empty {
    margin: 0;
}

/* ---- Trust aside -------------------------------------------------- */
.acg-aside {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: sticky;
    top: 24px;
}

.acg-trust-card {
    background: #fff;
    border: 1px solid var(--acg-line-200);
    border-radius: var(--acg-radius);
    box-shadow: var(--acg-shadow-sm);
    padding: 20px;
}

.acg-trust-card h3 {
    margin: 0 0 12px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--acg-navy);
}

.acg-trust-points {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.acg-trust-points li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 13.5px;
    color: var(--acg-ink);
}

.acg-trust-points svg {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    margin-top: 1px;
    color: var(--acg-success);
}

.acg-badges {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 10px;
}

body#about .acg-badges img {
    height: 46px;
    width: auto;
}

/* Account-manager block (fields read by code-behind, kept visible & tidy) */
.acg-am .acg-am-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 10px;
}

body#about .acg-am input,
body#about .acg-am textarea {
    border: none !important;
    background: none !important;
    padding: 0 !important;
    margin: 0;
    font-family: var(--acg-font);
    font-size: 14px;
    color: var(--acg-ink);
    width: 100%;
    height: auto;
    resize: none;
    box-shadow: none;
}

.acg-am .acg-am-empty {
    font-size: 13.5px;
    color: var(--acg-muted);
}

/* ---- Footer ------------------------------------------------------- */
#footer1 {
    background: var(--acg-footer-bg);
    color: #b9c8da;
    padding: 26px 24px;
    font-size: 12px;
    line-height: 1.6;
}

.acg-footer-inner {
    max-width: 1080px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.4fr 1fr auto;
    gap: 24px;
}

#footer1 a {
    color: #cfe0f2;
    text-decoration: none;
}

#footer1 a:hover {
    text-decoration: underline;
}

#footer1 .acg-foot-legal strong {
    color: #fff;
}

/* ---- Responsive --------------------------------------------------- */
@media (max-width: 900px) {
    .acg-main {
        grid-template-columns: 1fr;
        padding: 24px 18px 48px;
    }
    .acg-aside {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .acg-trust-card {
        flex: 1 1 240px;
    }
    .acg-footer-inner {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 640px) {
    .acg-card {
        padding: 22px 18px 26px;
    }
    .acg-grid {
        grid-template-columns: 1fr;
    }
    .acg-field.col-span-2 {
        grid-column: 1 / -1;
    }
    .acg-steps {
        gap: 0;
    }
    .acg-step-label {
        display: none;
    }
    .acg-step-line {
        margin: 0 10px;
    }
    .acg-card-head h1 {
        font-size: 20px;
    }
    .acg-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }
    body#about .acg-btn,
    body#about #btnSubmit.acg-btn {
        width: 100%;
    }
    .acg-header-inner {
        padding: 13px 16px;
    }
    body#about .acg-header-inner .acg-logo {
        height: 38px;
    }
    .acg-footer-inner {
        grid-template-columns: 1fr;
    }
}

/* Very narrow screens: the logo alone fills the header row, so the
   nowrap badge beside it pushes the page sideways. */
@media (max-width: 520px) {
    .acg-header-badge {
        display: none;
    }
}

/* The co-brand lockup carries two logos and a divider rule. Below tablet
   that stops fitting on one row, so the ACG partnership line drops under
   the vendor's mark instead of squeezing it.
   The 800px cutoff is measured, not guessed: the ACG mark is 172px wide at
   34px tall, and below ~780 the row runs out of space and starts wrapping
   the vendor name to two lines. Stacking at 800 keeps a comfortable gap to
   the "Secured Application" badge instead. Re-measure if either logo size
   changes. */
@media (max-width: 800px) {
    .acg-vendor-brand {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
    .acg-vendor-by {
        padding-left: 0;
        border-left: 0;
    }
    body#about .acg-header-inner .acg-vendor-lockup .acg-logo {
        height: 38px;
    }
    body#about .acg-header-inner .acg-vendor-by img {
        height: 28px;
    }
}

/* On mobile the legacy code's resize handler is gone; ensure panels
   obey our own show/hide state regardless of viewport. */
@media (max-width: 778px) {
    #page0, #page1 { display: block; }
}

/* apply-form.js shows and hides the step panels, buttons and status
   labels with the hidden attribute; it has to win over every display
   rule above, including the mobile one. */
[hidden] { display: none !important; }

/* ---- Application thank-you page ---------------------------------- */
.acg-ty-main {
	max-width: 720px;
	margin: 0 auto;
	padding: 48px 24px 64px;
}
.acg-ty-card {
	background: #fff;
	border: 1px solid var(--acg-line-200);
	border-radius: var(--acg-radius);
	box-shadow: var(--acg-shadow);
	padding: 44px 40px;
	text-align: center;
}
.acg-ty-check {
	width: 76px;
	height: 76px;
	margin: 0 auto 22px;
	border-radius: 50%;
	background: var(--acg-success-bg);
	display: flex;
	align-items: center;
	justify-content: center;
}
.acg-ty-check svg { width: 40px; height: 40px; color: var(--acg-success); }
.acg-ty-card h1 {
	margin: 0 0 10px;
	font-size: 28px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--acg-navy);
}
.acg-ty-message {
	margin: 0 auto 28px;
	max-width: 520px;
	font-size: 16px;
	color: var(--acg-muted);
	line-height: 1.55;
}
.acg-ty-steps {
	list-style: none;
	margin: 0 0 30px;
	padding: 24px 0 4px;
	border-top: 1px solid var(--acg-line-200);
	text-align: left;
	display: grid;
	gap: 16px;
}
.acg-ty-step {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}
.acg-ty-step .num {
	flex: 0 0 auto;
	width: 30px; height: 30px;
	border-radius: 50%;
	background: var(--acg-blue);
	color: var(--acg-on-primary);
	font-weight: 700;
	font-size: 14px;
	display: flex; align-items: center; justify-content: center;
}
.acg-ty-step .txt { font-size: 15px; color: var(--acg-ink); padding-top: 4px; }
.acg-ty-step .txt strong { color: var(--acg-navy); }
body#about .acg-ty-card .acg-btn-primary {
	display: inline-flex; align-items: center; justify-content: center;
	height: 48px; padding: 0 28px;
	font-family: var(--acg-font); font-size: 15px; font-weight: 600;
	border-radius: var(--acg-radius-sm); border: 1px solid transparent;
	background: var(--acg-blue); color: var(--acg-on-primary); text-decoration: none;
	box-shadow: var(--acg-btn-shadow);
}
body#about .acg-ty-card .acg-btn-primary:hover { background: var(--acg-blue-700); }
@media (max-width: 640px) {
	.acg-ty-card { padding: 30px 20px; }
	.acg-ty-card h1 { font-size: 23px; }
}