.public-site {
    color-scheme: light;
    --colorBrandBackground: #0f6cbd;
    --colorBrandBackgroundHover: #115ea3;
    --colorBrandBackground2: #ebf3fc;
    --colorNeutralBackground1: #fff;
    --colorNeutralBackground2: #fafafa;
    --colorNeutralForeground1: #242424;
    --colorNeutralForeground2: #424242;
    --colorPaletteDarkOrangeForeground1: #b6480e;
    --colorPaletteGreenForeground1: #107c10;
    --site-blue: var(--colorBrandBackground, #0f6cbd);
    --site-blue-dark: var(--colorBrandBackgroundHover, #115ea3);
    --site-ink: #242424;
    --site-muted: #424242;
    --site-line: #e4eaf2;
    --site-max-width: 1240px;
    --site-gutter: clamp(20px, 3vw, 40px);
    color: var(--site-ink);
    background: #fff;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    font-family: var(--fontFamilyBase);
    font-size: 1rem;
    line-height: 1.6;
}
.public-site fluent-link { color: var(--site-blue); text-underline-offset: 4px; }
.public-site fluent-link:focus-visible, .public-site button:not([slot="control"]):focus-visible, .public-site summary:focus-visible { outline: 3px solid #0f6cbd; outline-offset: 5px; }
.public-site .site-header { display: block; padding: 0; background: #fff; border-bottom: 0; }
.landing-hero, .getting-started { width: 100%; max-width: var(--site-max-width); margin-inline: auto; padding-inline: var(--site-gutter); }
.hero-help { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; padding-block: 8px; line-height: 1.5; }
.public-site .site-main { display: block; max-width: none; min-height: 0; margin: 0; padding: 0; flex: 1; }
.landing-hero { margin-bottom: 24px; padding-block: 52px 48px; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(32px, 4vw, 64px); align-items: center; background: var(--colorBrandBackground2, #ebf3fc); border-radius: var(--borderRadiusXLarge, 8px); }
.hero-copy { padding-bottom: 8px; }
.hero-eyebrow, .welcome-eyebrow, .section-eyebrow, .information-eyebrow { font-size: var(--fontSizeBase200, .85rem); line-height: var(--lineHeightBase200, 1.5); font-weight: var(--fontWeightSemibold, 600); letter-spacing: .1em; text-transform: uppercase; }
.hero-eyebrow { display: flex; align-items: center; gap: 9px; margin: 0 0 26px; color: #37688e; }
.hero-eyebrow > span { width: 21px; height: 2px; background: #5a9bd0; }
.hero-copy h1 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: var(--fontSizeBase900, calc(32rem / 9)); line-height: var(--lineHeightBase900, 1.15); letter-spacing: -.01em; font-weight: var(--fontWeightRegular, 400); }
.hero-copy h1 > span { display: block; margin-top: 6px; color: var(--colorPaletteDarkOrangeForeground1); }
.hero-copy h1[tabindex="-1"]:focus { outline: none; }
.hero-description { max-width: 475px; margin: 25px 0 23px; color: var(--site-muted); font-size: var(--fontSizeBase500, calc(4rem / 3)); line-height: 1.5; }
.hero-help { gap: 8px; font-size: 0.89rem; font-weight: 650; }
.public-site .welcome-card { min-width: 0; }
.welcome-eyebrow { margin: 0 0 10px; color: #526178; }
.welcome-card h2 { margin: 0 0 12px; font-size: var(--fontSizeBase700, calc(20rem / 9)); letter-spacing: -.025em; line-height: var(--lineHeightBase700, 1.25); font-weight: var(--fontWeightMedium, 500); color: var(--colorNeutralForeground1, #242424); }
.welcome-description { margin: 0 0 24px; color: var(--site-muted); font-size: var(--fontSizeBase300, 1rem); line-height: var(--lineHeightBase300, 1.6); }
.account-action-form { margin: 0 0 10px; }
.public-site .account-action { display: flex; justify-content: flex-start; width: 100%; margin: 0; }
.public-site [hidden] { display: none; }
.account-action-with-end-icon { --colorTransparentBackgroundHover: var(--colorBrandBackground2); }
.account-action-with-end-icon::part(content) { flex: 1; justify-content: space-between; }
.welcome-security { display: flex; align-items: flex-start; gap: 9px; margin-top: 25px; padding-top: 20px; border-top: 1px solid #edf0f5; }
.welcome-security svg { flex: 0 0 1.33rem; width: 1.33rem; height: 1.33rem; margin-top: calc((1lh - 1.33rem) / 2); color: var(--colorPaletteGreenForeground1); }
.welcome-security p { margin: 0; font-size: 0.89rem; font-weight: 600; line-height: 1.8; color: #57687e; }
.welcome-security p span { color: #526178; font-weight: 400; }
.welcome-card > fluent-link:last-child { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; margin: 15px 0 0 calc(1.33rem + 9px); padding-block: 8px; font-size: 0.89rem; font-weight: 550; line-height: 1.5; }
.account-unavailable { color: #596579; font-size: 0.89rem; }
.getting-started { margin-bottom: 40px; padding-block: 28px 0; }
.getting-started-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.section-eyebrow { margin: 0; color: #526178; }
.getting-started-heading h2 { margin: 0; color: var(--colorNeutralForeground1, #242424); }
.getting-started-steps { display: grid; grid-template-columns: repeat(3, 1fr); }
.getting-started-step { display: flex; align-items: flex-start; gap: 13px; padding: 2px 25px; border-left: 1px solid var(--site-line); }
.getting-started-step:first-child { padding-left: 0; border-left: 0; }
.getting-started-step:last-child { padding-right: 0; }
.step-number { display: grid; flex: 0 0 31px; place-items: center; height: 31px; border: 1px solid #000; border-radius: 7px; color: #fff; background: #000; font-size: 0.89rem; font-weight: 650; }
.getting-started-step h3 { margin: 0 0 6px; }
.getting-started-step p { margin: 0; color: #526178; font-size: var(--fontSizeBase300, 1rem); line-height: var(--lineHeightBase300, 1.6); }
.information-page { max-width: var(--site-max-width); margin: 50px auto 65px; padding-inline: var(--site-gutter); }
.information-page > * { max-width: 820px; }
.information-page h1 { margin: 14px 0 20px; }
.information-eyebrow { margin: 0; color: var(--site-blue); }
.information-intro { font-size: var(--fontSizeBase500, calc(4rem / 3)); line-height: 1.5; color: var(--site-muted); }
.information-section { margin: 28px 0; }
.information-callout { padding: 18px 22px; border-left: 3px solid var(--site-blue); background: #f0f6fc; border-radius: 0 6px 6px 0; }
@media (max-width: 1100px) {
    .landing-hero { padding-block: 42px 40px; }
}
@media (max-width: 750px) {
    .landing-hero { grid-template-columns: 1fr; gap: 30px; padding-block: 32px; }
    .hero-copy { padding: 0; }
    .hero-eyebrow { margin-bottom: 21px; }
    .hero-description { max-width: 550px; margin-top: 18px; }
    .desktop-break { display: none; }
    .public-site .welcome-card { max-width: 560px; }
    .getting-started { margin-bottom: 32px; }
    .getting-started-heading { align-items: flex-start; flex-direction: column; gap: 10px; }
    .getting-started-steps { grid-template-columns: 1fr; gap: 23px; }
    .getting-started-step { padding: 0; border: 0; gap: 14px; }
    .step-number { flex-basis: 35px; height: 35px; }
    .information-page { margin-top: 35px; }
}
@media (prefers-reduced-motion: reduce) {
    .public-site .account-action { transition: none; }
}

.hero-copy, .account-action > span { min-width: 0; }

/* Account workspace shares the public site's Fluent palette, typography and gutters. */
.workspace { max-width: var(--site-max-width); margin-inline: auto; padding: 2rem var(--site-gutter) 3rem; }
.workspace-intro { margin-bottom: 2rem; }
.workspace-intro h1 { margin: .7rem 0; }
.workspace-intro > p:not(.information-eyebrow) { font-size: var(--fontSizeBase500, calc(4rem / 3)); line-height: 1.5; }
.workspace-intro p:last-child, .workspace-muted { color: var(--colorNeutralForeground2, #424242); }
.workspace h3 { margin: .7rem 0; }
.workspace-card { min-width: 0; }
.onboarding-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 2rem; align-items: start; }
.onboarding-aside p { color: var(--colorNeutralForeground2, #424242); }
.workspace-symbol { display: inline-flex; align-items: center; justify-content: center; width: 2.8rem; height: 2.8rem; border-radius: 50%; color: var(--colorBrandForeground1, #0f548c); background: var(--colorBrandBackground2, #ebf3fc); }
.wizard-progress { margin: 0 0 1.5rem; color: var(--colorNeutralForeground2, #424242); font-weight: 600; }
.person-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem 1.5rem; margin-top: 1.5rem; }
.person-field { min-width: 0; --profile-error: var(--colorPaletteRedForeground1, #bc2f32); }
.person-field fluent-field { width: 100%; --error: var(--profile-error); }
.profile-information { margin-block: 1.5rem; }
.profile-information summary { display: list-item; padding-block: .5rem; font-weight: 600; cursor: pointer; min-height: 2.7rem; }
.profile-confirmations { display: grid; gap: .5rem; margin-top: 1rem; }
.confirmation-field fluent-field { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: var(--spacingHorizontalL, 1rem); align-items: start; }
.confirmation-field fluent-field::part(label) { display: block; grid-column: 2; grid-row: 1; }
.confirmation-field fluent-field::part(input) { display: block; grid-column: 1; grid-row: 1; }
.confirmation-field fluent-field::part(message) { grid-column: 1 / -1; grid-row: 2; }
.confirmation-field fluent-checkbox { margin-top: var(--spacingVerticalXXS, .125rem); }
.wizard-actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: var(--spacingHorizontalM, .75rem); padding-top: var(--spacingVerticalL, 1rem); }
.person-review { margin: 1.5rem 0; }
.person-review > div { padding: 1rem 0; border-bottom: 1px solid var(--colorNeutralStroke2, #e0e0e0); }
.person-review dt { font-weight: 600; }
.person-review dd { margin: .3rem 0 0; overflow-wrap: anywhere; }
.passkey-preview { display: grid; gap: var(--spacingVerticalL, 1rem); }
.passkey-preview-card { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: var(--spacingHorizontalL, 1rem); padding-block: var(--spacingVerticalL, 1rem); border-bottom: 1px solid var(--colorNeutralStroke2, #e0e0e0); }
.passkey-preview-card:last-child { border-bottom: 0; }
.passkey-preview-icon { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 50%; color: var(--colorBrandForeground1, #0f548c); background: var(--colorBrandBackground2, #ebf3fc); }
.passkey-preview-icon svg { width: 1.5rem; height: 1.5rem; }
.passkey-preview-card h2 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacingHorizontalS, .5rem); margin-top: 0; font-size: var(--fontSizeBase500, calc(4rem / 3)); line-height: var(--lineHeightBase500, 1.4); font-weight: var(--fontWeightSemibold, 600); }
.passkey-preview-card dl { display: grid; gap: var(--spacingVerticalS, .5rem); }
.passkey-preview-card dl div { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: var(--spacingHorizontalM, .75rem); }
.passkey-preview-card dt { color: var(--colorNeutralForeground2, #424242); }
.passkey-preview-card dd { margin: 0; }
.passkey-preview-card fluent-button.passkey-remove-button { margin-top: var(--spacingVerticalM, .75rem); }
.passkey-preview-add { margin-top: var(--spacingVerticalXL, 1.25rem); }
@media (max-width: 480px) { .passkey-preview-card { grid-template-columns: 1fr; } .passkey-preview-card dl div { grid-template-columns: 1fr; gap: 0; } }
.workspace-heading, .workspace-section-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
.workspace-heading > div { flex: 1 1 25rem; }
.profile-confirmation { margin-bottom: var(--spacingVerticalXXL, 1.5rem); }
.application-list { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: 1rem; }
.application-card { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1.5rem; }
.application-card p { margin: .3rem 0; }
.application-card fluent-link, .application-pagination fluent-link { display: inline-flex; align-items: center; min-height: 2.7rem; gap: .5rem; }
.applications-empty { text-align: center; padding-block: 2.5rem; }
.applications-empty fluent-anchor-button { margin-top: .7rem; }
.workspace-help { margin-top: 2rem; border-top: 1px solid var(--colorNeutralStroke2, #e0e0e0); padding-top: 1rem; }
.passport-save-message { margin-block-end: var(--spacingVerticalXXL, 1.5rem); }
.workspace-narrow { max-width: 46rem; }
.workspace-narrow form fluent-button { margin-block: 1rem; }
.preview-notice { padding: .8rem 1rem; margin-bottom: 1.5rem; background: var(--colorNeutralBackground2, #fafafa); border: 1px dashed var(--colorNeutralStroke1, #d1d1d1); border-radius: .25rem; }
@media (max-width: 750px) {
    .onboarding-layout { grid-template-columns: minmax(0, 1fr); }
    .person-fields { grid-template-columns: minmax(0, 1fr); row-gap: .75rem; }
    .person-fields fluent-field::part(message) { min-height: 0; }
    .workspace-heading > fluent-anchor-button { width: 100%; }
}

.information-page .health-refresh { margin-block: var(--spacingVerticalS, .5rem); }

/* Fluent status icons and labels share one host-first layout across all services. */
.health-service { margin-block: 1.5rem; }
.health-service h3 { margin-block: 0 .5rem; font-size: var(--fontSizeBase300, 1rem); line-height: var(--lineHeightBase300, 1.6); font-weight: var(--fontWeightBold, 700); }
.health-state { --health-icon-size: 1.5rem; display: flex; align-items: center; gap: .6rem; }
.health-state [data-health-icon]:not([hidden]) { display: inline-flex; align-items: center; justify-content: center; width: var(--health-icon-size); height: var(--health-icon-size); flex-shrink: 0; }
/* Keep the sample field helper hidden while the inline status says Checking... . */
.health-spinner-field > [slot="message"] { display: none; }
.health-state [data-health-icon="success"] { --health-icon-color: var(--colorPaletteGreenForeground1, #107c10); }
.health-state [data-health-icon="warning"] { --health-icon-color: var(--colorPaletteDarkOrangeForeground1, #b6480e); }
.health-state [data-health-icon="error"] { --health-icon-color: var(--colorPaletteRedForeground1, #bc2f32); }
.health-result [data-health-description] { margin-block: .5rem 0; font-size: var(--fontSizeBase300, 1rem); line-height: var(--lineHeightBase300, 1.6); color: var(--colorNeutralForeground3, #616161); }