/* BizBooks360 public site. One stylesheet, no JS. Palette and type match app.bizbooks360.com.
   CLASS REFERENCE (page-specific classes go in home-*, price-*, qb-*):
   LAYOUT
   .wrap            centered column, max 1180px, 24px gutter (16px under 480px)
   .section         vertical band, 96px top/bottom (64px under 820px)
   .section-alt     white band with hairline top/bottom (has its own padding; use alone or with .section)
   .section-dark    navy band, white text (has its own padding)
   .section-tight   modifier: halves the band padding (e.g. the proof strip band)
   .hero            first band of a page: tighter top padding
   .hero-grid       hero 2 columns: text left, .shot right; stacks under 820px
   .page-hero       centered hero for inner pages (pricing, switch, 404); h1 + .lead + .btn-row
   .section-head    heading block above section content, max 720px, bottom margin 48px
   .center          center text (on .section-head it also centers the block)
   .grid-2 .grid-3 .grid-4   responsive grids, 24px gap; 1 column under 820px (.grid-4 is 2 columns at 821-1024px)
   .feature-row     2 columns: text + .shot; rows stack 96px apart; stacks under 820px (text first)
   .feature-row.flip  same row with the .shot on the left
   .btn-row         flex row of buttons with 12px gap, wraps
   TYPE
   .eyebrow         small caps label above a heading, blue (green on dark bands)
   .lead            19px intro paragraph, max ~34em
   .muted           muted gray text
   .small           14px text
   .fine            13px fine print (footer copyright)
   .num             tabular figures, no wrap (prices, amounts)
   .pos             green "money in" / savings figure
   .text-link       inline link with visible underline, semibold
   BUTTONS
   .btn             base button (min-height 48px, 6px radius); combine with one variant below
   .btn-primary     blue filled button (main CTA)
   .btn-ghost       outlined button (secondary CTA); turns white-outlined on dark bands
   .btn-light       white button for navy bands (.section-dark, .cta-band)
   .btn-sm          small button, min-height 44px (header CTA)
   .btn-lg          large button, min-height 56px (hero CTA)
   .btn-block       full-width button
   .cta-note        microcopy under a CTA ("No credit card. Cancel any time.")
   COMPONENTS
   .card            white panel, 1px line border, 8px radius, soft shadow, 28px padding; a.card lifts on hover
   .card-tag        small muted label at the top of a card (e.g. "The fix")
   .callout         blue-tinted panel with a blue left rule (switch teaser, notes)
   .shot            figure: slate browser frame around a 16:10 screenshot
   .shot-bar        frame bar inside .shot: 3 empty <span>s (dots) + <span class="shot-url">app.bizbooks360.com</span>
   .shot-url        URL pill in .shot-bar
   .shot-caption    visible figcaption inside the frame ("The real app, shown with a sample company.")
   .home-switch .home-switch-prices .home-switch-save .home-tour-cta   home page only
   .qb-plan         switch page plan card: flex column, button pinned to the bottom
   .dots            ul with green 8px dot bullets (no checkmarks)
   .proof-strip     ul/div of 4 short facts on white, hairline dividers; 2x2 under 1024px, 1 col under 480px
   .price-block     wrapper for the radios + .billing-toggle + .plans (see plan markup)
   .billing-toggle  Monthly / Annual segmented control (labels for #bill-monthly / #bill-annual)
   .save            "2 months free" pill inside the Annual label
   .plans           3 plan cards in a row; 1 column under 820px
   .plan            pricing card; .plan.popular is highlighted (blue rule + .plan-badge)
   .plan-badge      "Recommended" pill, top of a .popular card
   .plan-for        one-line "who it is for" under the plan name
   .plan-price      price line; holds .amt-monthly and .amt-annual
   .amt-monthly .amt-annual   price spans; the radios show one or the other
   .table-wrap      scroll container for wide tables (scrolls inside itself on phones)
   table.compare    comparison table; th[scope=row] left, cells centered; caption shows under the table
   .col-hl          highlight a compare column (add to its th and td cells)
   .yes .no         compare cell text: "Included" (green) / "--" (muted)
   tr.total         emphasized compare row (totals, yearly difference)
   .faq             wrapper for <details><summary>Q</summary><p>A</p></details>
   .steps           ol of numbered steps (3 or 4) with a connecting rule; each li: h3 + p
   .cta-band        full-width navy CTA block; put a .wrap inside
   .mark            64px brand mark image (img/brand/bizbooks360-mark.svg)
   .nf-mark .nf-links .nf-login   404 page only (mark spacing, links band, login line)
   CHROME AND A11Y
   .site-header .nav .brand .nav-links .nav-actions .nav-login   sticky slate header (links wrap to a second row under 820px)
   .site-footer .footer-grid   slate footer
   .visually-hidden hidden from sight, kept for screen readers (also the billing radios)
   .skip            "Skip to content" link, visible on focus */

