/* Cost2Hire — site styles
   Design language: an instrument, not a statement. The product's thesis is the gap between the
   offer and the cost, so the figures carry the page: monospace tabular numerals as the type voice,
   the total set large enough to be the first thing read, statutory layers rendered as weight rather
   than decoration. Calm ink on ledger paper; one deep-teal accent means "sourced and verified";
   one amber accent means "the money above the salary" — the thing the page exists to reveal.
   No third-party font requests: a calculator route may never load a vendor asset (see route_policy). */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }

:root {
  --ink: #0E1720;
  --ink-2: #33424F;
  --muted: #59656F;   /* WCAG AA on --paper: v1.7.0 shipped #6A7885 at 4.37:1 and failed axe */
  --paper: #FBFBF9;
  --card: #FFFFFF;
  --rule: #E3E7EB;
  --rule-2: #F0F2F4;
  --base: #41525F;
  --accent: #0A6B5C;
  --accent-ink: #063F36;
  --accent-soft: #E9F2EF;
  --gap: #9A5B12;
  --gap-soft: #FDF6EC;
  --gap-rule: #F0E0C8;
  --warn: #855400;
  --warn-soft: #FBF3E1;
  --focus: #1668D6;
  --figure: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --maxw: 1120px;
}
body { font-family: var(--sans); color: var(--ink); background: var(--paper); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--accent); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
h1, h2, h3 { letter-spacing: -0.025em; }

