@import '_content/Aeroplan.Shared/Aeroplan.Shared.yxaq0s360j.bundle.scp.css';

/* /Components/Account/Shared/AccountFrame.razor.rz.scp.css */
.account-page[b-oek998che5] {
    --ap-ink: #12202b;
    --ap-muted: #5a6b78;
    --ap-line: #d9dee2;
    --ap-page: #f6f6f4;
    --ap-field: #ffffff;
    --ap-accent: #12202b;
    --ap-panel: #0e1c26;
    --ap-panel-ink: #ffffff;
    --ap-panel-muted: rgba(255, 255, 255, 0.72);
    --ap-panel-line: rgba(255, 255, 255, 0.3);
    --ap-mark: #e8833a;
    --ap-error: #b3261e;
    --ap-error-soft: #fbeceb;

    display: grid;
    grid-template-columns: 1fr 1fr;
    /* The height actually on show. A phone browser's toolbars slide away and come back, and 100vh is
       the height without them, so a page that fits exactly still offers a scroll it has nothing to
       fill. The 100vh above it is what a browser too old for dvh falls back to. */
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--ap-page);
    color: var(--ap-ink);
}

.form-side[b-oek998che5] {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 40px;
    min-width: 0;
}

.form-column[b-oek998che5] {
    width: 100%;
    /* 420px at the root size a browser uses, and wider in the app, which raises that root to fit the
       tablet's density (native-client.css). Stated in px the column would not follow, and the larger
       type would only make the same lines shorter. */
    max-width: 26.25rem;
    margin: auto;
    padding: 24px 0;
}

.intro[b-oek998che5] {
    margin-bottom: 30px;
}

.eyebrow[b-oek998che5] {
    margin: 0 0 14px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ap-muted);
}

.title[b-oek998che5] {
    margin: 0 0 10px;
    font-size: 2.6rem;
    line-height: 1.1;
    font-weight: 700;
}

.subtitle[b-oek998che5] {
    margin: 0;
    line-height: 1.6;
    color: var(--ap-muted);
}

.page-footer[b-oek998che5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-size: 0.82rem;
    color: var(--ap-muted);
}

.page-footer nav[b-oek998che5] {
    display: flex;
    gap: 26px;
}

.page-footer a[b-oek998che5] {
    color: var(--ap-muted);
    text-decoration: none;
}

.page-footer a:hover[b-oek998che5] {
    color: var(--ap-ink);
    text-decoration: underline;
}

/* The panel: the photograph with a wash over it, dark enough at the bottom for the headline and the
   stages to read against the clouds whatever the crop lands on. */

.brand-side[b-oek998che5] {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 56px;
    background:
        linear-gradient(185deg, rgba(14, 28, 38, 0.1) 0%, rgba(14, 28, 38, 0.45) 45%, rgba(14, 28, 38, 0.92) 100%),
        url("/_content/Aeroplan.Shared/sign-in-sky.jpg") center / cover no-repeat,
        var(--ap-panel);
    color: var(--ap-panel-ink);
    overflow: hidden;
}

.brand-mark[b-oek998che5] {
    position: absolute;
    top: 42px;
    right: 48px;
    height: 30px;
    width: auto;
    filter: brightness(0) invert(1);
}

.pitch[b-oek998che5] {
    max-width: 640px;
}

.pitch-headline[b-oek998che5] {
    margin: 0 0 18px;
    font-size: 2.6rem;
    line-height: 1.15;
    font-weight: 700;
}

.pitch-text[b-oek998che5] {
    margin: 0 0 54px;
    max-width: 30em;
    line-height: 1.6;
    color: var(--ap-panel-muted);
}

.stages[b-oek998che5] {
    /* The marker is placed in percentages of this row, so this is what those percentages must mean. */
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
}

.stage[b-oek998che5] {
    position: relative;
    padding-top: 30px;
    text-align: center;
}

/* One hairline behind the row, drawn by the dots' own track rather than per item, so it does not
   stop short between the first and last stage. */

