html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: #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;
}

/* Landing page */
.landing {
    max-width: 960px;
    margin: 0 auto;
    padding: 3rem 1.5rem 2rem;
}

.landing-hero {
    padding: 2rem 0;
}

.landing-title {
    font-size: 2.4rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #0f172a;
    line-height: 1.15;
}

.landing-subtitle {
    font-size: 1.15rem;
    color: #64748b;
    max-width: 560px;
    margin: 1rem auto 0;
    line-height: 1.6;
}

.feature-icon {
    font-size: 2rem;
    margin-bottom: 0.75rem;
}

.landing-features h3 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}
/* Shared palette: Bootstrap's color variables keep forms, tables, and alerts in sync. */
:root, [data-bs-theme="light"] {
    --dg-bg: #f3f6f5;
    --dg-surface: #ffffff;
    --dg-surface-alt: #f7faf9;
    --dg-ink: #16232b;
    --dg-muted: #536570;
    --dg-border: #dce6e3;
    --dg-accent: #126b60;
    --dg-accent-hover: #0a5149;
    --dg-button-ink: #ffffff;
    --dg-accent-soft: #e5f3ef;
    --dg-hero-glow: #d9eee8;
    --bs-body-bg: var(--dg-bg);
    --bs-body-color: var(--dg-ink);
    --bs-secondary-color: var(--dg-muted);
    --bs-border-color: var(--dg-border);
}
[data-bs-theme="dark"] {
    --dg-bg: #0d171d;
    --dg-surface: #17272f;
    --dg-surface-alt: #1b3038;
    --dg-ink: #eef7f4;
    --dg-muted: #b5cac9;
    --dg-border: #3b555d;
    --dg-accent: #62d9b7;
    --dg-accent-hover: #83e8cb;
    --dg-button-ink: #0c2927;
    --dg-accent-soft: #204038;
    --dg-hero-glow: #1c4943;
    --bs-body-bg: var(--dg-bg);
    --bs-body-color: var(--dg-ink);
    --bs-secondary-color: var(--dg-muted);
    --bs-border-color: var(--dg-border);
    --bs-tertiary-bg: var(--dg-surface-alt);
}
body { background: var(--dg-bg); color: var(--dg-ink); }
a, .btn-link { color: var(--dg-accent); }
a:hover, .btn-link:hover { color: var(--dg-accent-hover); }
.btn-primary { background: var(--dg-accent); border-color: var(--dg-accent); color: var(--dg-button-ink); font-weight: 700; }
.btn-primary:hover, .btn-primary:focus { background: var(--dg-accent-hover); border-color: var(--dg-accent-hover); color: var(--dg-button-ink); }
.btn-outline-primary { color: var(--dg-accent); border-color: var(--dg-accent); }
.btn-outline-primary:hover { background: var(--dg-accent); border-color: var(--dg-accent); color: var(--dg-button-ink); }
.btn-outline-secondary { color: var(--dg-ink); border-color: var(--dg-border); }
.btn-outline-secondary:hover { color: var(--dg-ink); background: var(--dg-surface-alt); border-color: var(--dg-muted); }
:focus-visible, .btn:focus-visible, a:focus-visible, button:focus-visible { outline: 3px solid var(--dg-accent); outline-offset: 3px; box-shadow: none; }
.card, .list-group-item, .modal-content, .dropdown-menu, .table, .alert { --bs-card-bg: var(--dg-surface); --bs-list-group-bg: var(--dg-surface); --bs-table-bg: var(--dg-surface); }
.card { border-color: var(--dg-border); color: var(--dg-ink); }
.form-control, .form-select { background-color: var(--dg-surface); color: var(--dg-ink); border-color: var(--dg-border); }
.form-control:focus, .form-select:focus { background-color: var(--dg-surface); color: var(--dg-ink); border-color: var(--dg-accent); box-shadow: 0 0 0 .2rem var(--dg-accent-soft); }
.text-muted { color: var(--dg-muted) !important; }
h1, h2, h3, h4, h5, h6 { color: var(--dg-ink); }

