/* PayrollWarden — site.css v5
   A document-ledger design system. Character: a tool built by people who fill
   out real government forms. Sharp corners, hairline rules, monospaced labels,
   tabular figures. Not a rounded-card SaaS template.

   Self-hosted type (no external requests, no FOUT):
     /static/fonts/plex-sans-var.woff2  IBM Plex Sans, variable 100-700
     /static/fonts/plex-mono.woff2      IBM Plex Mono 400
     /static/fonts/plex-mono-sb.woff2   IBM Plex Mono 600

   Classes: .eyebrow .proof .section .plans .prose .callout(.bad) .tablewrap .cta
            .navtoggle .navtoggle-label .bars .sr-only .btn.lg .trust .step .pill
            .offer  .page-utility (on <main>, via {% block page_class %})
   Requires: <html class="js">; #classes/#crew wrapped in .tablewrap.

   Layout rules this file keeps to:
   - Every vertical distance between blocks comes from the --s* scale or a
     named token built on it. Literal px values left in the file are control
     metrics (padding inside an input, a button, a table cell, an icon offset),
     not rhythm.
   - The page owns its top and bottom space (main.wrap padding). Blocks own
     the space *between* them. So the first and last block on a page drop their
     outer margin — otherwise a trailing margin stacks on the page padding and
     a short page ends in a slab of empty grey. */

@font-face{font-family:"Plex Sans";src:url("/static/fonts/plex-sans-var.woff2") format("woff2-variations");
  font-weight:100 700;font-style:normal;font-display:swap}
