/* AffiliateEngine base design system. Sites override the custom properties in their theme. Each block of light
   colours (here, the charts' below and the theme's, engine/build.mjs) also names :root.embed: embeds (layout 'embed',
   shown inside other sites' pages) keep them over the dark-mode colours, which name :root alone. */
:root, :root.embed {
  --accent: #0b6e4f;
  --accent-ink: #ffffff;
  --accent-soft: #e3f3ec;
  --cta: #d9480f;
  --cta-ink: #ffffff;
  --bg: #fbfbf9;
  --surface: #ffffff;
  --surface-2: #f2f3f0;
  --text: #1c2321;
  --muted: #5b6662;
  --border: #dde1dc;
  --good: #1e7b34;
  --warn: #9a6100;
  --bad: #b42318;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(0,0,0,.05), 0 4px 16px rgba(0,0,0,.05);
  --max: 1120px;
  --prose: 720px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --link: var(--accent);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121615; --surface: #1a1f1e; --surface-2: #222827; --text: #e7ecea; --muted: #a2aeaa;
    --border: #313937; --accent-soft: #17332a; --shadow: 0 1px 2px rgba(0,0,0,.4);
    --good: #5cc278; --warn: #e0a84a; --bad: #f07a6e; --link: #6fd3ad;
  }
}
:root.embed { color-scheme: light; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 16px/1.6 var(--font); color: var(--text); background: var(--bg); }
img, svg { max-width: 100%; height: auto; }
a { color: var(--link); text-underline-offset: 2px; }
h1, h2, h3, h4 { line-height: 1.25; margin: 1.6em 0 .5em; }
h1 { font-size: clamp(1.7rem, 4vw, 2.4rem); margin-top: .4em; letter-spacing: -.01em; }
h2 { font-size: clamp(1.3rem, 3vw, 1.6rem); }
h3 { font-size: 1.15rem; }
p, ul, ol { margin: 0 0 1em; }
small, .small { font-size: .875rem; }
.muted { color: var(--muted); }
[hidden] { display: none !important; } /* also over a class's own display (a .btn shown only once a script runs) */
.skip { position: absolute; left: -999px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip:focus { left: 8px; top: 8px; background: var(--surface); padding: 8px; z-index: 10; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 16px; }
.prose { max-width: var(--prose); }
.site-header { background: var(--surface); border-bottom: 1px solid var(--border); }
.site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; padding-top: 10px; padding-bottom: 10px; }
.brand { font-weight: 800; font-size: 1.15rem; color: var(--text); text-decoration: none; display: flex; align-items: center; gap: 8px; }
.brand-mark { width: 28px; height: 28px; border-radius: 7px; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; font-size: .9rem; }
.site-nav { display: flex; gap: 4px 18px; flex-wrap: wrap; font-size: .95rem; }
.site-nav a { color: var(--text); text-decoration: none; padding: 4px 0; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--link); text-decoration: underline; }
main { padding: 8px 0 48px; }
.crumbs { font-size: .85rem; color: var(--muted); margin: 14px 0 0; }
.crumbs a { color: var(--muted); }
.crumbs ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.crumbs li + li::before { content: "›"; margin-right: 6px; }
.lede { font-size: 1.15rem; color: var(--muted); max-width: var(--prose); }
.disclosure { font-size: .82rem; color: var(--muted); border-left: 3px solid var(--border); padding: 2px 10px; margin: 0 0 20px; max-width: var(--prose); }
.updated { font-size: .85rem; color: var(--muted); }

.site-footer { border-top: 1px solid var(--border); background: var(--surface); font-size: .9rem; color: var(--muted); padding: 28px 0 40px; }
.site-footer a { color: var(--muted); }
.footer-links { display: flex; flex-wrap: wrap; gap: 6px 18px; list-style: none; padding: 0; margin: 0 0 12px; }

/* Buttons & calls to action */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 16px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; min-height: 44px; }
.btn:hover { border-color: var(--accent); }
.btn-primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn-cta { background: var(--cta); color: var(--cta-ink); border-color: var(--cta); }
.btn-cta:hover { filter: brightness(1.08); border-color: var(--cta); }
.btn-sm { padding: 6px 10px; min-height: 36px; font-size: .9rem; }
.btn-block { width: 100%; }
.ext::after { content: "↗"; font-size: .8em; opacity: .8; }

