:root {
    --ink: #1a2332;
    --muted: #5c6b7a;
    --brand: #2f6f4f;
    --brand-dark: #234f39;
    --bg: #f7f8f5;
    --card: #ffffff;
    --border: #e4e7e1;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    color: var(--ink);
    background: var(--bg);
    line-height: 1.5;
}

.section-inner {
    max-width: 1080px;
    margin: 0 auto;
    padding: 4rem 1.5rem;
}

/* Nav */
.nav {
    position: sticky;
    top: 0;
    background: rgba(247, 248, 245, 0.92);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--border);
    z-index: 10;
}

.nav-inner {
    max-width: 1080px;
    margin: 0 auto;
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.brand {
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--brand-dark);
}

.nav nav a {
    margin-left: 1.75rem;
    color: var(--muted);
    text-decoration: none;
    font-size: 0.95rem;
}

.nav nav a:hover {
    color: var(--brand-dark);
}

.nav nav {
    display: flex;
    align-items: center;
}

.nav-support {
    color: var(--brand-dark) !important;
    font-weight: 600;
}

.nav-user {
    margin-left: 1.75rem;
    color: var(--muted);
    font-size: 0.9rem;
}

/* Below ~700px, the full link list (Features/Pricing/My Subscription/Admin/
   username/Log out) no longer fits on one row — .nav-inner is a plain
   space-between flex row with no wrap, so anything past the visible width
   (often the Admin link and Log out button) silently overflows off the
   right edge instead of just looking cramped. Wrapping onto a second,
   centered row keeps every link reachable without needing a hamburger menu
   for a nav this small. */
@media (max-width: 700px) {
    .nav-inner {
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 0.5rem;
        padding: 0.85rem 1rem;
    }

    .nav nav {
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 0.5rem;
    }

    .nav nav a,
    .nav-user,
    .nav-cta,
    .nav-link-btn {
        margin-left: 0.9rem;
    }
}

.nav-cta {
    margin-left: 1.75rem !important;
    background: var(--brand);
    color: white !important;
    padding: 0.45rem 1rem;
    border-radius: 6px;
}

.nav-link-btn {
    margin-left: 1.75rem;
    background: none;
    border: none;
    color: var(--muted);
    font-size: 0.95rem;
    cursor: pointer;
    padding: 0;
    font-family: inherit;
}

.nav-link-btn:hover {
    color: var(--brand-dark);
}

/* Auth pages (Login / Register / Lockout / AccessDenied) */
.auth-shell {
    max-width: 440px;
    margin: 3rem auto;
    padding: 0 1.5rem;
}

.auth-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 2rem;
}

.auth-card h1 {
    font-size: 1.5rem;
    margin: 0 0 1.25rem;
}

.auth-alt {
    margin-top: 1.25rem;
    text-align: center;
    font-size: 0.9rem;
}

.auth-alt a {
    color: var(--brand-dark);
}

/* Forms */
.form-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.35rem;
    color: var(--muted);
}

.form-control {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.95rem;
}

.mb-3 {
    margin-bottom: 1rem;
}

.form-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.form-check-label {
    font-size: 0.9rem;
    color: var(--muted);
}

.btn-primary-full {
    display: block;
    width: 100%;
    background: var(--brand);
    color: white;
    border: none;
    padding: 0.75rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
}

.btn-primary-full:hover {
    background: var(--brand-dark);
}

.plan-cta:disabled {
    opacity: 0.6;
    cursor: default;
}

/* Alerts / validation */
.alert {
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.alert-danger {
    background: #fdecec;
    color: #a12727;
}

.alert-success {
    background: #e9f5ec;
    color: #1e6b3a;
}

.text-danger {
    color: #c0392b;
    font-size: 0.85rem;
}

.validation-message {
    display: block;
    margin-top: 0.25rem;
}

code {
    background: rgba(0, 0, 0, 0.06);
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    font-size: 0.85em;
}

.current-plan-banner {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}

.history-heading {
    margin-top: 3rem;
}

.payment-history-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
}

.payment-history-table th,
.payment-history-table td {
    text-align: left;
    padding: 0.65rem 1rem;
    border-bottom: 1px solid var(--border);
}

.payment-history-table th {
    color: var(--muted);
    font-weight: 600;
    font-size: 0.85rem;
}

.payment-history-table tr:last-child td {
    border-bottom: none;
}

