/* RegTrack auth screens (Login / Forgot Password / Unlock Account).
   Ported from the license 2.0 Angular app
   (src/app/authentication/login/login.component.{html,scss}).

   Every class is prefixed "rt-" on purpose: the reference stylesheet uses
   .container / .input-group / .login-form, all of which Bootstrap and the CDN
   style.css these pages load already define. Bootstrap and jQuery stay loaded
   because the data-toggle="tooltip" initialiser depends on them -- they just
   no longer style the auth screens. (The Login help panel at the end of this
   file replaced the Bootstrap #docViewer modal and needs neither.) */

/* ---------- 0.8 SCALE PASS ----------
   Every fixed px length below is the Figma value x 0.8. The design was drawn
   on Figma's 1440x1024 canvas and read correctly only when the browser was
   held at 80% zoom; at 100% zoom on a 1920x1080 / 150%-scaled display (a
   1280x593 CSS viewport, the common laptop here) the same values rendered a
   quarter too large -- oversized card, oversized type, the left panel's
   content bleeding past its column. Scaling the token values by 0.8 makes
   100% zoom render exactly what 80% zoom used to.

   So the comments below still cite the ORIGINAL Figma numbers ("a 6px sliver",
   "54px-top/30px-side card padding", the gaps measured off localhost:4200) --
   they are the provenance of the value, not the value itself. Divide the value
   in the rule by 0.8 to get back to the cited number. To revert this pass
   wholesale, multiply every px in this file by 1.25.

   Three kinds of value are deliberately NOT scaled:
   - vh / vw terms (including the middle term of every clamp()). Viewport units
     are zoom-invariant in device pixels -- 3vh renders the same physical size
     at 80% and 100% zoom -- so scaling them would overshoot. Only the px floor
     and ceiling of each clamp() moved.
   - Media-query thresholds (1200/992/768/480/360px) and the .rt-split flex
     ratios. Those measure the viewport, they are not sizes.
   - Hairline borders (1px / 1.3px / 1.4px). 0.8px renders inconsistently
     across devicePixelRatios and buys nothing.
   .rt-slider-logo is also left alone: its size is driven by max-height:32vh,
   which already renders identically at both zoom levels (measured). */
html, body {
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Poppins', system-ui, sans-serif;
    background: #fff;
}

.rt-shell {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
}

.rt-split {
    display: flex;
    width: 100%;
    /* Fluid at every width -- the fixed 1440x1024 "stage" that used to live
       here (transform:scale via fitStage() in Login.aspx) was removed: above
       1024px it rendered the whole login screen at whatever scale kept it
       under one viewport tall, which left growing empty margins on wide-but-
       short windows (e.g. ~337px per side at 1920x885) with the right-hand
       margin invisible against the white panel behind it. Below 1024px this
       was already the active rule -- normal flexible-width, scrollable block
       (see the max-width:992px stacking rules further down). */
    min-height: 100vh;
    min-height: 100dvh;
}

/* ---------- left (brand) panel ---------- */
.rt-slider {
    /* Figma's canvas is 1440px wide, split 648/792 between the two panels --
       that's a 45:55 ratio, not the 6:4 (60:40) used here previously, which
       made this panel visibly wider than Figma and left extra unused width
       around its content. flex accepts these as raw ratios directly. Now
       that .rt-split is fluid (not a fixed 1440px stage), this ratio applies
       directly to the real viewport width. Unscaled -- a ratio, not a size. */
    flex: 648;
    background: linear-gradient(to bottom, #12386B, #0A1E3D);
    display: flex;
    flex-direction: column;
    /* space-between + clamp() padding (not the fixed 48px this used to be):
       the fixed-px gaps below it (.rt-heading, .rt-slider-info, .rt-slider-footer)
       assumed exactly Figma's 1024px-tall canvas. On a real, shorter viewport
       (e.g. 885px) those fixed gaps plus content overflowed and were only
       hidden by the stage's own overflow:hidden -- which no longer exists. */
    justify-content: space-between;
    padding: clamp(12.8px, 3vh, 38.4px) clamp(19.2px, 3vw, 38.4px);
    box-sizing: border-box;
}

/* Figma left-aligns the brand mark / trusted-by row / headline (all sit at the
   panel's x=48 inset) and only the illustration is centred -- so the column
   itself starts at flex-start, and the illustration opts back into centring
   with align-self below. Flows top-to-bottom at Figma's exact gaps (below)
   rather than centring as a block -- centring floated the logo's distance
   from the panel's top edge instead of fixing it at Figma's 48px. */
.rt-slider-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    /* 552 x 0.8. This cap is what restores the brand mark's left inset: at a
       1280px viewport the panel's content box is ~522px, so an unscaled 552px
       never bound and the logo sat hard against the 3vw padding instead of
       centred like the 80%-zoom rendering. */
    max-width: 441.6px;
    margin: 0 auto;
}

.rt-slider-brand {
    display: block;
    width: clamp(70.4px, 9vh, 97.6px);
    height: auto;
    margin-bottom: 12.8px;
}

.rt-slider-trusted {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-bottom: clamp(9.6px, 3vh, 37.6px);
}

.rt-slider-trusted-stars {
    display: flex;
    align-items: center;
    gap: 2px;
}

    .rt-slider-trusted-stars img {
        width: 6.8px;
        height: 6.5px;
    }

.rt-slider-trusted-text {
    margin: 0 0 0 9.2px;
    color: #758599;
    font-size: 8.8px;
    font-weight: 500;
}

    .rt-slider-trusted-text strong {
        color: #F2F7FD;
        font-weight: 600;
    }

/* Not scaled: max-height:32vh is what actually sizes this (the 400px cap only
   bounds the box, and the drawing letterboxes inside it), and a vh-driven size
   already renders the same physical size at 80% and 100% zoom. */
.rt-slider-logo {
    align-self: center;
    width: 100%;
    max-width: min(400px, 100%);
    max-height: 32vh;
    height: auto;
    object-fit: contain;
    display: block;
}

/* Required by the motion pass at the bottom of this file. The "Compliance score"
   card's top edge lies exactly ON the viewBox top (page y=306 maps to viewBox
   y=0), and its float lifts it ~8.5 user units above that twice per 6s loop --
   clipped, that reads as the card squashing (top edge pinned, bottom rising)
   rather than floating. Letting it bleed is cheaper than padding the viewBox,
   which would shrink the whole illustration ~3%. The bleed is upward only and
   works out to ~0.97vh, comfortably inside .rt-heading's bottom margin above it
   (min 8px, ~2vh) at every viewport height, and nothing else in the scene
   animates past an edge.

   Type selector + class, not the bare class: the CDN bootstrap.min.css these
   pages load carries normalize's `svg:not(:root) { overflow: hidden }`, and its
   (0,1,1) specificity outranks a lone class no matter how much later this file
   is linked. Raising specificity by one element beats reaching for !important. */
svg.rt-slider-logo {
    overflow: visible;
}

.rt-heading {
    color: #F2F6FB;
    text-align: left;
    /* Fixed, not vh-clamped: this needs to stay small enough to fit the full
       sentence on one line within max-width below, which is a horizontal-width
       constraint -- scaling it by viewport HEIGHT (the old clamp) could grow it
       back past that width on a taller viewport and reintroduce the wrap. Sized
       to fit "If you think compliance is expensive, try non-compliance." on one
       line within ~440px -- an estimate (no way to measure rendered text width
       here), so verify visually and report back if it still wraps or has too
       much/little room. */
    font-size: 12.8px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.16px;
    white-space: nowrap;
    /* Matches .rt-slider-info's max-width exactly so the two line up. */
    max-width: 441.6px;
    margin: 0 0 clamp(8px, 2vh, 54.4px);
}

.rt-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6.4px;
    margin-top: 8px;
}

.rt-dot {
    width: 6.4px;
    height: 6.4px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
}

    .rt-dot.rt-dot-active {
        background: #fff;
        width: 8px;
        height: 8px;
    }

/* "DID YOU KNOW" info card -- sits below the slider content, above the footer.
   Reference: Figma canvas "Log in" (node 20516:1671) -- the card (Rectangle
   x=48,y=656,w=552,h=140), icon circle, and second meta line are identical
   across every frame on this canvas (all 15+ login-flow steps reuse the same
   left-panel master), so these are base rules rather than per-page overrides. */
.rt-slider-info {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
    max-width: 441.6px;
    /* clamp, not a fixed 68px: that exact Figma gap only fit at exactly
       1024px of viewport height (the canvas this used to be locked to). */
    margin: clamp(8px, 2vh, 54.4px) auto 0;
    padding: 14.4px 16px;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 11.2px;
    background: #E9F0FB;
    box-shadow: 0 11.2px 27.2px -8px rgba(0, 0, 0, 0.28);
}

.rt-slider-info-icon-circle {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #1D6BD8;
}

.rt-slider-info-icon {
    width: 16px;
    height: 16px;
}

