.xa-public-home {
    margin: 0;
    color: #15243a;
    background: #f4f7fb;
    font-family: var(--xr-font-body);
}

.xa-skip-link {
    position: absolute;
    top: 0.75rem;
    left: -9999px;
    z-index: 9999;
    padding: 0.7rem 1rem;
    color: #ffffff;
    background: #0b4f9c;
    border-radius: 0.35rem;
}

.xa-skip-link:focus {
    left: 0.75rem;
}

.xa-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.9rem;
}

.xa-brand-context {
    padding-left: 0.9rem;
    color: #57aeff;
    border-left: 1px solid rgba(75, 155, 241, 0.3);
    font-size: 0.88rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
}

/* Public landing hero; source Xreference theme supplies the navy layers and wave. */
.xa-hero {
    --xr-hero-bg: url('../images/xreference-hero-bg.png');
    min-height: clamp(640px, 43.2vw, 820px);
    padding: clamp(148px, 10.1vw, 192px) 0 clamp(100px, 7.1vw, 135px);
    color: #fff;
    background:
        radial-gradient(circle at 84% 25%, rgba(28, 102, 210, .24), transparent 32%),
        linear-gradient(90deg, rgba(2, 8, 18, .9), rgba(3, 17, 37, .73) 54%, rgba(3, 20, 45, .48)),
        var(--xr-hero-bg) center / cover,
        #06152a;
}

