:root {
    --login-page-primary: var(--cp-primary-400);
}

html {
    position: relative;
    min-height: 100%;
}

body {
    min-height: 100vh;
}

/* ===== Layout elements used by LoginLayout ===== */
/* Figma "Legal & Contract": a 188x40 pill at top/right 24, Open Sans 400 14/20 on #FAFBFB. */
.legal {
    position: absolute;
    top: 24px;
    right: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 8px 24px;
    background: #FAFBFB;
    border: 1px solid #D7DBDF;
    border-radius: 100px;
    font-family: 'Open Sans', var(--cp-font-family), sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #5E6470;
}

    .legal > * {
        cursor: pointer;
    }

.footer-wrapper {
    width: 100%;
    position: absolute;
    bottom: 4px;
    padding: 0 12px;
}

#legal-dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(52, 64, 84, 0.70);
    /* Background blur/md */
    backdrop-filter: blur(8px);
    width: 100vw;
    min-width: 100vw;
    max-width: 100vw;
    height: 100vh;
    min-height: 100vh;
    max-height: 100vh;
    z-index: 9999;
}

#legal-dialog {
    position: absolute;
    width: 80%;
    max-width: 600px;
    height: 80%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 24px;
    border-radius: 12px;
    background: var(--Base-White, #FFF);
    box-shadow: 0 20px 24px -4px rgba(16, 24, 40, 0.08), 0 8px 8px -4px rgba(16, 24, 40, 0.03);
    outline: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    z-index: 9999;
}

    #legal-dialog img {
        width: 24px;
        height: 24px;
    }

.version {
    color: var(--cp-text-50);
}

/* ===== Buttons ===== */
/* ===== Buttons =====
   Every button on this page is a 100px pill in Figma; the per-variant rules below carry the
   height, padding and type, so no fixed height here. */
.login-button {
    width: 100% !important;
    border: 0;
    border-radius: 100px !important;
    text-decoration: none;
}

