/* ---- CSS Custom Properties ---- */
:root {
    --navy: #002868;
    --red: #B22234;
    --gold: #c9a84c;
    --off-white: #f7f6f2;
    --text: #1a1a2e;
    --font-heading: 'Playfair Display', Georgia, serif;
    --font-body: 'Source Sans 3', 'Helvetica Neue', Arial, sans-serif;
}

/* ---- Seasonal Themes ----
   The palettes are generated by SiteThemes.RenderCss() and emitted into the document head, so a new
   holiday is one list entry rather than an edit here that is easy to forget. What stays below is the
   front-page motif, which is presentation rather than palette. */

/* The home hero used to carry a themed emoji here, driven by --theme-motif. Removed: a theme should
   change the palette and nothing else, and that decoration changed the height of the hero when you
   switched colour schemes. The themes still exist; they are colour only now. */

/* ---- Global ---- */
html, body {
    font-family: var(--font-body);
    color: var(--text);
    background: #fff;
    margin: 0;
    padding: 0;
}

h1, h2 {
    font-family: var(--font-heading);
}

h3, h4, h5, h6 {
    font-family: var(--font-body);
    font-weight: 700;
}

a, .btn-link {
    color: var(--navy);
}

/* ---- Buttons ---- */
.btn-primary {
    color: #fff;
    background-color: var(--red);
    border-color: #8b1a27;
}

.btn-primary:hover, .btn-primary:focus {
    background-color: #8b1a27;
    border-color: #6e1420;
    color: #fff;
}

.btn-outline-light:hover {
    color: var(--navy);
}

.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 var(--red);
}

/* ---- Section Utilities ---- */
.section {
    padding: 5rem 0;
}

.section-light {
    background: var(--off-white);
}

.section-dark {
    background: var(--navy);
    color: #fff;
}

.section-dark h2,
.section-dark h3 {
    color: #fff;
}

.section-dark .section-subtitle,
.section-dark p {
    color: rgba(255, 255, 255, 0.8);
}

.section-title {
    font-size: 2.25rem;
    font-weight: 800;
    margin-bottom: 1rem;
    color: var(--navy);
    line-height: 1.2;
}