.skip-link { position: absolute; left: -9999px; background: var(--ink); color: #fff; padding: .6rem 1rem; border-radius: 0 0 6px 0; text-decoration: none; z-index: 9; }
.skip-link:focus { left: 0; top: 0; }

/* ---------- header ---------- */
.site-header { max-width: var(--maxw); margin: 0 auto; padding: .85rem 1.25rem; display: flex; align-items: center; gap: 1.5rem; border-bottom: 1px solid var(--rule); flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--ink); margin-right: auto; }
.brand-mark { width: 30px; height: 30px; border-radius: 7px; background: var(--ink); color: #fff; display: grid; place-items: center; font-family: var(--figure); font-weight: 700; font-size: .9rem; letter-spacing: -.04em; flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name { font-weight: 680; font-size: 1.05rem; letter-spacing: -.02em; }
.brand-sub { color: var(--muted); font-size: .76rem; letter-spacing: .01em; }
.site-nav { display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; font-size: .88rem; }
.site-nav a { color: var(--ink-2); text-decoration: none; padding: .15rem 0; border-bottom: 2px solid transparent; }
.site-nav a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.site-nav a[aria-current="page"] { color: var(--ink); font-weight: 620; border-bottom-color: var(--ink); }

/* ---------- layout ---------- */
.page { max-width: var(--maxw); margin: 0 auto; padding: 1.6rem 1.25rem 2.5rem; display: grid; grid-template-columns: 310px 1fr; gap: 1.25rem; align-items: start; }
@media (max-width: 900px) { .page { grid-template-columns: 1fr; gap: 1.1rem; } }
main { min-width: 0; }

/* ---------- controls ---------- */
.controls { background: var(--card); border: 1px solid var(--rule); border-radius: 12px; padding: 1.15rem; position: sticky; top: 1rem; }
@media (max-width: 900px) { .controls { position: static; } }
.controls-title { font-family: var(--figure); font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin-bottom: .9rem; }
.fields { display: grid; gap: .9rem; }
.field label, .field-check label { display: block; font-size: .82rem; font-weight: 620; color: var(--ink-2); margin-bottom: .3rem; }
/* .field-input is a WRAPPER <div>; the real control lives inside it. v1.7.0 styled only the
   wrapper, leaving a browser-default input floating inside a styled box. */
.field-input, .field select { display: flex; align-items: center; gap: .4rem; width: 100%; padding: .5rem .7rem; border: 1px solid var(--rule); border-radius: 8px; background: var(--paper); color: var(--ink); }
.field-input:focus-within { border-color: var(--focus); outline: 2px solid var(--focus); outline-offset: 1px; }
.field-input input, .field-input select { flex: 1 1 auto; width: 100%; min-width: 0; border: 0; outline: 0; padding: 0; background: transparent; color: inherit; font-family: var(--figure); font-size: 1.02rem; font-weight: 600; }
.field select { font-family: var(--sans); font-weight: 600; font-size: .95rem; }
.field-prefix { flex: none; order: -1; font-family: var(--figure); color: var(--muted); font-size: .82rem; letter-spacing: .04em; }
.field-help, .field-hint { font-size: .76rem; color: var(--muted); margin-top: .3rem; line-height: 1.45; }
.field-check { display: flex; align-items: center; gap: .5rem; }
.field-check label { margin: 0; }
.controls-advanced summary { cursor: pointer; font-size: .82rem; font-weight: 620; color: var(--accent-ink); padding: .3rem 0; }
.controls-advanced[open] summary { margin-bottom: .7rem; }
.controls-note { font-size: .76rem; color: var(--muted); margin-top: .9rem; line-height: 1.5; padding-top: .8rem; border-top: 1px solid var(--rule-2); }
.controls-error { background: var(--warn-soft); border: 1px solid #EBD9A8; color: var(--warn); border-radius: 8px; padding: .5rem .7rem; font-size: .82rem; margin-top: .7rem; }

/* ---------- result: the instrument ---------- */
.result-hero { background: var(--card); border: 1px solid var(--rule); border-radius: 12px; padding: 1.35rem 1.35rem 1.2rem; }
.eyebrow { font-family: var(--figure); font-size: .7rem; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); margin-bottom: .6rem; }
.hero-cost { font-family: var(--figure); font-size: clamp(2rem, 5.2vw, 2.9rem); font-weight: 700; letter-spacing: -.035em; line-height: 1.05; color: var(--ink); }
.hero-delta { margin-top: .55rem; display: inline-flex; align-items: baseline; gap: .45rem; background: var(--gap-soft); border: 1px solid var(--gap-rule); color: var(--gap); border-radius: 99px; padding: .22rem .7rem; font-size: .85rem; font-weight: 620; }
.hero-base { color: var(--muted); font-size: .88rem; margin-top: .5rem; font-family: var(--figure); }
h1 { font-size: clamp(1.4rem, 3vw, 1.85rem); font-weight: 700; margin-bottom: .5rem; line-height: 1.15; }
h2 { font-size: 1.28rem; font-weight: 680; margin: 2rem 0 .5rem; }
h3 { font-size: .98rem; font-weight: 660; margin: 0 0 .4rem; }
main > p, .band-sub, .notes p { color: var(--ink-2); margin-bottom: .7rem; }

.trust { background: var(--accent-soft); border: 1px solid #CFE3DD; border-radius: 9px; padding: .7rem .85rem; font-size: .84rem; color: var(--accent-ink); margin: .9rem 0 0; }
.proof { display: flex; flex-wrap: wrap; gap: .4rem .9rem; margin-top: .9rem; font-size: .8rem; color: var(--muted); }
.caveat { background: var(--warn-soft); border: 1px solid #EBD9A8; border-left: 3px solid var(--warn); border-radius: 8px; padding: .7rem .85rem; font-size: .85rem; color: var(--warn); margin: .9rem 0; }

table { width: 100%; border-collapse: collapse; margin: .9rem 0; }
caption { text-align: left; font-size: .8rem; color: var(--muted); margin-bottom: .4rem; }
th, td { text-align: left; padding: .5rem .3rem; border-bottom: 1px solid var(--rule-2); font-size: .88rem; }
th { font-family: var(--figure); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
td:last-child, th:last-child { text-align: right; font-family: var(--figure); font-weight: 620; font-variant-numeric: tabular-nums; }
.excluded td { color: var(--muted); }
.excluded td:last-child { font-weight: 500; }

/* ---------- hub bands ---------- */
.hub-band { margin-top: 2.2rem; padding-top: 1.6rem; border-top: 1px solid var(--rule); }
.band-sub { font-size: .93rem; }
.band-note { font-size: .85rem; color: var(--muted); margin-top: .9rem; background: var(--warn-soft); border: 1px solid #EBD9A8; border-radius: 8px; padding: .6rem .8rem; }
.c-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; margin-top: 1.1rem; }
@media (max-width: 860px) { .c-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .c-cards { grid-template-columns: 1fr; } }
.c-card { display: flex; flex-direction: column; border: 1px solid var(--rule); border-radius: 11px; padding: .95rem; background: var(--card); text-decoration: none; color: inherit; transition: border-color .12s, transform .12s; }
.c-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.c-name { font-family: var(--figure); font-size: .7rem; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.c-mult { font-family: var(--figure); font-size: 1.7rem; font-weight: 700; letter-spacing: -.03em; margin-top: .4rem; line-height: 1; color: var(--ink); }
.c-lbl { font-size: .8rem; color: var(--ink-2); margin-top: .25rem; }
.c-bar {
  display: block;
  width: 100%;
  height: 5px;
  margin-top: .75rem;
  border: 0;
  border-radius: 99px;
  overflow: hidden;
  appearance: none;
  -webkit-appearance: none;
  background: var(--rule);
}
.c-bar::-webkit-progress-bar { background: var(--rule); border-radius: 99px; }
.c-bar::-webkit-progress-value { background: var(--accent); border-radius: 99px; }
.c-bar::-moz-progress-bar { background: var(--accent); border-radius: 99px; }
.c-note { font-size: .75rem; color: var(--muted); margin-top: .55rem; }
/* A card whose jurisdiction needs an employer-specific rate. It deliberately carries no bar: an
   absent rate is not a small measured value, and a short bar would read as one. On --warn-soft the
   text colours measure --warn 5.82:1, --muted 5.41:1 and --ink-2 9.35:1, all above the 4.5:1 AA
   threshold the palette above was corrected to meet. */
.c-card-input { border-style: dashed; background: var(--warn-soft); }
.c-mult-input { font-size: 1.05rem; letter-spacing: 0; color: var(--warn); }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: .8rem; }
@media (max-width: 720px) { .two-col { grid-template-columns: 1fr; gap: 1.1rem; } }
.ticks li { position: relative; padding-left: 1.3rem; margin-bottom: .45rem; font-size: .88rem; color: var(--ink-2); }
.ticks li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
.ticks.minus li::before { content: "—"; color: var(--muted); }

.next-steps ul { display: grid; gap: .4rem; margin-top: .6rem; }
.next-steps a { color: var(--accent-ink); font-weight: 560; }
.faq { margin-top: 1rem; }
.faq h3 { margin-top: 1rem; }
.notes, .governing, .methodology { font-size: .84rem; color: var(--muted); margin-top: 1rem; line-height: 1.55; }
.copy-summary { font-family: var(--figure); font-size: .78rem; background: var(--card); border: 1px solid var(--rule); border-radius: 9px; padding: .8rem; color: var(--ink-2); margin-top: .6rem; max-width: 100%; overflow: hidden; }
/* The nested <pre> keeps its browser default (white-space: pre), which produced a >1000px line
   and horizontal scroll at 390px. Wrap it explicitly. */
.copy-summary pre { white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; max-width: 100%; margin: 0; font: inherit; }
html, body { overflow-x: hidden; }
img, svg, table { max-width: 100%; }
.check { color: var(--accent); font-weight: 700; }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--rule); background: var(--card); padding: 2rem 1.25rem 2.4rem; margin-top: 1.5rem; }
.site-footer > * { max-width: var(--maxw); margin-left: auto; margin-right: auto; }
.legal-nav { display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; font-size: .86rem; padding-bottom: 1rem; border-bottom: 1px solid var(--rule-2); }
.legal-nav a { color: var(--ink-2); text-decoration: none; }
.legal-nav a:hover { color: var(--accent); text-decoration: underline; }
.footer-note { font-size: .88rem; color: var(--ink-2); margin-top: 1rem; max-width: 62ch; }
.footer-fine { font-size: .79rem; color: var(--muted); margin-top: .8rem; line-height: 1.65; max-width: 82ch; }
.footer-fine strong { color: var(--ink-2); font-weight: 620; }
.footer-cprt { font-size: .79rem; color: var(--muted); margin-top: .9rem; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------- decision metrics + cost stack ---------- */
.hero-headline { font-size: clamp(1.25rem, 2.6vw, 1.6rem); font-weight: 660; letter-spacing: -.02em; line-height: 1.25; margin-bottom: .5rem; }
.hero-headline .hero-cost { font-family: var(--figure); color: var(--gap); font-weight: 700; letter-spacing: -.03em; }
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; margin: 1rem 0 .2rem; padding-top: .9rem; border-top: 1px solid var(--rule-2); }
@media (max-width: 720px) { .metrics { grid-template-columns: repeat(2, 1fr); } }
.metrics div { min-width: 0; }
.metrics dt { font-size: .72rem; color: var(--muted); letter-spacing: .01em; }
.metrics dd { margin: .15rem 0 0; font-family: var(--figure); font-size: 1.02rem; font-weight: 700; letter-spacing: -.02em; color: var(--ink); overflow-wrap: anywhere; }
.stack { display: block; width: 100%; height: 34px; border-radius: 7px; overflow: hidden; border: 1px solid var(--rule); margin-top: 1rem; }
.stack rect { shape-rendering: crispEdges; }
.s-base { background: var(--base); fill: var(--base); }
.s-stat.s1 { background: var(--accent); fill: var(--accent); } .s-stat.s2 { background: #2E8C7A; fill: #2E8C7A; }
.s-stat.s3 { background: #63AE9E; fill: #63AE9E; } .s-stat.s4 { background: #A5CFC5; fill: #A5CFC5; }
.s-assum { background: var(--gap); fill: var(--gap); }
.stack-key { display: flex; flex-wrap: wrap; gap: .35rem 1rem; margin-top: .7rem; }
.stack-key li { display: inline-flex; align-items: center; gap: .4rem; font-size: .78rem; color: var(--ink-2); }
.stack-key .dot { width: 9px; height: 9px; border-radius: 2px; flex: none; display: inline-block; }