/* ==========================================================================
   Register / auth layout - fully fluid type + spacing scale
   Loaded only by: register, google_register, registerInvited,
   registerInvitedOrg, verify-email-register
   Reference design: 1440px viewport, 530px form column, 720px banner column
   ========================================================================== */

.register-wrap {
    /* -- Form column measure ------------------------------------------- */
    --reg-form-max: 530px;
    --reg-gutter: clamp(16px, 2.4vw, 34px);
    --reg-form-measure: min(calc(100vw - (2 * var(--reg-gutter))), var(--reg-form-max));

    /* -- Form type scale ----------------------------------------------- *
     * .reg-input / .reg-label never drop below 16px: iOS Safari zooms the
     * viewport on focus for any input rendered under 16px.
     * ------------------------------------------------------------------ */
    --reg-title: clamp(24px, 1.25vw + 14px, 38px);
    --reg-title-sm: clamp(16px, 0.6vw + 14px, 23px);
    --reg-logo: clamp(132px, 19vw, 222px);
    --reg-logo-glss: clamp(150px, 58vw, 370px);
    --reg-back: clamp(14px, 0.3vw + 14.5px, 17px);
    --reg-body: clamp(13px, 0.25vw + 13.4px, 15px);
    --reg-input: clamp(16px, 0.3vw + 15px, 17px);
    --reg-label: clamp(16px, 0.5vw + 15px, 18px);
    --reg-btn: clamp(16px, 0.35vw + 15px, 18px);
    --reg-msg: clamp(12px, 0.2vw + 11.6px, 13.5px);
    --reg-alert: clamp(13px, 0.2vw + 13.6px, 15px);

    /* -- Form field box (tracks the label / control pair) --------------- */
    --reg-field-h: clamp(50px, 0.9vw + 46px, 60px);
    --reg-field-pt: clamp(19px, 0.25vw + 21.4px, 27px);
    --reg-field-pt-floated: clamp(12px, 0.25vw + 11.6px, 18px);
    --reg-field-pb: clamp(6px, 0.1vw + 7.4px, 10px);

    /* -- Banner type scale (column is 50vw, so it scales with viewport) -- */
    --ban-h1: clamp(22px, 2.08vw, 42px);
    --ban-lead: clamp(13px, 0.85vw + 3.7px, 21px);
    --ban-h2: clamp(13px, 0.8vw + 4.5px, 21px);
    --ban-copy: clamp(12.5px, 0.78vw + 4.8px, 21px);
    --ban-trust: clamp(11px, 0.6vw + 7.4px, 26px);

    /* Logo strip: 7 identical 45x24 SVGs. Scaled off intrinsic size so the
       strip keeps pace with the growing 50vw column instead of stranding
       45px artwork in a 1152px track. */
    --ban-logo: clamp(45px, 5.36vw - 32.2px, 132px);

    /* -- Banner spacing scale ------------------------------------------- */
    --ban-pad-y: clamp(16px, 2.2vw, 48px);
    --ban-pad-x: clamp(20px, 2.8vw, 64px);
    --ban-top: clamp(20px, 4.8vw, 96px);
    --ban-gap: clamp(14px, 1.5vw, 26px);
    --ban-row-gap: clamp(14px, 1.6vw, 28px);
    --ban-indent: clamp(6px, 0.55vw, 10px);
    --ban-icon: clamp(16px, 1.67vw, 28px);
}

/* ==========================================================================
   Page scaffolding - one document scroller, no nested 100vh traps
   ========================================================================== */

html,
body {
    overflow-x: hidden;
}

.signup-wrapper {
    height: auto;
    min-height: 100vh;
    min-height: 100svh;
    overflow: visible;
}

.register-wrap {
    width: 100%;
}

.register-wrap .banner-wrap {
    height: auto;
    min-height: 100vh;
    min-height: 100svh;
    overflow: visible;
}

.register-wrap .signup-wrap {
    height: auto;
    overflow: visible;
}

/* The form column owns the viewport height so that anything stacked above
   the form - subscription banner, error alert, or the Google-flow back
   button - subtracts from that height instead of pushing the column past
   the fold. Previously .card-signup reserved a full 100svh on its own and
   any sibling above it produced dead space at the bottom. */