.section-subtitle {
    font-size: 1.1rem;
    color: #666;
    margin-top: 0.25rem;
    margin-bottom: 2.5rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

/* ---- AI sales report viewer (employee portal) ---- */
.ai-report-body h2 { color: var(--navy); font-size: 1.5rem; }
.ai-report-body h3 { color: var(--navy); font-size: 1.15rem; margin-top: 1.25rem; }
.ai-report-body table { width: 100%; border-collapse: collapse; margin: 0.75rem 0; }
.ai-report-body th, .ai-report-body td { border: 1px solid #e2e2e2; padding: 6px 10px; text-align: left; font-size: 0.92rem; }

/* ---- Search Console dashboard (employee portal) ---- */
.gsc-tile-value {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--navy);
}

.gsc-tile-delta {
    font-size: 0.82rem;
    font-weight: 600;
}

.gsc-issue {
    border-left: 4px solid #888;
    background: #fafafa;
    border-radius: 0 8px 8px 0;
    padding: 10px 14px;
    margin-bottom: 10px;
}

.gsc-issue-error { border-left-color: #c0392b; }
.gsc-issue-warning { border-left-color: #e67e22; }

.gsc-issue-severity {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #888;
}

.gsc-issue-error .gsc-issue-severity { color: #c0392b; }
.gsc-issue-warning .gsc-issue-severity { color: #e67e22; }

.gsc-issue-problem {
    font-weight: 600;
    margin: 2px 0;
}

.gsc-issue-scope {
    font-size: 0.82rem;
    color: #777;
    word-break: break-all;
}

.gsc-issue-fix {
    font-size: 0.9rem;
    margin-top: 6px;
    color: #444;
}

/* ---- Score gauges (employee PageSpeed tracker) ---- */
.score-gauge {
    text-align: center;
}

.score-gauge-ring {
    width: 92px;
    height: 92px;
    border-radius: 50%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(closest-side, #fff 79%, transparent 80% 100%),
        conic-gradient(var(--gauge-color) calc(var(--gauge-pct) * 1%), #e8e8e8 0);
}

.score-gauge-ring span {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--gauge-color);
}

.score-gauge-label {
    margin-top: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #555;
}

/* ---- Feature tiles (pricing page feature grid) ---- */
.feature-tile {
    text-align: center;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 10px;
    height: 100%;
}

.feature-tile-icon {
    font-size: 2rem;
}

.feature-tile-name {
    font-weight: 700;
    margin-top: 6px;
}

.feature-tile-desc {
    font-size: 0.85rem;
    color: #666;
}

/* ---- Quote sidebar (service pages) ---- */
.quote-sidebar-title {
    font-family: var(--font-heading);
    color: var(--navy);
    margin-bottom: 0.75rem;
}

.quote-sidebar-text {
    color: #666;
    font-size: 0.95rem;
}

.quote-sidebar-phone {
    color: #999;
    font-size: 0.85rem;
}

/* ---- Page Hero (inner pages) ---- */
.page-hero {
    background: linear-gradient(135deg, var(--navy) 0%, #1a3a8a 100%);
    color: #fff;
    padding: 4.5rem 1.5rem 3.5rem;
    text-align: center;
}

.page-hero h1 {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    color: #fff;
    margin-bottom: 1rem;
}

.page-hero p {
    font-size: 1.15rem;
    opacity: 0.88;
    max-width: 620px;
    margin: 0 auto;
    line-height: 1.6;
}

/* ---- Lead pipeline stat tiles (employee lead database) ---- */
.lead-stat {
    background: #fff;
    border: 1px solid #e2e2e2;
    border-radius: 10px;
    padding: 0.85rem 0.5rem;
    height: 100%;
}
.lead-stat-num {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--navy);
    line-height: 1.1;
}
.lead-stat-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #888;
}

/* ---- Home Hero ---- */
.hero {
    background: linear-gradient(135deg, #0d1f5c 0%, var(--navy) 50%, #1a0a2e 100%);
    color: #fff;
    padding: 6rem 1.5rem 5rem;
    position: relative;
    overflow: hidden;
}

.hero-eyebrow {
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 1rem;
    display: block;
}

/* Veteran-owned, at the top of the hero.

   Set in the heading serif with wide tracking and a rule either side, rather than a filled pill with
   a star on it. The star read as a sticker — and it was doing a job the words already do.

   The rules are what keep this from merging into the eyebrow directly below, which is also gold and
   also uppercase; without them the two read as one wrapped sentence, which is how the claim
   disappeared into the page in the first place. The serif against the eyebrow's sans is the second
   half of that separation. */
.hero-veteran {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 0.9rem;
}

.hero-veteran::before,
.hero-veteran::after {
    content: "";
    width: 2.25rem;
    height: 1px;
    background: currentColor;
    opacity: 0.5;
}

/* The rules cost more than they give on a narrow screen, where they push the words onto two lines. */
@media (max-width: 480px) {
    .hero-veteran {
        gap: 0.55rem;
        font-size: 0.85rem;
        letter-spacing: 0.12em;
    }

    .hero-veteran::before,
    .hero-veteran::after {
        width: 1.1rem;
    }
}

.hero h1 {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 800;
    color: #fff;
    line-height: 1.1;
    margin-bottom: 1.25rem;
}

.hero h1 em {
    font-style: italic;
    color: var(--gold);
}

.hero-sub {
    font-size: 1.2rem;
    opacity: 0.88;
    max-width: 560px;
    margin-bottom: 2rem;
    line-height: 1.65;
}

.hero-cta {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

/* ---- Trust Bar ---- */
.trust-bar {
    background: var(--navy);
    color: #fff;
    padding: 1rem 1.5rem;
}

.trust-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem 2rem;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.88rem;
    font-weight: 600;
}

.trust-list li::before {
    content: '✓ ';
    color: var(--gold);
}

/* ---- Build + Host Deal Band ---- */
.build-host-band {
    background: linear-gradient(135deg, #1a0a2e 0%, #002868 60%, #1a3a8a 100%);
    padding: 2.5rem 1.5rem;
    border-top: 4px solid var(--gold);
    border-bottom: 4px solid var(--gold);
}

.build-host-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
    flex-wrap: wrap;
    max-width: 900px;
    margin: 0 auto;
}

.build-host-price {
    font-family: var(--font-heading);
    font-size: 3.5rem;
    font-weight: 800;
    color: var(--gold);
    line-height: 1;
    flex-shrink: 0;
}

.build-host-price span {
    font-size: 1.4rem;
    font-weight: 600;
    color: rgba(201,168,76,0.8);
}

.build-host-copy {
    color: #fff;
    text-align: left;
    max-width: 420px;
}

.build-host-copy strong {
    font-size: 1.15rem;
    display: block;
    margin-bottom: 0.4rem;
    color: #fff;
}

.build-host-copy p {
    font-size: 0.95rem;
    color: rgba(255,255,255,0.78);
    margin: 0;
    line-height: 1.55;
}

.build-host-btn {
    flex-shrink: 0;
}

@media (max-width: 600px) {
    .build-host-inner {
        flex-direction: column;
        gap: 1.25rem;
    }
    .build-host-copy {
        text-align: center;
    }
    .build-host-price {
        font-size: 2.75rem;
    }
}

/* ---- About Page Typography ---- */
.about-lead {
    font-size: 1.2rem;
    color: #333;
    line-height: 1.7;
    margin-bottom: 1.25rem;
    font-weight: 400;
}

.about-body {
    font-size: 1rem;
    color: #555;
    line-height: 1.8;
    margin-bottom: 1rem;
}

/* ---- Service Cards ---- */
.service-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
    height: 100%;
}

.service-card-link:hover {
    color: inherit;
}

.service-card {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 10px;
    padding: 2rem 1.5rem;
    height: 100%;
    transition: transform 0.2s, box-shadow 0.2s;
}

.service-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

.service-icon {
    font-size: 2.25rem;
    margin-bottom: 0.75rem;
    display: block;
}

.service-card h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 0.5rem;
}

.service-card p {
    color: #555;
    font-size: 0.95rem;
    margin: 0;
    line-height: 1.6;
}

/* ---- Pricing Cards ---- */
.pricing-card {
    background: #fff;
    border: 2px solid #e8e8e8;
    border-radius: 12px;
    padding: 2.5rem 2rem;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s, box-shadow 0.2s;
    text-align: center;
}

.pricing-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
}

.pricing-card.featured {
    border-color: var(--red);
}

.featured-badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--red);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.25rem 1rem;
    border-radius: 20px;
    white-space: nowrap;
}

.plan-name {
    font-family: var(--font-body);
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--navy);
    margin-bottom: 0.25rem;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

.plan-price {
    font-size: 3rem;
    font-weight: 800;
    color: var(--navy);
    line-height: 1;
    margin: 0.75rem 0 0.25rem;
}

.plan-price-unit {
    font-size: 1rem;
    font-weight: 400;
    color: #595959;
}

/* Smaller price text for non-numeric prices like "Custom" */
.plan-price-sm {
    font-size: 2rem;
}

/* Green "billed annually" savings note under the price */
.plan-annual-note {
    font-size: 0.85rem;
    color: #27ae60;
    font-weight: 600;
    margin-top: -6px;
    margin-bottom: 4px;
}

.plan-desc {
    font-size: 0.9rem;
    color: #595959;
    margin-bottom: 1rem;
}

.plan-features {
    list-style: none;
    padding: 0;
    margin: 1.25rem 0 2rem;
    text-align: left;
    flex: 1;
}

.plan-features li {
    padding: 0.4rem 0;
    font-size: 0.93rem;
    color: #444;
    border-bottom: 1px solid #f2f2f2;
}

.plan-features li::before {
    content: '✓ ';
    color: #26b050;
    font-weight: 700;
}

/* ---- Tech Stack Tags ---- */
.tech-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}

.tech-tag {
    /* Default: dark text on a light navy tint — readable on light sections/cards. */
    background: rgba(0, 40, 104, 0.08);
    color: var(--navy, #002868);
    border: 1px solid rgba(0, 40, 104, 0.2);
    border-radius: 20px;
    padding: 0.3rem 0.9rem;
    font-size: 0.85rem;
    font-weight: 600;
}

/* On dark (navy) sections, flip back to white-on-tint so tags read there too. */
.section-dark .tech-tag {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.25);
}