.stage[b-oek998che5]::before {
    content: "";
    position: absolute;
    top: 6px;
    left: 0;
    right: 0;
    border-top: 1px solid var(--ap-panel-line);
}

.stage:first-child[b-oek998che5]::before {
    left: 50%;
}

.stage:last-child[b-oek998che5]::before {
    right: 50%;
}

/* The loop runs on its own: the marker rests on a stage, moves to the next, and after the last one
   fades and picks up again at the first. It says nothing about where the person is in signing in —
   it describes the product, which is why it lives inside the panel marked aria-hidden. */

.stage-marker[b-oek998che5] {
    position: absolute;
    /* Above the stage dots: both are positioned in this row, and the dots come later in the markup,
       so without this the marker slides behind each one it lands on. */
    z-index: 1;
    top: 0;
    left: 12.5%;
    width: 13px;
    height: 13px;
    margin-left: -7px;
    border-radius: 50%;
    background: var(--ap-mark);
    box-shadow: 0 0 0 5px rgba(232, 131, 58, 0.16);
    animation: stage-travel-b-oek998che5 8s ease-in-out infinite;
}

/* Rests on a stage, moves to the next, and after the last one fades out, returns unseen and fades
   back in on the first. It begins and ends visible on purpose: a browser that pauses animations —
   a background tab does — then leaves the marker on a stage rather than leaving nothing at all. */

@keyframes stage-travel-b-oek998che5 {
    0%, 16% { left: 12.5%; opacity: 1; }
    26%, 40% { left: 37.5%; opacity: 1; }
    50%, 64% { left: 62.5%; opacity: 1; }
    74%, 88% { left: 87.5%; opacity: 1; }
    93% { left: 87.5%; opacity: 0; }
    94% { left: 12.5%; opacity: 0; }
    100% { left: 12.5%; opacity: 1; }
}

/* Someone who has asked for less movement gets a marker that simply rests on the first stage. */

@media (prefers-reduced-motion: reduce) {
    .stage-marker[b-oek998che5] {
        animation: none;
        opacity: 1;
    }
}

.stage-dot[b-oek998che5] {
    position: absolute;
    top: 0;
    left: 50%;
    width: 13px;
    height: 13px;
    margin-left: -7px;
    border: 1px solid var(--ap-panel-line);
    border-radius: 50%;
    background: var(--ap-panel);
}

.stage-name[b-oek998che5] {
    display: block;
    font-size: 1.45rem;
    font-weight: 700;
}

.stage-caption[b-oek998che5] {
    display: block;
    margin-top: 6px;
    font-size: 0.82rem;
    color: var(--ap-panel-muted);
}

/* The form itself is rendered by the page inside this frame. */

.form-column[b-oek998che5]  .field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

.form-column[b-oek998che5]  .field label {
    font-weight: 600;
    font-size: 0.92rem;
}

.form-column[b-oek998che5]  .field-box {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    border: 1px solid var(--ap-line);
    border-radius: 6px;
    background: var(--ap-field);
}

.form-column[b-oek998che5]  .field-box:focus-within {
    border-color: var(--ap-accent);
    box-shadow: 0 0 0 1px var(--ap-accent);
}

.form-column[b-oek998che5]  .field-box input {
    flex: 1;
    min-width: 0;
    padding: 13px 0;
    border: none;
    outline: none;
    background: none;
    font: inherit;
    color: var(--ap-ink);
}

.form-column[b-oek998che5]  .field-box input:-webkit-autofill,
.form-column[b-oek998che5]  .field-box input:-webkit-autofill:hover,
.form-column[b-oek998che5]  .field-box input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--ap-ink);
    -webkit-box-shadow: 0 0 0 1000px var(--ap-field) inset;
    box-shadow: 0 0 0 1000px var(--ap-field) inset;
    caret-color: var(--ap-ink);
    /* Chrome repaints its own colour on any state change, and only an endless transition outlasts it. */
    transition: background-color 100000s ease-in-out 0s;
}