/* Signin: 380x47, padding 14/18, Inter 600 16/19 on #008D9E. */
.login-button--primary {
    height: var(--cp-btn-h, 47px);
    padding: 14px 18px;
    background: var(--cp-brand-login-btn-bg, var(--login-page-primary)) !important;
    color: var(--cp-brand-login-btn-text, #FFFFFF) !important;
    border: 0;
    font-family: 'Inter', var(--cp-font-family), sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 19px;
}

    .login-button--primary:hover,
    .login-button--primary:active,
    .login-button--primary:focus,
    .login-button--primary:disabled {
        background: var(--cp-brand-login-btn-bg, var(--login-page-primary)) !important;
    }

/* Request a Demo: 380x48, white on a 1px #B5B7BD pill, Open Sans 600 16/20. */
.login-button--secondary {
    height: var(--cp-btn2-h, 48px);
    padding: 8px 32px;
    background: #FFFFFF !important;
    color: #0F172A !important;
    border: 1px solid #B5B7BD;
    font-family: 'Open Sans', var(--cp-font-family), sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
}

/* The identity-provider submit is an OUTLINED teal pill, not a filled one. Figma specifies it
   404 wide where every other control in the column is 380 - both the spec and the rendered
   design agree, so it is reproduced here rather than normalised to 380. */
#externalProviderSignInButton.login-button {
    width: 404px !important;
    max-width: 100%;
    height: var(--cp-btn-h, 47px);
    padding: 14px 18px;
    background: #FFFFFF !important;
    color: var(--cp-brand-login-outline-btn, #008D9E) !important;
    border: 1px solid var(--cp-brand-login-outline-btn, #008D9E);
}

/* ===== Page grid ===== */
.cp-login-page {
    /* ===== Vertical rhythm =====
       Figma draws this page at 1440x900. A real browser viewport is shorter than 900 - at
       125% display scaling a 896px-tall screen leaves only ~567 CSS px - so the column as
       drawn cannot fit and the right panel scrolls.

       Every gap below is "the Figma number, minus a share of however far the viewport falls
       short of 900", floored so the proportions stay readable. At >=900 the subtrahend is
       negative, clamp() pins each value to its Figma maximum, and the page is identical to
       the design. The shares are weighted so they all reach their floor together at ~560px,
       which is where the whitespace runs out.

       Only WHITESPACE compresses. Controls keep their Figma heights at every viewport: when
       the gaps run out the panel scrolls rather than shrinking anything you can see. The two
       bands below are reserved outright for the same reason - they are what keeps the title
       off the Legal chip and the last button off the copyright line, and because they are
       panel padding they hold at both ends of the scroll, not just when the card happens to
       fit. */
    --cp-short: calc(900px - 100vh);

    --cp-gap-card: clamp(8px, calc(24px - var(--cp-short) * 0.047), 24px);
    --cp-gap-fields: clamp(10px, calc(24px - var(--cp-short) * 0.041), 24px);
    --cp-gap-form: clamp(14px, calc(40px - var(--cp-short) * 0.0765), 40px);
    --cp-pad-form: clamp(0px, calc(16px - var(--cp-short) * 0.047), 16px);
    /* dropdown -> IdP submit. The most visible gap on the card, so it barely compresses. */
    --cp-gap-external: clamp(20px, calc(32px - var(--cp-short) * 0.025), 32px);
    --cp-gap-label: clamp(6px, calc(8px - var(--cp-short) * 0.006), 8px);
    --cp-mb-title: clamp(4px, calc(12px - var(--cp-short) * 0.0235), 12px);
    --cp-mv-rule: clamp(0px, calc(8px - var(--cp-short) * 0.0235), 8px);

    --cp-ctl-h: 46px;
    --cp-btn-h: 47px;
    --cp-btn2-h: 48px;

    /* The "Legal & Contracts" chip is absolutely positioned at top:24 and is 40 tall, so it
       owns the band y=0..64 across the top of the page. Below 1440 wide it also reaches into
       the card's column, and the design gets away with that only because at 900 tall the
       centred card starts at y=107, well clear of it. Centre the same card in a 567px viewport
       and its top lands at y=21 - the chip sits on "Welcome to CipherPanel".

       So reserve the band as panel padding and centre the card BELOW the chip instead. Both
       bands reach full size by ~780, which is the last height at which the card still fits
       inside them; past that point the panel scrolls and the band IS the card's top offset,
       so it has to be the full 72 by then rather than still tapering. */
    --cp-chip-band: clamp(24px, calc(var(--cp-short) * 0.6), 72px);

    /* Same problem at the other end. .footer-wrapper is absolute at bottom:4 and 19 tall, and
       html is the containing block, so on this page - where the document is exactly 100vh -
       it sits in the last 23px of the viewport. At 567 tall the card's last button ended at
       544 and the copyright line starts at 544, so they printed on top of each other. Reserve
       that strip plus a gap. As panel padding it is inside the scrollable area, so scrolling to
       the very bottom still leaves the gap - the last button cannot reach the copyright. */
    --cp-footer-band: clamp(24px, calc(var(--cp-short) * 0.35), 40px);

    min-height: 100vh;
    height: 100vh;
    max-height: 100vh;
    display: grid;
    grid-template-columns: 708fr 732fr;
    background: #ffffff;
    font-family: 'Inter';
    overflow: hidden;
}

/* ===== Left panel ===== */
/* ===== Left panel =====
   Laid out as the Figma "Cover" frame (708x900). The stage keeps that aspect ratio and every child
   is placed as a PERCENTAGE of it, so the logo, art, copy and dots scale together and hold their
   relative positions. The previous build sized the art to height:100% inside an overflow:hidden
   box, which cropped it whenever the panel was not the design's aspect ratio. */
.cp-login-left {
    background: var(--cp-brand-login-panel-bg, linear-gradient(180deg, #033940 0%, #007685 100%));
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    height: 100vh;
    max-height: 100vh;
}

.cp-login-stage {
    position: relative;
    /* Fit the 708x900 frame inside the panel without cropping it. */
    width: min(100%, calc(100vh * 708 / 900));
    aspect-ratio: 708 / 900;
    max-height: 100vh;
    /* cqw below resolves against this, so type scales with the artwork. */
    container-type: inline-size;
}

/* Figma "background" discs: white gradients fading to transparent. */
.cp-login-glow {
    position: absolute;
    display: block;
    border-radius: 50%;
    pointer-events: none;
}

.cp-login-glow--lg {
    left: 12.994%;
    top: 15.778%;
    width: 74.011%;
    height: 58.222%;
    background: linear-gradient(179.94deg, rgba(255, 255, 255, 0.06) -5.48%, rgba(255, 255, 255, 0) 96.9%);
}

.cp-login-glow--sm {
    left: 24.011%;
    top: 24.444%;
    width: 51.836%;
    height: 40.778%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) -25.29%, rgba(255, 255, 255, 0) 97.21%);
}

/* Logo: 314.59x50 at (197, 127) */
.cp-login-brand {
    position: absolute;
    left: 27.824%;
    top: 14.111%;
    width: 44.433%;
    height: 5.556%;
    display: flex;
    align-items: flex-end;
}

/* Artwork frame. The SVG viewBox is padded to 600x480 around the Figma 520x420 illustration
   (40 horizontal, 30 vertical) so the rotated cards and their drop shadows are not clipped.
   This box is the padded frame, positioned so the inner 520x420 still lands at (94, 221). */
.cp-login-art {
    position: absolute;
    left: 7.627%;
    top: 21.222%;
    width: 84.746%;
    height: 53.333%;
}

/* The slide SVG is inlined (see login.js) so it inherits the page's Inter webfont;
   an <img> would render it in secure static mode, where webfonts never load. */
.cp-login-art > svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Copy block: 558 wide at (75, 714), 12px gap. Anchored by its BOTTOM edge (y=800, 18px above the
   dots at y=818) rather than its top, so a title or subtitle that wraps to extra lines grows upward
   instead of running into the dots. At the Figma's two-line copy it lands exactly at y=714. */
.cp-login-copy {
    position: absolute;
    left: 10.593%;
    bottom: 11.111%;
    width: 78.814%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.695cqw;
    text-align: center;
}

.cp-login-left-title {
    margin: 0;
    font-family: 'Inter', var(--cp-font-family), sans-serif;
    font-weight: 700;
    font-size: 24px;
    font-size: 3.39cqw;
    line-height: 125%;
    letter-spacing: 0.2px;
    color: #FFFFFF;
}

.cp-login-left-subtitle {
    margin: 0;
    font-family: 'Inter', var(--cp-font-family), sans-serif;
    font-weight: 400;
    font-size: 14px;
    font-size: 1.977cqw;
    line-height: 160%;
    color: #FFFFFF;
}

/* Carousel indicator: 10px dots 16px apart, at y=818 */
.cp-login-dots {
    position: absolute;
    left: 0;
    right: 0;
    top: 90.889%;
    display: flex;
    justify-content: center;
    gap: 16px;
    gap: 2.26cqw;
}

    .cp-login-dots .dot {
        width: 10px;
        height: 10px;
        width: 1.412cqw;
        height: 1.412cqw;
        border-radius: 50%;
        border: 0;
        padding: 0;
        background: rgba(255, 255, 255, 0.2);
        cursor: pointer;
        transition: background .2s ease;
    }

        .cp-login-dots .dot.active {
            background: var(--cp-brand-login-dot-active, #00B1C7);
        }
/* ===== Right panel =====
   Figma lays this out on a fixed 1440x900 page: a 732-wide column with 164px side padding,
   which puts the 380 card flush against the left padding edge. That only reads as "centred"
   at exactly 1440 - on a wider screen flex-start strands the card on the left - so the card
   is centred here instead. At 1440 that lands within 12px of the Figma position. */
.cp-login-right {
    display: flex;
    /* Plain "center" would park the card's top ABOVE the scroll origin once it overflows, and
       nothing can scroll up to it. "safe center" centres while it fits and falls back to
       flex-start when it does not. The unprefixed line below is the fallback for engines that
       do not parse the safe keyword. */
    align-items: center;
    align-items: safe center;
    justify-content: center;
    padding: var(--cp-chip-band, 24px) 24px var(--cp-footer-band, 24px);
    margin: 0;
    overflow-y: auto;
    max-height: 100vh;
}

/* Figma card-body: 380 wide, 24px between blocks. */
.cp-login-card {
    width: 380px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--cp-gap-card, 24px);
}

.cp-login-header {
    text-align: center;
    margin: 0;
}

.cp-login-title {
    margin: 0 0 var(--cp-mb-title, 12px);
    font-family: 'Inter', var(--cp-font-family), sans-serif;
    font-size: 28px;
    font-style: normal;
    font-weight: 600;
    color: #27272E;
    line-height: 38px;
}

.cp-login-tagline {
    margin: 0;
    font-family: 'Inter', var(--cp-font-family), sans-serif;
    font-feature-settings: 'salt' on;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    color: #718096;
    line-height: 26px;
}

/* top banner error */
.cp-login-error {
    margin: 0 0 12px;
    color: #b42318;
    font-size: 13px;
}

/* ===== Form ===== */
/* Figma Form: 16px 0 padding, 24px between the field block and the submit button. */
.cp-login-form {
    display: flex;
    flex-direction: column;
    gap: var(--cp-gap-form, 40px);
    padding: var(--cp-pad-form, 16px) 0 0;
    margin: 0;
}

.cp-login-field-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--cp-gap-fields, 24px);
    margin: 0;
}