/* ---- Print / Save-as-PDF for report pages ---- */
@media print {
    .site-header, .site-footer, #blazor-error-ui, .no-print, .no-print * { display: none !important; }
    .btn, button, input, select, textarea { display: none !important; }
    body, .site-main { background: #fff !important; }
    .section, .section-light, .section-dark { padding: 0.5rem 0 !important; background: #fff !important; color: #000 !important; }
    .page-hero, .hero { background: #fff !important; color: #000 !important; padding: 0.25rem 0 0.75rem !important; box-shadow: none !important; }
    .page-hero *, .hero * { color: #000 !important; }
    a { color: #000 !important; text-decoration: none !important; }
    .container { max-width: 100% !important; }
    .lead-stat, .gsc-issue, table, tr, img, .card { break-inside: avoid; }
}

/* ---- Experience Badge ---- */
.exp-badge {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: var(--red);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 32px rgba(178, 34, 52, 0.4);
    flex-shrink: 0;
}

.exp-num {
    font-size: 3.25rem;
    font-weight: 800;
    line-height: 1;
}

.exp-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-align: center;
    line-height: 1.2;
    padding: 0 0.5rem;
}

/* ---- Contact Form ---- */
.contact-form-wrap {
    background: #fff;
    border-radius: 12px;
    padding: 2.5rem;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

.contact-info-block {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.contact-info-item {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.contact-info-icon {
    font-size: 1.4rem;
    flex-shrink: 0;
    width: 2rem;
    text-align: center;
}

/* ---- Validation ---- */
h1:focus {
    outline: none;
}

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

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

.validation-message {
    color: #e50000;
    font-size: 0.85rem;
    margin-top: 0.25rem;
    display: block;
}

/* ---- Error boundary ---- */
.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;
}

/* ---- Employee Debug Page ---- */
.debug-section {
    margin-bottom: 2rem;
}

.debug-section-title {
    font-family: 'Courier New', monospace;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 0.75rem;
    border-bottom: 1px solid rgba(201,168,76,0.3);
    padding-bottom: 0.35rem;
}

.debug-card {
    background: #161b22;
    border: 1px solid #30363d;
    border-radius: 8px;
    padding: 1rem 1.25rem;
    height: 100%;
}

.debug-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #8b949e;
    margin-bottom: 0.35rem;
}

.debug-value {
    font-size: 0.92rem;
    color: #e6edf3;
    line-height: 1.4;
    word-break: break-all;
}

.debug-mono {
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
}

.debug-table-wrap {
    overflow-x: auto;
    border: 1px solid #30363d;
    border-radius: 8px;
}

.debug-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    color: #e6edf3;
}

.debug-table th {
    background: #161b22;
    color: #8b949e;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0.6rem 1rem;
    text-align: left;
    border-bottom: 1px solid #30363d;
}

.debug-table td {
    padding: 0.5rem 1rem;
    border-bottom: 1px solid #21262d;
    vertical-align: top;
}

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

.debug-table tr:hover td {
    background: #1c2128;
}

/* ---- Booking Page ---- */
.booking-iframe-wrap {
    border: 2px solid #e8e8e8;
    border-radius: 10px;
    overflow: hidden;
    min-height: 780px;
    background: #f9f9f9;
}

/* ---- Comic Blog ---- */
.comic-masthead {
    background: var(--red);
    color: #fff;
    text-align: center;
    padding: 2rem 1rem 1.5rem;
    border-bottom: 6px solid var(--navy);
    position: relative;
    overflow: hidden;
}

.comic-masthead::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, rgba(255,255,255,0.18) 1px, transparent 1px);
    background-size: 8px 8px;
    pointer-events: none;
}

.comic-series-title {
    font-family: 'Bangers', cursive;
    font-size: clamp(2.8rem, 8vw, 5.5rem);
    letter-spacing: 0.06em;
    line-height: 1;
    text-shadow: 4px 4px 0 var(--navy);
    margin: 0.25rem 0;
    position: relative;
}

.comic-issue-line {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.9;
    margin: 0.2rem 0;
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    position: relative;
}

.comic-episode-title {
    font-family: 'Bangers', cursive;
    font-size: clamp(1.2rem, 3.5vw, 2.2rem);
    letter-spacing: 0.03em;
    color: var(--gold);
    text-shadow: 2px 2px 0 rgba(0,0,0,0.5);
    margin: 0.5rem 0 0.25rem;
    position: relative;
}

.comic-strip-wrap {
    border: 4px solid var(--navy);
    overflow: hidden;
    background: #fef9e7;
}

.comic-panel-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 3px solid var(--navy);
}

.comic-panel {
    border-right: 3px solid var(--navy);
    border-bottom: 3px solid var(--navy);
    min-height: 280px;
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fef9e7;
    overflow: hidden;
}

.comic-panel:nth-child(3n) {
    border-right: none;
}

.comic-panel.dotted::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, rgba(180,140,60,0.3) 1.5px, transparent 1.5px);
    background-size: 7px 7px;
    pointer-events: none;
}

.comic-panel-caption {
    background: var(--navy);
    color: #fff;
    font-family: 'Bangers', cursive;
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    padding: 0.2rem 0.5rem;
    text-align: center;
    flex-shrink: 0;
    position: relative;
}

.comic-panel-art {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 0.65rem;
    position: relative;
}

.speech-bubble {
    background: #fff;
    border: 2.5px solid #111;
    border-radius: 1rem;
    padding: 0.45rem 0.75rem;
    font-family: 'Bangers', cursive;
    font-size: 0.88rem;
    letter-spacing: 0.025em;
    position: relative;
    max-width: 93%;
    text-align: center;
    line-height: 1.3;
    margin-top: 0.4rem;
}

.speech-bubble::after {
    content: '';
    position: absolute;
    bottom: -11px;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #111;
}

.speech-bubble::before {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #fff;
    z-index: 1;
}

.comic-zap {
    font-family: 'Bangers', cursive;
    font-size: 2.2rem;
    color: var(--gold);
    text-shadow: 2px 2px 0 var(--red), -1px -1px 0 #000;
    letter-spacing: 0.04em;
    display: block;
    text-align: center;
    transform: rotate(-4deg);
    line-height: 1.1;
}

.comic-info-section {
    border: 4px solid var(--navy);
    border-top: none;
    background: #fff;
    overflow: hidden;
}

.comic-info-header {
    background: var(--navy);
    color: var(--gold);
    font-family: 'Bangers', cursive;
    font-size: 1.15rem;
    letter-spacing: 0.1em;
    padding: 0.6rem 1rem;
    text-align: center;
}

.comic-info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.comic-info-box {
    padding: 1.5rem;
    border-right: 2px solid #e0e0e0;
}

.comic-info-box:last-child {
    border-right: none;
}

.comic-info-box h4 {
    font-family: 'Bangers', cursive;
    font-size: 1.1rem;
    letter-spacing: 0.05em;
    color: var(--red);
    margin-bottom: 0.6rem;
}

.comic-info-box p,
.comic-info-box li {
    font-size: 0.9rem;
    color: #444;
    line-height: 1.6;
}

.comic-info-box ul {
    padding-left: 1.25rem;
    margin-bottom: 0;
}

.comic-next-issue {
    background: var(--gold);
    text-align: center;
    padding: 0.9rem 1rem;
    font-family: 'Bangers', cursive;
    font-size: 1.2rem;
    letter-spacing: 0.08em;
    color: var(--navy);
    border: 4px solid var(--navy);
    border-top: none;
}

@media (max-width: 768px) {
    .comic-panel-grid {
        grid-template-columns: 1fr;
    }

    .comic-panel {
        border-right: none;
    }

    .comic-panel:nth-child(3n) {
        border-right: none;
    }

    .comic-panel:last-child {
        border-bottom: none;
    }

    .comic-info-grid {
        grid-template-columns: 1fr;
    }

    .comic-info-box {
        border-right: none;
        border-bottom: 2px solid #e0e0e0;
    }

    .comic-info-box:last-child {
        border-bottom: none;
    }

    .comic-issue-line {
        gap: 0.75rem;
    }
}