.rt-slider-info-label {
    margin: 0 0 3.2px;
    color: #1D6BD8;
    font-size: 8.8px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.rt-slider-info-text {
    margin-bottom: 8px;
    color: #14213D;
    font-size: 10.4px;
    font-weight: 500;
    line-height: 15.2px;
}

.rt-slider-info-meta {
    display: flex;
    align-items: center;
    gap: 6.4px;
    color: #5B6B85;
    font-size: 8.8px;
    font-weight: 400;
}

    .rt-slider-info-meta img {
        width: 9.6px;
        height: auto;
    }

/* "Need help? Let us know / support@..." footer, pinned to the bottom of the panel */
.rt-slider-footer {
    width: 100%;
    max-width: 441.6px;
    /* clamp, not a fixed 130px -- same reasoning as .rt-slider-info above. */
    margin: clamp(8px, 3vh, 104px) auto 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: 10.4px;
    font-weight: 500;
    text-align: center;
}

.rt-slider-footer-email {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4.8px;
    margin-top: 3.2px;
}

    .rt-slider-footer-email img {
        width: 11.2px;
        height: auto;
        opacity: .7;
    }

    /* The envelope is an inline <svg width="14" height="14"> in the markup of
       all eight auth pages, so the img rule above never reached it. A CSS
       width/height beats the presentation attributes -- scaling it here keeps
       the pages themselves untouched. */
    .rt-slider-footer-email svg {
        width: 11.2px;
        height: 11.2px;
    }

/* ---------- right (form) panel ---------- */
.rt-login-col {
    flex: 792;
    /* Figma's right panel is #FBFCFE (near-white) with a large soft radial
       "glow-blue" wash (#7FBCFA, node 20559:5799) centred behind the card --
       that glow, not the base fill, is what reads as "bluish" against the
       plain white we had. background-position uses a fixed px Y (not %) so
       the glow stays anchored near the card even if this column stretches
       much taller than one viewport to match the left panel's content. */
    background-color: #FBFCFE;
    background-image: radial-gradient(circle 480px at 50% 409.6px, rgba(127, 188, 250, 0.5) 0%, rgba(127, 188, 250, 0) 100%);
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    /* margin:auto on .rt-login-form below absorbs the free space on the
       cross axis regardless of align-items, so this only governs behaviour
       once the card is as tall as (or taller than) the column -- centring
       here keeps the card visually balanced against the left panel instead
       of pinned to the top. */
    align-items: center;
    padding: clamp(12.8px, 3vh, 38.4px) 19.2px;
    box-sizing: border-box;
}

/* The vertical rhythm below is expressed as clamp(min, vh, original) so the
   form shrinks to fit short viewports instead of overflowing them. A 1920x1080
   screen at Windows 150% scaling is only 720 CSS px tall (~537 px of viewport),
   which the original fixed spacing overflowed by ~192px. Because the form is
   centred in the column, trimming this spacing is visually neutral on tall
   screens -- the gap it gives up is immediately returned by the centring. */
.rt-login-form {
    position: relative;
    width: 100%;
    max-width: 368px;
    /* Reference: every "Log in" canvas frame (04-09, node 20516:1671) uses this
       same 54px-top/30px-side card padding, not just the password step -- the
       accent bar (::before) occupies the first 6px of that top inset. */
    padding: 43.2px 24px 43.2px;
    /* auto (not a fixed top/bottom value): centres the card vertically in
       .rt-login-col when there's room, and -- because .rt-login-col keeps
       align-items:flex-start -- falls back to top-anchored + scrollable
       instead of clipping the top off-screen when the card is taller than
       the viewport. */
    margin: auto;
    text-align: center;
    box-sizing: border-box;
    border: 1px solid #E8EDF5;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 14.4px 35.2px 0 rgba(15, 51, 83, 0.08);
    /* Clips the ::before accent bar to this card's own 16px corner curve --
       simpler and exactly concentric versus giving the bar its own inset-
       compensated radius. Trade-off: anything else in the form that ever
       needs to render outside the card's box (e.g. a Bootstrap tooltip not
       configured with container:'body') gets clipped too -- watch
       lbtUnlockAccount's data-toggle="tooltip" on Login.aspx after this
       change. */
    overflow: hidden;
}

    .rt-login-form::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4.8px;
        background: linear-gradient(90deg, #125AAB, #4D9AE8);
    }

/* Reference: every "Log in" canvas frame (04-09, node 20516:1671) sits the title
   exactly 54px below the card top -- entirely from .rt-login-form's own padding,
   no additional top margin on the title itself (an extra clamp()ed top margin
   here used to stack on top of that padding, pushing titles further down than
   Figma on every page except Login.aspx, which already had a
   scoped override zeroing it out). */
.rt-title {
    font-size: 19.2px;
    font-weight: 600;
    line-height: 1.1;
    color: #1D6BD8;
    text-align: center;
    margin: 0 0 clamp(11.2px, 3.4vh, 28.8px);
}

/* ---------- fields ---------- */
.rt-field {
    position: relative;
    margin-bottom: clamp(9.6px, 4vh, 28.8px);
    /* consumed by .rt-toggle below; kept in sync with .rt-input's height */
    --rt-input-h: 38.4px;
}

.rt-input {
    box-sizing: border-box;
    width: 100%;
    height: 38.4px;
    padding: 8px 12px 4.8px;
    border: 1.4px solid #C9D8EC;
    border-radius: 8px;
    background-color: #fff;
    color: #1A2438;
    font-family: 'Poppins', sans-serif;
    font-size: 10.8px;
    outline: none;
}

    .rt-input:focus {
        border-color: #125AAB;
    }

    .rt-input::-webkit-input-placeholder {
        color: #9AA6B5;
        opacity: 1;
    }

    .rt-input::-moz-placeholder {
        color: #9AA6B5;
        opacity: 1;
    }

    .rt-input:-ms-input-placeholder {
        color: #9AA6B5;
        opacity: 1;
    }

.rt-field-password .rt-input {
    padding-right: 36.8px;
}

.rt-toggle {
    position: absolute;
    /* half the INPUT, not half the field: the field also holds the validation
       box, and top:50% made the eye drift down onto it whenever it appeared. */
    top: calc(var(--rt-input-h) / 2);
    right: 12px;
    width: 14.4px;
    height: auto;
    transform: translateY(-50%);
    cursor: pointer;
    opacity: .45;
}

    .rt-toggle.rt-toggle-on {
        opacity: 1;
    }

/* ---------- read-only identity chip (Login.aspx step 2: the email confirmed on
   the email step, shown read-only with a "Change" link back to that step) ---------- */
.rt-field-identity .rt-input {
    padding-right: 59.2px;
    color: #5B6B85;
    cursor: default;
}

.rt-change-email {
    position: absolute;
    top: calc(var(--rt-input-h) / 2);
    right: 12px;
    transform: translateY(-50%);
    font-size: 10.4px;
}

/* ---------- remember me ---------- */
.rt-remember {
    display: flex;
    align-items: center;
    gap: 6.4px;
    margin: clamp(9.6px, 2.2vh, 22.4px) 0 clamp(8px, 1.8vh, 19.2px);
    text-align: left;
}

    .rt-remember input[type="checkbox"] {
        width: 12.8px;
        height: 12.8px;
        margin: 0;
        accent-color: #125AAB;
        cursor: pointer;
    }

    .rt-remember label {
        margin: 0;
        color: #125AAB;
        font-size: 12.8px;
        font-weight: 500;
        cursor: pointer;
    }

/* ---------- buttons ---------- */
.rt-btn-primary {
    width: 100%;
    height: 38.4px;
    padding: 8px;
    border: none;
    border-radius: 8px;
    background-color: #125AAB;
    box-shadow: 0 4.8px 12.8px 0 rgba(18, 90, 171, .3);
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

    .rt-btn-primary:hover, .rt-btn-primary:focus {
        background-color: #0E4A8D;
        color: #fff;
    }

.rt-links {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 9.6px;
    margin-top: clamp(6.4px, 1.6vh, 14.4px);
}

.rt-link {
    color: #1D6BD8;
    font-size: 11.2px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
}

    .rt-link:hover, .rt-link:focus {
        color: #0E4A8D;
        text-decoration: underline;
    }

.rt-alt {
    /* stacked (Google above SSO), matching the Figma "with SSO option" card --
       the two buttons used to share a row, but Figma always stacks them full-width. */
    display: flex;
    flex-direction: column;
    gap: 9.6px;
    margin-top: clamp(9.6px, 2.2vh, 22.4px);
}

/* lock icon in front of the "Login with SSO" label, matching Figma. asp:Button renders
   as <input type="submit">, which cannot take ::before/::after, so this has to be a
   background-image instead of an inline icon. */
.rt-btn-sso {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23125AAB' d='M8 1a3 3 0 0 0-3 3v2H4a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1h-1V4a3 3 0 0 0-3-3Zm0 1.5A1.5 1.5 0 0 1 9.5 4v2h-3V4A1.5 1.5 0 0 1 8 2.5ZM8 9.5A1.5 1.5 0 0 1 9.5 11a1.48 1.48 0 0 1-.75 1.3V13.5a.75.75 0 0 1-1.5 0v-1.2A1.48 1.48 0 0 1 6.5 11 1.5 1.5 0 0 1 8 9.5Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 12.8px center;
    background-size: 12px 12px;
    padding-left: 32px;
}

.rt-alt-full {
    margin-top: 9.6px;
}

.rt-btn-secondary {
    flex: 1;
    width: 100%;
    height: 38.4px;
    border: 1.3px solid #E1E6EE;
    border-radius: 8px;
    background-color: #fff;
    color: #1A2438;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
}

    .rt-btn-secondary:hover, .rt-btn-secondary:focus {
        border-color: #125AAB;
        color: #125AAB;
        text-decoration: none;
    }

.rt-btn-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6.4px;
}

    .rt-btn-google img {
        width: 16px;
        height: 16px;
    }

.rt-help {
    margin-top: clamp(7.2px, 1.8vh, 17.6px);
}

/* ---------- alerts / validation ---------- */
.rt-alert {
    margin-top: 14.4px;
    padding: 8px 9.6px;
    border: 1px solid #FFC9C9;
    border-radius: 3.2px;
    background: #FFEBEB;
    color: #FF0000;
    font-size: 9.6px;
    font-weight: 500;
    text-align: left;
}

    .rt-alert ul {
        margin: 0;
        padding-left: 12.8px;
    }

    .rt-alert a {
        color: #FF0000 !important;
        text-decoration: underline;
    }

.rt-notice {
    width: 100%;
    padding: 9.6px 12.8px;
    background-color: #ffe6e6;
    color: #b30000;
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    border-bottom: 1px solid #ffcccc;
}

    .rt-notice a {
        color: #b30000;
        font-weight: 600;
        text-decoration: underline;
    }

.rt-marquee {
    width: 100%;
    margin-bottom: 8px;
    background-color: red;
    color: #fff;
}

/* ---------- responsive ----------
   The breakpoint widths themselves are NOT scaled -- they measure the viewport,
   not the design. Only the sizes inside each block moved. */
@media screen and (max-width: 1200px) {
    .rt-login-form {
        /* horizontal padding widens here, but the vertical padding must stay
           viewport-relative or this rule re-introduces the overflow. */
        padding: calc(32px + clamp(12.8px, 6vh, 32px)) 48px clamp(12.8px, 6vh, 64px);
    }
}

@media screen and (max-width: 992px) {
    .rt-split {
        flex-direction: column;
    }

    .rt-slider {
        flex: none;
        height: 160px;
        order: 1;
        flex-shrink: 0;
        padding: 16px;
    }

    /* the illustration/info-card/footer only fit the two-column layout --
       collapse back to just the logo + heading + dots on a stacked mobile page. */
    .rt-slider-info,
    .rt-slider-footer {
        display: none;
    }

    .rt-login-col {
        flex: 1;
        order: 2;
        min-height: 0;
        padding: 16px;
    }

    .rt-login-form {
        padding: calc(32px + 16px) 16px 32px;
        max-width: 100%;
    }
}

@media screen and (max-width: 768px) {
    .rt-slider {
        height: 120px;
    }

    .rt-login-col {
        padding: 12px;
    }

    .rt-login-form {
        padding: calc(32px + 8px) 16px 24px;
    }
}

@media screen and (max-width: 480px) {
    .rt-slider {
        height: 96px;
    }

    .rt-login-col {
        padding: 8px;
    }

    .rt-login-form {
        padding: calc(25.6px + 8px) 12px 16px;
        max-width: none;
    }

        .rt-login-form::before {
            height: 25.6px;
        }

    .rt-title {
        font-size: 14.4px;
        margin: 12px 0 16px;
        word-wrap: break-word;
    }

    .rt-input, .rt-btn-primary, .rt-btn-secondary {
        height: 32px;
        font-size: 11.2px;
    }

    .rt-alt {
        flex-direction: column;
    }
}

@media screen and (max-width: 360px) {
    .rt-login-form {
        padding: calc(25.6px + 12px) 8px 12px;
    }

    .rt-title {
        font-size: 12.8px;
    }

    .rt-input, .rt-btn-primary, .rt-btn-secondary {
        height: 30.4px;
        font-size: 10.4px;
    }
}

/* ---------- secondary auth screens (forgot password / unlock account) ---------- */
.rt-subtitle {
    margin: -6.4px 0 19.2px;
    color: #8594A6;
    font-size: 10.4px;
    font-weight: 400;
    text-align: center;
}

.rt-question {
    margin: 0 0 6.4px;
    color: #1A2438;
    font-size: 11.2px;
    font-weight: 600;
    text-align: left;
}

.rt-info {
    margin-bottom: clamp(9.6px, 2vh, 16px);
    padding: 9.6px 11.2px;
    border: 1px solid #C0D0E7;
    border-radius: 3.2px;
    background: #EAF2FE;
    color: #125AAB;
    font-size: 10.4px;
    line-height: 1.6;
    text-align: left;
}

.rt-btn-row {
    display: flex;
    gap: 12.8px;
    margin-top: clamp(9.6px, 2.2vh, 19.2px);
}

    .rt-btn-row .rt-btn-primary,
    .rt-btn-row .rt-btn-secondary {
        flex: 1;
        width: auto;
        /* border-box so flex-basis:0 grows the OUTER boxes equally despite the two
           buttons having different padding/border; min-width:0 to drop the default
           min-width:auto (min-content) floor, which otherwise lets the wider label
           claim more than its share and leaves the pair visibly uneven. */
        box-sizing: border-box;
        min-width: 0;
    }

/* the Submit button on these screens is a plain block button, like Sign In */
.rt-btn-primary.rt-btn-block {
    margin-top: clamp(9.6px, 2.2vh, 19.2px);
}

/* ---------- reset-password screen ----------
   Reference: trpl-regtrack-angular-web/modules/compliance/headers/reset-password/
   reset-password.component.{html,css}. Scoped to .rt-auth-reset so the Login and
   Unlock Account screens keep their current rhythm.

   The reference's .login-form padding (140px 80px 100px) is deliberately NOT
   ported: it overflows short viewports, which is the bug the clamp()ed spacing
   in .rt-login-form exists to prevent.

   The column used to carry its own drop shadow here to read as a card; now that
   .rt-login-form itself is an elevated card (see the base rule above), a second
   shadow on the column would double up, so this screen no longer needs an override. */

.rt-auth-reset .rt-field {
    margin-bottom: clamp(12.8px, 3.4vh, 28.8px);
}

/* Same plain-text treatment as Login.aspx's #vsLogin (node 20521:2281) -- scoped
   per-page rather than promoted to the base .rt-alert rule, since that class is
   also used by SSOLogin.aspx, which is out of scope for this pass. */
.rt-auth-reset .rt-alert,
.rt-auth-unlock .rt-alert {
    margin: 6.4px 0 0;
    padding: 0;
    border: none;
    background: none;
    color: #D63838;
    font-size: 10px;
    font-weight: 500;
    text-align: left;
}

    .rt-auth-reset .rt-alert ul,
    .rt-auth-unlock .rt-alert ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

/* inline validation under the input, as .validation-msg / .color-red do.
   The alignment has to come from the parent: ASP.NET writes an inline
   style="display:none|inline" onto a Display="Dynamic" validator, so any
   display/text-align set on .rt-validation itself is overridden (and forcing it
   with !important would keep the message visible in the valid state). */
.rt-field {
    text-align: left;
}

/* Plain inline red text, no box/icon/"Error :" prefix -- matches the Figma
   wrong-password treatment (node 20521:2281) rather than the old boxed-alert
   look with a red circle-exclamation icon. */
.rt-validation {
    display: block;
    margin-top: 6.4px;
    padding: 0;
    border-radius: 0;
    background: none;
    color: #D63838;
    font-size: 10px;
    font-weight: 500;
    line-height: 1.45;
    text-align: left;
}

    /* Login validates server-side, so its validator span carries no inline style and the
       rule above just works. ForgotPassword validates client-side, where ASP.NET writes
       style="display:inline|none" -- and an inline style beats a class. Re-assert the box
       only in the visible state, so a hidden validator is never forced open. */
    .rt-validation[style*="inline"] {
        display: block !important;
    }

/* the field the message belongs to turns red. :not([style*="none"]) keeps the border off
   while a client-side validator is sitting there hidden and valid. */
.rt-field:has(> .rt-validation:not([style*="none"])) .rt-input {
    border-color: #D63838;
}

/* .help-box -- "Click Here to Go Back" */
.rt-backlink {
    display: flex;
    justify-content: center;
    margin-top: clamp(11.2px, 2.6vh, 19.2px);
}

    .rt-backlink .rt-link {
        font-size: 10.4px;
        font-weight: 500;
        cursor: pointer;
    }

/* ASP.NET renders ValidationSummary as <div class="rt-alert"><ul></ul></div> even
   when every ErrorMessage is empty -- which is the case on the reset screen, where
   the required-field message is shown inline instead. Hide that empty shell so it
   does not paint a blank red box. A summary with items, and the plain-text .rt-alert
   used by lblMessage / cvDuplicateEntry, are unaffected. */
.rt-alert:has(> ul:empty) {
    display: none;
}

/* .rt-input drops to 32px / 30.4px at these widths -- keep the eye anchor in step. */
@media screen and (max-width: 480px) {
    .rt-field {
        --rt-input-h: 32px;
    }
}

@media screen and (max-width: 360px) {
    .rt-field {
        --rt-input-h: 30.4px;
    }
}

/* ---------- OTP verification screen ----------
   Reference: trpl-regtrack-angular-web/modules/compliance/login/otp-verification/
   otp-verification.component.{html,css}. */
.rt-subhead {
    margin: 0 0 8px;
    color: #8594A6;
    font-size: 10.4px;
    font-weight: 400;
    text-align: center;
}

/* Reference: Figma "Log in — 07 Enter OTP" (node 20521:2727), masked-contact
   line 20521:2871 ("priya****@company.com  ·  +91 ****3210") -- email.Text /
   mobileno.Text arrive from the server already masked (Page_Load). */
.rt-otp-contact {
    margin: 0 0 3.2px;
    color: #1A2438;
    font-size: 10px;
    font-weight: 500;
    text-align: center;
}

    .rt-otp-contact-sep {
        margin: 0 6.4px;
        color: #8594A6;
    }

.rt-otp-expiry {
    margin: 0 0 19.2px;
    color: #8594A6;
    font-size: 8.8px;
    font-weight: 400;
    text-align: center;
}

/* Six-box OTP entry -- reference 20521:2861-2876 (52x56px, 18px gaps, 20px
   SemiBold digits). The boxes are decorative; rt-otp-boxes.js (inline script,
   OTPVerify.aspx) syncs their combined value into the real (hidden) txtOTP. */
.rt-otp-boxes {
    display: flex;
    justify-content: space-between;
    gap: 14.4px;
    margin-bottom: 9.6px;
}

.rt-otp-box {
    box-sizing: border-box;
    width: 41.6px;
    height: 44.8px;
    border: 1.4px solid #C9D8EC;
    border-radius: 8px;
    background: #fff;
    color: #1A2438;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    outline: none;
}

    .rt-otp-box:focus {
        border-color: #125AAB;
    }

/* red single-line message (invalid OTP, resend confirmations) */
.rt-error-message {
    display: block;
    margin-bottom: clamp(9.6px, 2.6vh, 22.4px);
    color: #FF0000;
    font-size: 11.2px;
    font-weight: 500;
    text-align: left;
}

/* "Do not have access to OTP?" / "Resend OTP" on one row */
.rt-otp-help {
    display: flex;
    justify-content: space-between;
    gap: 9.6px;
    margin-bottom: 9.6px;
}

.rt-help-row {
    display: flex;
    justify-content: flex-start;
}

    .rt-otp-help .rt-link,
    .rt-help-row .rt-link {
        font-size: 10.4px;
        font-weight: 500;
        cursor: pointer;
    }

/* bordered notice block (.validation-msg-box in the reference) */
.rt-msgbox {
    margin-top: 19.2px;
    padding: 19.2px 11.2px;
    border: 1px solid #FF0000;
    border-radius: 3.2px;
    background-color: #FFDADA;
    color: #FF0000;
    font-size: 12px;
    font-weight: 500;
    text-align: left;
}

/* ---------- OTP screen spacing ----------
   Measured off http://localhost:4200/otpVerification. Rendered gaps there (after the
   0.8 zoom): details->input, input->button and button->help are each 28.8px, i.e. 36px
   before scaling; subhead->details 8px (10px); otp-help->sign-in 9.6px (12px). The card's
   own padding is no longer overridden here -- Figma (node 20521:2727) uses the same
   54px/30px card padding as every other "Log in" frame, not this reference's 12px/36px. */
.rt-auth-otp .rt-field,
.rt-auth-otp .rt-error-message {
    margin-bottom: 28.8px;
}

/* the reference puts the button in its own .input-group: no top margin, 36px below */
.rt-auth-otp .rt-btn-primary {
    margin-top: 0;
    margin-bottom: 28.8px;
}

.rt-auth-otp .rt-otp-help {
    margin-bottom: 9.6px;
}

@media screen and (max-width: 768px) {
    .rt-auth-otp .rt-login-form {
        padding: calc(32px + 16px) 16px 24px;
    }

    .rt-auth-otp .rt-details,
    .rt-auth-otp .rt-field,
    .rt-auth-otp .rt-error-message,
    .rt-auth-otp .rt-btn-primary {
        margin-bottom: 16px;
    }
}

@media screen and (max-width: 480px) {
    .rt-auth-otp .rt-field,
    .rt-auth-otp .rt-error-message,
    .rt-auth-otp .rt-btn-primary {
        margin-bottom: 12.8px;
    }
}

/* ---------- security questions screen ----------
   Reference: trpl-regtrack-angular-web/modules/compliance/login/security-questions/
   security-questions.component.{html,css}. */
.rt-auth-sq .rt-subhead {
    margin-bottom: 28.8px;
}

.rt-auth-sq .rt-field {
    margin-bottom: 22.4px;
}

/* The question is read-only, shown in a box the reference styles IDENTICALLY to the
   answer input (.textbox): same #DDEAFC fill, 48px height, same border. So the panel
   reads as four matching boxes -- Q1, A1, Q2, A2 -- not question-labels + inputs.
   flex + align-items:center vertically centres a single-line question like an input;
   min-height lets a long question grow instead of clipping. */
/* Reference: Figma "Log in — 09 Verify security questions" (node 20521:3035,
   question 20521:3178 "What is your first mobile brand?") -- the question is a
   plain text label sitting directly above its answer input, not a filled box. */
.rt-question-box {
    margin-bottom: 6.4px;
    color: #1A2438;
    font-size: 10.4px;
    font-weight: 500;
    text-align: left;
}

.rt-question-box + .rt-field {
    margin-bottom: 16px;
}

/* dropdowns on the set-up panel take the same shape as .rt-input */
.rt-select {
    box-sizing: border-box;
    width: 100%;
    height: 38.4px;
    margin-bottom: 9.6px;
    padding: 8px 12px;
    border: 1.4px solid #C9D8EC;
    border-radius: 8px;
    background-color: #fff;
    color: #1A2438;
    font-family: 'Poppins', sans-serif;
    font-size: 10.8px;
    outline: none;
}

/* "Kindly note answers are case-sensitive" (.note in the reference) */
/* Fine print not depicted in Figma (e.g. "answers are case-sensitive") --
   styled as muted fine print consistent with .rt-subhead/.rt-subtitle rather
   than the old alarm-red, which read as an error on this redesign. */
.rt-note {
    margin: 0 0 19.2px;
    color: #8594A6;
    font-size: 9.6px;
    font-weight: 400;
    text-align: center;
}

.rt-notes {
    margin-bottom: 19.2px;
}

    .rt-notes p {
        margin: 0 0 3.2px;
        color: #8594A6;
        font-size: 9.6px;
        font-weight: 400;
        text-align: center;
    }

/* this screen centres the sign-in link (the OTP screen left-aligns it) */
.rt-help-center {
    display: flex;
    justify-content: center;
}

    .rt-help-center .rt-link {
        font-size: 10.4px;
        font-weight: 500;
        cursor: pointer;
    }

/* ---------- security questions: spacing measured off http://localhost:4200/securityQuestions ----------
   Rendered there (after the 0.8 zoom): every gap between the four boxes is 22.4px, i.e.
   .input-group's 28px before scaling; subhead->first box 28.8px (36px); note->sign-in
   19.2px (24px); the two buttons are 18px apart and BOTH are the blue primary. */
.rt-auth-sq .rt-login-form {
    /* wider than the 450px default: the reference security-questions form renders at
       ~499px (624px before the 0.8 zoom), giving room for 360px-wide boxes. */
    max-width: 499.2px;
    padding: calc(32px + 41.6px) 60px 40px;
}

/* Reference sets [width]=360 on each textbox -> 450px CSS -> 360px rendered under the
   0.8 zoom. The boxes are therefore narrower than the form content and centred, while
   the subhead, button row and note span the full width. */
.rt-auth-sq .rt-field,
.rt-auth-sq .rt-question-box {
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
}

.rt-auth-sq .rt-btn-row {
    gap: 14.4px;
    margin-top: 0;
    /* 28px -> 22.4px rendered, matching the reference's buttons->note gap */
    margin-bottom: 22.4px;
    /* cap + centre to the box width so the buttons line up with the inputs above.
       The reference nests the buttons in an .input-group with the same 0 12px inset
       as the textboxes, so both land at 360px; without this the row fills the full
       379px content and the buttons overhang the boxes by ~9.6px each side. */
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
}

/* Figma ("08 Set security questions" node 20521:2877, "06 Change password" node
   20521:2572) shows Clear as the white/bordered secondary style, not a second solid
   blue button -- the old reference's shared .login-btn treatment (removed here) predates
   the redesign. .rt-btn-row .rt-btn-primary/.rt-btn-secondary already share flex:1 +
   box-sizing:border-box, so the border/padding difference doesn't unbalance the widths. */

@media screen and (max-width: 992px) {
    .rt-auth-sq .rt-login-form {
        padding: calc(32px + 16px) 16px 32px;
    }
}

/* ---------- change password screen ----------
   Reference: trpl-regtrack-angular-web/modules/compliance/headers/change-password/
   change-password.component.{html,css}. Measured off http://localhost:4200/changePassword:
   h4 28px (32/36 margins), boxes ~360px, uniform 28.8px rendered (36px) gaps, both
   buttons blue. Our flow keeps a third field (Old Password) the reset-style reference
   omits. Layout kept on the shared 6:4 .rt-split for consistency with the other auth
   screens (the reference uses a near-even flex:1/flex:1 split). */
.rt-auth-cp .rt-title {
    font-size: 22.4px;
    margin: 25.6px 0 28.8px;
}

/* wider form so the boxes reach 360px, then boxes + button row capped and centred */
.rt-auth-cp .rt-login-form {
    max-width: 448px;
}

.rt-auth-cp .rt-field {
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 28.8px;
}

.rt-auth-cp .rt-btn-row {
    max-width: 360px;
    gap: 14.4px;
    margin: 0 auto 28.8px;
}

/* Clear-button styling for this screen is shared with .rt-auth-sq above. */

/* ---------- login: password step (Login.aspx) ----------
   Reference: Figma "Log in — 02 Password" (node 20521:1983). Every value below is
   read directly off that frame's card (x=814,y=306,w=460,h=412) rather than carried
   over from the pre-split combined-login-form styling, which used different padding,
   a thick 40px accent block, blue-filled inputs and 4px/5px corner radii -- none of
   which match this design. */
.rt-auth-login-password .rt-login-form,
.rt-auth-login-email .rt-login-form {
    max-width: 368px;
    padding: 43.2px 24px 43.2px;
}

.rt-auth-login-password .rt-login-form::before,
.rt-auth-login-email .rt-login-form::before {
    /* Figma's accent is a 6px sliver at the very top of the card, not a 40px block. */
    height: 4.8px;
}

.rt-auth-login-password .rt-title,
.rt-auth-login-email .rt-title {
    color: #1D6BD8;
    font-size: 19.2px;
}

.rt-auth-login-password .rt-title {
    margin: 0 0 33.6px;
}

/* Reference: Figma frame "2" (node 20516:1672) -- the email step's title sits
   48px above the (single) input instead of the password step's 42px, since
   that step doesn't have a second field stacked underneath. */
.rt-auth-login-email .rt-title {
    margin: 0 0 38.4px;
}

.rt-auth-login-password .rt-input,
.rt-auth-login-email .rt-input {
    border-radius: 8px;
    color: #1A2438;
    font-size: 10.8px;
}

    .rt-auth-login-password .rt-input::-webkit-input-placeholder,
    .rt-auth-login-email .rt-input::-webkit-input-placeholder { color: #9AA6B5; opacity: 1; }
    .rt-auth-login-password .rt-input::-moz-placeholder,
    .rt-auth-login-email .rt-input::-moz-placeholder { color: #9AA6B5; opacity: 1; }
    .rt-auth-login-password .rt-input:-ms-input-placeholder,
    .rt-auth-login-email .rt-input:-ms-input-placeholder { color: #9AA6B5; opacity: 1; }

/* Reference: Figma frame "2" (node 20516:1672), email field (20516:1806, gap to
   Next button 20516:1808 = 24px) -- the base .rt-field clamp() is tuned for
   pages with multiple stacked fields; this page only has one. */
.rt-auth-login-email .rt-field {
    margin-bottom: 19.2px;
}

.rt-auth-login-password .rt-field-identity {
    margin-bottom: 12.8px;
}

    .rt-auth-login-password .rt-field-identity .rt-input {
        background-color: #F2F6FA;
        border: none;
        font-weight: 500;
    }

.rt-auth-login-password .rt-change-email {
    font-size: 10.4px;
    color: #1D6BD8;
}

.rt-auth-login-password .rt-field-password {
    margin-bottom: 16px;
}

    .rt-auth-login-password .rt-field-password .rt-input {
        background-color: #fff;
        border: 1px solid #CCD6E0;
    }

/* "Remember me" + "Forgot password?" share a row, matching Figma -- .rt-remember-row
   rides on .rt-links' existing flex/space-between, cbRememberMe's own .rt-remember
   margin is reset since it's now a row child rather than a standalone block. */
.rt-auth-login-password .rt-remember-row {
    margin: 0 0 24px;
}

.rt-auth-login-password .rt-remember {
    margin: 0;
}

    .rt-auth-login-password .rt-remember label {
        color: #1A2438;
        font-size: 10.8px;
        font-weight: 400;
    }

.rt-auth-login-password .rt-btn-primary,
.rt-auth-login-email .rt-btn-primary {
    border-radius: 8px;
    box-shadow: 0 4.8px 12.8px 0 rgba(18, 90, 171, .3);
    font-size: 12px;
}

.rt-auth-login-password .rt-remember-row .rt-link {
    color: #1D6BD8;
    font-size: 10.4px;
    font-weight: 500;
}

/* ---------- login: password step -- wrong-password / account error state ----------
   Reference: Figma "Log in — 03 Wrong password" (node 20521:2134). vsLogin is what
   actually renders here -- cvLogin has Display="None" so it never shows its own text,
   it only feeds the ValidationSummary. Figma's error is plain inline red text under
   the password field, not the boxed/bordered .rt-alert banner used elsewhere in this
   file (that treatment stays as-is for other pages/contexts). */
.rt-auth-login-password #vsLogin {
    /* bottom margin matters here: .rt-remember-row's own top margin is zeroed
       (see .rt-auth-login-password .rt-remember-row below) for the no-error
       case, so with no error showing there's nothing else to create this gap. */
    margin: 6.4px 0 19.2px;
    padding: 0;
    border: none;
    background: none;
    color: #D63838;
    font-size: 10px;
    font-weight: 500;
    text-align: left;
}

    .rt-auth-login-password #vsLogin ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

/* the general-sibling combinator skips over cvLogin's own (always display:none)
   span, which sits between .rt-field-password and #vsLogin in the DOM. */
.rt-auth-login-password .rt-field-password:has(~ #vsLogin ul:not(:empty)) .rt-input {
    border-color: #D63838;
}

/* ---------- login: email step (Login.aspx, pnlEmailStep) ----------
   Reference: Figma frame "2" (node 20516:1672). Values below are unique to this
   step -- the two-field password-step layout has no OR-divider or "Sign in with
   Google" button, and stacks "Remember me"/"Forgot password?" instead of
   "Account Locked?"/"Login Help?". */

/* horizontal-rule-with-text-in-the-middle, built from ::before/::after flex
   items either side of the "OR" text node -- avoids extra wrapper spans.
   Reference: divider lines 20516:1812/20516:1813 (#DDE6F2, 172px each), "OR"
   text 20516:1814 (#8594A6, 11px). Gap from Next button = 26px, to the Google
   button = 16px. */
.rt-auth-login-email .rt-or-divider {
    display: flex;
    align-items: center;
    gap: 6.4px;
    margin: 20.8px 0 12.8px;
    color: #8594A6;
    font-size: 8.8px;
    font-weight: 500;
}

    .rt-auth-login-email .rt-or-divider::before,
    .rt-auth-login-email .rt-or-divider::after {
        content: '';
        flex: 1;
        height: 1px;
        background: #DDE6F2;
    }

/* .rt-alt's own margin-top is reset to 0 -- .rt-or-divider's margin-bottom
   above already provides the 16px gap to the Google button, and letting both
   apply would double it. */
.rt-auth-login-email .rt-alt {
    margin-top: 0;
}

.rt-auth-login-email .rt-btn-google {
    /* .rt-btn-secondary's flex:1 sets flex-basis:0% on .rt-alt's column main
       axis (height), silently overriding its own height:48px -- harmless when
       .rt-alt stacks two buttons (they still split the space evenly at 48px
       each), but collapses to content-height here where it's the only child. */
    flex: none;
    height: 38.4px;
    border-radius: 8px;
    border: 1.3px solid #E1E6EE;
    color: #1A2438;
    font-size: 10.8px;
    font-weight: 500;
}

    .rt-auth-login-email .rt-btn-google img {
        width: 14.4px;
        height: 14.4px;
    }

/* "Account Locked?" / "Login Help?" share a row, matching Figma (20516:1822 /
   20516:1823, both #1D6BD8) -- rides on .rt-links' existing flex/space-between. */
.rt-auth-login-email .rt-links {
    margin-top: 30.4px;
}

    .rt-auth-login-email .rt-links .rt-link {
        color: #1D6BD8;
        font-size: 10.4px;
        font-weight: 500;
    }

/* ================= left-panel motion =================
   Source: Figma "Regtrack - Compliance", frame "Added Motions" (node 20594:2),
   read through get_motion_context. Figma reports one timeline for the whole
   frame (rootNodeId 20594:2, durationMs 6000, loopMode "loop"), so EVERY rule
   below is `6s ... infinite` with no delay -- that is what keeps 33 separately
   animated nodes phase-locked to each other. Changing one duration desyncs the
   scene; change all of them or none.

   Values (keyframe positions, easing, offsets) are Figma's verbatim. Two
   mechanical departures, both value-preserving:
   - Figma emits full turns as `@property --rotate-transform` + `transform:
     rotate(var(...))`. Here they use the independent `rotate:` property with the
     equivalent degrees (6.283rad = 360deg). `transform` would override the
     `transform=` presentation attribute several of these nodes rely on for
     placement; `rotate:`/`translate:`/`scale:` compose with it instead.
   - Nodes that share a track share a @keyframes block rather than repeating it.

   NOT part of the 0.8 scale pass above: everything here is either unitless
   (rotate/scale/opacity) or in SVG user units, which the viewBox already scales
   with the rendered illustration. The one exception is intentional -- the DYK
   icon is real HTML, and its animation is unitless too. */

/* the DYK card's sparkle (node 20594:19) -- slow turn with an irregular
   breathe, the one animated element outside the illustration SVG */
.rt-slider-info-icon {
    animation: rt-ill-turn 6s linear infinite, rt-ill-spark-fade 6s linear infinite, rt-ill-spark-pulse 6s linear infinite;
}

@keyframes rt-ill-turn {
    from { rotate: 0deg; }
    to { rotate: 360deg; }
}

@keyframes rt-ill-spark-fade {
    0%, 21.667%, 46.667%, 70%, 100% { animation-timing-function: ease-in-out; opacity: 1; }
    11.667% { animation-timing-function: ease-in-out; opacity: .82; }
    35% { animation-timing-function: ease-in-out; opacity: .88; }
    58.333% { animation-timing-function: ease-in-out; opacity: .8; }
    83.333% { animation-timing-function: ease-in-out; opacity: .9; }
    93.333% { animation-timing-function: ease-in-out; opacity: .97; }
}

@keyframes rt-ill-spark-pulse {
    0%, 46.667%, 100% { animation-timing-function: ease-in-out; scale: 1; }
    11.667% { animation-timing-function: ease-in-out; scale: 1.22; }
    21.667% { animation-timing-function: ease-in-out; scale: .94; }
    35% { animation-timing-function: ease-in-out; scale: 1.12; }
    58.333% { animation-timing-function: ease-in-out; scale: 1.26; }
    70% { animation-timing-function: ease-in-out; scale: .96; }
    83.333% { animation-timing-function: ease-in-out; scale: 1.1; }
    93.333% { animation-timing-function: ease-in-out; scale: 1.02; }
}

/* ---- the three float tracks, each shared by several nodes ---- */
/* ring track (20594:24), ring group (20599:626), avatar (20594:64) */
@keyframes rt-ill-float-up {
    0%, 25%, 50%, 75%, 100% { animation-timing-function: ease-in-out; translate: 0 0; }
    12.5%, 62.5% { animation-timing-function: ease-in-out; translate: 0 -4px; }
    37.5%, 87.5% { animation-timing-function: ease-in-out; translate: 0 2.4px; }
}

/* badge (20594:69) + location pin (20594:86) */
@keyframes rt-ill-float-down {
    0%, 25%, 50%, 75%, 100% { animation-timing-function: ease-in-out; translate: 0 0; }
    12.5%, 62.5% { animation-timing-function: ease-in-out; translate: 0 5px; }
    37.5%, 87.5% { animation-timing-function: ease-in-out; translate: 0 -3px; }
}

/* calendar icon (20594:70) */
@keyframes rt-ill-float-down-lg {
    0%, 25%, 50%, 75%, 100% { animation-timing-function: ease-in-out; translate: 0 0; }
    12.5%, 62.5% { animation-timing-function: ease-in-out; translate: 0 6px; }
    37.5%, 87.5% { animation-timing-function: ease-in-out; translate: 0 -3.6px; }
}

/* ---- the three breathe tracks ---- */
@keyframes rt-ill-pulse-104 {
    0%, 50%, 100% { animation-timing-function: ease-in-out; scale: 1; }
    25%, 75% { animation-timing-function: ease-in-out; scale: 1.04; }
}

@keyframes rt-ill-pulse-107 {
    0%, 50%, 100% { animation-timing-function: ease-in-out; scale: 1; }
    25%, 75% { animation-timing-function: ease-in-out; scale: 1.07; }
}

@keyframes rt-ill-pulse-108 {
    0%, 50%, 100% { animation-timing-function: ease-in-out; scale: 1; }
    25%, 75% { animation-timing-function: ease-in-out; scale: 1.08; }
}

/* ---- ring ---- */
.rt-ill-ring-track,
.rt-ill-ring-bob {
    animation: rt-ill-float-up 6s linear infinite;
}

.rt-ill-ring-spin {
    /* the ring's true centre. Deliberately NOT transform-box:fill-box + center:
       the arc is an open shape whose rendered bbox stops ~5px short of the
       circle's bottom, so a bbox-derived pivot would make a full turn wobble.
       Figma's own node box is 374,330 176x176 -> centre 462,418. */
    transform-origin: 462px 418px;
    animation: rt-ill-turn 6s linear infinite;
}

/* ---- Obligations bars (20594:36-40) ----
   height + a compensating translate, so each bar grows off the y=490 baseline
   instead of off its own top edge. */
@keyframes rt-ill-bar-1 {
    0%, 25%, 50%, 75%, 100% { animation-timing-function: ease-in-out; height: 50px; translate: 0 0; }
    12.5%, 62.5% { animation-timing-function: ease-in-out; height: 58px; translate: 0 -8px; }
    37.5%, 87.5% { animation-timing-function: ease-in-out; height: 42px; translate: 0 8px; }
}

@keyframes rt-ill-bar-2 {
    0%, 50%, 100% { animation-timing-function: ease-in-out; height: 80px; translate: 0 0; }
    12.5%, 62.5% { animation-timing-function: ease-in-out; height: 79.77px; translate: 0 0.23px; }
    25%, 75% { animation-timing-function: ease-in-out; height: 64.22px; translate: 0 15.78px; }
    37.5%, 87.5% { animation-timing-function: ease-in-out; height: 64.45px; translate: 0 15.55px; }
}

@keyframes rt-ill-bar-3 {
    0%, 50%, 100% { animation-timing-function: ease-in-out; height: 62px; translate: 0 0; }
    12.5%, 62.5% { animation-timing-function: ease-in-out; height: 52.74px; translate: 0 9.26px; }
    25%, 75% { animation-timing-function: ease-in-out; height: 44.01px; translate: 0 17.99px; }
    37.5%, 87.5% { animation-timing-function: ease-in-out; height: 53.27px; translate: 0 8.73px; }
}

@keyframes rt-ill-bar-4 {
    0%, 50%, 100% { animation-timing-function: ease-in-out; height: 100px; translate: 0 0; }
    12.5%, 62.5% { animation-timing-function: ease-in-out; height: 81.63px; translate: 0 18.37px; }
    25%, 75% { animation-timing-function: ease-in-out; height: 82.44px; translate: 0 17.56px; }
    37.5%, 87.5% { animation-timing-function: ease-in-out; height: 100.81px; translate: 0 -0.81px; }
}

@keyframes rt-ill-bar-5 {
    0%, 50%, 100% { animation-timing-function: ease-in-out; height: 120px; translate: 0 0; }
    12.5%, 62.5% { animation-timing-function: ease-in-out; height: 105.9px; translate: 0 14.1px; }
    25%, 75% { animation-timing-function: ease-in-out; height: 121.75px; translate: 0 -1.75px; }
    37.5%, 87.5% { animation-timing-function: ease-in-out; height: 135.85px; translate: 0 -15.85px; }
}

.rt-ill-bar-1 { animation: rt-ill-bar-1 6s linear infinite; }
.rt-ill-bar-2 { animation: rt-ill-bar-2 6s linear infinite; }
.rt-ill-bar-3 { animation: rt-ill-bar-3 6s linear infinite; }
.rt-ill-bar-4 { animation: rt-ill-bar-4 6s linear infinite; }
.rt-ill-bar-5 { animation: rt-ill-bar-5 6s linear infinite; }

/* ---- "Compliance score" card ----
   One float for the whole card (Figma repeats this identical track on all 18 of
   its child nodes, 20594:46-63). Sampled every 5% and interpolated linearly,
   exactly as exported -- no per-keyframe easing on this one. */
.rt-ill-score {
    animation: rt-ill-score-float 6s linear infinite;
}

@keyframes rt-ill-score-float {
    0%, 25%, 50%, 75%, 100% { translate: 0 0; }
    5%, 20%, 55%, 70% { translate: 0 5.29px; }
    10%, 15%, 60%, 65% { translate: 0 8.56px; }
    30%, 45%, 80%, 95% { translate: 0 -5.29px; }
    35%, 40%, 85%, 90% { translate: 0 -8.56px; }
}

/* readout cursor (20594:53) sweeps the plot and back. Figma's track is absolute
   and therefore carries the card float in its Y; inside .rt-ill-score that Y is
   already supplied, so only the X sweep survives here. */
.rt-ill-score-cursor {
    animation: rt-ill-score-sweep 6s linear infinite;
}

@keyframes rt-ill-score-sweep {
    0%, 100% { translate: -136px 0; }
    5%, 95% { translate: -131.84px 0; }
    10%, 90% { translate: -119.766px 0; }
    15%, 85% { translate: -100.962px 0; }
    20%, 80% { translate: -77.266px 0; }
    25%, 75% { translate: -51px 0; }
    30%, 70% { translate: -24.734px 0; }
    35%, 65% { translate: -1.038px 0; }
    40%, 60% { translate: 22.992px 0; }
    45%, 55% { translate: 38.616px 0; }
    50% { translate: 44px 0; }
}

/* point marker (20594:56 + 20594:57) rides the plotted line as the cursor
   sweeps. Same subtraction as above: Y here is Figma's absolute Y minus the card
   float, which lands each keyframe back on the polyline the chart actually
   draws -- e.g. 15% -> (-100.96, 34.18), the (272,384) vertex. */
.rt-ill-score-dot {
    animation: rt-ill-score-ride 6s linear infinite;
}

@keyframes rt-ill-score-ride {
    0%, 100% { translate: -136px 44px; }
    5%, 95% { translate: -131.84px 42.776px; }
    10%, 90% { translate: -119.766px 39.225px; }
    15%, 85% { translate: -100.962px 34.183px; }
    20%, 80% { translate: -77.266px 38.365px; }
    25%, 75% { translate: -51px 28px; }
    30%, 70% { translate: -24.734px 11.639px; }
    35%, 65% { translate: -1.038px 0.489px; }
    40%, 60% { translate: 22.992px 5.226px; }
    45%, 55% { translate: 38.616px 8.776px; }
    50% { translate: 44px 10px; }
}

/* ---- avatar / badge / pin / calendar icon ----
   Each pivots on its own centre in page coordinates; the wrapper <g>s in
   LoginIllustration.ascx exist precisely so these carry no transform= of their
   own and this origin resolves in that space. */
.rt-ill-avatar {
    transform-origin: 470px 436px;
    animation: rt-ill-float-up 6s linear infinite, rt-ill-pulse-104 6s linear infinite;
}

.rt-ill-badge,
.rt-ill-pin {
    transform-origin: 505px 463px;
    animation: rt-ill-float-down 6s linear infinite, rt-ill-pulse-108 6s linear infinite;
}

.rt-ill-calicon {
    transform-origin: 470px 344px;
    animation: rt-ill-float-down-lg 6s linear infinite, rt-ill-pulse-107 6s linear infinite;
}

/* pennant on the calendar icon (20620:2) -- rocks and squashes on X only.
   Origin is in the icon group's local space (see the note in the .ascx), and
   all three of its tracks share one set of keyframe positions, so one block is
   exact rather than an approximation. */
.rt-ill-flag {
    transform-origin: 33.472px 18.995px;
    animation: rt-ill-flag-wave 6s linear infinite;
}

@keyframes rt-ill-flag-wave {
    0%, 16.667%, 33.333%, 50%, 66.667%, 83.333%, 100% { animation-timing-function: ease-in-out; rotate: 0deg; translate: 0 0; scale: 1 1; }
    8.333%, 41.667%, 75% { animation-timing-function: ease-in-out; rotate: -6.99deg; translate: -0.461px -0.142px; scale: .72 1; }
    25%, 58.333%, 91.667% { animation-timing-function: ease-in-out; rotate: 4.985deg; translate: -0.199px 0.124px; scale: .88 1; }
}

/* ---- the two meters in the pills ---- */
.rt-ill-pill-fill-a {
    animation: rt-ill-meter-a 6s linear infinite;
}

@keyframes rt-ill-meter-a {
    0%, 25%, 50%, 75%, 100% { animation-timing-function: ease-in-out; width: 16px; }
    12.5%, 62.5% { animation-timing-function: ease-in-out; width: 23px; }
    37.5%, 87.5% { animation-timing-function: ease-in-out; width: 9px; }
}

.rt-ill-pill-fill-b {
    animation: rt-ill-meter-b 6s linear infinite;
}

@keyframes rt-ill-meter-b {
    0%, 100% { animation-timing-function: ease-in-out; width: 58px; }
    12.5%, 87.5% { animation-timing-function: ease-in-out; width: 56.97px; }
    25%, 75% { animation-timing-function: ease-in-out; width: 54.5px; }
    37.5%, 62.5% { animation-timing-function: ease-in-out; width: 52.03px; }
    50% { animation-timing-function: ease-in-out; width: 51px; }
}

/* Accessibility: this whole scene is decorative (the SVG is aria-hidden), so
   under a reduced-motion preference it simply holds its 0% pose -- which is the
   static illustration that shipped before the motion pass. */
@media screen and (prefers-reduced-motion: reduce) {
    .rt-slider-info-icon,
    .rt-slider-logo [class*="rt-ill-"] {
        animation: none !important;
    }
}

/* ---------- SSO login screen (SSOLogin.aspx) ----------
   .rt-help-center deliberately carries no top margin of its own, because on every
   other screen that uses it the gap comes from the element in front: .rt-notes /
   p.rt-note (19.2px margin-bottom) on the security-questions screen, and the
   .rt-auth-cp .rt-btn-row override (28.8px) on the two change-password screens.

   This screen has neither. Its link follows #divLogin -- an unstyled runat="server"
   wrapper whose last child is the Proceed button, and .rt-btn-block sets margin-top
   only -- so nothing at all separated the two and the link read as part of the
   button. Scoped rather than folded into the base .rt-help-center rule so the
   other four instances, which are already correctly spaced, don't gain a second
   gap on top of the one they have. */
.rt-auth-sso .rt-help-center {
    /* Pairs with the link's own padding-top below for the visible gap: 16px on a
       roomy viewport, easing to ~12.8px on a short one, where the button above it
       is giving ground too (.rt-btn-block clamps the same way). */
    margin-top: clamp(4.8px, 1.2vh, 8px);
}

    .rt-auth-sso .rt-help-center .rt-link {
        /* Tap target, not decoration. The label renders at 10.4px, so its line box
           alone is a ~15px-tall hit area; the vertical padding roughly doubles that.
           Horizontal padding widens the target without shifting the centred label,
           and can't clip against .rt-login-form's overflow:hidden because the flex
           container centres it well inside the card. */
        display: inline-block;
        padding: 8px 12.8px;
    }

/* ---------- Login Help modal (#docViewer) ----------
   The CDN bootstrap-theme.css carries a stray .modal-dialog{ left:50% } plus
   30px of dialog padding -- old-style modal centring that, under the Bootstrap
   5 CSS these pages now load, shoved the viewer ~half a screen right (with a
   horizontal scrollbar) and stacked ~117px of dead space above the document.
   Reset the position, strip the padding and header/body chrome down to a
   compact close bar, and size the iframe to the viewport so the document sits
   near the top with its own scrollbar in view.

   Left unscaled: this is browser-chrome-scale modal plumbing sized against the
   viewport (100vh), not part of the auth layout the 0.8 pass applies to. */
#docViewer .modal-dialog {
    left: 0;
    width: 95%;
    max-width: 900px;
    height: auto !important;
    margin: 10px auto;
    padding: 0;
}

#docViewer .modal-header {
    padding: 4px 8px;
    min-height: 0;
    border-bottom: 0;
}

#docViewer .modal-body {
    padding: 0;
}