@font-face{font-family:"Source Serif 4";src:url(/fonts/source-serif-4-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url(/fonts/source-serif-4-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Open Sans";src:url(/fonts/open-sans-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Open Sans";src:url(/fonts/open-sans-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Open Sans";src:url(/fonts/open-sans-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  --slate:#1f2933;--slate-2:#283440;--paper:#f7f7f5;--card:#ffffff;--line:#e1e0d9;--line-2:#c3c2b7;
  --muted:#6b6a65;--text:#52514e;--blue:#1c5cab;--blue-dark:#164a89;--navy:#123f7a;--blue-soft:#f3f7fd;
  --blue-light:#5b8fd1;--green:#1f9d74;--green-on-dark:#4fd1a1;--green-ink:#17775a;--green-soft:#e6f4ee;
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --sans:"Open Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --r-card:8px;--r-btn:6px;
  --shadow-card:0 1px 2px rgba(31,41,51,.04),0 6px 20px rgba(31,41,51,.06);
  --shadow-lift:0 2px 4px rgba(31,41,51,.06),0 14px 34px rgba(31,41,51,.12);
  --shadow-shot:0 18px 50px rgba(31,41,51,.18);
  --gutter:24px;--band:96px;
}

/* Base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:88px}
body{margin:0;background:var(--paper);color:var(--text);font:400 17px/1.65 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-wrap:break-word}
img,svg{display:block;max-width:100%;height:auto}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;color:var(--slate);margin:0 0 .5em;text-wrap:balance}
h1{font-size:clamp(2.4rem,1.55rem + 3.3vw,3.75rem);line-height:1.08;letter-spacing:-.01em;font-weight:400}
h2{font-size:clamp(1.85rem,1.4rem + 1.7vw,2.6rem);line-height:1.16;letter-spacing:-.01em;font-weight:400}
h3{font-size:1.375rem;line-height:1.3;letter-spacing:-.01em}
h4{font-size:1.125rem;line-height:1.35}
p,ul,ol,dl,figure,table{margin:0 0 1em}
p{text-wrap:pretty}
strong,b{font-weight:600;color:var(--slate)}
small{font-size:.8125em}
a{color:var(--blue);text-decoration-thickness:1px;text-underline-offset:.2em}
a:hover{color:var(--blue-dark)}
:focus-visible{outline:3px solid var(--blue-light);outline-offset:2px;border-radius:2px}
::selection{background:#cfe0f7;color:var(--slate)}
main{display:block}

/* Layout */
.wrap{width:100%;max-width:1228px;margin:0 auto;padding:0 var(--gutter)}
.section,.section-alt,.section-dark{padding:var(--band) 0}
.section-alt{background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section-dark{background:var(--navy);color:rgba(255,255,255,.84)}
.section-tight{padding-top:calc(var(--band)/2);padding-bottom:calc(var(--band)/2)}
.hero{padding:72px 0 var(--band)}
.hero-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:56px;align-items:center}
.hero-grid h1{margin-bottom:.4em}
.page-hero{padding:80px 0 56px;text-align:center}
.page-hero h1,.page-hero .lead{margin-left:auto;margin-right:auto;max-width:20em}
.page-hero .lead{max-width:34em}
.page-hero .btn-row{justify-content:center}
.section-head{max-width:720px;margin-bottom:48px}
.section-head>:last-child{margin-bottom:0}
.section-head.center{margin-left:auto;margin-right:auto}
.center{text-align:center}
.grid-2,.grid-3,.grid-4{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))}
.btn-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:28px 0 0}
.feature-row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:center}
.feature-row+.feature-row{margin-top:var(--band)}
.feature-row.flip{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.feature-row.flip>:first-child{order:2}
.feature-row h3{font-size:clamp(1.5rem,1.25rem + .8vw,1.875rem);line-height:1.2;letter-spacing:-.018em}
.feature-row .dots{margin-top:20px}

/* Type helpers */
.eyebrow{font:700 12.5px/1.4 var(--sans);text-transform:uppercase;letter-spacing:.11em;color:var(--blue);margin:0 0 14px}
.lead{font-size:19px;line-height:1.6;max-width:34em;color:var(--text)}
.muted{color:var(--muted)}
.small{font-size:14px;line-height:1.55}
.fine{font-size:13px;line-height:1.5}
.num{font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.pos{color:var(--green-ink);font-weight:600}
.text-link{font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em}
.text-link:hover{text-decoration-thickness:2px}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:11px 22px;border:1px solid transparent;border-radius:var(--r-btn);font:600 16px/1.25 var(--sans);text-align:center;text-decoration:none;cursor:pointer;transition:background-color .15s,border-color .15s,color .15s,transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-1px);text-decoration:none}
.btn:active{transform:none}
.btn-primary{background:var(--blue);color:#fff;box-shadow:0 1px 2px rgba(18,63,122,.25)}
.btn-primary:hover{background:var(--blue-dark);color:#fff;box-shadow:0 8px 18px rgba(28,92,171,.24)}
.btn-ghost{background:transparent;border-color:#8f8e86;color:var(--slate)}
.btn-ghost:hover{background:var(--card);border-color:var(--slate);color:var(--slate)}
.btn-light{background:#fff;color:var(--navy);box-shadow:0 1px 2px rgba(0,0,0,.15)}
.btn-light:hover{background:var(--blue-soft);color:var(--navy);box-shadow:0 10px 22px rgba(0,0,0,.2)}
.btn-sm{min-height:44px;padding:9px 16px;font-size:15px}
.btn-lg{min-height:56px;padding:14px 28px;font-size:17px}
.btn-block{display:flex;width:100%}
.cta-note{margin:12px 0 0;font-size:14px;line-height:1.5;color:var(--muted)}

/* Header */
.skip{position:absolute;left:16px;top:-80px;z-index:100;background:#fff;color:var(--slate);padding:12px 16px;border-radius:var(--r-btn);font-weight:600;box-shadow:var(--shadow-lift)}
.skip:focus{top:12px}
.site-header{position:sticky;top:0;z-index:50;background:var(--slate-2);box-shadow:0 1px 0 rgba(0,0,0,.25)}
.nav{display:flex;align-items:center;gap:32px;min-height:72px}
.brand{display:inline-flex;flex:none;border-radius:4px}
.brand img{width:180px;height:auto}
.nav-links{display:flex;gap:28px}
.nav-links a,.nav-login{color:rgba(255,255,255,.8);font-size:15px;font-weight:600;text-decoration:none;padding:6px 0;border-bottom:2px solid transparent}
.nav-links a:hover,.nav-login:hover,.nav-links a[aria-current=page]{color:#fff}
.nav-links a[aria-current=page]{border-bottom-color:var(--green-on-dark)}
.nav-actions{display:flex;align-items:center;gap:22px;margin-left:auto}
.nav-login{color:#fff}

/* Cards and panels */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow-card);padding:28px}
.card>:last-child{margin-bottom:0}
.card h3{font-size:1.25rem}
a.card{display:block;color:inherit;text-decoration:none;transition:transform .15s,box-shadow .15s,border-color .15s}
a.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift);border-color:var(--line-2)}
.card-tag{font-size:13px;font-weight:600;color:var(--muted);margin:0 0 8px}
.callout{background:var(--blue-soft);border:1px solid #dbe6f5;border-left:3px solid var(--blue);border-radius:var(--r-card);padding:28px 32px}
.callout>:last-child{margin-bottom:0}
.mark{width:64px;height:64px}

/* Screenshot frame */
.shot{margin:0;background:var(--slate-2);border-radius:var(--r-card);overflow:hidden;box-shadow:var(--shadow-shot);border:1px solid rgba(31,41,51,.3)}
.shot-bar{position:relative;display:flex;align-items:center;gap:7px;height:32px;padding:0 13px}
.shot-bar>span:not(.shot-url){width:10px;height:10px;border-radius:50%;background:#ff5f57;opacity:.6;flex:none}
.shot-bar>span:nth-child(2):not(.shot-url){background:#febc2e}
.shot-bar>span:nth-child(3):not(.shot-url){background:#28c840}
.shot-url{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);max-width:calc(100% - 120px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:1px 16px;border-radius:999px;background:rgba(255,255,255,.08);color:rgba(255,255,255,.66);font-size:12px;line-height:20px;letter-spacing:.01em}
.shot picture{display:block}
.shot figcaption.shot-caption{padding:10px 14px;background:var(--slate-2);color:rgba(255,255,255,.72);font-size:13px;line-height:1.45}
.shot img,.shot>.shot-body{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top left;background:#e9e8e2}

/* Lists */
.dots{list-style:none;padding:0;margin:0 0 1em}
.dots li{position:relative;padding-left:22px;margin:0 0 9px}
.dots li::before{content:"";position:absolute;left:1px;top:.68em;width:8px;height:8px;border-radius:50%;background:var(--green)}

/* Proof strip */
.proof-strip{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden}
.proof-strip>*{margin:0;background:var(--card);padding:22px 24px;font-family:var(--serif);font-weight:600;font-size:18px;line-height:1.3;color:var(--slate)}
.proof-strip>*::before{content:"";display:block;width:22px;height:3px;border-radius:2px;background:var(--green);margin-bottom:14px}
.proof-strip span,.proof-strip small{display:block;margin-top:6px;font:400 14px/1.5 var(--sans);color:var(--muted)}

/* Pricing: billing toggle (CSS-only) + plans */
.price-block{position:relative;margin-bottom:36px}
.billing-toggle{display:flex;width:max-content;max-width:100%;margin:0 auto 44px;padding:4px;gap:4px;background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow-card)}
.billing-toggle label{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 20px;border-radius:var(--r-btn);font-weight:600;font-size:15px;color:var(--slate);cursor:pointer;transition:background-color .15s,color .15s}
.billing-toggle label:hover{background:var(--blue-soft)}
.save{display:inline-block;padding:2px 8px;border-radius:999px;background:var(--green-soft);color:var(--green-ink);font-size:12px;font-weight:700;line-height:1.5;white-space:nowrap}
.amt-annual{display:none}
#bill-annual:checked ~ .plans .amt-annual{display:inline}
#bill-annual:checked ~ .plans .amt-monthly{display:none}
#bill-monthly:focus-visible ~ .billing-toggle label[for=bill-monthly],
#bill-annual:focus-visible ~ .billing-toggle label[for=bill-annual]{outline:3px solid var(--blue-light);outline-offset:2px}
#bill-monthly:checked ~ .billing-toggle label[for=bill-monthly],
#bill-annual:checked ~ .billing-toggle label[for=bill-annual]{background:var(--blue);color:#fff}
#bill-annual:checked ~ .billing-toggle .save{background:#fff;color:var(--blue-dark)}
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:stretch;text-align:left}
.plan{position:relative;display:flex;flex-direction:column;margin:0;background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow-card);padding:32px 28px 28px}
.plan.popular{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue),var(--shadow-lift)}
.plan-badge{position:absolute;top:-13px;left:28px;margin:0;padding:3px 12px;border-radius:999px;background:var(--blue);color:#fff;font-size:12.5px;font-weight:700;line-height:20px}
.plan h3{font-size:1.5rem;margin:0 0 6px}
.plan-for{font-size:15px;line-height:1.5;color:var(--muted);margin:0 0 20px;min-height:3em}
.plan-price{margin:0 0 20px;color:var(--muted);font-size:16px;line-height:1.3}
.plan-price strong{font:600 46px/1 var(--serif);letter-spacing:-.02em;color:var(--slate);font-variant-numeric:lining-nums}
.plan-price small,.amt-monthly::after{display:block;margin-top:8px;font-size:14px;color:var(--muted)}
.amt-monthly::after{content:"billed monthly"}
.plan .btn{display:flex;width:100%}
.plan .cta-note{text-align:center;font-size:13px;margin:10px 0 0}
.plan .dots{margin:24px 0 0;padding-top:22px;border-top:1px solid var(--line);font-size:15.5px}

/* Comparison tables */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow-card)}
.compare{width:100%;min-width:560px;margin:0;border-collapse:collapse;font-size:15.5px;line-height:1.45;font-variant-numeric:tabular-nums lining-nums}
.compare th,.compare td{padding:14px 20px;border-bottom:1px solid var(--line);text-align:center;vertical-align:middle}
.compare thead th{background:var(--paper);font:600 1.125rem/1.3 var(--serif);color:var(--slate);border-bottom-color:var(--line-2)}
.compare th[scope=row]{text-align:left;font-weight:400;color:var(--text);min-width:190px}
.compare thead th:first-child{text-align:left}
.compare tbody tr:last-child>*{border-bottom:0}
.compare tbody tr:hover>*{background:#fbfbf9}
.compare .col-hl,.compare tbody tr:hover>.col-hl{background:var(--blue-soft)}
.compare thead .col-hl{color:var(--blue-dark);box-shadow:inset 0 3px 0 var(--blue)}
.compare tr.total>*{font-weight:600;color:var(--slate);background:var(--paper)}
.compare tr.total>.pos{color:var(--green-ink)}
.compare caption{caption-side:bottom;text-align:left;padding:12px 20px;font-size:13px;color:var(--muted);border-top:1px solid var(--line)}
.yes{color:var(--green-ink);font-weight:600}
.no{color:var(--muted)}

/* FAQ */
.faq{max-width:800px;border-top:1px solid var(--line)}
.center>.faq,.faq.center{margin-left:auto;margin-right:auto;text-align:left}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{position:relative;display:block;list-style:none;cursor:pointer;padding:22px 48px 22px 0;font-weight:600;font-size:18px;line-height:1.4;color:var(--slate)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:16px;height:16px;margin-top:-8px;background:linear-gradient(var(--blue),var(--blue)) center/16px 2px no-repeat,linear-gradient(var(--blue),var(--blue)) center/2px 16px no-repeat;transition:transform .2s}
.faq details[open]>summary::after{transform:rotate(180deg);background-size:16px 2px,2px 0}
.faq summary:hover{color:var(--blue)}
.faq details>:not(summary){margin:0 48px 22px 0;max-width:62ch}

/* Steps */
.steps{list-style:none;margin:0;padding:0;counter-reset:step;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:32px}
.steps>li{position:relative;counter-increment:step}
.steps>li::before{content:counter(step);display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin-bottom:20px;border-radius:50%;background:var(--card);border:1.5px solid var(--blue);color:var(--blue);font:600 20px/1 var(--serif)}
.steps>li:not(:last-child)::after{content:"";position:absolute;top:22px;left:56px;right:-20px;height:1px;background:var(--line-2)}
.steps h3{font-size:1.25rem;margin-bottom:6px}
.steps p{margin:0;font-size:16px}

/* Dark bands: section-dark and cta-band */
.cta-band{background:var(--navy);color:rgba(255,255,255,.84);padding:88px 0;text-align:center}
.cta-band h2,.section-dark h2,.section-dark h3,.cta-band h3,.section-dark strong,.cta-band strong{color:#fff}
.cta-band h2{font-size:clamp(2rem,1.5rem + 2vw,3rem)}
.cta-band p{max-width:34em;margin-left:auto;margin-right:auto}
.cta-band .btn-row{justify-content:center}
.cta-band a:not(.btn),.section-dark a:not(.btn){color:#fff}
.cta-band a:not(.btn):hover,.section-dark a:not(.btn):hover{color:var(--green-on-dark)}
.section-dark .eyebrow,.cta-band .eyebrow{color:var(--green-on-dark)}
.section-dark .lead,.cta-band .lead{color:rgba(255,255,255,.84)}
.section-dark .muted,.section-dark .cta-note,.cta-band .cta-note,.cta-band .muted{color:rgba(255,255,255,.72)}
.section-dark .dots li::before{background:var(--green-on-dark)}
.section-dark .btn-ghost,.cta-band .btn-ghost{border-color:rgba(255,255,255,.45);color:#fff}
.section-dark .btn-ghost:hover,.cta-band .btn-ghost:hover{background:rgba(255,255,255,.1);border-color:#fff;color:#fff}
.section-dark :focus-visible,.cta-band :focus-visible,.site-header :focus-visible,.site-footer :focus-visible{outline-color:#fff}

/* Footer */
.site-footer{background:var(--slate);color:rgba(255,255,255,.7);padding:56px 0 36px;font-size:15px}
.footer-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:28px 56px;align-items:start}
.footer-grid img{width:160px;height:auto;margin-bottom:14px}
.footer-grid p{margin:0}
.site-footer nav{display:flex;flex-wrap:wrap;gap:8px 28px;justify-content:flex-end;padding-top:4px}
.site-footer nav a{color:rgba(255,255,255,.86);text-decoration:none;font-weight:600;padding:6px 0}
.site-footer nav a:hover{color:#fff;text-decoration:underline}
.site-footer .fine{grid-column:1/-1;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.6)}

/* 404 page */
.nf-mark{margin:0 auto 24px}
.nf-links{padding-top:0}
.nf-login{margin:32px 0 0}

/* Page-specific: home */
.home-switch{align-items:center}
.home-switch h2{margin-bottom:.35em}
.home-switch-prices{margin:0}
.home-switch-prices>div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:9px 0;border-bottom:1px solid #dbe6f5}
.home-switch-prices dt{color:var(--text)}
.home-switch-prices dd{margin:0;font-weight:600;color:var(--slate);white-space:nowrap}
.home-switch-save{margin:16px 0 0;font:600 32px/1.15 var(--serif);color:var(--green-ink);font-variant-numeric:lining-nums}
.home-tour-cta{justify-content:center;margin-top:88px}

/* Page-specific: switch from QuickBooks */
.qb-plan{display:flex;flex-direction:column}
.qb-plan .dots{margin-bottom:24px}
.qb-plan .btn{margin-top:auto;align-self:flex-start}

/* A11y helpers */
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* Responsive */
@media (max-width:1024px){
  .grid-4,.proof-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-grid{gap:40px;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .feature-row,.feature-row.flip{gap:40px}
  .plans{gap:16px}
  .plan{padding:30px 22px 24px}
  .plan-badge{left:22px}
}
@media (max-width:820px){
  :root{--band:64px}
  html{scroll-padding-top:116px}
  .nav-links{display:flex;order:3;width:100%;gap:20px;overflow-x:auto;padding:0 0 10px;font-size:14px}
  .nav-links a{font-size:14px;padding:4px 0;white-space:nowrap}
  .home-tour-cta{margin-top:72px}
  .nav{flex-wrap:wrap;min-height:0;gap:6px 16px;padding-top:10px}
  .grid-2,.grid-3,.grid-4,.hero-grid,.plans,.feature-row,.feature-row.flip,.footer-grid{grid-template-columns:minmax(0,1fr)}
  .feature-row.flip>:first-child{order:0}
  .feature-row+.feature-row{margin-top:72px}
  .hero{padding-top:48px}
  .page-hero{padding:56px 0 40px}
  .plans{gap:32px;max-width:480px;margin:0 auto}
  .plan-for{min-height:0}
  .steps{grid-auto-flow:row;grid-template-columns:minmax(0,1fr);gap:28px}
  .steps>li{padding-left:64px;min-height:44px}
  .steps>li::before{position:absolute;left:0;top:0;margin:0}
  .steps>li:not(:last-child)::after{top:52px;bottom:-22px;left:22px;right:auto;width:1px;height:auto}
  .site-footer nav{justify-content:flex-start}
  .cta-band{padding:64px 0}
  .callout{padding:24px}
}
@media (max-width:600px){
  .compare{min-width:0;font-size:14px}
  .compare th,.compare td{padding:10px 8px}
  .compare th[scope=row]{min-width:0}
  .compare thead th{font-size:1rem}
  .compare caption{padding:10px 8px}
  .home-switch-save{font-size:28px}
  /* switch page cost table: one card per comparison */
  .qb-cost thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .qb-cost,.qb-cost tbody,.qb-cost tr,.qb-cost th,.qb-cost td{display:block;width:100%}
  .qb-cost tbody tr{border-bottom:1px solid var(--line)}
  .qb-cost tbody tr:last-child{border-bottom:0}
  .qb-cost tbody th[scope=row]{padding:14px 16px 6px;border:0;font:600 1.125rem/1.3 var(--serif);color:var(--slate)}
  .qb-cost td{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:10px 16px;border:0;text-align:right}
  .qb-cost td::before{content:attr(data-label);text-align:left;font-weight:600;color:var(--text)}
  .qb-cost td.col-hl{background:var(--blue-soft)}
  .qb-cost tbody tr:last-child>td:last-child{padding-bottom:14px}
  .compare.qb-cost tbody tr:last-child>*{border-bottom:0}
}
@media (max-width:480px){
  :root{--gutter:16px}
  body{font-size:16px}
  .lead{font-size:18px}
  .brand img{width:136px}
  .nav-actions{gap:14px}
  .nav-login{font-size:14px}
  .site-header .btn-sm{padding:8px 12px;font-size:14px}
  .proof-strip{grid-template-columns:minmax(0,1fr)}
  .btn-row>.btn{flex:1 1 100%}
  .billing-toggle label{padding:8px 14px}
  .card{padding:22px}
  .faq summary{font-size:17px;padding-right:40px}
  .faq details>:not(summary){margin-right:0}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
  .btn:hover,a.card:hover{transform:none}
  .faq details[open]>summary::after{transform:none}
}