/* The public page uses a wider editorial grid so the product is visible immediately. */
.landing { width: min(100%, 1320px); max-width: none; margin: auto; padding: clamp(2rem, 5vw, 5rem) clamp(1.2rem, 4vw, 4rem) 5rem; }
.landing-hero { display: grid; grid-template-columns: minmax(0, .93fr) minmax(0, 1.07fr); align-items: center; gap: clamp(2.5rem, 5vw, 5.5rem); padding: 1rem 0 5.5rem; }
.eyebrow { display: inline-flex; align-items: center; gap: .6rem; text-transform: uppercase; font-size: .75rem; font-weight: 800; letter-spacing: .17em; color: var(--dg-accent); }
.eyebrow-dot { width: .52rem; height: .52rem; border-radius: 50%; background: currentColor; }
.landing-hero h1 { margin: 1.4rem 0 1.4rem; max-width: 650px; font-size: clamp(3.1rem, 5vw, 5.8rem); letter-spacing: -.065em; line-height: 1.04; font-weight: 800; }
.landing-hero h1 em { color: var(--dg-accent); font-style: normal; }
.landing-lede { max-width: 550px; color: var(--dg-muted); font-size: clamp(1.08rem, 1.5vw, 1.28rem); line-height: 1.75; }
.landing-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.landing-actions .btn, .landing-close .btn { border-radius: .7rem; padding: .85rem 1.3rem; font-size: 1rem; }
.landing-fineprint { color: var(--dg-muted); font-size: .84rem; margin-top: 1rem; }
.preview-frame { border-radius: 1.35rem; overflow: hidden; background: #13252d; color: #ecf8f4; box-shadow: 0 27px 80px rgba(5, 21, 24, .18); border: 1px solid #42615d; transform: rotate(1.2deg); }
.preview-top { display: flex; align-items: center; gap: .65rem; padding: .9rem 1.25rem; background: #0d1c24; font-size: .83rem; font-weight: 700; }
.preview-mark { display: inline-grid; place-items: center; width: 1.55rem; height: 1.55rem; background: #61d8b4; color: #102920; border-radius: .4rem; }
.preview-top-right { margin-left: auto; font-size: .64rem; letter-spacing: .12em; color: #b9d8d4; }
.preview-body { padding: clamp(1rem, 3vw, 2rem); background: radial-gradient(circle at 80% 0%, #1e4947, #13252d 55%); }
.preview-heading { display: flex; justify-content: space-between; align-items: end; gap: .8rem; }
.preview-kicker { color: #89cbbc; font-size: .66rem; letter-spacing: .14em; font-weight: 700; }
.preview-heading h2 { color: #f2fcf8; font-size: 1.55rem; letter-spacing: -.03em; margin: .3rem 0 0; }
.preview-date { color: #c0dbd5; font-size: .75rem; }
.preview-stats { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin: 1.6rem 0 1.7rem; }
.preview-stat { display: flex; flex-direction: column; border: 1px solid #42645f; background: #24433e; border-radius: .75rem; padding: 1rem; }
.preview-stat span { color: #c9e4df; font-size: .78rem; }
.preview-stat strong { font-size: 2rem; line-height: 1.3; }
.preview-stat small { color: #a5d9cd; }
.preview-list-title { display: flex; justify-content: space-between; color: #f2fcf8; font-weight: 700; font-size: .86rem; padding-bottom: .55rem; }
.preview-list-title span { color: #b9d8d4; font-size: .75rem; font-weight: 400; }
.preview-item { display: flex; gap: .8rem; align-items: center; padding: .8rem .4rem; border-top: 1px solid #35504f; }
.preview-item-icon { color: #75dcb8; font-size: 1.45rem; }
.preview-item strong, .preview-item small { display: block; }
.preview-item strong { color: #f2fcf8; font-size: .8rem; }
.preview-item small { color: #afcbc5; font-size: .7rem; margin-top: .15rem; }
.preview-pill { margin-left: auto; border-radius: 100px; background: #2b5149; color: #c5f6d9; padding: .3rem .5rem; font-size: .65rem; }
.preview-note { border-radius: .6rem; background: #294a43; color: #d1efe3; font-size: .73rem; padding: .8rem 1rem; margin-top: 1.1rem; }
.preview-note span { color: #90e7b7; margin-right: .4rem; }
.landing-process { border-top: 1px solid var(--dg-border); padding-top: 4rem; }
.section-intro { max-width: 640px; }
.section-intro h2, .landing-close h2 { font-size: clamp(2rem, 3vw, 3rem); font-weight: 750; letter-spacing: -.045em; line-height: 1.15; margin: 1rem 0; }
.section-intro p { color: var(--dg-muted); font-size: 1.1rem; }
.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 2rem; }
.feature-card { border: 1px solid var(--dg-border); border-radius: 1rem; background: var(--dg-surface); padding: 1.8rem; }
.feature-number { font-size: .7rem; font-weight: 800; letter-spacing: .14em; color: var(--dg-accent); }
.feature-glyph { display: grid; place-items: center; width: 3rem; height: 3rem; background: var(--dg-accent-soft); color: var(--dg-accent); border-radius: .8rem; font-size: 1.6rem; margin: 1.3rem 0; }
.feature-card h3 { font-size: 1.2rem; font-weight: 750; }
.feature-card p { color: var(--dg-muted); line-height: 1.7; margin-bottom: 0; }
.landing-close { display: flex; justify-content: space-between; align-items: center; gap: 2rem; margin-top: 4.5rem; padding: 2.7rem; border: 1px solid var(--dg-border); border-radius: 1.2rem; background: var(--dg-accent-soft); }
.landing-close div { max-width: 700px; }
.landing-close h2 { margin-bottom: 0; }
/* Real links allow plan comparison before Blazor connects and keep dark-mode text legible. */
.pricing-interval { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; margin: 1.5rem 0 2rem; }
.pricing-interval a { border: 1px solid var(--dg-border); border-radius: .65rem; color: var(--dg-ink); padding: .65rem 1rem; text-decoration: none; font-weight: 700; background: var(--dg-surface); }
.pricing-interval a:hover { border-color: var(--dg-accent); }
.pricing-interval a.selected { border-color: var(--dg-accent); background: var(--dg-accent-soft); color: var(--dg-accent); }
.pricing-savings { font-size: .75rem; color: var(--dg-muted); margin-left: .35rem; }
/* Keep plan emphasis and savings readable across both palettes. */
.pricing-container .text-success { color: var(--dg-accent) !important; }
.pricing-container .card.border-primary { border-color: var(--dg-accent) !important; }
.pricing-container .card-header.bg-primary { background: var(--dg-accent) !important; color: var(--dg-button-ink) !important; }
.pricing-container .current-plan-card { border: 2px solid var(--dg-accent); box-shadow: 0 0 0 .2rem var(--dg-accent-soft); }
.pricing-container .current-plan-badge { background: var(--dg-accent-soft); color: var(--dg-accent); border: 1px solid var(--dg-accent); font-weight: 700; }
/* FAQ uses native disclosure controls for keyboard and screen-reader access. */
.landing-faq { border-top: 1px solid var(--dg-border); margin-top: 4.5rem; padding-top: 4rem; }
.faq-list { display: grid; gap: .8rem; margin-top: 2rem; }
.faq-list details { background: var(--dg-surface); border: 1px solid var(--dg-border); border-radius: .85rem; padding: 1.15rem 1.35rem; }
.faq-list details[open] { border-color: var(--dg-accent); }
.faq-list summary { cursor: pointer; color: var(--dg-ink); font-weight: 700; font-size: 1.05rem; }
.faq-list summary::marker { color: var(--dg-accent); }
.faq-list p { color: var(--dg-muted); line-height: 1.7; margin: .8rem 0 0; max-width: 75ch; }
@media (max-width: 920px) { .landing-hero { grid-template-columns: 1fr; } .preview-frame { transform: none; max-width: 650px; } }
@media (max-width: 690px) { .landing { padding-top: 2rem; } .landing-hero { padding-bottom: 3rem; } .landing-hero h1 { font-size: clamp(2.8rem, 12vw, 4.3rem); } .feature-grid { grid-template-columns: 1fr; } .landing-close { align-items: flex-start; flex-direction: column; padding: 1.5rem; } .preview-date, .preview-top-right { display: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }