/* ============================================================================ v4.css — the conversion rebuild, September 2026 ---------------------------------------------------------------------------- Loaded last on every page (after styles.css, redesign.css, v3.css). Every carries class="v2 v3 v4". Adds: - the estimator bar under the header, on every page - the estimator card and its result (estimator.js) - the "Choose your business type / state" picker with tabs - the rebuilt home page sections - the shared hero for business-type, state and guide pages Tokens come from v3.css (.v3 { --brand ... }). ========================================================================= */ .v4 { --amber: #9a5b00; --amber-bg: #fff4e0; --sky-2: #dfeaf9; } /* ------------------------------------------------------ Estimator top bar */ .v4 .est-top { background: var(--brand); color: #fff; } .v4 .est-top-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding-top: 8px; padding-bottom: 8px; } .v4 .est-top p { margin: 0; font-size: .9375rem; font-weight: 550; line-height: 1.35; color: #fff; } .v4 .est-top p b { font-weight: 600; } .v4 .est-top p span { color: #cfe0fb; font-weight: 500; } .v4 .est-top .t-short { display: none; } @media (max-width: 599px) { .v4 .est-top .t-long { display: none; } .v4 .est-top .t-short { display: inline; } } @media (max-width: 599px) { .v4 .est-top p span { display: none; } } .v4 .est-bar-open { flex: none; border: 0; cursor: pointer; font: inherit; font-weight: 650; font-size: .9375rem; background: #fff; color: var(--brand-dark); border-radius: 10px; padding: .55rem 1rem; display: inline-flex; align-items: center; gap: .45rem; } .v4 .est-bar-open:hover { background: #e8f0fd; } .v4 .est-bar-open::after { content: ''; width: .45em; height: .45em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-.15em) rotate(45deg); transition: transform .2s ease; } .v4 .est-bar-open[aria-expanded="true"]::after { transform: translateY(.1em) rotate(-135deg); } .v4 .est-bar-panel { background: var(--sky); border-bottom: 1px solid var(--line); padding: 20px 0 28px; } .v4 .est-top :focus-visible { outline: 3px solid #fff; outline-offset: 2px; } /* -------------------------------------------------------- Estimator card */ .v4 .est { container-type: inline-size; background: #fff; border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow-lg); padding: 20px; } @media (min-width: 700px) { .v4 .est { padding: 24px; } } .v4 .est-head { margin: 0 0 14px; } .v4 .est-head strong { display: block; color: var(--ink); font-size: 1.125rem; font-weight: 700; letter-spacing: -.01em; } .v4 .est-head span { display: block; color: var(--muted); font-size: .875rem; margin-top: 2px; } .v4 .est-form { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 0; } @container (min-width: 440px) { .v4 .est-form { grid-template-columns: 1fr 1fr; } .v4 .est-go { grid-column: 1 / -1; } } @container (min-width: 860px) { .v4 .est-form { grid-template-columns: 1.25fr 1fr 1fr 1fr auto; align-items: end; } .v4 .est-go { grid-column: auto; } } .v4 .est-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .v4 .est-field label { font-size: .8125rem; font-weight: 650; color: var(--ink); } .v4 .est-field select { width: 100%; min-width: 0; font: inherit; font-size: 1rem; color: var(--ink); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235b6d80' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center; -webkit-appearance: none; appearance: none; border: 1.5px solid #cfd9e5; border-radius: 10px; padding: .72rem 2.2rem .72rem .8rem; line-height: 1.3; } .v4 .est-field select:hover { border-color: #9fb3ca; } .v4 .est-field select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(21, 88, 196, .18); } .v4 .est-field.is-missing select { border-color: #c2410c; box-shadow: 0 0 0 3px rgba(194, 65, 12, .14); } .v4 .est-field.is-missing label::after { content: ' (needed)'; color: #c2410c; font-weight: 600; } .v4 .est-go { width: 100%; padding: .85rem 1.3rem; font-size: 1rem; white-space: nowrap; } /* Result */ .v4 .est-result { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line-soft); } .v4 .est-res-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 8px 14px; margin-bottom: 14px; } .v4 .est-for { margin: 0; font-size: .9688rem; color: var(--ink-soft); line-height: 1.45; max-width: 60ch; } .v4 .est-for b { color: var(--ink); font-weight: 650; } .v4 .est-badge { flex: none; font-size: .75rem; font-weight: 700; color: var(--amber); background: var(--amber-bg); border-radius: 999px; padding: .3rem .7rem; white-space: nowrap; } .v4 .est-total { display: grid; gap: 2px; background: var(--sky); border: 1px solid var(--sky-2); border-radius: 14px; padding: 14px 16px; margin: 0 0 14px; } .v4 .est-total span { font-size: .8125rem; font-weight: 600; color: var(--muted); } .v4 .est-total b { font-family: var(--serif); font-size: clamp(1.7rem, 7cqi, 2.3rem); font-weight: 650; color: var(--ink); letter-spacing: -.015em; line-height: 1.15; } .v4 .est-total b small { font-family: 'Inter var', sans-serif; font-size: .9375rem; font-weight: 500; color: var(--muted); letter-spacing: 0; } .v4 .est-total em { font-style: normal; font-size: .8125rem; color: var(--muted); } .v4 .est-rows { list-style: none; margin: 0; padding: 0; } .v4 .est-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 14px 0; border-top: 1px solid var(--line-soft); } @container (min-width: 520px) { .v4 .est-row { grid-template-columns: minmax(0, 1fr) 13.5rem; gap: 18px; align-items: center; } } .v4 .est-row-name b { color: var(--ink); font-weight: 700; font-size: 1rem; margin-right: 8px; } .v4 .est-row-name small { display: block; color: var(--muted); font-size: .8438rem; line-height: 1.4; margin-top: 3px; } .v4 .est-need { display: inline-block; vertical-align: 2px; font-size: .6875rem; font-weight: 700; border-radius: 6px; padding: .18rem .45rem; background: var(--line-soft); color: var(--muted); } .v4 .need-required .est-need { background: var(--navy); color: #fff; } .v4 .need-usual .est-need { background: #e3edfc; color: var(--brand-dark); } .v4 .need-often .est-need { background: var(--teal-bg); color: #08675f; } .v4 .need-staff .est-need, .v4 .need-maybe .est-need { background: var(--amber-bg); color: var(--amber); } .v4 .est-row-cost { display: grid; gap: 1px; } @container (min-width: 520px) { .v4 .est-row-cost { text-align: right; } } .v4 .est-mo { font-weight: 700; color: var(--ink); font-size: 1.125rem; font-variant-numeric: tabular-nums; } .v4 .est-mo small { font-weight: 500; color: var(--muted); font-size: .8125rem; margin-left: 1px; } .v4 .est-yr { font-size: .8125rem; color: var(--muted); font-variant-numeric: tabular-nums; } .v4 .est-range { position: relative; display: block; height: 6px; border-radius: 3px; background: var(--line-soft); margin-top: 7px; } .v4 .est-range i { position: absolute; top: 0; bottom: 0; border-radius: 3px; background: var(--brand); } .v4 .need-optional .est-range i, .v4 .need-rare .est-range i, .v4 .need-notyet .est-range i { background: #9fb3ca; } .v4 .need-rare .est-mo { color: var(--ink-soft); } .v4 .est-notes { margin: 6px 0 0; padding: 12px 0 0 1.1rem; border-top: 1px solid var(--line-soft); font-size: .875rem; color: var(--ink-soft); } .v4 .est-notes li { margin: .25rem 0; } .v4 .est-src { font-size: .8125rem; color: var(--muted); line-height: 1.5; margin: 14px 0 0; } .v4 .est-src b { color: var(--ink-soft); font-weight: 650; } .v4 .est-next { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 0; } .v4 .est-rows-h { font-family: 'Inter var', sans-serif; font-size: .8125rem; font-weight: 700; color: var(--muted); margin: 22px 0 2px; letter-spacing: 0; } .v4 .est-result { scroll-margin-top: 90px; } .v4 .est-next .btn { flex: 1 1 100%; text-align: center; } .v4 .est-next .btn-ghost { flex: 1 1 auto; text-align: center; padding: .85rem 1.1rem; font-size: .9688rem; } @container (min-width: 560px) { .v4 .est-next .btn { flex: 0 1 auto; } .v4 .est-next .btn-ghost { flex: 0 1 auto; } } .v4 .est-match-btn[aria-expanded="true"] { background: var(--navy); } .v4 .est-fine { font-size: .8125rem; color: var(--muted); margin: 10px 0 0; line-height: 1.5; } /* Match step */ .v4 .est-match { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line-soft); } .v4 .est-match-lede { margin: 0 0 12px; font-size: .9688rem; color: var(--ink-soft); } .v4 .est-prov { border: 1.5px solid var(--brand); border-radius: 16px; padding: 16px 18px; margin: 0 0 12px; background: #fff; } .v4 .est-prov-agent { border: 1px solid var(--line); background: #fbfcfe; } .v4 .est-prov-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 12px; } .v4 .est-prov h3 { margin: 0; font-size: 1.125rem; color: var(--ink); outline: none; } .v4 .est-paid { font-size: .75rem; font-weight: 700; color: var(--amber); background: var(--amber-bg); border-radius: 999px; padding: .25rem .6rem; } .v4 .est-prov p { margin: .5rem 0 0; font-size: .9375rem; } .v4 .est-prov-facts { list-style: none; padding: 0; margin: .7rem 0 1rem; display: flex; flex-wrap: wrap; gap: 6px; } .v4 .est-prov-facts li { font-size: .8125rem; font-weight: 600; color: var(--ink-soft); background: var(--line-soft); border-radius: 8px; padding: .3rem .6rem; } .v4 .est-prov .btn { width: 100%; text-align: center; } @container (min-width: 560px) { .v4 .est-prov .btn { width: auto; } } /* ------------------------------------------------------------- Picker ---- */ .v4 .pick { display: grid; gap: 24px; } @media (min-width: 960px) { .v4 .pick { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 40px; align-items: start; } } .v4 .tabs { display: flex; gap: 4px; border-bottom: 1.5px solid var(--line); margin: 0 0 18px; } .v4 .tabs [role="tab"] { font: inherit; font-weight: 650; font-size: 1rem; color: var(--muted); background: none; border: 0; cursor: pointer; padding: .75rem 1rem; margin-bottom: -1.5px; border-bottom: 3px solid transparent; } .v4 .tabs [role="tab"][aria-selected="true"] { color: var(--brand); border-bottom-color: var(--brand); } .v4 .tabs [role="tab"]:hover { color: var(--ink); } .v4 .tabs [role="tab"]:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; border-radius: 6px 6px 0 0; } .v4 .chips { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } @media (min-width: 600px) { .v4 .chips { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .v4 .chips-states { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 600px) { .v4 .chips-states { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .v4 .pick-chip { width: 100%; text-align: left; font: inherit; font-size: .9375rem; font-weight: 600; color: var(--ink); background: #fff; border: 1.5px solid var(--line); border-radius: 10px; padding: .65rem .8rem; cursor: pointer; line-height: 1.3; } .v4 .chips-states .pick-chip { font-size: .875rem; padding: .5rem .7rem; } .v4 .pick-chip:hover { border-color: var(--brand); color: var(--brand); } .v4 .pick-chip[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: #fff; } .v4 .pick-chip:focus-visible { outline: 3px solid rgba(21, 88, 196, .35); outline-offset: 1px; } .v4 .pick-aside { position: relative; } @media (min-width: 960px) { .v4 .pick-aside { position: sticky; top: 96px; } } .v4 .pick-empty, .v4 .pick-result { background: #fff; border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); padding: 20px; } .v4 .pick-empty { color: var(--muted); font-size: .9688rem; } .v4 .pick-empty b { display: block; color: var(--ink); font-size: 1.0625rem; margin-bottom: 4px; } .v4 .pick-result:not([hidden]) + .pick-empty { display: none; } .v4 .pick-rows { list-style: none; margin: 12px 0 0; padding: 0; } .v4 .pick-rows li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line-soft); } .v4 .pick-rows span { font-weight: 650; color: var(--ink); font-size: .9688rem; } .v4 .pick-rows span small { display: block; font-weight: 500; color: var(--muted); font-size: .75rem; } .v4 .pick-rows b { white-space: nowrap; color: var(--ink); font-variant-numeric: tabular-nums; } .v4 .pick-rows b small { color: var(--muted); font-weight: 500; font-size: .75rem; } .v4 .pick-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .v4 .pick-actions .btn, .v4 .pick-actions .btn-ghost { padding: .75rem 1rem; font-size: .9375rem; } .v4 .pick-links { margin: 18px 0 0; font-size: .875rem; color: var(--muted); } .v4 .pick-links a { color: var(--ink-soft); font-weight: 600; } /* ============================================================ HOME PAGE === */ .v4 .h4-hero { background: linear-gradient(180deg, #f3f7fc 0%, #fff 100%); border-bottom: 1px solid var(--line); padding: 28px 0 36px; } @media (min-width: 900px) { .v4 .h4-hero { padding: 48px 0 56px; } } .v4 .h4-hero-copy { max-width: 46rem; margin: 0 0 22px; } .v4 .h4-hero h1 { font-size: clamp(2rem, 5.2vw, 3.1rem); margin: 0 0 .35em; max-width: 18ch; } .v4 .h4-hero .lede { font-size: 1.0625rem; color: var(--ink-soft); margin: 0; max-width: 54ch; } @media (min-width: 900px) { .v4 .h4-hero .lede { font-size: 1.1875rem; } } .v4 .h4-hero .est { padding: 20px; } @media (min-width: 900px) { .v4 .h4-hero .est { padding: 26px 28px; } } .v4 .h4-assure { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; } .v4 .h4-assure li { display: flex; align-items: center; gap: 7px; font-size: .875rem; color: var(--ink-soft); font-weight: 550; } .v4 .h4-assure svg { width: 17px; height: 17px; color: var(--teal); flex: none; } /* Proof strip: the four facts under the hero */ .v4 .h4-proof { padding: 0; border-bottom: 1px solid var(--line); background: #fff; } .v4 .h4-proof ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; } @media (min-width: 900px) { .v4 .h4-proof ul { grid-template-columns: repeat(4, 1fr); } } .v4 .h4-proof li { padding: 18px 14px; border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); } .v4 .h4-proof li:nth-child(2n) { border-right: 0; } @media (min-width: 900px) { .v4 .h4-proof li { border-bottom: 0; padding: 22px 20px; } .v4 .h4-proof li:nth-child(2n) { border-right: 1px solid var(--line-soft); } .v4 .h4-proof li:last-child { border-right: 0; } } .v4 .h4-proof b { display: block; color: var(--ink); font-size: .9688rem; } .v4 .h4-proof span { display: block; color: var(--muted); font-size: .8125rem; line-height: 1.4; margin-top: 2px; } /* Cover cards (tabs switch what a card shows: cost or who needs it) */ .v4 .cov4 { display: grid; gap: 14px; grid-template-columns: 1fr; } @media (min-width: 640px) { .v4 .cov4 { grid-template-columns: 1fr 1fr; } } @media (min-width: 1040px) { .v4 .cov4 { grid-template-columns: repeat(4, 1fr); } } .v4 .cov4-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 20px; text-decoration: none; color: inherit; box-shadow: var(--shadow); border-top: 4px solid var(--brand); } .v4 .cov4-card:hover { border-color: #b9cbe3; border-top-color: var(--brand); } .v4 .cov4-card h3 { margin: 0 0 .35rem; font-size: 1.125rem; color: var(--ink); } .v4 .cov4-card p { margin: 0 0 .9rem; font-size: .9375rem; color: var(--ink-soft); } .v4 .cov4-cost { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line-soft); } .v4 .cov4-cost b { font-family: var(--serif); font-size: 1.7rem; color: var(--ink); font-weight: 650; } .v4 .cov4-cost b small { font-family: 'Inter var', sans-serif; font-size: .8125rem; color: var(--muted); font-weight: 500; } .v4 .cov4-cost span { display: block; font-size: .78rem; color: var(--muted); } .v4 .cov4-who { font-size: .875rem; color: var(--ink-soft); margin: 0 0 .9rem; } .v4 .cov4-go { margin-top: 12px; font-weight: 650; color: var(--brand); font-size: .9375rem; } .v4 .cov4-foot { font-size: .8125rem; color: var(--muted); margin: 16px 0 0; max-width: 80ch; } /* How it works: three things that happen, in order */ .v4 .h4-how { display: grid; gap: 14px; grid-template-columns: 1fr; list-style: none; padding: 0; margin: 0; counter-reset: how; } @media (min-width: 860px) { .v4 .h4-how { grid-template-columns: repeat(3, 1fr); } } .v4 .h4-how li { background: #fff; border: 1px solid var(--cream-line); border-radius: 18px; padding: 20px; } .v4 .h4-how b { display: block; color: var(--ink); font-size: 1.0625rem; margin-bottom: .3rem; } .v4 .h4-how p { margin: 0; font-size: .9375rem; } /* ============================================ BUSINESS-TYPE / STATE / GUIDES */ /* The shared hero: headline, the one-line answer, then the estimator preset to this page's business or state. On desktop the estimator sits beside the answer; on a phone it follows it. */ .v4 .art-hero-grid.t4 { align-items: start; } @media (min-width: 900px) { .v4 .art-hero-grid.t4 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 48px; } } .v4 .t4 .est { padding: 18px; } .v4 .t4 .est-head { margin-bottom: 12px; } .v4 .art-hero .t4-points { list-style: none; margin: 1.3rem 0 0; padding: 0; display: grid; gap: 8px; } .v4 .art-hero .t4-points li { display: flex; gap: 9px; font-size: .9688rem; color: var(--ink-soft); } .v4 .art-hero .t4-points svg { flex: none; width: 18px; height: 18px; margin-top: 3px; color: var(--teal); } .v4 .art-hero .t4-jump { display: inline-block; margin-top: 1.2rem; font-weight: 650; font-size: .9688rem; text-decoration: none; } .v4 .art-hero .t4-jump:hover { text-decoration: underline; } /* End-of-page picker on guide pages */ .v4 .t4-more { background: var(--cream); border-top: 1px solid var(--cream-line); } /* Footer disclosure line */ .v4 .footer-disclaimer b { color: #fff; font-weight: 650; } @media (prefers-reduced-motion: reduce) { .v4 * { scroll-behavior: auto !important; transition: none !important; } } /* ------------------------------------------------------------------ Header */ .v4 .main-nav a:not([href="/blog/"]) { display: none; } .v4 .main-nav a[href="/blog/"] { display: inline; } @media (min-width: 1040px) { .v4 .main-nav a:not([href="/blog/"]) { display: inline; } .v4 .main-nav { gap: 22px; } } /* ------------------------------------------------------------------ Footer */ @media (min-width: 900px) { .v4 .f-top-4 { grid-template-columns: 1.4fr 1fr 1.25fr 1fr 1fr; gap: 32px; } } .v4 .f-states { columns: 2; column-gap: 16px; } .v4 .f-states li { break-inside: avoid; } .v4 .f-col li { margin-bottom: .5rem; } .v4 .f-col a { font-size: .875rem; } .v4 .f-est { display: inline-block; margin-top: .4rem; color: #fff; font-weight: 650; text-decoration: none; border: 1.5px solid rgba(255,255,255,.35); border-radius: 10px; padding: .55rem .9rem; font-size: .9375rem; } .v4 .f-est:hover { border-color: #fff; } /* ----------------------------------------------------- In-article estimator */ .v4 .reading .est-inline { margin: 1.8rem 0 2.2rem; } .v4 .reading .est p, .v4 .reading .est li { font-size: inherit; } .v4 .reading .est .est-row-name small, .v4 .reading .est .est-fine, .v4 .reading .est .est-src { font-size: .8125rem; } .v4 .reading .est ul { margin: 0; padding: 0; } .v4 .reading .est .est-notes { padding-left: 1.1rem; } .v4 .reading .est .est-notes li { font-size: .875rem; } .v4 .reading .est a.btn-ghost { text-decoration: none; } .v4 .t4 .est-row-name small { display: none; } .v4 .t4 .est-row { padding: 10px 0; } .v4 .art-hero .est-wide { margin-top: 22px; } /* Contextual link after a guide's main cost table, back to its estimator */ .v4 #your-estimate { scroll-margin-top: 96px; } .v4 .reading .t4-inline { margin: -.4rem 0 1.8rem; } .v4 .reading .t4-inline a { display: inline-flex; align-items: center; gap: .5rem; font-weight: 650; text-decoration: none; color: var(--brand); background: #eef4fc; border: 1px solid var(--sky-2); border-radius: 10px; padding: .6rem .9rem; } .v4 .reading .t4-inline a::before { content: '\2191'; font-weight: 700; } .v4 .reading .t4-inline a:hover { background: #e3edfc; } /* ----------------------------------------------------------- Guides hub */ .v4 .hub4-hero .hub-jump { margin: 1.3rem 0 0; } .v4 .hub4-hero .cta-row { margin-top: 1.3rem; } .v4 .tabset .tabs { flex-wrap: wrap; } .v4 .tab-lede { color: var(--muted); margin: 0 0 18px; font-size: 1rem; } .v4 .tabset [role="tabpanel"] { scroll-margin-top: 96px; } .v4 #library { scroll-margin-top: 80px; }