/* Jobchit site styles. Tokens and components ported from the mockups (theme.css, ds/jobchit/components/bundle.css)
   and docs/DESIGN.md. Light by default; dark follows prefers-color-scheme. */

@font-face { font-family: "Public Sans"; font-style: normal; font-display: swap; font-weight: 400; src: url(../fonts/public-sans-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Public Sans"; font-style: normal; font-display: swap; font-weight: 500; src: url(../fonts/public-sans-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Public Sans"; font-style: normal; font-display: swap; font-weight: 600; src: url(../fonts/public-sans-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Public Sans"; font-style: normal; font-display: swap; font-weight: 700; src: url(../fonts/public-sans-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "Public Sans"; font-style: normal; font-display: swap; font-weight: 800; src: url(../fonts/public-sans-latin-800-normal.woff2) format("woff2"); }

:root {
  color-scheme: light;
  --ground: #f9fafb; --paper: #ffffff; --ink: #111827; --ink-2: #4b5563; --ink-3: #6b7280;
  --line: #e5e7eb; --edge: #8a919c; --accent: #f5c400; --accent-hover: #e6b800; --on-accent: #111827;
  --signed: #15803d; --signed-bg: #ecfdf3; --declined: #b91c1c; --declined-bg: #fef2f2; --waiting: #8a5a00; --waiting-bg: #fff8db;
  --selection: #fde58a;
  --shadow-sm: 0 1px 2px rgba(17,24,39,.06), 0 1px 3px rgba(17,24,39,.08);
  --shadow-lg: 0 24px 48px -12px rgba(17,24,39,.18), 0 2px 6px rgba(17,24,39,.05);
  --shadow-bar: 0 -1px 0 var(--line), 0 -8px 24px rgba(17,24,39,.06);
  --font-sans: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px;
  --radius-md: 6px; --radius-lg: 10px; --radius-pill: 999px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  /* Dark mode is one surface down the page; light mode alternates gray bands and white. */
  --page: var(--paper); --band-low: var(--paper); --final: var(--ground);
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --ground: #0b0d10; --paper: #15181d; --ink: #f3f4f6; --ink-2: #b4bac4; --ink-3: #9aa1ac;
    --line: #262b33; --edge: #6b7380; --accent-hover: #ffd633;
    --signed: #4ade80; --signed-bg: #0f2a1a; --declined: #f87171; --declined-bg: #2c1212; --waiting: #f5c400; --waiting-bg: #2a2205;
    --selection: #5c4a00;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --shadow-lg: 0 24px 48px -12px rgba(0,0,0,.6), 0 0 0 1px #262b33;
    --page: var(--ground); --band-low: var(--ground); --final: var(--paper);
  }
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--page); color: var(--ink); font: 400 16px/24px var(--font-sans); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
a { color: var(--ink); text-underline-offset: 3px; }
::selection { background: var(--selection); color: var(--ink); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
main:focus { outline: none; }
[hidden] { display: none !important; }
.jc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -100px; z-index: 10; padding: 10px 16px; background: var(--paper); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); }
.skip:focus { top: 16px; }
.jc-icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.jc-label { font: 600 12px/16px var(--font-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.center { text-align: center; }

/* Buttons: white with a soft shadow; primary is the one yellow fill */
.jc-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--paper); color: var(--ink); box-shadow: var(--shadow-sm); font: 600 15px/1 var(--font-sans); white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color 150ms cubic-bezier(.16,1,.3,1), border-color 150ms cubic-bezier(.16,1,.3,1); }
.jc-btn:hover { background: var(--ground); border-color: var(--edge); }
.jc-btn:active { background: var(--line); }
a.jc-btn--primary, .jc-btn--primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.jc-btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.jc-btn--quiet { border-color: transparent; background: transparent; box-shadow: none; color: var(--ink-2); padding: 0 var(--space-2); }
.jc-btn--block { width: 100%; }
.jc-btn--big { min-height: 52px; font-size: 18px; }
.jc-btn[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* Card, rows, badges, signature, totals (product shots and demos) */
.jc-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.jc-card__band { padding: var(--space-4); border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.jc-card__no { margin: 0; font: 700 20px/28px var(--font-sans); letter-spacing: -0.01em; }
.jc-card__meta { font-size: 14px; line-height: 20px; color: var(--ink-3); }
.jc-cells { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.jc-cell { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); display: grid; gap: 2px; min-width: 0; }
.jc-cell__label { font: 500 13px/18px var(--font-sans); color: var(--ink-3); }
.jc-cell__value { font: 500 16px/24px var(--font-sans); }
.jc-stages { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); }
.jc-stages--bare { padding: 0; border: 0; }
.jc-stage { padding-top: 10px; border-top: 3px solid var(--line); font: 500 12px/16px var(--font-sans); color: var(--ink-3); }
.jc-stage--done { border-top-color: var(--ink-3); color: var(--ink-2); }
.jc-stage--now { border-top-color: var(--ink); color: var(--ink); font-weight: 600; }
.jc-row { display: grid; grid-template-columns: 2.5ch 1fr auto; gap: 2px var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); align-items: start; text-align: left; }
.jc-row--last { border-bottom: 0; }
.jc-row__no { font: 500 14px/24px var(--font-sans); color: var(--ink-3); }
.jc-row__title { font: 600 16px/24px var(--font-sans); }
.jc-row__note { grid-column: 2; font-size: 14px; line-height: 20px; color: var(--ink-3); }
.jc-row__amt { font: 500 16px/24px var(--font-sans); text-align: right; }
.jc-row__sig { grid-column: 2 / 4; margin-top: 6px; }
.jc-stamp { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px 2px 8px; border-radius: var(--radius-pill); font: 600 13px/20px var(--font-sans); white-space: nowrap; }
.jc-stamp .jc-icon { width: 14px; height: 14px; stroke-width: 2.25; }
.jc-stamp--draft { color: var(--ink-2); background: var(--ground); box-shadow: inset 0 0 0 1px var(--line); }
.jc-stamp--waiting { color: var(--waiting); background: var(--waiting-bg); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent); }
.jc-stamp--signed { color: var(--signed); background: var(--signed-bg); }
.jc-stamp--declined { color: var(--declined); background: var(--declined-bg); }
.jc-sig { display: grid; gap: var(--space-2); }
.jc-sig .jc-stamp { justify-self: start; }
.jc-sig__pad { position: relative; display: block; height: 160px; border: 1px solid var(--edge); border-radius: var(--radius-lg); background: var(--paper); }
.jc-sig__pad::before { content: "×"; position: absolute; left: var(--space-4); bottom: 30px; font: 500 20px/1 var(--font-sans); color: var(--ink-3); }
.jc-sig__pad::after { content: ""; position: absolute; left: 40px; right: var(--space-4); bottom: 36px; border-bottom: 1px solid var(--line); }
.jc-sig__pad svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.jc-sig__stroke { fill: none; stroke: var(--ink); stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
.jc-sig__record { display: grid; grid-template-columns: auto 1fr; gap: 0 var(--space-3); font-size: 13px; line-height: 20px; color: var(--ink-3); }
.jc-sig__record > :nth-child(even) { color: var(--ink-2); overflow-wrap: anywhere; }
.jc-total { display: grid; grid-template-columns: 1fr auto; gap: 6px 0; margin: 0; padding: var(--space-4); text-align: left; }
.jc-total dt, .jc-total__dt { font-size: 16px; line-height: 24px; color: var(--ink-3); }
.jc-total dd, .jc-total__dd { margin: 0; padding-left: var(--space-4); text-align: right; font: 500 16px/24px var(--font-sans); }
.jc-total .jc-total__sum { display: flex; align-items: flex-end; border-top: 1px solid var(--line); padding-top: var(--space-3); margin-top: var(--space-2); }
.jc-total dt.jc-total__sum, .jc-total__dt.jc-total__sum { color: var(--ink); font-weight: 600; }
.jc-total dd.jc-total__sum, .jc-total__dd.jc-total__sum { justify-content: flex-end; font: 700 28px/32px var(--font-sans); letter-spacing: -0.02em; }
.jc-total__wide { grid-column: 1 / 3; }
.jc-bar { display: flex; gap: var(--space-2); padding: var(--space-3) var(--space-4); background: var(--paper); box-shadow: var(--shadow-bar); }
.jc-bar > * { flex: 1; }

/* Layout */
.wrap { max-width: 1136px; margin: 0 auto; padding: 0 24px; }
.site-head { background: var(--ground); }
.nav { display: flex; align-items: center; gap: 40px; height: 104px; }
.logo { display: flex; align-items: center; gap: 10px; margin-right: auto; text-decoration: none; font: 700 24px/1 var(--font-sans); letter-spacing: -0.02em; }
.logo__stub { fill: var(--ink); }
.logo__sig { fill: none; stroke: var(--paper); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.logo--sm { font-size: 18px; margin-right: 8px; }
.nav__links { display: flex; gap: 40px; font-size: 18px; }
.nav__links a, .nav__small { color: var(--ink-2); text-decoration: none; }
.nav__links a:hover, .nav__small:hover, .nav__links a[aria-current] { color: var(--ink); }
.nav__links a[aria-current] { font-weight: 600; }
.nav__right { display: flex; align-items: center; gap: 28px; font-size: 18px; }
.nav__small { display: none; }

/* Gray band with the still blueprint grid: minor lines every 24px, major every 120px. It fades in below the nav,
   out at the bottom, and dims behind the headline so text keeps AA contrast. No yellow in it. */
.band { position: relative; isolation: isolate; background: var(--ground); }
.band::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  --minor: color-mix(in srgb, var(--ink) 4.5%, transparent); --major: color-mix(in srgb, var(--ink) 7.5%, transparent);
  background-image: linear-gradient(var(--major) 1px, transparent 1px), linear-gradient(90deg, var(--major) 1px, transparent 1px), linear-gradient(var(--minor) 1px, transparent 1px), linear-gradient(90deg, var(--minor) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px; background-position: 50% -104px;
  -webkit-mask-image: linear-gradient(transparent 0, #000 116px, #000 calc(100% - 160px), transparent), radial-gradient(ellipse 560px 240px at 50% 45%, rgba(0,0,0,.3), #000);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(transparent 0, #000 116px, #000 calc(100% - 160px), transparent), radial-gradient(ellipse 560px 240px at 50% 45%, rgba(0,0,0,.3), #000);
  mask-composite: intersect; }
.hero { text-align: center; padding-top: 88px; padding-bottom: 88px; }
.hero--page { padding-top: 56px; padding-bottom: 72px; }
.h1 { margin: 0 auto; max-width: 18ch; font: 800 clamp(30px, 3.4vw, 52px)/1.02 var(--font-sans); letter-spacing: -0.03em; text-wrap: balance; }
.hero--page .h1 { max-width: 22ch; }
.sub { max-width: 760px; margin: 28px auto 0; font-size: 20px; line-height: 30px; color: var(--ink-3); text-wrap: pretty; }
.ctas { display: flex; justify-content: center; gap: 12px; margin-top: 36px; }
.ctas .jc-btn { min-height: 58px; padding: 0 32px; font-size: 18px; font-weight: 600; }
.trial { margin: 18px 0 0; font-size: 14px; color: var(--ink-2); text-wrap: balance; }
@media (prefers-color-scheme: dark) { .key { color: var(--accent); } }

.shotband { background: linear-gradient(var(--ground) 50%, var(--band-low) 50%); padding-top: 16px; }
.shot { position: relative; }
.frame { margin: 0; background: var(--paper); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; }
.frame__bar { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px; background: var(--ground); border-bottom: 1px solid var(--line); }
.frame__bar i { width: 11px; height: 11px; border-radius: 50%; background: var(--line); }
.frame__url { margin: 0 auto; font-size: 14px; color: var(--ink-3); }

.sec { padding-top: 128px; text-align: center; }
.sec--tight { padding-top: 56px; text-align: left; }
.sec--narrow { max-width: 768px; text-align: left; }
.sec--narrow .h2 { text-align: center; }
.h2 { margin: 0; font: 700 30px/36px var(--font-sans); letter-spacing: -0.02em; }
.h2--sm { font-size: 24px; line-height: 32px; }
.lead { max-width: 720px; margin: 16px auto 0; font-size: 18px; line-height: 28px; color: var(--ink-3); text-wrap: pretty; }
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 56px 40px; margin: 64px 0 0; padding: 0; list-style: none; text-align: left; }
.grid li { display: grid; grid-template-columns: 20px 1fr; gap: 6px 12px; }
.grid svg { width: 20px; height: 20px; margin-top: 3px; stroke: var(--ink); stroke-width: 1.75; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.grid h3 { margin: 0; font: 600 18px/26px var(--font-sans); }
.grid p { grid-column: 2; margin: 0; font-size: 16px; line-height: 24px; color: var(--ink-3); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; text-align: left; align-items: start; }
.split .lead { margin-left: 0; }
.demo { margin: 0; }
.say { margin: 0; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--ground); font-size: 16px; line-height: 24px; color: var(--ink-2); }
.faq { display: grid; gap: 28px; margin: 24px 0 0; }
.sec--narrow .faq { margin-top: 40px; }
.faq dt { font: 600 18px/26px var(--font-sans); }
.faq dd { max-width: 68ch; margin: 6px 0 0; font-size: 16px; line-height: 26px; color: var(--ink-3); }
.faq a, .lead a, .tpl-note a, .prose a { color: var(--ink); }
.price-card { padding: 32px; }
.price-card__name { margin: 0; font: 600 18px/28px var(--font-sans); }
.price { margin: 12px 0 0; font: 800 56px/1 var(--font-sans); letter-spacing: -0.03em; }
.price__unit { font-size: 18px; font-weight: 500; letter-spacing: 0; color: var(--ink-3); }
.price-card__note { margin: 12px 0 24px; font-size: 16px; line-height: 26px; color: var(--ink-2); }
.price-card__small { margin: 12px 0 0; font-size: 14px; color: var(--ink-3); text-align: center; }
.price-card__small a { color: var(--ink-2); }

.final { margin: 128px 0 0; padding: 72px 24px; background: var(--final); text-align: center; scroll-margin-top: 24px; }
.final .wrap { padding: 0; }
/* Tally draws the form on white in both themes, so the card stays white too. */
.form-card { max-width: 560px; margin: 32px auto 0; padding: 16px 20px; border-radius: var(--radius-lg); background: #fff; color-scheme: light; }
.form-card iframe { display: block; border: 0; }
.form-alt { margin: 16px 0 0; font-size: 16px; color: var(--ink-2); }

.foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; padding-block: 40px; font-size: 16px; color: var(--ink-3); }
.foot a { color: var(--ink-2); text-decoration: none; }
.foot a:hover { color: var(--ink); text-decoration: underline; }
.foot small { margin-left: auto; font-size: 14px; }

/* Pricing */
.plan-wrap { background: linear-gradient(var(--ground) 120px, var(--band-low) 120px); padding: 0 24px; }
.plan { max-width: 480px; margin: 0 auto; box-shadow: var(--shadow-lg); }
.plan__toggle { display: flex; gap: 8px; padding: 20px 24px 0; }
.plan__toggle .jc-btn { flex: 1; }
.plan__price { display: flex; flex-direction: column; gap: 6px; padding: 24px; border-bottom: 1px solid var(--line); }
.plan__price .price { margin: 0; }
.plan__note { margin: 0; color: var(--ink-3); }
.plan__list { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 20px 24px; list-style: none; font-size: 15px; line-height: 24px; }
.plan__list li { display: flex; gap: 12px; }
.plan__list .jc-icon { margin-top: 2px; }
.plan__cta { padding: 0 24px 24px; }
.sec--narrow + .final, .plan-wrap + .sec { padding-bottom: 0; }

/* Laptop product shot (mockup board Desk) */
.desk { display: grid; grid-template-columns: 208px 312px 1fr; height: 640px; overflow: hidden; background: var(--paper); text-align: left; }
.desk__side { display: flex; flex-direction: column; gap: 2px; padding: 20px 12px; background: var(--ground); border-right: 1px solid var(--line); font-size: 14px; }
.desk__brand { display: flex; align-items: center; gap: 8px; padding: 0 8px 20px; font: 700 18px/1 var(--font-sans); letter-spacing: -0.02em; }
.desk__nav { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 8px; border-radius: 6px; color: var(--ink-2); }
.desk__nav .jc-icon { width: 18px; height: 18px; }
.desk__nav--now { background: var(--paper); box-shadow: var(--shadow-sm); color: var(--ink); font-weight: 600; }
.desk__plan { margin: auto 8px 0; font-size: 13px; line-height: 18px; color: var(--ink-3); }
.desk__list { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); }
.desk__search { display: flex; gap: 8px; padding: 16px; border-bottom: 1px solid var(--line); }
.desk__input { flex: 1; display: flex; align-items: center; min-height: 44px; padding: 6px 10px; border: 1px solid var(--edge); border-radius: var(--radius-md); font-size: 14px; color: var(--ink-3); }
.desk__new { padding: 0 10px; }
.desk__group { padding: 14px 16px 6px; }
.desk__group + .desk__job + .desk__group { padding-top: 18px; }
.desk__job { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.desk__job--now { background: var(--ground); border-bottom: 0; }
.desk__jobname { grid-column: 1 / 3; font-weight: 600; font-size: 14px; }
.desk__job--now .desk__jobname { grid-column: 1; }
.desk__addr { font-size: 13px; color: var(--ink-3); }
.desk__amt { font-size: 14px; font-weight: 500; }
.desk__badge { grid-column: 1 / 3; margin-top: 4px; }
.desk__badge .jc-stamp { font-size: 12px; line-height: 18px; }
.desk__pane { display: flex; flex-direction: column; gap: 16px; min-height: 0; padding: 24px 28px; overflow: hidden; }
.desk__head { display: flex; align-items: flex-start; gap: 12px; }
.desk__title { display: flex; flex-direction: column; margin-right: auto; }
.desk__h { font: 700 24px/30px var(--font-sans); letter-spacing: -0.02em; }
.desk__meta { margin-top: 2px; font-size: 14px; color: var(--ink-3); }
.desk__btn { font-size: 14px; }
.desk__btn .jc-icon { width: 18px; height: 18px; }
.desk__totals { display: grid; grid-template-columns: repeat(3, 1fr); }
.desk__totals > div { display: flex; flex-direction: column; padding: 12px 16px; }
.desk__totals > div + div { border-left: 1px solid var(--line); }
.desk__totals--now { background: var(--ground); }
.desk__totals--now .jc-label { color: var(--ink); }
.desk__fig { margin-top: 4px; font: 600 20px/28px var(--font-sans); letter-spacing: -0.01em; }
.desk__totals--now .desk__fig { font-weight: 700; }
.desk__note { display: block; padding: 8px 16px; border-top: 1px solid var(--line); font-size: 13px; line-height: 18px; color: var(--ink-3); }
.desk__cardhead { display: block; padding: 12px 16px; border-bottom: 1px solid var(--line); font: 600 14px/20px var(--font-sans); }

/* Phone product shot (mockup board JobRecord), shown below 760px */
.phone { display: none; flex-direction: column; width: 100%; max-width: 375px; margin: 0 auto; overflow: hidden; border: 1px solid var(--line); border-radius: 24px; background: var(--ground); box-shadow: var(--shadow-lg); text-align: left; }
.phone__top { display: flex; align-items: center; height: 56px; padding: 0 8px; background: var(--paper); border-bottom: 1px solid var(--line); }
.phone__body { display: flex; flex-direction: column; gap: 16px; padding: 16px; }
.phone__body > .jc-label { margin-bottom: -8px; }

/* Templates */
.tpl-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 0; padding: 0; list-style: none; }
.tpl-card { display: flex; flex-direction: column; gap: 8px; padding: 24px; }
.tpl-card__title { margin: 0; font: 700 20px/28px var(--font-sans); }
.tpl-card__title a { text-decoration: none; }
.tpl-card__title a::after { content: ""; position: absolute; inset: 0; }
.tpl-card { position: relative; }
.tpl-card:hover { border-color: var(--edge); }
.tpl-card p { margin: 0; color: var(--ink-2); }
.tpl-card__meta { margin-top: auto; padding-top: 8px; font-size: 14px; color: var(--ink-3); }
.tpl-note { margin: 32px 0 0; color: var(--ink-2); }
.tpl-actions { display: flex; justify-content: center; gap: 12px; margin-bottom: 24px; }
.tpl-after { max-width: 816px; margin: 48px auto 0; }
.tpl-tips { margin: 16px 0 0; padding-left: 20px; color: var(--ink-2); line-height: 26px; }
.tpl-tips li + li { margin-top: 6px; }

/* The printable sheet: US Letter proportions, black on white when printed */
.sheet { max-width: 816px; margin: 0 auto; padding: 40px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.sheet__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; padding-bottom: 12px; border-bottom: 2px solid var(--ink); }
.sheet__title { margin: 0; font: 800 30px/36px var(--font-sans); letter-spacing: -0.02em; }
.sheet__no { display: grid; gap: 4px; min-width: 180px; }
.sheet__sec { margin-top: 20px; }
.sheet__h { margin: 0 0 10px; font: 700 12px/16px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.fields { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 24px; }
.fields--3 { grid-template-columns: repeat(3, 1fr); }
.f { display: grid; gap: 2px; align-content: end; }
.f--wide { grid-column: 1 / -1; }
.f__label { font: 500 13px/18px var(--font-sans); color: var(--ink-2); }
.f__line { display: block; height: 30px; border-bottom: 1px solid var(--edge); }
.f__line--short { height: 26px; }
.f__line--money { position: relative; }
.f__line--money::before { content: "$"; position: absolute; left: 0; bottom: 4px; color: var(--ink-2); }
.f--strong .f__label { color: var(--ink); font-weight: 700; }
.f--strong .f__line { border-bottom-width: 2px; border-bottom-color: var(--ink); }
.f--tall .f__line { height: 150px; border-bottom: 1px solid var(--edge); background: linear-gradient(var(--line) 1px, transparent 1px) 0 29px / 100% 30px; }
.f--short-tall .f__line { height: 120px; }
.sheet__notice { margin: 22px 0 0; padding: 10px 12px; border: 1px solid var(--edge); border-radius: var(--radius-md); font-weight: 600; }
.sigs { display: grid; grid-template-columns: 1fr 160px; gap: 18px 24px; margin-top: 22px; }
.sig { display: grid; gap: 2px; }
.f__line--sig { height: 40px; border-bottom: 1px solid var(--ink); }
.sheet__foot { margin: 24px 0 0; font-size: 12px; line-height: 16px; color: var(--ink-3); }
.items { width: 100%; border-collapse: collapse; font-size: 13px; }
.items th { padding: 6px 8px 6px 0; border-bottom: 2px solid var(--ink); text-align: left; font-weight: 600; color: var(--ink-2); }
.items td { height: 30px; border-bottom: 1px solid var(--edge); }
.items td + td, .items th + th { border-left: 1px solid var(--line); }
.items__n { width: 15%; padding-left: 8px !important; }
.sums { display: grid; gap: 8px; width: 280px; margin: 12px 0 0 auto; }
.sums__row { display: grid; grid-template-columns: 1fr 140px; align-items: end; gap: 12px; }
.sums__row .f__label { text-align: right; }
.sums__row--total .f__label { color: var(--ink); font-weight: 700; }
.sums__row--total .f__line { border-bottom: 2px solid var(--ink); }

/* Requirement pages and prose */
.rule__body, .prose { max-width: 760px; margin: 0 auto; }
.rule__verified { margin: 0 0 32px; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--ground); color: var(--ink-2); }
.rule__summary { margin: 16px 0 0; padding-left: 20px; color: var(--ink-2); line-height: 26px; }
.rule__summary li + li { margin-top: 8px; }
.rule__section { margin-top: 48px; }
.rule__quote { margin: 20px 0 0; }
.rule__quote blockquote { margin: 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--ink); }
.rule__quote blockquote p { margin: 0; font-size: 17px; line-height: 28px; }
.rule__quote figcaption { margin-top: 8px; padding-left: 23px; font-size: 14px; color: var(--ink-3); }
.rule__source { margin: 20px 0 0; font-size: 15px; line-height: 24px; color: var(--ink-2); }
.rule-footer { margin: 48px 0 0; padding-top: 20px; border-top: 1px solid var(--line); font-weight: 600; }
.prose h2 { margin-top: 40px; }
.prose h2:first-child { margin-top: 0; }
.prose p { margin: 12px 0 0; color: var(--ink-2); line-height: 26px; }