#docViewer #dicviewer {
    display: block;
    width: 100%;
    height: calc(100vh - 56px) !important;
    border: 0;
}

/* ---------- auth card header (customer-logo band + divider) ----------
   Applied to AddSecurityQuestions / OTPVerify / ForgotPassword only.
   NOT from Figma: no source frame exists for this element, so the 0.8 SCALE
   PASS at the top of this file does NOT apply -- 88/48/160/28/12 are literal
   final px handed over by design. Do not scale them.

   The band is absolutely positioned on purpose: .rt-login-form's horizontal
   padding is 60px on .rt-auth-sq and 24/48/16/12/8px on the others across the
   breakpoints, and an out-of-flow band resolves left:0/right:0 against the card
   itself, so "full width" and the divider's 28px inset are identical on all
   three regardless. The 88+1+28 the band needs comes back as padding-top below.

   .rt-split is compounded onto the scoping class below (both classes sit on
   the same element -- see e.g. ResetSecurityQuestions.aspx/ForgotPassword.aspx)
   so these rules win on specificity (0,3,0) rather than on being last in the
   file: .rt-auth-sq .rt-login-form (line ~1184, ~1222), .rt-auth-otp
   .rt-login-form (line ~1077) and .rt-auth-cp .rt-login-form (line ~1240) are
   all (0,2,0), so a rule appended after this one no longer silently wins. */