/* input/large: 20px label, 8px gap, 46px input. */
.cp-login-field {
    display: flex;
    flex-direction: column;
    gap: var(--cp-gap-label, 8px);
    position: relative;
    margin: 0;
}

/* Figma form title: Open Sans 600 14/20, text-900. */
.cp-login-label {
    font-family: 'Open Sans', var(--cp-font-family), sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
    color: #060A12;
}

/* Figma Input: 380x46, padding 10px 12px, radius 6, two-layer shadow, Open Sans 14/20. */
.cp-login-input,
.cp-login-select,
.cp-dd-btn {
    box-sizing: border-box;
    width: 100%;
    height: var(--cp-ctl-h, 46px);
    border: 0;
    border-radius: 6px;
    box-shadow: 0px 1px 2px rgba(50, 50, 71, 0.08), 0px 0px 1px rgba(50, 50, 71, 0.2);
    padding: 10px 12px;
    font-family: 'Open Sans', var(--cp-font-family), sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    outline: none;
    background: #FFFFFF;
    color: #0F172A;
}

.cp-select-wrap {
    position: relative;
    width: 100%;
}

/* hide native arrow + standardize appearance */
.cp-login-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 44px; /* space for chevron */
    cursor: pointer;
}

/* custom chevron */
.cp-select-wrap::after {
    content: "";
    position: absolute;
    right: 14px; /* controls how far from the right */
    top: 50%;
    width: 10px;
    height: 10px;
    transform: translateY(-50%) rotate(45deg);
    border-right: 2px solid #94a3b8;
    border-bottom: 2px solid #94a3b8;
    pointer-events: none;
}