@font-face{font-family:"Plex Mono";src:url("/static/fonts/plex-mono.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Plex Mono";src:url("/static/fonts/plex-mono-sb.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap}

:root{
  /* ink */
  --ink-900:#0a1526;--ink-700:#28374a;--ink-500:#53616f;--ink-400:#6f7d8b;
  --navy:#0c1a2b;--navy-2:#132b45;
  /* surfaces: paper, not glass */
  --bg:#f2f4f6;--surface:#ffffff;--surface-2:#eef1f4;--surface-3:#e3e8ed;
  --line:#dde3e9;--line-strong:#c3ccd6;--line-input:#7f8c9a;
  /* accent — painted surfaces only */
  --accent:#1a56c4;--accent-hover:#14459f;--accent-soft:#e9effc;--accent-line:#c0d2f2;--accent-on-navy:#8fb6f5;
  /* text-only emphasis, deliberately deeper so a link never reads as a button */
  --link:#14478f;--link-hover:#0d2f61;
  --ok:#0f6d40;--ok-bg:#eaf5ef;--ok-line:#b3dcc5;
  --warn:#7d4a00;--warn-bg:#fdf6e7;--warn-line:#e6cf9a;
  --bad:#a81f14;--bad-bg:#fdf1ef;--bad-line:#eec0b9;
  /* elevation — mostly hairlines; blur is reserved for things that genuinely float */
  --e1:0 0 0 1px var(--line);
  --e2:0 0 0 1px var(--line-strong),0 1px 2px rgba(10,21,38,.06),0 10px 24px -14px rgba(10,21,38,.22);
  --e3:0 0 0 1px var(--line-strong),0 3px 8px rgba(10,21,38,.08),0 18px 36px -18px rgba(10,21,38,.3);
  --focus:0 0 0 3px rgba(26,86,196,.32);
  /* near-square. a form is not a phone app. */
  --r-sm:2px;--r-md:3px;--r-lg:4px;--r-xl:5px;--r-pill:999px;

  /* SPACE — one 4px-based scale. Each step has a job; pick by job, not by eye.
       --s1  4   optical nudges: icon to text, label to its own hint
       --s2  8   inside a group: heading to the line it introduces, list items
       --s3 12   between tightly related blocks: heading to body, table under its heading
       --s4 16   the default stack: paragraph to paragraph, field to field,
                 rule to the heading it opens, compact card padding
       --s5 24   between sibling components: grid gutters, card padding, lede to body
       --s6 32   between groups inside a region: title block to the page body,
                 one tool section to the next, roomy card padding
       --s7 48   between sections of a page: a ruled h2 section break
       --s8 64   between regions: the page's top and end, home-page sections
     Nothing above 64. A bigger gap than that is a page break, not a gap. */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;

  /* named uses of the scale */
  --gutter:24px;                    /* horizontal page padding; header and main share it */
  --page-top:var(--s8);             /* navy header bar -> first line of the page */
  --page-end:var(--s8);             /* last block -> footer rule */
  --page-top-compact:var(--s7);     /* utility pages (sign-in, support, account): */
  --page-end-compact:var(--s7);     /*   short, so less ceremony above and below */
  --section:var(--s7);              /* space above a ruled section break */
  --section-head:var(--s4);         /* rule -> the heading it opens */
  --region:var(--s8);               /* between home-page regions */
  --measure-form:880px;             /* max width of a two-card form layout */

  /* TYPE — three title sizes by page context, not one clamp for every page.
       --t-display  the landing hero only
       --t-h1       content pages: the tool, pricing, the guides
       --t-h1-utility  sign-in, support, account, error: the title labels a
                    small task and must not outweigh the two cards under it */
  --t-display:clamp(31px,2.6vw + 19px,46px);
  --t-h1:clamp(28px,1.2vw + 21px,38px);
  --t-h1-utility:clamp(26px,.6vw + 22px,30px);
  --t-h2:clamp(21px,1.1vw + 16px,27px);
  --t-h2-compact:19px;              /* section heads inside the tool; h2 on utility pages */
  --t-h3:17px;
  --t-lede:clamp(17px,.4vw + 15px,19px);
  --t-lede-compact:17px;            /* lede under a utility h1 */
  --t-body:16px;
  --t-small:14px;                   /* notes, footer */
  --t-label:11px;                   /* mono labels, table heads, pills */

  --font:"Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --rule:1px solid var(--line);
  /* legacy aliases (inline styles in templates use these) */
  --ink:var(--ink-900);--ink2:var(--ink-500);--card:var(--surface);--accent-d:var(--accent-hover);
  --line-legacy:var(--line);--radius:var(--r-lg);
}
/* phone: the same steps, one notch down at the page edges */
@media (max-width:600px){
  :root{
    --gutter:16px;
    --page-top:var(--s6);--page-end:var(--s7);
    --page-top-compact:var(--s5);--page-end-compact:var(--s6);
    --region:var(--s7);
  }
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* The body is a column flex container purely so the footer can be pushed to the bottom of
   the viewport on a page whose content is shorter than the screen. Without it the footer
   ends mid-screen and the page background shows beneath it, which reads as a footer that is
   short or not full width. Measured 2026-10-23 (1440x900): on /login the footer ended 51px
   above the fold, on the error page 278px. 100dvh is the mobile-safe second declaration —
   on a phone the URL bar makes 100vh taller than the visible area. */
body{margin:0;font-family:var(--font);font-size:var(--t-body);line-height:1.6;color:var(--ink-700);
  background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
img{max-width:100%}
a{color:var(--link);text-underline-offset:2px;text-decoration-thickness:1px}
a:hover{color:var(--link-hover)}
:focus-visible{outline:3px solid rgba(26,86,196,.45);outline-offset:2px}
hr{border:0;border-top:var(--rule);margin:var(--s5) 0}
p{margin:0 0 var(--s4)}
main ul{padding-left:1.25em}
main li{margin:0 0 var(--s2)}
/* Chromium 117+ avoids leaving a single word alone on the last line. Progressive
   enhancement: engines without support ignore it and render exactly as before. */
p,li,figcaption,.note,.lede{text-wrap:pretty}
.hidden{display:none}
/* The `hidden` attribute has to actually hide. Browsers ship `[hidden]{display:none}` as a
   UA rule, but ANY author rule that sets display — `.btn{display:inline-flex}` — overrides
   it, because author styles beat UA styles regardless of specificity. Without this, the
   draft-download button sat visible on /wh-347 before a single validation had run. The
   `!important` is the canonical fix (normalize.css and Bootstrap do the same) since a plain
   `[hidden]` selector loses on source order to any later class rule. */
[hidden]{display:none !important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.wrap{max-width:1120px;margin:0 auto;padding:0 var(--gutter)}

/* ---------- page frame ---------- */
/* `main` alone LOSES to `.wrap` — a class beats an element — so vertical padding
   on a bare `main{}` rule is dead code and every page runs with zero top/bottom
   padding. Keep this at `main.wrap`, or the rhythm silently disappears again. */
main.wrap{padding:var(--page-top) var(--gutter) var(--page-end);flex:1 0 auto;width:100%}
/* Utility pages are a named variant, not a second set of numbers: they swap
   which tokens feed the same padding rule. */
main.wrap.page-utility{--page-top:var(--page-top-compact);--page-end:var(--page-end-compact)}
/* Title block -> page body. A component that opens the body sits --s6 below
   the title block; the lede's own margin collapses into it. */
main.wrap > :is(.card,.grid,.tool){margin-top:var(--s6);margin-bottom:var(--s6)}
/* The page padding is the only space at the page's edges. Strip the outer
   margin of the first and last block (and one level in, for <article>,
   <section> and the hero column) so it never stacks on top of it.
   Must stay after the rule above: same specificity, so order decides. */
main.wrap > :first-child,main.wrap > :first-child > :first-child{margin-top:0}
main.wrap > :last-child,main.wrap > :last-child > :last-child{margin-bottom:0}

/* ---------- type ---------- */
h1,h2,h3{color:var(--ink-900);margin:0;font-weight:600}
h1{font-size:var(--t-h1);line-height:1.1;letter-spacing:-.026em;margin:0 0 var(--s4);text-wrap:balance}
.page-utility h1{font-size:var(--t-h1-utility);letter-spacing:-.022em;margin-bottom:var(--s3)}
h2{font-size:var(--t-h2);line-height:1.22;letter-spacing:-.02em;margin:var(--section) 0 var(--s3)}
.page-utility h2{font-size:var(--t-h2-compact);letter-spacing:-.012em}
h3{font-size:var(--t-h3);line-height:1.35;letter-spacing:-.008em;margin:var(--s5) 0 var(--s2)}
h2,h3{text-wrap:balance}
.lede{font-size:var(--t-lede);line-height:1.55;letter-spacing:-.004em;color:var(--ink-700);
  max-width:62ch;margin:0 0 var(--s5)}
.page-utility .lede{font-size:var(--t-lede-compact)}
.note{font-size:var(--t-small);line-height:1.5;color:var(--ink-500)}
main p,main li{max-width:74ch}
/* the date is one token; never break it at its hyphen */
#updated{white-space:nowrap}

/* Section break — the ledger habit. Any h2 that is a direct child of the page
   or of an article opens a section: --section of space, a hairline, then the
   heading --section-head below it. Guides, the tool's "About this form", and
   account pages all use this one rule. */
:is(main.wrap,.prose) > h2{margin-top:var(--section);padding-top:var(--section-head);border-top:var(--rule)}

/* ---------- header ---------- */
header.site{background:var(--navy);color:#fff;position:relative;z-index:20;
  border-bottom:1px solid var(--navy-2)}
header.site .wrap{display:flex;align-items:center;gap:var(--s2);min-height:60px}
.brand{display:inline-flex;align-items:center;min-height:44px;margin-right:auto;font-size:18px;font-weight:600;
  letter-spacing:-.022em;color:#fff;text-decoration:none}
.brand:hover{color:#fff}
.brand img{display:block;flex:0 0 auto;border-radius:var(--r-md);margin-right:10px}
.brand span{color:#b9c9dd;font-weight:400}
nav.site{display:flex;align-items:center;gap:2px}
nav.site a:not(.btn){display:inline-flex;align-items:center;min-height:44px;padding:0 11px;
  color:#bccadb;text-decoration:none;font-size:14.5px;font-weight:400;border-radius:var(--r-md)}
nav.site a:not(.btn):hover{color:#fff;background:rgba(255,255,255,.06)}
nav.site a[aria-current="page"]{color:#fff;box-shadow:inset 0 -2px 0 var(--accent-on-navy)}
nav.site form{display:inline-flex;margin:0}
header.site .btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.28);box-shadow:none}
header.site .btn.ghost:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.45)}
/* depth is suppressed inside the navy bar: a cast shadow on dark paint reads as a smudge */
header.site .btn{box-shadow:none}
header.site .btn:hover,header.site .btn:active{transform:none;box-shadow:none}
header.site .cta{margin-left:var(--s2)}
header.site :focus-visible{outline-color:var(--accent-on-navy)}
.navtoggle{display:none}

@media (max-width:880px){
  /* horizontal padding comes from --gutter, so the logo stays on the same
     left edge as the page content at every width */
  header.site .wrap{flex-wrap:wrap;min-height:58px}
  header.site.nav-open{box-shadow:var(--e3)}
  .navtoggle{display:inline-flex;align-items:center;gap:var(--s2);min-height:44px;min-width:44px;padding:0 12px;
    margin-left:var(--s1);background:transparent;color:#fff;border:1px solid rgba(255,255,255,.28);
    border-radius:var(--r-md);font:600 14px/1 var(--font);cursor:pointer}
  .navtoggle .bars{position:relative;display:block;width:16px;height:1.5px;background:currentColor}
  .navtoggle .bars::before,.navtoggle .bars::after{content:"";position:absolute;left:0;width:16px;height:1.5px;background:currentColor}
  .navtoggle .bars::before{top:-5px}
  .navtoggle .bars::after{top:5px}
  header.site.nav-open .navtoggle .bars{background:transparent}
  header.site.nav-open .navtoggle .bars::before{top:0;transform:rotate(45deg)}
  header.site.nav-open .navtoggle .bars::after{top:0;transform:rotate(-45deg)}
  nav.site{order:5;flex:0 0 100%;flex-direction:column;align-items:stretch;gap:0;
    padding:var(--s1) 0 var(--s4);border-top:1px solid rgba(255,255,255,.1)}
  nav.site a:not(.btn){min-height:48px;padding:0 var(--s1);font-size:16px;border-bottom:1px solid rgba(255,255,255,.08)}
  nav.site a[aria-current="page"]{box-shadow:inset 3px 0 0 var(--accent-on-navy);padding-left:var(--s3)}
  nav.site form{display:block;padding-top:var(--s3)}
  nav.site form .btn{width:100%;min-height:48px}
  header.site .cta{min-height:44px}
  .js nav.site{display:none}
  .js header.site.nav-open nav.site{display:flex}
}
@media (max-width:374px){
  .navtoggle-label{display:none}
  .navtoggle{padding:0;justify-content:center}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:44px;padding:0 18px;
  border:1px solid transparent;border-radius:var(--r-md);background:var(--accent);color:#fff;
  font:600 15.5px/1.2 var(--font);letter-spacing:-.005em;text-decoration:none;cursor:pointer;white-space:nowrap;
  max-width:100%;
  /* depth: a 1px top highlight reads as a lit edge, the drop shadow as a cast
     edge. Kept small on purpose — this is a document tool, not a dashboard. */
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 1px 2px rgba(10,21,38,.22),0 2px 6px -2px rgba(10,21,38,.25);
  transition:background-color .12s,border-color .12s,box-shadow .15s,transform .15s}
/* A CTA longer than the viewport has to wrap inside its own box. With nowrap it
   overflowed by 11.5px at 390px and gave the whole site a horizontal scrollbar. */
.prose .btn,.callout .btn{white-space:normal;text-align:center}
.btn:hover{background:var(--accent-hover);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 2px 4px rgba(10,21,38,.22),0 6px 14px -6px rgba(10,21,38,.35);
  transform:translateY(-1px)}
.btn:active{transform:translateY(0);box-shadow:inset 0 1px 3px rgba(10,21,38,.25)}
.btn.ghost{background:var(--surface);color:var(--ink-900);border-color:var(--line-strong);
  box-shadow:0 1px 2px rgba(10,21,38,.07)}
.btn.ghost:hover{background:var(--surface-2);border-color:var(--ink-400);color:var(--ink-900);
  box-shadow:0 2px 6px -2px rgba(10,21,38,.2);transform:translateY(-1px)}
.btn.ghost:active{transform:translateY(0);box-shadow:inset 0 1px 2px rgba(10,21,38,.12)}
.btn.sm{min-height:36px;padding:0 12px;font-size:14px}
.btn.lg{min-height:50px;padding:0 22px;font-size:16.5px}
@media (pointer:coarse){.btn.sm{min-height:44px}}
.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);margin:var(--s4) 0}

/* ---------- surfaces ---------- */
.card{background:var(--surface);border:var(--rule);border-radius:var(--r-lg);padding:var(--s5);
  box-shadow:none}
.card > :first-child{margin-top:0}
.card > :last-child{margin-bottom:0}
/* align-items:start, not the grid default of stretch. Stretching two cards
   with different amounts of content to one height left a dead band at the
   bottom of the shorter card (sign-in, pricing). Each card now ends where its
   content ends; their tops, headings and first fields still line up. */
.grid{display:grid;gap:var(--s5);align-items:start}
.grid.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:820px){.grid.c3,.grid.c2{grid-template-columns:1fr}}
/* two form cards don't need 1072px; at full width each email field was 475px */
.page-utility .grid.c2{max-width:var(--measure-form)}

/* the "how it works" row reads as a numbered register, not three floating tiles */
.grid.c3 .card{display:flex;flex-direction:column;border:0;border-top:2px solid var(--ink-900);
  border-radius:0;padding:var(--s4) 0 0;background:transparent}
.grid.c3 .card h3{display:flex;align-items:baseline;gap:10px;margin:0 0 var(--s2);font-size:16px;font-weight:600}
.grid.c3 .card .note{margin:0;font-size:15px}
.step{flex:0 0 auto;font-family:var(--mono);font-size:12px;font-weight:600;color:var(--ink-400);
  letter-spacing:.06em}

/* align-self is load-bearing: inside .plans .card (a flex column) the badge
   stretched to the full card width and read as a banner, not a label */
.pill{display:inline-flex;align-items:center;align-self:flex-start;min-height:22px;padding:0 var(--s2);border-radius:var(--r-sm);
  font-family:var(--mono);font-size:var(--t-label);font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.pill.free{background:var(--surface-2);color:var(--ink-500);border:1px solid var(--line)}
.pill.pro{background:var(--ink-900);color:#fff}

/* ---------- home ---------- */
/* No padding of its own: the hero starts at --page-top like every other
   page's title, so the eyebrow on / sits exactly where h1 sits on /pricing. */
.hero{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:var(--s8);align-items:center}
.hero h1{font-size:var(--t-display);line-height:1.09;letter-spacing:-.028em;max-width:16ch}
.hero .toolbar{margin:var(--s5) 0 var(--s3)}
.hero .toolbar .btn{min-height:48px;padding:0 22px}
@media (max-width:900px){.hero{grid-template-columns:1fr;gap:var(--s6)}}
@media (max-width:600px){.hero .toolbar .btn{flex:1 1 100%}}
@media (min-width:901px){
  .hero .proof{max-width:540px;justify-self:end}
  .hero .trust{max-width:560px}
}

/* eyebrow: a mono form-reference line, not a floating badge */
.eyebrow{display:block;margin:0 0 var(--s5);padding:0 0 var(--s2);
  border-bottom:var(--rule);font-family:var(--mono);font-size:11.5px;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;color:var(--ink-500)}
/* the mono kicker is wider than a phone — tighten it rather than let
   "OMB 1235-0008" drop onto a line of its own */
@media (max-width:600px){.eyebrow{font-size:var(--t-label);letter-spacing:.07em}}

/* one column on purpose: three claims in two columns left an empty cell and
   squeezed "We never sign and never pre-check a box" until "box" was orphaned */
.trust{list-style:none;display:grid;grid-template-columns:1fr;gap:var(--s2);
  margin:var(--s5) 0 0;padding:var(--s4) 0 0;border-top:var(--rule);font-size:var(--t-small);color:var(--ink-700)}
.trust li{display:flex;align-items:flex-start;gap:9px;margin:0;line-height:1.45}
.trust li::before{content:"";flex:0 0 auto;width:13px;height:13px;margin-top:3px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.2 6.3l2.5 2.5 5-5.4' fill='none' stroke='%230f6d40' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat}
/* the proof figure: a sheet of paper on a desk */
.proof{margin:0;padding:var(--s3);background:var(--surface-3);border:var(--rule);border-radius:var(--r-lg)}
img.formshot{display:block;width:100%;height:auto;background:#fff;border:1px solid var(--line-strong);
  border-radius:var(--r-sm);box-shadow:0 1px 3px rgba(10,21,38,.14)}
.proof figcaption{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s1) var(--s3);
  padding:var(--s3) 2px 2px;font-family:var(--mono);font-size:11.5px;color:var(--ink-500)}
@media (max-width:600px){.proof img.formshot{aspect-ratio:4/3;object-fit:cover;object-position:0 0}}

/* a home-page region: heavier 2px rule than a prose section break */
.section{margin-top:var(--region)}
.section > h2:first-child{margin-top:0;padding-top:var(--section-head);border-top:2px solid var(--ink-900)}

.price{margin:var(--s2) 0 var(--s1);font-family:var(--mono);font-size:40px;line-height:1;font-weight:600;
  letter-spacing:-.03em;color:var(--ink-900);font-variant-numeric:tabular-nums}
.price span{margin-left:2px;font-family:var(--font);font-size:15px;font-weight:400;letter-spacing:0;color:var(--ink-500)}
.card.pricecard{border:1px solid var(--line-strong);border-top:3px solid var(--ink-900);
  box-shadow:0 1px 2px rgba(10,21,38,.05),0 12px 28px -18px rgba(10,21,38,.25)}
.pricecard hr{margin:var(--s4) 0}

/* The $29 offer on the home page spans the full column like the step row
   above it, split into the price (left) and what it buys (right). Centring a
   580px card in a 1072px column made it look like it belonged to nothing. */
.card.offer{display:grid;grid-template-columns:minmax(0,5fr) auto minmax(0,7fr);column-gap:var(--s6);
  align-items:start;padding:calc(var(--s6) - 3px) var(--s6) var(--s6)}
.offer > div > :first-child{margin-top:0}
.offer > div > :last-child{margin-bottom:0}
.offer > hr{width:0;height:auto;align-self:stretch;margin:0;border-top:0;border-left:var(--rule)}
@media (max-width:820px){
  .card.offer{grid-template-columns:minmax(0,1fr);padding:calc(var(--s5) - 3px) var(--s5) var(--s5)}
  .offer > hr{width:auto;height:0;margin:var(--s4) 0;border-left:0;border-top:var(--rule)}
}
@media (max-width:600px){.card.offer{padding:calc(var(--s4) - 3px) var(--s4) var(--s4)}}

/* ---------- pricing ---------- */
.plans .card{display:flex;flex-direction:column;padding:var(--s6)}
.plans .card.pricecard{padding-top:calc(var(--s6) - 3px)}
.plans .card > .btn,.plans .card form .btn{width:100%;min-height:48px}
.plans .card > .note{margin:0 0 var(--s4)}
.plans ul{list-style:none;padding:0;margin:var(--s4) 0 var(--s5)}
.plans li{position:relative;padding-left:26px;margin:0 0 var(--s2);line-height:1.5}
.plans li::before{content:"";position:absolute;left:0;top:4px;width:14px;height:14px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%231a56c4' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}
@media (max-width:600px){
  .plans .card{padding:var(--s5)}
  .plans .card.pricecard{padding-top:calc(var(--s5) - 3px)}
}

/* callout: a ruled margin note, not a rounded panel */
.callout{margin:var(--section) 0;padding:var(--s4) 0 var(--s4) var(--s5);background:transparent;border-radius:0;
  border:0;border-left:3px solid var(--accent)}
.callout.bad{border-left-color:var(--bad)}
.callout > h2:first-child{margin-top:0;padding-top:0;border-top:0;font-size:var(--t-h2)}
.callout > :last-child{margin-bottom:0}

/* ---------- guide ---------- */
.prose{max-width:720px}
.prose p,.prose li{font-size:16.5px;line-height:1.7}
.prose p > strong:first-child{color:var(--ink-900)}
/* Keep the underline explicit: colour must never be the only cue that text is
   a link (WCAG 1.4.1), so do not strip this in a future pass. */
.prose a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
.prose a:hover{color:var(--link-hover)}

/* ---------- forms ---------- */
label{display:block;margin:0 0 5px;font-family:var(--mono);font-size:var(--t-label);font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;line-height:1.3;color:var(--ink-500)}
input,select,textarea{width:100%;min-height:44px;padding:9px 11px;font:inherit;font-size:16px;color:var(--ink-900);
  background:var(--surface);border:1px solid var(--line-input);border-radius:var(--r-md);
  font-variant-numeric:tabular-nums}
input::placeholder{color:var(--ink-400)}
input:hover,select:hover{border-color:var(--ink-500)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:var(--focus)}
select{appearance:none;-webkit-appearance:none;padding-right:34px;
  background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2353616f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 12px center/11px 7px no-repeat}
.field{margin-bottom:var(--s4)}
.row{display:grid;gap:var(--s4);align-items:end}
.row + .row{margin-top:var(--s4)}
.row.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.row.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.row.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.row.c6{grid-template-columns:repeat(6,minmax(0,1fr))}
@media (max-width:900px){
  .row.c3,.row.c4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .row.c6{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:600px){
  .row.c2,.row.c3,.row.c4{grid-template-columns:1fr}
  .row.c6{grid-template-columns:repeat(2,minmax(0,1fr))}
}

.issues{list-style:none;padding:0;margin:var(--s4) 0}
.issues li{max-width:none;margin:0 0 var(--s2);padding:10px 13px;border:1px solid;border-left-width:3px;
  border-radius:var(--r-md);font-size:14.5px;line-height:1.45}
.issues li:last-child{margin-bottom:0}
.issues .error{background:var(--bad-bg);border-color:var(--bad-line);border-left-color:var(--bad);color:var(--bad)}
.issues .warn{background:var(--warn-bg);border-color:var(--warn-line);border-left-color:var(--warn);color:var(--warn)}
/* a form error lives inside the card whose form failed, between its title and
   its fields — the same width as the thing it is about */
.card .issues{margin:0 0 var(--s4)}

/* ---------- tables ---------- */
table{width:100%;border-collapse:collapse;font-size:14.5px;background:var(--surface);border:var(--rule)}
th,td{padding:9px 12px;text-align:left;vertical-align:middle;border-bottom:var(--rule)}
tbody tr:last-child td{border-bottom:0}
th{background:var(--surface-2);color:var(--ink-700);font-family:var(--mono);font-size:var(--t-label);font-weight:600;
  letter-spacing:.07em;text-transform:uppercase;white-space:nowrap;border-bottom:1px solid var(--line-strong)}
th.num,td.num{text-align:right;font-variant-numeric:tabular-nums}

/* ---------- tool (/wh-347) ---------- */
/* The form panel is a document, so its sections are tighter than the page's:
   --s6 above a hairline, --section-head under it, --s3 to the table. A form
   reads top-to-bottom in one sitting; page-sized gaps made it feel like three
   separate forms. */
.tool{padding:var(--s6);background:var(--surface);border:var(--rule);border-radius:var(--r-lg)}
main.wrap > .tool{margin-bottom:var(--section)}
.tool > :last-child{margin-bottom:0}
.tool h2{margin:var(--s6) 0 var(--s2);padding-top:var(--section-head);border-top:var(--rule);
  font-size:var(--t-h2-compact);letter-spacing:-.012em;display:flex;align-items:baseline;gap:10px}
.tool h2:first-child{margin-top:0;padding-top:0;border-top:0}
.tool > .note{margin:0 0 var(--s4)}
.tablewrap{margin:var(--s3) 0 0;overflow-x:auto;-webkit-overflow-scrolling:touch;border:var(--rule)}
.tool table{min-width:1000px;border:0;font-size:13.5px}
.tool #classes{min-width:780px}
.tool th{padding:7px 6px}
.tool td{padding:3px 4px}
.tool td.num{width:34px;text-align:center;color:var(--ink-400);font-family:var(--mono);font-size:12px}
/* selects match the compact inputs; at 44px next to 34px inputs the third
   field row of "Project & contractor" was visibly ragged */
.tool input,.tool select{min-height:34px;padding:5px 7px;font-size:13.5px;border-radius:var(--r-sm)}
.tool input{text-align:right;border-color:var(--line)}
.tool select{padding-right:30px;background-position:right 10px center}
.tool input.txt{text-align:left}
.tool td .btn.sm{width:34px;padding:0}
/* tablets get the desktop table but a finger, not a mouse */
@media (pointer:coarse){
  .tool input,.tool select{min-height:44px}
  .tool td .btn.sm{width:44px}
}

@media (max-width:760px){
  .tool{padding:0;border:0}
  main.wrap > .tool{margin-top:var(--s5)}
  .tool .toolbar .btn{flex:1 1 100%;min-height:48px}
  .tool > .toolbar:last-child .btn:not(.ghost){min-height:52px;font-size:16.5px}
  .tablewrap{overflow:visible;border:0}
  .tool table,.tool #classes,.tool tbody{display:block;min-width:0;border:0}
  .tool thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .tool tr{display:grid;gap:11px 4px;align-items:end;margin:0 0 var(--s3);padding:var(--s3) 10px var(--s4);
    background:var(--surface);border:var(--rule);border-radius:var(--r-lg)}
  .tool tr:focus-within{border-color:var(--line-strong);box-shadow:var(--e3)}
  .tool td{display:block;min-width:0;padding:0;border:0}
  .tool td:last-child{justify-self:end}
  .tool td::before{display:block;margin:0 0 4px;font-family:var(--mono);font-size:10.5px;font-weight:600;
    letter-spacing:.08em;text-transform:uppercase;line-height:1.2;color:var(--ink-500);white-space:nowrap}
  .tool input,.tool select{min-height:44px;padding:8px 10px;font-size:16px}
  .tool input{text-align:left}
  .tool select{padding-right:34px;background-position:right 12px center}
  .tool td .btn.sm{width:44px;min-height:44px}

  /* crew: 14-col grid → name / id+class / 7 days / OT + deductions */
  #crew tr{grid-template-columns:repeat(14,minmax(0,1fr))}
  #crew td:nth-child(1){grid-row:1;grid-column:1/13;align-self:center;width:auto;text-align:left;
    font-size:15.5px;font-weight:600;color:var(--ink-900)}
  #crew td:nth-child(1)::before{content:"Worker ";display:inline;margin:0;font:inherit;color:var(--ink-400)}
  #crew td:nth-child(17){grid-row:1;grid-column:13/15}
  #crew td:nth-child(2){grid-column:1/8}   #crew td:nth-child(2)::before{content:"Last name"}
  #crew td:nth-child(3){grid-column:8/15}  #crew td:nth-child(3)::before{content:"First name"}
  #crew td:nth-child(4){grid-column:1/5}   #crew td:nth-child(4)::before{content:"ID (last 4)"}
  #crew td:nth-child(5){grid-column:5/15}  #crew td:nth-child(5)::before{content:"Classification"}
  #crew td:nth-child(n+6):nth-child(-n+12){grid-column:span 2}
  #crew td:nth-child(n+6):nth-child(-n+13)::before{text-align:center}
  #crew td:nth-child(n+6):nth-child(-n+13) input{padding:8px 0;text-align:center}
  #crew td:nth-child(6)::before{content:"Mon"}
  #crew td:nth-child(7)::before{content:"Tue"}
  #crew td:nth-child(8)::before{content:"Wed"}
  #crew td:nth-child(9)::before{content:"Thu"}
  #crew td:nth-child(10)::before{content:"Fri"}
  #crew td:nth-child(11)::before{content:"Sat"}
  #crew td:nth-child(12)::before{content:"Sun"}
  #crew td:nth-child(13){grid-column:1/3}  #crew td:nth-child(13)::before{content:"Sa OT"}
  #crew td:nth-child(14){grid-column:3/7}  #crew td:nth-child(14)::before{content:"Tax"}
  #crew td:nth-child(15){grid-column:7/11} #crew td:nth-child(15)::before{content:"FICA"}
  #crew td:nth-child(16){grid-column:11/15}#crew td:nth-child(16)::before{content:"Other"}
  #crew td:nth-child(14) input,#crew td:nth-child(15) input,#crew td:nth-child(16) input{text-align:right}

  /* classifications: 6-col grid */
  #classes tr{grid-template-columns:repeat(6,minmax(0,1fr))}
  #classes td:nth-child(1){grid-row:1;grid-column:1/6} #classes td:nth-child(1)::before{content:"Classification"}
  #classes td:nth-child(8){grid-row:1;grid-column:6/7}
  #classes td:nth-child(2){grid-column:1/3} #classes td:nth-child(2)::before{content:"Rate paid"}
  #classes td:nth-child(3){grid-column:3/5} #classes td:nth-child(3)::before{content:"Fringe 6B"}
  #classes td:nth-child(4){grid-column:5/7} #classes td:nth-child(4)::before{content:"Cash 6C"}
  #classes td:nth-child(5){grid-column:1/3} #classes td:nth-child(5)::before{content:"WD base"}
  #classes td:nth-child(6){grid-column:3/5} #classes td:nth-child(6)::before{content:"WD fringe"}
  #classes td:nth-child(7){grid-column:5/7} #classes td:nth-child(7)::before{content:"Flag"}
  #classes td:nth-child(n+2):nth-child(-n+6) input{text-align:right}
}

/* ---------- footer ---------- */
/* Full-bleed band pinned to the bottom by `margin-top:auto` against the flex body.
   The inner .wrap keeps the SAME 1120px measure and gutter as the header, so the
   two edges line up at every width. The old `p{max-width:82ch}` cap was the bug:
   it stopped the text ~82 characters in and left the right half of the band
   empty, so the footer read as a narrow strip even though the band was full
   width. Columns fill the measure instead. */
footer.site{padding:var(--s7) 0 var(--s6);background:var(--surface);border-top:1px solid var(--line-strong);
  color:var(--ink-500);font-size:var(--t-small);line-height:1.55;width:100%;margin-top:auto}
footer.site .wrap{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));
  gap:var(--s6) var(--s7);align-items:start}
.footer-brand p{max-width:46ch;margin:var(--s3) 0 0}
.footer-brand .brand{margin:0 0 var(--s2);color:var(--ink-900)}
.footer-brand .brand span{color:var(--ink-500)}
footer.site h4{margin:0 0 var(--s2);font-family:var(--mono);font-size:var(--t-label);font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-500)}
footer.site .footer-col{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
footer.site a{color:var(--ink-700);text-decoration:none}
footer.site a:hover{color:var(--link);text-decoration:underline}
footer.site .footer-legal{grid-column:1/-1;margin-top:var(--s5);padding-top:var(--s4);
  border-top:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:space-between;
  gap:var(--s2) var(--s5)}
footer.site .footer-legal p{max-width:74ch;margin:0}
footer.site strong{color:var(--ink-700)}
@media (max-width:820px){
  footer.site .wrap{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-brand{grid-column:1/-1}
}
@media (max-width:520px){
  footer.site .wrap{grid-template-columns:1fr;gap:var(--s5)}
}
@media (prefers-reduced-motion:reduce){
  .btn{transition:background-color .12s,border-color .12s}
  .btn:hover,.btn:active{transform:none}
}

/* ---------- auth (sign-in / create account) ---------- */
/* A single elevated panel instead of two adjacent cards. The left column carries
   the product's argument (why an account exists), the right column carries the
   form. On mobile the argument collapses above the form — the form never sits
   below a tall pitch. */
.auth{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,430px);
  max-width:960px;margin:var(--s6) auto;background:var(--surface);
  border:1px solid var(--line-strong);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 1px 2px rgba(10,21,38,.06),0 12px 32px -12px rgba(10,21,38,.12)}
.auth-copy{display:flex;flex-direction:column;justify-content:center;
  padding:var(--s7) var(--s6);background:var(--navy);color:#dfe8f2}
.auth-copy .eyebrow{margin:0 0 var(--s4);padding:0 0 var(--s2);
  border-bottom:1px solid rgba(255,255,255,.18);color:var(--accent-on-navy)}
.auth-copy h1{margin:0 0 var(--s3);font-size:var(--t-h1);line-height:1.12;
  letter-spacing:-.022em;color:#fff;max-width:20ch}
.auth-copy .lede{max-width:40ch;margin:0;font-size:var(--t-lede-compact);
  line-height:1.55;color:#b9c9dd}
.auth-copy .auth-trust{margin:var(--s5) 0 0;padding:var(--s4) 0 0;
  border-top:1px solid rgba(255,255,255,.16);color:#cfdae7;font-size:var(--t-small)}
.auth-copy .auth-trust li{margin:0 0 4px}
.auth-form{display:flex;flex-direction:column;justify-content:center;
  padding:var(--s7) var(--s6);background:var(--surface)}
.auth-form h2{margin:0 0 var(--s2);font-size:var(--t-h2);letter-spacing:-.018em}
.auth-intro{margin:0 0 var(--s4)}
.auth-form .field{margin-bottom:var(--s3)}
.auth-form .btn{width:100%;min-height:48px;margin-top:var(--s2)}
.auth-switch{margin:var(--s4) 0 0;font-size:14.5px;line-height:1.5;color:var(--ink-500)}
.auth-switch a{color:var(--link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
.auth-escape{margin:var(--s3) 0 0;padding-top:var(--s3);border-top:var(--rule);font-size:13.5px}
.auth-form .issues{margin:0 0 var(--s4)}
@media (max-width:820px){
  .auth{grid-template-columns:minmax(0,1fr);max-width:520px}
  .auth-copy{padding:var(--s5) var(--s5) var(--s4)}
  .auth-copy h1{font-size:var(--t-h1-utility)}
  .auth-copy .lede{max-width:56ch}
  .auth-copy .auth-trust{display:none}
  .auth-form{padding:var(--s5)}
}

/* ---------- small screens ---------- */
@media (max-width:600px){
  .card{padding:var(--s4)}
}

/* ---------- sources / credibility block (guide pages) ---------- */
.sources{margin-top:var(--s7);padding-top:var(--s5);border-top:var(--rule)}
.sources ul{margin:var(--s3) 0 0;padding-left:1.2rem}
.sources li{margin-bottom:var(--s2);font-size:14.5px;color:var(--ink-500)}
.sources li a{color:var(--link)}
.sources .note{margin-top:var(--s3)}

/* ---------- legal doc HTML pages (extracted from the PDF build-source) ---------- */
.legal-doc .section-head{margin:var(--s6) 0 var(--s3);font-size:var(--t-h2)}
.legal-doc .section-head:first-child{margin-top:var(--s4)}
.legal-doc .section-head .num{display:inline-block;min-width:1.6em;color:var(--ink-400);font-weight:400}
.legal-doc .clause{margin:0 0 var(--s2);padding-left:3.4em;text-indent:-3.4em}
.legal-doc .clause .ref{display:inline-block;min-width:3.4em;color:var(--ink-400);font-variant-numeric:tabular-nums}
.legal-doc .clause .text{color:var(--ink-700)}
.legal-doc .defined{font-weight:600;color:var(--ink-900)}
.legal-doc .sub-head{margin:var(--s4) 0 var(--s2);font-weight:600;color:var(--ink-900)}
.legal-doc .caps{text-transform:uppercase;letter-spacing:.05em;font-weight:600;color:var(--ink-900)}
.legal-doc .callout{border-left:4px solid var(--accent);background:var(--accent-soft);padding:var(--s3) var(--s4);margin:var(--s3) 0}

/* ---------- post-download handoff (tool page) ---------- */
/* Same accent-bar treatment as the dashboard's upsell card, so "save this crew"
   reads as one system on both pages. */
.handoff{margin-top:var(--s5);border-left:4px solid var(--accent)}
.handoff h2{margin-top:0}
.handoff .toolbar{margin-bottom:0}

/* ---------- load-back picker (tool page, paid) ---------- */
dialog#loadpicker{border:1px solid var(--rule,#1f4e79);border-left:4px solid var(--accent);
  max-width:30em;width:calc(100% - 2em);padding:var(--s4)}
dialog#loadpicker::backdrop{background:rgba(10,14,26,.45)}
.loadlist{list-style:none;margin:var(--s3) 0;padding:0}
.loadlist li{margin:0 0 var(--s2)}