.rt-cardhead {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 88px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: transparent;
}

    /* object-fit + both caps: the band's height never changes with logo shape. */
    .rt-cardhead-logo {
        max-width: 160px;
        max-height: 48px;
        width: auto;
        height: auto;
        object-fit: contain;
    }

    /* top:100% == y=88px, i.e. the divider sits immediately BELOW the band.
       left/right resolve against the card's padding box, so this is 28px from
       the inner edge / 29px from the outer border edge (border:1px #E8EDF5). */
    .rt-cardhead::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 28px;
        right: 28px;
        height: 1px;
        background: #E8EEF6;
    }

/* 88 (band) + 1 (divider) + 28 (divider -> heading). Replaces the card's own
   top padding rather than adding to it -- the band is out of flow.
   .rt-auth-cp (ChangePassword.aspx/Change_Password.aspx) and the second
   .rt-auth-sq page (ResetSecurityQuestions.aspx) added after the original
   three-page rollout -- same header, same three pages' worth of reasoning. */
.rt-split.rt-auth-sq .rt-login-form,
.rt-split.rt-auth-otp .rt-login-form,
.rt-split.rt-auth-reset .rt-login-form,
.rt-split.rt-auth-cp .rt-login-form,
.rt-split.rt-auth-sso .rt-login-form {
    padding-top: 117px;
}

