/* ==========================================================================
   ACH Tax Services — Shared Design System
   Palette: deep navy ink + signature gold + vibrant teal accent
   Author: ACH Management Group, LLC
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@600;700&family=Dancing+Script:wght@600;700&family=Great+Vibes&family=JetBrains+Mono:wght@400;500;700&family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
    /* Brand */
    --ink: #0b1220;
    --navy-900: #0a1c33;
    --navy-800: #102b4e;
    --navy-700: #163c6b;
    --navy-600: #1d4e8a;
    --navy-500: #2a66ad;

    --gold-600: #a8841f;
    --gold-500: #c8a02c;
    --gold-400: #e0bb4a;
    --gold-300: #f0d585;

    --teal-700: #0b6b6b;
    --teal-600: #0e8a8a;
    --teal-500: #14b8a6;
    --teal-400: #4fd1c5;

    --amber: #f59e0b;
    --red-600: #dc2626;
    --red-500: #ef4444;
    --green-600: #059669;

    /* Neutrals — warm, clean */
    --white: #ffffff;
    --cream: #fdfbf6;
    --paper: #fffefb;
    --sand-50: #faf7f0;
    --sand-100: #f4efe3;
    --sand-200: #e8e0cf;
    --line: #e3ddcd;

    --gray-50: #f8fafc;
    --gray-100: #f1f5f9;
    --gray-200: #e2e8f0;
    --gray-300: #cbd5e1;
    --gray-400: #94a3b8;
    --gray-500: #64748b;
    --gray-600: #475569;
    --gray-700: #334155;
    --gray-800: #1e293b;
    --gray-900: #0f172a;

    /* Shape & depth */
    --radius-lg: 20px;
    --radius: 14px;
    --radius-sm: 10px;
    --radius-pill: 999px;

    --shadow-xs: 0 1px 2px rgba(11, 18, 32, .06);
    --shadow-sm: 0 2px 8px rgba(11, 18, 32, .07);
    --shadow-md: 0 8px 24px -8px rgba(11, 18, 32, .16), 0 2px 6px rgba(11, 18, 32, .05);
    --shadow-lg: 0 20px 44px -18px rgba(11, 18, 32, .30), 0 6px 16px -8px rgba(11, 18, 32, .10);
    --shadow-gold: 0 12px 30px -12px rgba(200, 160, 44, .55);

    --ring: 0 0 0 3px rgba(20, 184, 166, .25);

    --nav-h: 74px;
    --container: 1180px;
    --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-display: 'Playfair Display', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
}

/* ---------------------------------------------------------------- Reset -- */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.65;
    color: var(--gray-800);
    background-color: var(--sand-50);
    background-image:
        radial-gradient(1100px 520px at 8% -8%, rgba(20, 184, 166, .10), transparent 60%),
        radial-gradient(1000px 560px at 100% 0%, rgba(200, 160, 44, .14), transparent 62%),
        radial-gradient(900px 700px at 50% 110%, rgba(29, 78, 138, .10), transparent 65%);
    background-attachment: fixed;
    min-height: 100vh;
    padding-top: var(--nav-h);
    overflow-x: hidden;
}

body.no-nav { padding-top: 0; }

img { max-width: 100%; height: auto; display: block; }

a { color: var(--navy-600); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4, h5 { line-height: 1.22; margin: 0 0 .5em; color: var(--navy-900); }
p { margin: 0 0 1em; }

:focus-visible {
    outline: 3px solid var(--teal-500);
    outline-offset: 2px;
    border-radius: 4px;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    background: var(--navy-800);
    color: #fff;
    padding: 12px 18px;
    border-radius: 0 0 var(--radius-sm) 0;
    font-weight: 600;
}
.skip-link:focus { left: 0; }

.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 22px;
}

/* ============================================================ TOP NAV ==== */
.site-nav {
    position: fixed;
    inset: 0 0 auto 0;
    height: var(--nav-h);
    z-index: 120;
    background: rgba(10, 28, 51, .93);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border-bottom: 1px solid rgba(240, 213, 133, .28);
    box-shadow: 0 6px 26px -14px rgba(0, 0, 0, .7);
    transition: background .25s ease, box-shadow .25s ease;
}
.site-nav.is-scrolled {
    background: rgba(8, 21, 38, .98);
    box-shadow: 0 10px 34px -16px rgba(0, 0, 0, .85);
}

/* thin reading-progress bar riding on top of the nav */
.nav-progress {
    position: absolute;
    left: 0; bottom: -1px;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg, var(--teal-500), var(--gold-400));
    transition: width .12s linear;
}

.nav-inner {
    max-width: var(--container);
    height: 100%;
    margin: 0 auto;
    padding: 0 22px;
    display: flex;
    align-items: center;
    gap: 18px;
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    text-decoration: none;
}
.nav-brand:hover { text-decoration: none; }

.nav-brand img {
    height: 46px;
    width: 46px;
    object-fit: contain;
    border-radius: 12px;
    background: #fff;
    padding: 4px;
    border: 1.5px solid rgba(224, 187, 74, .55);
    box-shadow: 0 3px 12px rgba(0, 0, 0, .30);
}

.nav-brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.nav-brand-text strong {
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: .2px;
}
.nav-brand-text span {
    color: var(--gold-300);
    font-size: 10px;
    letter-spacing: .7px;
    text-transform: uppercase;
    font-weight: 500;
}

.nav-spacer { flex: 1; }

.nav-links {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-links > li { position: relative; }

.nav-links a.nav-link,
.nav-links button.nav-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 14px;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 14.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, .86);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: color .2s ease, background .2s ease;
    white-space: nowrap;
}
.nav-links a.nav-link:hover,
.nav-links button.nav-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, .10);
    text-decoration: none;
}
.nav-links a.nav-link.is-active {
    color: var(--gold-300);
}
.nav-links a.nav-link.is-active::after {
    content: '';
    position: absolute;
    left: 14px; right: 14px; bottom: 2px;
    height: 2px;
    background: linear-gradient(90deg, var(--gold-400), var(--teal-400));
    border-radius: 2px;
}

.caret { font-size: 10px; opacity: .8; transition: transform .2s ease; }
.nav-dropdown.open .caret { transform: rotate(180deg); }

/* dropdown */
.dropdown-menu {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    min-width: 264px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 8px;
    margin: 0;
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.nav-dropdown.open .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.dropdown-menu::before {
    content: '';
    position: absolute;
    top: -6px; left: 26px;
    width: 12px; height: 12px;
    background: var(--paper);
    border-left: 1px solid var(--line);
    border-top: 1px solid var(--line);
    transform: rotate(45deg);
}
.dropdown-menu a {
    display: block;
    padding: 11px 14px;
    border-radius: var(--radius-sm);
    color: var(--gray-800);
    font-size: 14.5px;
    font-weight: 500;
    transition: background .18s ease, color .18s ease, transform .18s ease;
}
.dropdown-menu a:hover {
    background: linear-gradient(90deg, rgba(20, 184, 166, .12), rgba(200, 160, 44, .12));
    color: var(--navy-800);
    text-decoration: none;
    transform: translateX(3px);
}
.dropdown-menu a small {
    display: block;
    font-size: 12px;
    font-weight: 400;
    color: var(--gray-500);
    margin-top: 2px;
}

.nav-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    border-radius: var(--radius-pill);
    background: linear-gradient(135deg, var(--gold-400), var(--gold-500));
    color: #241a02 !important;
    font-weight: 700;
    font-size: 14.5px;
    box-shadow: var(--shadow-gold);
    transition: transform .2s ease, filter .2s ease;
    white-space: nowrap;
}
.nav-cta:hover {
    transform: translateY(-2px);
    filter: brightness(1.05);
    text-decoration: none;
}

.nav-toggle {
    display: none;
    width: 46px; height: 46px;
    border: 1px solid rgba(255, 255, 255, .25);
    background: rgba(255, 255, 255, .08);
    border-radius: var(--radius-sm);
    cursor: pointer;
    padding: 0;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
}
.nav-toggle span {
    display: block;
    width: 22px; height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: transform .25s ease, opacity .25s ease;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================== HERO ===== */
.hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(900px 420px at 12% 0%, rgba(20, 184, 166, .22), transparent 60%),
        linear-gradient(135deg, var(--navy-900) 0%, var(--navy-800) 52%, var(--navy-700) 100%);
    color: #fff;
    padding: 78px 0 86px;
    border-bottom: 4px solid var(--gold-500);
}
.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(115deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 22px);
    opacity: .5;
    pointer-events: none;
}
.hero > .container { position: relative; z-index: 2; }

.hero-grid {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 54px;
    align-items: center;
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 16px;
    border-radius: var(--radius-pill);
    background: rgba(20, 184, 166, .18);
    border: 1px solid rgba(79, 209, 197, .45);
    color: var(--teal-400);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 22px;
}

.hero h1 {
    font-family: var(--font-display);
    font-size: clamp(2.3rem, 4.8vw, 3.7rem);
    font-weight: 700;
    color: #fff;
    margin-bottom: 18px;
    line-height: 1.12;
    letter-spacing: -0.6px;
}
.hero h1 .accent {
    background: linear-gradient(100deg, var(--gold-300), var(--gold-400) 55%, var(--teal-400));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero-sub {
    font-size: 1.16rem;
    font-weight: 600;
    color: var(--gold-300);
    max-width: 54ch;
    margin: 0 0 14px;
    line-height: 1.45;
}

.hero-lead {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, .82);
    max-width: 62ch;
    margin-bottom: 16px;
}
.hero-lead--tight { margin-bottom: 30px; }
.hero-lead strong { color: #fff; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }

.hero-panel {
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: var(--radius-lg);
    padding: 26px;
    backdrop-filter: blur(8px);
}
.hero-panel h3 {
    font-family: var(--font-mono);
    color: var(--gold-300);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: .9px;
    text-transform: uppercase;
    margin-bottom: 16px;
}
.hero-panel ul { list-style: none; margin: 0; padding: 0; }
.hero-panel li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 11px 0;
    border-bottom: 1px dashed rgba(255, 255, 255, .16);
    font-size: 15px;
    color: rgba(255, 255, 255, .92);
}
.hero-panel li:last-child { border-bottom: 0; }
.hero-panel li i { color: var(--teal-400); margin-top: 3px; }
.hero-panel .panel-contact {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 14.5px;
}
.hero-panel .panel-contact a { color: #fff; font-weight: 600; }
.hero-panel .panel-contact span { color: var(--gold-300); }

/* ============================================================ BUTTONS ==== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 13px 24px;
    border-radius: var(--radius-pill);
    border: 1px solid transparent;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
    text-decoration: none;
    line-height: 1.2;
}
.btn:hover { transform: translateY(-2px); text-decoration: none; }
.btn:active { transform: translateY(0); }

.btn-primary {
    background: linear-gradient(135deg, var(--navy-700), var(--navy-800));
    color: #fff;
    box-shadow: var(--shadow-md);
}
.btn-primary:hover { box-shadow: var(--shadow-lg); }

.btn-gold {
    background: linear-gradient(135deg, var(--gold-400), var(--gold-500));
    color: #241a02;
    box-shadow: var(--shadow-gold);
}

.btn-teal {
    background: linear-gradient(135deg, var(--teal-500), var(--teal-700));
    color: #fff;
    box-shadow: 0 12px 28px -12px rgba(14, 138, 138, .6);
}

.btn-ghost {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .35);
    color: #fff;
}
.btn-ghost:hover { background: rgba(255, 255, 255, .16); }

.btn-outline {
    background: #fff;
    border-color: var(--navy-600);
    color: var(--navy-700);
}
.btn-outline:hover { background: var(--navy-700); color: #fff; }

.btn-danger {
    background: linear-gradient(135deg, var(--red-500), var(--red-600));
    color: #fff;
    box-shadow: 0 12px 26px -14px rgba(220, 38, 38, .7);
}

.btn-sm { padding: 9px 16px; font-size: 13.5px; }
.btn-block { width: 100%; }

/* =========================================================== SECTIONS ==== */
.section { padding: 72px 0; }
.section--tight { padding: 52px 0; }
.section--tint {
    background: linear-gradient(180deg, rgba(255, 255, 255, .72), rgba(244, 239, 227, .55));
    border-top: 1px solid rgba(227, 221, 205, .9);
    border-bottom: 1px solid rgba(227, 221, 205, .9);
}

/* Micro-copy & metadata: letter-spaced upper-case monospace for UI labels,
   kickers, badges, stat captions and table metadata. */
.mono-label,
.section-head .eyebrow,
.hero-eyebrow,
.audience-kicker,
.tile-badge,
.breadcrumb,
.stat span,
.tax-table.rate-table .est-note,
.site-footer h4,
.footer-brand small,
.nav-brand-text span,
.hero-panel h3,
.pill {
    font-family: var(--font-mono);
}

.section-head { max-width: 760px; margin: 0 auto 44px; text-align: center; }
.section-head .eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--teal-700);
    margin-bottom: 12px;
}
.section-head h2 {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 3.2vw, 2.5rem);
    font-weight: 600;
    letter-spacing: -0.3px;
    line-height: 1.18;
    margin-bottom: 14px;
}
.section-head p { color: var(--gray-600); font-size: 1.05rem; margin: 0; }

