html {
    overflow-x: hidden;
}

/* Card #725: bootstrap-reboot.css sets `:root { scroll-behavior: smooth }` (guarded by
   prefers-reduced-motion), which also governs browser/framework-internal scrolling -- e.g.
   FocusOnNavigate's focus()-triggered scroll-into-view after a Blazor enhanced navigation. That
   turned what should be an instant, invisible scroll correction into a visible animated glide on
   every page navigation (see wwwroot/js/site-navigation.js for the matching JS-side fix). Same
   selector/specificity as bootstrap's rule, so this wins purely on cascade order (app.css loads
   after bootstrap.min.css in App.razor). No in-page anchor links exist yet that would want the
   smooth glide for user-initiated jumps. */
:root {
    scroll-behavior: auto;
}

/* Card #680: kit fonts + theme tokens site-wide (wwwroot/brand/brand.css,
   wwwroot/brand/locus/site-theme.css, both loaded in Components/App.razor). --lc-ground/--lc-ink
   auto-swap under prefers-color-scheme/[data-theme]; every rule below reads them via var() and
   never repeats the media query itself. */
html, body {
    font-family: var(--locus-font-body, 'Source Sans 3', 'Segoe UI', sans-serif);
    background: var(--lc-ground, #f4f6f9);
    color: var(--lc-ink, #1a2535);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--locus-font-display, 'Zilla Slab', 'Rockwell', Georgia, serif);
}

a, .btn-link {
    color: var(--lc-accent-deep, #006bb7);
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

/* ── Hero ────────────────────────────────────────────────── */
/* The hero keeps a fixed dark "dusk" ground in both site themes (architect's dark reference,
   card #680: "hero keeps navy and converges") -- var(--lc-dusk) never changes under
   prefers-color-scheme/[data-theme], same as .lc-header/.lc-footer. */
.lc-hero {
    position: relative;
    background: linear-gradient(135deg, var(--lc-dusk, #0a1628) 0%, #0d2a4a 60%, #0e3460 100%);
    color: var(--lc-on-dusk, #fff);
    padding: 5rem 1.5rem 4.5rem;
    overflow: hidden;
}

/* Card #680: contour-line motif -- twin ridge lines echoing the ratified mark's own "Twin Peak
   Dawn" ridge+arc geometry (wwwroot/brand/locus/README.md's "Mark rationale"), decorative only. */
.lc-hero-contour {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Card #724: the restored Concept A mountain-sunrise graphic (Home.razor) -- same absolute
   full-bleed layer as .lc-hero-contour, but hidden below md so it never competes with the
   centered headline/sub on narrow screens, where the two would otherwise overlap directly. */
.lc-hero-sunrise {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

@media (max-width: 767.98px) {
    .lc-hero-sunrise { display: none; }
}

.lc-hero > .container {
    position: relative;
}

.lc-hero-headline {
    font-family: var(--locus-font-display, 'Zilla Slab', 'Rockwell', Georgia, serif);
    font-size: clamp(2rem, 5vw, 3.25rem);
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 1.25rem;
    letter-spacing: -0.5px;
}

.lc-hero-sub {
    font-size: 1.15rem;
    color: var(--lc-on-dusk-muted, #b0c8e4);
    max-width: 600px;
    margin: 0 auto 2rem;
    line-height: 1.65;
}

.lc-btn-primary {
    background: var(--lc-accent-light, #7FB6D9);
    color: var(--lc-dusk, #0a1628) !important;
    font-weight: 700;
    padding: 0.65rem 1.75rem;
    border-radius: 8px;
    border: none;
    font-size: 1rem;
    text-decoration: none;
    transition: background 0.15s;
}

.lc-btn-primary:hover { background: var(--lc-accent-resolve, #E0A458); }

.lc-btn-outline {
    background: transparent;
    color: var(--lc-on-dusk, #fff) !important;
    font-weight: 600;
    padding: 0.65rem 1.75rem;
    border-radius: 8px;
    border: 2px solid rgba(255,255,255,0.35);
    font-size: 1rem;
    text-decoration: none;
    transition: border-color 0.15s, background 0.15s;
}

.lc-btn-outline:hover { border-color: #fff; background: rgba(255,255,255,0.07); }

/* ── Proof Strip ─────────────────────────────────────────── */
/* Card #696: renders exactly the two architect-ratified figures (Home.razor) -- reads --lc-ink/
   --lc-border directly via var() (already theme-reactive from site-theme.css's :root), same
   convention .lc-section-header already uses, so no extra .lc-home scoping is needed here. */
.lc-proof-strip {
    padding: 1.5rem 0;
    border-top: 1px solid var(--lc-border, #dce4ef);
    border-bottom: 1px solid var(--lc-border, #dce4ef);
}

.lc-proof-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem 3rem;
}

.lc-proof-item {
    margin: 0;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--lc-ink, #0a1628);
    text-align: center;
}

/* ── Sections ────────────────────────────────────────────── */
.lc-section {
    padding: 4rem 0;
}

.lc-section-alt {
    background: var(--lc-ground-alt, #eef2f7);
}

.lc-section-header {
    margin-bottom: 2.5rem;
}

/* Card #724 item 5: small label above the section heading, adopted with the mock's own
   heading/lede copy -- same uppercase-accent-label convention already used elsewhere in this kit
   (.lc-family-tagline, .lc-dropdown-category), reused here rather than inventing a new one.
   Card #746: treatment (size/letter-spacing/margin) brought in line verbatim with the ratified
   mock -- color already read the theme-reactive --lc-accent-deep token (glacier-deep on light
   ground, glacier-light on dark ground per site-theme.css), which already met AA and needed no
   change. */
.lc-section-eyebrow {
    font-family: var(--locus-font-body, 'Source Sans 3', 'Segoe UI', sans-serif);
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--lc-accent-deep, #2E6E96);
    margin: 0 0 0.7rem;
}

.lc-section-header h2 {
    font-family: var(--locus-font-display, 'Zilla Slab', 'Rockwell', Georgia, serif);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--lc-ink, #0a1628);
    text-wrap: balance;
}

.lc-section-lead {
    color: var(--lc-ink-muted, #556b85);
    font-size: 1.05rem;
    margin-top: 0.25rem;
    max-width: 60ch;
    margin-left: auto;
    margin-right: auto;
}

/* ── Cards ───────────────────────────────────────────────── */
/* .lc-card and friends are shared far beyond Home.razor -- Services/Products/ProductDetail,
   every product front door (ProductFrontDoor.razor), and exhibit-class demo panels
   (StravonGoldenRecordDemo.razor, dashboards). Card #2667: this base rule used to stay on fixed
   (non-theme-swapping) tokens site-wide, which is exactly why those surfaces went light-cream in
   Dark/High contrast while the header/footer went dark around them -- it now reads the same
   --lc-ground-card/--lc-ink/--lc-border tokens the .lc-home override below already proved out on
   Home.razor, so every page using .lc-card follows the site theme, not just the homepage. */
.lc-card-link {
    text-decoration: none;
    display: block;
    height: 100%;
}

.lc-card {
    background: var(--lc-ground-card, #fff);
    border-radius: 12px;
    padding: 1.75rem;
    border: 1px solid var(--lc-border, #dce4ef);
    transition: box-shadow 0.2s, transform 0.2s;
    display: flex;
    flex-direction: column;
}

/* Card #696: a resting elevation (not just on :hover) per the ratified mock's "kit card styling"
   -- Home.razor's own cards only; scoped the same way the theme-reactive overrides just below
   are, via .lc-home, so Services/Products/every product front door (which also render .lc-card)
   keep their pre-existing flat-until-hover treatment. Declared BEFORE .lc-card:hover below: same
   (0,2,0) specificity as that rule, so source order decides which box-shadow wins on hover, and
   this must lose there (or the deeper hover shadow would never show on Home.razor's cards). */
.lc-home .lc-card {
    box-shadow: 0 2px 10px rgba(10,22,40,0.06);
}

.lc-card:hover {
    box-shadow: 0 8px 28px rgba(10,22,40,0.12);
    transform: translateY(-3px);
}

/* Services grid line icons: bespoke SVGs per the ratified mock (card #696), falling back to
   Bootstrap Icons' bi-* glyphs for any service slug not one of the four known ones (see
   Home.razor). Both inherit color the same way via currentColor/color. */
.lc-card-icon {
    font-size: 2rem;
    color: var(--locus-glacier-deep, #4fc3f7);
    margin-bottom: 1rem;
}

.lc-card-icon svg {
    width: 2rem;
    height: 2rem;
    display: block;
}

.lc-card-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--lc-ink, #0a1628);
    margin-bottom: 0.5rem;
}

.lc-card-text {
    font-size: 0.9rem;
    color: var(--lc-ink-muted, #556b85);
    flex: 1;
    line-height: 1.6;
}

/* Card #2686 (follow-on of #2667): this used to read --locus-glacier-deep directly -- a fixed
   brand-kit token that never swaps under [data-theme]/prefers-color-scheme, unlike --lc-accent-deep
   (site-theme.css), which already equals --locus-glacier-deep in light theme. So light theme is
   unchanged (#2E6E96 either way) and every other page using the bare .lc-card-cta (Services,
   Products, every product front door) now follows the theme the same way .lc-home's own override
   below already did -- see that rule's updated comment. */
.lc-card-cta {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--lc-accent-deep, #2E6E96);
    margin-top: 1rem;
    display: block;
}

/* Card #680 established this .lc-home-scoped accent override for Home.razor's own cards (icon/CTA
   colors, deliberately different from the fixed-brand-accent .lc-card-icon default other pages
   still use). Card #2667: the background/border-color and title/text color overrides that used to
   live here were removed -- .lc-card/.lc-card-title/.lc-card-text (above) now read the exact same
   --lc-ground-card/--lc-border/--lc-ink/--lc-ink-muted tokens site-wide, so duplicating them under
   .lc-home would have been a dead no-op. Card #2686: .lc-card-cta's own override below is now the
   same dead no-op for the same reason -- the base rule above reads --lc-accent-deep directly --
   but is left in place rather than removed, same precedent as the border-color overrides further
   down this file (still correct, just no longer load-bearing). */
.lc-home .lc-card-icon { color: var(--lc-accent-deep, #4fc3f7); }
.lc-home .lc-card-cta { color: var(--lc-accent-deep, #1b6ec2); }

/* Product Family row: each member's own kit accent (--lc-family-accent, set inline per member in
   Home.razor from wwwroot/brand/locus/site-theme.css's --lc-family-*-accent tokens) -- verbatim
   tagline, no invented marketing copy. Card #696: left accent edge per the ratified mock (was a
   border-top through card #680). */
.lc-family-card {
    border-left: 3px solid var(--lc-family-accent, var(--lc-accent-deep, #2E6E96));
}

/* Card #724: a two-class ".lc-home .lc-card { border-color: ... }" rule (0,2,0) used to be more
   specific than ".lc-family-card"'s single-class border-left (0,1,0), so on the homepage it was
   silently winning the cascade and repainting the left edge back to the neutral --lc-border gray,
   right after .lc-family-card set it to the accent. Matching that rule's specificity (also
   .lc-home + one class) and declaring it after settled the cascade the other way; same fix, same
   reason, for the service tiles' Locus-accent bar below. Card #2667 removed that ".lc-home
   .lc-card" border-color rule (the base .lc-card rule reads the same --lc-border token site-wide
   now, making the .lc-home-scoped copy a dead no-op) -- the two (0,2,0) overrides below are no
   longer load-bearing against it, but are left in place: harmless, and still correct. */
.lc-home .lc-family-card {
    border-left-color: var(--lc-family-accent, var(--lc-accent-deep, #2E6E96));
}

.lc-home .lc-service-card {
    border-left: 3px solid var(--lc-accent-deep, #2E6E96);
}

/* Card #696: each member's real vendored kit mark (wwwroot/brand/<product>/) on a small white/
   cream backing swatch -- every kit mark is a light-ground-only asset (see each kit's own
   README), so the swatch keeps it legible on this card's theme-reactive background under
   [data-theme="dark"] without requiring a new dark-ground asset from any kit. */
.lc-family-mark {
    display: block;
    width: 40px;
    height: 40px;
    padding: 6px;
    margin-bottom: 0.85rem;
    background: #fff;
    border-radius: 10px;
    object-fit: contain;
}

.lc-family-tagline {
    font-family: var(--locus-font-body, 'Source Sans 3', 'Segoe UI', sans-serif);
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--lc-family-accent, var(--lc-accent-deep, #2E6E96));
    margin: 0.15rem 0 0.75rem;
}

/* ── Badges ──────────────────────────────────────────────── */
.lc-card-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; }

.lc-badge {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.lc-badge-dev { background: #e3f2fd; color: #0d47a1; }
.lc-badge-biz { background: #e8f5e9; color: #1b5e20; }

/* Card #731 round 3: B9/G2P (3 Code Monkeys (3CM) partner-catalog products) restored after
   card #724's consolidation dropped them from the page entirely -- the ratified rule is that 3CM
   products are never presented as Locus-built, so each partner card carries this attribution pill
   up top instead of the Locus-family row's kit-accent left edge (no accent bar here -- there's no
   vendored kit to accent with, and adding one would visually imply Locus ownership the pill
   denies). Theme-reactive muted tokens, same as the rest of Home.razor's .lc-home-scoped cards. */
.lc-partner-tag {
    display: inline-block;
    font-family: var(--locus-font-body, 'Source Sans 3', 'Segoe UI', sans-serif);
    font-weight: 700;
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--lc-ink-muted, #556b85);
    background: var(--lc-ground-alt, #eef2f7);
    border-radius: 20px;
    padding: 0.2rem 0.6rem;
    margin-bottom: 0.85rem;
}

/* ── CTA Banner (Home.razor only) ─────────────────────────── */
/* Same fixed-dusk treatment as .lc-hero -- an always-dark gradient band, not a ground that swaps
   with theme. */
.lc-cta-banner {
    background: linear-gradient(135deg, var(--lc-dusk, #0a1628), #0d3460);
    color: var(--lc-on-dusk, #fff);
    padding: 4rem 1.5rem;
}

.lc-cta-banner h2 {
    font-size: 1.9rem;
    font-weight: 700;
    /* Card #724: "closer, not touching" -- was 0.75rem, read as too much air between the
       headline and the line right under it. */
    margin-bottom: 0.5rem;
}

.lc-cta-banner p {
    color: var(--lc-on-dusk-muted, #b0c8e4);
    /* Card #724: same tightening as the h2 margin above, applied to the gap before the CTA button. */
    margin-bottom: 1.25rem;
    font-size: 1.05rem;
}

/* ── Page content areas (non-home pages) ─────────────────── */
/* .lc-page hosts Services/Products/ServiceDetail/ProductDetail, every product front door, and
   exhibit-class dashboards/demo panels. Card #2667: this used to be an explicit fixed-light
   background regardless of the visitor's site theme (the Dark/High-contrast picker, #2635,
   changed the header/footer and :root's --lc-* tokens but never this wrapper, so page bodies
   stayed light-cream with light ink painted on top of it -- see the card for the production
   screenshot). Reads --lc-ground/--lc-ink/--lc-ink-muted like every other themed surface now;
   the light value of each token already equals today's constant (--lc-ground's :root block is
   literally var(--locus-cream, #faf9f5)), so light theme is unchanged. Only the brand LOCKUP
   marks themselves (.stravon-lockup, .allele-lockup -- StravonDashboard.razor.css/
   AlleleDashboard.razor.css) keep their own fixed kit ink/accent via their existing [data-theme]
   hooks; LockupHeaderContrastTests.cs (card #537) still guards those two files specifically. */
.lc-page {
    background: var(--lc-ground, #faf9f5);
    padding: 3rem 0 4rem;
}

.lc-page-header {
    margin-bottom: 2.5rem;
}

.lc-page-header h1 {
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--lc-ink, #0a1628);
}

.lc-page-header p {
    color: var(--lc-ink-muted, #556b85);
    font-size: 1.05rem;
}

/* ── Offering list ───────────────────────────────────────── */
.lc-offering {
    border-left: 4px solid var(--locus-glacier-deep, #4fc3f7);
    padding: 0.85rem 1.25rem;
    margin-bottom: 1rem;
    background: var(--lc-ground-card, #fff);
    border-radius: 0 8px 8px 0;
}

.lc-offering-name {
    font-weight: 700;
    color: var(--lc-ink, #0a1628);
    font-size: 1rem;
}

.lc-offering-desc {
    color: var(--lc-ink-muted, #556b85);
    font-size: 0.9rem;
    margin: 0;
}

/* ── Product sheet ───────────────────────────────────────── */
.lc-product-hero {
    background: linear-gradient(135deg, var(--locus-navy, #0a1628), #0d2a4a);
    color: #fff;
    padding: 3.5rem 1.5rem 3rem;
}

.lc-product-hero h1 { font-size: 2.5rem; font-weight: 800; }
.lc-product-hero p  { color: #b0c8e4; font-size: 1.1rem; max-width: 680px; }

/* ── Validation / form styles ────────────────────────────── */
.valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; }
.invalid { outline: 1px solid #e50000; }
.validation-message { color: #e50000; }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}


a, .btn-link {
    color: var(--lc-accent-deep, #006bb7);
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}
/* -- Feature list ------------------------------------------ */
.lc-feature-list {
    padding-left: 1.25rem;
    color: #556b85;
    font-size: 0.92rem;
    line-height: 1.7;
}

.lc-feature-list li { margin-bottom: 0.35rem; }

/* Card #2661 (AdvisoryAnswerDisplay.razor, /policy-conversation): a clause reference inside the
   synthesized answer is now a button that reveals its excerpt in place rather than plain text.
   Global, not CSS-isolated -- an isolated .razor.css would stamp a b-xxxx scope attribute onto
   every <p>/<h3>/<li> this component renders, which would have broken the pre-existing exact-
   markup assertions in AdvisoryAnswerMarkupRendererTests/PolicyConversationInteractionTests that
   predate this card. These rules consume the same --lc-* tokens every other themed surface on this
   page already resolves per [data-theme] (card #2635/#2650's theme picker), so the trigger and its
   excerpt track light/dark/system/high-contrast automatically. */
.lc-answer-ref__trigger {
    display: inline;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    font-weight: 600;
    color: var(--lc-accent-deep, #2E6E96);
    text-decoration: underline;
    cursor: pointer;
}

.lc-answer-ref__trigger:hover,
.lc-answer-ref__trigger:focus-visible {
    color: var(--lc-accent-resolve, #E0A458);
}

.lc-answer-ref__trigger:focus-visible {
    outline: 2px solid var(--lc-accent-deep, #2E6E96);
    outline-offset: 2px;
    border-radius: 3px;
}

.lc-answer-ref__excerpt {
    display: inline-block;
    margin: 0.25rem 0.15rem;
    padding: 0.5rem 0.75rem;
    background: var(--lc-ground-alt, #eef2f7);
    border: 1px solid var(--lc-border, #dce4ef);
    border-radius: 8px;
    font-size: 0.9rem;
    color: var(--lc-ink, #12395b);
}

.lc-answer-ref__excerpt-text {
    font-style: italic;
}

/* Card #2688 (#2661 follow-on): the "View original" line sits below the excerpt text, inside the
   same bordered box, rather than trailing the italic excerpt where it was easy to miss. A block
   child of the inline-block .lc-answer-ref__excerpt above puts it on its own line with no layout
   change needed elsewhere. The link reuses the sitewide default `a` color (app.css, "a, .btn-link")
   against this box's own --lc-ground-alt background -- the exact pairing the excerpt's link
   already rendered on before this card, now just given its own line and a bolder, underlined
   treatment so it reads as a link the way .lc-answer-ref__trigger already does. */
.lc-answer-ref__excerpt-source {
    display: block;
    margin-top: 0.35rem;
}

.lc-answer-ref__view-original {
    font-weight: 600;
    text-decoration: underline;
}

.lc-answer-ref__view-original:focus-visible {
    outline: 2px solid var(--lc-accent-deep, #2E6E96);
    outline-offset: 2px;
    border-radius: 3px;
}

@media (forced-colors: active) {
    .lc-answer-ref__excerpt {
        border: 1px solid CanvasText;
    }
}

/* Card #2667 fix pass (Tier-1b review, PR 2689): site-theme.js now sets [data-bs-theme] alongside
   [data-theme] (see its own comment) so Bootstrap's own color variables stop reading their
   LIGHT-theme values on a dark --lc-ground, which was the review's primary finding -- but
   [data-theme="high-contrast"] maps to Bootstrap's "dark" (the closer base palette; Bootstrap has
   no high-contrast mode of its own), and Bootstrap's [data-bs-theme=dark] --bs-body-bg/
   --bs-body-color pair (#212529/#dee2e6, ~4.3:1) falls short of this theme's own AAA (Web
   Content Accessibility Guidelines AAA) bar (>=4.5:1 large text/UI -- site-theme.css's
   high-contrast comment), and doesn't match this theme's pure-black ground either. Overriding
   .form-control/.form-select with the theme's own tokens (21:1) fixes both. PolicyConversation.razor
   is the only in-scope page using these classes (law-library/feedback selects and textareas);
   StravonDashboard/AlleleDashboard/BlockCanvasEditor's badges (text-bg-secondary/text-bg-success)
   are untouched here -- Bootstrap never redefines --bs-secondary-rgb/--bs-success-rgb per theme,
   so that pair is identical, and already >=4.5:1, in every theme including this one. */
:root[data-theme="high-contrast"] .form-control,
:root[data-theme="high-contrast"] .form-select {
    color: var(--lc-ink);
    background-color: var(--lc-ground-card);
    border-color: var(--lc-border);
}

:root[data-theme="high-contrast"] .form-control:focus,
:root[data-theme="high-contrast"] .form-select:focus {
    color: var(--lc-ink);
    background-color: var(--lc-ground-card);
}

:root[data-theme="high-contrast"] .form-control::placeholder {
    color: var(--lc-ink-muted);
}

/* Card #2686 (follow-on of #2667, Rule 13 walk): moved here from BlockSequenceRenderer.razor.css,
   whose own version of this override (written `[data-theme="dark"] ::deep .lc-frontdoor-prompt-
   card`) could never match. Blazor CSS isolation attaches a component's scope attribute to the
   compound selector immediately before `::deep` -- here that compound is `[data-theme="dark"]`,
   which only ever lands on <html>, which never carries ANY component's scope attribute, so the
   compiled selector (`[data-theme="dark"][b-xxxx] .lc-frontdoor-prompt-card`) was dead on arrival
   for every explicit theme pick. The system-default prefers-color-scheme branch had no such
   ancestor and was unaffected -- only an explicit Light/Dark/High-contrast pick was broken (an
   explicit Light pick on an OS-dark machine too). Global CSS needs no scope attribute at all, so
   the plain class selectors below reach the child-block markup BlockSequenceRenderer renders
   directly, same as site-wide classes. Same #f4f6f9/--lc-ground-alt split that scoped file's base
   rule and PageScopedThemeOverrideContractTests.cs still guard: light theme's literal is NOT
   --lc-ground-alt's real value (#eef2f7), so it stays a literal here too, not a var() swap.

   ROUND 1 fix pass (architect ruling, 2026-10-28, PR 2718 thread 14718): the scoped base rule
   that stayed behind in BlockSequenceRenderer.razor.css (`::deep .lc-frontdoor-prompt-card`)
   compiles to `[b-xxxx] .lc-frontdoor-prompt-card`, specificity (0,2,0). A bare
   `.lc-frontdoor-prompt-card` selector here is only (0,1,0) and loses to that base rule
   regardless of stylesheet order, so under System theme on an OS-dark machine the panel went
   right back to the light #f4f6f9 ground under light text -- the exact unreadable case this
   card exists to fix. `:root:not([data-theme="light"])` raises this to (0,3,0) -- :root,
   :not()'s own [data-theme="light"] argument, and the class each contribute one -- which beats
   the base rule's (0,2,0) unconditionally, while :not([data-theme="light"]) still lets an
   explicit Light pick's own (0,3,0) rule below win back on source order (both now tie at
   (0,3,0); light's rule is declared later). PageScopedThemeOverrideContractTests.cs's
   specificity floor test guards this: any override here for these two classes below (0,2,0)
   fails it. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .lc-frontdoor-prompt-card,
    :root:not([data-theme="light"]) .lc-frontdoor-exclusion-note {
        background: var(--lc-ground-alt, #101c28);
    }
}

:root[data-theme="dark"] .lc-frontdoor-prompt-card,
:root[data-theme="dark"] .lc-frontdoor-exclusion-note,
:root[data-theme="high-contrast"] .lc-frontdoor-prompt-card,
:root[data-theme="high-contrast"] .lc-frontdoor-exclusion-note {
    background: var(--lc-ground-alt, #101c28);
}

:root[data-theme="light"] .lc-frontdoor-prompt-card,
:root[data-theme="light"] .lc-frontdoor-exclusion-note {
    background: #f4f6f9;
}

@media (max-width: 575.98px) {
    .lc-hero         { padding: 3rem 1rem 2.5rem; }
    .lc-section      { padding: 2.5rem 0; }
    .lc-cta-banner   { padding: 2.5rem 1rem; }
    .lc-product-hero { padding: 2rem 1rem; }
    .lc-product-hero h1,
    .lc-page-header h1 { font-size: 1.75rem; }
}