/* Hero */
.hero {
    background: linear-gradient(180deg, #eef4ee 0%, var(--bg) 100%);
    text-align: center;
}

.hero-inner {
    max-width: 720px;
    margin: 0 auto;
    padding: 5rem 1.5rem 4rem;
}

.hero h1 {
    font-size: 2.4rem;
    line-height: 1.2;
    margin: 0 0 1rem;
    color: var(--ink);
}

.subtitle {
    font-size: 1.1rem;
    color: var(--muted);
    margin: 0 0 2rem;
}

.cta {
    display: inline-block;
    background: var(--brand);
    color: white;
    text-decoration: none;
    padding: 0.85rem 1.75rem;
    border-radius: 8px;
    font-weight: 600;
    transition: background 0.15s;
}

.cta:hover {
    background: var(--brand-dark);
}

.cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    margin-top: 0.5rem;
}

.cta-secondary {
    display: inline-block;
    background: var(--card);
    color: var(--brand-dark);
    border: 1px solid var(--brand);
    text-decoration: none;
    padding: 0.85rem 1.75rem;
    border-radius: 8px;
    font-weight: 600;
    transition: background 0.15s;
}

.cta-secondary:hover {
    background: var(--bg);
}

/* Features */
.features h2, .plans h2, .contact h2 {
    text-align: center;
    font-size: 1.8rem;
    margin: 0 0 2.5rem;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
}

.feature-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.5rem;
}

.feature-card h3 {
    margin: 0 0 0.5rem;
    font-size: 1.05rem;
    color: var(--brand-dark);
}

.feature-card p {
    margin: 0;
    color: var(--muted);
    font-size: 0.95rem;
}

/* Plans */
.plans {
    background: var(--card);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.plans-sub {
    text-align: center;
    color: var(--muted);
    margin: -1.5rem 0 2.5rem;
}

.plan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
    align-items: stretch;
}

.plan-card {
    position: relative;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 2rem 1.75rem;
    display: flex;
    flex-direction: column;
}

.plan-card.featured {
    background: var(--ink);
    color: white;
    border-color: var(--ink);
    transform: scale(1.03);
}

.plan-card.featured h3,
.plan-card.featured .price {
    color: white;
}

.plan-card.featured ul li {
    color: #d7ddd6;
}

.promo-banner {
    background: #fff3cd;
    color: #7a5c00;
    border: 1px solid #ffe08a;
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.badge {
    position: absolute;
    top: -0.75rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--brand);
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.3rem 0.9rem;
    border-radius: 999px;
}

.plan-card h3 {
    margin: 0 0 0.5rem;
    font-size: 1.15rem;
}

.price {
    font-size: 2.5rem;
    font-weight: 800;
    margin: 0 0 1.25rem;
    color: var(--brand-dark);
}

/* Only the billing-period suffix (e.g. "/yr") is de-emphasized — the amount
   itself is a <span> too (so JS can swap it when the platform dropdown
   changes), and this selector used to catch that span as well, which made
   the Pro/Business price look small instead of bold. */
.price .price-period {
    font-size: 1rem;
    font-weight: 400;
    color: var(--muted);
}

/* The Pro card has a dark background (.plan-card.featured) — the muted grey
   above is nearly invisible against it, so use a light, semi-transparent
   white there instead of the default. */
.plan-card.featured .price-period {
    color: rgba(255, 255, 255, 0.75);
}

.platform-select {
    width: 100%;
    padding: 0.5rem 0.75rem;
    margin: -0.5rem 0 1.25rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--card);
    color: var(--ink);
    font-size: 0.9rem;
}

.plan-card ul {
    list-style: none;
    padding: 0;
    margin: 0 0 1.75rem;
    flex-grow: 1;
}

.plan-card ul li {
    padding: 0.4rem 0;
    color: var(--muted);
    font-size: 0.92rem;
    border-bottom: 1px solid var(--border);
}

.plan-card.featured ul li {
    border-bottom-color: rgba(255, 255, 255, 0.15);
}

.plan-cta {
    display: block;
    text-align: center;
    text-decoration: none;
    padding: 0.7rem;
    border-radius: 8px;
    font-weight: 600;
    background: var(--brand);
    color: white;
}

.plan-card.featured .plan-cta {
    background: white;
    color: var(--ink);
}

/* Contact / footer */
.contact {
    text-align: center;
}

.contact p {
    color: var(--muted);
}

.footer-meta {
    margin-top: 2rem;
    font-size: 0.8rem;
    color: #9aa5ad;
}

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;
}

/* Admin pages use MudBlazor components (see Components/Pages/Admin/) —
   layout/table/form styling lives in MudBlazor's own CSS, not here. */
.admin-mud-table {
    overflow-x: auto;
    display: block;
}