.rule {
    width: 68px; height: 4px;
    margin: 18px auto 0;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--gold-400), var(--teal-500));
}

/* ============================================================= CARDS ===== */
.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.card {
    position: relative;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 28px;
    overflow: hidden;
}

.tile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 28px 26px 24px;
    color: inherit;
    overflow: hidden;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.tile::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 5px;
    background: linear-gradient(90deg, var(--gold-400), var(--teal-500));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .28s ease;
}
.tile:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: var(--navy-600);
    text-decoration: none;
}
.tile:hover::before { transform: scaleX(1); }

.tile-icon {
    width: 58px; height: 58px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 16px;
    font-size: 25px;
    color: #fff;
    background: linear-gradient(135deg, var(--navy-700), var(--navy-900));
    box-shadow: var(--shadow-sm);
    transition: transform .28s ease;
}
.tile:hover .tile-icon { transform: scale(1.07) rotate(-4deg); }
.tile-icon.gold { background: linear-gradient(135deg, var(--gold-400), var(--gold-600)); color: #241a02; }
.tile-icon.teal { background: linear-gradient(135deg, var(--teal-500), var(--teal-700)); }

/* ============================================== AUDIENCE PATHS ========== */
.audience-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 38px;
}
.audience-head h2 {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.2px;
    line-height: 1.2;
    font-size: clamp(1.65rem, 3vw, 2.25rem);
    margin-bottom: 12px;
}
.audience-head p { color: var(--gray-600); font-size: 1.04rem; margin: 0; }

.audience-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px;
}
.audience-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 32px 30px 28px;
    overflow: hidden;
}
.audience-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 6px;
}
.audience-card.is-individual::before { background: linear-gradient(90deg, var(--teal-500), var(--teal-700)); }
.audience-card.is-business::before { background: linear-gradient(90deg, var(--gold-400), var(--gold-600)); }

.audience-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.audience-card.is-individual .audience-kicker { color: var(--teal-700); }
.audience-card.is-business .audience-kicker { color: var(--gold-600); }

.audience-card h3 {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: -0.1px;
    color: var(--navy-900);
    margin-bottom: 6px;
}
.audience-card > p { color: var(--gray-600); font-size: .96rem; margin-bottom: 18px; }

.audience-list {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
    display: grid;
    gap: 11px;
    flex: 1;
}
.audience-list li {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    font-size: .95rem;
    color: var(--gray-700);
    line-height: 1.5;
}
.audience-list i { margin-top: 4px; flex: none; font-size: .92rem; }
.audience-card.is-individual .audience-list i { color: var(--teal-600); }
.audience-card.is-business .audience-list i { color: var(--gold-500); }

.audience-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.audience-actions .btn { flex: 1; min-width: 190px; }

@media (max-width: 900px) {
    .audience-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .audience-card { padding: 26px 20px 22px; }
    .audience-actions .btn { min-width: 0; }
}


.tile h3 {
    font-size: 1.12rem;
    margin: 4px 0 0;
    color: var(--navy-800);
}
.tile p {
    color: var(--gray-600);
    font-size: .95rem;
    margin: 0;
    flex: 1;
}
.tile .tile-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: .9rem;
    font-weight: 700;
    color: var(--navy-700);
    margin-top: 6px;
    transition: gap .2s ease, color .2s ease;
}
.tile:hover .tile-link { gap: 12px; color: var(--teal-700); }

.tile-badge {
    position: absolute;
    top: 16px; right: 16px;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .5px;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: var(--radius-pill);
    background: rgba(200, 160, 44, .18);
    color: var(--gold-600);
    border: 1px solid rgba(200, 160, 44, .4);
}

/* ============================================================ NOTICE ===== */
.notice {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    background: linear-gradient(135deg, rgba(20, 184, 166, .09), rgba(200, 160, 44, .10));
    border: 1px solid rgba(20, 184, 166, .32);
    border-left: 5px solid var(--teal-600);
    border-radius: var(--radius);
    padding: 22px 24px;
    box-shadow: var(--shadow-sm);
}
.notice i { font-size: 22px; color: var(--teal-700); margin-top: 2px; }
.notice h3 { font-size: 1.05rem; margin-bottom: 8px; color: var(--navy-800); }
.notice p { font-size: .95rem; color: var(--gray-700); margin-bottom: 8px; }
.notice p:last-child { margin-bottom: 0; }
.notice strong { color: var(--navy-800); }

.callout {
    border-radius: var(--radius);
    padding: 16px 18px;
    font-size: .93rem;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin: 0 0 18px;
}
.callout-info { background: #e7f6f5; border: 1px solid #a7ded9; color: #0b5c5c; }
.callout-warn { background: #fff6e2; border: 1px solid #f4d38a; color: #7a5107; }
.callout i { margin-top: 2px; }

/* ============================================================= STATS ==== */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.stat {
    text-align: center;
    padding: 24px 18px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
.stat b {
    display: block;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 1.72rem;
    letter-spacing: -0.5px;
    color: var(--navy-800);
    line-height: 1.1;
}
.stat span { font-size: .74rem; letter-spacing: .4px; text-transform: uppercase; color: var(--gray-500); font-weight: 500; }

/* ============================================================= TABLES ==== */
.table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    background: #fff;
    -webkit-overflow-scrolling: touch;
}
table.tax-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .95rem;
    min-width: 460px;
}
table.tax-table caption {
    caption-side: top;
    text-align: left;
    padding: 16px 18px 6px;
    font-weight: 700;
    color: var(--navy-800);
}
table.tax-table th {
    background: linear-gradient(135deg, var(--navy-800), var(--navy-700));
    color: #fff;
    font-weight: 600;
    font-size: .9rem;
    letter-spacing: .3px;
    padding: 14px 16px;
    text-align: left;
    border-bottom: 2px solid var(--gold-500);
}
table.tax-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--gray-200);
    color: var(--gray-700);
}
table.tax-table tbody tr:nth-child(even) { background: var(--gray-50); }
table.tax-table tbody tr:hover { background: rgba(20, 184, 166, .08); }
table.tax-table tbody tr:last-child td { border-bottom: 0; }

/* ---------------------------------------------- marginal rate table ------ */
/* this table is compact enough to shrink into narrow containers, so it does
   not inherit the wide min-width used by the other reference tables */
table.tax-table.rate-table { min-width: 0; }
.tax-table.rate-table caption {
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--navy-800);
    border-bottom: 1px solid var(--sand-200);
    padding-bottom: 12px;
}
.tax-table.rate-table th .unit {
    display: block;
    margin-top: 3px;
    font-family: var(--font-mono);
    font-size: .68rem;
    font-weight: 400;
    letter-spacing: .2px;
    text-transform: none;
    color: rgba(255, 255, 255, .72);
}
.tax-table.rate-table th[scope="row"] {
    background: transparent;
    border-bottom: 1px solid var(--gray-200);
    width: 150px;
}
.tax-table.rate-table td.num,
.tax-table.rate-table th.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.tax-table.rate-table td.num { white-space: nowrap; }
.tax-table.rate-table th.num { white-space: normal; }
.tax-table.rate-table td.num { font-weight: 600; color: var(--navy-800); }
.tax-table.rate-table td.num .range {
    display: block;
    font-size: .74rem;
    font-weight: 500;
    color: var(--gray-500);
}
.tax-table.rate-table tbody tr:nth-child(even) th[scope="row"] { background: transparent; }
.tax-table.rate-table tbody tr:hover th[scope="row"] { background: transparent; }
.tax-table.rate-table tbody tr.is-married td.num { color: #8a6a12; }

.rate-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 58px;
    padding: 6px 12px;
    border-radius: var(--radius-pill);
    font-family: var(--font-mono);
    font-size: .86rem;
    font-weight: 700;
    letter-spacing: 0;
    color: #fff;
    background: linear-gradient(135deg, var(--navy-600), var(--navy-800));
    box-shadow: 0 4px 12px -6px rgba(11, 18, 32, .5);
}
.rate-pill.is-top { background: linear-gradient(135deg, var(--gold-500), var(--gold-600)); color: #241a02; }

.tax-table.rate-table tfoot td {
    padding: 16px 16px 4px;
    border-top: 2px solid var(--sand-200);
    border-bottom: 0;
    background: var(--sand-50);
    font-size: .84rem;
    color: var(--gray-600);
}
.tax-table.rate-table tfoot strong { color: var(--navy-800); }
.tax-table.rate-table .est-note {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 8px;
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .3px;
    text-transform: uppercase;
    color: #8a6a12;
}
.tax-table.rate-table .est-note i { color: var(--gold-500); }
@media (max-width: 620px) {
    .tax-table.rate-table { min-width: 0; width: 100%; font-size: .86rem; }
    .tax-table.rate-table th[scope="row"] { width: 78px; padding-left: 10px; padding-right: 6px; }
    .tax-table.rate-table th, .tax-table.rate-table td { padding: 10px 8px; }
    .tax-table.rate-table th.num, .tax-table.rate-table td.num { padding-right: 10px; }
    .tax-table.rate-table thead th .unit { font-size: .66rem; }
    .tax-table.rate-table caption { font-size: .94rem; padding: 14px 10px 10px; }
    .tax-table.rate-table tfoot td { padding: 14px 12px 4px; }
    .rate-pill { min-width: 44px; padding: 5px 9px; font-size: .82rem; }
}


.table-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    font-size: .86rem;
    color: var(--gray-500);
    margin-top: 12px;
}
.table-legend span { display: inline-flex; align-items: center; gap: 7px; }
.swatch { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }

/* ============================================================== FOOTER === */
.site-footer {
    background: linear-gradient(160deg, var(--navy-900), #061224);
    color: rgba(255, 255, 255, .78);
    padding: 54px 0 0;
    margin-top: 70px;
    border-top: 4px solid var(--gold-500);
}
.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.1fr;
    gap: 36px;
    padding-bottom: 40px;
}
.site-footer h4 {
    color: #fff;
    font-size: .76rem;
    letter-spacing: .8px;
    text-transform: uppercase;
    margin-bottom: 16px;
}
.site-footer p { font-size: .92rem; margin-bottom: 10px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 9px; font-size: .92rem; }
.site-footer a { color: rgba(255, 255, 255, .82); }
.site-footer a:hover { color: var(--gold-300); }
.footer-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}
.footer-brand img {
    height: 46px;
    width: 46px;
    object-fit: contain;
    background: #fff;
    border-radius: 12px;
    padding: 4px;
    border: 1.5px solid rgba(224, 187, 74, .55);
}
.footer-brand strong { color: #fff; font-size: 1.05rem; display: block; }
.footer-brand small { color: var(--gold-300); font-size: .68rem; letter-spacing: .8px; text-transform: uppercase; }
.footer-contact li { display: flex; gap: 10px; align-items: flex-start; }
.footer-contact i { color: var(--gold-400); margin-top: 3px; }
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .14);
    padding: 20px 0 26px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: space-between;
    align-items: center;
    font-size: .85rem;
    color: rgba(255, 255, 255, .6);
}
.footer-bottom nav { display: flex; gap: 18px; flex-wrap: wrap; }

/* ======================================================= PAGE HEADER ==== */
.page-header {
    position: relative;
    background:
        radial-gradient(700px 320px at 85% 0%, rgba(20, 184, 166, .22), transparent 60%),
        linear-gradient(135deg, var(--navy-900), var(--navy-700));
    color: #fff;
    padding: 56px 0 60px;
    border-bottom: 4px solid var(--gold-500);
}
.page-header::after {
    content: '';
    position: absolute; inset: 0;
    background-image: repeating-linear-gradient(115deg, rgba(255, 255, 255, .045) 0 1px, transparent 1px 22px);
    pointer-events: none;
}
.page-header .container { position: relative; z-index: 2; }
.page-header h1 {
    font-family: var(--font-display);
    color: #fff;
    font-size: clamp(1.75rem, 3.5vw, 2.6rem);
    font-weight: 600;
    letter-spacing: -0.2px;
    line-height: 1.18;
    margin-bottom: 10px;
}
.page-header p { color: rgba(255, 255, 255, .8); max-width: 70ch; margin: 0; }
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    font-size: .76rem;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .65);
    margin-bottom: 14px;
}
.breadcrumb a { color: var(--gold-300); }
.breadcrumb span.sep { opacity: .5; }

.pill-row { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
.pill {
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .3px;
    text-transform: uppercase;
    padding: 6px 13px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(240, 213, 133, .45);
    color: var(--gold-300);
}

/* ========================================================= DOC SHELL ==== */
.doc-shell {
    max-width: 1040px;
    margin: -34px auto 0;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    position: relative;
    z-index: 5;
    overflow: hidden;
}
.doc-shell > * { position: relative; }
.doc-body { padding: 34px; }

.doc-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    padding: 22px 26px;
    background: linear-gradient(180deg, var(--sand-50), var(--sand-100));
    border-top: 1px solid var(--line);
}
.doc-actions .btn { min-width: 168px; }

/* The guard card is injected at the TOP of the action bar, so the verification
   steps sit directly above the single action they unlock. */
.doc-actions .guard-card {
    flex: 1 1 100%;
    margin: 0 0 6px;
    text-align: left;
}
.doc-actions .guard-submit { max-width: 460px; }
.doc-actions .guard-submit-hint { text-align: left; }

.prose h2 {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.2px;
    line-height: 1.2;
    font-size: 1.68rem;
    margin-top: 34px;
}
/* newsletter emphasis — premium section headers with a divider lede */
.prose .nl-section-title {
    font-size: 1.72rem;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--sand-200);
    position: relative;
}
.prose .nl-section-title::after {
    content: '';
    position: absolute;
    left: 0; bottom: -2px;
    width: 92px; height: 2px;
    background: linear-gradient(90deg, var(--gold-500), var(--teal-500));
}
.prose .nl-lede {
    font-size: 1.04rem;
    color: var(--gray-600);
    border-left: 3px solid var(--gold-400);
    padding-left: 16px;
    margin-bottom: 26px;
}.prose h3 {
    font-size: 1.18rem;
    color: var(--navy-700);
    margin-top: 30px;
    padding-bottom: 9px;
    border-bottom: 2px solid var(--sand-200);
}
.prose h4 { font-size: 1rem; color: var(--navy-800); margin-top: 22px; }
.prose p, .prose li { color: var(--gray-700); }
.prose ul { padding-left: 22px; }
.prose li { margin-bottom: 9px; }
.prose strong { color: var(--navy-800); }
.prose hr { border: 0; height: 1px; background: var(--sand-200); margin: 34px 0; }
.prose :first-child { margin-top: 0; }

.lead-in {
    font-size: 1.06rem;
    color: var(--gray-600);
    text-align: center;
    max-width: 74ch;
    margin: 0 auto 30px;
}

/* ============================================================ FORMS ===== */
.form-shell {
    max-width: 1020px;
    margin: 26px auto 0;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.form-progress-track {
    position: relative;
    z-index: 5;
    height: 7px;
    background: var(--sand-100);
    border-bottom: 1px solid var(--line);
}
.form-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--teal-500), var(--gold-400));
    transition: width .25s ease;
}

.form-banner {
    background: linear-gradient(135deg, var(--navy-900), var(--navy-700));
    color: #fff;
    padding: 30px 34px;
    border-bottom: 3px solid var(--gold-500);
    position: relative;
    overflow: hidden;
}
.form-banner::after {
    content: '';
    position: absolute; inset: 0;
    background-image: repeating-linear-gradient(115deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 20px);
    pointer-events: none;
    z-index: 0;
}
/* keep real content above the decorative stripe overlay so text never
   appears to overlap or wash out, especially at narrow widths */
.form-banner > * { position: relative; z-index: 1; }
.form-banner h1 {
    color: #fff;
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.2px;
    font-size: clamp(1.45rem, 2.7vw, 2rem);
    margin: 0 0 6px;
}
.form-banner p { margin: 0; color: rgba(255, 255, 255, .8); font-size: .96rem; }
.form-banner .pill-row { margin-top: 14px; }

.form-body { padding: 30px 34px 6px; }

.form-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 24px 26px;
    margin-bottom: 24px;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.form-card:hover { border-color: rgba(29, 78, 138, .35); box-shadow: var(--shadow-md); }

.form-card > h2,
.form-card-title {
    position: relative;
    font-family: var(--font-display);
    font-size: 1.18rem;
    font-weight: 600;
    letter-spacing: -0.1px;
    color: var(--navy-800);
    padding-left: 17px;
    margin: 0 0 18px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.form-card > h2::before,
.form-card-title::before {
    content: '';
    position: absolute;
    left: 0; top: 2px; bottom: 2px;
    width: 5px;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--gold-400), var(--teal-500));
}

.form-card h3 {
    font-size: .97rem;
    font-weight: 700;
    color: var(--navy-700);
    margin: 22px 0 14px;
    padding-bottom: 7px;
    border-bottom: 1px dashed var(--sand-200);
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 18px;
}
.form-grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.col-span-all { grid-column: 1 / -1; }

.form-group { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.form-group.full-width, .form-group.col-span-all { grid-column: 1 / -1; }

.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 18px;
    align-items: start;
}
.form-row-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }

label, .field-label {
    font-size: .875rem;
    font-weight: 600;
    color: var(--navy-800);
    letter-spacing: .1px;
}
.field-label { display: block; margin-bottom: 7px; }
.required { color: var(--red-600); font-weight: 700; }

input[type="text"],
input[type="tel"],
input[type="email"],
input[type="date"],
input[type="number"],
input[type="password"],
select,
textarea {
    width: 100%;
    padding: 11px 14px;
    font-family: inherit;
    font-size: .95rem;
    color: var(--gray-800);
    background: #fff;
    border: 1.5px solid var(--gray-300);
    border-radius: var(--radius-sm);
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
input::placeholder, textarea::placeholder { color: var(--gray-400); }

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--teal-500);
    box-shadow: var(--ring);
    background: #fff;
}

textarea { resize: vertical; min-height: 96px; }

select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 17px;
    padding-right: 40px;
}