.register-wrap .row > .col-xl-6:not(.banner-wrap) {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100svh;
}

/* Banners and error alerts keep their natural height. */
.register-wrap .row > .col-xl-6:not(.banner-wrap) > * {
    flex: 0 0 auto;
}

/* The form wrapper absorbs what is left. The :not() is required because
   register.blade.php marks its subscription banner "position-relative
   register-subscription-wrap", and that one must NOT stretch. */
.register-wrap .row > .col-xl-6:not(.banner-wrap) .signup-wrap,
.register-wrap .row > .col-xl-6:not(.banner-wrap) > .position-relative:not(.register-subscription-wrap) {
    flex: 1 0 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* justify-content is neutralised here because the form below carries auto
   margins, which resolve first and absorb all the free space. That keeps the
   Back button pinned to the top while the form centres in what remains. */
.register-wrap .card-signup {
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 0;
    flex: 1 0 auto;
    margin: auto;
    border: none !important;
    padding: clamp(12px, 1.4vw, 22px) var(--reg-gutter);
    padding-bottom: clamp(20px, 2.2vw, 30px);
    overflow: visible;
    justify-content: flex-start;
}

.register-wrap .signup-back-btn {
    flex: 0 0 auto;
}

.register-wrap .card-signup > .registerForm,
.register-wrap .card-signup > form {
    margin-top: auto;
    margin-bottom: auto;
}

.register-wrap .registerForm {
    width: 100%;
    max-width: var(--reg-form-max);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* ==========================================================================
   Form column - typography
   ========================================================================== */

.register-wrap .logo-img-signup {
    width: var(--reg-logo);
    max-width: 100%;
    height: auto;
}

.register-wrap .signup-logo-glss {
    width: var(--reg-logo-glss);
    max-width: 100%;
    height: auto;
}

.register-wrap .signup-title {
    font-weight: 300;
    font-size: var(--reg-title);
    line-height: 1.2;
    text-align: center;
    text-wrap: balance;
    color: #262627;
}

.register-wrap .signup-title-glss {
    font-size: var(--reg-title-sm) !important;
    line-height: 1.3;
    text-wrap: balance;
}

.register-wrap .signup-back-btn {
    font-weight: 600;
    font-size: var(--reg-back);
    line-height: 1.3;
    letter-spacing: 0.02em;
    color: #262627;
    align-self: flex-start;
    margin-top: clamp(8px, 1vw, 14px);
    padding: clamp(6px, 0.8vw, 10px) 0;
    min-height: 44px;
}

.register-wrap .signup-back-btn svg {
    width: clamp(14px, 1.4vw, 20px);
    height: auto;
    flex: none;
}

.register-wrap .register-terms {
    font-weight: 400;
    font-size: var(--reg-body);
    line-height: 1.65;
    color: #262627;
    max-width: var(--reg-form-max);
}

.register-wrap .register-terms a {
    overflow-wrap: anywhere;
}

.register-wrap .is-invalid-message,
.register-wrap .has-error {
    font-size: var(--reg-msg);
    line-height: 1.5;
}

/* ==========================================================================
   Form column - fields
   ========================================================================== */

.register-wrap .form-control {
    font-size: var(--reg-input);
}

.register-wrap .form-floating label {
    height: var(--reg-field-h);
    padding-top: var(--reg-field-pt);
    font-size: var(--reg-label);
    line-height: 1.2;
    font-weight: 500;
    color: #c4c4c4;
    overflow: hidden;
}

.register-wrap .form-floating .form-control {
    height: var(--reg-field-h);
    min-height: var(--reg-field-h);
    padding: var(--reg-field-pt) 0 var(--reg-field-pb) !important;
    line-height: 1.2;
}

.register-wrap .form-floating .form-control:focus~label,
.register-wrap .form-floating .form-control:not(:placeholder-shown)~label,
.register-wrap .form-floating .form-control:not(:-moz-placeholder-shown)~label,
.register-wrap .form-floating .form-control:not(:-ms-input-placeholder)~label,
.register-wrap .form-floating .label-float {
    height: var(--reg-field-h);
    padding-top: var(--reg-field-pt-floated);
    font-size: var(--reg-label);
}

/* Validation icons and the password toggle are centred on the control box
   instead of a hard 28px offset, so they track the responsive field height.
   The form-group also holds the help block, so 50% would be wrong here. */
.register-wrap .toggle-password,
.register-wrap .email-img {
    top: calc(var(--reg-field-h) / 2);
    right: 0;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0;
    margin: 0;
}

/* Real tap target: 44px wide, with the glyph centred inside it. */
.register-wrap .toggle-password {
    min-width: 44px;
}

/* ==========================================================================
   Form column - submit button & alerts
   ========================================================================== */

.register-wrap .proceed-btn {
    min-width: 0;
    min-height: clamp(46px, 2.6vw, 56px);
    padding: clamp(12px, 1.2vw, 16px) clamp(18px, 2vw, 30px);
    font-size: var(--reg-btn);
    font-weight: 600;
    letter-spacing: 0.04em;
    align-items: center;
}

.register-wrap .proceed-btn .icon-container,
.register-wrap .proceed-btn .icon-container .icon {
    width: clamp(20px, 1.7vw, 26px);
    height: clamp(20px, 1.7vw, 26px);
    margin-left: clamp(10px, 1.4vw, 18px);
}

.register-wrap .proceed-btn .icon-container .icon img,
.register-wrap .proceed-btn .icon-container .icon svg {
    max-width: 100%;
    max-height: 100%;
}

/* The arrow offset used to be a hard 155px tuned to a 530px-wide button.
   Track the live button measure so it holds at every width. */
.register-wrap .proceed-btn._arrow_signup:hover .icon-container .icon img,
.register-wrap .proceed-btn._arrow_signup:hover .icon-container .icon svg {
    margin-left: calc(var(--reg-form-measure) * 0.2925) !important;
}

.register-wrap .alert.alert-danger {
    width: 100%;
    margin-inline: 0;
    padding: clamp(12px, 1.2vw, 20px);
    font-size: var(--reg-alert);
    line-height: 1.55;
    border-radius: 4px;
}

/* The subscription banner was absolutely positioned with hand-tuned
   margin-bottom values matched to its wrapped height. Normal flow lets it
   self-measure at any width. */
.register-wrap .register-subscription-wrap {
    padding-bottom: clamp(16px, 2vw, 30px);
}

.register-wrap .register-subscription {
    position: static;
    width: 100%;
    padding: clamp(12px, 1.2vw, 20px);
    font-size: var(--reg-alert);
    line-height: 1.55;
    border-radius: 4px;
}

.register-wrap .register-subscription svg {
    flex: none;
}

/* ==========================================================================
   Banner column
   ========================================================================== */

.register-banner-container {
    position: relative;
    width: 100%;
    min-height: 100vh;
    min-height: 100svh;
}

.register-banner-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-height: 100svh;
    object-fit: cover;
    object-position: center;
}

.register-banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-height: 100svh;
    background: linear-gradient(180deg, rgba(197, 195, 230, 0.9) 0%, rgba(242, 240, 254, 0.9) 50%, rgba(220, 231, 249, 0.9) 100%);
    pointer-events: none;
}

