/* getpayrollquote.com — site layout sheet.
   Loads AFTER /static/tokens.css (compiled from brand-ds/project/tokens.json) and
   /static/bundle.css (brand-ds/project/components/bundle.css).
   Components (button, price chip, stamp, menu, answer, tile, table, CTA band, form,
   header/nav, sticky bar, FAQ, next-steps, trust) are styled by bundle.css and are NOT
   repeated here. This file only owns page layout, heading scale and responsive rules.
   Every colour is a token; no hex values. */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}

/* ---------- base ---------- */
body{margin:0;font-family:var(--font-sans);color:var(--ink);background:var(--paper);font-size:17px;line-height:26px;font-weight:400;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
p,li{max-width:70ch}

/* ---------- headings: values mirror the type classes in tokens.css ---------- */
h1,h2,h3,h4{font-family:var(--font-sans);color:var(--ink);margin:0 0 .5em}
h1{font-size:40px;line-height:44px;font-weight:700;letter-spacing:-0.015em}          /* .h1 */
h2{font-size:28px;line-height:34px;font-weight:700;letter-spacing:-0.01em;margin:var(--space-7) 0 var(--space-4)}  /* .h2 */
h3{font-size:20px;line-height:26px;font-weight:600;letter-spacing:-0.005em;margin:var(--space-6) 0 var(--space-2)} /* .h3 */
h4{font-size:16px;line-height:22px;font-weight:600}                                   /* .label */
h1 + h2,.section > .container > h2:first-child,.narrow > h2:first-child{margin-top:0}
.lede{font-size:20px;line-height:30px;font-weight:400;color:var(--ink-muted);max-width:60ch}   /* .lede */
.meta{font-size:14px;line-height:20px;font-weight:500;color:var(--ink-muted)}                  /* .small */

/* ---------- shim (report upstream): bundle.css `.gpq a` (0,1,1) outranks `.btn` (0,1,0),
   so anchor buttons lose their label colour. bundle.css only patches `.nav a.btn`.
   Remove once bundle.css adds a `.gpq a.btn` rule. Tokens only. ---------- */
.gpq a.btn,.gpq a.btn:hover{color:var(--on-button-primary)}
.gpq a.btn.secondary,.gpq a.btn.secondary:hover{color:var(--ink)}
.gpq .cta-band a.btn,.gpq .cta-band a.btn:hover{color:var(--on-band-button)}

/* ---------- containers ---------- */
.container{max-width:1120px;margin:0 auto;padding:0 20px}
.narrow{max-width:760px}

/* ---------- hero ---------- */
.hero{padding:var(--space-8) 0 var(--space-5)}
.hero h1{font-size:56px;line-height:60px;font-weight:700;letter-spacing:-0.02em}     /* .display: homepage hero only */
.hero h1 mark{background:var(--highlight);color:var(--on-highlight);padding:0 .12em;border-radius:var(--radius-sm)}
.hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:var(--space-6);align-items:start}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr}}
@media (max-width:760px){.hero{padding-top:var(--space-7)}.hero h1{font-size:40px;line-height:44px;letter-spacing:-0.015em}}

/* ---------- sections & grids ---------- */
.section{padding:var(--space-7) 0}
.section.alt{background:var(--paper-tint)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5)}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-5)}
@media (max-width:860px){.grid-3,.grid-2{grid-template-columns:1fr}}

/* pros / cons */
.proscons{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5)}
@media (max-width:700px){.proscons{grid-template-columns:1fr}}
.proscons ul{padding-left:1.1em;margin:0}
.proscons h3{margin-top:0}

/* breadcrumbs */
.crumbs{font-size:14px;line-height:20px;font-weight:500;color:var(--ink-muted);margin:18px 0 6px}
.crumbs a{color:var(--ink-muted)}
.crumbs span{margin:0 6px}

/* link clouds for internal linking */
.linklist{columns:3;column-gap:28px;padding:0;list-style:none;margin:10px 0}
.linklist li{break-inside:avoid;padding:3px 0;font-size:15px;line-height:22px}
@media (max-width:760px){.linklist{columns:2}}
@media (max-width:480px){.linklist{columns:1}}

/* sources */
.sources{font-size:14px;line-height:20px;font-weight:500;color:var(--ink-muted)}
.sources h3{margin-top:var(--space-6)}
.sources ul{padding-left:1.1em}

/* CTA band side slot (layout only; the band itself is in bundle.css) */
.cta-side{flex:none}

/* ---------- header: mobile nav toggle (header/nav styling is in bundle.css) ---------- */
.menu-toggle{display:none;background:none;border:1px solid var(--line);border-radius:var(--radius-md);padding:8px 10px;font:inherit;color:var(--ink);cursor:pointer}
@media (max-width:760px){
  .nav{display:none;position:absolute;top:64px;left:0;right:0;background:var(--paper);border-bottom:1px solid var(--line);flex-direction:column;align-items:flex-start;padding:var(--space-4) 20px;gap:14px}
  .nav.open{display:flex}
  .menu-toggle{display:block}
}

/* ---------- quote form: step state (field styling is in bundle.css) ---------- */
.step{display:none}
.step.active{display:block}
span.field{display:block;font-size:16px;line-height:22px;font-weight:600;margin-bottom:6px;color:var(--ink)}   /* group label for checkbox choices; bundle styles label.field */
.form-actions{display:flex;justify-content:space-between;gap:10px;margin-top:18px}
.error{display:none}   /* app.js sets display:block on a failed field */
.matches{margin-top:20px}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--line);margin-top:var(--space-9);padding:var(--space-6) 0 var(--space-7);font-size:14px;line-height:20px;color:var(--ink-muted)}
.site-footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--space-5)}
@media (max-width:760px){.site-footer .cols{grid-template-columns:1fr 1fr}}
.site-footer h4{margin:0 0 var(--space-2);color:var(--ink)}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer li{margin:4px 0}
.site-footer a{color:var(--ink-muted);text-decoration:none}
.site-footer a:hover{color:var(--ink);text-decoration:underline}
.site-footer .disclosure{margin-top:var(--space-5);font-size:13px;line-height:18px;max-width:90ch}

/* ---------- tables on phones: .table-wrap (bundle.css) scrolls sideways; let numeric headers wrap so text columns keep room ---------- */
@media (max-width:760px){
  .table-wrap th.num{white-space:normal}
  .table-wrap td,.table-wrap th{min-width:72px}
}

/* ---------- utilities ---------- */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- sticky mobile bar: bundle.css styles it fixed/flex; the site shows it only on mobile ---------- */
.sticky-cta{display:none}
@media (max-width:760px){
  .sticky-cta{display:flex}
  .sticky-cta .btn{white-space:nowrap}
  body{padding-bottom:72px}
  .cta-side{width:100%}
  .cta-side .btn{display:block;width:100%;text-align:center}
}