:root { --red: #1c4585; --red-dark: #1c4585; --red-border: #1c4585; --red-tint: #1c45851a; --ink: #211416; --ebony: #0f172a; --slate: #374151; --gray: #5b6472; --muted: #6b7280; --border: #e7e9ee; --bg-soft: #f1f5f9; --bg-features: #f6f8fb; --footer: #1b1113; --blue: #2f6bff; --green: #16a34a; --gold: #f5b400; --input-bg: #fafbfc; --red-light: #1c45851a; --accent: #1c4585; --text: #16131F; --body: #5F6472; --border: #E7E8EC; --bg: #FFFDFC; --success: #22C55E; --pdf-card: #EEF8FF; }

* { margin: 0; padding: 0; box-sizing: border-box }

html { scroll-behavior: smooth }

body { font-family: 'Inter', Arial, sans-serif; color: var(--ebony); background: #fff; -webkit-font-smoothing: antialiased }

.steps,
.templates,
.features,
.state-coverage,
.pricing,
.faq { scroll-margin-top: 61px; }

.text-nowrap { white-space: nowrap; }
.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 6px; width: 36px; height: 36px; align-items: center; justify-content: center; }
    .nav-toggle span { display: block; width: 22px; height: 2px; background: var(--ebony); position: relative; transition: background .2s; }
        .nav-toggle span::before,
        .nav-toggle span::after { content: ""; position: absolute; left: 0; width: 22px; height: 2px; background: var(--ebony); transition: transform .2s; }
        .nav-toggle span::before { top: -7px; }
        .nav-toggle span::after { top: 7px; }

    .nav-toggle.open span { background: transparent; }
        .nav-toggle.open span::before { transform: translateY(7px) rotate(45deg); }
        .nav-toggle.open span::after { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu { display: none; flex-direction: column; border-top: 1px solid var(--border); background: #fff; padding: 8px 24px 18px; }
    .mobile-menu a { font-size: 15px; font-weight: 600; color: var(--slate); padding: 12px 0; border-bottom: 1px solid var(--border); }
        .mobile-menu a:last-of-type { border-bottom: none; }
    .mobile-menu .signin { margin-top: 14px;margin-bottom: 14px; text-align: center; border: 1px solid var(--border); border-radius: 8px; padding: 10px; }
    .mobile-menu.open { display: flex; }
     .mobile-menu .btn-red{color:#fff} 
    .nav-links a.active,
    .mobile-menu a.active { color: var(--red); }

.nav-links a { position: relative; }
    .nav-links a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -22px; height: 2px; background: var(--red); border-radius: 2px; }

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

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

.container { max-width: 1320px; margin: 0 auto; padding: 0 24px }

.text-link { color: var(--red); text-decoration: underline; transition: 0.3s; }
    .text-link:hover { color: var(--red-dark); }

.nav { border-bottom: 1px solid var(--border); background: #fff; position: sticky; top: 0; z-index: 50 }

.nav-inner { max-width: 1200px; margin: 0 auto; padding: 10px 24px; display: flex; align-items: center; justify-content: space-between }

.logo { display: flex; align-items: center; gap: 7px; justify-content: center; }

.footer-brand .logo img { background: #fff; padding: 8px; border-radius: 8px; }

.logo-text { display: flex; flex-direction: column; line-height: 1.2 }

.logo-line1 { font-size: 10.7px; font-weight: 800; letter-spacing: .27px; color: #000 }

.logo-line2 { font-size: 10.7px; font-weight: 700; letter-spacing: .27px; color: var(--red) }

    .logo-line2 span { font-size: 8px; font-weight: 500 }

.logo-tag { font-size: 5.3px; font-weight: 500; color: #7d7d7d }

.nav-links { display: flex; gap: 25px }

    .nav-links a { font-size: 14px; font-weight: 600; color: var(--slate); transition: color .15s }

        .nav-links a:hover { color: var(--red) }

.nav-actions { display: flex; align-items: center; gap: 16px }

    .nav-actions .signin { font-size: 14px; font-weight: 600; color: var(--ebony); border: 1px solid var(--border); font-size: 14px; padding: 10px 18px; border-radius: 8px; transition: 0.3s; }

        .nav-actions .signin:hover { border: 1px solid var(--red); }

.btn-red { display: inline-flex; align-items: center; justify-content: center; background: var(--red); color: #fff; font-weight: 700; font-size: 14px; padding: 10px 18px; border-radius: 8px; border: none; cursor: pointer; transition: background .15s }

.btn-cta { display: inline-flex; align-items: center; justify-content: center; background: #1c4585; color: #fff; font-weight: 700; font-size: 15px; padding: 14px 26px; border-radius: 10px; transition: transform .15s, box-shadow .15s }

    .btn-cta:hover { transform: translateY(-1px); box-shadow: 0 12px 24px -8px rgb(40 68 132); }

.btn-ghost { display: inline-flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--red-border); color: var(--ink); font-weight: 700; font-size: 15px; padding: 14px 27px; border-radius: 10px; transition: border-color .15s, background .15s }

    .btn-ghost:hover { border-color: var(--red); background: #1c458512; }

.pill { display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 999px; background: var(--red-tint); color: var(--red); font-size: 12px; font-weight: 700; letter-spacing: .72px; text-transform: uppercase }

.section-head { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px }

    .section-head h2 { font-size: 32px; font-weight: 800; letter-spacing: -.32px; line-height: 1.15; color: var(--ink) }

    .section-head p { font-size: 16px; line-height: 1.7; color: var(--gray) }

.accent { color: var(--red) }

.hero { padding: 72px 0 0 }

.hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; max-width: 1200px; margin: 0 auto; padding: 0 24px }

.hero-badge { display: inline-flex; padding: 7px 14px; border-radius: 999px; background: var(--red-tint); color: var(--red); font-size: 12px; font-weight: 700; width: fit-content }

.hero h1 { font-size: 48px; font-weight: 900; line-height: 1.15; letter-spacing: -.52px; color: var(--ink); margin: 21px 0 }

    .hero h1 .grad { background: linear-gradient(90deg, var(--red), var(--red-dark)); -webkit-background-clip: text; background-clip: text; color: transparent }

.hero-sub { max-width: 480px; font-size: 16px; line-height: 1.7; color: var(--gray) }

.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px }

.hero-trust { display: flex; align-items: center; gap: 14px; margin-top: 34px }

.avatars { display: flex }

.trust-copy { font-size: 13px; color: #4b5563 }

    .trust-copy strong { color: var(--ebony) }

.trust-stars { letter-spacing: 1px }

    .trust-stars .stars { color: var(--gold) }

.hero-visual { position: relative; display: flex; flex-direction: column; gap: 18px; padding: 56px 18px 52px }
.demo-card { background: #fff; border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 24px 60px -30px rgba(15,23,42,.35); display: grid; grid-template-columns: .95fr 1.15fr; overflow: hidden; width: 100%; min-width: 0 }

.demo-form { background: var(--bg-soft); border-right: 1px solid var(--border); padding: 22px 20px; display: flex; flex-direction: column; justify-content: center; min-width: 0 }
    .demo-form h4 { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; color: var(--red); margin-bottom: 16px }
        .demo-form h4::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--red); flex-shrink: 0 }
.demo-field { margin-bottom: 13px }
    .demo-field label { display: block; font-size: 10.5px; font-weight: 700; color: var(--slate); margin-bottom: 5px }
    .demo-field .input { background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 9px 10px; font-size: 12.5px; color: #111827 }
.demo-form .btn-generate { width: 100%; background: var(--red); color: #fff; font-weight: 700; font-size: 12.5px; padding: 11px; border: none; border-radius: 8px; cursor: pointer; margin-top: 6px }
    .demo-form .btn-generate:hover { background: var(--red-dark) }

.stub { padding: 20px; font-size: 10.5px; line-height: 1.5; color: var(--slate); display: flex; flex-direction: column; min-width: 0 }
.stub-top { display: flex; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--border); padding-bottom: 12px; margin-bottom: 12px }
.stub-brand { display: flex; gap: 8px; align-items: flex-start }
.stub-mark { width: 14px; height: 19px; background: var(--ebony); border-radius: 4px; flex-shrink: 0; margin-top: 1px }
.stub-brand b { display: block; font-size: 12px; color: var(--ebony); margin-bottom: 2px }
.stub-brand small { display: block; font-size: 9.5px; color: var(--gray); font-weight: 400; line-height: 1.5 }
.stub-title { text-align: right; font-size: 9.5px; color: var(--gray); line-height: 1.5; flex-shrink: 1; min-width: 0 }
    .stub-title b { display: block; font-size: 12px; color: var(--ebony); margin-bottom: 2px }
.stub-people { display: flex; justify-content: space-between; gap: 14px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--border) }
    .stub-people b { display: block; font-size: 10.5px; color: var(--ebony); margin-bottom: 2px }
.stub table { width: 100%; border-collapse: collapse; font-size: 10.5px }
    .stub table + table { margin-top: 9px }
.stub th { font-size: 9px; font-weight: 600; color: var(--gray); text-align: left; border-bottom: 1px solid var(--border); padding: 3px 0 5px }
.stub td { padding: 4px 0 }
.stub .num { text-align: right }
.stub .bold td { font-weight: 700; border-top: 1px solid var(--border); padding-top: 6px }
.stub-net { display: flex; justify-content: space-between; align-items: center; background: #f0fdf4; border-radius: 6px; padding: 8px 10px; margin-top: 10px; font-size: 12px; font-weight: 800; color: var(--green) }

.summary-card { background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 12px 30px -18px rgba(15,23,42,.2); padding: 17px 21px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap }
.summary-item { display: flex; align-items: center; gap: 10px }
.summary-icon { width: 36px; height: 36px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 16px }
    .summary-icon.blue { background: #eaf1ff; color: var(--blue) }
    .summary-icon.purple { background: #f3e8ff; color: #9333ea }
    .summary-icon.green { background: #dcfce7; color: var(--green); font-weight: 700 }
.summary-item small { display: block; font-size: 11px; font-weight: 600; color: var(--gray) }
.summary-item b { font-size: 15px; color: var(--ebony) }

.float-card { position: absolute; background: #fff; border-radius: 12px; box-shadow: 0 14px 32px -12px rgba(15,23,42,.3); padding: 10px 14px; display: flex; align-items: center; gap: 10px; z-index: 3; white-space: nowrap; border: 1px solid var(--border) }
    .float-card .icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0 }
        .float-card .icon.red { background: var(--red-light); color: var(--red) }
        .float-card .icon.green { background: #dcfce7; color: var(--green) }
        .float-card .icon.blue { background: #eaf1ff; color: var(--blue) }
        .float-card .icon.purple { background: #f3e8ff; color: #9333ea }
    .float-card b { display: block; font-size: 12.5px; color: var(--ebony) }
    .float-card span { font-size: 12px; color: var(--muted) }
.float-pdf { top: 0; left: 0 }
.float-info { bottom: 0; left: 0 }

.hero-stats { border-top: 1px solid var(--border); margin-top: 60px }
.hero-stats-inner { max-width: 1200px; margin: 0 auto; padding: 37px 24px 47px; display: grid; grid-template-columns: repeat(4,1fr); gap: 20px }
.stat { display: flex; align-items: center; gap: 12px }
.stat-icon { width: 44px; height: 44px; border-radius: 10px; background: #eaf1ff; display: flex; align-items: center; justify-content: center; font-size: 20px }
    .stat-icon.gold { background: #fef3c7 }
.stat b { display: block; font-size: 22px; color: var(--ebony) }
.stat span { font-size: 13px; font-weight: 600; color: var(--gray) }

.hero-stats { border-top: 1px solid var(--border); margin-top: 60px }

.hero-stats-inner { max-width: 1200px; margin: 0 auto; padding: 37px 24px 47px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px }

.stat { display: flex; align-items: center; gap: 12px }

.stat-icon { width: 44px; height: 44px; border-radius: 10px; background: #eaf1ff; display: flex; align-items: center; justify-content: center; font-size: 20px }

    .stat-icon.gold { background: #fef3c7 }

.stat b { display: block; font-size: 22px; color: var(--ebony) }

.stat span { font-size: 12.5px; font-weight: 600; color: var(--gray) }

.steps { background: var(--bg-soft); padding: 80px 0 }

.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 56px 0; align-items: stretch }

.step-card { position: relative; height: 100%; padding-top: 16px }

.step-inner { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; text-align: left; box-shadow: 0 14px 34px -22px rgba(15, 23, 42, .18); transition: transform .15s, box-shadow .15s }

.step-card:hover .step-inner { transform: translateY(-4px); box-shadow: 0 20px 42px -20px rgba(15, 23, 42, .28) }

.step-visual { position: relative; background: #fff; height: 200px; overflow: hidden; border-bottom: 1px solid var(--border) }

.step-num { position: absolute; top: -12px; left: -12px; width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--red), var(--red-dark)); color: #fff; font-size: 14px; font-weight: 800; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 16px -4px rgba(28, 69, 133, .55); border: 3px solid #fff; z-index: 3 }

.step-visual .mock-window { width: 100%; height: 100% }

.mock-window { background: #fff; border-radius: 0; box-shadow: none; overflow: hidden; border: none; position: relative; display: flex; flex-direction: column }

.mock-body { flex: 1 }

.mock-bar { display: flex; gap: 5px; padding: 8px 10px; background: #f3f4f6; border-bottom: 1px solid var(--border) }

    .mock-bar span { width: 7px; height: 7px; border-radius: 50%; display: block }

        .mock-bar span:nth-child(1) { background: var(--red) }

        .mock-bar span:nth-child(2) { background: var(--gold) }

        .mock-bar span:nth-child(3) { background: var(--green) }

.mock-body { padding: 12px }

.mock-label { font-size: 8.5px; font-weight: 700; color: var(--gray); text-transform: uppercase; letter-spacing: .4px; margin: 9px 0 6px }

    .mock-label:first-child { margin-top: 0 }

.mock-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px }

.mock-field small { display: block; font-size: 8px; color: var(--muted); margin-bottom: 3px }

.mock-input { background: var(--input-bg); border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; font-size: 10px; color: #111827 }

.mock-preview-row { display: flex; justify-content: space-between; padding: 3px 0; font-size: 10.5px; color: var(--slate) }

    .mock-preview-row.head { font-weight: 700; color: var(--ink) }

    .mock-preview-row.sub { padding-left: 10px; font-size: 9.5px; color: var(--gray) }

    .mock-preview-row .neg { color: var(--red); font-weight: 600 }

.mock-net { display: flex; justify-content: space-between; align-items: center; background: #f0fdf4; border-radius: 6px; padding: 6px 9px; margin-top: 6px; font-size: 11px; font-weight: 800; color: var(--green) }

.mock-pdf-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px }

.mock-pdf-tag { display: inline-flex; align-items: center; background: var(--red); color: #fff; font-size: 9px; font-weight: 800; padding: 3px 8px; border-radius: 4px; letter-spacing: .4px }

.mock-pdf-brand { font-size: 12px; font-weight: 800; color: var(--ebony) }

.mock-pdf-badge { background: #eef0f4; color: var(--slate); font-size: 8px; font-weight: 700; padding: 3px 7px; border-radius: 4px }

.mock-pdf-lines span { display: block; height: 6px; background: var(--border); border-radius: 3px; margin-bottom: 7px }

    .mock-pdf-lines span:nth-child(1) { width: 88% }

    .mock-pdf-lines span:nth-child(2) { width: 65% }

    .mock-pdf-lines span:nth-child(3) { width: 76% }

.mock-download { position: absolute; bottom: 10px; right: 10px; width: 30px; height: 30px; border-radius: 50%; background: var(--blue); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; box-shadow: 0 8px 18px -6px rgba(47, 107, 255, .6) }

.step-body { padding: 18px 22px 22px; flex: 1; display: flex; flex-direction: column }

    .step-body h3 { margin-bottom: 8px }

    .step-body p { line-height: 1.6; color: var(--gray) }

.steps .btn-wrap { display: flex; justify-content: center }

.templates { padding: 80px 0 }

.tpl-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin: 50px 0 44px }

.tpl-card { background: #fff; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; }

.tpl-preview { background: #eef0f4; min-height: 170px; padding: 18px; position: relative; display: flex; align-items: center; justify-content: center }

    .tpl-preview img { width: 100%; height: auto; border-radius: 6px; box-shadow: 0 6px 18px -8px rgba(15, 23, 42, .3); background: #fff }

.tpl-badge { position: absolute; top: 10px; left: 10px; padding: 4px 9px; border-radius: 5px; font-size: 9.5px; font-weight: 800; letter-spacing: .29px; text-transform: uppercase; color: #fff; background: #111827; z-index: 2 }

    .tpl-badge.blue { background: var(--blue) }

    .tpl-badge.green { background: #22c98e }

    .tpl-badge.sky { background: #0ea5e9 }

.tpl-overlay { position: absolute; inset: 0; background: rgba(11, 18, 32, .55); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .2s; cursor: pointer }

.tpl-card:hover .tpl-overlay { opacity: 1 }

.tpl-overlay button { background: #fff; border: none; border-radius: 8px; padding: 9px 18px; font-family: inherit; font-size: 12.5px; font-weight: 700; color: var(--ebony); cursor: pointer; box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .35); display: inline-flex; align-items: center; gap: 6px }

.tpl-body { padding: 16px; display: flex; flex-direction: column; gap: 6px; }

    .tpl-body h3 { font-size: 16px; font-weight: 700; }

    .tpl-body p { font-size: 14px; line-height: 1.6; color: var(--gray); min-height: 52px }

.tpl-swatches { display: flex; align-items: center; gap: 6px; padding: 6px 0; flex-wrap: wrap }

.swatch { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .08) }

.tpl-swatches span { font-size: 12px; color: var(--gray); padding-left: 2px }

.tpl-use { margin-top: auto; display: block; text-align: center; background: #f8fafc; border: 1px solid var(--border); border-radius: 8px; padding: 10px; font-size: 13px; font-weight: 700; color: var(--blue); cursor: pointer; transition: background .15s; font-family: inherit; width: 100% }

    .tpl-use:hover { background: #eef2ff }

.templates .btn-cta { border: none; cursor: pointer; font-family: inherit }

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

.tpl-modal { position: fixed; inset: 0; background: rgba(15, 23, 42, .55); display: none; align-items: center; justify-content: center; z-index: 200; padding: 24px }

    .tpl-modal.open { display: flex }

.tpl-modal-inner { background: #fff; border-radius: 14px; width: 100%; max-width: 1000px; max-height: 88vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .4) }

.tpl-modal-head { padding: 18px 22px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: flex-start; gap: 12px }

    .tpl-modal-head h3 { font-size: 17px; font-weight: 800; color: var(--ebony) }

    .tpl-modal-head p { font-size: 12.5px; color: var(--muted); margin-top: 2px }

.tpl-modal-close { background: #f1f5f9; border: none; width: 30px; height: 30px; border-radius: 50%; font-size: 16px; color: var(--slate); cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0 }

    .tpl-modal-close:hover { background: #e2e8f0 }

.tpl-modal-body { display: grid; grid-template-columns: 280px 1fr; flex: 1; min-height: 0 }

.tpl-list { border-right: 1px solid var(--border); overflow-y: auto; padding: 10px }

.tpl-list-group { padding: 10px 6px 4px; font-size: 10.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--muted) }

.tpl-list-item { display: flex; gap: 10px; align-items: center; padding: 10px; border-radius: 8px; cursor: pointer; border: 1px solid transparent; margin-bottom: 4px }

    .tpl-list-item:hover { background: #f8fafc }

    .tpl-list-item.active { background: #eef4ff; border-color: #c7d7ff }

    .tpl-list-item img { width: 56px; height: 36px; object-fit: cover; border-radius: 4px; background: #f1f5f9; flex-shrink: 0 }

    .tpl-list-item .n { font-size: 13px; font-weight: 700; color: var(--ebony); line-height: 1.25 }

    .tpl-list-item .s { font-size: 11px; color: var(--muted); margin-top: 2px }

    .tpl-list-item .check { margin-left: auto; color: transparent; font-weight: 800; font-size: 14px }

    .tpl-list-item.active .check { color: var(--blue) }

.tpl-preview-pane { padding: 22px; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; background: #f8fafc }

.tpl-preview-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap }

.tpl-preview-title { display: flex; align-items: center; gap: 10px }

    .tpl-preview-title h4 { font-size: 15px; font-weight: 800; color: var(--ebony) }

    .tpl-preview-title .layout-tag { background: #eaf2ff; color: var(--blue); font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 5px }

.tpl-preview-swatches { display: flex; gap: 6px }

    .tpl-preview-swatches .sw { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff; cursor: pointer; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); transition: transform .12s }

        .tpl-preview-swatches .sw:hover { transform: scale(1.12) }

        .tpl-preview-swatches .sw.on { border-color: var(--blue) }

.tpl-preview-image { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 14px; display: flex; align-items: center; justify-content: center; }

    .tpl-preview-image img { max-width: 100%; max-height: 420px; height: auto }

.tpl-modal-foot { padding: 14px 22px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; background: #fff }

    .tpl-modal-foot .sel { font-size: 12.5px; color: var(--slate) }

        .tpl-modal-foot .sel b { color: var(--ebony) }

    .tpl-modal-foot .actions { display: flex; gap: 8px }

.btn-outline { background: #fff; border: 1px solid var(--blue); color: var(--blue); font-family: inherit; font-weight: 700; font-size: 13px; padding: 9px 18px; border-radius: 8px; cursor: pointer }

    .btn-outline:hover { background: #eef4ff }

.btn-primary { background: var(--red); border: none; color: #fff; font-family: inherit; font-weight: 700; font-size: 13px; padding: 9px 18px; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px }

    .btn-primary:hover { background: var(--red-dark) }

@media (max-width:760px) {
    .tpl-modal-body { grid-template-columns: 1fr }

    .tpl-list { max-height: 220px; border-right: none; border-bottom: 1px solid var(--border) }

    .nav-actions .signin { display: none; }
}

.features { background: var(--bg-features); padding: 80px 0 }

.feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 50px; margin-bottom: 30px; }

.feat-card { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 25px; display: flex; flex-direction: column; gap: 7px }

.feat-top { display: flex; justify-content: space-between; align-items: flex-start }

.feat-icon { width: 38px; height: 38px; border-radius: 10px; background: #eaf1ff; display: flex; align-items: center; justify-content: center; font-size: 17px }

    .feat-icon.green { background: #e7faf2 }

.feat-deco { font-size: 16px; color: #cbd5e1 }

    .feat-deco.pink { color: #fca5a5 }

    .feat-deco.yellow { color: #fde68a }

    .feat-deco.dot { width: 10px; height: 10px; border-radius: 5px; background: linear-gradient(90deg, var(--blue), #22c98e) }

.feat-card h3 { font-weight: 700; letter-spacing: -.16px; color: var(--ebony); padding-top: 9px }

.feat-card p { line-height: 1.65; color: var(--gray); padding-bottom: 0px }

.feat-foot { border-top: 1px solid var(--border); padding-top: 13px; font-size: 11px; font-weight: 700; color: var(--red) }

.mobile { padding-top: 80px; }

.mobile-grid { display: grid; grid-template-columns: 1fr .9fr; gap: 40px; align-items: center; max-width: 1200px; margin: 0 auto; padding: 0 24px }

.mobile-copy h2 { font-size: 34px; font-weight: 800; letter-spacing: -.34px; line-height: 1.15; color: var(--ink); margin: 16px 0 }

.mobile-copy p { line-height: 1.7; color: var(--gray) }

.store-badges { margin-top: 32px; max-width: 100% }

.mobile-visual { position: relative; display: flex; justify-content: end; }

    .mobile-visual img { width: 100%; max-width: 400px; }

.mobile-chip { position: absolute; background: #fff; border-radius: 10px; box-shadow: 0 12px 24px -12px rgba(15, 23, 42, .35); padding: 10px 14px; font-size: 11px; color: var(--ebony); white-space: nowrap }

.chip-tax { top: 14%; right: 2% }

.chip-pdf { top: 26%; left: -4% }

.scanner { margin-top: 20px; display: flex; align-items: center; justify-content: flex-start; gap: 30px; width: fit-content; }

    .scanner div { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }

    .scanner img { box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; border-radius: 8px; }

.state-coverage { background: var(--bg-soft); padding: 88px 0; overflow: hidden }

.sc-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: 56px; align-items: center }

.sc-info h2 { font-size: 34px; font-weight: 800; letter-spacing: -.34px; line-height: 1.18; color: var(--ink); margin: 18px 0 14px }

.sc-info p { line-height: 1.75; color: var(--gray); max-width: 440px }

    .sc-info p u { color: var(--slate); text-decoration-color: var(--border) }

.sc-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 28px; margin: 34px 0 28px }

    .sc-stats b { display: block; font-size: 30px; font-weight: 800; color: var(--ink) }

    .sc-stats span { font-size: 12.5px; color: var(--gray); font-weight: 600 }

.sc-highlight { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; transition: .2s; min-height: 56px; transform: scale(1); }

.sc-highlight-text strong { font-size: 15px; color: var(--ink); font-weight: 700; display: block }

.sc-highlight-text span { font-size: 12.5px; color: var(--gray) }

.sc-highlight.active { border-color: var(--red); transform: scale(1.05); }

.sc-cta { white-space: nowrap; padding: 10px 18px; font-size: 13px }

.sc-map-wrap { display: flex; flex-direction: column; align-items: center; gap: 18px }

.sc-map { display: grid; grid-template-columns: repeat(12, 34px); grid-template-rows: repeat(8, 34px); gap: 4px }

.sc-tile { position: relative; background: #eef0f4; color: var(--slate); border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 700; cursor: pointer; transition: background .15s, transform .15s, color .15s; user-select: none }

    .sc-tile.no-tax { box-shadow: inset 0 0 0 2px var(--red-tint) }

    .sc-tile:hover,
    .sc-tile.active { background: var(--red); color: #fff; transform: scale(1.15); z-index: 2; box-shadow: 0 8px 18px -6px rgba(28, 69, 133, .45) }

    .sc-tile.selected { background: var(--red-dark); color: #fff; box-shadow: 0 8px 18px -6px rgba(28, 69, 133, .5) }

        .sc-tile.selected::after { content: ''; position: absolute; inset: -3px; border: 2px solid var(--red); border-radius: 9px; pointer-events: none }

.sc-legend { display: flex; gap: 22px; flex-wrap: wrap; justify-content: center }

    .sc-legend span { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--gray); font-weight: 600 }

    .sc-legend i { width: 12px; height: 12px; border-radius: 3px; background: #eef0f4; display: inline-block }

        .sc-legend i.ring { box-shadow: inset 0 0 0 2px var(--red-tint) }

.compare { padding: 80px 0 }

.compare-table-wrap { margin-top: 46px; margin-bottom: 30px; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; overflow-x: auto }

.compare table { width: 100%; border-collapse: collapse; min-width: 900px; height: 100%; }

.compare th { background: var(--red-tint); color: var(--ink); font-size: 16px; font-weight: 700; letter-spacing: .25px; text-transform: uppercase; text-align: left; padding: 16px 18px }

.compare td { font-size: 14px; padding: 14px 18px; border-bottom: 1px solid var(--border); vertical-align: middle; }

.compare tr:last-child td { border-bottom: none }

.compare tbody tr:nth-child(odd) { background: #fafbfc }

.compare td.feature { font-weight: 700; color: var(--ink) }

.compare td.ours { color: var(--green); }
    .compare td.ours div,
    .compare td.theirs div { display: flex; align-items: start; gap: 6px; height: 100%; }

.compare td.theirs,
.compare td.neutral { color: var(--gray) }

.pricing { padding: 60px 0 }

.pricing-head { max-width: 600px; margin: 0 auto; text-align: center }

    .pricing-head h2 { font-size: 30px; font-weight: 800; letter-spacing: -.3px; color: var(--ink) }

    .pricing-head p { color: var(--gray); margin-top: 10px }

.price-card { max-width: 820px; margin: 40px auto 0; border: 1px solid var(--red-border); border-radius: 18px; box-shadow: 0 24px 60px -34px rgba(15, 23, 42, .25); padding: 37px; display: flex; flex-direction: column; gap: 18px }

.price-split { display: grid; grid-template-columns: 1fr 1fr; text-align: center }

    .price-split > div:first-child { border-right: 1px solid var(--red-border) }

.price-label { font-size: 12px; font-weight: 700; letter-spacing: .55px; text-transform: uppercase; color: var(--red); margin-bottom: 8px }

.price-value { font-size: 46px; font-weight: 900; color: var(--ink) }

    .price-value sup { font-size: 20px; font-weight: 900; top: -1em; position: relative }

.price-note { text-align: center; font-size: 13px; }

.price-features { position: relative; background: var(--red-light); border: 1px solid var(--red-border); border-radius: 14px; padding: 41px 27px 27px }

.price-features-tag { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--red); color: #fff; font-size: 11.5px; font-weight: 700; padding: 6px 16px; border-radius: 999px; white-space: nowrap }

.price-features ul { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 24px }

.price-features li { font-size: 13px; color: var(--slate); display: flex; gap: 8px }

    .price-features li::before { content: "✓"; font-weight: 800; color: var(--green) }

.price-ctas { display: flex; justify-content: center; gap: 14px; padding-top: 8px; flex-wrap: wrap }

.reviews { padding: 88px 0 }

.review-cards { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; margin-top: 30px }

    .review-cards .review-card:nth-child(1),
    .review-cards .review-card:nth-child(2) { grid-column: span 3 }

    .review-cards .review-card:nth-child(3),
    .review-cards .review-card:nth-child(4),
    .review-cards .review-card:nth-child(5) { grid-column: span 2 }

.review-card { background: #fff; border: 1px solid #1c458547; border-radius: 14px; padding: 23px; display: flex; flex-direction: column; gap: 11px }

    .review-card .stars { color: var(--gold); font-size: 13px; letter-spacing: 1px }

    .review-card blockquote { font-style: italic; font-size: 14px; line-height: 1.7; color: var(--slate) }

.review-author { border-top: 1px solid #1c458547; padding-top: 19px; margin-top: auto; display: flex; align-items: center; gap: 10px }

.review-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(90deg, var(--red), var(--red-dark)); color: #fff; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0 }

.review-author b { display: block; font-size: 14px; color: var(--ink) }

.review-author span { font-size: 11.5px; color: #7a6668 }

.final-cta { padding: 60px 0; text-align: center; background: var(--bg-soft); }

    .final-cta h2 { font-size: 34px; font-weight: 800; letter-spacing: -.34px; line-height: 1.15; color: var(--ink) }

    .final-cta p { max-width: 520px; margin: 16px auto 30px; line-height: 1.7; color: var(--gray) }

footer { background: var(--red); color: #9aa4b2; padding: 64px 0 24px }

.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; align-items: start; text-align: left; }

.footer-brand p { margin-top: 13px; margin-right: 36px; text-align: left; font-size: 13.5px; line-height: 1.7; color: #9aa4b2; }

.footer-brand .logo-line1 { color: #fff; font-size: 24px; }

.footer-brand .logo-line2 { font-size: 24px; }

.socials { display: flex; gap: 10px; margin-top: 18px; justify-content: flex-start; }

    .socials a { width: 34px; height: 34px; border-radius: 8px; background: rgba(255, 255, 255, .06); display: flex; align-items: center; justify-content: center; font-size: 14px; color: #9aa4b2; transition: background .15s, color .15s }

        .socials a:hover { background: rgba(255,255,255,.16); color: #fff }

.footer-col h4 { font-size: 13px; font-weight: 700; letter-spacing: .52px; text-transform: uppercase; color: #fff; margin-bottom: 16px }

.footer-col a { display: block; font-size: 13.5px; color: #9aa4b2; padding: 5px 0; transition: color .15s }

    .footer-col a:hover { color: #fff }

.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .08); margin-top: 28px; padding-top: 23px; display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; font-size: 12px }

    .footer-bottom nav { display: flex; gap: 20px }

    .footer-bottom a:hover { color: #fff }

.fs-32px { font-size: 32px; }

.faq { padding: 88px 0 }
.faq-list { max-width: 820px; margin: 40px auto 0; display: flex; flex-direction: column; gap: 14px }
.faq-item { border: 1px solid var(--border); border-radius: 14px; padding: 0 24px; background: #fff; box-shadow: 0 1px 2px rgba(15,23,42,.04); transition: border-color .2s,box-shadow .2s,background .2s }
    .faq-item:hover { border-color: var(--red-border); box-shadow: 0 8px 20px -12px rgba(15,23,42,.14) }
    .faq-item[open] { border-color: var(--red-border); }
    .faq-item summary { list-style: none; cursor: pointer; padding: 22px 0; display: flex; align-items: center; justify-content: space-between; gap: 18px; font-size: 16px; font-weight: 700; color: var(--ink) }
        .faq-item summary::-webkit-details-marker { display: none }
        .faq-item summary::after { content: '+'; flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--bg-soft); color: var(--red); font-size: 17px; font-weight: 700; display: flex; align-items: center; justify-content: center; transition: background .2s,color .2s,transform .3s }
    .faq-item[open] summary::after { background: var(--red); color: #fff; transform: rotate(135deg) }
.faq-answer { padding: 0 0 22px; font-size: 14px; line-height: 1.8; color: var(--gray); animation: faqFade .25s ease }
    .faq-answer p { margin-bottom: 10px }
        .faq-answer p:last-child { margin-bottom: 0 }
    .faq-answer ul, .faq-answer ol { margin: 8px 0 12px 4px; padding-left: 20px; display: flex; flex-direction: column; gap: 7px }
        .faq-answer ul li::marker { color: var(--red) }
        .faq-answer ol li::marker { color: var(--red); font-weight: 700 }

@keyframes faqFade {
    from { opacity: 0; transform: translateY(-4px) }
    to { opacity: 1; transform: translateY(0) }
}

@media (max-width:1024px) {
    .nav-links { display: none; }
    .nav-toggle { display: flex; }
    .nav-actions { display: none; }
    .hero { padding: 52px 0 0 }
    .hero-grid { gap: 30px }
    .hero-badge { margin: 0 auto }

    .hero h1 { font-size: 30px; text-align: center; margin: 16px 0 }

    .hero-sub { text-align: center; margin: 0 auto; font-size: 15px }

    .hero-ctas { justify-content: center; margin-top: 24px; gap: 10px }

    .hero-trust { justify-content: center; flex-wrap: wrap; margin-top: 22px; text-align: left }

    .hero-grid > div:first-child { text-align: center }

    .hero-grid,
    .mobile-grid { grid-template-columns: 1fr; gap: 40px }

    .hero h1 { font-size: 42px }

    .hero-visual { padding: 48px 14px 44px }

    .float-card { padding: 8px 11px; gap: 8px }

        .float-card .icon { width: 28px; height: 28px; font-size: 13px }

        .float-card b { font-size: 11.5px }

        .float-card span { font-size: 11px }

    .tpl-grid { grid-template-columns: repeat(2, 1fr) }

    .feat-grid { grid-template-columns: repeat(2, 1fr) }

    .hero-stats-inner { grid-template-columns: repeat(2, 1fr) }

    .review-cards { grid-template-columns: 1fr 1fr }

        .review-cards .review-card:nth-child(1),
        .review-cards .review-card:nth-child(2),
        .review-cards .review-card:nth-child(3),
        .review-cards .review-card:nth-child(4),
        .review-cards .review-card:nth-child(5) { grid-column: span 1 }

    .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
    .footer-brand { grid-column: 1 / -1; }
        .footer-brand p { max-width: 100%; }

    .sc-grid { grid-template-columns: 1fr }

    .sc-info p { max-width: none }

    .mobile-visual { display: none; }
    .mobile { padding-bottom: 60px; text-align: center; }
    .scanner { width: 100%; justify-content: center; }
        .scanner div img:first-child { display: none; }
        .nav-inner{
        padding:12px 20px;
    }

    .nav-links,
    .nav-actions{
        display:none;
    }

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

    .mobile-menu{
        display:none;
        flex-direction:column;
        width:100%;
        background:#fff;
        border-top:1px solid var(--border);
        padding:0;
    }

    .mobile-menu.open{
        display:flex;
    }

    .mobile-menu a{
        padding:16px 20px;
        border-bottom:1px solid var(--border);
        font-size:15px;
        font-weight:600;
    }

    .mobile-menu .signin{
        margin:16px 20px 10px;
        text-align:center;
        border:1px solid var(--border);
        border-radius:8px;
    }

    .mobile-menu .btn-red{
        margin:0 20px 20px;
        text-align:center;
        color:#fff;
    }
   
}

@media (prefers-reduced-motion:reduce) {
    * { transition: none !important; scroll-behavior: auto !important }
}

@media (max-width:760px) {
    .steps-grid { grid-template-columns: repeat(2, 1fr); }
}



@media (max-width:640px) {
    .nav-links { display: none }

    .hero { padding: 32px 0 0 }

    .demo-card { grid-template-columns: 1fr; padding: 18px; gap: 14px }

    .stub { font-size: 10px }

    .summary-card { padding: 14px 16px }

    .summary-item { flex: 1 1 auto }

    .hero-stats { margin-top: 36px }

    .hero-stats-inner { grid-template-columns: repeat(2, 1fr); gap: 18px; padding: 0; margin: 10px;}
    .hero-stats{border-top:0;}

    .steps-grid,
    .tpl-grid,
    .feat-grid { grid-template-columns: 1fr }

    .price-split { grid-template-columns: 1fr; gap: 20px }

        .price-split > div:first-child { border-right: none; border-bottom: 1px solid var(--red-border); padding-bottom: 20px }

    .price-features ul { grid-template-columns: 1fr }

    .footer-grid { grid-template-columns: 1fr }

    .float-card { position: static; margin-bottom: 8px; white-space: normal; width: 100% }

    .hero-visual { padding: 0; margin-top: 8px }

    .review-cards { display: flex; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; margin: 26px -24px 0; padding: 4px 24px 12px; -webkit-overflow-scrolling: touch; scrollbar-width: none }

        .review-cards::-webkit-scrollbar { display: none }

        .review-cards .review-card { flex: 0 0 82%; scroll-snap-align: start }

    .mobile-chip { display: none }

    .sc-map { grid-template-columns: repeat(12, 22px); grid-template-rows: repeat(8, 22px); gap: 3px }

    .sc-tile { font-size: 7.5px; border-radius: 5px }
     .hero-stats-inner {
        grid-template-columns: repeat(2, 1fr);
        gap: 0;
    }

    .hero-stats-inner .stat {
        padding: 16px;
        border-right: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
    }

    .hero-stats-inner .stat:nth-child(2n) {
        border-right: none;
    }

    .hero-stats-inner .stat:nth-last-child(-n+2) {
        border-bottom: none;
    }
    .stat b{font-size: 18px;}
    .stat span{font-size: 12px;}
    .hero h1 {
        font-size: 36px;
    }
    .section-head h2{font-size: 28px;}
    .sc-info h2{font-size: 28px;}
}

.ps-hero-visual { width: 100%; max-width: 460px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.ps-card { position: relative; width: 100%; min-height: clamp(400px,90vw,470px); background: rgba(255,255,255,.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--border); border-radius: 22px; box-shadow: 0 30px 70px -30px rgba(22,19,31,.28); overflow: hidden; }

@media (max-width:480px) {
    .ps-card { min-height: 420px }
}

.ps-step { position: absolute; inset: 0; padding: clamp(18px,4vw,26px); display: flex; flex-direction: column; opacity: 0; transform: translateX(18px); transition: opacity .45s cubic-bezier(.4,0,.2,1),transform .45s cubic-bezier(.4,0,.2,1); pointer-events: none; }
    .ps-step.is-active { opacity: 1; transform: translateX(0); pointer-events: auto }
    .ps-step.is-leaving { opacity: 0; transform: translateX(-18px) }

.ps-step-label { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--red); margin-bottom: 16px; }
    .ps-step-label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--red) }

.ps-field { margin-bottom: 12px }
    .ps-field label { display: block; font-size: 11px; font-weight: 700; color: var(--body); margin-bottom: 5px }
    .ps-field .ps-input { position: relative; background: #fff; border: 1px solid var(--border); border-radius: 9px; padding: 10px 12px; font-size: 13px; font-weight: 600; color: var(--text); min-height: 36px; display: flex; align-items: center; }
        .ps-field .ps-input .ps-typed::after { content: ""; display: inline-block; width: 1.5px; height: 13px; background: var(--red); margin-left: 2px; vertical-align: -2px; animation: ps-blink 1s step-end infinite; }
        .ps-field .ps-input.done .ps-typed::after { display: none }

@keyframes ps-blink {
    50% { opacity: 0 }
}

.ps-generate { margin-top: auto; width: 100%; background: var(--red); color: #fff; font-weight: 700; font-size: 13.5px; padding: 12px; border: none; border-radius: 9px; cursor: default; box-shadow: 0 0 0 0 rgba(28,69,133,.55); }
    .ps-generate.ps-pulse { animation: ps-pulse-anim .5s ease-out 2; }

@keyframes ps-pulse-anim {
    0% { box-shadow: 0 0 0 0 rgba(28,69,133,.55) }
    70% { box-shadow: 0 0 0 14px rgba(28,69,133,0) }
    100% { box-shadow: 0 0 0 0 rgba(28,69,133,0) }
}

.ps-tpl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; flex: 1; align-content: center; }
.ps-tpl { position: relative; background: #fff; border: 1.5px solid var(--border); border-radius: 14px; padding: 14px 10px; display: flex; flex-direction: column; align-items: center; gap: 8px; transition: transform .4s cubic-bezier(.4,0,.2,1),border-color .4s ease,box-shadow .4s ease,opacity .4s ease; }
.ps-tpl-swatch { width: 100%; height: 38px; border-radius: 7px; background: var(--border) }
.ps-tpl:nth-child(1) .ps-tpl-swatch { background: linear-gradient(135deg,#f1f1f4,#dcdde3) }
.ps-tpl:nth-child(2) .ps-tpl-swatch { background: linear-gradient(135deg,var(--red-light),#cfe0ff) }
.ps-tpl:nth-child(3) .ps-tpl-swatch { background: linear-gradient(135deg,#f6f6f8,#eceef2) }
.ps-tpl:nth-child(4) .ps-tpl-swatch { background: linear-gradient(135deg,#eef2f8,#dde4ee) }
.ps-tpl span { font-size: 12px; font-weight: 700; color: var(--text) }
.ps-tpl .ps-check { position: absolute; top: -7px; right: -7px; width: 20px; height: 20px; border-radius: 50%; background: var(--success); display: flex; align-items: center; justify-content: center; transform: scale(0); transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
    .ps-tpl .ps-check svg { width: 11px; height: 11px }
.ps-tpl.selected { border-color: var(--red); transform: scale(1.06); box-shadow: 0 14px 30px -14px rgba(28,69,133,.4); z-index: 2; }
    .ps-tpl.selected .ps-check { transform: scale(1) }
.ps-tpl.faded { opacity: .45; transform: scale(.96) }

.ps-calc-title { font-size: 15px; font-weight: 800; color: var(--text); margin-bottom: 14px }
.ps-progress-track { width: 100%; height: 7px; background: var(--red-light); border-radius: 999px; overflow: hidden; margin-bottom: 16px }
.ps-progress-fill { height: 100%; width: 0%; border-radius: 999px; background: linear-gradient(90deg,var(--red),var(--accent)); transition: width .25s linear }
.ps-check-list { display: flex; flex-direction: column; gap: 9px; margin-bottom: 14px }
.ps-check-row { display: flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 600; color: var(--border); transition: color .25s ease }
    .ps-check-row.done { color: var(--text) }
    .ps-check-row .ps-dot { width: 17px; height: 17px; border-radius: 50%; border: 1.5px solid var(--border); flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: all .25s cubic-bezier(.34,1.56,.64,1); }
    .ps-check-row.done .ps-dot { background: var(--success); border-color: var(--success); transform: scale(1.08) }
    .ps-check-row .ps-dot svg { width: 9px; height: 9px; opacity: 0; transition: opacity .2s ease }
    .ps-check-row.done .ps-dot svg { opacity: 1 }
.ps-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; opacity: 0; transform: translateY(6px); transition: opacity .4s ease,transform .4s ease }
    .ps-badges.show { opacity: 1; transform: translateY(0) }
.ps-badge-pill { font-size: 10px; font-weight: 700; color: #fff; background: #1c4585; border: 1px solid #CFF3DB; padding: 5px 9px; border-radius: 999px; white-space: nowrap }

.ps-stub-summary { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-bottom: 16px }
.ps-stub-item { background: #fff; border: 1px solid var(--border); border-radius: 11px; padding: 10px 8px; text-align: center }
    .ps-stub-item small { display: block; font-size: 9.5px; font-weight: 700; color: var(--body); text-transform: uppercase; letter-spacing: .3px; margin-bottom: 4px }
    .ps-stub-item b { display: block; font-size: clamp(13px,3vw,15px); font-weight: 800; color: var(--text) }
    .ps-stub-item.net b { color: var(--success) }
.ps-actions { display: flex; flex-direction: column; gap: 8px; margin-top: auto }
.ps-action-btn { display: flex; align-items: center; gap: 9px; background: #fff; border: 1px solid var(--border); border-radius: 9px; padding: 10px 12px; font-size: 12.5px; font-weight: 700; color: var(--text); transition: border-color .3s ease,background .3s ease; }
    .ps-action-btn svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--red) }
    .ps-action-btn.pinged { border-color: var(--red); background: var(--red-light) }

.ps-float { position: absolute; display: flex; align-items: center; gap: 9px; background: #fff; border: 1px solid var(--border); border-radius: 11px; padding: 9px 12px; box-shadow: 0 16px 34px -14px rgba(22,19,31,.3); opacity: 0; transform: translateY(10px) scale(.95); transition: opacity .35s cubic-bezier(.34,1.56,.64,1),transform .35s cubic-bezier(.34,1.56,.64,1); z-index: 5; pointer-events: none; }
    .ps-float.show { opacity: 1; transform: translateY(0) scale(1) }
    .ps-float b { font-size: 11.5px; color: var(--text); display: block }
    .ps-float span { font-size: 10px; color: var(--body) }
    .ps-float .ps-ficon { width: 26px; height: 26px; border-radius: 7px; display: flex; align-items: center; justify-content: center; flex-shrink: 0 }
.ps-float-pdf { top: 10px; right: 10px }
    .ps-float-pdf .ps-ficon { background: var(--pdf-card); color: #2f6bff }
.ps-float-email { bottom: 78px; left: 10px }
    .ps-float-email .ps-ficon { background: var(--red-light); color: var(--red) }

.ps-success-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(255,253,252,.85); backdrop-filter: blur(3px); opacity: 0; transition: opacity .35s ease; pointer-events: none; z-index: 6; }
    .ps-success-overlay.show { opacity: 1 }
.ps-success-circle { width: 56px; height: 56px; border-radius: 50%; background: var(--success); display: flex; align-items: center; justify-content: center; transform: scale(.4); transition: transform .4s cubic-bezier(.34,1.56,.64,1); }
.ps-success-overlay.show .ps-success-circle { transform: scale(1) }
.ps-success-circle svg { width: 26px; height: 26px }

.ps-dots { display: flex; justify-content: center; gap: 7px }
    .ps-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--border); transition: all .3s ease }
        .ps-dots i.active { background: var(--red); width: 18px; border-radius: 3px }

@media (prefers-reduced-motion:reduce) {
    .ps-step, .ps-tpl, .ps-check-row .ps-dot, .ps-float, .ps-success-overlay, .ps-success-circle, .ps-badges { transition: none !important; animation: none !important }
}

.state-coverage { background: var(--bg-soft); padding: 80px 0; overflow: hidden }
.sc-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: 56px; align-items: center }
.sc-info h2 { font-size: 34px; font-weight: 800; letter-spacing: -.34px; line-height: 1.18; color: var(--ink); margin: 18px 0 14px }
.sc-info p { font-size: 15px; line-height: 1.75; color: var(--gray); max-width: 440px }
.sc-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 28px; margin: 34px 0 28px }
    .sc-stats b { display: block; font-size: 30px; font-weight: 800; color: var(--ink) }
    .sc-stats span { font-size: 12.5px; color: var(--gray); font-weight: 600 }
.sc-highlight { display: flex; align-items: center; justify-content: start; gap: 12px; flex-wrap: wrap }
.sc-cta { white-space: nowrap; padding: 10px 18px; font-size: 13px }
.sc-view-all { white-space: nowrap; padding: 10px 18px; font-size: 13px }

.sc-map-wrap { display: flex; flex-direction: column; align-items: center; gap: 18px }
.sc-map-card { position: relative; width: 100%; padding: 6px 0 0 }
.sc-svg-map { display: block; width: 100%; height: auto; max-width: 640px; margin: 0 auto; filter: drop-shadow(0 26px 40px rgba(15,23,42,.12)) }
    .sc-svg-map path { fill: #fff; stroke: var(--border); stroke-width: .75; cursor: pointer; transition: fill .25s ease,stroke .25s ease,transform .25s ease,filter .25s ease; transform-box: fill-box; transform-origin: center; outline: none }
        .sc-svg-map path.notax { fill: var(--red-tint); stroke: var(--red); stroke-width: .9 }
        .sc-svg-map path:hover, .sc-svg-map path:focus { fill: var(--red); stroke: var(--red-dark); stroke-width: 1.4; filter: drop-shadow(0 8px 18px rgba(28,69,133,.28)) }
        .sc-svg-map path.selected { fill: var(--red) !important; stroke: var(--red-dark) !important; stroke-width: 1.4; filter: drop-shadow(0 6px 14px rgba(28,69,133,.35)) }
.sc-lbl { font-family: 'Inter',sans-serif; font-weight: 800; letter-spacing: .03em; fill: var(--ink); pointer-events: none; transition: fill .2s ease,stroke .2s ease; paint-order: stroke fill; stroke: #fff; stroke-width: 3px; stroke-linejoin: round }
    .sc-lbl.notax { fill: var(--red) }
    .sc-lbl.on-red { fill: #fff !important; stroke: var(--red-dark) !important }
.sc-leader { stroke: #c3c7cf; stroke-width: .7; transition: stroke .2s ease }
    .sc-leader.on-red { stroke: var(--red-dark) }
.sc-lbox { fill: #fff; stroke: var(--border); stroke-width: .8; transition: fill .2s ease,stroke .2s ease }
    .sc-lbox.notax { fill: var(--red-tint); stroke: var(--red) }
    .sc-lbox.on-red { fill: var(--red) !important; stroke: var(--red-dark) !important }
.sc-tip { position: absolute; pointer-events: none; z-index: 5; width: 200px; transform: translate(-50%,-100%); background: #fff; border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 16px 40px rgba(15,23,42,.16); padding: 12px 14px; opacity: 0; transition: opacity .15s ease }
    .sc-tip.show { opacity: 1 }
.sc-tip-row { display: flex; align-items: center; justify-content: space-between }
.sc-tip-name { font-size: 13px; font-weight: 700; color: var(--ink) }
.sc-tip-abbr { font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: #eef2ff; color: #3730a3 }
    .sc-tip-abbr.notax { background: var(--red-tint); color: var(--red) }
.sc-tip-status { margin-top: 6px; font-size: 11.5px; color: var(--gray); display: flex; align-items: center; gap: 6px }

.sc-legend { display: flex; gap: 22px; flex-wrap: wrap; justify-content: center }
    .sc-legend span { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--gray); font-weight: 600 }
    .sc-legend i { width: 12px; height: 12px; border-radius: 3px; background: var(--red); display: inline-block }
        .sc-legend i.ring { background: var(--red-tint); box-shadow: inset 0 0 0 2px var(--red) }

@media (max-width:1024px) {
    .sc-grid { grid-template-columns: 1fr }
    .sc-info p { max-width: none }
    .sc-map-wrap { max-width: 480px; margin: 0 auto }
}

@media (max-width:640px) {
    .state-coverage { padding: 56px 0 }
    .sc-highlight { flex-direction: column; align-items: stretch }
        .sc-highlight .sc-cta, .sc-highlight .sc-view-all { text-align: center }
    .scanner { gap: 10px; }
}

@media (max-width:767px) {
    .hero-grid{ padding: 0 20px;}
    .d-none { display: none; }
    .sc-map-card { width: 100%; }
    .sc-info { display: flex; flex-direction: column; align-items: center; }
        .sc-info p { text-align: center; }
        .sc-info h2 { text-align: center; }
         .mobile-menu .signin,
    .mobile-menu .btn-red {
        display: block;
        width: calc(100% - 40px);
        margin: 16px 20px;
        text-align: center;
    }

    .mobile-menu .btn-red {
        margin-top: 0;
    }
    .sc-info h2{font-size: 28px;}
    .pricing-head h2{font-size: 28px;}
    section{padding: 40px 0 !important;}
    .mobile-copy h2{margin: 0 0 16px;}
    footer{padding: 35px 0 35px;}
    .final-cta h2{ font-size: 28px;}
}

@media (min-width:768px) {
    .d-md-block { display: block; }
}

@media (min-width:768px) and (max-width:1024px) {
    .sc-map-card { width: 170%; }
    .sc-info { display: flex; flex-direction: column; align-items: center; }
        .sc-info p { text-align: center; }
        .mobile-menu .signin,
    .mobile-menu .btn-red {
        width: fit-content;
        margin-left: 20px;
        margin-right: 0;
    }
}
@media (min-width:1025px){

    .nav-toggle{
        display:none;
    }

    .mobile-menu{
        display:none !important;
    }

    .nav-links{
        display:flex;
    }

    .nav-actions{
        display:flex;
    }
}
section{padding: 80px 0;}