/* Cards & grids */
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); }
.card h3 { margin-top: 0; }
.card-link { text-decoration: none; color: inherit; display: block; }
.card-link:hover { border-color: var(--accent); }
.kicker { text-transform: uppercase; letter-spacing: .06em; font-size: .75rem; font-weight: 700; color: var(--link); }
.callout { background: var(--accent-soft); border-radius: var(--radius); padding: 14px 18px; margin: 18px 0; max-width: var(--prose); }
.callout.warn { background: color-mix(in srgb, var(--warn) 14%, transparent); }
.badge { display: inline-block; font-size: .75rem; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); white-space: nowrap; }
.badge.good { color: var(--good); }
.badge.warn { color: var(--warn); }
.badge.bad { color: var(--bad); }

/* Tables */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); margin: 12px 0 20px; }
table { border-collapse: collapse; width: 100%; font-size: .92rem; }
th, td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; }
thead th { background: var(--surface-2); font-weight: 700; white-space: nowrap; }
tbody th { font-weight: 600; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); }
table.sticky-first tbody th, table.sticky-first thead th:first-child { position: sticky; left: 0; z-index: 1; }
table.sticky-first tbody th { background: var(--surface); }
table.sticky-first thead th:first-child { background: var(--surface-2); z-index: 2; }
.table-wrap caption { caption-side: bottom; padding: 8px 12px; text-align: left; font-size: .82rem; color: var(--muted); }
th[data-sort] { cursor: pointer; user-select: none; }
th[data-sort]::after { content: " ↕"; opacity: .35; }
th[aria-sort="ascending"]::after { content: " ↑"; opacity: 1; }
th[aria-sort="descending"]::after { content: " ↓"; opacity: 1; }
tr[hidden] { display: none; }
tbody tr:target, table.sticky-first tbody tr:target th { background: var(--accent-soft); }

/* Tools / forms */
.tool { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); margin: 18px 0; }
.tool-grid { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .tool-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.field { display: grid; gap: 4px; margin-bottom: 12px; }
.field label, .field .label { font-weight: 600; font-size: .92rem; }
.field .hint { font-size: .8rem; color: var(--muted); }
input[type="number"], input[type="text"], input[type="search"], select { font: inherit; padding: 9px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); min-height: 44px; width: 100%; }
input[type="range"] { width: 100%; accent-color: var(--accent); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); width: 18px; height: 18px; }
.check { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.inline-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; align-items: end; }
.result-big { font-size: 2rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0; }
.stat { background: var(--surface-2); border-radius: 8px; padding: 10px 14px; min-width: 120px; }
.stat b { display: block; font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.stat span { font-size: .8rem; color: var(--muted); }
.bar { height: 8px; background: var(--surface-2); border-radius: 99px; overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--accent); border-radius: 99px; }
.pill-list { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; list-style: none; }
.pill-list button { font: inherit; font-size: .88rem; padding: 6px 10px; border-radius: 99px; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; min-height: 36px; }
.pill-list button:hover { border-color: var(--accent); }
.pill-list button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

/* Product rows (tool results) */
.match { display: grid; grid-template-columns: 1fr auto; gap: 6px 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--border); }
.match:last-child { border-bottom: 0; }
.match h3 { margin: 0; font-size: 1rem; }
.match .meta { font-size: .85rem; color: var(--muted); }
@media (max-width: 560px) { .match { grid-template-columns: 1fr; } }

/* FAQ (answers always visible) */
.faq { border-bottom: 1px solid var(--border); padding: 10px 0; max-width: var(--prose); }
.faq h3 { margin: 0; font-size: 1rem; }
.faq p { margin: 6px 0 0; }

.sources { font-size: .82rem; color: var(--muted); }
.sources a { color: var(--muted); overflow-wrap: anywhere; }
.spec-list { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0; }
.spec-list dt { font-weight: 600; }
.spec-list dd { margin: 0; font-variant-numeric: tabular-nums; }
.two-col { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .two-col { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }
.hero { padding: 28px 0 8px; }
.hero .lede { font-size: 1.2rem; }
.noscript { background: color-mix(in srgb, var(--warn) 14%, transparent); padding: 10px 14px; border-radius: 8px; }
textarea { font: .85rem/1.45 var(--mono); padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); width: 100%; resize: vertical; }

/* Printing: the page's own content on light paper, with the site's name and plain address (the header's brand and
   .print-host), the disclosure line, the dates and the footer's notes. Navigation, buttons (every call to action,
   including the A/B-tested ones), embed code boxes and anything marked .no-print stay off the paper; .print-only
   elements appear only there. (html:root outranks the theme's dark-mode colours, which come later.) */