/* heading -> subtitle = 12px. margin-top:0 is not redundant: the base .rt-title
   is margin:0 0 clamp(...) but @media (max-width:480px) (line ~748) sets
   margin:12px 0 16px, which would otherwise push the heading to 129px there.
   On .rt-auth-cp this also overrides the page's own margin:25.6px 0 28.8px
   (.rt-auth-cp .rt-title, further up this file) on specificity (0,3,0) vs
   (0,2,0), not source order; its font-size:22.4px is untouched (different
   property, not overridden here). */
.rt-split.rt-auth-sq .rt-title,
.rt-split.rt-auth-otp .rt-title,
.rt-split.rt-auth-reset .rt-title,
.rt-split.rt-auth-cp .rt-title,
.rt-split.rt-auth-sso .rt-title {
    margin-top: 0;
    margin-bottom: 12px;
}

/* .rt-subtitle carries margin-top:-6.4px (line ~785) to hug the old title
   spacing; left alone it would collapse the 12px above to 5.6px on this page.
   Its margin-BOTTOM (19.2px) is deliberately untouched. */
.rt-auth-reset .rt-subtitle {
    margin-top: 0;
}

/* ---------- Login help panel (Login.aspx "Login Help?") ----------
   Replaces the Bootstrap #docViewer modal that framed the RoboHelp viewer in
   Help1/NewLogin: same six topics, rewritten for the email-first flow and
   painted in this stylesheet's own language (card radius, #125AAB / #1D6BD8,
   Poppins at the 0.8 scale above). Plain markup + a few lines of script in
   Login.aspx (the .rt-help-scrim block, ~line 288, and rtHelpShow/rtHelpClose);
   nothing here needs jQuery or Bootstrap.

   Layout: fixed scrim > .rt-help-card (accent bar, header, two-column body,
   footer). Topics are buttons in .rt-help-nav; the matching .rt-help-topic is
   shown by the "is-active" class. Below 720px the nav becomes a horizontal
   chip row above the content. */