.form-column[b-oek998che5]  .field-hint {
    font-size: 0.84rem;
    color: var(--ap-muted);
}

.form-column[b-oek998che5]  .reveal {
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    font-size: 0.88rem;
    color: var(--ap-muted);
    cursor: pointer;
}

.form-column[b-oek998che5]  .reveal:hover {
    color: var(--ap-ink);
}

.form-column[b-oek998che5]  .form-aside {
    display: flex;
    justify-content: flex-end;
    margin: -8px 0 22px;
    font-size: 0.88rem;
}

.form-column[b-oek998che5]  .form-aside a {
    color: var(--ap-muted);
    font-weight: 600;
    text-decoration: none;
}

.form-column[b-oek998che5]  .form-aside a:hover {
    color: var(--ap-ink);
    text-decoration: underline;
}

.form-column[b-oek998che5]  .choices {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.form-column[b-oek998che5]  .choice {
    display: flex;
    align-items: center;
    /* Stated rather than left to the default: a global button rule centres its content. */
    justify-content: flex-start;
    gap: 14px;
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--ap-line);
    border-radius: 8px;
    background: var(--ap-field);
    font: inherit;
    text-align: left;
    color: var(--ap-ink);
    cursor: pointer;
}

.form-column[b-oek998che5]  .choice:hover,
.form-column[b-oek998che5]  .choice:focus-visible {
    border-color: var(--ap-accent);
    box-shadow: 0 0 0 1px var(--ap-accent);
}

.form-column[b-oek998che5]  .choice-mark {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: var(--ap-accent);
    color: #ffffff;
    font-weight: 700;
}

.form-column[b-oek998che5]  .choice-name {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
}

.form-column[b-oek998che5]  .primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px 24px;
    border: none;
    border-radius: 6px;
    background: var(--ap-accent);
    color: #ffffff;
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.form-column[b-oek998che5]  .primary:disabled {
    background: #97a2ab;
    cursor: default;
}

.form-column[b-oek998che5]  .rules {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 20px;
    margin: -8px 0 22px;
    padding: 0;
    list-style: none;
    font-size: 0.86rem;
    color: var(--ap-muted);
}

.form-column[b-oek998che5]  .rules li {
    display: flex;
    align-items: center;
    gap: 10px;
}

.form-column[b-oek998che5]  .rule-mark {
    width: 15px;
    height: 15px;
    border: 1px solid var(--ap-line);
    border-radius: 50%;
}

.form-column[b-oek998che5]  .rules .rule--met {
    color: #2e7d4f;
}

.form-column[b-oek998che5]  .rules .rule--met .rule-mark {
    border-color: #2e7d4f;
    background: #2e7d4f linear-gradient(transparent, transparent);
    box-shadow: inset 0 0 0 2px var(--ap-field);
}

.form-column[b-oek998che5]  .note {
    margin: 0 0 22px;
    line-height: 1.6;
    color: var(--ap-muted);
}

.form-column[b-oek998che5]  .form-note {
    margin: 18px 0 0;
    font-size: 0.88rem;
    text-align: center;
    color: var(--ap-muted);
}

.form-column[b-oek998che5]  .form-note a {
    color: var(--ap-ink);
    font-weight: 600;
}

.form-column[b-oek998che5]  .altcha {
    margin: 0 0 22px;
    padding: 14px 16px;
    border: 1px solid var(--ap-line);
    border-radius: 8px;
    background: var(--ap-field);
}

.form-column[b-oek998che5]  .altcha-check {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
    cursor: pointer;
}

.form-column[b-oek998che5]  .altcha-check input {
    width: 20px;
    height: 20px;
    accent-color: var(--ap-accent);
}

.form-column[b-oek998che5]  .altcha-state {
    margin: 8px 0 0 32px;
    font-size: 0.84rem;
    color: var(--ap-muted);
}

.form-column[b-oek998che5]  .altcha[data-verified] .altcha-state {
    color: #2e7d4f;
}

.form-column[b-oek998che5]  .back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 26px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ap-muted);
    text-decoration: none;
}

