/* --- Reset ----------------------------------------------- */
        .form-wrapper *,
        .form-wrapper *::before,
        .form-wrapper *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        } .hbspt-form *,
    .hbspt-form *::before,
    .hbspt-form *::after {
        box-sizing: border-box;
    }

        /* --- Page / wrapper -------------------------------------- */
        .form-wrapper {
            /*background: #c8e8e8;*/
            /* teal-mint background matching the screenshot */
            font-family: Arial, Helvetica, sans-serif;
            display: flex;
            justify-content: center;
            align-items: flex-start;
            min-height: 100vh;
            padding: 24px 16px;
        }

        .form-wrapper {
            background: transparent;
            width: 100%;
            max-width: 340px;
        }

        /* --- HubSpot form override tokens ----------------------- */
        /*
      These selectors target the classes HubSpot injects.
      Drop your hbspt.forms.create() call inside #hs-form-container
      and these rules will apply automatically.
    */

        /* Generic field container HubSpot wraps each field in */
        .hs-form-field,
        .form-group {
            margin-bottom: 10px;
        }

        /* Hide HubSpot's labels (placeholders serve as labels here) */
        .hs-form-field label,
        .hs-label {
            display: none !important;
        }

        /* --- Text inputs ----------------------------------------- */
        input[type="text"],
        input[type="email"],
        input[type="tel"],
        input[type="number"],
        .hs-input[type="text"],
        .hs-input[type="email"],
        .hs-input[type="tel"] {
            width: 100%;
            padding: 12px 14px;
            font-size: 14px;
            font-style: italic;
            color: #999;
            background: #fff;
            border: 1.5px solid #ddd;
            border-radius: 4px;
            outline: none;
            transition: border-color 0.2s;
            appearance: none;
            -webkit-appearance: none;
        }

        input[type="text"]:focus,
        input[type="email"]:focus,
        input[type="tel"]:focus,
        .hs-input:focus {
            border-color: #26a69a;
            color: #333;
            font-style: normal;
        }

        /* Error state – HubSpot adds .error class */
        input.error,
        .hs-input.error {
            border-color: #e8003d !important;
            color: #e8003d !important;
        }

        /* --- Selects / dropdowns --------------------------------- */
        select,
        .hs-input[type="select"],
        .hs-select select {
            width: 100%;
            height: 45px;
            padding: 12px 36px 12px 14px;
            font-size: 14px;
            font-style: italic;
            color: #999;
            background: #f0f0f0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center;
            border: 1.5px solid #ddd;
            border-radius: 4px;
            outline: none;
            appearance: none;
            -webkit-appearance: none;
            cursor: pointer;
            transition: border-color 0.2s;
            
        }

        select:focus,
        .hs-select select:focus {
            border-color: #26a69a;
            color: #333;
            font-style: normal;
        }

        select.error,
        .hs-select select.error {
            border-color: #e8003d !important;
            color: #e8003d !important;
        }

        /* --- Validation error messages --------------------------- */
        .hs-error-msgs,
        .hs-error-msg,
        .field-error {
            display: none;
            /* Errors shown via field highlight + banner */
        }

        /* --- Submit button --------------------------------------- */
        input[type="submit"],
        .hs-submit input,
        .hs-button {
            display: block;
            width: 100%;
            padding: 16px;
            background: #26a69a;
            color: #fff;
            font-size: 15px;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            border: none;
            border-radius: 15px;
            cursor: pointer;
            margin-top: 6px;
            transition: background 0.2s;

        }

        input[type="submit"]:hover,
        .hs-button:hover {
            background: #1e897f;
        }

        /* --- GDPR / legal copy ----------------------------------- */
        .legal-consent-container p,
        .form-legal,
        .hs-richtext p {
            font-size: 11px;
            color: #8e8c8c;
            margin-top: 10px;
            line-height: 1.5;
            font-style: italic;
        }

        /* --- Error banner (mirrors Pardot's red footer bar) ------ */
        .error-banner {
            display: none;
            background: #e8003d;
            color: #fff;
            font-size: 13px;
            font-weight: 600;
            padding: 10px 14px;
            border-radius: 4px;
            margin-top: 10px;
            align-items: center;
            gap: 8px;
        }

        .error-banner.visible {
            display: flex;
        }

        .error-banner::before {
            content: "!";
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 20px;
            height: 20px;
            border: 2px solid #fff;
            border-radius: 50%;
            font-weight: 900;
            font-size: 12px;
            flex-shrink: 0;
        }

        /* --- Error icon inside inputs (the ❗ on the right) ------ */
        .field-wrap {
            position: relative;
        }

        .field-wrap .err-icon {
            display: none;
            position: absolute;
            right: 12px;
            top: 50%;
            transform: translateY(-50%);
            color: #e8003d;
            font-size: 18px;
            pointer-events: none;
        }

        .field-wrap.has-error .err-icon {
            display: block;
        }

        .field-wrap.has-error input,
        .field-wrap.has-error select {
            border-color: #e8003d;
            color: #e8003d;
        }

        /* push text so it doesn't sit under the icon */
        .field-wrap.has-error input,
        .field-wrap.has-error select {
            padding-right: 36px;
        }