.rt-help-scrim {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(10, 30, 60, .55);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

    .rt-help-scrim[hidden] {
        display: none;
    }

body.rt-help-open {
    overflow: hidden;
}

.rt-help-card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(880px, 100%);
    height: min(600px, 100vh - 32px);
    overflow: hidden;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 24px 64px rgba(13, 43, 77, .28), 0 2px 8px rgba(13, 43, 77, .08);
    font-family: 'Poppins', system-ui, sans-serif;
    color: #1A2438;
}

    /* Same accent sliver the sign-in card carries. */
    .rt-help-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4.8px;
        background: linear-gradient(90deg, #125AAB, #1D6BD8 60%, #3E8BE8);
    }

.rt-help-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 24px 14px;
    border-bottom: 1px solid #E8EEF6;
}

.rt-help-head-icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #E7EFF9;
    color: #125AAB;
}

    .rt-help-head-icon svg {
        width: 18px;
        height: 18px;
    }

.rt-help-head-text {
    flex: 1 1 auto;
    min-width: 0;
}

.rt-help-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    color: #1A2438;
}

.rt-help-subtitle {
    margin: 2px 0 0;
    font-size: 11.2px;
    line-height: 1.5;
    color: #6B7A90;
}

.rt-help-close {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid #E1E6EE;
    border-radius: 50%;
    background: #fff;
    color: #6B7A90;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}

    .rt-help-close svg {
        width: 12px;
        height: 12px;
    }

    .rt-help-close:hover,
    .rt-help-close:focus-visible {
        border-color: #125AAB;
        color: #125AAB;
        background: #F3F7FC;
        outline: none;
    }

.rt-help-body {
    flex: 1 1 auto;
    display: flex;
    min-height: 0;
}

/* ---- topic list ---- */
.rt-help-nav {
    flex: 0 0 224px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 12px;
    overflow: auto;
    background: #F5F8FC;
    border-right: 1px solid #E8EEF6;
}

.rt-help-nav-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: #3E4C5E;
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: 11.6px;
    font-weight: 500;
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

    .rt-help-nav-btn svg {
        flex: 0 0 auto;
        width: 16px;
        height: 16px;
        color: #8592A3;
    }

    .rt-help-nav-btn:hover,
    .rt-help-nav-btn:focus-visible {
        background: #EEF3FA;
        color: #1A2438;
        outline: none;
    }

    .rt-help-nav-btn.is-active {
        background: #fff;
        border-color: #D6E2F2;
        color: #125AAB;
        box-shadow: 0 1px 3px rgba(13, 43, 77, .06);
    }

        .rt-help-nav-btn.is-active svg {
            color: #125AAB;
        }

/* ---- topic content ---- */
.rt-help-content {
    flex: 1 1 auto;
    min-width: 0;
    overflow: auto;
    padding: 22px 28px 24px;
}

.rt-help-topic {
    display: none;
}

    .rt-help-topic.is-active {
        display: block;
    }

.rt-help-topic-title {
    margin: 0 0 6px;
    font-size: 15.2px;
    font-weight: 600;
    line-height: 1.3;
    color: #1A2438;
}

.rt-help-intro {
    margin: 0 0 16px;
    font-size: 12px;
    line-height: 1.65;
    color: #4A5568;
}

.rt-help-steps {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: rt-help-step;
}

    .rt-help-steps li {
        position: relative;
        padding: 0 0 12px 32px;
        font-size: 12px;
        line-height: 1.6;
        color: #2F3B4D;
        counter-increment: rt-help-step;
    }

        .rt-help-steps li::before {
            content: counter(rt-help-step);
            position: absolute;
            left: 0;
            top: 1px;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #E7EFF9;
            color: #125AAB;
            font-size: 10.4px;
            font-weight: 600;
        }

        .rt-help-steps li:last-child {
            padding-bottom: 0;
        }

        .rt-help-steps b {
            font-weight: 600;
            color: #1A2438;
        }

.rt-help-note {
    display: flex;
    gap: 10px;
    margin: 16px 0 0;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid #D6E2F2;
    border-left: 3px solid #1D6BD8;
    background: #EEF5FF;
    font-size: 11.4px;
    line-height: 1.55;
    color: #2F3B4D;
}

    .rt-help-note svg {
        flex: 0 0 auto;
        width: 15px;
        height: 15px;
        margin-top: 1px;
        color: #1D6BD8;
    }

    .rt-help-note.is-warn {
        border-color: #F3D9A4;
        border-left-color: #D9930D;
        background: #FFF7E6;
    }

        .rt-help-note.is-warn svg {
            color: #D9930D;
        }

.rt-help-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 24px;
    border-top: 1px solid #E8EEF6;
    background: #FBFCFE;
    font-size: 11.2px;
    color: #6B7A90;
}

    .rt-help-foot a {
        color: #1D6BD8;
        font-weight: 500;
        text-decoration: none;
    }

        .rt-help-foot a:hover {
            text-decoration: underline;
        }