.form-column[b-oek998che5]  .back-link:hover {
    color: var(--ap-ink);
}

.form-column[b-oek998che5]  .message {
    margin: 0 0 20px;
    padding: 12px 16px;
    border-radius: 6px;
    background: #eceef0;
    font-size: 0.9rem;
}

.form-column[b-oek998che5]  .message--error {
    background: var(--ap-error-soft);
    color: var(--ap-error);
}

@media (max-width: 1000px) {
    .account-page[b-oek998che5] {
        grid-template-columns: 1fr;
    }

    .form-side[b-oek998che5] {
        padding: 24px 16px;
        order: 1;
    }

    /* Stacked, the form is a 420px column in the middle of a much wider side, and a footer spanning
       that whole width leaves its two halves stranded at the far edges. Held to the column instead,
       so the page reads as one thing. Side by side it keeps the full width, which is the design. */
    .page-footer[b-oek998che5] {
        width: 100%;
        max-width: 26.25rem;
        margin: 0 auto;
    }

    .brand-side[b-oek998che5] {
        order: 2;
        padding: 36px 16px;
        min-height: 420px;
    }

    .brand-mark[b-oek998che5] {
        top: 24px;
        right: 16px;
        height: 22px;
    }

    .pitch-headline[b-oek998che5] {
        font-size: 1.9rem;
    }

    .pitch-text[b-oek998che5] {
        margin-bottom: 36px;
    }

    .stage-name[b-oek998che5] {
        font-size: 1.05rem;
    }

    .stage-caption[b-oek998che5] {
        font-size: 0.74rem;
    }

    .title[b-oek998che5] {
        font-size: 2rem;
    }

    .form-column[b-oek998che5]  .rules {
        grid-template-columns: 1fr;
    }
}

/* A phone held upright. The footer's two halves no longer fit on one line here, and the stage
   captions are down to about 80px a column, which is narrower than the words in them. */

@media (max-width: 560px) {
    .title[b-oek998che5] {
        font-size: 1.75rem;
    }

    .page-footer[b-oek998che5] {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .page-footer nav[b-oek998che5] {
        gap: 20px;
    }

    .stage-caption[b-oek998che5] {
        font-size: 0.68rem;
    }
}
/* /Components/Account/Shared/SecureAccountFrame.razor.rz.scp.css */
.secure-account[b-eni17lglv1] {
    --sa-sidebar: #0b1a24;
    --sa-sidebar-ink: #ffffff;
    --sa-sidebar-muted: rgba(255, 255, 255, 0.78);
    --sa-sidebar-line: rgba(255, 255, 255, 0.18);
    --sa-page: #f5f5f3;
    --sa-card: #ffffff;
    --sa-line: #dfe3e6;
    --sa-ink: #0b1a24;
    --sa-muted: #56636d;
    --sa-subtle: #eef0f1;
    --sa-accent: #0b1a24;
    --sa-disabled: #a0a8ad;
    --sa-success: #2e7d4f;
    --sa-success-soft: #e6f2ea;
    --sa-error: #b3261e;
    --sa-error-soft: #fbeceb;

    display: grid;
    grid-template-columns: 388px 1fr;
    min-height: 100vh;
    background: var(--sa-page);
    color: var(--sa-ink);
}

.sidebar[b-eni17lglv1] {
    display: flex;
    flex-direction: column;
    gap: 48px;
    padding: 40px 46px;
    background: var(--sa-sidebar);
    color: var(--sa-sidebar-ink);
}

.brand img[b-eni17lglv1] {
    height: 26px;
    width: auto;
    filter: brightness(0) invert(1);
}

.intro[b-eni17lglv1] {
    margin-top: 72px;
}

.eyebrow[b-eni17lglv1] {
    margin: 0 0 12px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sa-sidebar-muted);
}

.intro h1[b-eni17lglv1] {
    margin: 0 0 20px;
    font-size: 2.5rem;
    line-height: 1.1;
    font-weight: 700;
}