/* optional: hover/focus polish */
.cp-login-select:hover {
    border-color: #cbd5e1;
}

.cp-login-select:focus {
    border-color: #6bd3dd;
    box-shadow: 0 0 0 4px rgba(107, 211, 221, 0.25);
}

/* #externalProviderDropdown carried margin-bottom: 22px - the hand-made gap from when the
   submit was a child of this field. The submit is a sibling now and .cp-external form supplies
   the Figma 32px, so the margin would double up. This is the "phantom 22px" the field box used
   to show. */

.cp-login-input::placeholder,
.cp-dd-value.is-placeholder {
    color: #B5B7BD;
}

.cp-login-input:focus,
.cp-login-select:focus {
    border-color: #6bd3dd;
    box-shadow: 0 0 0 4px rgba(107, 211, 221, 0.25);
}

/* password eye */
.cp-login-input-with-icon {
    position: relative;
    width: 100%;
}

.cp-login-input-pad-right {
    padding-right: 44px;
}

.cp-eye {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border: 0;
    background: transparent;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
}

    .cp-eye svg {
        display: block;
    }

    .cp-eye:focus {
        outline: none;
    }

    .cp-eye:focus-visible {
        outline: 2px solid rgba(0,0,0,0.2);
        border-radius: 8px;
    }