/* invalid state after interaction */
.field-invalid input,
.field-invalid select,
.field-invalid textarea {
    border-color: var(--red-500);
    background: #fff5f5;
}
.field-error {
    display: none;
    font-size: .8rem;
    font-weight: 600;
    color: var(--red-600);
}
.field-invalid .field-error { display: block; }
/* a required signature pad that is still empty / a required choice group */
.signature-area.field-invalid { border-color: var(--red-500); background: #fff5f5; }
.table-wrap.field-invalid, .checkbox-group.field-invalid, .radio-group.field-invalid {
    border-radius: var(--radius-sm);
}
.field-invalid .group-error, .field-invalid .signature-error {
    display: block;
    margin-top: 8px;
}

/* ---- "missing data" red state -------------------------------------------
   Every unmet requirement is coloured red at once when the visitor tries to
   submit, so they can see the whole picture and then use the guided walker to
   step through them one at a time. */
.field-invalid {
    --miss-red: var(--red-600, #d92d20);
    --miss-tint: #fff1f1;
}
.field-invalid input:not([type="checkbox"]):not([type="radio"]),
.field-invalid select,
.field-invalid textarea {
    border-color: var(--miss-red) !important;
    background: var(--miss-tint) !important;
    box-shadow: 0 0 0 3px rgba(217, 45, 32, .12) !important;
}
/* the radio / checkbox itself + its caption go red */
.field-invalid input[type="radio"],
.field-invalid input[type="checkbox"] {
    outline: 2px solid var(--miss-red);
    outline-offset: 1px;
    border-radius: 3px;
}
.field-invalid .radio-item label,
.field-invalid .checkbox-item label,
.field-invalid .guard-check span {
    color: var(--miss-red);
    font-weight: 700;
}
/* an unanswered group is boxed in red too, so an empty pool is obvious */
.field-invalid.checkbox-group,
.field-invalid.radio-group,
.field-invalid.table-wrap {
    border: 1px dashed var(--miss-red);
    padding: 10px 12px;
    background: var(--miss-tint);
}
.field-invalid .field-error,
.field-invalid .group-error,
.field-invalid .signature-error {
    color: var(--miss-red);
    font-weight: 700;
}
/* the guard's own two steps redden while they are outstanding */
.guard-step.is-missing {
    border-color: rgba(217, 45, 32, .5);
    background: var(--miss-tint, #fff1f1);
}
.guard-step.is-missing .guard-step-num {
    border-color: var(--red-600, #d92d20);
    background: var(--red-600, #d92d20);
    color: #fff;
}
.field-invalid .guard-challenge input[type="text"] { box-shadow: 0 0 0 3px rgba(217, 45, 32, .12) !important; }

.helper-text { font-size: .8rem; color: var(--gray-500); }

/* radio + checkbox groups */
.radio-group, .checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
    align-items: center;
}
.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 10px 20px;
}

.radio-item, .checkbox-item {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: .93rem;
    font-weight: 500;
    color: var(--gray-700);
}
.radio-item label, .checkbox-item label {
    font-weight: 500;
    font-size: .93rem;
    color: var(--gray-700);
    cursor: pointer;
}

input[type="radio"], input[type="checkbox"] {
    width: 19px; height: 19px;
    flex-shrink: 0;
    margin: 0;
    accent-color: var(--teal-600);
    cursor: pointer;
}

.divider { height: 1px; background: var(--sand-200); margin: 26px 0; position: relative; }
.divider::after {
    content: '';
    position: absolute;
    top: -1px; left: 50%; transform: translateX(-50%);
    width: 44px; height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--gold-400), var(--teal-500));
}

/* refund-extraction sub-panel (revealed when the visitor elects extraction) */
.extract-panel {
    margin-top: 6px;
    padding: 18px 20px 6px;
    border: 1px dashed var(--navy-500);
    border-left: 4px solid var(--gold-500);
    border-radius: var(--radius);
    background: linear-gradient(180deg, rgba(224, 187, 74, .08), #fff);
}
.extract-panel .callout { margin-top: 0; }
.extract-panel .helper-text { margin-bottom: 12px; }


.two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
.two-col.is-single { grid-template-columns: 1fr; }

/* ================================================== E-SIGNATURE PAD ====== */
/* Modern, intuitive signature control.
   · live status pill (Awaiting / Signing / Signed)
   · "Sign here" affordance with a baseline the visitor draws on
   · Draw | Type modes, so a touch device can simply type a name
   · Undo, Clear, and a saved-signature tray for repeat signers
   The canvas stays a plain pen canvas — it is the only thing that prints. */
.signature-area {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 16px;
    box-shadow: var(--shadow-sm);
}
.sig-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.signature-title, .signature-label {
    font-weight: 700;
    font-size: .9rem;
    color: var(--navy-800);
    margin: 0;
    display: block;
}
.sig-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--sand-50);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .3px;
    color: var(--gray-600);
    white-space: nowrap;
}
.sig-status::before {
    content: '';
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--gray-400);
    flex: none;
}
.sig-status.is-typing::before { background: var(--gold-500); }
.sig-status.is-signed { border-color: rgba(18, 161, 114, .45); background: #f4fbf8; color: #0b7a5a; }
.sig-status.is-signed::before { background: #12a172; }

/* mode switch */
.sig-modes {
    display: inline-flex;
    gap: 3px;
    padding: 3px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--sand-50);
    margin-bottom: 10px;
}
.sig-mode {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 13px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    font: inherit;
    font-size: .8rem;
    font-weight: 600;
    color: var(--gray-600);
    cursor: pointer;
    transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.sig-mode:hover { color: var(--navy-800); }
.sig-mode.is-active {
    background: #fff;
    color: var(--navy-800);
    box-shadow: 0 1px 3px rgba(16, 43, 78, .14);
}

/* draw surface */
.sig-draw { position: relative; }
.sig-canvas-wrap { position: relative; }
.signature-canvas {
    display: block;
    width: 100%;
    height: 156px;
    background: #fff;
    border: 1.5px solid var(--gray-300);
    border-radius: var(--radius-sm);
    cursor: crosshair;
    touch-action: none;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.sig-draw.is-drawing .signature-canvas,
.signature-canvas:focus-visible {
    border-color: var(--navy-500);
    box-shadow: 0 0 0 3px rgba(42, 102, 173, .13);
    outline: none;
}
.sig-baseline {
    position: absolute;
    left: 26px; right: 26px;
    bottom: 58px;
    height: 0;
    border-bottom: 1px dashed var(--gray-300);
    pointer-events: none;
}
.sig-prompt {
    position: absolute;
    left: 0; right: 0;
    bottom: 26px;
    text-align: center;
    pointer-events: none;
    font-size: .84rem;
    color: var(--gray-400);
    transition: opacity .2s ease;
}
.sig-prompt i { margin-right: 6px; color: var(--navy-500); }
.sig-draw.is-drawing .sig-prompt { opacity: 0; }
.sig-draw.is-signed .sig-prompt { opacity: 0; }
.sig-baseline { transition: opacity .2s ease; }
.sig-draw.is-drawing .sig-baseline { opacity: 0; }

/* typed surface */
.sig-type { display: none; gap: 12px; }
.sig-type.is-shown { display: block; }
.sig-type input {
    width: 100%;
    padding: 13px 15px;
    border: 1.5px solid var(--gray-300);
    border-radius: var(--radius-sm);
    font: inherit;
    font-size: 1rem;
    background: #fff;
}
.sig-type input:focus {
    outline: none;
    border-color: var(--navy-500);
    box-shadow: 0 0 0 3px rgba(42, 102, 173, .13);
}
.sig-type-preview {
    margin-top: 12px;
    min-height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    border: 1.5px dashed var(--gray-300);
    border-radius: var(--radius-sm);
    background: var(--sand-50);
    font-size: 2.5rem;
    line-height: 1.2;
    text-align: center;
    color: var(--navy-900);
    overflow-wrap: anywhere;
}
.sig-type-preview .ph { font-family: var(--font-sans); font-size: .84rem; color: var(--gray-400); }
.sig-fonts { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.sig-font {
    padding: 6px 13px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    font-size: .8rem;
    color: var(--gray-600);
    cursor: pointer;
    transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.sig-font:hover { border-color: var(--navy-500); color: var(--navy-800); }
.sig-font.is-active { border-color: var(--navy-500); background: var(--sand-50); color: var(--navy-800); font-weight: 600; }

/* draw/type control rows */
.sig-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}
.sig-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: #fff;
    font: inherit;
    font-size: .82rem;
    font-weight: 600;
    color: var(--navy-800);
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.sig-btn:hover:not([disabled]) { border-color: var(--navy-500); background: var(--sand-50); }
.sig-btn[disabled] { opacity: .5; cursor: not-allowed; }
.sig-btn.is-primary { border-color: var(--navy-700); background: var(--navy-800); color: #fff; }
.sig-btn.is-primary:hover:not([disabled]) { background: var(--navy-700); }
.sig-btn.is-danger { color: #b42318; }
.sig-btn.is-danger:hover:not([disabled]) { border-color: rgba(180, 35, 24, .45); background: rgba(220, 38, 38, .05); }
.sig-hint {
    margin: 10px 0 0;
    font-size: .78rem;
    color: var(--gray-500);
    /* Inline wording must wrap as one sentence, not separate flex items. */
    display: block;
}
.sig-hint i { color: var(--navy-500); margin-right: 6px; }

/* saved-signature tray (repeat signers) */
.sig-saved {
    margin: 0 0 12px;
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--sand-50);
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.sig-saved[hidden] { display: none; }
.sig-saved-thumb {
    height: 40px;
    max-width: 190px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 2px 6px;
    object-fit: contain;
}
.sig-saved-text { font-size: .8rem; color: var(--gray-600); flex: 1 1 140px; }
.sig-saved .sig-btn { padding: 7px 12px; font-size: .79rem; }

/* the wrapper must not fight the shared .two-col collapse */
.signature-area { min-width: 0; }

.data-table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td {
    border: 1px solid var(--gray-300);
    padding: 8px;
    font-size: .88rem;
    vertical-align: middle;
}
.data-table th {
    background: linear-gradient(135deg, var(--navy-800), var(--navy-700));
    color: #fff;
    font-weight: 600;
    text-align: left;
    padding: 12px 10px;
}
.data-table tbody tr:nth-child(even) { background: var(--gray-50); }
.data-table input { border: 1px solid var(--gray-200); padding: 8px 10px; font-size: .88rem; }

.office-use {
    background: repeating-linear-gradient(45deg, rgba(200, 160, 44, .07) 0 10px, transparent 10px 20px);
    border: 2px dashed var(--gold-500);
    border-radius: var(--radius);
    padding: 22px;
    margin: 8px 0 24px;
}
.office-use-title {
    font-size: .84rem;
    font-weight: 800;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--gold-600);
    margin-bottom: 16px;
}

.disclaimer {
    background: var(--sand-50);
    border: 1px solid var(--sand-200);
    border-radius: var(--radius);
    padding: 18px 20px;
    font-size: .88rem;
    color: var(--gray-600);
    margin-bottom: 22px;
}
.disclaimer p:last-child { margin-bottom: 0; }

.info-box {
    background: #eef7f7;
    border: 1px solid #bfe3e0;
    border-radius: var(--radius);
    padding: 15px 18px;
    font-size: .92rem;
    color: #0d5c5c;
    margin-bottom: 18px;
}
.info-box p:last-child { margin-bottom: 0; }

.requirements {
    background: linear-gradient(135deg, rgba(200, 160, 44, .10), rgba(20, 184, 166, .08));
    border: 1px solid rgba(200, 160, 44, .35);
    border-radius: var(--radius);
    padding: 22px 26px;
    margin-bottom: 24px;
}
.requirements h3 { margin: 0 0 12px; color: var(--navy-800); font-size: 1.02rem; }
.requirements ul { margin: 0; padding-left: 22px; }
.requirements li { color: var(--gray-700); font-size: .93rem; margin-bottom: 6px; }

.dependent-item {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 18px;
    margin-bottom: 16px;
    background: var(--sand-50);
}
.dependent-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
.dependent-title {
    font-weight: 700;
    color: var(--navy-800);
    font-size: .92rem;
    letter-spacing: .3px;
}

.required-note {
    text-align: center;
    font-size: .88rem;
    color: var(--gray-500);
    margin: 4px 0 20px;
}

/* ======================================================= ABOUT PAGE ===== */
.value-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 30px 26px;
    text-align: center;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.value-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--teal-500); }
.value-icon {
    width: 64px; height: 64px;
    margin: 0 auto 18px;
    display: grid; place-items: center;
    font-size: 28px;
    border-radius: 18px;
    color: #fff;
    background: linear-gradient(135deg, var(--navy-700), var(--navy-900));
}
.value-card:nth-child(2) .value-icon { background: linear-gradient(135deg, var(--gold-400), var(--gold-600)); color: #241a02; }
.value-card:nth-child(3) .value-icon { background: linear-gradient(135deg, var(--teal-500), var(--teal-700)); }
.value-card h4 { font-size: 1.08rem; margin-bottom: 10px; color: var(--navy-800); }
.value-card p { font-size: .93rem; color: var(--gray-600); margin: 0; }

.compare {
    border-radius: var(--radius-lg);
    padding: 28px;
    border: 1px solid var(--line);
}
.compare.traditional { background: linear-gradient(160deg, #fff5f5, #fef2f2); border-color: rgba(239, 68, 68, .35); }
.compare.ach { background: linear-gradient(160deg, #f0fbfa, #eef7ff); border-color: rgba(20, 184, 166, .4); }
.compare h3 { font-size: 1.2rem; text-align: center; margin-bottom: 18px; }
.compare.traditional h3 { color: var(--red-600); }
.compare.ach h3 { color: var(--teal-700); }
.compare ul { list-style: none; margin: 0; padding: 0; }
.compare li {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    padding: 11px 0;
    border-bottom: 1px dashed var(--gray-200);
    font-size: .94rem;
    color: var(--gray-700);
}
.compare li:last-child { border-bottom: 0; }
.compare li::before { content: '✕'; color: var(--red-500); font-weight: 800; font-size: .82rem; margin-top: 4px; }
.compare.ach li::before { content: '✓'; color: var(--green-600); }

.cert-item {
    background: var(--paper);
    border: 1px solid var(--line);
    border-left: 4px solid var(--gold-500);
    border-radius: var(--radius);
    padding: 20px 22px;
    font-weight: 600;
    font-size: .95rem;
    color: var(--navy-800);
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: var(--shadow-xs);
    transition: transform .2s ease, box-shadow .2s ease;
}
.cert-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.cert-item i { color: var(--gold-600); font-size: 18px; }

.faq-item {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
    margin-bottom: 14px;
    overflow: hidden;
}
.faq-item summary {
    cursor: pointer;
    padding: 18px 22px;
    font-weight: 700;
    color: var(--navy-800);
    font-size: .98rem;
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: '+';
    font-size: 1.4rem;
    color: var(--teal-600);
    line-height: 1;
    transition: transform .2s ease;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item[open] summary { border-bottom: 1px solid var(--sand-200); background: var(--sand-50); }
.faq-item .faq-body { padding: 16px 22px 20px; color: var(--gray-700); font-size: .94rem; }
.faq-item .faq-body p:last-child { margin-bottom: 0; }

.timeline { list-style: none; margin: 0; padding: 0 0 0 30px; position: relative; }
.timeline::before {
    content: '';
    position: absolute;
    left: 8px; top: 6px; bottom: 6px;
    width: 3px;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--gold-400), var(--teal-500));
}
.timeline li { position: relative; padding: 0 0 24px 8px; }
.timeline li::before {
    content: '';
    position: absolute;
    left: -30px; top: 5px;
    width: 19px; height: 19px;
    border-radius: 50%;
    background: #fff;
    border: 4px solid var(--navy-700);
}
.timeline h4 { font-size: 1rem; margin-bottom: 4px; }
.timeline p { font-size: .92rem; color: var(--gray-600); margin: 0; }

/* ============================================================ UTILS ===== */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 12px; }
.mb-2 { margin-bottom: 22px; }
.mb-3 { margin-bottom: 34px; }
.muted { color: var(--gray-500); }
.small { font-size: .87rem; }
.nowrap { white-space: nowrap; }
.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

.back-to-top {
    position: fixed;
    right: 22px; bottom: 22px;
    width: 50px; height: 50px;
    border-radius: 50%;
    border: 0;
    background: linear-gradient(135deg, var(--navy-700), var(--navy-900));
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: all .25s ease;
    z-index: 90;
}
.back-to-top.show { opacity: 1; visibility: visible; transform: none; }
.back-to-top:hover { background: linear-gradient(135deg, var(--gold-400), var(--gold-600)); color: #241a02; }

/* ========================================================== RESPONSIVE == */
@media (max-width: 1080px) {
    .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
    .nav-toggle { display: inline-flex; }
    .nav-spacer { display: none; }

    .nav-links {
        position: fixed;
        top: var(--nav-h);
        left: 0; right: 0;
        max-height: calc(100vh - var(--nav-h));
        overflow-y: auto;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        padding: 16px 18px 26px;
        background: rgba(8, 21, 38, .99);
        backdrop-filter: blur(16px);
        border-bottom: 3px solid var(--gold-500);
        box-shadow: var(--shadow-lg);
        transform: translateY(-12px);
        opacity: 0;
        visibility: hidden;
        transition: opacity .22s ease, transform .22s ease, visibility .22s;
    }
    .nav-links.open { opacity: 1; visibility: visible; transform: none; }

    .nav-links a.nav-link,
    .nav-links button.nav-link {
        width: 100%;
        justify-content: space-between;
        padding: 14px 16px;
        font-size: 15.5px;
    }
    .nav-links a.nav-link.is-active::after { display: none; }
    .nav-links a.nav-link.is-active { background: rgba(240, 213, 133, .14); }

    .dropdown-menu {
        position: static;
        visibility: visible;
        opacity: 1;
        transform: none;
        box-shadow: none;
        border: 0;
        background: rgba(255, 255, 255, .06);
        padding: 6px 0 6px 12px;
        min-width: 0;
        display: none;
    }
    .nav-dropdown.open .dropdown-menu { display: block; }
    .dropdown-menu::before { display: none; }
    .dropdown-menu a { color: rgba(255, 255, 255, .88); padding: 12px 14px; }
    .dropdown-menu a small { color: rgba(255, 255, 255, .55); }

    .nav-cta {
        margin-top: 12px;
        justify-content: center;
        width: 100%;
    }

    .hero-grid { grid-template-columns: 1fr; gap: 34px; }
    .two-col { grid-template-columns: 1fr; }
    .compare-wrap { grid-template-columns: 1fr; }
}

@media (max-width: 780px) {
    body { font-size: 15.5px; }
    .section { padding: 54px 0; }
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
    .doc-body, .form-body { padding: 22px 18px 6px; }
    .form-banner { padding: 24px 20px; }
    .form-card { padding: 20px 18px; }
    .form-row-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .doc-actions { padding: 18px; }
    .doc-actions .btn { width: 100%; }
    .footer-bottom { justify-content: center; text-align: center; }
    .page-header { padding: 42px 0 48px; }
    .doc-shell { margin-top: -24px; border-radius: var(--radius); }
}

@media (max-width: 560px) {
    :root { --nav-h: 66px; }
    .nav-brand img { height: 38px; }
    .nav-brand-text span { display: none; }
    .stats { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; gap: 26px; }
    .form-row-4 { grid-template-columns: 1fr; }
    .radio-group, .checkbox-group { flex-direction: column; align-items: flex-start; gap: 10px; }
    .checkbox-grid { grid-template-columns: 1fr; }
    .doc-body { padding: 18px 14px 6px; }
    .form-card { padding: 18px 15px; }
    .back-to-top { right: 14px; bottom: 14px; width: 46px; height: 46px; }
}

/* ============================================================= TABS ===== */
.tab-select-wrap {
    display: block;
    margin-bottom: 20px;
}
.tab-select-wrap label {
    display: block;
    font-weight: 600;
    color: var(--navy-900);
    margin-bottom: 7px;
    font-size: .92rem;
}
.tab-select-wrap .select-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.tab-select-wrap .select-icon {
    flex: none;
    width: 42px; height: 42px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--navy-800), var(--navy-600));
    color: var(--gold-400);
}
.tab-select-wrap select {
    flex: 1;
    height: 42px;
}
.tabbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    border-bottom: 2px solid var(--line);
    margin-bottom: 26px;
}
.tab-btn {
    appearance: none;
    border: 1px solid transparent;
    border-bottom: none;
    background: transparent;
    font: inherit;
    font-weight: 600;
    color: var(--gray-600);
    padding: 12px 20px;
    border-radius: var(--radius) var(--radius) 0 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    transition: color .18s ease, background .18s ease;
    margin-bottom: -2px;
}
.tab-btn i { color: var(--gray-400); transition: color .18s ease; }
.tab-btn:hover { color: var(--navy-800); background: var(--sand-50); }
.tab-btn:hover i { color: var(--gold-500); }
.tab-btn[aria-selected="true"] {
    color: var(--navy-900);
    background: #fff;
    border-color: var(--line);
    border-bottom: 2px solid #fff;
    box-shadow: 0 -3px 0 var(--gold-500) inset;
}
.tab-btn[aria-selected="true"] i { color: var(--gold-600); }
.tab-btn small { display: block; font-weight: 500; font-size: .72rem; color: var(--gray-500); letter-spacing: .2px; }
.tab-panel[hidden] { display: none; }
.tab-panel:focus { outline: none; }

/* checklist sections */
.checklist-section { margin-bottom: 30px; break-inside: avoid; }
.checklist-section > h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.12rem;
    color: var(--navy-900);
    margin: 0 0 6px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--line);
}
.checklist-section > h3 .icon-chip {
    width: 30px; height: 30px; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--navy-800), var(--navy-600));
    color: var(--gold-400);
    font-size: .85rem;
}
.checklist-section > p.section-note { color: var(--gray-600); font-size: .9rem; margin: 0 0 12px; }

