/* Main Hero — 1.9.14 canonical HERO contract: 1.9.13 clean baseline + approved 5px PC/Compact tuning. */
.cloudbox-hero{
    position:relative;
    width:100%;
    min-height:844px;
    overflow:clip;
    background:#03090e;
    color:#edf5fa;
    font-family:'Montserrat',sans-serif;
}
.cloudbox-hero,.cloudbox-hero *{box-sizing:border-box}
.cloudbox-hero__visual,.cloudbox-hero__readability{position:absolute;inset:0;width:100%;height:100%}
.cloudbox-hero__visual{z-index:0}
.cloudbox-hero__image{display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center center}
/* Home foundation has `.cloudbox-page img { height:auto; }`; this selector intentionally outranks it. */
body.home .cloudbox-hero__image{width:100%;height:100%;max-width:none;object-fit:cover;object-position:center center}
/* Desktop + Compact Figma contain no separate readability layer. */
.cloudbox-hero__readability{display:none;z-index:1}
.cloudbox-hero__canvas{
    position:relative;
    z-index:2;
    width:min(1560px,calc(100% - 48px));
    min-height:844px;
    margin-inline:auto;
    display:grid;
    align-items:center;
    padding-bottom:120px;
}
.cloudbox-hero__content{
    width:min(620px,100%);
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    min-width:0;
    padding-bottom:5px;
}
.cloudbox-hero__title{display:flex;flex-direction:column;margin:0;color:#edf5fa;font:700 43px/56px 'Montserrat',sans-serif;letter-spacing:0;white-space:nowrap}
.cloudbox-hero__title>span{display:block}
.cloudbox-hero__title-accent{color:#ffc107}
.cloudbox-hero__description{width:min(620px,100%);min-height:57px;margin:34px 0 0;color:#d4dee8;font:400 16px/26px 'Montserrat',sans-serif}
.cloudbox-hero__actions{display:flex;align-items:center;gap:20px;margin-top:22px;max-width:100%;height:62px}
.cloudbox-hero__button{display:flex;align-items:center;justify-content:center;width:296px;height:62px;flex:0 0 auto;border-radius:5px;font:600 16px/20px 'Montserrat',sans-serif;text-decoration:none;cursor:pointer}
.cloudbox-hero__button:focus-visible{outline:2px solid #fff;outline-offset:3px}
.cloudbox-hero__button--primary{gap:0;border:1.5px solid #ffc107;background:#ffc107;color:#0a0d0f;justify-content:space-between;padding:0 20px 0 24px}
.cloudbox-hero__button--primary>span:last-child{width:24px;height:12px;flex:0 0 24px}
.cloudbox-hero__button--primary>span:last-child svg{display:block;width:24px;height:12px}
.cloudbox-hero__button--primary:hover{background:#ffd03b;color:#0a0d0f}
.cloudbox-hero__button--secondary{border:1.5px solid #ffc107;background:rgba(3,6,10,.3);color:#edf5fa;justify-content:center;padding:0}
.cloudbox-hero__button--secondary:disabled{opacity:.55;cursor:not-allowed}

@media (min-width:1024px){
    body.home .cloudbox-hero__image{object-position:center calc(50% - 5px)}
}

@media (min-width:1024px) and (max-width:1366.98px){
    .cloudbox-hero__canvas{width:calc(100% - 48px);max-width:none}
    .cloudbox-hero__actions{height:62px}
    .cloudbox-hero__button{width:265px;height:60px}
}

@media (min-width:768px) and (max-width:1023.98px){
    .cloudbox-hero{min-height:460px}
    .cloudbox-hero__readability{display:block;width:70.3125%;right:auto;background:linear-gradient(90deg,rgba(5,13,22,.94) 0%,rgba(5,13,22,.72) 58%,rgba(5,13,22,0) 100%)}
    .cloudbox-hero__canvas{
        width:min(704px,calc(100% - 64px));
        min-height:460px;
        padding:0;
        align-items:start;
    }
    .cloudbox-hero__content{
        width:min(410px,100%);
        padding-top:64px;
        padding-bottom:0;
    }
    .cloudbox-hero__title{width:100%;font-size:30px;line-height:40px;white-space:normal}
    .cloudbox-hero__description{width:min(390px,100%);min-height:66px;margin-top:34px;font-size:14px;line-height:22px}
    .cloudbox-hero__actions{width:515px;max-width:none;height:52px;margin-top:40px;gap:15px}
    .cloudbox-hero__button{width:250px;height:52px;font-size:14px;line-height:17px;flex:0 0 250px}
}

@media (max-width:767.98px){
    .cloudbox-hero{min-height:530px}
    .cloudbox-hero__readability{display:block;background:linear-gradient(180deg,rgba(3,9,14,.98) 0%,rgba(3,9,14,.9) 48%,rgba(3,9,14,.58) 72%,rgba(3,9,14,.16) 100%)}
    .cloudbox-hero__canvas{
        width:min(704px,calc(100% - 40px));
        min-height:530px;
        padding:0;
        align-items:start;
    }
    .cloudbox-hero__content{
        width:min(480px,100%);
        margin-inline:auto;
        padding-top:34px;
        padding-bottom:0;
        align-items:center;
        text-align:center;
    }
    .cloudbox-hero__title{width:100%;display:block;font-size:26px;line-height:34px;white-space:normal;text-align:center}
    .cloudbox-hero__title>span{display:block}
    .cloudbox-hero__title-accent{letter-spacing:-1px}
    .cloudbox-hero__description{width:min(420px,100%);min-height:66px;margin-top:18px;font-size:14px;line-height:22px;text-align:center}
    .cloudbox-hero__actions{width:100%;height:116px;margin-top:48px;display:flex;flex-direction:column;gap:12px}
    .cloudbox-hero__button{width:100%;height:52px;flex:0 0 52px;font-size:14px;line-height:17px}
    .cloudbox-hero__button--primary{position:relative;justify-content:center;padding:0}
    .cloudbox-hero__button--primary>span:first-child{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
    .cloudbox-hero__button--primary>span:last-child{position:absolute;left:auto;right:24px;top:20px;width:24px;height:12px}
    .cloudbox-hero__button--secondary{justify-content:center;padding:0}
}

@media (hover:hover) and (pointer:fine){.cloudbox-hero__button{transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease}.cloudbox-hero__button:not(:disabled):hover{transform:translateY(-2px)}.cloudbox-hero__button--primary:hover{background:#ffd43d;box-shadow:0 10px 24px rgba(255,195,0,.24)}}

/* UNIVERSAL FORMS / shared modal shell + status states */
/* SECTION / 01 — UNIVERSAL FORMS — FINAL / HANDOFF / 2026-08-28.
 * Rebuilt from live Figma geometry. Bitrix24 stays native: same inputs, same
 * validation messages, same submission lifecycle. This block is presentation only.
 */
body.cloudbox-hero-modal-open {
    overflow: hidden;
}

.cloudbox-hero-modal[hidden],
.cloudbox-hero-modal__status[hidden] {
    display: none !important;
}

.cloudbox-hero-modal {
    position: fixed;
    inset: 0;
    z-index: 1055;
    font-family: 'Montserrat', sans-serif;
}

.cloudbox-hero-modal__overlay {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    overflow-y: auto;
    padding: 20px;
    box-sizing: border-box;
    background: rgba(2, 7, 11, 0.76);
}

.cloudbox-hero-modal__dialog {
    position: relative;
    box-sizing: border-box;
    width: 620px;
    max-width: 100%;
    overflow: hidden;
    border: 0;
    border-radius: 14px;
    background: #0d141c;
    color: #edf5fa;
    box-shadow: inset 0 0 0 1px #2a3541, 0 0 28px rgba(255, 193, 7, 0.07), 0 24px 54px rgba(0, 0, 0, 0.46);
}

.cloudbox-hero-modal__dialog::before {
    content: '';
    position: absolute;
    z-index: 5;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: rgba(255, 193, 7, 0.9);
    pointer-events: none;
}

.cloudbox-hero-modal__header {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    height: 66px;
    border-bottom: 1px solid #27323d;
    background: #0d141c;
}

.cloudbox-hero-modal__header h2 {
    position: absolute;
    top: 18px;
    left: 70px;
    right: 70px;
    margin: 0;
    color: #edf5fa;
    font: 600 24px/30px 'Montserrat', sans-serif;
    text-align: center;
}

.cloudbox-hero-modal__intro {
    margin: 0;
    color: #aeb9c5;
    font-family: 'Montserrat', sans-serif;
    text-align: center;
}

.cloudbox-hero-modal__close {
    position: absolute;
    z-index: 6;
    top: 12px;
    right: 28px;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    box-sizing: border-box;
    padding: 0 0 3px;
    border: 1px solid #2a3541;
    border-radius: 8px;
    outline: 0;
    background: #121b24;
    color: #ffc107;
    font: 400 27px/28px 'Montserrat', sans-serif;
    cursor: pointer;
    box-shadow: none;
}

.cloudbox-hero-modal__close:hover {
    border-color: #2a3541;
}

.cloudbox-hero-modal__close:focus,
.cloudbox-hero-modal__close:focus-visible {
    outline: 0;
    border-color: #2a3541;
    box-shadow: none;
}

.cloudbox-hero-modal__body {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    height: calc(100% - 66px);
    overflow: hidden;
    background: #0d141c;
}

/* ---------- UNIVERSAL FORM / RC10 / SEQUENTIAL VALIDATION ---------- */
/*
 * Frozen visual source: Figma SECTION / 01 — UNIVERSAL FORMS — FINAL / HANDOFF / 2026-08-28.
 * Runtime remains native Bitrix24. The live CRM form groups normal fields and agreements
 * inside anonymous form children. Those wrappers are flattened with display:contents so
 * the stable Bitrix24 field classes themselves become grid items. This makes geometry and
 * semantic Terms → PD ordering independent of whether B24 groups both agreements together
 * or emits separate anonymous wrappers.
 */
.cloudbox-hero-modal[data-cloudbox-hero-state="form"] .cloudbox-hero-modal__dialog {
    width: 620px;
    height: 343px;
    min-height: 0;
}

.cloudbox-hero-modal[data-cloudbox-hero-state="form"][data-cloudbox-hero-validation="true"] .cloudbox-hero-modal__dialog {
    height: 363px;
    min-height: 0;
}

.cloudbox-hero-modal[data-cloudbox-hero-state="form"] .cloudbox-hero-modal__header {
    height: 109px;
}

.cloudbox-hero-modal[data-cloudbox-hero-state="form"] .cloudbox-hero-modal__header h2 {
    top: 18px;
    left: 70px;
    right: 70px;
    width: auto;
    max-width: none;
}

.cloudbox-hero-modal[data-cloudbox-hero-state="form"] .cloudbox-hero-modal__intro {
    position: absolute;
    top: 55px;
    left: 40px;
    right: 40px;
    margin: 0;
    color: #aeb9c5;
    font: 400 13px/19px 'Montserrat', sans-serif;
    text-align: center;
}

.cloudbox-hero-modal[data-cloudbox-hero-state="form"] .cloudbox-hero-modal__close {
    top: 19px;
    right: 28px;
}

.cloudbox-hero-modal[data-cloudbox-hero-state="form"] .cloudbox-hero-modal__body {
    height: calc(100% - 109px);
    overflow: hidden;
}

.cloudbox-hero-modal[data-cloudbox-hero-state="form"] .cloudbox-hero-modal__form-stage {
    position: relative;
    width: 564px;
    height: 189px;
    margin: 17px 28px 28px;
    box-sizing: border-box;
    overflow: visible;
}

.cloudbox-hero-modal[data-cloudbox-hero-state="form"][data-cloudbox-hero-validation="true"] .cloudbox-hero-modal__form-stage {
    height: 209px;
}

/* Universal form shell reset. */
.cloudbox-hero-modal__form-container,
.cloudbox-hero-modal .b24-form,
.cloudbox-hero-modal .b24-form-wrapper,
.cloudbox-hero-modal .b24-form-body,
.cloudbox-hero-modal .b24-form-content {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-family: 'Montserrat', sans-serif !important;
}

.cloudbox-hero-modal .b24-form-header,
.cloudbox-hero-modal .b24-form-header-padding,
.cloudbox-hero-modal .b24-form-sign,
.cloudbox-hero-modal .b24-form-state-container {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.cloudbox-hero-modal .b24-form-padding-side {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/*
 * Critical live-DOM rule: Bitrix24 places the phone field in one anonymous group and
 * agreements in another; two agreements can live in the SAME direct wrapper. Flatten only
 * those anonymous groups. We intentionally do not depend on :has() or wrapper cardinality.
 */
.cloudbox-hero-modal .b24-form-content form {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 52px 16px 16px 5px 28px 16px 56px !important;
    width: 100% !important;
    max-width: none !important;
    height: 189px !important;
    min-height: 189px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}

.cloudbox-hero-modal[data-cloudbox-hero-validation="true"] .b24-form-content form {
    height: 209px !important;
    min-height: 209px !important;
}

/* Sequential validation: exactly one field expands per explicit submit attempt. */
.cloudbox-hero-modal[data-cloudbox-hero-validation-target="phone"] .b24-form-content form {
    grid-template-rows: 72px 16px 16px 5px 28px 16px 56px !important;
}

.cloudbox-hero-modal[data-cloudbox-hero-validation-target="terms"] .b24-form-content form {
    grid-template-rows: 52px 16px 36px 5px 28px 16px 56px !important;
}

.cloudbox-hero-modal[data-cloudbox-hero-validation-target="pd"] .b24-form-content form {
    grid-template-rows: 52px 16px 16px 5px 48px 16px 56px !important;
}

.cloudbox-hero-modal .b24-form-content form > div:not(.b24-form-btn-container) {
    display: contents !important;
}

.cloudbox-hero-modal .b24-form-content form .v-portal {
    display: none !important;
}

.cloudbox-hero-modal .b24-form-field,
.cloudbox-hero-modal .b24-form-btn-container,
.cloudbox-hero-modal .b24-form-btn-block {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.cloudbox-hero-modal .b24-form-field > div,
.cloudbox-hero-modal .b24-form-field > div > div {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* Stable B24 field boxes become the grid items after wrapper flattening. */
.cloudbox-hero-modal .b24-form-field-phone {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: stretch !important;
    height: 100% !important;
    min-height: 0 !important;
}

.cloudbox-hero-modal .cloudbox-hero-modal__agreement--terms {
    grid-column: 1 !important;
    grid-row: 3 !important;
    align-self: stretch !important;
    height: 100% !important;
    min-height: 0 !important;
}

.cloudbox-hero-modal .cloudbox-hero-modal__agreement--pd {
    grid-column: 1 !important;
    grid-row: 5 !important;
    align-self: stretch !important;
    height: 100% !important;
    min-height: 0 !important;
}

.cloudbox-hero-modal .b24-form-btn-container {
    grid-column: 1 !important;
    grid-row: 7 !important;
    align-self: stretch !important;
    height: 56px !important;
    min-height: 56px !important;
}

/* Phone — 564×52 in desktop/tablet shell. */
.cloudbox-hero-modal .b24-form-field-phone .b24-form-control-container {
    position: relative !important;
    width: 100% !important;
    height: 52px !important;
    min-height: 52px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.cloudbox-hero-modal .b24-form-field-phone .b24-form-control {
    display: block !important;
    width: 100% !important;
    height: 52px !important;
    min-height: 52px !important;
    margin: 0 !important;
    padding: 21px 15px 5px !important;
    box-sizing: border-box !important;
    border: 1px solid #3a4652 !important;
    border-radius: 8px !important;
    outline: 0 !important;
    background: #111b24 !important;
    color: #edf5fa !important;
    font: 500 17px/22px 'Montserrat', sans-serif !important;
    box-shadow: none !important;
}

.cloudbox-hero-modal .b24-form-field-phone .b24-form-control:focus,
.cloudbox-hero-modal .b24-form-field-phone .b24-form-control:focus-visible {
    border-color: #3a4652 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

.cloudbox-hero-modal .b24-form-field-phone .b24-form-control-label {
    position: absolute !important;
    z-index: 2 !important;
    top: 4px !important;
    left: 15px !important;
    right: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    color: #8f9caa !important;
    opacity: 1 !important;
    font: 500 12px/16px 'Montserrat', sans-serif !important;
    pointer-events: none !important;
}

/* Agreements: style the stable B24 agreement field and checkbox directly. */
.cloudbox-hero-modal .b24-form-control-agreement,
.cloudbox-hero-modal .b24-form-field-agreement {
    position: relative !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

.cloudbox-hero-modal .b24-form-control-agreement > div {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.cloudbox-hero-modal .b24-form-control-agreement .b24-form-control-container {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 0 0 25px !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
}

/*
 * Live Bitrix24 may insert an extra anonymous element around checkbox + copy.
 * Do NOT make that wrapper a grid item: RC8 squeezed the whole wrapper into
 * the 16px checkbox column. Keep it as a full-width block inside the 25px
 * text gutter so the copy remains beside the checkbox in every observed tree.
 */
.cloudbox-hero-modal .b24-form-control-agreement .b24-form-control-container > :not(input[type="checkbox"]):not(.b24-form-control-desc):not(.b24-form-control-required):not(.b24-form-control-alert-message) {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* Broad checkbox selector is deliberate: this Universal form contains only agreement checkboxes. */
.cloudbox-hero-modal .b24-form-content input[type="checkbox"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    border: 1px solid #667384 !important;
    border-radius: 4px !important;
    outline: 0 !important;
    background: #0d141c !important;
    box-shadow: none !important;
    cursor: pointer !important;
}

.cloudbox-hero-modal .cloudbox-hero-modal__agreement--pd input[type="checkbox"] {
    top: 2px !important;
}

.cloudbox-hero-modal[data-cloudbox-hero-validation-target="terms"] .cloudbox-hero-modal__agreement--terms input[type="checkbox"]:not(:checked),
.cloudbox-hero-modal[data-cloudbox-hero-validation-target="pd"] .cloudbox-hero-modal__agreement--pd input[type="checkbox"]:not(:checked) {
    border-color: #ff5738 !important;
}

.cloudbox-hero-modal .b24-form-content input[type="checkbox"]:checked {
    border-color: #ffc107 !important;
    background: #ffc107 !important;
}

.cloudbox-hero-modal .b24-form-content input[type="checkbox"]:checked::after {
    content: '' !important;
    position: absolute !important;
    left: 4px !important;
    top: 1px !important;
    width: 5px !important;
    height: 9px !important;
    border: solid #0a0d0f !important;
    border-width: 0 2px 2px 0 !important;
    transform: rotate(45deg) !important;
}

.cloudbox-hero-modal .b24-form-control-agreement .b24-form-control-desc {
    display: block !important;
    width: 510px !important;
    min-width: 0 !important;
    max-width: 510px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #aeb9c5 !important;
    opacity: 1 !important;
    font: 400 8.9px/14px 'Montserrat', sans-serif !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    text-decoration: none !important;
}

.cloudbox-hero-modal .b24-form-control-agreement .b24-form-control-desc *,
.cloudbox-hero-modal .b24-form-control-agreement .b24-form-field-agreement-link,
.cloudbox-hero-modal .b24-form-control-agreement .b24-form-field-agreement-link:link,
.cloudbox-hero-modal .b24-form-control-agreement .b24-form-field-agreement-link:visited,
.cloudbox-hero-modal .b24-form-control-agreement .b24-form-field-agreement-link:hover,
.cloudbox-hero-modal .b24-form-control-agreement .b24-form-field-agreement-link:focus {
    color: #aeb9c5 !important;
    font: inherit !important;
    letter-spacing: inherit !important;
    text-transform: none !important;
    text-decoration: none !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
}

/* Native required marker is visually recreated at the actual end of agreement copy. */
.cloudbox-hero-modal .b24-form-control-agreement .b24-form-control-required {
    display: none !important;
}

.cloudbox-hero-modal .b24-form-control-agreement .b24-form-control-desc::after {
    content: ' *';
    color: #ff5738;
    font: inherit;
}

/* Native validation chips are preserved; only their presentation/coordinates are normalized. */
.cloudbox-hero-modal .b24-form-control-alert-message {
    position: absolute !important;
    z-index: 4 !important;
    left: 17px !important;
    display: none !important;
    align-items: center !important;
    gap: 6px !important;
    width: 214px !important;
    height: 20px !important;
    min-height: 20px !important;
    margin: 0 !important;
    padding: 2px 6px 2px 3px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 2px !important;
    background: #ff5738 !important;
    color: #fff !important;
    font: 500 10px/16px 'Montserrat', sans-serif !important;
    white-space: nowrap !important;
}

.cloudbox-hero-modal[data-cloudbox-hero-validation-target="phone"] .b24-form-field-phone .b24-form-control-alert-message,
.cloudbox-hero-modal[data-cloudbox-hero-validation-target="terms"] .cloudbox-hero-modal__agreement--terms .b24-form-control-alert-message,
.cloudbox-hero-modal[data-cloudbox-hero-validation-target="pd"] .cloudbox-hero-modal__agreement--pd .b24-form-control-alert-message {
    display: flex !important;
}

.cloudbox-hero-modal .b24-form-control-alert-message::before {
    content: '⚠' !important;
    position: static !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    display: block !important;
    flex: 0 0 13px !important;
    width: 13px !important;
    min-width: 13px !important;
    height: 14px !important;
    margin: 0 !important;
    transform: none !important;
    font: 500 10px/14px 'Montserrat', sans-serif !important;
    text-align: center !important;
}

.cloudbox-hero-modal .b24-form-field-phone .b24-form-control-alert-message {
    top: 52px !important;
}

.cloudbox-hero-modal .cloudbox-hero-modal__agreement--terms .b24-form-control-alert-message {
    top: 16px !important;
}

.cloudbox-hero-modal .cloudbox-hero-modal__agreement--pd .b24-form-control-alert-message {
    top: 28px !important;
}

/* CTA. */
.cloudbox-hero-modal .b24-form-btn-block {
    height: 56px !important;
    min-height: 56px !important;
}

.cloudbox-hero-modal .b24-form-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 56px !important;
    min-height: 56px !important;
    margin: 0 !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
    border: 0 !important;
    border-radius: 7px !important;
    outline: 0 !important;
    background: #ffc107 !important;
    color: #0a0d0f !important;
    font: 600 15px/22px 'Montserrat', sans-serif !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    box-shadow: 0 8px 22px -4px rgba(255, 193, 7, 0.16) !important;
    cursor: pointer !important;
}

.cloudbox-hero-modal .b24-form-btn:hover,
.cloudbox-hero-modal .b24-form-btn:focus,
.cloudbox-hero-modal .b24-form-btn:focus-visible {
    outline: 0 !important;
    background: #ffc107 !important;
    box-shadow: 0 8px 22px -4px rgba(255, 193, 7, 0.16) !important;
}

/* ---------- LOADING / SUCCESS / ERROR / PC + Compact + Tablet ---------- */
.cloudbox-hero-modal[data-cloudbox-hero-state="loading"] .cloudbox-hero-modal__dialog,
.cloudbox-hero-modal[data-cloudbox-hero-state="success"] .cloudbox-hero-modal__dialog,
.cloudbox-hero-modal[data-cloudbox-hero-state="error"] .cloudbox-hero-modal__dialog {
    width: 620px;
    height: 343px;
}

.cloudbox-hero-modal[data-cloudbox-hero-state="loading"] .cloudbox-hero-modal__body,
.cloudbox-hero-modal[data-cloudbox-hero-state="success"] .cloudbox-hero-modal__body,
.cloudbox-hero-modal[data-cloudbox-hero-state="error"] .cloudbox-hero-modal__body {
    height: 277px;
}

.cloudbox-hero-modal__status {
    position: absolute;
    left: 28px;
    right: 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #edf5fa;
    text-align: center;
}

.cloudbox-hero-modal[data-cloudbox-hero-state="loading"] .cloudbox-hero-modal__status,
.cloudbox-hero-modal[data-cloudbox-hero-state="success"] .cloudbox-hero-modal__status {
    top: 41px;
    gap: 20px;
}

.cloudbox-hero-modal[data-cloudbox-hero-state="error"] .cloudbox-hero-modal__status {
    top: 9px;
    gap: 0;
}

.cloudbox-hero-modal__status-icon-shell {
    position: relative;
    width: 88px;
    height: 88px;
    flex: 0 0 88px;
}

.cloudbox-hero-modal__status-icon {
    position: absolute;
    display: block;
    max-width: none;
    pointer-events: none;
}

.cloudbox-hero-modal__status-icon--loading,
.cloudbox-hero-modal__status-icon--success {
    top: -14px;
    left: -14px;
    width: 116px;
}

.cloudbox-hero-modal__status-icon--loading {
    height: 116px;
    animation: cloudbox-hero-status-spin 1.15s linear infinite;
}

.cloudbox-hero-modal__status-icon--success {
    height: 120px;
}

.cloudbox-hero-modal__status-copy {
    width: 520px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.cloudbox-hero-modal__status-copy strong {
    width: 100%;
    margin: 0;
    color: #edf5fa;
    font: 600 22px/28px 'Montserrat', sans-serif;
}

.cloudbox-hero-modal__status-copy span {
    width: 480px;
    max-width: 100%;
    margin: 0;
    color: #a6b3c0;
    font: 400 14px/21px 'Montserrat', sans-serif;
}

.cloudbox-hero-modal[data-cloudbox-hero-state="error"] .cloudbox-hero-modal__status-icon-shell {
    width: 88px;
    height: 88px;
    flex-basis: 88px;
}

.cloudbox-hero-modal__status-icon--error {
    top: -8px;
    left: -8px;
    width: 104px;
    height: 111px;
}

.cloudbox-hero-modal[data-cloudbox-hero-state="error"] .cloudbox-hero-modal__status-copy {
    margin-top: 16px;
}

.cloudbox-hero-modal[data-cloudbox-hero-state="error"] .cloudbox-hero-modal__status-copy strong {
    width: 500px;
    max-width: 100%;
}

.cloudbox-hero-modal__retry {
    width: 260px;
    height: 52px;
    flex: 0 0 52px;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 8px;
    outline: 0;
    background: #ffc107;
    color: #071018;
    font: 600 14px/20px 'Montserrat', sans-serif;
    box-shadow: 0 6px 16px rgba(255, 193, 7, 0.18);
    cursor: pointer;
}

.cloudbox-hero-modal[data-cloudbox-hero-state="error"] .cloudbox-hero-modal__retry {
    margin-top: 6px;
}

.cloudbox-hero-modal__retry:hover,
.cloudbox-hero-modal__retry:focus,
.cloudbox-hero-modal__retry:focus-visible {
    outline: 0;
    background: #ffc107;
    box-shadow: 0 6px 16px rgba(255, 193, 7, 0.18);
}

@keyframes cloudbox-hero-status-spin {
    to { transform: rotate(360deg); }
}

/* ---------- Mobile ---------- */
@media (max-width: 575.98px) {
    .cloudbox-hero-modal__overlay {
        padding: 20px;
    }

    .cloudbox-hero-modal__dialog {
        width: 335px;
        max-width: 100%;
    }

    .cloudbox-hero-modal__header {
        height: 65px;
    }

    .cloudbox-hero-modal__header h2 {
        top: 18px;
        left: 72.5px;
        right: 72.5px;
        width: 190px;
        max-width: 190px;
        font-size: 20px;
        line-height: 26px;
        white-space: nowrap;
    }

    .cloudbox-hero-modal__close {
        top: 11px;
        right: 19px;
    }

    .cloudbox-hero-modal__body {
        height: calc(100% - 65px);
    }

    .cloudbox-hero-modal[data-cloudbox-hero-state="form"] .cloudbox-hero-modal__dialog {
        width: 335px;
        height: 339px;
    }

    .cloudbox-hero-modal[data-cloudbox-hero-state="form"][data-cloudbox-hero-validation="true"] .cloudbox-hero-modal__dialog {
        height: 359px;
    }

    .cloudbox-hero-modal[data-cloudbox-hero-state="form"] .cloudbox-hero-modal__header {
        height: 113px;
    }

    .cloudbox-hero-modal[data-cloudbox-hero-state="form"] .cloudbox-hero-modal__header h2 {
        top: 18px;
        left: 72.5px;
        right: 72.5px;
        width: 190px;
        max-width: 190px;
    }

    .cloudbox-hero-modal[data-cloudbox-hero-state="form"] .cloudbox-hero-modal__intro {
        top: 52px;
        left: 20px;
        right: 20px;
        font: 400 11px/16px 'Montserrat', sans-serif;
    }

    .cloudbox-hero-modal[data-cloudbox-hero-state="form"] .cloudbox-hero-modal__close {
        top: 19px;
        right: 19px;
    }

    .cloudbox-hero-modal[data-cloudbox-hero-state="form"] .cloudbox-hero-modal__body {
        height: calc(100% - 113px);
    }

    .cloudbox-hero-modal[data-cloudbox-hero-state="form"] .cloudbox-hero-modal__form-stage {
        width: 295px;
        height: 193px;
        margin: 15px 21px 18px 19px;
    }

    .cloudbox-hero-modal[data-cloudbox-hero-state="form"][data-cloudbox-hero-validation="true"] .cloudbox-hero-modal__form-stage {
        height: 213px;
    }

    .cloudbox-hero-modal .b24-form-content form {
        grid-template-rows: 52px 10px 24px 5px 36px 10px 56px !important;
        height: 193px !important;
        min-height: 193px !important;
    }

    .cloudbox-hero-modal[data-cloudbox-hero-validation="true"] .b24-form-content form {
        height: 213px !important;
        min-height: 213px !important;
    }

    .cloudbox-hero-modal[data-cloudbox-hero-validation-target="phone"] .b24-form-content form {
        grid-template-rows: 72px 10px 24px 5px 36px 10px 56px !important;
    }

    .cloudbox-hero-modal[data-cloudbox-hero-validation-target="terms"] .b24-form-content form {
        grid-template-rows: 52px 10px 44px 5px 36px 10px 56px !important;
    }

    .cloudbox-hero-modal[data-cloudbox-hero-validation-target="pd"] .b24-form-content form {
        grid-template-rows: 52px 10px 24px 5px 56px 10px 56px !important;
    }

    .cloudbox-hero-modal .cloudbox-hero-modal__agreement--terms input[type="checkbox"],
    .cloudbox-hero-modal .cloudbox-hero-modal__agreement--pd input[type="checkbox"] {
        top: 2px !important;
    }

    .cloudbox-hero-modal .b24-form-control-agreement .b24-form-control-desc {
        width: 265px !important;
        max-width: 265px !important;
        font-size: 8px !important;
        line-height: 12px !important;
    }

    .cloudbox-hero-modal .b24-form-control-alert-message {
        left: 25px !important;
    }

    .cloudbox-hero-modal .cloudbox-hero-modal__agreement--terms .b24-form-control-alert-message {
        top: 24px !important;
    }

    .cloudbox-hero-modal .cloudbox-hero-modal__agreement--pd .b24-form-control-alert-message {
        top: 36px !important;
    }

    .cloudbox-hero-modal[data-cloudbox-hero-state="loading"] .cloudbox-hero-modal__dialog,
    .cloudbox-hero-modal[data-cloudbox-hero-state="success"] .cloudbox-hero-modal__dialog,
    .cloudbox-hero-modal[data-cloudbox-hero-state="error"] .cloudbox-hero-modal__dialog {
        height: 339px;
    }

    .cloudbox-hero-modal[data-cloudbox-hero-state="loading"] .cloudbox-hero-modal__body,
    .cloudbox-hero-modal[data-cloudbox-hero-state="success"] .cloudbox-hero-modal__body,
    .cloudbox-hero-modal[data-cloudbox-hero-state="error"] .cloudbox-hero-modal__body {
        height: 274px;
    }

    .cloudbox-hero-modal__status {
        left: 20px;
        right: 20px;
    }

    .cloudbox-hero-modal[data-cloudbox-hero-state="loading"] .cloudbox-hero-modal__status,
    .cloudbox-hero-modal[data-cloudbox-hero-state="success"] .cloudbox-hero-modal__status {
        top: 40px;
        gap: 20px;
    }

    .cloudbox-hero-modal[data-cloudbox-hero-state="loading"] .cloudbox-hero-modal__status-copy,
    .cloudbox-hero-modal[data-cloudbox-hero-state="success"] .cloudbox-hero-modal__status-copy {
        width: 295px;
    }

    .cloudbox-hero-modal[data-cloudbox-hero-state="loading"] .cloudbox-hero-modal__status-copy strong,
    .cloudbox-hero-modal[data-cloudbox-hero-state="loading"] .cloudbox-hero-modal__status-copy span,
    .cloudbox-hero-modal[data-cloudbox-hero-state="success"] .cloudbox-hero-modal__status-copy strong,
    .cloudbox-hero-modal[data-cloudbox-hero-state="success"] .cloudbox-hero-modal__status-copy span {
        width: 295px;
    }

    .cloudbox-hero-modal[data-cloudbox-hero-state="error"] .cloudbox-hero-modal__status {
        top: 5px;
        gap: 0;
    }

    .cloudbox-hero-modal[data-cloudbox-hero-state="error"] .cloudbox-hero-modal__status-icon-shell {
        width: 80px;
        height: 80px;
        flex-basis: 80px;
    }

    .cloudbox-hero-modal__status-icon--error {
        top: -12px;
        left: -12px;
    }

    .cloudbox-hero-modal[data-cloudbox-hero-state="error"] .cloudbox-hero-modal__status-copy {
        width: 295px;
        margin-top: 8px;
    }

    .cloudbox-hero-modal[data-cloudbox-hero-state="error"] .cloudbox-hero-modal__status-copy strong,
    .cloudbox-hero-modal[data-cloudbox-hero-state="error"] .cloudbox-hero-modal__status-copy span {
        width: 295px;
    }

    .cloudbox-hero-modal[data-cloudbox-hero-state="error"] .cloudbox-hero-modal__retry {
        width: 295px;
        margin-top: 5px;
    }
}

@media (max-width: 359.98px) {
    .cloudbox-hero-modal__header h2,
    .cloudbox-hero-modal[data-cloudbox-hero-state="form"] .cloudbox-hero-modal__header h2 {
        font-size: 18px;
        line-height: 24px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cloudbox-hero-modal *,
    .cloudbox-hero-modal *::before,
    .cloudbox-hero-modal *::after {
        transition: none !important;
        animation: none !important;
    }
}

/* Premium pointer feedback: visual only, no JS required. */

/* 1.8.3 Preserve-by-Default — restore RC2 HERO interaction without changing Figma geometry. */
.cloudbox-hero__button--primary,
.cloudbox-hero__button--primary:link,
.cloudbox-hero__button--primary:visited,
.cloudbox-hero__button--primary:hover,
.cloudbox-hero__button--primary:focus,
.cloudbox-hero__button--primary:focus-visible,
.cloudbox-hero__button--primary:active {
    text-decoration: none !important;
}
.cloudbox-hero__button {
    transition: transform 200ms ease, box-shadow 200ms ease, background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}
.cloudbox-hero__button--primary > span:last-child {
    transition: transform 200ms ease;
}
@media (hover: hover) and (pointer: fine) {
    .cloudbox-hero__button:not(:disabled):hover {
        transform: translateY(-2px);
    }
    .cloudbox-hero__button--primary:hover {
        background: #ffd43d;
        border-color: #ffd43d;
        box-shadow: 0 10px 24px rgba(255, 195, 0, 0.24);
    }
    .cloudbox-hero__button--primary:hover > span:last-child {
        transform: translateX(3px);
    }
    .cloudbox-hero__button--secondary:not(:disabled):hover {
        background: rgba(255, 195, 0, 0.10);
        border-color: #ffd43d;
        color: #ffffff;
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18), inset 0 0 0 1px rgba(255, 212, 61, 0.08);
    }
    .cloudbox-hero__button:not(:disabled):active {
        transform: translateY(0);
        box-shadow: none;
    }
}
@media (prefers-reduced-motion: reduce) {
    .cloudbox-hero__button,
    .cloudbox-hero__button--primary > span:last-child {
        transition: none !important;
        transform: none !important;
    }
}


/* FINAL / HANDOFF / 2026-08-28 — UNIVERSAL STATUS FREEZE
 * Frozen Figma SECTION / 01. Status states keep the same complete header as FORM.
 * This late block intentionally overrides the legacy 66px status header geometry only.
 */
.cloudbox-hero-modal[data-cloudbox-hero-state="loading"] .cloudbox-hero-modal__dialog,
.cloudbox-hero-modal[data-cloudbox-hero-state="success"] .cloudbox-hero-modal__dialog {
    width: 620px;
    height: 363px;
}

.cloudbox-hero-modal[data-cloudbox-hero-state="error"] .cloudbox-hero-modal__dialog {
    width: 620px;
    height: 386px;
}

.cloudbox-hero-modal[data-cloudbox-hero-state="loading"] .cloudbox-hero-modal__header,
.cloudbox-hero-modal[data-cloudbox-hero-state="success"] .cloudbox-hero-modal__header,
.cloudbox-hero-modal[data-cloudbox-hero-state="error"] .cloudbox-hero-modal__header {
    height: 109px;
}

.cloudbox-hero-modal[data-cloudbox-hero-state="loading"] .cloudbox-hero-modal__header h2,
.cloudbox-hero-modal[data-cloudbox-hero-state="success"] .cloudbox-hero-modal__header h2,
.cloudbox-hero-modal[data-cloudbox-hero-state="error"] .cloudbox-hero-modal__header h2 {
    top: 18px;
    left: 70px;
    right: 70px;
    width: auto;
    max-width: none;
}

.cloudbox-hero-modal[data-cloudbox-hero-state="loading"] .cloudbox-hero-modal__intro,
.cloudbox-hero-modal[data-cloudbox-hero-state="success"] .cloudbox-hero-modal__intro,
.cloudbox-hero-modal[data-cloudbox-hero-state="error"] .cloudbox-hero-modal__intro {
    position: absolute;
    top: 55px;
    left: 40px;
    right: 40px;
    margin: 0;
    color: #aeb9c5;
    font: 400 13px/19px 'Montserrat', sans-serif;
    text-align: center;
}

.cloudbox-hero-modal[data-cloudbox-hero-state="loading"] .cloudbox-hero-modal__close,
.cloudbox-hero-modal[data-cloudbox-hero-state="success"] .cloudbox-hero-modal__close,
.cloudbox-hero-modal[data-cloudbox-hero-state="error"] .cloudbox-hero-modal__close {
    top: 19px;
    right: 28px;
}

.cloudbox-hero-modal[data-cloudbox-hero-state="loading"] .cloudbox-hero-modal__body,
.cloudbox-hero-modal[data-cloudbox-hero-state="success"] .cloudbox-hero-modal__body {
    height: 254px;
}

.cloudbox-hero-modal[data-cloudbox-hero-state="error"] .cloudbox-hero-modal__body {
    height: 277px;
}

.cloudbox-hero-modal[data-cloudbox-hero-state="loading"] .cloudbox-hero-modal__status,
.cloudbox-hero-modal[data-cloudbox-hero-state="success"] .cloudbox-hero-modal__status {
    top: 18px;
    gap: 20px;
}

.cloudbox-hero-modal[data-cloudbox-hero-state="error"] .cloudbox-hero-modal__status {
    top: 9px;
}

@media (max-width: 575.98px) {
    .cloudbox-hero-modal[data-cloudbox-hero-state="loading"] .cloudbox-hero-modal__dialog,
    .cloudbox-hero-modal[data-cloudbox-hero-state="success"] .cloudbox-hero-modal__dialog {
        width: 335px;
        height: 359px;
    }

    .cloudbox-hero-modal[data-cloudbox-hero-state="error"] .cloudbox-hero-modal__dialog {
        width: 335px;
        height: 387px;
    }

    .cloudbox-hero-modal[data-cloudbox-hero-state="loading"] .cloudbox-hero-modal__header,
    .cloudbox-hero-modal[data-cloudbox-hero-state="success"] .cloudbox-hero-modal__header,
    .cloudbox-hero-modal[data-cloudbox-hero-state="error"] .cloudbox-hero-modal__header {
        height: 113px;
    }

    .cloudbox-hero-modal[data-cloudbox-hero-state="loading"] .cloudbox-hero-modal__header h2,
    .cloudbox-hero-modal[data-cloudbox-hero-state="success"] .cloudbox-hero-modal__header h2,
    .cloudbox-hero-modal[data-cloudbox-hero-state="error"] .cloudbox-hero-modal__header h2 {
        top: 18px;
        left: 72.5px;
        right: 72.5px;
        width: 190px;
        max-width: 190px;
    }

    .cloudbox-hero-modal[data-cloudbox-hero-state="loading"] .cloudbox-hero-modal__intro,
    .cloudbox-hero-modal[data-cloudbox-hero-state="success"] .cloudbox-hero-modal__intro,
    .cloudbox-hero-modal[data-cloudbox-hero-state="error"] .cloudbox-hero-modal__intro {
        top: 52px;
        left: 20px;
        right: 20px;
        font: 400 11px/16px 'Montserrat', sans-serif;
    }

    .cloudbox-hero-modal[data-cloudbox-hero-state="loading"] .cloudbox-hero-modal__close,
    .cloudbox-hero-modal[data-cloudbox-hero-state="success"] .cloudbox-hero-modal__close,
    .cloudbox-hero-modal[data-cloudbox-hero-state="error"] .cloudbox-hero-modal__close {
        top: 19px;
        right: 19px;
    }

    .cloudbox-hero-modal[data-cloudbox-hero-state="loading"] .cloudbox-hero-modal__body,
    .cloudbox-hero-modal[data-cloudbox-hero-state="success"] .cloudbox-hero-modal__body {
        height: 246px;
    }

    .cloudbox-hero-modal[data-cloudbox-hero-state="error"] .cloudbox-hero-modal__body {
        height: 274px;
    }

    .cloudbox-hero-modal[data-cloudbox-hero-state="loading"] .cloudbox-hero-modal__status,
    .cloudbox-hero-modal[data-cloudbox-hero-state="success"] .cloudbox-hero-modal__status {
        top: 12px;
        gap: 20px;
    }

    .cloudbox-hero-modal[data-cloudbox-hero-state="error"] .cloudbox-hero-modal__status {
        top: 5px;
    }
}