.xa-hero > .container-xl { width: 90%; max-width: 1440px; }
.xa-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
    gap: clamp(2rem, 3vw, 3.4rem);
    align-items: center;
}
.xa-kicker { margin-bottom: 1.1rem; color: #159bff; letter-spacing: .085em; font-size: .82rem; }
.xa-kicker::before { display: none; }
.xa-hero-copy h1 {
    margin: 0;
    color: #fff;
    font-family: var(--xr-font-display);
    font-size: clamp(2.15rem, 3.1vw, 3.4rem);
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: 1.14;
}
.xa-hero-copy h1 span { display: block; }
.xa-hero-lead { margin: 1.3rem 0 0; color: #c0d0e4; font-size: clamp(1rem, 1.2vw, 1.2rem); line-height: 1.6; }
.xa-hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.65rem; }
.xa-hero-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    min-width: 190px;
    min-height: 48px;
    padding: .75rem 1.55rem;
    color: #fff;
    border: 1px solid #2994ff;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    transition: background-color 160ms ease, box-shadow 160ms ease;
}
.xa-hero-button--primary { background: linear-gradient(135deg, #0064ed, #078bff); box-shadow: inset 0 0 0 1px #ffffff1c, 0 9px 25px #006fff29; }
.xa-hero-button--outline { background: #020c1cb3; }
.xa-hero-button:hover { color: #fff; background: #0874ed; box-shadow: 0 0 22px #198fff55; }
.xa-hero-button:focus-visible { outline: 3px solid #a8ddff; outline-offset: 4px; }
.xa-invitation-note { display: flex; align-items: center; gap: .6rem; margin: 1rem 0 0; color: #78beff; font-size: .875rem; }
.xa-hero-benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; padding: 0; margin: 1.7rem 0 0; list-style: none; }
.xa-hero-benefits li { display: flex; align-items: center; gap: .7rem; min-width: 0; padding: .8rem .75rem; border: 1px solid #284b736b; border-radius: 7px; background: #04162db3; }
.xa-benefit-icon { display: grid; place-items: center; flex: 0 0 38px; height: 38px; color: #53a5ff; border-radius: 50%; background: linear-gradient(135deg, #153e6d, #0a2344); font-size: 1rem; }
.xa-hero-benefits strong { display: block; color: #f5f9ff; font-size: .8rem; line-height: 1.3; }
.xa-hero-benefits small { display: block; margin-top: .2rem; color: #b6c8df; font-size: .7rem; line-height: 1.4; }

/* Inert example workspace: no fake links, inputs or unauthorised client actions. */
.xa-workspace-preview {
    position: relative;
    min-width: 0;
    margin: 0;
    padding: .8em;
    border: 2px solid #a7e0ff;
    border-radius: 1.9em;
    color: #e7f1ff;
    background: linear-gradient(120deg, #04152e, #021b3b 65%, #06284c);
    box-shadow: inset 0 0 0 2px #1688ff, inset 0 0 18px #0078ff66, 0 0 0 2px #158fff, 0 0 11px #55caff, 0 0 40px #087aff66, 0 25px 65px #0008;
    font-size: clamp(.6rem, .86vw, .875rem);
    line-height: 1.4;
}
.xa-demo-toolbar { display: flex; align-items: center; gap: 1em; min-height: 3.7em; padding: 0 .7em .45em; }
.xa-demo-brand { display: flex; align-items: center; gap: .7em; min-width: 0; }
.xa-demo-brand img { display: block; width: 10.5em; height: auto; }
.xa-demo-brand > span { color: #72bfff; font-size: .9em; }
.xa-demo-practice { display: flex; align-items: center; gap: 2em; margin-left: auto; white-space: nowrap; font-size: .82em; }
.xa-demo-user { padding-left: 1em; border-left: 1px solid #285d96; color: #74bcff; font-size: 1.25em; }
.xa-demo-body { display: grid; grid-template-columns: 8.7em minmax(0, 1fr); gap: .6em; }
.xa-demo-sidebar { padding-top: .6em; }
.xa-demo-nav-item { display: flex; align-items: center; gap: .7em; min-height: 3.6em; padding: .75em .7em; border-left: 2px solid transparent; border-radius: .45em; font-size: .85em; }
.xa-demo-nav-item > i { width: 1.3em; text-align: center; font-size: 1.25em; }
.xa-demo-nav-item--active { color: #fff; background: linear-gradient(100deg, #075abf80, #0d3770); border-left-color: #1c9aff; }
.xa-demo-nav-item--active > i { color: #21a0ff; }
.xa-demo-content { min-width: 0; padding: 1em; color: #12314f; background: #edf3f8; border: 1px solid #e0eaf6; border-radius: .75em .75em 0 0; }
.xa-demo-client-header { display: flex; align-items: center; gap: .7em; min-height: 3em; margin-bottom: .6em; }
.xa-demo-company-icon { display: grid; place-items: center; flex: 0 0 2.8em; height: 2.8em; border-radius: 50%; background: #dce7f1; color: #12314f; font-size: 1.05em; }
.xa-demo-company-copy { min-width: 0; }
.xa-demo-company-copy small { display: block; margin-bottom: .2em; color: #617c98; font-size: .62em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.xa-demo-company-copy strong { display: block; font-size: 1.25em; font-weight: 800; line-height: 1.2; }
.xa-demo-year { flex-shrink: 0; margin-left: auto; padding: .5em .7em; border: 1px solid #c2d2e4; border-radius: .3em; background: #fff; font-size: .72em; font-weight: 700; }
.xa-demo-tabs { display: grid; grid-template-columns: 1fr 1.25fr 1.2fr .8fr; border: 1px solid #c5d5e5; background: #e5edf5; }
.xa-demo-tabs > span { display: flex; align-items: center; justify-content: center; min-width: 0; padding: .65em .35em; border-bottom: 2px solid transparent; font-size: .7em; font-weight: 700; text-align: center; }
.xa-demo-tabs > span + span { border-left: 1px solid #c5d5e5; }
.xa-demo-tabs > .xa-demo-tab--active { border-bottom-color: #ff721c; background: #fff; }
.xa-demo-actions { display: flex; flex-wrap: wrap; gap: .6em; margin: .6em 0; }
.xa-demo-action { display: inline-flex; align-items: center; justify-content: center; gap: .55em; padding: .65em .8em; border: 1px solid #12314f; border-radius: .25em; color: #fff; background: #12314f; font-size: .7em; font-weight: 700; }
.xa-demo-action--review { color: #865019; border-color: #ebcfaa; background: #fff7eb; }
.xa-demo-action b { display: grid; place-items: center; min-width: 1.45em; height: 1.45em; border-radius: 50%; color: #fff; background: #b76911; font-size: .9em; }
.xa-demo-draft { padding: .8em; border: 1px solid #a3d4b8; border-left: 3px solid #278b52; border-radius: .3em; background: #f2faf5; }
.xa-demo-eyebrow { display: block; margin-bottom: .4em; color: #2e6393; font-size: .63em; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.xa-demo-draft > .xa-demo-eyebrow { color: #258153; }
.xa-demo-draft > strong { display: block; font-size: 1em; font-weight: 800; }
.xa-demo-progress { height: .48em; margin: .65em 0 .35em; overflow: hidden; border-radius: 1em; background: #d6e8dd; }
.xa-demo-progress > span { display: block; width: 83%; height: 100%; border-radius: inherit; background: #278b52; }
.xa-demo-draft-status { display: flex; justify-content: space-between; gap: .5em; color: #407754; font-size: .66em; }
.xa-demo-draft-status > span:first-child { font-weight: 700; }
.xa-demo-report-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: .75em; margin-top: .7em; }
.xa-demo-financials, .xa-demo-checks { min-width: 0; overflow: hidden; border: 1px solid #c5d5e5; border-radius: .3em; background: #fff; }
.xa-demo-panel-heading { padding: .6em .8em; border-bottom: 1px solid #c5d5e5; background: #eaf2f8; }
.xa-demo-panel-heading > strong { display: block; font-size: .87em; font-weight: 800; }
.xa-demo-financials dl { margin: 0; }
.xa-demo-financials dl > div { display: flex; align-items: center; justify-content: space-between; gap: .5em; min-height: 2.8em; padding: .65em 1em; font-size: .78em; }
.xa-demo-financials dl > div + div { border-top: 1px solid #dce6f1; }
.xa-demo-financials dt { font-weight: 400; }
.xa-demo-financials dd { margin: 0; font-weight: 800; white-space: nowrap; }
.xa-demo-financials dl > .xa-demo-total { border-top: 2px solid #37729f; background: #eff5fb; }
.xa-demo-total dt { font-weight: 700; }
.xa-demo-checks ul { margin: 0; padding: 0; list-style: none; }
.xa-demo-checks li { display: flex; align-items: center; gap: .6em; min-height: 2.35em; padding: .5em .8em; font-size: .68em; }
.xa-demo-checks li + li { border-top: 1px solid #e0e9f1; }
.xa-demo-checks li > i { color: #278b52; font-size: 1.25em; }
.xa-demo-checks .xa-demo-check--review { color: #865019; background: #fff9f0; }
.xa-demo-checks .xa-demo-check--review > i { color: #b76911; }
.xa-demo-saved { display: flex; align-items: center; flex-wrap: wrap; gap: .4em; margin-top: .8em; color: #617c98; font-size: .64em; }
.xa-demo-saved > span { display: inline-flex; align-items: center; gap: .4em; margin-left: auto; color: #278b52; }
.xa-workspace-preview figcaption { margin-left: 9.3em; padding: .45em 1.4em .7em; color: #7286a2; background: #f8fbff; border: 1px solid #e0eaf6; border-top: 0; border-radius: 0 0 .75em .75em; text-align: right; font-size: 1em; }

.xa-how-section { padding: 1.5rem 0 3.5rem; background: radial-gradient(ellipse at 50% 0, #eaf3ff, transparent 65%), #fff; }
.xa-section-heading { max-width: 1000px; margin-bottom: 2.3rem; }
.xa-section-heading h2 { font-size: clamp(1.9rem, 2.7vw, 2.75rem); font-weight: 800; letter-spacing: -.03em; }
.xa-approval-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; max-width: 1120px; margin: 0 auto; padding: 0; list-style: none; }
.xa-approval-steps li { display: flex; align-items: center; gap: 1.2rem; }
.xa-approval-number { display: grid; place-items: center; flex: 0 0 52px; height: 52px; color: #0877ff; background: #e4f0ff; border-radius: 50%; font-size: 1.4rem; font-weight: 800; }
.xa-approval-steps h3 { margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.45; }
.xa-approval-steps .fa { margin-left: auto; color: #b8cbe1; font-size: 1.7rem; }
.xa-approval-detail { max-width: 820px; margin: 2rem auto 0; color: #5a6f86; text-align: center; font-size: 1rem; line-height: 1.65; }
.xa-access-icon { display: inline-flex; align-items: center; justify-content: center; color: #1b64c4; background: #e9f2fc; border-radius: 50%; }

.xa-practice-section {
    padding: clamp(5rem, 9vw, 8rem) 0;
    color: #dce8f6;
    background:
        radial-gradient(circle at 16% 18%, rgba(44, 119, 202, 0.24), transparent 31rem),
        linear-gradient(135deg, #061326 0%, #0b2d55 100%);
}

.xa-practice-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
    gap: clamp(3rem, 8vw, 8rem);
    align-items: center;
}

.xa-kicker-light {
    color: #84b9f1;
}

.xa-practice-section h2 {
    max-width: 720px;
    margin: 0.8rem 0 1.2rem;
    color: #ffffff;
    font-size: clamp(2.2rem, 4vw, 3.6rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.08;
}

.xa-practice-section p {
    max-width: 720px;
    margin: 0;
    color: #b7c9de;
    font-size: 1.08rem;
    line-height: 1.7;
}

.xa-practice-points {
    display: grid;
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.xa-practice-points li {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 0.9rem;
    align-items: center;
    padding: 1.05rem 1.15rem;
    color: #e7f0fb;
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(126, 172, 226, 0.2);
    border-radius: 0.7rem;
    line-height: 1.45;
}

.xa-practice-points i {
    display: inline-flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    color: #83bdf9;
    background: rgba(91, 160, 236, 0.13);
    border-radius: 50%;
}

.xa-access-section {
    padding-top: clamp(4.8rem, 8vw, 7rem);
    padding-bottom: clamp(4.8rem, 8vw, 7rem);
}

.xa-access-panel {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr);
    gap: 1.8rem;
    align-items: center;
    max-width: 990px;
    margin: 0 auto;
    padding: clamp(1.8rem, 4vw, 3rem);
    background: #ffffff;
    border: 1px solid #d8e4f0;
    border-radius: 1rem;
    box-shadow: 0 20px 54px rgba(22, 59, 101, 0.08);
}

.xa-access-icon {
    width: 78px;
    height: 78px;
    font-size: 1.65rem;
}

.xa-access-panel h2 {
    margin: 0.55rem 0 0.65rem;
    color: #102c50;
    font-size: clamp(1.7rem, 3.5vw, 2.6rem);
}

.xa-access-panel p {
    margin: 0;
    color: #5a6f86;
    font-size: 1.03rem;
    line-height: 1.65;
}

.xa-footer-brand {
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-bottom: 1.25rem;
}

.xa-footer-brand img {
    margin: 0;
}

.xa-footer-brand span {
    padding-left: 0.85rem;
    color: #9ec3ec;
    border-left: 1px solid rgba(158, 195, 236, 0.35);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

@media (max-width: 991.98px) {
    .xa-brand-context {
        font-size: 0.76rem;
    }

    .xa-hero-grid,
    .xa-practice-grid {
        grid-template-columns: 1fr;
    }

    .xa-hero { min-height: 0; padding: 4.5rem 0 7rem; }
    .xa-hero > .container-xl { max-width: 760px; }
    .xa-hero-copy h1 { font-size: clamp(2.2rem, 5.5vw, 3.3rem); }
    .xa-workspace-preview { width: 100%; max-width: 700px; font-size: clamp(.65rem, 1.7vw, .875rem); }
    .xa-approval-steps { gap: 1.2rem; }
    .xa-approval-steps li { gap: .7rem; }
    .xa-approval-number { flex-basis: 40px; height: 40px; }
}

@media (max-width: 575.98px) {
    .xa-brand {
        gap: 0.55rem;
    }

    .xa-brand-context {
        padding-left: 0.55rem;
        font-size: 0.68rem;
        letter-spacing: 0.04em;
    }

    .xa-public-home .xr-brand-mark img { max-width: clamp(135px, 38vw, 190px); height: auto; }
    .xa-hero { padding-top: 3rem; }

    .xa-hero-grid {
        gap: 2.4rem;
    }

    .xa-hero-copy h1 {
        font-size: clamp(2rem, 8.3vw, 2.7rem);
    }

    .xa-desktop-break { display: none; }
    .xa-hero-actions { flex-direction: column; }
    .xa-hero-benefits { grid-template-columns: 1fr; gap: .6rem; }
    .xa-hero-benefits li { padding: .7rem 1rem; }
    .xa-hero-benefits strong { font-size: .9rem; }
    .xa-hero-benefits small { font-size: .8rem; }
    .xa-workspace-preview { font-size: .65rem; border-radius: 1.3em; }
    .xa-demo-practice { display: none; }
    .xa-demo-user { margin-left: auto; }
    .xa-demo-body { grid-template-columns: 3.4em minmax(0, 1fr); gap: .4em; }
    .xa-demo-nav-item { justify-content: center; padding: .75em .4em; }
    .xa-demo-nav-item > span { display: none; }
    .xa-demo-content { padding: .9em .65em .5em; }
    .xa-demo-company-icon { display: none; }
    .xa-demo-company-copy strong { font-size: 1.1em; }
    .xa-demo-report-grid { gap: .5em; }
    .xa-demo-financials dl > div { padding: .8em .65em; }
    .xa-workspace-preview figcaption { margin-left: 3.8em; }
    .xa-approval-steps { grid-template-columns: 1fr; max-width: 310px; }
    .xa-approval-steps li { gap: 1.1rem; }
    .xa-approval-steps .fa { transform: rotate(90deg); }
    .xa-approval-detail { text-align: left; }

    .xa-access-panel {
        grid-template-columns: 1fr;
    }

    .xa-footer-brand {
        align-items: flex-start;
        flex-direction: column;
    }

    .xa-footer-brand span {
        padding: 0;
        border-left: 0;
    }
}