.intro p:last-child[b-eni17lglv1] {
    margin: 0;
    line-height: 1.6;
    color: var(--sa-sidebar-muted);
}

.steps[b-eni17lglv1] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 26px;
}

.step[b-eni17lglv1] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--sa-sidebar-muted);
}

.step + .step[b-eni17lglv1]::before {
    content: "";
    position: absolute;
    left: 16px;
    top: -26px;
    height: 26px;
    border-left: 1px solid var(--sa-sidebar-line);
}

.step-marker[b-eni17lglv1] {
    display: grid;
    place-items: center;
    width: 33px;
    height: 33px;
    border-radius: 50%;
    border: 1px solid var(--sa-sidebar-line);
    font-size: 0.85rem;
    font-weight: 600;
}

.step--done .step-marker[b-eni17lglv1] {
    background: #56636d;
    border-color: #56636d;
    color: var(--sa-sidebar-ink);
}

.step--done .step-label[b-eni17lglv1],
.step--current .step-label[b-eni17lglv1] {
    color: var(--sa-sidebar-ink);
    font-weight: 600;
}

.step--current .step-marker[b-eni17lglv1] {
    background: var(--sa-sidebar-ink);
    border-color: var(--sa-sidebar-ink);
    color: var(--sa-sidebar);
}

.pending-note[b-eni17lglv1] {
    margin: auto 0 0;
    display: flex;
    gap: 12px;
    padding: 16px 18px;
    border: 1px solid var(--sa-sidebar-line);
    border-radius: 6px;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--sa-sidebar-muted);
}

.pending-note b[b-eni17lglv1] {
    color: var(--sa-sidebar-ink);
}

.content[b-eni17lglv1] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.topbar[b-eni17lglv1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 40px;
    background: var(--sa-card);
    border-bottom: 1px solid var(--sa-line);
    font-size: 0.875rem;
    color: var(--sa-muted);
}

.signed-in[b-eni17lglv1] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.signed-in b[b-eni17lglv1] {
    color: var(--sa-ink);
    font-weight: 600;
}

.topbar-links[b-eni17lglv1] {
    display: flex;
    gap: 28px;
    flex-shrink: 0;
}

.topbar-links a[b-eni17lglv1] {
    color: var(--sa-muted);
    text-decoration: none;
    font-weight: 600;
}

.topbar-links a:hover[b-eni17lglv1] {
    color: var(--sa-ink);
}

/* Tight enough that the longest screen — the password step — fits a laptop window without scrolling. */

.main[b-eni17lglv1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 28px 24px;
}

.card[b-eni17lglv1] {
    width: 100%;
    max-width: 658px;
    padding: 30px 46px;
    background: var(--sa-card);
    border: 1px solid var(--sa-line);
    border-radius: 12px;
    box-shadow: 0 8px 28px rgba(11, 26, 36, 0.06);
}

.assistance[b-eni17lglv1] {
    margin: 16px 0 0;
    font-size: 0.875rem;
    color: var(--sa-muted);
    text-align: center;
}

/* The screens themselves are rendered by the pages inside the card. */

.card[b-eni17lglv1]  .card-icon {
    display: grid;
    place-items: center;
    width: 47px;
    height: 47px;
    margin-bottom: 22px;
    border-radius: 8px;
    background: var(--sa-subtle);
    color: var(--sa-muted);
    font-size: 1.2rem;
}

.card[b-eni17lglv1]  .card-icon--success {
    width: 62px;
    height: 62px;
    margin: 0 auto 26px;
    border-radius: 50%;
    background: var(--sa-success-soft);
    color: var(--sa-success);
    font-size: 1.5rem;
}

.card[b-eni17lglv1]  .card-eyebrow {
    margin: 0 0 10px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sa-muted);
}

.card[b-eni17lglv1]  .card-title {
    margin: 0 0 10px;
    font-size: 2rem;
    line-height: 1.2;
    font-weight: 700;
    color: var(--sa-ink);
}

.card[b-eni17lglv1]  .card-lead {
    margin: 0 0 22px;
    line-height: 1.6;
    color: var(--sa-muted);
}