.cp-eye-icon {
    display: inline-flex;
}

.cp-eye-hide {
    display: none;
}

.cp-eye.is-on .cp-eye-show {
    display: none;
}

.cp-eye.is-on .cp-eye-hide {
    display: inline-flex;
}

/* ===== Field-level validation UI ===== */
.cp-login-field-error {
    position: absolute;
    left: 0;
    top: calc(100% - 2px);
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-2px);
    transition: opacity .15s ease, transform .15s ease;
}

.cp-login-field.has-error .cp-login-field-error {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.cp-login-field.has-error {
    margin-bottom: 46px;
}

.cp-login-error-icon {
    width: 13px;
    height: 13px;
    border-radius: 999px;
    background: #d32f2f;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
}

.cp-login-validation {
    color: #b42318;
    font-size: 13px;
    line-height: 18px;
    margin: 0;
}

.cp-login-field.has-error .cp-login-label {
    color: #b42318;
}

.cp-login-field.has-error .cp-login-input,
.cp-login-input.invalid {
    border: 1px solid #b42318 !important;
    box-shadow: 0 0 0 1px #b42318, 0 1px 2px 0 rgba(180, 35, 24, 0.12) !important;
    outline: none !important;
    background-color: #fff5f5 !important;
}

    .cp-login-field.has-error .cp-login-input:focus,
    .cp-login-input.invalid:focus {
        border-color: #b42318 !important;
        box-shadow: 0 0 0 4px rgba(180, 35, 24, 0.18) !important;
        outline: none !important;
    }

.cp-external form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ===== Responsive ===== */
@media (max-width: 1024px) {
    .cp-login-page {
        grid-template-columns: 1fr;
    }

    .cp-login-left {
        display: none;
    }

    .cp-login-right {
        padding: 60px 18px 40px 18px;
    }

    .version {
        color: inherit;
    }
}

/* ===== Carousel animation =====
   Dot styling lives with the stage layout above; a second copy here used to win on source order
   and knock the dots out of their absolute position. */

.cp-carousel-text,
.cp-carousel-media {
    will-change: opacity, transform;
}

.cp-carousel-fade-out {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 220ms ease, transform 220ms ease;
}

.cp-carousel-fade-in {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 260ms ease, transform 260ms ease;
}

#cp-carousel-img.cp-carousel-fade-out {
    transform: translateY(6px) scale(0.99);
}

#cp-carousel-img.cp-carousel-fade-in {
    transform: translateY(0) scale(1);
}

.cp-carousel-title {
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 125% !important;
    letter-spacing: 0.2px !important;
}

.cp-carousel-subtitle {
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 160% !important;
    opacity: 0.7 !important;
}

/* success state */
.cp-demo-success {
    display: flex;
    gap: 14px;
    align-items: center;
    margin: 18px 8px 24px 8px;
}

.cp-demo-success-title {
    font-size: 18px;
    font-weight: 600;
    color: #111827;
}

.cp-demo-success-subtitle {
    font-size: 14px;
    color: #4b5563;
}

/* ===== Request Demo compact layout (no scrolling) ===== */
.cp-demo-page {
    min-height: 100vh;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    /*padding: 56px 24px;*/
    font-family: 'Inter';
}

.cp-demo-main {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 24px;
}

.cp-demo-card {
    width: max-content;
    max-width: 80%;
    align-items: center;
    display: flex;
    flex-direction: column;
}