.checklist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 4px;
}
.checklist li {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    padding: 7px 10px;
    border-radius: 8px;
    line-height: 1.45;
    font-size: .95rem;
    color: var(--gray-700);
}
.checklist li:nth-child(odd) { background: var(--gray-50); }
.checklist .box {
    flex: none;
    width: 17px; height: 17px;
    margin-top: 2px;
    border: 1.6px solid var(--navy-500);
    border-radius: 4px;
    background: #fff;
}
.checklist li strong { color: var(--navy-900); font-weight: 600; }
.checklist .need {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #7a5107;
    background: #fff6e2;
    border: 1px solid #f4d38a;
    border-radius: 20px;
    padding: 1px 8px;
    margin-left: 6px;
    white-space: nowrap;
}
.checklist .hint { color: var(--gray-500); font-size: .86rem; }

.checklist-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 34px; }

.tab-intro {
    display: flex;
    gap: 16px;
    align-items: center;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-left: 4px solid var(--gold-500);
    border-radius: var(--radius);
    background: var(--sand-50);
    margin-bottom: 26px;
}
.tab-intro .tab-intro-badge {
    flex: none;
    width: 58px; height: 58px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--navy-900), var(--navy-600));
    color: var(--gold-400);
    font-size: 1.35rem;
}
.tab-intro h2 { margin: 0 0 4px; font-size: 1.3rem; color: var(--navy-900); }
.tab-intro p { margin: 0; color: var(--gray-600); font-size: .93rem; }

@media (max-width: 780px) {
    .checklist-cols { grid-template-columns: 1fr; }
    .tab-btn { flex: 1 1 auto; justify-content: center; padding: 11px 12px; font-size: .9rem; }
}
@media (max-width: 560px) {
    .tab-btn small { display: none; }
    .tabbar { display: none; }
    .tab-intro { flex-direction: column; text-align: center; }
}

/* ===================================================== BUSINESS CARD ===== */
.card-stage {
    display: flex;
    justify-content: center;
    margin-top: 6px;
}
.biz-card {
    position: relative;
    width: min(420px, 100%);
    background: #fff;
    border-radius: 20px;
    padding: 34px 30px 30px;
    text-align: center;
    box-shadow: 0 24px 60px rgba(6, 18, 35, .28), 0 2px 6px rgba(6, 18, 35, .10);
    border: 1px solid var(--line);
    overflow: hidden;
}
.biz-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--navy-800), var(--gold-500), var(--navy-800));
}
.biz-card::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 96px;
    background: linear-gradient(180deg, transparent, var(--sand-50));
    pointer-events: none;
}
.biz-card > * { position: relative; z-index: 1; }
.biz-card img {
    height: 74px;
    width: 74px;
    object-fit: contain;
    margin: 0 auto 12px;
    display: block;
}
.biz-card .biz-name {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.12rem;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--navy-900);
    margin: 0 0 2px;
}
.biz-card .biz-sub {
    font-size: .68rem;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: var(--gold-600);
    font-weight: 700;
    margin: 0 0 16px;
}
.biz-card .biz-rule {
    width: 54px;
    height: 2px;
    margin: 0 auto 18px;
    background: linear-gradient(90deg, var(--gold-500), var(--navy-600));
    border-radius: 2px;
}
.biz-card ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 9px;
}
.biz-card li {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: .92rem;
    color: var(--gray-700);
}
.biz-card li i { color: var(--gold-600); width: 16px; text-align: center; }
.biz-card li a { color: var(--gray-700); font-weight: 500; }
.biz-card li a:hover { color: var(--navy-800); }