.rt-help-foot-nav {
    display: flex;
    gap: 8px;
}

.rt-help-foot-btn {
    height: 30px;
    padding: 0 12px;
    border: 1px solid #E1E6EE;
    border-radius: 8px;
    background: #fff;
    color: #1A2438;
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: 11.2px;
    font-weight: 600;
    cursor: pointer;
}

    .rt-help-foot-btn:hover,
    .rt-help-foot-btn:focus-visible {
        border-color: #125AAB;
        color: #125AAB;
        outline: none;
    }

    .rt-help-foot-btn[disabled] {
        opacity: .45;
        cursor: default;
    }

@media (max-width: 719px) {
    .rt-help-card {
        height: min(640px, 100vh - 24px);
    }

    .rt-help-body {
        flex-direction: column;
    }

    .rt-help-nav {
        flex: 0 0 auto;
        flex-direction: row;
        gap: 6px;
        padding: 10px 12px;
        overflow-x: auto;
        border-right: 0;
        border-bottom: 1px solid #E8EEF6;
    }

    .rt-help-nav-btn {
        width: auto;
        white-space: nowrap;
        padding: 7px 10px;
    }

    .rt-help-content {
        padding: 16px 16px 20px;
    }

    .rt-help-foot {
        flex-direction: column;
        align-items: flex-start;
    }
}