.print-only { display: none; }
@media print {
  html:root { --bg: #fff; --surface: #fff; --surface-2: #f2f2f2; --text: #111; --muted: #444; --border: #bbb; --link: #111; --accent-soft: #fff; --shadow: none; color-scheme: light; }
  @page { margin: 10mm; }
  html { font-size: 12px; } /* rem-sized text (.small, .meta, .disclosure) shrinks with it */
  body { font-size: 9.5pt; line-height: 1.35; }
  .print-only { display: revert; }
  .skip, .site-nav, .crumbs, .footer-links, .btn, button, .no-print, .embed-box, .ae-table-view { display: none !important; }
  .site-header, .site-footer { background: none; border: 0; padding: 0; }
  .site-header .wrap { padding: 0 0 4px; border-bottom: 1px solid var(--border); justify-content: space-between; }
  .brand-mark { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .print-host { font-weight: 600; }
  .wrap { max-width: none; padding: 0; }
  main { padding: 0; }
  .site-footer { font-size: 8pt; padding-top: 6px; }
  .site-footer p { margin: 0 0 2px; }
  h1 { font-size: 15pt; margin: 6px 0 4px; }
  .tool, .card, .callout { box-shadow: none; }
  .disclosure { margin-bottom: 6px; }
  a { text-decoration: none; }
}

/* Embeds (layout 'embed'): a page shown inside another site's iframe, so no page chrome: a plain surface, small
   margins, and a one-line disclosure with a Privacy link at the bottom */
body.embed { background: var(--surface); }
body.embed main { padding: 12px 14px 10px; }
body.embed h1 { font-size: 1.35rem; margin: 0 0 6px; }
.embed-foot { font-size: .78rem; color: var(--muted); border-top: 1px solid var(--border); padding-top: 8px; margin: 12px 0 0; }
.embed-foot a { color: var(--muted); }

/* Charts (engine/assets/charts.js). Categorical slots validated with the dataviz
   validator against the site surfaces (#ffffff light, #1a1f1e dark): all checks pass;
   light slots 3-4 are under 3:1 contrast, so charts always ship direct labels or a table view. */
:root, :root.embed { --series-1: #2a78d6; --series-2: #eb6834; --series-3: #1baf7a; --series-4: #eda100; --chart-grid: #e1e0d9; --chart-base: #c3c2b7; --chart-muted: #6b6a65; }
@media (prefers-color-scheme: dark) {
  :root { --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --series-4: #c98500; --chart-grid: #2c2c2a; --chart-base: #383835; --chart-muted: #a19f97; }
}
.ae-chart { margin: 12px 0 20px; }
.ae-plot { position: relative; }
.ae-plot svg { display: block; overflow: visible; }
.ae-grid { stroke: var(--chart-grid); stroke-width: 1; }
.ae-base { stroke: var(--chart-base); stroke-width: 1; }
.ae-tick { fill: var(--chart-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.ae-axis-label { fill: var(--chart-muted); font-size: 12px; }
.ae-end-label { fill: var(--text); font-size: 12px; font-weight: 600; }
.ae-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ae-dot { stroke: var(--surface); stroke-width: 2; }
.ae-line.s1 { stroke: var(--series-1); } .ae-dot.s1 { fill: var(--series-1); }
.ae-line.s2 { stroke: var(--series-2); } .ae-dot.s2 { fill: var(--series-2); }
.ae-line.s3 { stroke: var(--series-3); } .ae-dot.s3 { fill: var(--series-3); }
.ae-line.s4 { stroke: var(--series-4); } .ae-dot.s4 { fill: var(--series-4); }
.ae-cross { stroke: var(--chart-base); stroke-width: 1; }
.ae-legend { list-style: none; padding: 0; margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .88rem; color: var(--muted); }
.ae-legend li { display: flex; align-items: center; gap: 6px; }
.ae-key { display: inline-block; width: 14px; height: 2px; border-radius: 1px; vertical-align: middle; }
.ae-key.s1 { background: var(--series-1); } .ae-key.s2 { background: var(--series-2); }
.ae-key.s3 { background: var(--series-3); } .ae-key.s4 { background: var(--series-4); }
.ae-tip { position: absolute; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow); padding: 8px 10px; font-size: .85rem; pointer-events: none; min-width: 150px; z-index: 3; }
.ae-tip-head { color: var(--muted); margin-bottom: 4px; }
.ae-tip-row { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.ae-tip-row strong { font-variant-numeric: tabular-nums; }
.ae-table-view summary { cursor: pointer; font-size: .88rem; color: var(--muted); }

:root,:root.embed{--accent:#1f5fae;--accent-soft:#e6eef8;--cta:#c2410c}
@media (prefers-color-scheme: dark){:root{--accent:#3a78c9;--accent-soft:#172a40;--link:#8db8f0}}

/* Payroll Price Check: calculator layout */
.calc { padding: 18px; }
.calc .tool-grid { align-items: start; }
.calc-features { border: 0; padding: 0; margin: 4px 0 0; }
.calc-features legend { font-weight: 700; margin-bottom: 6px; }
.calc-features .check { align-items: flex-start; padding: 5px 0; }
.calc-features .check input { margin-top: 3px; flex: none; }
.calc-features .hint { display: block; font-size: .8rem; color: var(--muted); }
.calc-summary { background: var(--accent-soft); border-radius: 8px; padding: 12px 14px; margin: 0 0 8px; }
.calc-list { list-style: none; padding: 0; margin: 0; }
.calc-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.calc-row:last-child { border-bottom: 0; }
.calc-row h3 { margin: 0 0 2px; font-size: 1.05rem; }
.calc-row h3 a { color: var(--text); }
.calc-rank { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--surface-2); font-size: .8rem; margin-right: 4px; }
.calc-row .meta { font-size: .85rem; color: var(--muted); }
.calc-price { text-align: right; display: grid; gap: 6px; justify-items: end; }
.calc-price b { font-size: 1.4rem; font-variant-numeric: tabular-nums; }
.calc-price .per { color: var(--muted); font-size: .85rem; }
.calc-more > summary { cursor: pointer; font-weight: 700; padding: 6px 0; }
.calc-more > summary .muted { font-weight: 400; }
.calc-why { font-size: .88rem; margin-top: 4px; }
.calc-why summary { cursor: pointer; color: var(--link); }
.calc-why ul { margin: 6px 0 0; padding-left: 18px; }
.calc-unavailable { margin-top: 10px; font-size: .9rem; }
.calc-unavailable summary { cursor: pointer; color: var(--muted); }
.calc-chart { margin-top: 18px; border-top: 1px solid var(--border); padding-top: 12px; }
.calc-static { margin: 8px 0 20px; }
/* Sharing a comparison (calc.module.js): copy its link or print it; where copying isn't allowed, the link to copy */
.calc-share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; }
.calc-share [role="status"] { flex-basis: 100%; margin: 0; font-size: .85rem; color: var(--muted); }
.calc-share [role="status"]:empty { display: none; }
.calc-share-link { margin-top: 6px; font-size: .85rem; }
/* "Embed this chart" (/payroll-cost/, /cheapest-payroll/, /for-accountants/): the iframe code and the optional credit link */
.embed-box { max-width: var(--prose); margin: 28px 0 20px; padding: 14px 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.embed-box h2 { margin-top: 0; }
.embed-box .label { display: block; font-weight: 600; font-size: .92rem; margin: 12px 0 4px; }
.embed-box p.small { margin: 6px 0 0; }
.embed-box textarea { font-size: .8rem; }
/* The embed itself (/embed/cost-chart/): the team size it shows, and the reader's own pick; compact, so all of it, the
   link back, the disclosure and the Privacy link included, fits the height its code suggests (lib/pages.mjs
   EMBED_HEIGHT) in columns from 480px wide: the four figures on one row (two on phones), each figure without Deel
   inside its own tile */
.embed-for { margin: 0 0 6px; }
.embed-pick { display: inline-flex; align-items: center; gap: 6px; margin-left: 12px; font-size: .9rem; font-weight: 600; }
.embed-pick input { width: 4.5rem; min-height: 34px; padding: 3px 8px; }
.embed-h2 { font-size: 1.05rem; margin: 10px 0 2px; }
body.embed .stat-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 6px 0 8px; }
body.embed .stat { min-width: 0; max-width: none; padding: 6px 10px; line-height: 1.35; }
body.embed .stat b { font-size: 1.15rem; }
body.embed .stat > span { display: block; }
body.embed p.small { line-height: 1.5; margin-bottom: .6em; }
body.embed .ae-chart { margin: 2px 0 4px; }
body.embed .ae-legend { margin-bottom: 2px; }
.embed-more { margin: 4px 0 0; }
@media (max-width: 479px) { body.embed .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.link-list { padding-left: 18px; }
.link-list li { margin: 4px 0; }
@media (max-width: 560px) {
  .calc-row { grid-template-columns: 1fr; }
  .calc-price { text-align: left; justify-items: start; grid-template-columns: auto auto; align-items: center; }
}
/* Price change log: keep each date (the link to that change) on one line where there is room; on phones, a long web
   address in "What changed" may break anywhere, so the column fits the screen instead of running off its edge */
@media (min-width: 561px) { #changes tbody th { white-space: nowrap; } }
@media (max-width: 560px) { #changes td:last-child { overflow-wrap: anywhere; } }
/* Key facts: short quotable sentences (vendor pages, cheapest-by-size summary) */
.key-facts { padding-left: 18px; max-width: var(--prose); margin: 8px 0 16px; }
.key-facts li { margin: 6px 0; }
.callout .key-facts { margin-bottom: 0; }
/* Company pricing hubs (vendor pages with hub data): what the company charges, one line per service or package */
.hub-facts { padding-left: 18px; max-width: var(--prose); margin: 8px 0 16px; }
.hub-facts li { margin: 8px 0; }
.hub-facts a { overflow-wrap: anywhere; }
/* ... and the caveats on the prices in its table of the services that publish prices */
.hub-notes { padding-left: 18px; max-width: var(--prose); margin: 4px 0 12px; }
.hub-notes li { margin: 4px 0; }
/* "Cheaper than <service> for this team" (vendor pages): the services that cost less, and by how much a month (the
   block's other lines are .prose, so all of it keeps to the same width) */
.cheaper-list { padding-left: 18px; max-width: var(--prose); margin: 8px 0 12px; }
.cheaper-list li { margin: 4px 0; }
/* Price index (/payroll-cost/: #index and its quarterly change, #index-change), the pricing hubs' table, the
   alternatives pages' tables and the multi-state page's tables (#states-<employees>): every column fits a phone screen
   (headings and second lines wrap; the multi-state page's short headings, "1 state", stay on one line with their sort
   arrow) */
@media (max-width: 560px) {
  #index, #index-change, #alternatives, #alt-one, #alt-two, #alt-short, table[id^="states-"] { font-size: .85rem; }
  #index th, #index td, #index-change th, #index-change td, #alternatives th, #alternatives td, #alt-one th, #alt-one td, #alt-two th, #alt-two td, #alt-short th, #alt-short td, table[id^="states-"] th, table[id^="states-"] td { padding: 8px 6px; }
  #index thead th, #index-change thead th, #alternatives thead th, #alt-one thead th, #alt-two thead th, #alt-short thead th { white-space: normal; }
  /* the alternatives pages' size columns: just the number on phones (still read out in full) */
  .alt-unit { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* Stat tiles: a tile whose label carries the qualifier (vendor pages' price rank) wraps instead of filling a row */
.stat-row .stat { max-width: 20rem; }
/* The calculator printed (its Print button, or the browser's own Print command): a one-page handout. The inputs are in
   the summary's words (the form isn't printed), then each service that fits, ranked, with its check date, its source,
   its notes in short and the fees its price leaves out (the rows' .print-only lines), the services not priced
   (calc.module.js opens that list for printing), and the link to this comparison; the header gives the site's address,
   and the disclosure, the dates and the footer's notes stay. The rest of the home page, the lede, the chart and every
   button stay off the paper. (Checked in headless Chrome on Letter paper, 2026-10-24: one page for 1, 3, 5, 10, 25 and
   50 employees and 5 contractors in one state, and 12 employees and 3 contractors in two; the longest, 25 employees,
   leaves about 5% of the page. /for-accountants/ says "usually a single page".) */
@media print {
  main .wrap:has(> #calc) > .lede, #calc ~ *, #calc .calc-form, #calc .calc-chart, .calc-why, .calc-share { display: none !important; }
  #calc { border: 0; padding: 0; margin: 4px 0 0; }
  .calc-summary { background: none; border: 1px solid var(--border); padding: 4px 8px; margin-bottom: 2px; font-size: 9pt; }
  .calc-row { padding: 2px 0; gap: 0 12px; break-inside: avoid; grid-template-columns: minmax(0, 1fr) auto; }
  .calc-row h3 { font-size: 9.5pt; margin: 0; }
  .calc-rank { display: inline; width: auto; height: auto; background: none; margin: 0; font-size: inherit; }
  .calc-rank::after { content: "."; }
  .calc-row .meta { font-size: 7.5pt; line-height: 1.25; }
  .calc-price { display: block; }
  .calc-price b { font-size: 10pt; }
  .calc-price .per { font-size: 7.5pt; }
  .calc-unavailable { margin-top: 3px; font-size: 7.5pt; }
  .calc-unavailable summary { color: var(--text); }
  .calc-unavailable ul { margin: 1px 0 0; }
  .calc-print-url { margin: 4px 0 0; font-size: 8.5pt; }
}

html:not([data-x-cta]) [data-x="cta"]:not([data-xv="a"]),
html[data-x-cta="a"] [data-x="cta"]:not([data-xv="a"]),
html[data-x-cta="b"] [data-x="cta"]:not([data-xv="b"]){display:none!important}