/* ================================================= VIRTUAL REPRESENTATIVE == */
.vr-launcher {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 900;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 18px 8px 8px;
    border: 0;
    border-radius: 46px;
    cursor: pointer;
    background: linear-gradient(135deg, var(--navy-800), var(--navy-700));
    color: #fff;
    font: inherit;
    font-weight: 600;
    box-shadow: 0 14px 34px rgba(6, 18, 35, .34);
    transition: transform .2s ease, box-shadow .2s ease;
}
.vr-launcher:hover { transform: translateY(-2px); box-shadow: 0 18px 42px rgba(6, 18, 35, .42); }
.vr-launcher img { width: 44px; height: 44px; border-radius: 50%; display: block; flex: none; }
.vr-launcher span { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.vr-launcher small { font-weight: 500; font-size: .68rem; letter-spacing: .6px; color: var(--gold-300); text-transform: uppercase; }
.vr-launcher .vr-dot {
    position: absolute; top: 10px; left: 42px;
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--teal-500); border: 2px solid var(--navy-800);
    animation: vrPulse 2s infinite;
}
@keyframes vrPulse {
    0%   { box-shadow: 0 0 0 0 rgba(20, 184, 166, .55); }
    70%  { box-shadow: 0 0 0 9px rgba(20, 184, 166, 0); }
    100% { box-shadow: 0 0 0 0 rgba(20, 184, 166, 0); }
}

.vr-panel {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 901;
    width: min(392px, calc(100vw - 32px));
    max-height: min(660px, calc(100vh - 44px));
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(6, 18, 35, .42), 0 2px 8px rgba(6, 18, 35, .14);
    transform: translateY(16px) scale(.97);
    opacity: 0;
    pointer-events: none;
    transition: transform .24s ease, opacity .24s ease;
}
.vr-panel.open { transform: none; opacity: 1; pointer-events: auto; }