/* logo */
.cp-demo-brand {
    display: flex;
    width: 100%;
    height: 80px;
    padding: 0 24px;
    align-items: center;
    align-self: stretch;
    background: var(--Primary-White, #FFF);
    box-shadow: 0 6px 30px 0 rgba(0, 0, 0, 0.06);
}

.cp-demo-logo {
    display: flex;
    align-items: center;
    justify-content: center;
}

.cp-demo-header {
    text-align: center;
    margin-bottom: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 40px;
}

.cp-demo-title {
    color: var(--Text-Heading-Dark, #27272E);
    text-align: center;
    /* Sm-30/Bold-30 */
    font-family: "Open Sans";
    font-size: 30px;
    font-style: normal;
    font-weight: 700;
    line-height: 38px; /* 126.667% */
}


.cp-demo-subtitle {
    color: var(--600, #718096);
    text-align: center;
    font-feature-settings: 'salt' on;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 162.023%; /* 25.924px */
}

.cp-demo-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 50px;
}

.cp-demo-fields-row-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.cp-demo-fields-row-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.cp-demo-fields-row-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

@media (max-width: 1024px) {
    .cp-demo-fields-row-4 {
        grid-template-columns: repeat(1, 1fr);
    }

    .cp-demo-fields-row-3 {
        grid-template-columns: repeat(1, 1fr);
    }

    .cp-demo-fields-row-2 {
        grid-template-columns: repeat(1, 1fr);
    }
}

.cp-demo-intended-use {
    display: flex;
    justify-content: center;
    width: 100%;
}

    .cp-demo-intended-use cp-field__control {
        display: flex;
        justify-content: center;
        width: 100%;
    }

    .cp-demo-intended-use .cp-field__label {
        width: 100%;
        justify-content: center;
        color: var(--Foundation-Text-text-500, #0F172A);
        text-align: center;
        /* Text md-16/Bold-16 */
        font-family: "Open Sans";
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: 24px; /* 150% */
    }

.cp-demo-intended-use-radio {
    display: flex;
    justify-content: center;
    width: 100%;
    gap: 12px;
}

    .cp-demo-intended-use-radio .cp-radio-item {
        width: 200px;
        padding: 16px;
        height: max-content;
        border-radius: 4px !important;
    }

.cp-demo-radio {
    display: flex;
    flex-direction: row;
    gap: 0;
}

    .cp-demo-radio .cp-radio-item-left {
        border-radius: 4px 0 0 4px !important;
    }

    .cp-demo-radio .cp-radio-item-right {
        border-radius: 0 4px 4px 0 !important;
    }

.grecaptcha-badge {
    bottom: 36px !important;
}

@media (max-width: 1024px) {
    .grecaptcha-badge {
        bottom: 24px !important;
    }
}

/* Radio pills — error state */
.cp-login-field.has-error .cp-radio-item,
.cp-login-field.cp-field--error .cp-radio-item {
    border-color: #b42318 !important;
    background: #fff5f5 !important;
}

    .cp-login-field.has-error .cp-radio-item .cp-radio-label::before,
    .cp-login-field.cp-field--error .cp-radio-item .cp-radio-label::before {
        border-color: #b42318 !important;
    }

    .cp-login-field.has-error .cp-radio-item .cp-radio-label,
    .cp-login-field.cp-field--error .cp-radio-item .cp-radio-label {
        color: #b42318 !important;
    }

    /* keep the selected-pill highlight visible even inside an error wrapper */
    .cp-login-field.has-error .cp-radio-item:has(input[type="radio"]:checked),
    .cp-login-field.cp-field--error .cp-radio-item:has(input[type="radio"]:checked) {
        background: rgba(180, 35, 24, 0.08) !important;
    }

/* The shared .cp-divider carries margin:32px 0; inside this card the 24px card gap already
   supplies most of that, so trim it to land on the Figma 32px either side, and use the
   design token colour. */
.cp-login-card .cp-divider {
    margin: var(--cp-mv-rule, 8px) 0;
    background: #E2E8F0;
}

/* Figma: 32px between the identity-provider field and its submit. */
.cp-external form {
    gap: var(--cp-gap-external, 32px);
}

/* The field used to be pinned to an explicit height here, to hide what looked like ~22px of
   phantom box. It was not phantom: the submit button was a CHILD of this field, so the field
   measured taller than label+dropdown. Pinning it made the box SHORTER than what it painted,
   the card's computed height lost ~43px, and the button spilled over the copyright line while
   the layout believed it fit. The button is a sibling now (see Login.razor) and this field
   sizes to its own content, so no height belongs here. */