@media screen and (max-width: 760px) {
  .nav { height: 64px; gap: 16px; }
  .nav__links, .nav__right .jc-btn { display: none; }
  .nav__small { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; }
  .hero { padding-top: 48px; padding-bottom: 72px; }
  .hero--page { padding-top: 32px; padding-bottom: 56px; }
  .band::before { background-position: 50% -64px; -webkit-mask-image: linear-gradient(transparent 0, #000 100px, #000 calc(100% - 120px), transparent), radial-gradient(ellipse 300px 200px at 50% 45%, rgba(0,0,0,.3), #000); mask-image: linear-gradient(transparent 0, #000 100px, #000 calc(100% - 120px), transparent), radial-gradient(ellipse 300px 200px at 50% 45%, rgba(0,0,0,.3), #000); }
  .sub { margin-top: 18px; font-size: 18px; line-height: 28px; }
  .ctas { flex-direction: column; margin-top: 28px; }
  .shotband { padding-top: 0; }
  .shot--desk { display: none; }
  .phone { display: flex; }
  .sec { padding-top: 88px; }
  .sec--tight { padding-top: 40px; }
  .h2 { font-size: 24px; line-height: 30px; }
  .grid { grid-template-columns: 1fr; gap: 28px; margin-top: 40px; }
  .split { grid-template-columns: 1fr; gap: 40px; }
  .price-card { padding: 24px; }
  .final { margin-top: 88px; padding: 56px 16px; }
  .foot { gap: 0 24px; }
  .foot a { display: inline-flex; align-items: center; min-height: 44px; }
  .foot small { margin-left: 0; width: 100%; padding-top: 8px; }
  .tpl-list { grid-template-columns: 1fr; }
  .tpl-actions { flex-direction: column; }
  .tpl-actions .jc-btn { min-height: 52px; }
  .sheet { padding: 20px; }
  .fields, .fields--3 { grid-template-columns: 1fr; }
  .sigs { grid-template-columns: 1fr 110px; }
  .sums { width: 100%; }
  .sheet__no { min-width: 120px; }
}
@media screen and (min-width: 761px) and (max-width: 1100px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
  .desk { grid-template-columns: 180px 260px 1fr; }
}

/* Landing motion. Hidden start states apply only after site.js adds .lp-motion, so nothing is hidden without JavaScript;
   under reduced motion site.js never adds it. */
@keyframes lp-up { from { opacity: 0; transform: translateY(16px); } }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .lp-home .hero > * { animation: lp-up .7s var(--ease) backwards; }
  .lp-home .hero > :nth-child(2) { animation-delay: 80ms; }
  .lp-home .hero > :nth-child(3) { animation-delay: 160ms; }
  .lp-home .hero > :nth-child(4) { animation-delay: 240ms; }

  .lp-motion [data-reveal][data-in] { transition: opacity .7s var(--ease), transform .7s var(--ease); }
  .lp-motion [data-reveal][data-wait] { opacity: 0; transform: translateY(28px); }
  .lp-motion [data-reveal="shot"][data-in] { transition-duration: 1s; }
  .lp-motion [data-reveal="shot"][data-wait] { transform: translateY(48px) scale(.96); }

  .lp-motion [data-reveal="stagger"][data-wait] { opacity: 1; transform: none; }
  .lp-motion [data-reveal="stagger"][data-in] > li { transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: calc(var(--n, 0) * 60ms); }
  .lp-motion [data-reveal="stagger"][data-wait] > li { opacity: 0; transform: translateY(16px); }

  /* The signature card sits unsigned until it reaches mid-screen; then the stroke draws, the record fills in, the stamp lands. */
  .lp-motion [data-reveal="sign"][data-wait] { opacity: 1; transform: none; }
  .lp-motion [data-reveal="sign"] .jc-sig__stroke { stroke-dasharray: var(--len, 1000); }
  .lp-motion [data-reveal="sign"][data-in] .jc-sig__stroke { transition: stroke-dashoffset 1.3s cubic-bezier(.65, 0, .35, 1) .4s; }
  .lp-motion [data-reveal="sign"][data-wait] .jc-sig__stroke { stroke-dashoffset: var(--len, 1000); }
  .lp-motion [data-reveal="sign"][data-in] .jc-sig__record { transition: opacity .5s ease 1.6s; }
  .lp-motion [data-reveal="sign"][data-in] .jc-stamp { transition: opacity .25s ease 2s, transform .45s cubic-bezier(.3, 1.5, .5, 1) 2s; }
  .lp-motion [data-reveal="sign"][data-wait] .jc-sig__record { opacity: 0; }
  .lp-motion [data-reveal="sign"][data-wait] .jc-stamp { opacity: 0; transform: scale(.7); }

  /* The sentence is said word by word, becomes line items, then the total counts up. */
  .lp-motion [data-reveal="total"][data-wait] { opacity: 1; transform: none; }
  .lp-motion [data-reveal="total"]:not([data-step]) .lp-w { opacity: 0; }
  .lp-motion [data-reveal="total"][data-step="type"] .lp-w { transition: opacity .2s ease calc(var(--i, 0) * 60ms); }
  .lp-motion [data-reveal="total"]:is(:not([data-step]), [data-step="type"]) .jc-total > :not(.jc-total__sum) { opacity: 0; transform: translateY(6px); }
  .lp-motion [data-reveal="total"][data-step="lines"] .jc-total > * { transition: opacity .4s ease, transform .4s var(--ease); }
  .lp-motion [data-reveal="total"][data-step="lines"] .jc-total > :nth-child(n+3) { transition-delay: .1s; }
  .lp-motion [data-reveal="total"][data-step="lines"] .jc-total > :nth-child(n+5) { transition-delay: .2s; }
  .lp-motion [data-reveal="total"][data-step="lines"] .jc-total > :nth-child(n+7) { transition-delay: .3s; }
  .lp-motion [data-reveal="total"][data-step="lines"] .jc-total > :nth-child(n+9) { transition-delay: .4s; }
  .lp-motion [data-reveal="total"][data-step="lines"] .jc-total > :nth-child(n+11) { transition-delay: .5s; }
  .lp-motion [data-reveal="total"]:not([data-step="sum"]) .jc-total__sum { opacity: 0; transform: translateY(6px); }
  .lp-motion [data-reveal="total"][data-step="sum"] .jc-total__sum { transition: opacity .3s ease, transform .3s var(--ease); }
}

/* Print: the template sheet only, black on white, on US Letter */
@media print {
  @page { size: Letter; margin: 0.5in; }
  :root { --ink: #000; --ink-2: #000; --ink-3: #333; --edge: #000; --line: #999; --paper: #fff; --ground: #fff; }
  body { background: #fff; color: #000; font-size: 12px; line-height: 16px; }
  .skip, .site-head, .foot, .band, .tpl-actions, .tpl-after { display: none !important; }
  .sec { padding: 0; }
  .wrap { max-width: none; padding: 0; }
  .sheet { max-width: none; padding: 0; border: 0; border-radius: 0; box-shadow: none; }
  .sheet__head { padding-bottom: 8px; }
  .sheet__sec { margin-top: 14px; break-inside: avoid; }
  .sheet__h { margin-bottom: 6px; }
  .fields { gap: 10px 20px; }
  .fields--3, .fields--job { grid-template-columns: repeat(3, 1fr); }
  .f__line { height: 24px; }
  .f--tall .f__line { height: 96px; background: linear-gradient(#999 1px, transparent 1px) 0 23px / 100% 24px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .f--short-tall .f__line { height: 96px; }
  .items td { height: 26px; }
  .sheet__notice { margin-top: 16px; padding: 8px 10px; }
  .sigs { gap: 10px 24px; margin-top: 16px; break-inside: avoid; }
  .f__line--sig { height: 32px; }
  .sheet__foot { margin-top: 16px; }
}