.register-banner-content {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100svh;
    padding: var(--ban-pad-y) var(--ban-pad-x);
}

.register-banner-content .header {
    position: relative;
    margin-top: var(--ban-top);
}

/* Brush underline for the first heading line. Every value is a multiple of
   --ban-h1, so the stroke stays locked to the text it annotates: the inset
   is the advance width of "Achieve " and the span covers
   "real process improvement". Text metrics scale linearly with font-size,
   so tying the SVG to the same token is what keeps them in register.
   The min() guard stops the stroke overrunning the column. */
.register-banner-content .header img {
    position: absolute;
    top: var(--ban-h1);
    left: calc(4 * var(--ban-h1));
    width: min(calc(14 * var(--ban-h1)), calc(100% - (4 * var(--ban-h1))));
    height: auto;
}

.register-banner-content .header h1 {
    font-weight: 600;
    font-size: var(--ban-h1);
    line-height: 1.2;
    text-wrap: balance;
    color: #262627;
    margin: 0 0 clamp(12px, 1.2vw, 20px);
}

.register-banner-content .header p {
    font-family: Poppins, sans-serif;
    font-weight: 300;
    font-size: var(--ban-lead);
    line-height: 1.5;
    text-wrap: pretty;
    color: #262627;
    margin: 0 0 clamp(16px, 1.8vw, 36px);
}