.vr-head {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 16px 18px;
    background: linear-gradient(135deg, var(--navy-900), var(--navy-700));
    color: #fff;
}
.vr-head img { width: 46px; height: 46px; border-radius: 50%; flex: none; }
.vr-head .vr-head-info { flex: 1; min-width: 0; }
.vr-head strong { display: block; font-size: 1rem; }
.vr-head small { display: flex; align-items: center; gap: 6px; color: #bfe9e3; font-size: .76rem; }
.vr-head small i { font-size: .5rem; color: var(--teal-500); }
.vr-close {
    flex: none;
    width: 34px; height: 34px;
    border: 0; border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: #fff; cursor: pointer; font-size: .95rem;
    transition: background .18s ease;
}
.vr-close:hover { background: rgba(255, 255, 255, .26); }

.vr-tabs {
    display: flex;
    gap: 4px;
    padding: 8px 10px 0;
    background: var(--sand-50);
    border-bottom: 1px solid var(--line);
}
.vr-tabs button {
    flex: 1;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    font: inherit;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .2px;
    color: var(--gray-600);
    padding: 9px 6px 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.vr-tabs button i { color: var(--gray-400); }
.vr-tabs button[aria-selected="true"] { color: var(--navy-900); border-bottom-color: var(--gold-500); }
.vr-tabs button[aria-selected="true"] i { color: var(--gold-600); }

.vr-log {
    flex: 1;
    overflow-y: auto;
    padding: 16px 16px 6px;
    background: linear-gradient(180deg, #fff, var(--sand-50));
    display: flex;
    flex-direction: column;
    gap: 12px;
    scroll-behavior: smooth;
}
.vr-msg { display: flex; gap: 9px; max-width: 92%; }
.vr-msg.avatar-row img { width: 30px; height: 30px; border-radius: 50%; flex: none; }
.vr-bubble {
    padding: 10px 14px;
    border-radius: 14px;
    font-size: .9rem;
    line-height: 1.5;
    box-shadow: 0 1px 2px rgba(6, 18, 35, .06);
}
.vr-msg.bot .vr-bubble { background: #fff; border: 1px solid var(--line); color: var(--gray-700); border-top-left-radius: 4px; }
.vr-msg.user { align-self: flex-end; flex-direction: row-reverse; }
.vr-msg.user .vr-bubble { background: linear-gradient(135deg, var(--navy-700), var(--navy-800)); color: #fff; border-top-right-radius: 4px; }
.vr-bubble a { color: var(--navy-600); font-weight: 600; text-decoration: underline; }
.vr-bubble strong { color: var(--navy-900); }
.vr-msg.user .vr-bubble strong { color: #fff; }
.vr-bubble ul { margin: 8px 0 4px; padding-left: 18px; }
.vr-bubble li { margin-bottom: 4px; }
.vr-typing { display: inline-flex; gap: 4px; padding: 4px 2px; }
.vr-typing span {
    width: 7px; height: 7px; border-radius: 50%; background: var(--gray-400);
    animation: vrBlink 1.3s infinite both;
}
.vr-typing span:nth-child(2) { animation-delay: .18s; }
.vr-typing span:nth-child(3) { animation-delay: .36s; }
@keyframes vrBlink { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

.vr-chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 2px 0 4px; }
.vr-chip {
    border: 1px solid var(--navy-500);
    background: #fff;
    color: var(--navy-700);
    font: inherit;
    font-size: .78rem;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 30px;
    cursor: pointer;
    transition: background .16s ease, color .16s ease;
}
.vr-chip:hover { background: var(--navy-700); color: #fff; }

.vr-form { display: grid; gap: 8px; margin-top: 4px; }
.vr-form input, .vr-form select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    font: inherit;
    font-size: .88rem;
    background: #fff;
    color: var(--gray-700);
}
.vr-form input:focus, .vr-form select:focus { outline: 2px solid var(--navy-500); outline-offset: 0; }
.vr-form .vr-err { color: #b42318; font-size: .74rem; margin: -2px 0 2px; }

/* ------------------------------------------- callback / firm-quote form --- */
/* The booking form lives inside a chat bubble, so keep it to a chat-ish width
   and give the picked time slot a clear selected state. */
.vr-form { width: min(310px, 76vw); max-width: 100%; }
.vr-form > label { font-size: .8rem; margin-top: 4px; }
.vr-consent { display: flex; gap: 9px; align-items: flex-start; font-size: .8rem; }
.vr-consent input { flex: none; margin-top: 3px; }
.vr-copy-fallback { width: 100%; min-height: 70px; font-size: .8rem; }
.print-answer { display: none; }
.vr-form .vr-invalid {
    border-color: #d92d20 !important;
    background: #fff1f1 !important;
}
.vr-form .vr-slots.vr-invalid {
    border: 1px dashed #d92d20;
    border-radius: 10px;
    padding: 8px 10px;
    background: #fff1f1;
}
.vr-form input[type="checkbox"].vr-invalid {
    outline: 2px solid #d92d20;
    outline-offset: 1px;
}
.vr-form input[type="checkbox"] { width: 16px; height: 16px; }
.vr-slots { display: flex; flex-wrap: wrap; gap: 7px; }
.vr-slot {
    border: 1px solid var(--navy-500);
    background: #fff;
    color: var(--navy-700);
    font: inherit;
    font-size: .76rem;
    font-weight: 600;
    padding: 7px 11px;
    border-radius: 30px;
    cursor: pointer;
    transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.vr-slot:hover { border-color: var(--navy-700); }
.vr-slot.is-picked { background: var(--navy-700); color: #fff; border-color: var(--navy-700); }
.vr-slot[disabled] { opacity: .45; cursor: not-allowed; }
.vr-slot-help { font-size: .72rem; color: #5b6b7f; margin: 0; }

/* the confirmed booking reads as a success, not another question */
.vr-bubble.vr-confirm { border-color: rgba(18, 161, 114, .5) !important; background: #f4fbf8 !important; }
.vr-lock-note {
    display: flex; align-items: flex-start; gap: 7px;
    margin: 8px 0 0; font-size: .74rem; color: #5b6b7f;
}
/* guarded email handoff: the link is inert until armed, so it reads as pending */
.vr-chip[data-mail-guard][aria-disabled="true"] { opacity: .5; pointer-events: none; }
.vr-mail-note {
    flex: 1 1 100%;
    margin: 2px 0 0;
    font-size: .74rem;
    font-weight: 600;
    line-height: 1.35;
}
.vr-mail-note.is-warn { color: #7a5a12; }
.vr-mail-note.is-bad { color: #b42318; }

.vr-input {
    border-top: 1px solid var(--line);
    background: #fff;
    padding: 10px 12px 12px;
    display: flex;
    align-items: flex-end;
    gap: 8px;
}
.vr-input textarea {
    flex: 1;
    resize: none;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 10px 12px;
    font: inherit;
    font-size: .9rem;
    max-height: 96px;
    background: #fff;
    color: var(--gray-700);
}
.vr-input textarea:focus { outline: 2px solid var(--navy-500); outline-offset: 0; }
.vr-send {
    flex: none;
    width: 42px; height: 42px;
    border: 0; border-radius: 12px;
    background: linear-gradient(135deg, var(--navy-700), var(--navy-800));
    color: #fff; cursor: pointer; font-size: .95rem;
}
.vr-send:hover { background: var(--gold-500); color: var(--navy-900); }
.vr-foot { padding: 0 12px 10px; background: #fff; }
.vr-foot small { color: var(--gray-500); font-size: .68rem; display: block; text-align: center; }
.vr-foot a { color: var(--navy-600); }

@media (max-width: 560px) {
    .vr-launcher { right: 14px; bottom: 14px; padding: 6px 14px 6px 6px; }
    .vr-launcher img { width: 40px; height: 40px; }
    .vr-panel { right: 8px; bottom: 8px; width: calc(100vw - 16px); max-height: calc(100vh - 16px); border-radius: 16px; }
}

/* ===================================================== SERVICE AREA ===== */
.area-grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 34px;
    align-items: stretch;
}
.area-copy .area-list {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    display: grid;
    gap: 12px;
}
.area-copy .area-list li {
    display: flex;
    gap: 13px;
    align-items: flex-start;
    padding: 13px 15px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    box-shadow: var(--shadow-sm);
}
.area-copy .area-list .area-pin {
    flex: none;
    width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 11px;
    background: linear-gradient(135deg, var(--navy-800), var(--navy-600));
    color: var(--gold-400);
}
.area-copy .area-list h4 { margin: 0 0 2px; font-size: 1rem; color: var(--navy-900); }
.area-copy .area-list p { margin: 0; font-size: .87rem; color: var(--gray-600); }
.area-copy .area-list .area-tag {
    display: inline-block;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: #7a5107;
    background: #fff6e2;
    border: 1px solid #f4d38a;
    border-radius: 20px;
    padding: 1px 9px;
    margin-left: 6px;
}
.area-map {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    background: #fff;
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
    min-height: 380px;
}
.area-map iframe {
    border: 0;
    width: 100%;
    flex: 1;
    min-height: 320px;
    display: block;
    filter: saturate(1.02);
}
.area-map .area-map-foot {
    padding: 12px 16px;
    border-top: 1px solid var(--line);
    background: var(--sand-50);
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
}
.area-map .area-map-foot span { font-size: .82rem; color: var(--gray-600); }
@media (max-width: 960px) {
    .area-grid { grid-template-columns: 1fr; }
    .area-map { min-height: 340px; }
}

/* ======================================================= FORM GUARD ====== */
.guard-honeypot {
    position: absolute !important;
    left: -9999px !important;
    top: auto;
    width: 1px; height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}
.guard-card {
    position: relative;
    border: 1px solid var(--line);
    border-left: 4px solid var(--teal-500);
    border-radius: var(--radius);
    background: linear-gradient(180deg, #f2fbfa, #fff);
    padding: 20px 22px 18px;
    margin: 0 0 22px;
    box-shadow: var(--shadow-sm);
}
.guard-card.guard-shake { animation: guardShake .5s ease; }
.guard-card.is-wrong { animation: guardWrong .45s ease; }
@keyframes guardWrong {
    0%, 100% { box-shadow: var(--shadow-sm); }
    50% { box-shadow: 0 0 0 4px rgba(220, 38, 38, .18); }
}
@keyframes guardShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-7px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(3px); }
}
.guard-head {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.guard-head-text { flex: 1 1 260px; min-width: 0; }
.guard-shield {
    flex: none;
    width: 46px; height: 46px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--navy-800), var(--navy-600));
    color: var(--gold-400);
    font-size: 1.2rem;
}
.guard-head h2 { margin: 0 0 4px; font-size: 1.08rem; color: var(--navy-900); }
.guard-head p { margin: 0; font-size: .88rem; color: var(--gray-600); }
.guard-progress {
    flex: none;
    align-self: center;
    padding: 6px 13px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: #fff;
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .3px;
    color: var(--gray-600);
    white-space: nowrap;
}
.guard-progress.is-ok { border-color: rgba(18, 161, 114, .45); background: #f4fbf8; color: #0b7a5a; }

/* ---- the two-step validation test ------------------------------------- */
.guard-steps { display: grid; gap: 12px; margin: 0 0 14px; }
.guard-step {
    display: flex;
    gap: 13px;
    align-items: flex-start;
    padding: 14px 15px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.guard-step.is-done {
    border-color: rgba(18, 161, 114, .45);
    background: #f4fbf8;
    box-shadow: inset 0 0 0 1px rgba(18, 161, 114, .08);
}
.guard-step-num {
    flex: none;
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--navy-500);
    background: #fff;
    color: var(--navy-800);
    font-size: .82rem;
    font-weight: 700;
}
.guard-step-num b { font-weight: 700; }
.guard-step-num i { display: none; font-size: .78rem; }
.guard-step.is-done .guard-step-num { border-color: #12a172; background: #12a172; color: #fff; }
.guard-step.is-done .guard-step-num b { display: none; }
.guard-step.is-done .guard-step-num i { display: block; }
.guard-step > :last-child { flex: 1 1 auto; min-width: 0; }

/* step 1 — confirmation checkbox */
.guard-check {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    margin: 3px 0 0;
    cursor: pointer;
    font-size: .9rem;
    color: var(--gray-700);
}
.guard-check input { width: 18px; height: 18px; margin-top: 1px; flex: none; accent-color: var(--navy-700); }

/* step 2 — arithmetic challenge with live answer feedback */
.guard-challenge { display: grid; gap: 10px; }
.guard-challenge > label { font-size: .9rem; color: var(--navy-900); margin: 0; }
.guard-challenge-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.guard-challenge input[type="text"] {
    width: 96px;
    padding: 9px 12px;
    border: 1.5px solid var(--line);
    border-radius: 9px;
    font: inherit;
    font-size: .95rem;
    text-align: center;
    letter-spacing: 1px;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.guard-challenge input[type="text"]:focus {
    outline: none;
    border-color: var(--navy-500);
    box-shadow: 0 0 0 3px rgba(30, 64, 124, .12);
}
.guard-challenge input.is-ok { border-color: #12a172; box-shadow: 0 0 0 3px rgba(18, 161, 114, .14); }
.guard-challenge input.is-bad { border-color: var(--red-500, #dc2626); box-shadow: 0 0 0 3px rgba(220, 38, 38, .12); }
.guard-challenge-feedback { font-size: .82rem; font-weight: 600; min-height: 1.1em; }
.guard-challenge-feedback.is-ok { color: #0b7a5a; }
.guard-challenge-feedback.is-bad { color: #b42318; }

/* outstanding required fields (only shown while something is missing) */
.guard-fields {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 0 0 14px;
    padding: 10px 13px;
    border: 1px solid rgba(200, 160, 44, .4);
    border-radius: 10px;
    background: rgba(200, 160, 44, .09);
    font-size: .845rem;
    color: #7a5a12;
    font-weight: 600;
}
.guard-fields[hidden] { display: none; }
.guard-fields i { margin-top: 3px; flex: none; }

/* ------------------------------------------- guided error walker ---------- */
/* Steps the visitor through the outstanding items one at a time: the current
   item is scrolled to, focused and ringed; answering it advances automatically. */
.guard-walk {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 14px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--sand-50, #fbf8f1);
}
.guard-walk[hidden] { display: none; }
.guard-walk-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    font-family: inherit;
    font-size: .84rem;
    font-weight: 700;
    color: var(--navy-800);
    background: #fff;
    border: 1.5px solid var(--gray-300, #d5dbe4);
    border-radius: 999px;
    cursor: pointer;
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.guard-walk-btn:hover { border-color: var(--teal-500); }
.guard-walk-btn:focus-visible { outline: none; box-shadow: var(--ring); border-color: var(--teal-500); }
.guard-walk-btn.is-primary {
    color: #fff;
    background: var(--navy-700, #16385f);
    border-color: var(--navy-700, #16385f);
}
.guard-walk-btn.is-primary:hover { background: var(--navy-800, #0f2745); }
.guard-walk-count {
    flex: 1 1 120px;
    text-align: center;
    font-size: .84rem;
    font-weight: 700;
    color: #7a5a12;
    letter-spacing: .2px;
}

/* the ring around whichever item the walker is currently presenting */
.field-focus {
    position: relative;
    border-radius: 10px;
    outline: 2px dashed var(--gold-500, #c8971f);
    outline-offset: 4px;
    animation: walkPulse 1.15s ease-in-out 2;
}
.field-focus input:not([type="checkbox"]):not([type="radio"]),
.field-focus select,
.field-focus textarea {
    border-color: var(--gold-500, #c8971f);
    background: #fffdf5;
}
@keyframes walkPulse {
    0%, 100% { outline-color: var(--gold-500, #c8971f); }
    50% { outline-color: rgba(200, 151, 31, .35); }
}
@media (prefers-reduced-motion: reduce) {
    .field-focus { animation: none; }
}
@media print {
    .guard-walk { display: none !important; }
    /* Remove the focus decoration, never the field or signature itself. */
    .field-focus { outline: none !important; animation: none !important; }
}

/* transparency strip: the automated, non-actionable checks */
.guard-machine {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 14px 0 0;
    padding-top: 13px;
    border-top: 1px solid var(--line);
}
.guard-machine-label {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .9px;
    text-transform: uppercase;
    color: var(--gray-400, #98a2b3);
    margin-right: 2px;
}
.guard-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: #fff;
    font-size: .76rem;
    color: var(--gray-600);
}
.guard-chip i { font-size: .74rem; color: var(--gray-400, #98a2b3); }
.guard-chip.is-done { border-color: rgba(18, 161, 114, .4); background: #f4fbf8; color: #0b7a5a; }
.guard-chip.is-done i { color: #12a172; }

/* success state — shown once every check has passed */
.guard-done {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    margin: 14px 0 0;
    padding: 14px 15px;
    border: 1px solid rgba(18, 161, 114, .45);
    border-radius: 12px;
    background: #f4fbf8;
}
.guard-done[hidden] { display: none; }
.guard-done > i { flex: none; font-size: 1.15rem; color: #12a172; margin-top: 2px; }
.guard-done div { flex: 1 1 auto; min-width: 0; }
.guard-done strong { display: block; font-size: .92rem; color: #0b5c45; }
.guard-done span { display: block; font-size: .83rem; color: var(--gray-600); margin-top: 2px; }

/* the one-click handoff offered once the form is verified */
.guard-send { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 11px; }
.guard-send-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 15px;
    border-radius: 999px;
    border: 1px solid var(--teal-600, #0d9488);
    background: var(--teal-600, #0d9488);
    color: #fff;
    font: inherit;
    font-size: .82rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
}
.guard-send-btn:hover { background: #0b7a70; border-color: #0b7a70; color: #fff; }
.guard-send-btn.is-ghost { background: #fff; color: var(--teal-700, #0f766e); }
.guard-send-btn.is-ghost:hover { background: #f0fdfa; color: var(--teal-700, #0f766e); }
.guard-send-btn[data-mail-guard][aria-disabled="true"] { opacity: .5; pointer-events: none; }
.guard-send .vr-mail-note { flex: 1 1 100%; margin: 2px 0 0; font-size: .78rem; }

.guard-note { margin: 12px 0 0; font-size: .8rem; color: var(--gray-500); }
.guard-note i { color: var(--teal-600); }
.guard-status { margin: 8px 0 0; font-size: .84rem; font-weight: 600; }
.guard-status.is-ok { color: #0b7a5a; }
.guard-status.is-bad { color: #b42318; }

/* the single, prominent submit action */
.guard-actions { margin: 0 0 12px; }
.guard-submit {
    width: 100%;
    padding: 17px 26px;
    font-size: 1.06rem;
    font-weight: 700;
    letter-spacing: .2px;
    border-radius: var(--radius);
    position: relative;
}
.guard-submit:disabled {
    cursor: not-allowed;
    opacity: .62;
    box-shadow: none;
    filter: grayscale(.35);
    transform: none;
}
.guard-submit:disabled:hover { transform: none; }
.guard-submit.is-ready {
    animation: guardPulse 2.1s ease-in-out infinite;
    box-shadow: 0 14px 34px -12px rgba(200, 160, 44, .85);
}
.guard-submit.is-ready:hover { animation: none; transform: translateY(-2px); }
.guard-submit.is-done {
    background: linear-gradient(135deg, var(--teal-500), var(--teal-700));
    color: #fff;
    animation: none;
    opacity: 1;
    filter: none;
}
@keyframes guardPulse {
    0%, 100% { box-shadow: 0 12px 26px -12px rgba(200, 160, 44, .6); }
    50%      { box-shadow: 0 16px 38px -10px rgba(200, 160, 44, .95); }
}
.guard-submit-hint {
    margin: 10px 0 0;
    font-size: .84rem;
    color: var(--gray-500);
    text-align: center;
}
.guard-submit-hint.is-ok { color: #0b7a5a; font-weight: 600; }

.guard-errors {
    margin: 0 0 12px;
    padding: 12px 14px;
    border: 1px solid rgba(180, 35, 24, .3);
    border-left: 4px solid var(--red-500, #dc2626);
    border-radius: 10px;
    background: rgba(220, 38, 38, .05);
    font-size: .85rem;
    color: #8f1d14;
}
.guard-errors strong { display: block; margin-bottom: 5px; }
.guard-errors span { display: block; margin: 3px 0 3px 10px; position: relative; }
.guard-errors span::before { content: '\2022'; position: absolute; left: -10px; }

/* ================================================ FORM SECTION NAV ====== */
.form-nav {
    position: sticky;
    top: calc(var(--nav-h) + 10px);
    z-index: 60;
    margin: 0 0 20px;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    padding: 12px 14px;
}
.form-nav-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.form-nav-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--navy-700);
    margin: 0;
}
.form-nav-title i { color: var(--gold-500); }
.form-nav-count { font-size: .8rem; color: var(--gray-600); font-weight: 600; }

.form-nav-select-wrap { margin-top: 10px; }
.form-nav-select-wrap label { display: block; font-size: .76rem; font-weight: 700; color: var(--gray-600); margin-bottom: 5px; text-transform: uppercase; letter-spacing: .5px; }
.form-nav-select-wrap select {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--navy-500);
    border-radius: 10px;
    background: #fff;
    font: inherit;
    font-size: .92rem;
    font-weight: 600;
    color: var(--navy-800);
}

.form-nav-chips {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}
.form-nav-chips li { flex: none; }
.form-nav-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 13px;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: #fff;
    color: var(--navy-700);
    font: inherit;
    font-size: .83rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.form-nav-chip:hover { border-color: var(--navy-500); background: var(--sand-50); }
.form-nav-chip .fn-dot {
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--gray-300, #d5d5d5);
    flex: none;
}
.form-nav-chip.is-done .fn-dot { background: #12a172; }
.form-nav-chip.is-active {
    background: linear-gradient(135deg, var(--navy-700), var(--navy-800));
    border-color: var(--navy-800);
    color: #fff;
}
.form-nav-chip.is-active .fn-dot { background: var(--gold-400); }

.form-nav-steps {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--sand-200);
}
.form-nav-steps .btn { flex: 1; }
.form-nav-flag {
    display: inline-flex;
    align-items: center;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #b45309;
    background: rgba(224, 187, 74, .22);
    border-radius: var(--radius-pill);
    padding: 3px 10px;
    margin-left: 8px;
    white-space: nowrap;
}
/* completed-section affordance inside the form itself */
.form-card.is-complete { border-color: rgba(18, 161, 114, .45); }
.form-card.is-complete > .form-card-title::after {
    content: '\f058';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: #12a172;
    margin-left: 8px;
}
.form-card.is-current { box-shadow: 0 0 0 3px rgba(42, 102, 173, .18), var(--shadow-md); }

.form-card-foot { margin-top: 20px; display: flex; justify-content: flex-end; }
.form-card-foot .fn-next {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--sand-50);
    color: var(--navy-700);
    font: inherit;
    font-size: .84rem;
    font-weight: 600;
    cursor: pointer;
}
.form-card-foot .fn-next:hover { background: #fff; border-color: var(--navy-500); }

@media (max-width: 780px) {
    .form-nav { top: calc(var(--nav-h) + 6px); padding: 11px 12px; }
    .guard-submit { padding: 15px 20px; font-size: 1rem; }
    .guard-head { gap: 11px; }
    .guard-progress { order: 3; margin-left: 57px; }
    .guard-step { padding: 12px 13px; gap: 11px; }
    .guard-challenge input[type="text"] { width: 84px; }
    .guard-machine { gap: 6px; }
    .signature-canvas { height: 140px; }
    .sig-type-preview { font-size: 2.05rem; min-height: 84px; }
    .sig-controls { gap: 7px; }
    .sig-btn { padding: 8px 12px; }
}
@media (max-width: 560px) {
    /* On a phone the chip strip only ever showed its first one or two entries
       before running off the edge, and there was no cue that it scrolled. The
       "Jump to a section" dropdown already covers this job, so drop the strip
       rather than clip it. Progress is still shown by the counter, the per-card
       ticks and the "Next: section" button at the foot of each card. */
    .form-nav-chips { display: none; }
    .form-nav-select-wrap { margin-top: 0; }
    .form-nav-select-wrap select { padding: 12px 40px 12px 14px; font-size: .9rem; }
    .form-nav-steps { flex-wrap: wrap; }
    .form-nav-steps .btn { font-size: .82rem; padding: 10px 12px; }
    .guard-progress { margin-left: 0; }
    .guard-machine-label { width: 100%; }
    .signature-area { padding: 13px; }
    .sig-modes { width: 100%; }
    .sig-mode { flex: 1; justify-content: center; }
    .sig-baseline { left: 16px; right: 16px; }
    .sig-type-preview { font-size: 1.8rem; }
}


/* =========================================================== PRINT ====== */
/* Goal: a tight multi-page PDF with no stray blank pages and no wasted white
   space. The blank pages came from three things, all fixed below:
     1. `body { min-height:100vh; padding-top:var(--nav-h) }` — the viewport
        height plus the nav offset pushed content past a page boundary.
     2. `.form-body` kept its screen padding *inside* the @page margin, so the
        printable area was double-indented and could overflow.
     3. `break-inside: avoid` on whole `.form-card` sections: a tall section that
        would not fit was bumped to the next page, leaving a big gap behind it.
        Now only the small units (a field group, a row, a signature box, a table
        row) are kept together, so sections flow and fill each page. */
@media print {
    @page { size: letter; margin: 0.5in; }

    .no-print, .site-nav, .site-footer, .doc-actions, .back-to-top,
    .nav-progress, .form-progress-track, .skip-link,
    .vr-launcher, .vr-panel, .guard-card, .guard-honeypot,
    .form-nav, .form-card-foot, .form-nav-flag,
    .sig-toast, .print-banner { display: none !important; }
    html, body {
        background: #fff !important;
        padding: 0 !important;      /* was: padding-top: var(--nav-h) */
        margin: 0 !important;
        min-height: 0 !important;   /* was: min-height: 100vh  → blank page */
        height: auto !important;
        font-size: 10pt !important;
        line-height: 1.3 !important;
        color: #000 !important;
        overflow: visible !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .container { max-width: none !important; padding: 0 !important; margin: 0 !important; }

    /* the shells no longer contribute their own padding or shadow */
    .form-body, .doc-body { padding: 0 !important; }
    .doc-shell, .form-shell { border: 0 !important; max-width: none !important; box-shadow: none !important; }

    .doc-shell, .form-shell, .card, .table-wrap, .compare, .value-card, .cert-item, .faq-item {
        box-shadow: none !important;
        border-radius: 0 !important;
        margin: 0 0 8px !important;
    }

    .page-header, .form-banner, .hero {
        background: #fff !important;
        color: #000 !important;
        border-bottom: 2px solid #000 !important;
        padding: 0 0 6px !important;
        margin-bottom: 10px !important;
    }
    .page-header h1, .form-banner h1, .hero h1 { color: #000 !important; font-size: 16pt !important; }
    .page-header p, .form-banner p, .hero-lead, .breadcrumb, .pill-row, .hero-eyebrow { color: #333 !important; }
    .pill-row { display: none !important; }   /* decorative only */

    .form-card {
        border: 1px solid #999 !important;
        padding: 9px 11px !important;
        margin-bottom: 8px !important;
    }
    .form-card > h2, .form-card-title { font-size: 11pt !important; color: #000 !important; margin-bottom: 6px !important; }
    .form-card.is-complete > .form-card-title::after { content: none !important; }
    .form-card h3 { font-size: 10pt !important; margin: 8px 0 4px !important; }

    input, select, textarea {
        border: 0 !important;
        border-bottom: 1px solid #555 !important;
        background: #fff !important;
        color: #000 !important;
        border-radius: 0 !important;
        padding: 1px 0 !important;
        font-size: 9.5pt !important;
        box-shadow: none !important;
    }
    select { background-image: none !important; }
    /* a textarea reserves 96px on screen — drop that dead space on paper, but
       keep a small writing box so there is still somewhere to write */
    textarea { border: 1px solid #777 !important; min-height: 34px !important; height: 34px !important; }
    textarea:not(:placeholder-shown) { height: auto !important; min-height: 34px !important; }

    .form-grid { gap: 4px 12px !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .form-row, .form-row-4 { gap: 4px 12px !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .form-group { gap: 1px !important; margin-bottom: 4px !important; }
    .helper-text { font-size: 8pt !important; margin: 0 0 3px !important; }
    .divider { margin: 8px 0 !important; }
    .divider::after { display: none !important; }

    .two-col { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
    .two-col.is-single { grid-template-columns: 1fr !important; }

    /* Only the signature ink prints — no status pill, mode switch, prompts,
       baseline, buttons or trays. */
    .signature-area { border: 1px solid #999 !important; background: #fff !important; padding: 6px !important; }
    .signature-canvas {
        height: 64px !important;
        border: 0 !important;
        border-bottom: 1px solid #555 !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }
    .sig-modes, .sig-controls, .sig-hint, .sig-saved, .sig-type-prompt { display: none !important; }
    .sig-head { margin-bottom: 2px !important; }
    .sig-status { display: none !important; }
    .sig-type { display: none !important; }
    .sig-baseline { display: none !important; }
    .sig-prompt { display: none !important; }
    .sig-canvas-wrap { padding-bottom: 0 !important; }
    /* Type mode hides the draw surface on screen; its applied ink still prints. */
    .signature-area .sig-draw[hidden] { display: block !important; }
    .doc-shell, .form-shell { overflow: visible !important; }
    .field-error, .group-error, .signature-error { display: none !important; }
    .print-answer { display: block !important; white-space: pre-wrap; overflow-wrap: anywhere; border-bottom: 1px solid #777; padding: 2px 0; }
    textarea.has-print-answer { display: none !important; }

    .office-use { border: 1px solid #999 !important; background: #fff !important; }
    .info-box, .callout, .notice, .disclaimer {
        background: #fff !important;
        border: 1px solid #999 !important;
        color: #000 !important;
        padding: 6px 8px !important;
        margin: 0 0 6px !important;
    }

    table.tax-table th, .data-table th { background: #e8e8e8 !important; color: #000 !important; border: 1px solid #666 !important; }
    table.tax-table td, .data-table td { border: 1px solid #999 !important; }
    table.tax-table, .data-table { font-size: 8.5pt !important; }
    table.tax-table tbody tr:nth-child(even), .data-table tbody tr:nth-child(even) { background: #f4f4f4 !important; }
    .table-wrap { overflow: visible !important; }

    /* Respect the selected return type, as the checklist's instructions say. */
    .tab-panel[hidden] { display: none !important; }
    .tab-panel:not([hidden]) { display: block !important; }
    .tab-intro { break-after: avoid; }
    .checklist-section { break-inside: auto; }
    .checklist li { break-inside: avoid; }

    a { color: #000 !important; text-decoration: none !important; }
    img { max-width: 100% !important; }

    /* Pagination: keep only *small* atomic units whole. Anything that could be
       taller than one printable page must be allowed to flow, otherwise the
       engine cannot fit it and drops it on the next page, leaving the rest of
       the previous page blank — the blank-page complaint. */
    h1, h2, h3, h4, h5 { break-after: avoid; break-inside: avoid; }
    .form-group, .form-row, .form-row-4, .dependent-item, .signature-area,
    .info-box, .callout, .office-use { break-inside: avoid; }
    /* long tables (e.g. the 30-row 2027 refund calendar) MUST break, or they
       generate a blank page ahead of themselves. Rows stay whole. */
    table, .table-wrap { break-inside: auto; }
    tr, td, th { break-inside: avoid; }
    thead { display: table-header-group; }   /* repeat header on each page */
    p, li { orphans: 3; widows: 3; }
    /* never start a fresh page just to finish a section */
    .form-card { break-inside: auto; }
    .form-card:last-child, .form-shell > :last-child { margin-bottom: 0 !important; }
}