.card[b-eni17lglv1]  .card--centred {
    text-align: center;
}

.card[b-eni17lglv1]  .back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 28px;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--sa-muted);
    cursor: pointer;
    text-decoration: none;
}

.card[b-eni17lglv1]  .back-link:hover {
    color: var(--sa-ink);
}

.card[b-eni17lglv1]  .message {
    margin: 0 0 20px;
    padding: 12px 16px;
    border-radius: 6px;
    background: var(--sa-subtle);
    color: var(--sa-ink);
    font-size: 0.9rem;
}

.card[b-eni17lglv1]  .message--error {
    background: var(--sa-error-soft);
    color: var(--sa-error);
}

.card[b-eni17lglv1]  .methods {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0 0 28px;
    padding: 0;
    border: none;
}

.card[b-eni17lglv1]  .method {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px 16px 16px;
    border: 1px solid var(--sa-line);
    border-radius: 8px;
    cursor: pointer;
}

.card[b-eni17lglv1]  .method:has(input:checked) {
    border-color: var(--sa-accent);
    box-shadow: 0 0 0 1px var(--sa-accent);
    background: #f7f8f9;
}

.card[b-eni17lglv1]  .method-icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 43px;
    height: 43px;
    border-radius: 6px;
    background: var(--sa-subtle);
    color: var(--sa-muted);
}

.card[b-eni17lglv1]  .method-text {
    flex: 1;
    min-width: 0;
}

.card[b-eni17lglv1]  .method-name {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
}

.card[b-eni17lglv1]  .method-description {
    display: block;
    margin-top: 4px;
    font-size: 0.875rem;
    color: var(--sa-muted);
}

.card[b-eni17lglv1]  .recommended {
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--sa-subtle);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--sa-muted);
}

.card[b-eni17lglv1]  .method input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: var(--sa-accent);
}

.card[b-eni17lglv1]  .actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
}

.card[b-eni17lglv1]  .policy {
    display: flex;
    gap: 14px;
    margin: 0 0 22px;
    padding: 16px 18px;
    border-left: 3px solid var(--sa-accent);
    border-radius: 0 6px 6px 0;
    background: var(--sa-subtle);
}

.card[b-eni17lglv1]  .policy-name {
    margin: 0 0 4px;
    font-weight: 600;
}

.card[b-eni17lglv1]  .policy-text {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--sa-muted);
}

.card[b-eni17lglv1]  .rules {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 24px;
    margin: -12px 0 22px;
    padding: 0;
    list-style: none;
    font-size: 0.875rem;
    color: var(--sa-muted);
}

.card[b-eni17lglv1]  .rules li {
    display: flex;
    align-items: center;
    gap: 10px;
}

.card[b-eni17lglv1]  .rule-mark {
    width: 15px;
    height: 15px;
    border: 1px solid var(--sa-line);
    border-radius: 50%;
}

.card[b-eni17lglv1]  .rules .rule--met {
    color: var(--sa-success);
}

.card[b-eni17lglv1]  .rules .rule--met .rule-mark {
    border-color: var(--sa-success);
    background: var(--sa-success) linear-gradient(transparent, transparent);
    box-shadow: inset 0 0 0 2px var(--sa-card);
}

.card[b-eni17lglv1]  .field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 22px;
}

.card[b-eni17lglv1]  .field label {
    font-weight: 600;
}

.card[b-eni17lglv1]  .field input {
    padding: 12px 14px;
    border: 1px solid var(--sa-line);
    border-radius: 6px;
    font: inherit;
    color: var(--sa-ink);
}

.card[b-eni17lglv1]  .field input:focus {
    outline: 2px solid var(--sa-accent);
    outline-offset: -1px;
}

.card[b-eni17lglv1]  .field--code input {
    max-width: 220px;
    letter-spacing: 0.3em;
}

.card[b-eni17lglv1]  .field-hint {
    font-size: 0.85rem;
    color: var(--sa-muted);
}