/* ===== BLOG INDEX — COMIC CARDS ===== */
.comic-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.comic-card {
    background: #fff;
    border: 4px solid var(--navy);
    border-radius: 4px;
    padding: 1.75rem 1.5rem;
    text-align: center;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.comic-card-link:hover .comic-card {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

.comic-card-issue {
    font-family: 'Bangers', cursive;
    font-size: 0.85rem;
    letter-spacing: 0.12em;
    color: var(--gold);
    background: var(--navy);
    display: inline-block;
    padding: 0.2rem 0.75rem;
    border-radius: 2px;
    align-self: center;
}

.comic-card-art {
    font-size: 3rem;
    line-height: 1;
    margin: 0.5rem 0;
}

.comic-card-title {
    font-family: 'Bangers', cursive;
    font-size: 1.25rem;
    letter-spacing: 0.05em;
    color: var(--navy);
    line-height: 1.2;
}

.comic-card-desc {
    font-size: 0.9rem;
    color: #555;
    line-height: 1.6;
    flex: 1;
    margin-bottom: 0;
}

.comic-card-read {
    font-family: 'Bangers', cursive;
    font-size: 1rem;
    letter-spacing: 0.08em;
    color: var(--red);
    display: block;
    margin-top: auto;
}

/* ===== COMIC ISSUE SIDEBAR ===== */
.comic-sidebar {
    background: var(--navy);
    border: 4px solid var(--gold);
    border-radius: 4px;
    overflow: hidden;
    position: sticky;
    top: 1.5rem;
}

.comic-sidebar-header {
    background: var(--gold);
    color: var(--navy);
    font-family: 'Bangers', cursive;
    font-size: 1rem;
    letter-spacing: 0.12em;
    padding: 0.6rem 1rem;
    text-align: center;
}

.comic-sidebar-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.comic-sidebar-list li {
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.comic-sidebar-list li a {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.85rem 1rem;
    text-decoration: none;
    color: rgba(255,255,255,0.8);
    transition: background 0.15s ease, color 0.15s ease;
    font-size: 0.875rem;
    line-height: 1.4;
}

.comic-sidebar-list li a:hover {
    background: rgba(255,255,255,0.08);
    color: #fff;
}

.comic-sidebar-active a {
    background: rgba(201,168,76,0.15) !important;
    color: var(--gold) !important;
    font-weight: 600;
}

.csn-num {
    font-family: 'Bangers', cursive;
    font-size: 1.1rem;
    letter-spacing: 0.06em;
    color: var(--gold);
    flex-shrink: 0;
    line-height: 1.2;
}

.comic-sidebar-active .csn-num {
    color: var(--gold);
}

.csn-title {
    flex: 1;
}

.comic-sidebar-back {
    display: block;
    text-align: center;
    padding: 0.7rem 1rem;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.6);
    text-decoration: none;
    border-top: 1px solid rgba(255,255,255,0.1);
    transition: color 0.15s ease;
}

.comic-sidebar-back:hover {
    color: var(--gold);
}

@media (max-width: 991px) {
    .comic-sidebar {
        position: static;
        margin-top: 2rem;
    }
}

/* ── Comic PDF download button ─────────────────────────── */
.comic-print-btn {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 1rem;
    padding: 0.45rem 1rem;
    background: var(--navy);
    color: #fff;
    border: none;
    border-radius: 4px;
    font-family: 'Bangers', cursive;
    font-size: 1rem;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: background 0.15s;
}
.comic-print-btn:hover { background: var(--red); }

/* ── Print / Save as PDF ───────────────────────────────── */
@media print {
    .site-header,
    .site-footer,
    .col-lg-3,
    .comic-print-btn,
    .comic-next-issue,
    #blazor-error-ui {
        display: none !important;
    }

    /* Let main content fill the full page width */
    .col-lg-9 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding: 0 !important;
    }

    .row { margin: 0 !important; }

    body, section, .comic-strip-wrap, .comic-panel {
        background: #fff !important;
    }

    section { padding: 0.5rem 0 !important; }

    .comic-strip-wrap { border: 3px solid #001f5b; }

    .comic-panel {
        min-height: 200px;
        box-shadow: none !important;
        border-right: 2px solid #001f5b;
        border-bottom: 2px solid #001f5b;
        break-inside: avoid;
    }

    .comic-info-section { break-before: page; }

    .comic-info-box { break-inside: avoid; }

    a { color: inherit !important; text-decoration: none !important; }

    .container { max-width: 100% !important; padding: 0 0.5rem !important; }
}

/* ---- Remote Support page ---- */
.rs-step { display:flex; gap:1.1rem; align-items:flex-start; margin:1.9rem 0; }
.rs-num { flex:0 0 auto; width:2.4rem; height:2.4rem; border-radius:50%; background:var(--red); color:#fff; font-weight:800; display:flex; align-items:center; justify-content:center; font-size:1.15rem; }
.rs-body { flex:1; min-width:0; }
.rs-body h3 { margin:0 0 .4rem; font-size:1.25rem; color:#1a1a2e; }
.rs-body p { color:#444; }
.rs-btn { display:inline-block; background:var(--red); color:#fff !important; font-weight:700; padding:.7rem 1.4rem; border-radius:8px; text-decoration:none; margin:.4rem 0; }
.rs-btn:hover { filter:brightness(1.08); }
.rs-note { font-size:.88rem; color:#666; margin-top:.55rem; }
.rs-field { margin:.7rem 0; }
.rs-field label { display:block; font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#8a94a4; margin-bottom:.28rem; }
.rs-copy { display:flex; align-items:stretch; gap:.4rem; max-width:540px; }
.rs-copy code { flex:1; min-width:0; background:#f4f6fa; border:1px solid #dde3ec; border-radius:6px; padding:.55rem .7rem; font-family:ui-monospace,Consolas,monospace; font-size:.9rem; color:#1a2332; overflow-x:auto; white-space:nowrap; }
.rs-copy button { flex:0 0 auto; background:#002868; color:#fff; border:none; border-radius:6px; padding:0 1rem; font-weight:600; cursor:pointer; font-size:.85rem; }
.rs-copy button:hover { background:#013a94; }
.rs-details { margin:1rem 0 .2rem; border:1px dashed #cdd6e2; border-radius:8px; padding:.15rem .9rem; background:#fafbfd; }
.rs-details > summary { cursor:pointer; font-weight:600; color:#002868; padding:.6rem 0; list-style:none; font-size:.92rem; }
.rs-details > summary::-webkit-details-marker { display:none; }
.rs-details[open] > summary { border-bottom:1px solid #e6ebf2; margin-bottom:.55rem; }
.rs-details p { margin:.3rem 0 .55rem; font-size:.9rem; color:#555; }

/* ===== PWA / INSTALLED APP ===== */
@media (display-mode: standalone) {
    /* No pull-to-refresh bounce — a rep mid-call should never reload the app by accident. */
    html, body {
        overscroll-behavior-y: contain;
    }
}

/* Install banner. Markup is injected by wwwroot/js/pwa.js into #pwa-install on the
   employee portal, so it works on a statically rendered page with no WASM download. */
.pwa-install {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    background: var(--navy);
    color: #fff;
    border: 2px solid var(--gold);
    border-radius: 10px;
    padding: 1rem 1.25rem;
    margin-bottom: 2rem;
}

.pwa-install-icon {
    font-size: 1.9rem;
    line-height: 1;
    flex: 0 0 auto;
}

.pwa-install-body {
    flex: 1 1 260px;
    min-width: 0;
}

.pwa-install-body h3 {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 800;
    color: #fff;
    margin: 0 0 0.15rem;
}

.pwa-install-body p {
    font-size: 0.9rem;
    color: #dce4f5;
    margin: 0;
}

.pwa-install-actions {
    flex: 0 0 auto;
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.pwa-install-btn {
    background: var(--gold);
    color: var(--navy);
    border: none;
    border-radius: 8px;
    padding: 0.6rem 1.3rem;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
}

.pwa-install-btn:hover {
    filter: brightness(1.08);
}

.pwa-install-dismiss {
    background: none;
    border: none;
    color: #aebbd6;
    font-size: 1.4rem;
    line-height: 1;
    padding: 0.2rem 0.4rem;
    cursor: pointer;
}

.pwa-install-dismiss:hover {
    color: #fff;
}

/* iOS has no install prompt API — reps get the Share-sheet steps instead. */
.pwa-install-steps {
    font-size: 0.9rem;
    color: #dce4f5;
    margin: 0.35rem 0 0;
}

.pwa-install-steps strong {
    color: var(--gold);
}

@media (max-width: 480px) {
    .pwa-install {
        padding: 0.9rem 1rem;
    }

    .pwa-install-actions {
        width: 100%;
    }

    .pwa-install-btn {
        flex: 1;
    }
}

/* ---- Billing toggle (pricing page) ----
   Monthly/Yearly switching in CSS alone: the radios sit before the cards and drive which price shows
   via sibling selectors. No JavaScript and no render mode, so the pricing page stays statically
   rendered — a crawler reads real prices instead of an empty shell awaiting WebAssembly, and both
   prices are in the HTML regardless of which is visible. */
.billing-toggle > input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.billing-toggle-track {
    display: inline-flex;
    margin: 0 auto 1.75rem;
    padding: 0.25rem;
    border-radius: 999px;
    background: #eef1f6;
    border: 1px solid #dfe4ec;
}

.billing-toggle {
    text-align: center;
}

.billing-toggle-track label {
    cursor: pointer;
    padding: 0.45rem 1.15rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.9rem;
    color: #5a6472;
    transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
    user-select: none;
}

.billing-save {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 800;
    background: #e7f6ec;
    color: #1b7a3d;
}

/* Selected pill */
#billing-monthly:checked ~ .billing-toggle-track label[for="billing-monthly"],
#billing-yearly:checked ~ .billing-toggle-track label[for="billing-yearly"] {
    background: #fff;
    color: var(--navy);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

/* Which price each card shows. Cards with no annual price keep their single price in both states —
   one-time and hourly rates aren't billed monthly, so a toggle must not blank them out. */
.plan-price-yearly,
.plan-note-yearly {
    display: none;
}

#billing-yearly:checked ~ * .plan-price-monthly,
#billing-yearly:checked ~ * .plan-note-monthly {
    display: none;
}

#billing-yearly:checked ~ * .plan-price-yearly,
#billing-yearly:checked ~ * .plan-note-yearly {
    display: block;
}

/* Keyboard users: the radio is invisible, so its focus has to show on the label. */
.billing-toggle > input[type="radio"]:focus-visible ~ .billing-toggle-track label[for="billing-monthly"],
.billing-toggle > input[type="radio"]:focus-visible ~ .billing-toggle-track label[for="billing-yearly"] {
    outline: 2px solid var(--navy);
    outline-offset: 2px;
}

/* ---- Guest tenant marker ----
   Set on <body> when the signed-in person is working in a tenant that isn't DixieLand's own. A tester
   sees the same screens as staff by design, which also means nothing on screen says whose data it is —
   and the two accounts are one sign-out apart. The colour shift is deliberately unmissable rather than
   tasteful: it exists for the moment someone is about to import leads or send mail from the wrong
   account. */
body.tenant-guest {
    --navy: #4a2c7a;
    --red: #7a3fb8;
    --gold: #b98cf0;
}

body.tenant-guest::before {
    content: "Tester account \2014 not DixieLand's own data";
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 2000;
    padding: 0.3rem 0.75rem;
    text-align: center;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: #fff;
    background: repeating-linear-gradient(135deg, #4a2c7a, #4a2c7a 12px, #5b3690 12px, #5b3690 24px);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
}

/* The banner is fixed, so the page needs to start below it rather than under it. */
body.tenant-guest {
    padding-top: 1.6rem;
}

@media print {
    /* A printed call sheet from a tester account should still say so — it's the artefact most likely
       to be looked at away from the screen. */
    body.tenant-guest::before {
        position: static;
        box-shadow: none;
        background: none;
        color: #000;
        border-bottom: 1px solid #000;
    }

    body.tenant-guest {
        padding-top: 0;
    }
}

/* Who you're signed in as, on the portal hero. Empty for anyone else, so it collapses to nothing
   rather than rendering an empty pill. */
body.tenant-home { --account-label: "Employee"; }
body.tenant-guest { --account-label: "Tester"; }

.account-chip::before {
    content: var(--account-label, "");
}

.account-chip:not(:empty)::before,
body.tenant-home .account-chip::before,
body.tenant-guest .account-chip::before {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    background: rgba(255, 255, 255, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.35);
}

/* Marketing Care explainer, beside the price. The card says what's included; this says what it's for
   and — as importantly — what it isn't, so it doesn't read as a second version of Website Care. */
.marketing-explainer {
    height: 100%;
    padding: 1.5rem;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #e3e7ee;
}

.marketing-explainer h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 0.75rem;
}

.marketing-explainer p {
    font-size: 0.94rem;
    line-height: 1.65;
    color: #4a5568;
    margin-bottom: 0.9rem;
}

.marketing-explainer-note {
    margin-bottom: 0 !important;
    padding-top: 0.9rem;
    border-top: 1px solid #eef1f6;
    font-size: 0.88rem !important;
    color: #7a8496 !important;
}

/* ---- Legal pages (privacy, terms) ----
   Long-form text that people actually have to read, usually because a carrier or a lawyer told them
   to. Narrower measure and looser leading than the marketing pages. */
.legal-page {
    max-width: 46rem;
}

.legal-page h2 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--navy);
    margin: 2rem 0 0.6rem;
}

.legal-page p,
.legal-page li {
    font-size: 1rem;
    line-height: 1.7;
    color: #3f4756;
}

.legal-page ul {
    padding-left: 1.3rem;
    margin-bottom: 1rem;
}

.legal-page li {
    margin-bottom: 0.4rem;
}

.legal-updated {
    font-size: 0.85rem !important;
    color: #8a94a6 !important;
}

/* The mobile-information paragraph carriers look for during A2P registration. Called out because
   it's the one sentence a reviewer is scanning for. */
.legal-emphasis {
    padding: 0.9rem 1.1rem;
    background: #f7f9fc;
    border-left: 4px solid var(--navy);
    border-radius: 6px;
}

/* ---- Website chat assistant ---- */
.sitechat-bubble {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.1rem;
    border: none;
    border-radius: 999px;
    background: var(--navy);
    color: #fff;
    font-weight: 700;
    font-size: 0.92rem;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    cursor: pointer;
}

.sitechat-bubble:hover { filter: brightness(1.12); }
.sitechat-bubble.is-open .sitechat-bubble-text { display: none; }

.sitechat-panel {
    position: fixed;
    right: 1rem;
    bottom: 4.6rem;
    z-index: 1500;
    display: flex;
    flex-direction: column;
    width: min(23rem, calc(100vw - 2rem));
    height: min(31rem, calc(100vh - 7rem));
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #d9dfe8;
    box-shadow: 0 14px 44px rgba(0, 0, 0, 0.24);
}

.sitechat-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.7rem 0.9rem;
    background: var(--navy);
    color: #fff;
}

.sitechat-close {
    border: none;
    background: none;
    color: #fff;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0.85;
}

.sitechat-log {
    flex: 1;
    overflow-y: auto;
    padding: 0.9rem;
    background: #f7f9fc;
}

.sitechat-msg { display: flex; margin-bottom: 0.6rem; }
.sitechat-user { justify-content: flex-end; }

.sitechat-bubble-text-inner {
    max-width: 85%;
    padding: 0.55rem 0.8rem;
    border-radius: 12px;
    font-size: 0.92rem;
    line-height: 1.5;
    white-space: pre-wrap;
}

.sitechat-assistant .sitechat-bubble-text-inner {
    background: #fff;
    border: 1px solid #e3e7ee;
    color: #333;
}

.sitechat-user .sitechat-bubble-text-inner {
    background: var(--navy);
    color: #fff;
}

/* The assistant's job is to hand people off, so the links it offers have to look like links. */
.sitechat-assistant .sitechat-bubble-text-inner a { color: var(--navy); font-weight: 600; }
.sitechat-user .sitechat-bubble-text-inner a { color: #fff; text-decoration: underline; }

.sitechat-form { display: flex; gap: 0.4rem; padding: 0.6rem; border-top: 1px solid #eef1f6; }

.sitechat-input {
    flex: 1;
    min-width: 0;
    padding: 0.55rem 0.7rem;
    border: 1px solid #d9dfe8;
    border-radius: 8px;
    font-size: 0.92rem;
}

.sitechat-send {
    padding: 0.55rem 0.9rem;
    border: none;
    border-radius: 8px;
    background: var(--red);
    color: #fff;
    font-weight: 700;
    cursor: pointer;
}

.sitechat-foot {
    padding: 0.5rem 0.9rem 0.7rem;
    font-size: 0.75rem;
    color: #8a94a6;
    text-align: center;
}

.sitechat-foot a { color: var(--navy); }

/* The chat is for visitors. On the print pages it would land on paper, and in the app it is noise. */
@media print {
    .sitechat-bubble, .sitechat-panel { display: none !important; }
}

/* ---- Booking page (/book) ---- */
.book-day { margin: 1.4rem 0 0; }

.book-day-name {
    font-family: var(--font-heading, Georgia, serif);
    color: var(--navy);
    font-size: 1.08rem;
    font-weight: 800;
    margin: 0 0 0.55rem;
    padding-bottom: 0.3rem;
    border-bottom: 2px solid #eef1f6;
}

.book-times { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* Big enough to hit with a thumb. Most people book from a phone, and a cramped grid of times is
   the fastest way to lose one. */
.book-time {
    min-width: 5.4rem;
    padding: 0.6rem 0.9rem;
    border: 2px solid #d9dfe8;
    border-radius: 8px;
    background: #fff;
    color: var(--navy);
    font-weight: 700;
    font-size: 0.98rem;
    cursor: pointer;
}

.book-time:hover { border-color: var(--gold); background: #fdfaf2; }
.book-time:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }

/* ---- In-app help (AI Sales Assistant) ---- */
.help-launch {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1400;
    width: 2.9rem;
    height: 2.9rem;
    border: none;
    border-radius: 50%;
    background: var(--navy);
    color: #fff;
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.25);
    cursor: pointer;
}

.help-launch:hover { filter: brightness(1.15); }
.help-launch:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

.help-panel {
    position: fixed;
    right: 1rem;
    bottom: 4.4rem;
    z-index: 1400;
    display: flex;
    flex-direction: column;
    width: min(24rem, calc(100vw - 2rem));
    max-height: min(34rem, calc(100vh - 7rem));
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #d9dfe8;
    box-shadow: 0 14px 44px rgba(0, 0, 0, 0.24);
}

.help-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.7rem 0.9rem;
    background: var(--navy);
    color: #fff;
}

.help-close {
    border: none;
    background: none;
    color: #fff;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}

.help-body { flex: 1; overflow-y: auto; padding: 0.9rem; font-size: 0.92rem; color: #333; }
.help-purpose { color: #16202e; font-weight: 600; margin: 0 0 0.9rem; line-height: 1.45; }

.help-h {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #8a94a6;
    font-weight: 800;
    margin: 1.1rem 0 0.5rem;
}

.help-steps { margin: 0; padding-left: 1.2rem; }
.help-steps li { margin-bottom: 0.6rem; line-height: 1.45; }

/* The step you're on stays findable after the panel re-renders. */
.help-steps li.is-current { font-weight: 700; color: var(--navy); }

.help-show {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.1rem 0.5rem;
    border: 1px solid var(--navy);
    border-radius: 999px;
    background: #fff;
    color: var(--navy);
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

.help-show:hover { background: var(--navy); color: #fff; }

.help-problem { border-top: 1px solid #eef1f6; padding: 0.5rem 0; }
.help-problem summary { cursor: pointer; font-weight: 600; color: var(--navy); }
.help-problem p { margin: 0.45rem 0 0; color: #444; line-height: 1.45; }

.help-note {
    background: #fdfaf2;
    border-left: 4px solid var(--gold);
    padding: 0.5rem 0.7rem;
    margin: 0 0 0.8rem;
    font-size: 0.86rem;
}

.help-foot {
    padding: 0.5rem 0.9rem 0.7rem;
    border-top: 1px solid #eef1f6;
    font-size: 0.78rem;
    color: #8a94a6;
    text-align: center;
}

/* What "show me" does. A ring rather than an overlay: the control stays usable while highlighted,
   so you can follow the step instead of dismissing the help to reach the button. */
.help-spotlight {
    position: relative;
    z-index: 1300;
    outline: 3px solid var(--gold) !important;
    outline-offset: 3px;
    border-radius: 6px;
    animation: help-pulse 1.1s ease-in-out 3;
}

@keyframes help-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(201, 168, 76, 0.55); }
    50%      { box-shadow: 0 0 0 0.6rem rgba(201, 168, 76, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .help-spotlight { animation: none; }
}

@media print {
    .help-launch, .help-panel { display: none !important; }
}

/* ---- Empty states ---- */
.empty-state {
    text-align: center;
    padding: 2.4rem 1.2rem;
    border: 2px dashed #dfe5ee;
    border-radius: 12px;
    background: #fbfcfe;
}

.empty-icon { font-size: 2.4rem; line-height: 1; margin-bottom: 0.6rem; }

.empty-title {
    font-family: var(--font-heading, Georgia, serif);
    color: var(--navy);
    font-size: 1.25rem;
    font-weight: 800;
    margin: 0 0 0.5rem;
}

.empty-body {
    max-width: 32rem;
    margin: 0 auto 1.1rem;
    color: #4a5568;
    line-height: 1.55;
}

.empty-hint { margin: 0.9rem 0 0; font-size: 0.85rem; color: #8a94a6; }

/* A filtered-empty list isn't a problem, just a narrow view — so it reads calmer than a truly
   empty one, which is a job to be done. */
.empty-state.is-filtered { border-style: solid; border-color: #eef1f6; background: #fff; }

/* ---- Confirming something irreversible ---- */
.confirm-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    padding: 0.35rem 0.55rem;
    border: 2px solid var(--red, #c0392b);
    border-radius: 8px;
    background: #fdf3f2;
}

.confirm-ask { font-size: 0.85rem; color: #16202e; }
.confirm-ask strong { color: var(--red, #c0392b); }
.confirm-type { width: 9rem; }

@media print { .confirm-wrap { display: none; } }

/* ---- Invite screen (/employee/invite) ---- */
.invite-card {
    background: #fff;
    border: 1px solid #e3e7ee;
    border-radius: 14px;
    padding: 1.6rem;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.06);
}

.invite-card-title {
    font-family: var(--font-heading, Georgia, serif);
    color: var(--navy);
    font-size: 1.3rem;
    font-weight: 800;
    margin: 0 0 1.1rem;
}

/* The consent tick. Styled as a warning until it's ticked, because unticked is the state where a
   text silently doesn't send — and someone who typed a number expects one to go. */
.invite-consent {
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
    border-radius: 10px;
    border: 2px solid #e8c9a0;
    background: #fdf8f0;
}

.invite-consent.is-ticked { border-color: #b7ddb7; background: #f3faf3; }
.invite-consent-note { margin: 0.4rem 0 0 1.9rem; font-size: 0.82rem; color: #6b7280; line-height: 1.45; }

.invite-preview-title {
    font-family: var(--font-heading, Georgia, serif);
    color: var(--navy);
    font-size: 1.05rem;
    font-weight: 800;
    margin: 0 0 0.7rem;
}

.invite-preview {
    border: 1px solid #e3e7ee;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 1rem;
    background: #fff;
}

.invite-preview.is-empty {
    padding: 1.6rem 1.1rem;
    text-align: center;
    color: #8a94a6;
    font-size: 0.88rem;
    border-style: dashed;
    background: #fbfcfe;
}

.invite-preview-head {
    padding: 0.5rem 0.9rem;
    background: #f2f5fa;
    border-bottom: 1px solid #e3e7ee;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6b7280;
}

.invite-preview-body { padding: 0.9rem; }
.invite-preview-to { font-size: 0.78rem; color: #8a94a6; margin-bottom: 0.4rem; word-break: break-all; }
.invite-preview-text { margin: 0.5rem 0 0; font-size: 0.85rem; color: #6b7280; line-height: 1.45; }

.invite-preview-note {
    margin: 0.5rem 0 0;
    padding: 0.5rem 0.7rem;
    background: #f7f9fc;
    border-left: 3px solid var(--gold);
    font-size: 0.86rem;
    color: #4a5568;
    font-style: italic;
}

/* The text as it will actually look on a phone. */
.invite-bubble {
    background: var(--navy);
    color: #fff;
    padding: 0.7rem 0.9rem;
    border-radius: 14px 14px 14px 4px;
    font-size: 0.88rem;
    line-height: 1.45;
    white-space: pre-wrap;
}

.invite-done { text-align: center; }

.invite-tick {
    width: 3.4rem;
    height: 3.4rem;
    margin: 0 auto 0.8rem;
    border-radius: 50%;
    background: #2f855a;
    color: #fff;
    font-size: 1.9rem;
    line-height: 3.4rem;
    font-weight: 800;
}

.invite-tick.is-bad { background: var(--red, #c0392b); }

.invite-outcome { list-style: none; padding: 0; margin: 0 0 1rem; text-align: left; max-width: 26rem; }

.invite-outcome li {
    display: flex;
    gap: 0.6rem;
    padding: 0.6rem 0.2rem;
    border-bottom: 1px solid #eef1f6;
    font-size: 0.92rem;
}

.invite-outcome li strong { min-width: 3.6rem; color: var(--navy); }
.invite-outcome li.is-sent span { color: #2f855a; font-weight: 600; }
.invite-outcome li.is-skipped span { color: #8a94a6; }
.invite-outcome li.is-failed span { color: var(--red, #c0392b); font-weight: 600; }

/* ---- Email campaign designer (/employee/campaigns) ---- */
.cmp-card {
    background: #fff;
    border: 1px solid #e3e7ee;
    border-radius: 12px;
    padding: 1.2rem;
}

.cmp-hint { color: #8a94a6; font-weight: 400; font-size: 0.82rem; }

.cmp-section-title {
    font-family: var(--font-heading, Georgia, serif);
    color: var(--navy);
    font-size: 1.05rem;
    font-weight: 800;
    margin: 1.3rem 0 0.7rem;
}

.cmp-assist {
    padding: 0.8rem 0.9rem;
    margin-bottom: 0.5rem;
    background: #f7f9fc;
    border-left: 4px solid var(--gold);
    border-radius: 4px;
}

.cmp-block {
    border: 1px solid #e3e7ee;
    border-radius: 8px;
    padding: 0.6rem;
    margin-bottom: 0.5rem;
    background: #fbfcfe;
}

.cmp-block-head { display: flex; gap: 0.3rem; align-items: center; margin-bottom: 0.4rem; }
.cmp-kind { max-width: 11rem; }

.cmp-add { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.6rem; }

.cmp-tokens {
    margin-top: 0.9rem;
    font-size: 0.82rem;
    color: #6b7280;
}

.cmp-tokens code {
    background: #eef2f9;
    color: var(--navy);
    padding: 0.05rem 0.3rem;
    border-radius: 4px;
}

.cmp-test { border-top: 1px solid #eef1f6; padding-top: 0.9rem; }

/* The inbox line, so the subject and preview text can be judged the way they'll be seen —
   in a list, next to each other, before anyone opens anything. */
.cmp-inbox {
    border: 1px solid #e3e7ee;
    border-radius: 8px 8px 0 0;
    padding: 0.7rem 0.9rem;
    background: #f7f9fc;
    font-size: 0.9rem;
}

.cmp-inbox-row { color: #16202e; }
.cmp-inbox-subject { margin-top: 0.15rem; font-weight: 600; }
.cmp-inbox-preview { color: #8a94a6; font-weight: 400; }

.cmp-preview {
    width: 100%;
    height: 34rem;
    border: 1px solid #e3e7ee;
    border-top: none;
    border-radius: 0 0 8px 8px;
    background: #f4f6fa;
}

.cmp-preview-empty {
    padding: 2.5rem 1rem;
    text-align: center;
    color: #8a94a6;
    border: 1px dashed #dfe5ee;
    border-top: none;
    border-radius: 0 0 8px 8px;
    background: #fbfcfe;
}

/* Sending a campaign — set apart from the rest of the designer, because it's the one action here
   whose effect can't be undone. */
.cmp-send { border-top: 1px solid #eef1f6; padding-top: 0.9rem; }
.cmp-progress { padding: 0.6rem 0; }

.cmp-bar {
    height: 0.5rem;
    background: #eef2f9;
    border-radius: 999px;
    overflow: hidden;
    margin: 0.5rem 0 0.35rem;
}

.cmp-bar-fill { height: 100%; background: var(--red, #c0392b); transition: width 0.4s ease; }

/* The written audit at the top of a Total Sales report — the part a prospect reads, with the
   measured sections below it as the evidence. */
.ts-narrative {
    background: #fff;
    border: 1px solid #e3e7ee;
    border-left: 5px solid var(--gold);
    border-radius: 10px;
    padding: 1.4rem 1.6rem;
    margin-bottom: 1.6rem;
    line-height: 1.65;
    color: #2d3648;
}

.ts-narrative-title {
    font-family: var(--font-heading, Georgia, serif);
    color: var(--navy);
    font-size: 1.25rem;
    font-weight: 800;
    margin: 0 0 0.9rem;
}

.ts-narrative h2, .ts-narrative h3 {
    font-family: var(--font-heading, Georgia, serif);
    color: var(--navy);
    font-size: 1.05rem;
    font-weight: 800;
    margin: 1.2rem 0 0.5rem;
}

.ts-narrative p { margin: 0 0 0.8rem; }
.ts-narrative ul { margin: 0 0 0.9rem; padding-left: 1.3rem; }
.ts-narrative li { margin-bottom: 0.3rem; }

/* ---- SMS opt-in (/text-updates) ---- */
/* The consent block is boxed and set apart because a carrier reviewer reads exactly this, and because
   somebody agreeing to be texted deserves to see plainly what they're agreeing to. */
.optin-consent {
    padding: 1rem 1.1rem;
    border: 2px solid #dfe5ee;
    border-radius: 10px;
    background: #fbfcfe;
}

.optin-disclosures {
    margin: 0.6rem 0 0 1.9rem;
    font-size: 0.86rem;
    line-height: 1.55;
    color: #4a5568;
}

.optin-links { margin: 0.6rem 0 0 1.9rem; font-size: 0.84rem; color: #6b7280; }
.optin-footnote { margin: 1rem 0 0; font-size: 0.85rem; color: #8a94a6; }

/* ---- Consent & do-not-contact (/employee/compliance) ---- */
.cmpl-card { background: #fff; border: 1px solid #e3e7ee; border-radius: 12px; padding: 1.1rem 1.2rem; }

.cmpl-title {
    font-family: var(--font-heading, Georgia, serif);
    color: var(--navy);
    font-size: 1.15rem;
    font-weight: 800;
    margin: 1.4rem 0 0.7rem;
}

.cmpl-counts { font-family: inherit; font-size: 0.82rem; font-weight: 400; color: #8a94a6; margin-left: 0.5rem; }

/* The answer to "can I contact this person" reads at a glance, in the colour that matches the answer. */
.cmpl-result { margin-top: 0.6rem; padding: 0.85rem 1rem; border-radius: 8px; line-height: 1.5; }
.cmpl-result.is-blocked { background: #fdf3f2; border: 2px solid var(--red, #c0392b); }
.cmpl-result.is-ok { background: #f3faf3; border: 2px solid #b7ddb7; }
.cmpl-result.is-blocked strong { color: var(--red, #c0392b); }
.cmpl-result.is-ok strong { color: #2f855a; }

.cmpl-consent-proof {
    margin-top: 0.7rem;
    padding-top: 0.6rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    font-size: 0.88rem;
}

/* Not on the list isn't the same as having agreed — this is the distinction that costs money. */
.cmpl-warn {
    margin-top: 0.7rem;
    padding: 0.6rem 0.8rem;
    background: #fdf8f0;
    border-left: 4px solid #e8c9a0;
    border-radius: 4px;
    font-size: 0.88rem;
}

.cmpl-consent-text {
    margin: 0.4rem 0 0;
    padding: 0.6rem 0.8rem;
    background: #f7f9fc;
    border-radius: 6px;
    font-size: 0.82rem;
    line-height: 1.5;
    color: #4a5568;
    max-width: 34rem;
}

/* ── Placeholders look like placeholders ──────────────────────────────────────
   Bootstrap's default is #6c757d, which is the same weight as real body text —
   on a phone a prompt like "Pensacola, FL" reads as something already typed in,
   and somebody taps Search expecting it to be used. Reported from the lead
   import page, and true of every form on the site.

   #a3a9b3 is light enough to read as a prompt and still passes contrast against
   white for the people who need it to. Italic is deliberately NOT used: it makes
   an empty field look like an error message. */
::placeholder {
    color: #a3a9b3;
    opacity: 1;   /* Firefox dims placeholders again on top of the colour. */
}

/* Fainter still once they are typing, so the prompt gets out of the way rather
   than sitting behind the cursor competing with the first character. */
:focus::placeholder {
    color: #c3c8d0;
}

/* ---- Compliance: consent given out loud (29 Aug 2026) ---- */

/* The script is the evidence — what is read aloud is what gets stored — so it is set like something
   meant to be spoken, not like a hint that gets skimmed once and paraphrased forever after. */
.cmpl-script {
    border-left: 3px solid var(--navy, #002868);
    background: #f4f6fa;
    padding: 0.7rem 0.9rem;
    margin: 0.5rem 0 0.9rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0 6px 6px 0;
}

.cmpl-hint {
    font-size: 0.88rem;
    color: #5a6675;
    margin-bottom: 0.2rem;
}

.cmpl-check {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
    color: #4a5568;
}