.register-banner-content .body .card {
    width: 100%;
    background: #FFFFFFBF !important;
    box-shadow: 0px 8px 12px -4px #10101005;
    border-radius: 8px;
    gap: var(--ban-gap);
    padding: var(--ban-gap);
    border: none;
}

.register-banner-content .body .card .card-body {
    padding: 0;
}

/* Every row needs its own containing block - including the last one, which
   previously fell through to .register-banner-container and pinned its icon
   to the banner corner. */
.register-banner-content .body .card .card-body .card-content {
    position: relative;
}

.register-banner-content .body .card .card-body .card-content:not(:last-child) {
    margin-bottom: var(--ban-row-gap);
}

/* Square 24x24 source. Size it explicitly and centre it on the first line
   box of the heading rather than guessing an em offset. */
.register-banner-content .body .card .card-body .card-content img {
    position: absolute;
    left: 0;
    top: 0;
    width: var(--ban-icon);
    height: var(--ban-icon);
    margin-top: calc((1.35 * var(--ban-h2) - var(--ban-icon)) / 2);
}

/* Indent is derived from the icon box so the gap never drifts as the icon
   scales: 24px icon + 8px gap = 32px at the 1440px reference. */
.register-banner-content .body .card .card-body .card-content .card-content-text {
    padding-left: calc(var(--ban-icon) + var(--ban-indent));
}

.register-banner-content .body .card .card-body .card-content h1 {
    font-weight: 700;
    font-size: var(--ban-h2);
    line-height: 1.35;
    color: #262627;
}

.register-banner-content .body .card .card-body .card-content p {
    font-weight: 400;
    font-size: var(--ban-copy);
    line-height: 1.5;
    text-wrap: pretty;
    color: #262627;
    margin-bottom: 0;
}

/* Footer joins normal flow with margin-top:auto instead of being pinned to
   absolute 32px/40px offsets, so it can never overlap the card. */
.register-banner-content .footer {
    position: static;
    margin-top: auto;
    padding-top: clamp(20px, 2.4vw, 44px);
}

.register-banner-content .footer .logo-header {
    font-weight: 500;
    font-size: var(--ban-trust);
    line-height: 1.5;
    letter-spacing: clamp(0.04em, 0.12vw, 0.1em);
    text-transform: uppercase;
    color: #262627;
    margin-bottom: clamp(8px, 1vw, 18px);
    text-align: center;
}

.register-banner-content .footer .logo-header span {
    font-weight: 500;
    color: #5A5579;
}

.register-banner-content .footer .logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
    gap: clamp(8px, 1.2vw, 48px);
}

.register-banner-content .footer .logos img {
    filter: grayscale(100%);
    flex: 0 1 auto;
    min-width: 0;
    width: var(--ban-logo);
    max-width: 100%;
    height: auto;
}

/* ==========================================================================
   Viewport conditions
   ========================================================================== */

/* Short desktop windows: the banner sheds vertical rhythm before the
   document starts to scroll. */
@media (min-width: 1200px) and (max-height: 820px) {
    .register-banner-content {
        --ban-top: clamp(12px, 3.2vh, 40px);
        --ban-gap: clamp(10px, 1.6vh, 20px);
        --ban-row-gap: clamp(10px, 1.8vh, 20px);
    }

    .register-banner-content .footer {
        padding-top: clamp(12px, 2.4vh, 28px);
    }
}

/* Landscape phones: nothing should be pinned to a viewport height here. */
@media (orientation: landscape) and (max-height: 560px) {

    .signup-wrapper,
    .register-wrap .row > .col-xl-6:not(.banner-wrap),
    .register-wrap .card-signup {
        min-height: 0;
    }
}

/* Large displays: the form is capped by the column, not the viewport, so
   let the cap breathe instead of stranding 530px of type in a 960px column. */
@media (min-width: 1600px) {
    .register-wrap {
        --reg-form-max: 560px;
    }
}