.card[b-eni17lglv1]  .primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 13px 34px;
    border: none;
    border-radius: 6px;
    background: var(--sa-accent);
    color: #ffffff;
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.card[b-eni17lglv1]  .primary--wide {
    width: 100%;
}

.card[b-eni17lglv1]  .setup-code {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
    padding: 18px;
    border: 1px solid var(--sa-line);
    border-radius: 8px;
    background: #f7f8f9;
}

.card[b-eni17lglv1]  .setup-code img {
    width: 140px;
    height: 140px;
    image-rendering: pixelated;
    background: #ffffff;
    border: 1px solid var(--sa-line);
}

.card[b-eni17lglv1]  .manual-key-label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.8rem;
    color: var(--sa-muted);
}

.card[b-eni17lglv1]  .manual-key {
    font-weight: 600;
    letter-spacing: 0.12em;
    word-break: break-all;
}

.card[b-eni17lglv1]  .resend {
    margin-top: 18px;
    font-size: 0.875rem;
    color: var(--sa-muted);
    text-align: center;
}

.card[b-eni17lglv1]  .resend button {
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    font-weight: 600;
    color: var(--sa-ink);
    cursor: pointer;
}

.card[b-eni17lglv1]  .summary {
    margin: 0 0 30px;
    border: 1px solid var(--sa-line);
    border-radius: 8px;
    text-align: left;
}

.card[b-eni17lglv1]  .summary div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
}

.card[b-eni17lglv1]  .summary div + div {
    border-top: 1px solid var(--sa-line);
}

.card[b-eni17lglv1]  .summary dt {
    font-size: 0.875rem;
    color: var(--sa-muted);
}

.card[b-eni17lglv1]  .summary dd {
    margin: 0;
    font-weight: 600;
}

.card[b-eni17lglv1]  .status-active::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 8px;
    border-radius: 50%;
    background: var(--sa-success);
}

.card[b-eni17lglv1]  .help h2 {
    margin: 28px 0 8px;
    font-size: 1.1rem;
}

.card[b-eni17lglv1]  .help p {
    margin: 0;
    line-height: 1.6;
    color: var(--sa-muted);
}

@media (max-width: 900px) {
    .secure-account[b-eni17lglv1] {
        grid-template-columns: 1fr;
    }

    .sidebar[b-eni17lglv1] {
        gap: 20px;
        padding: 24px 16px;
    }

    .intro[b-eni17lglv1] {
        margin-top: 0;
    }

    .brand img[b-eni17lglv1] {
        height: 20px;
    }

    .intro h1[b-eni17lglv1] {
        font-size: 1.75rem;
    }

    .intro p:last-child[b-eni17lglv1] {
        display: none;
    }

    .steps[b-eni17lglv1] {
        flex-direction: row;
        gap: 24px;
    }

    .step + .step[b-eni17lglv1]::before {
        display: none;
    }

    .pending-note[b-eni17lglv1] {
        margin: 0;
    }

    .topbar[b-eni17lglv1] {
        padding: 14px 16px;
    }

    .topbar-links[b-eni17lglv1] {
        gap: 16px;
    }

    .main[b-eni17lglv1] {
        padding: 24px 16px;
    }

    .card[b-eni17lglv1] {
        padding: 28px 20px;
    }

    .card[b-eni17lglv1]  .card-title {
        font-size: 1.6rem;
    }

    .card[b-eni17lglv1]  .setup-code {
        flex-direction: column;
        align-items: flex-start;
    }

    .card[b-eni17lglv1]  .rules {
        grid-template-columns: 1fr;
    }
}

/* MudIcon renders its own element, which this component's scope does not reach without ::deep. */

.secure-account[b-eni17lglv1]  .mud-icon-root {
    width: 1.25em;
    height: 1.25em;
    font-size: inherit;
    flex-shrink: 0;
    vertical-align: middle;
}

.topbar-links a[b-eni17lglv1] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.pending-note[b-eni17lglv1]  .mud-icon-root {
    margin-top: 1px;
}