/*
 * TrackWork, the site's one stylesheet (October 2026 refresh).
 * Five colours, two families, no shadows, no dividers, no motion.
 * Section spacing is written per section, by hand, not by a rule.
 *
 * Order: fonts, tokens, base, shared pieces (screenshots, buttons, nav,
 * footer, price, questions, money tables), the homepage, the audience pages,
 * the plain pages (about, pricing, legal, features, guides), the free tools,
 * phones, print.
 */

/* Fonts: Inter Tight for headings, Inter for text. SIL OFL 1.1, licences in /fonts. */
@font-face { font-family: "Inter Tight"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("/fonts/inter-tight-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter Tight"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("/fonts/inter-tight-latin-ext-600-normal.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter Tight"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("/fonts/inter-tight-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter Tight"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("/fonts/inter-tight-latin-ext-700-normal.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("/fonts/inter-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("/fonts/inter-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("/fonts/inter-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("/fonts/inter-latin-ext-600-normal.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* The five tokens. Any other colour value in this file is a bug. */
:root {
  --ink: #16181C;
  --quiet: #555A5F;
  --paper: #FFFFFF;
  --green: #1F6B4A;
  /* Owner, 29 Oct 2026: soft App Store-style backgrounds instead of sage. The name stays so
     every use updates; it is now a cool off-white, and --warm is a soft cream for alternate tiles. */
  --sage: #EEF1F6;
  --warm: #F8EFE6;
  --line: #E2E5EB;  /* hairlines: the soft off-white is too faint for a 1px line on white */

  --head: "Inter Tight", "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --text: "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --width: 1120px;
  --gutter: 24px;

  /* Older names, still read by the generator, the shared invoice, unsubscribe
     and the hours log. Each one is a token, so nothing new enters the palette. */
  --surface: var(--paper);
  --surface-muted: var(--paper);
  --border: var(--quiet);
  --ink-secondary: var(--quiet);
  --ink-muted: var(--quiet);
  --ink-soft: var(--quiet);
  --ink-inverse: var(--paper);
  --red: var(--ink);
  --red-dark: var(--ink);
  --red-soft: var(--sage);
  --font: var(--text);
  --font-head: var(--head);
  --font-serif: var(--head);
  --shadow-xs: none;
  --shadow-sm: none;
  --shadow-md: none;
  --r-md: 12px;
  --r-lg: 16px;
  --r-pill: 999px;
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
}
img, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4 { font-family: var(--head); color: var(--ink); letter-spacing: 0; margin: 0; }
h1 { font-size: 42px; line-height: 1.05; font-weight: 700; }
h2 { font-size: 27px; line-height: 1.12; font-weight: 700; }
h3 { font-size: 18px; line-height: 1.25; font-weight: 600; }
h4 { font-size: 16px; line-height: 1.3; font-weight: 600; }
ul, ol { margin: 0; padding-left: 1.25em; }
li + li { margin-top: 0.4em; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
p { margin: 0; max-width: 62ch; }
p + p { margin-top: 1em; }
a { color: var(--green); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
strong { font-weight: 600; }

.wrap, .container { max-width: var(--width); margin: 0 auto; padding: 0 var(--gutter); }
.lead { font-size: 17px; line-height: 1.45; color: var(--quiet); }
.small { font-size: 14px; line-height: 1.45; color: var(--quiet); }
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; font-weight: 600; }
.green { color: var(--green); }
.sage { background: var(--sage); }

/* Screenshots */
.phone {
  display: block;
  background: var(--ink);
  padding: 11px;
  border-radius: 54px;
}
.phone img { border-radius: 44px; width: 100%; }
.crop { display: block; width: 100%; border-radius: 16px; }
.crop-24 { border-radius: 24px; }

/* The web sign-up beside the App Store badge: the second action, so ink words on no
   fill and no border, the badge's height, and the badge stays the primary. */
.btn-start { display: inline-flex; align-items: center; height: 50px; padding: 0 6px; color: var(--ink); font-family: var(--text); font-weight: 600; font-size: 16px; line-height: 1; text-decoration: none; border-radius: 12px; }
.btn-start:hover { text-decoration: underline; }

/* The primary button: the app's black button. */
.btn {
  display: inline-block;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--text);
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  padding: 14px 20px;
  border-radius: 12px;
  text-decoration: none;
}
.btn:hover { text-decoration: none; }
.badge { display: inline-block; line-height: 0; }
.badge svg { width: 150px; height: 50px; }
.badge .bg { fill: var(--ink); }
.badge .fg { fill: var(--paper); }

/* Nav */
.nav { padding: 20px 0; }
.nav .wrap { display: flex; align-items: center; gap: 32px; }
.logo { font-family: var(--head); font-weight: 700; font-size: 17px; color: var(--ink); text-decoration: none; margin-right: auto; }
.nav-links { display: flex; align-items: center; gap: 24px; font-size: 12px; }
.nav-links a { color: var(--ink); text-decoration: none; }
.nav-links a:hover { text-decoration: underline; }
.nav-links a[aria-current="page"] { text-decoration: underline; }
.nav-toggle { display: none; }
.nav .btn { color: var(--paper); font-size: 13px; padding: 9px 14px; }

/* Language: one quiet word naming the other language. The divider and the
   current language are hidden; generated pages link instead of switching. */
.lang, .lang-switch, #lang-toggle { background: none; border: 0; padding: 0; margin: 0; font: 400 1em var(--text); color: var(--quiet); cursor: pointer; display: inline-flex; gap: 0; }
.lang .lang-option, .lang-switch .lang-option, #lang-toggle .lang-option { color: var(--quiet); text-decoration: none; }
.lang .lang-option:hover, .lang-switch a.lang-option:hover { color: var(--ink); text-decoration: underline; }
.lang .lang-option.active, .lang-switch .lang-option.active, #lang-toggle .lang-option.active, .lang-divider { display: none; }
/* The switch sits last in the nav row, next to the button. Spanish labels are
   longer, so anything to its right grows when the language changes; with the
   switch last, only the button can push it, and the pointer that just clicked
   it does not land on (and underline) "Iniciar sesión". */
.nav-links #lang-toggle { order: 1; }

/* Footer */
.footer { padding: 72px 0 56px; font-size: 14px; line-height: 1.45; color: var(--quiet); }
.footer .wrap { display: grid; grid-template-columns: 1.2fr 1fr 1.25fr 1fr 0.8fr; gap: 40px; }
.footer h3 { font-family: var(--text); font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 12px; }
.footer a { display: block; color: var(--quiet); text-decoration: none; margin-bottom: 8px; }
.footer a:hover { color: var(--ink); text-decoration: underline; }
.footer .logo { font-size: 16px; color: var(--ink); margin-bottom: 12px; }
.footer .fine { grid-column: 1 / -1; margin-top: 24px; }
.footer .brand p { max-width: 30ch; }

/* Pricing block: no cards, no ticks, no box. */
.price .first { font-family: var(--head); font-size: 21px; line-height: 1.25; font-weight: 600; max-width: 26ch; }
.price .rows { display: grid; grid-template-columns: 10rem auto; column-gap: 24px; row-gap: 2px; margin: 28px 0 0; font-size: 17px; }
.price .rows dt { color: var(--quiet); }
.price .rows dd { margin: 0; }
.price .keep { margin-top: 24px; color: var(--quiet); }
.price .act { margin-top: 32px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }

/* Questions: always open, no accordion, no lines. Spacing follows the answer. */
.qa h3 { font-size: 16px; margin-bottom: 8px; }
.qa p { color: var(--ink); }
.qa.short { margin-top: 28px; }
.qa.mid { margin-top: 40px; }
.qa.long { margin-top: 52px; }

/* Plain tables for money: tabular figures, spacing instead of lines. */
.money { border-collapse: collapse; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.money td, .money th { padding: 7px 32px 7px 0; text-align: left; vertical-align: baseline; font-weight: 400; }
.money .amt { text-align: right; padding-right: 0; }
.money .total td { font-weight: 600; padding-top: 18px; }


/* ---------- Homepage, section by section ---------- */

.h-hero { padding: 0; overflow: hidden; }
.h-hero .grid { display: grid; grid-template-columns: 1fr 380px; gap: 64px; padding-top: 80px; }
.h-hero h1 { margin-bottom: 24px; }
.h-hero .lead { max-width: 34ch; }
.h-hero .act { margin-top: 36px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.h-hero .free { margin-top: 20px; }
.h-hero .shot { height: 600px; overflow: hidden; margin-right: 24px; }

.h-hours { padding: 72px 0 56px; }
.h-hours .col { max-width: 640px; }
.h-hours p { margin-top: 14px; }
.h-hours .crop { margin-top: 32px; }

.h-miles { padding: 40px 0 40px; }
.h-miles .row { display: grid; grid-template-columns: 1fr 520px; gap: 56px; align-items: center; }
.h-miles p { margin-top: 10px; }

.h-invoice { padding: 64px 0 80px; }
.h-invoice .pair { display: flex; align-items: flex-end; gap: 40px; }
.h-invoice .pair .phone { width: 300px; flex: none; }
.h-invoice .pair .doc { width: 430px; flex: none; }
.h-invoice h2 { margin-top: 48px; }
.h-invoice p { margin-top: 12px; }

.h-paid { padding: 128px 0 128px; }
.h-paid .lead { margin-top: 20px; max-width: 46ch; color: var(--ink); }
.h-paid .grid { display: grid; grid-template-columns: 420px 1fr; gap: 72px; margin-top: 64px; align-items: start; }
.h-paid .worked { margin-top: 8px; font-size: 17px; }
.h-paid .worked .amt { padding-right: 28px; }
.h-paid .after { margin-top: 40px; }
.h-paid .sheet { width: 360px; margin-top: 24px; }

.h-ask { padding: 72px 0 96px; }
.h-ask .row { display: grid; grid-template-columns: 1fr 360px; gap: 64px; align-items: start; }
.h-ask p { margin-top: 18px; }

.h-price { padding: 80px 0 0; }

.h-faq { padding: 64px 0 48px; }
.h-faq .wrap { display: grid; grid-template-columns: 1fr 640px; gap: 64px; }
.h-faq .qa:first-of-type { margin-top: 0; }

.h-close { padding: 96px 0 120px; }
.h-close .badge { margin-top: 32px; }

/* ---------- Nanny page, section by section ---------- */

.n-open { padding: 56px 0 72px; }
.n-open .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; }
.n-open h1 { max-width: 14ch; }
.n-open .first { margin-top: 28px; font-size: 17px; line-height: 1.45; max-width: 52ch; }
.n-open .by { margin-top: 18px; }
.n-open .msg-h { margin-top: 10px; font-size: 18px; }
.n-open .msg { margin-top: 16px; padding-left: 28px; font-size: 17px; line-height: 1.5; max-width: 50ch; }
.n-open .why { margin-top: 28px; }
.n-open .get { margin-top: 20px; font-weight: 600; }

.n-week { padding: 64px 0 0; overflow: hidden; }
.n-week .grid { display: grid; grid-template-columns: 330px 1fr; gap: 64px; }
.n-week .shot { height: 600px; overflow: hidden; }
.n-week .cap { padding-top: 40px; }
.n-week .cap h2 + p { margin-top: 18px; }
.n-week .cap p + p { margin-top: 14px; }

.n-work { padding: 112px 0 104px; }
.n-work .grid { display: grid; grid-template-columns: 1fr 400px; gap: 80px; }
.n-work .law { padding-top: 6px; }
.n-work .lead { margin-top: 16px; color: var(--ink); }
.n-work .money { margin-top: 40px; font-size: 17px; }
.n-work .label { margin-top: 16px; }
.n-work .flat { margin-top: 32px; }
.n-work .law h3 + p + h3 { margin-top: 48px; }
.n-work h3 + p { margin-top: 10px; }

.n-sheet { padding: 48px 0 80px; }
.n-sheet p { margin-top: 14px; }
.n-sheet h2 + p { margin-top: 18px; }
.n-sheet .grid { display: grid; grid-template-columns: 340px 1fr; gap: 64px; }
.n-sheet .ts { width: 100%; font-size: 16px; }
.n-sheet .ts th { font-weight: 600; }
.n-sheet .ts td, .n-sheet .ts th { padding: 9px 24px 9px 0; }
.n-sheet .sign { margin-top: 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; font-size: 14px; color: var(--quiet); }
.n-sheet .print { margin-top: 24px; font-weight: 600; }

.n-compare { padding: 88px 0 72px; }
.n-compare p { margin-top: 12px; }
.cmp { margin-top: 36px; width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.4; }
.cmp th, .cmp td { text-align: left; vertical-align: top; padding: 12px 20px 12px 0; font-weight: 400; }
.cmp thead th { font-weight: 600; font-size: 14px; color: var(--quiet); }
.cmp tbody th { font-weight: 600; font-family: var(--head); font-size: 16px; }
.cmp .lose { font-weight: 600; }
.n-compare .after { margin-top: 28px; }

.n-faq { padding: 56px 0 64px; }
.n-faq .wrap { display: grid; grid-template-columns: 1fr 640px; gap: 64px; }
.n-faq .qa:first-of-type { margin-top: 0; }

.n-price { padding: 64px 0 72px; }

.n-limits { padding: 24px 0 48px; }
.n-limits p + p { margin-top: 12px; }

/* ---------- Plain pages: about, pricing, support, legal, features, guides, tools ---------- */

/* A page opens with its h1 and one paragraph, on white. */
.page-hero { padding: 72px 0 40px; }
.page-hero .container, .page-body .container { max-width: calc(760px + 2 * var(--gutter)); margin: 0; margin-left: max(0px, calc((100% - var(--width)) / 2)); }
.page-hero h1 { max-width: 20ch; }
.page-hero p { margin-top: 20px; font-size: 17px; line-height: 1.45; color: var(--quiet); max-width: 46ch; }
.page-hero .cta-actions, .page-actions { margin-top: 28px; }
.page-body { padding: 8px 0 96px; }

/* Plain text where the old pages had pills and badges. */
.chip { font-size: 15px; color: var(--quiet); }
.note { color: var(--quiet); }
.text-muted { color: var(--quiet); }

/* A run of prose blocks. The gaps differ on purpose: a heading after a long
   block gets more air than a heading after a short one. */
.content-block + .content-block { margin-top: 56px; }
.content-block h2, .landing-block h2, .landing-prose > h2 { font-size: 22px; line-height: 1.15; margin-bottom: 16px; }
.content-block h3 { font-size: 16px; margin: 28px 0 8px; }
.content-block p + ul, .content-block p + ol, .content-block ul + p, .content-block ol + p { margin-top: 14px; }
.content-block ul, .content-block ol { max-width: 62ch; }
.content-block li + li { margin-top: 10px; }
.content-block.faq-section { margin-top: 72px; }

/* Buttons the older markup names. Primary is the app's black button; the
   others are plain links, so a row of actions never becomes a row of boxes. */
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-outline, .btn-ghost { background: none; color: var(--green); padding-left: 0; padding-right: 0; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.btn-outline:hover, .btn-ghost:hover { text-decoration-thickness: 2px; }
.btn-sm { font-size: 15px; padding: 11px 16px; }
.btn-ghost.btn-sm, .btn-outline.btn-sm { padding-left: 0; padding-right: 0; }
button.btn { border: 0; font-family: var(--text); cursor: pointer; }
.cta-actions, .page-actions { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }

/* Questions on the plain pages: always open, spacing instead of lines. */
.faq-item { margin-top: 36px; }
.faq-item h3 { font-size: 16px; margin: 0 0 8px; }
.faq-item p { color: var(--ink); }
.faq-item.short { margin-top: 24px; }
.faq-item.long { margin-top: 48px; }

/* Feature pages: one screen beside its words, alternating, with uneven air. */
.features-section { padding: 24px 0 40px; }
.feature-row { display: grid; grid-template-columns: 1fr 340px; gap: 72px; align-items: center; padding: 56px 0; }
.feature-row.reverse { grid-template-columns: 340px 1fr; }
.feature-row.reverse .feature-visual { order: -1; }
.feature-row.tall { padding: 88px 0; }
.feature-row.thin { padding: 32px 0; }
.feature-content h2 { font-size: 24px; }
.feature-content p { margin-top: 14px; }
.feature-content .btn { margin-top: 24px; }
.feature-visual .crop { width: 100%; }
.feature-visual video { width: 100%; border-radius: 24px; background: var(--ink); }
.feature-visual.wide { grid-column: auto; }
.feature-row.flat { grid-template-columns: 1fr 460px; }
.feature-row.flat.reverse { grid-template-columns: 460px 1fr; }
/* A row whose picture showed a control being used now carries its words alone (v3 rule). */
.feature-row.text-only { grid-template-columns: minmax(0, 640px); padding: 40px 0; }

/* "Everything in ...": a plain list of terms and their one-line meanings. */
.spec { margin: 28px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 22px 48px; max-width: none; }
.spec div { margin: 0; }
.spec dt { font-weight: 600; }
.spec dd { margin: 2px 0 0; color: var(--quiet); }
.landing-prose .spec + h2 { margin-top: 72px; }
.landing-prose > h2 + p { margin-top: 0; }
.landing-prose > p + h2 { margin-top: 72px; }

.page-cta { margin-top: 80px; }
.page-cta h2 { font-size: 22px; margin-bottom: 20px; }
.page-cta .landing-note, .landing-note { margin-top: 24px; font-size: 15px; color: var(--quiet); }

/* Guides and tool pages: prose under the tool. */
.landing-prose { max-width: 760px; }
.landing-block { margin-top: 56px; }
.landing-block p + p { margin-top: 14px; }
.landing-block ul, .landing-block ol { margin-top: 14px; }
.landing-updated { font-size: 14px; color: var(--quiet); margin-top: 8px; }
.landing-list li + li { margin-top: 8px; }
.landing-table-wrap { margin-top: 20px; max-width: 100%; }
.landing-table { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.4; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.landing-table th, .landing-table td { text-align: left; vertical-align: top; padding: 9px 20px 9px 0; font-weight: 400; }
.landing-table thead th { font-weight: 600; font-size: 14px; color: var(--quiet); }
.landing-table tbody th { font-weight: 600; }
.landing-block .landing-table-note { font-size: 14px; color: var(--quiet); margin-top: 10px; }

/* The how-to list on the printable timesheet: term, then what to write. */
.fill { margin: 16px 0 0; }
.fill div + div { margin-top: 12px; }
.fill dt { font-weight: 600; display: inline; }
.fill dd { display: inline; margin: 0; }

/* Pricing: three plain rows, no cards. */
/* Pricing and About: a reading column and a side column at desktop width,
   one column on a phone. No panels: the columns are only placement. */
.page-body .container.wide { max-width: var(--width); margin: 0 auto; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 96px; align-items: start; }
.split > * > .content-block:first-child { margin-top: 0; }
.split-side .content-block h2 { font-size: 19px; }
.plans { margin: 8px 0 0; }
.plan + .plan { margin-top: 56px; }
.plan h2 { font-size: 18px; font-weight: 600; }
.plan .figure { margin-top: 6px; font-family: var(--head); font-size: 32px; line-height: 1.1; font-weight: 700; font-variant-numeric: tabular-nums; }
.plan .figure .per { font-family: var(--text); font-size: 16px; font-weight: 400; color: var(--quiet); }
.plan p { margin-top: 10px; }
.plan ul { margin-top: 12px; }
.plan .btn { margin-top: 20px; }
.plan .small { margin-top: 12px; }
.plans + .content-block { margin-top: 88px; }
.pricing-close { margin-top: 96px; }
.pricing-close p { margin-top: 12px; color: var(--quiet); }
.pricing-close .cta-actions { margin-top: 24px; }

/* ---------- Free tools ---------- */

/* Hours worked log. The fields keep the edges a form needs; nothing else has one. */
.tool-hero { padding: 64px 0 28px; }
.tool-hero h1 { margin: 0 0 14px; }
.tool-sub { max-width: 46ch; color: var(--quiet); font-size: 16px; line-height: 1.5; }
.tool-body { padding: 0 0 96px; }
.tool-card { background: var(--paper); }
.tool-card-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 0 0 20px; }
.tool-identity { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; flex: 1; min-width: 260px; max-width: 520px; }
.log-field label { display: block; font-size: 14px; color: var(--quiet); margin-bottom: 6px; }
.log-field input { width: 100%; font: inherit; font-size: 16px; padding: 10px 12px; border: 1px solid var(--quiet); border-radius: 10px; background: var(--paper); color: var(--ink); }
.log-field input:focus, .log-table input:focus { outline: 2px solid var(--green); outline-offset: 1px; border-color: var(--green); }
.tool-total { text-align: right; line-height: 1.15; }
.tool-total-label { display: block; font-size: 14px; color: var(--quiet); margin-bottom: 4px; }
.tool-total strong { font-family: var(--head); font-size: 27px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tool-total-decimal { display: block; font-size: 14px; color: var(--quiet); font-variant-numeric: tabular-nums; }
.log-table-wrap { overflow-x: auto; position: relative; }
.log-table { width: 100%; border-collapse: collapse; }
.log-table th { text-align: left; font-size: 14px; color: var(--quiet); font-weight: 600; padding: 12px 8px; white-space: nowrap; }
.log-table th:first-child, .log-table td:first-child { padding-left: 0; }
.log-table th:last-child, .log-table td:last-child { padding-right: 0; }
.log-table th.num, .log-table td.num { text-align: right; }
.log-table td { padding: 6px 8px; vertical-align: middle; }
.log-table input { font: inherit; font-size: 15px; padding: 8px 10px; border: 1px solid var(--quiet); border-radius: 8px; background: var(--paper); width: 100%; color: var(--ink); }
.log-table td:nth-child(1) input { min-width: 140px; }
.log-table td:nth-child(2) input, .log-table td:nth-child(3) input { min-width: 105px; }
.log-table td:nth-child(4) input { min-width: 70px; }
.log-table td:nth-child(5) input { min-width: 150px; }
.log-hours { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.log-remove-cell { width: 44px; }
.log-remove { border: 0; background: transparent; color: var(--quiet); font-size: 16px; line-height: 1; cursor: pointer; padding: 6px 9px; border-radius: 8px; }
.log-remove:hover { color: var(--ink); background: var(--sage); }
.log-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; padding: 20px 0 0; }
.log-actions-spacer { flex: 1; min-width: 8px; }
.log-saved { font-size: 14px; color: var(--green); white-space: nowrap; }
.log-clear { color: var(--quiet); }
.log-warning { margin: 14px 0 0; font-size: 15px; color: var(--ink); }
.log-weeks { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-wrap: wrap; gap: 8px 32px; font-size: 15px; color: var(--quiet); }
.log-weeks li + li { margin-top: 0; }
.log-weeks strong { font-variant-numeric: tabular-nums; color: var(--ink); }
/* On a phone each day is a small form, every field visible, nothing scrolls sideways. */
@media (max-width: 600px) {
  .log-table-wrap { overflow-x: visible; }
  .log-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .log-table, .log-table tbody { display: block; }
  .log-table tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "date date" "start end" "brk hrs" "note note" "rm rm"; gap: 10px 12px; padding: 18px 0 6px; }
  .log-table tr + tr { margin-top: 12px; }
  .log-table td { display: block; padding: 0 !important; }
  .log-table td::before { content: attr(data-label); display: block; font-size: 14px; color: var(--quiet); margin-bottom: 4px; }
  .log-table td input { min-width: 0 !important; }
  .log-table td:nth-child(1) { grid-area: date; }
  .log-table td:nth-child(2) { grid-area: start; }
  .log-table td:nth-child(3) { grid-area: end; }
  .log-table td:nth-child(4) { grid-area: brk; }
  .log-table td:nth-child(5) { grid-area: note; }
  .log-table td:nth-child(6) { grid-area: hrs; text-align: left; align-self: end; padding-bottom: 9px !important; }
  .log-table td.log-remove-cell { grid-area: rm; width: auto; justify-self: end; }
  .log-table td.log-remove-cell::before { content: none; }
}

/* The invoice generator's surroundings (its own form styles live on its page). */
.gen-trust { margin-top: 80px; }
.gen-trust h2 { font-size: 22px; margin: 0 0 24px; }
.gen-trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.gen-trust-card h3 { margin: 0 0 8px; font-size: 16px; }
.gen-trust-card p { margin: 0; font-size: 16px; color: var(--quiet); }

/* ---------- The invite claim page (built by claim/js/claim.js) ---------- */
#claim-root { max-width: 480px; margin: 0 auto; padding: 56px var(--gutter) 72px; display: flex; flex-direction: column; gap: 24px; }
#claim-root .environment-badge { align-self: flex-start; font-size: 14px; color: var(--quiet); }
#claim-root .card { background: var(--paper); }
#claim-root .hidden { display: none; }
#claim-root .loading { font-weight: 600; }
#claim-root .card h1, #claim-root .card h2, #claim-root .card h3 { margin: 0 0 12px; }
#claim-root .card p + p { margin-top: 10px; }
#claim-root .stat-group { display: flex; justify-content: space-between; gap: 12px; margin: 20px 0 24px; }
#claim-root .stat-group.single { justify-content: flex-start; }
#claim-root .stat { flex: 1; background: var(--sage); border-radius: 16px; padding: 16px; }
#claim-root .stat-value { font-family: var(--head); font-size: 21px; font-weight: 700; display: block; margin-bottom: 2px; font-variant-numeric: tabular-nums; }
#claim-root .stat-label { font-size: 14px; color: var(--quiet); }
#claim-root .primary-btn, #claim-root .secondary-btn, #claim-root .ghost-btn { border: 0; border-radius: 12px; padding: 14px 16px; font: 600 16px var(--text); cursor: pointer; width: 100%; display: inline-flex; align-items: center; justify-content: center; }
#claim-root .primary-btn { background: var(--ink); color: var(--paper); }
#claim-root .secondary-btn { background: var(--sage); color: var(--ink); }
#claim-root .ghost-btn { background: transparent; color: var(--ink); }
#claim-root .primary-btn + .secondary-btn, #claim-root .primary-btn + .ghost-btn, #claim-root .secondary-btn + .ghost-btn { margin-top: 10px; }
#claim-root .input-field { width: 100%; padding: 12px; border-radius: 10px; border: 1px solid var(--quiet); font: 400 16px var(--text); color: var(--ink); margin-bottom: 14px; }
#claim-root .error-box { color: var(--ink); background: var(--sage); border-radius: 12px; padding: 12px 16px; margin-top: 12px; font-size: 15px; }
#claim-root .session-list { margin-top: 24px; }
#claim-root .session-row { display: flex; justify-content: space-between; font-size: 15px; padding: 5px 0; color: var(--quiet); font-variant-numeric: tabular-nums; }
#claim-root .session-row span:last-child { font-weight: 600; color: var(--ink); }
#claim-root .success-badge { display: inline-block; color: var(--green); font-weight: 600; font-size: 15px; margin-bottom: 8px; }
#claim-root .helper-text { font-size: 14px; color: var(--quiet); margin-top: 12px; }
#claim-root .back-link, #claim-root .retry-link { border: 0; background: none; color: var(--green); font: 600 15px var(--text); cursor: pointer; padding: 0; text-decoration: underline; text-underline-offset: 3px; }
#claim-root .back-link { margin-bottom: 12px; }
#claim-root .retry-link { margin-top: 12px; font-weight: 400; }
#claim-root .cta-attention { outline: 2px solid var(--green); outline-offset: 2px; }

/* ---------- The outcome pattern (v3): homepage and audience pages ----------
   Every image is something that has already happened for the worker. One outcome per
   screen: a one-line headline, the outcome large, one or two lines under it. A page opts
   in with body class "v3". Headings use Inter Tight 500 here; the plain pages keep 600/700. */

@font-face { font-family: "Inter Tight"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("/fonts/inter-tight-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter Tight"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("/fonts/inter-tight-latin-ext-500-normal.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

.v3 { --width: 1200px; }
.v3 h1, .v3 h2, .v3 h3 { font-weight: 500; }
.v3 h1 { font-size: 58px; line-height: 1.04; }
.v3 h2 { font-size: 45px; line-height: 1.06; }
.v3 .quiet { color: var(--quiet); }
.v3 .nb { white-space: nowrap; }
.v3 .logo { font-weight: 600; }

/* Hero: the promise on sage, then a photo edge to edge with the outcome card on it. */
.v3-hero { overflow: hidden; }
.v3-hero .intro { text-align: center; padding-top: 32px; }
.v3-hero .lead { margin: 22px auto 0; max-width: 40em; }
.v3-hero .act { justify-content: center; margin-top: 32px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.v3-hero .free { margin-top: 14px; text-align: center; max-width: none; }
.v3-scene { position: relative; height: 720px; margin-top: 44px; overflow: hidden; }
.v3-scene > .ph { width: 100%; height: 100%; object-fit: cover; }
.v3-card { position: absolute; width: 420px; height: auto; border-radius: 24px; overflow: hidden; background: var(--paper); }
.v3-hero .v3-card { top: 56px; right: max(48px, calc((100% - 1200px) / 2)); }

.v3-hero .v3-card.left { right: auto; left: max(48px, calc((100% - 1200px) / 2)); }
.v3-money { margin: 40px auto 0; font-size: 16px; text-align: left; }
.v3-split .v3-money { margin: 28px 0 0; }
.v3-out .v3-money + .detail { margin-top: 24px; }

.v3 h1, .v3 h2 { text-wrap: balance; }
/* The contractor's own beat: the invoice as a flat document, its sum beside it. */
.v3-tile.doc { display: grid; grid-template-columns: 416px minmax(0, 1fr); gap: 56px; align-items: start; padding: 64px; text-align: left; }
.v3-tile.doc .shot { width: 416px; border-radius: 12px; }
.v3-tile.doc .side .v3-money { margin: 6px 0 0; }
.v3-tile.doc .side .detail { margin-top: 24px; }

.v3-tile.sent { padding: 72px 64px; gap: 40px; align-items: center; }
.v3-tile.sent .shot.created { width: 320px; border-radius: 36px; }
.v3-tile.sent .shot.pdf { width: 336px; border-radius: 12px; }

/* An outcome screen. */
.v3-out { padding: 152px 0 0; }
.v3-out.center { text-align: center; }
.v3-out .detail { color: var(--quiet); max-width: 31em; margin-top: 28px; font-size: 16px; }
.v3-out.center .detail { margin-left: auto; margin-right: auto; }
.v3-out .lead-in { color: var(--quiet); max-width: 31em; margin: 20px auto 0; font-size: 16px; }

/* A capture on a pale tile; the tile's bottom edge cuts it, as a phone held up. */
.v3-tile { background: var(--sage); border-radius: 40px; overflow: hidden; margin-top: 56px; display: flex; justify-content: center; align-items: flex-start; }
/* A capture keeps its own ratio: width set, height from the file, never stretched by the tile. */
.v3-tile .shot { overflow: hidden; background: var(--paper); height: auto; flex: none; align-self: flex-start; }
.v3-tile.cut { padding-top: 80px; max-height: 560px; }
.v3-tile.cut .shot { width: 384px; border-radius: 40px 40px 0 0; }
.v3-tile.wide { padding: 104px 0; align-items: center; }
.v3-tile.wide .shot { width: 576px; border-radius: 26px; align-self: center; }
/* A flat document (the Excel timesheet): wider, square-ish corners, never a phone. */
.v3-tile.sheet { padding: 72px 0; }
.v3-tile.sheet .shot { width: 800px; border-radius: 10px; }

/* Split: words left, a tall capture right, running off its tile. */
.v3-split .wrap { display: grid; grid-template-columns: 1fr 448px; gap: 80px; align-items: center; }
.v3-split .v3-tile { margin-top: 0; height: 576px; padding-top: 72px; }
.v3-split .v3-tile .shot { width: 336px; border-radius: 40px 40px 0 0; }
.v3-split h2 { font-size: 40px; }

/* A worker mid-task, with the outcome card on the photo. */
.v3-photo { position: relative; margin-top: 56px; height: 660px; border-radius: 36px; overflow: hidden; }
.v3-photo > .ph { width: 100%; height: 100%; object-fit: cover; }
.v3-photo .v3-card { left: 64px; bottom: 64px; }

/* A photo beside the document that came out of the work. */
.v3-pair { position: relative; margin: 56px auto 0; max-width: 896px; min-height: 560px; text-align: left; }
.v3-pair .ph { position: absolute; left: 0; top: 0; width: 560px; height: 560px; object-fit: cover; border-radius: 36px; }
/* In the flow, so a tall document grows the pair instead of covering the caption under it. */
.v3-pair .shot { position: relative; display: block; margin: 88px 0 0 480px; width: 416px; height: auto; border-radius: 28px; overflow: hidden; outline: 12px solid var(--paper); }

/* One big number lifted out of the app. */
.v3-num { font-family: var(--head); font-weight: 500; font-size: 70px; line-height: 1; margin-top: 64px; font-variant-numeric: tabular-nums; max-width: none; }
.v3-num-sub { font-family: var(--head); font-size: 24px; color: var(--quiet); margin-top: 10px; max-width: none; }

/* A message she sent, with what she attached under it. */
.v3-msg { flex-direction: column; align-items: center; padding-top: 88px; height: 860px; }
.v3-msg .bubble { max-width: 470px; background: var(--green); color: var(--paper); border-radius: 26px 26px 8px 26px; padding: 16px 22px; font-size: 16px; line-height: 1.45; text-align: left; margin-left: 120px; }
.v3-msg .shot { align-self: center; width: 440px; margin: 14px 0 0 150px; border-radius: 26px 26px 0 0; }

/* Price and questions. */
.v3-price { padding: 168px 0 136px; }
.v3-price .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 96px; }
.v3-price h2 { font-size: 32px; }
.v3-price .body { margin-top: 20px; color: var(--quiet); }
.v3-price .aside { margin-top: 24px; color: var(--quiet); }
.v3-price .qa + .qa { margin-top: 32px; }
.v3-price .qa p { color: var(--quiet); }

/* Close: the promise again, then a photo or the last outcome. */
.v3-close { padding: 128px 0 0; text-align: center; overflow: hidden; }
.v3-close .body { margin: 22px auto 0; color: var(--quiet); }
.v3-close .act { margin-top: 32px; display: flex; justify-content: center; align-items: center; gap: 24px; flex-wrap: wrap; }
.v3-close .free { margin: 14px auto 0; }
.v3-close .v3-scene { height: 560px; margin-top: 64px; }
.v3-close.num-close { padding-bottom: 120px; }
.v3-close.num-close .v3-num { margin-top: 40px; }
.v3-close .stage img { width: 100%; height: auto; }
.v3-close .stage { margin: 64px auto 0; width: 520px; border-radius: 40px 40px 0 0; overflow: hidden; }

@media (max-width: 760px) {
  .v3 h1 { font-size: 32px; }
  .v3 h2, .v3-split h2 { font-size: 27px; line-height: 1.1; }
  .v3-hero .act, .v3-close .act { gap: 12px; }
  .v3-hero .lead { font-size: 16px; }
  .v3-scene { height: 520px; margin-top: 32px; }
  .v3-card, .v3-photo .v3-card { width: calc(100% - 32px); left: 16px; right: 16px; bottom: 16px; border-radius: 18px; }
  .v3-hero .v3-card, .v3-hero .v3-card.left { top: 16px; bottom: auto; left: 16px; right: 16px; }
  .v3-money { font-size: 15px; }
  .v3-out { padding-top: 96px; }
  .v3-out .detail { font-size: 16px; margin-top: 22px; }
  .v3-tile { margin-top: 32px; border-radius: 28px; }
  .v3-tile.cut { padding: 32px 24px 0; max-height: none; }
  .v3-tile.cut .shot { width: 100%; border-radius: 28px 28px 0 0; }
  .v3-tile.wide { padding: 40px 16px; }
  .v3-tile.wide .shot { width: 100%; border-radius: 14px; }
  .v3-tile.sheet { padding: 24px 12px; }
  .v3-tile.sent { flex-direction: column; padding: 24px 16px; gap: 16px; }
  .v3-tile.sent .shot.created, .v3-tile.sent .shot.pdf { width: 100%; align-self: stretch; }
  .v3-tile.doc { grid-template-columns: 1fr; padding: 24px 16px; gap: 24px; }
  .v3-tile.doc .shot { width: 100%; }
  .v3-tile.sheet .shot { border-radius: 6px; }
  .v3-split .wrap { grid-template-columns: 1fr; gap: 32px; }
  .v3-split .v3-tile { height: 540px; padding: 32px 24px 0; }
  .v3-split .v3-tile .shot { width: 100%; border-radius: 28px 28px 0 0; }
  .v3-photo { height: 420px; border-radius: 24px; margin-top: 32px; }
  .v3-pair { min-height: 0; margin-top: 32px; }
  .v3-pair .ph { position: static; width: 100%; height: 360px; border-radius: 24px; }
  .v3-pair .shot { position: relative; left: auto; top: auto; width: calc(100% - 32px); margin: -96px auto 0; border-radius: 18px; outline-width: 8px; }
  .v3-num { font-size: 48px; margin-top: 40px; }
  .v3-num-sub { font-size: 18px; }
  .v3-msg { padding: 32px 16px 0; height: 640px; }
  .v3-msg .bubble { margin-left: 32px; font-size: 16px; }
  .v3-msg .shot { width: 86%; margin: 12px 0 0 32px; }
  .v3-price { padding: 104px 0 80px; }
  .v3-price .wrap { grid-template-columns: 1fr; gap: 48px; }
  .v3-price h2 { font-size: 25px; }
  .v3-close { padding-top: 80px; }
  .v3-close .v3-scene { height: 360px; }
  .v3-close .stage { width: 100%; border-radius: 28px 28px 0 0; }
}


/* Plain pages in the v3 pattern (pricing, About, the feature pages, the generators): the same
   sage opening as the homepage, centred, Inter Tight 500, and pictures on pale tiles. Copy unchanged. */
.v3.plain .nav { background: var(--sage); }
.v3.plain .page-hero { background: var(--sage); padding: 56px 0 96px; text-align: center; }
.v3.plain .page-hero .container { margin: 0 auto; max-width: calc(900px + 2 * var(--gutter)); }
.v3.plain .page-hero h1 { font-size: 48px; line-height: 1.05; max-width: 18ch; margin: 0 auto; }
.v3.plain .page-hero p { margin-left: auto; margin-right: auto; max-width: 40em; }
.v3.plain .page-hero .cta-actions { justify-content: center; }
.v3.plain .page-body { padding-top: 96px; }
.v3.plain .content-block h2, .v3.plain .landing-prose > h2, .v3.plain .page-cta h2 { font-size: 27px; font-weight: 500; }
.v3.plain .features-section { padding: 72px 0 40px; }
.v3.plain .feature-row { gap: 64px; padding: 64px 0; }
.v3.plain .feature-row h2 { font-size: 32px; font-weight: 500; line-height: 1.08; }
.v3.plain .feature-visual { background: var(--sage); border-radius: 32px; padding: 40px; }
.v3.plain .feature-visual .crop { border-radius: 16px; }
.v3.plain .gen-page { padding-top: 64px; }
@media (max-width: 760px) {
  .v3.plain .page-hero { padding: 32px 0 56px; }
  .v3.plain .page-hero h1 { font-size: 30px; }
  .v3.plain .feature-row h2 { font-size: 24px; }
  .v3.plain .feature-visual { padding: 20px; border-radius: 24px; }
  .v3.plain .page-body { padding-top: 56px; }
}

/* ---------- Phones, 760px and below ---------- */
@media (max-width: 760px) {
  :root { --gutter: 16px; }
  body { font-size: 16px; }
  h1 { font-size: 29px; }
  h2 { font-size: 22px; }
  h3 { font-size: 16px; }
  .lead { font-size: 16px; }

  .nav { padding: 14px 0; }
  .nav-links { display: none; }
  .nav-toggle { display: block; background: none; border: 0; padding: 6px 0; font: 600 16px var(--text); color: var(--ink); cursor: pointer; }
  body.nav-open .nav-links { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; font-size: 16px; position: absolute; left: 0; right: 0; top: 56px; padding: 16px var(--gutter) 24px; background: var(--paper); }
  .nav .wrap { gap: 20px; }
  .nav .btn { padding: 11px 14px; font-size: 15px; }

  .footer { padding: 56px 0 40px; }
  .footer .wrap { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .footer .brand { grid-column: 1 / -1; }

  .price .first { font-size: 18px; }
  .price .rows { grid-template-columns: 7rem auto; font-size: 16px; }

  .h-hero .grid { grid-template-columns: 1fr; gap: 40px; padding-top: 32px; }
  .h-hero .lead { max-width: none; }
  .h-hero .shot { height: 420px; width: 272px; margin: 0 auto; }

  .h-hours { padding: 56px 0 40px; }
  .h-hours .crop { margin-top: 24px; }

  .h-miles { padding: 32px 0 32px; }
  .h-miles .row { grid-template-columns: 1fr; gap: 20px; }

  .h-invoice { padding: 48px 0 64px; }
  /* On a phone the two pictures stack, the invoice first, each the full width. */
  .h-invoice .pair { flex-direction: column; align-items: stretch; gap: 40px; }
  .h-invoice .pair .doc { order: -1; width: 100%; }
  .h-invoice .pair .phone { width: 100%; max-width: 320px; }
  .h-invoice h2 { margin-top: 32px; }

  .h-paid { padding: 88px 0 96px; }
  .h-paid .grid { grid-template-columns: 1fr; gap: 40px; margin-top: 40px; }
  .h-paid .worked { font-size: 16px; }
  .h-paid .money td { padding-right: 16px; }
  .h-paid .sheet { width: 82%; }

  .h-ask { padding: 56px 0 72px; }
  .h-ask .row { grid-template-columns: 1fr; gap: 28px; }
  .h-ask .crop { width: 82%; }

  .h-price { padding: 56px 0 0; }
  .h-faq { padding: 56px 0 40px; }
  .h-faq .wrap { grid-template-columns: 1fr; gap: 0; }
  .h-faq .qa:first-of-type { margin-top: 28px; }
  .h-paid .worked .amt { padding-right: 16px; }
  .h-close { padding: 72px 0 88px; }

  .n-open { padding: 32px 0 56px; }
  .n-open .grid { grid-template-columns: 1fr; gap: 0; }
  .n-open .msg-h { margin-top: 48px; }
  .n-open .first { font-size: 16px; }
  .n-open .msg { padding-left: 16px; font-size: 16px; }

  .n-week { padding: 48px 0 0; }
  .n-week .grid { grid-template-columns: 1fr; gap: 0; }
  .n-week .cap { padding-top: 0; order: -1; }
  .n-week .shot { height: 440px; width: 272px; margin: 32px auto 0; }

  .n-work { padding: 80px 0 72px; }
  .n-work .money { font-size: 16px; }
  .n-work .money td { padding-right: 14px; white-space: nowrap; }
  .n-work .grid { grid-template-columns: 1fr; gap: 56px; }

  .n-sheet { padding: 40px 0 64px; }
  .n-sheet .grid > div { min-width: 0; }
  .n-sheet .ts { font-size: 14px; }
  .n-sheet .ts td, .n-sheet .ts th { padding: 7px 10px 7px 0; white-space: nowrap; }
  .n-sheet .ts td:nth-child(6), .n-sheet .ts th:nth-child(6) { display: none; }
  .n-sheet .grid { grid-template-columns: 1fr; gap: 28px; }
  .n-sheet .sign { gap: 16px; }

  .n-compare { padding: 64px 0 56px; }
  .cmp thead { display: none; }
  .cmp, .cmp tbody, .cmp tr, .cmp th, .cmp td { display: block; width: 100%; }
  .cmp tr { padding: 20px 0 8px; }
  .cmp tbody th { padding: 0 0 6px; }
  .cmp td { padding: 3px 0; display: grid; grid-template-columns: 9.5rem 1fr; gap: 12px; }
  .cmp td::before { content: attr(data-label); color: var(--quiet); font-size: 14px; padding-top: 1px; }

  .n-faq { padding: 48px 0 48px; }
  .n-faq .wrap { grid-template-columns: 1fr; gap: 0; }
  .n-faq .qa:first-of-type { margin-top: 28px; }
  .n-price { padding: 48px 0 56px; }
  .nav { position: relative; }

  .page-hero { padding: 40px 0 28px; }
  .page-hero p { font-size: 16px; }
  .page-body { padding: 0 0 72px; }
  .content-block + .content-block { margin-top: 44px; }
  .content-block h2, .landing-block h2, .landing-prose > h2 { font-size: 19px; }
  .feature-row, .feature-row.reverse, .feature-row.flat, .feature-row.flat.reverse { grid-template-columns: 1fr; gap: 28px; padding: 40px 0; }
  .feature-row.reverse .feature-visual { order: 0; }
  .feature-row .feature-visual { max-width: 300px; }
  .feature-row.flat .feature-visual { max-width: none; }
  .feature-content h2 { font-size: 21px; }
  .spec { grid-template-columns: 1fr; gap: 16px; }
  .plan .figure { font-size: 27px; }
  .split { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .split-side { margin-top: 64px; }
  .tool-hero { padding: 40px 0 20px; }
  .tool-total { text-align: left; }
  .gen-trust-grid { grid-template-columns: 1fr; gap: 24px; }
  .cta-actions, .page-actions { gap: 20px; }
}

/* Print: the timesheet only. A paper form needs lines to write on. */
@media print {
  body { font-size: 12pt; }
  body:has(.n-sheet) main > section:not(.n-sheet) { display: none; }
  .nav, .footer { display: none; }
  .n-sheet { padding: 0; }
  .n-sheet .print { display: none; }
  .n-sheet .ts td, .n-sheet .ts th { border-bottom: 1px solid var(--ink); padding: 12pt 8pt 4pt 0; }
  .n-sheet .ts .ex span { visibility: hidden; }
  .n-sheet .sign div { border-bottom: 1px solid var(--ink); padding-top: 36pt; }
}

/* Time tracking page */
/* The closing sentence follows the last feature row directly, without the full page-body gap. */
.v3.plain .page-body.tt-close { padding-top: 8px; }
.v3.plain .page-body.tt-close .landing-prose > p:first-child { margin-bottom: 56px; }

/* Pricing page */
/* White page (no tinted band), a calm headline, one Monthly / Yearly control above two
   equal cards. Pro is marked by an ink outline, Free by a sage one. Then a grouped
   comparison table whose Pro column is filled sage, the questions and the close. */
.v3.plain.pricing-page .nav { background: var(--paper); }
.v3.plain.pricing-page .page-hero.price-hero { background: var(--paper); padding: 56px 0 0; }
.v3.plain.pricing-page .price-hero h1 { font-size: 38px; line-height: 1.05; font-weight: 500; }
.v3.plain.pricing-page .price-hero p { margin-top: 16px; font-size: 16px; max-width: 44em; text-wrap: balance; }

.price-plans { padding: 28px 0 0; }
.billing { display: flex; align-items: center; justify-content: center; gap: 14px; }
.billing-track { display: inline-flex; background: var(--sage); border-radius: 999px; padding: 4px; }
.billing-opt { background: none; border: 0; margin: 0; padding: 9px 20px; border-radius: 999px; font: 600 15px var(--text); line-height: 1; color: var(--quiet); cursor: pointer; }
.billing-opt[aria-pressed="true"] { background: var(--paper); color: var(--ink); }
/* The saving belongs to the Yearly option, so it sits inside that segment. */
.billing-save { font-size: 13px; font-weight: 600; color: var(--green); margin-left: 6px; }

.price-cards { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; max-width: 880px; margin: 28px auto 0; }
.price-card { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: 20px; padding: 32px 32px 34px; }
.price-card.featured { border: 2px solid var(--ink); padding: 35px 35px 39px; }
.price-card h2 { font-size: 19px; line-height: 1.2; font-weight: 600; }
.price-desc { margin-top: 6px; font-size: 16px; line-height: 1.45; color: var(--quiet); }
.price-option { margin-top: 16px; }
.price-figure { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; max-width: none; }
.price-figure .amount { font-family: var(--head); font-size: 42px; line-height: 1; font-weight: 600; font-variant-numeric: tabular-nums; }
.price-figure .per { font-size: 16px; color: var(--quiet); }
.price-sub { margin-top: 10px; font-size: 14px; color: var(--quiet); }
.price-btn { display: block; text-align: center; margin-top: 22px; padding: 15px 20px; }
.price-card:not(.featured) .price-btn { background: var(--sage); color: var(--ink); }
.checks { list-style: none; padding: 0; margin: 22px 0 0; font-size: 15px; line-height: 1.45; }
.checks li { position: relative; padding-left: 28px; }
.checks li + li { margin-top: 10px; }
.checks li::before { content: ""; position: absolute; left: 4px; top: 0.2em; width: 6px; height: 12px; border: solid var(--green); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.price-under { max-width: 880px; margin: 20px auto 0; text-align: center; }
.price-under p { margin: 0 auto; max-width: none; font-size: 15px; color: var(--quiet); }
.price-under p + p { margin-top: 4px; }
/* Without JavaScript the Pro card shows Yearly; pricing-plan.js adds .monthly to switch. */
.price-card.featured [data-plan="monthly"] { display: none; }
.price-card.featured.monthly [data-plan="monthly"] { display: block; }
.price-card.featured.monthly [data-plan="yearly"] { display: none; }

.price-all { padding: 112px 0 0; }
.price-all .wrap, .price-faq .wrap { max-width: calc(880px + 2 * var(--gutter)); }
.v3.plain.pricing-page .price-all h2, .v3.plain.pricing-page .price-faq h2 { font-size: 29px; line-height: 1.1; font-weight: 500; }

/* The comparison table: sage hairlines, group headings, sticky plan names. */
.compare { width: 100%; margin-top: 28px; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 16px; line-height: 1.4; }
.compare col.val { width: 180px; }
.compare th, .compare td { padding: 13px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.compare tbody th { text-align: left; font-weight: 400; padding-left: 0; }
.compare td { text-align: center; font-weight: 600; }
.compare thead th { position: sticky; top: 0; z-index: 1; background: var(--paper); font-family: var(--head); font-size: 16px; line-height: 1.3; font-weight: 600; text-align: center; vertical-align: bottom; padding-top: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--quiet); }
.compare thead th:first-child { text-align: left; padding-left: 0; }
.compare thead th.pro { background: var(--sage); border-radius: 14px 14px 0 0; }
.compare .pro { background: var(--sage); border-bottom-color: var(--paper); }
.compare tr.group th, .compare tr.group td { padding: 36px 0 10px; font-family: var(--head); font-size: 16px; font-weight: 600; text-align: left; border-bottom: 1px solid var(--line); }
.compare tbody tr:last-child .pro { border-radius: 0 0 14px 14px; border-bottom-color: var(--line); }
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom-color: var(--paper); }
.compare .tick { display: inline-block; width: 7px; height: 13px; border: solid var(--green); border-width: 0 2px 2px 0; transform: rotate(45deg); margin-top: -4px; vertical-align: middle; }
.compare .tag { display: inline-block; margin-left: 6px; font-size: 12px; line-height: 1; font-weight: 600; color: var(--paper); background: var(--green); padding: 4px 7px; border-radius: 999px; vertical-align: 1px; }
.compare-note { margin-top: 20px; font-size: 15px; color: var(--quiet); max-width: none; }

.price-faq { padding: 128px 0 128px; }
.price-qs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px 48px; margin-top: 36px; }
.price-qs h3 { font-size: 16px; line-height: 1.3; font-weight: 600; }
.price-qs p { margin-top: 8px; font-size: 16px; color: var(--quiet); }
/* A calm close on white: the promise, the badge and Get Started. */
.v3.plain.pricing-page .v3-close { background: var(--paper); padding: 24px 0 136px; }
.v3.plain.pricing-page .v3-close h2 { font-size: 38px; line-height: 1.08; }

@media (max-width: 760px) {
  .v3.plain.pricing-page .page-hero.price-hero { padding-top: 40px; }
  .v3.plain.pricing-page .price-hero h1 { font-size: 32px; }
  .v3.plain.pricing-page .price-hero p { font-size: 16px; }
  .price-plans { padding-top: 32px; }
  .price-cards { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 24px; }
  .price-card.featured { order: -1; }
  .price-card { padding: 28px 24px 32px; }
  .price-card.featured { padding: 27px 23px 31px; }
  .price-desc { min-height: 0; }
  .price-figure .amount { font-size: 38px; }
  .price-all { padding-top: 88px; }
  .v3.plain.pricing-page .price-all h2, .v3.plain.pricing-page .price-faq h2 { font-size: 24px; }
  .compare { font-size: 15px; }
  .compare col.val { width: 76px; }
  .compare th, .compare td { padding: 12px 6px; }
  .compare tbody th { padding-right: 10px; }
  .compare thead th { font-size: 13px; padding-top: 12px; padding-bottom: 10px; }
  .compare tr.group th { padding-top: 28px; font-size: 16px; }
  .price-qs { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .price-faq { padding: 88px 0; }
  .v3.plain.pricing-page .v3-close { padding: 8px 0 88px; }
  .v3.plain.pricing-page .v3-close h2 { font-size: 27px; }
}


/* Invoice generator */
/* --mist is the tool preview surface and nothing else: the form column stays on white
   (your inputs) and the preview column sits on this very light neutral (the result). */
:root { --mist: #F5F6F4; }
.v3.plain.gen-tool .nav,
.v3.plain.gen-tool .page-hero { background: var(--paper); }
.v3.plain.gen-tool .page-hero { padding-bottom: 40px; }
.v3.plain.gen-tool .gen-page { padding: 0; position: relative; overflow-x: clip; }
.v3.plain.gen-tool .gen-layout { gap: 0; grid-template-columns: minmax(388px, 556px) minmax(0, 1fr); align-items: stretch; }
.v3.plain.gen-tool .gen-form-col { padding: 48px 48px 72px 0; }
.v3.plain.gen-tool .gen-preview-col { position: relative; top: auto; padding: 48px 0 72px 48px; }
/* The surface runs to the right edge of the window and the full height of the tool. */
.v3.plain.gen-tool .gen-preview-col::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: -100vw; background: var(--mist); }
.v3.plain.gen-tool .gen-preview-stick { position: sticky; top: 24px; }
.v3.plain.gen-tool .gen-preview-label { font-size: 16px; font-weight: 600; color: var(--ink); margin-bottom: 12px; }
.v3.plain.gen-tool .gen-preview-frame-wrap { border: 0; border-radius: 8px; }
@media (max-width: 1000px) {
  .v3.plain.gen-tool .gen-layout { grid-template-columns: 1fr; }
  .v3.plain.gen-tool .gen-form-col { padding: 32px 0 40px; }
  .v3.plain.gen-tool .gen-preview-col { padding: 32px 0 48px; }
  .v3.plain.gen-tool .gen-preview-col::before { left: -100vw; }
  .v3.plain.gen-tool .gen-preview-stick { position: static; }
}

/* Timesheet pages */
/* /timesheet/: a hero with the download beside a preview of the sheet, the steps as a grid
   of small blocks, the app on a sage panel, then questions. The sheet itself (.ts-paper) is
   hidden on screen and is the only thing printed; the PDFs are Chrome printing the same page. */
.ts-page h1, .ts-page h2, .ts-page h3 { font-weight: 500; }
.ts-hero { padding: 48px 0 0; }
.ts-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 500px; gap: 72px; align-items: center; }
.ts-hero h1 { font-size: 48px; line-height: 1.04; max-width: 13ch; text-wrap: balance; }
.ts-lead { margin-top: 20px; font-size: 17px; line-height: 1.45; color: var(--quiet); max-width: 30em; }
.ts-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; margin-top: 32px; }
.ts-download { display: inline-flex; align-items: baseline; gap: 10px; padding: 17px 24px; font-size: 16px; }
.ts-download .ts-size { font-weight: 400; font-size: 15px; }
.ts-print { background: none; border: 0; padding: 12px 6px; margin: 0; font: 600 17px var(--text); color: var(--ink); cursor: pointer; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.ts-print:hover { text-decoration-thickness: 2px; }
.ts-facts { margin-top: 20px; font-size: 15px; color: var(--quiet); }
.ts-page .byline { margin-top: 6px; font-size: 14px; color: var(--quiet); }
.ts-tile { display: flex; justify-content: center; justify-self: end; background: var(--sage); border-radius: 32px; padding: 40px; }
.ts-preview { width: 420px; height: auto; border-radius: 4px; background: var(--paper); }

.ts-steps { padding: 112px 0 0; }
.ts-page h2 { font-size: 32px; line-height: 1.1; }
.ts-step-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px; margin-top: 36px; }
.ts-step h3 { font-size: 16px; line-height: 1.3; font-weight: 600; }
.ts-step .ts-n { display: block; font-family: var(--head); font-size: 24px; line-height: 1; font-weight: 600; color: var(--green); margin-bottom: 14px; }
.ts-step p { margin-top: 8px; font-size: 16px; line-height: 1.5; color: var(--quiet); }

.ts-app { padding: 112px 0 0; }
.ts-app-panel { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 48px; align-items: center; background: var(--sage); border-radius: 32px; padding: 56px 64px; }
.ts-app h2 { font-size: 29px; }
.ts-app-text p { margin-top: 14px; font-size: 16px; color: var(--ink); max-width: 36em; }
.ts-app .ts-for { margin-top: 18px; font-weight: 600; }
.ts-app .act { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.ts-app .free { margin-top: 12px; }

.ts-qs { padding: 112px 0 0; }
.ts-q-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 32px 48px; margin-top: 32px; }
.ts-q h3 { font-size: 16px; line-height: 1.3; font-weight: 600; }
.ts-q p { margin-top: 8px; font-size: 16px; color: var(--quiet); }
.ts-all { margin-top: 40px; font-weight: 600; }
#role-tools { padding-bottom: 32px; }

/* The index: eight sheets as cards, each a preview on sage, its name and its columns. */
.ts-index-hero h1 { max-width: none; }
.ts-index { padding: 56px 0 0; }
.ts-card-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 48px 32px; }
.ts-card-tile { display: block; background: var(--sage); border-radius: 24px; padding: 24px; }
.ts-thumb { width: 100%; height: auto; border-radius: 3px; background: var(--paper); }
.ts-card h2 { font-size: 17px; line-height: 1.25; font-weight: 600; margin-top: 16px; }
.ts-card h2 a { color: var(--ink); text-decoration: none; }
.ts-card h2 a:hover { text-decoration: underline; }
.ts-card p { margin-top: 6px; font-size: 15px; line-height: 1.45; color: var(--quiet); }
.ts-card .ts-card-pdf { margin-top: 8px; font-weight: 600; }

@media (max-width: 960px) {
  .ts-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .ts-tile { justify-self: stretch; }
  .ts-step-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ts-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ts-app-panel { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 760px) {
  .ts-hero { padding-top: 24px; }
  .ts-hero h1 { font-size: 32px; }
  .ts-lead { font-size: 16px; }
  .ts-tile { padding: 24px; border-radius: 24px; }
  .ts-preview { width: 100%; max-width: 420px; }
  .ts-steps, .ts-app, .ts-qs { padding-top: 72px; }
  .ts-page h2 { font-size: 24px; }
  .ts-step-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 28px; }
  .ts-step .ts-n { display: inline; font-size: 16px; margin: 0 6px 0 0; }
  .ts-step p { margin-top: 4px; }
  .ts-app-panel { padding: 32px 24px; border-radius: 24px; }
  .ts-app h2 { font-size: 22px; }
  .ts-card-grid { gap: 32px 16px; }
  .ts-card-tile { padding: 12px; border-radius: 16px; }
  .ts-card h2 { font-size: 16px; }
  .ts-card p { font-size: 14px; }
}

/* The sheet on paper: US Letter, one page. Lines to write on, a pale header row, no other fill. */
.ts-paper { display: none; }
@media print {
  @page { size: letter portrait; margin: 0.5in; }
  body.ts-page { background: var(--paper); font-size: 10pt; }
  body.ts-page > :not(main), body.ts-page main > :not(.ts-paper) { display: none !important; }
  .ts-paper { display: flex; flex-direction: column; height: 9.9in; color: var(--ink); font-family: var(--text); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .tp-top { display: flex; justify-content: space-between; align-items: baseline; }
  .tp-title { font-family: var(--head); font-size: 20pt; font-weight: 600; line-height: 1.1; }
  .tp-kind { font-size: 10pt; color: var(--quiet); }
  .tp-fields { display: grid; grid-template-columns: 1.3fr 1.3fr 1fr 1fr; gap: 0 18pt; margin-top: 16pt; }
  .tp-field { font-size: 8.5pt; color: var(--quiet); padding-top: 22pt; border-bottom: 0.75pt solid var(--quiet); padding-bottom: 2pt; }
  .tp-table { width: 100%; margin-top: 18pt; border-collapse: collapse; table-layout: fixed; }
  .tp-table { border: 0.75pt solid var(--quiet); }
  .tp-table th, .tp-table td { border: 0.4pt solid var(--quiet); padding: 0 5pt; text-align: left; font-size: 8.5pt; }
  .tp-table thead th { background: var(--sage); font-weight: 600; color: var(--ink); height: 24pt; vertical-align: middle; line-height: 1.15; }
  .tp-table tbody td, .tp-table tbody th { height: 31pt; }
  .tp-days .tp-table tbody td, .tp-days .tp-table tbody th { height: 60pt; }
  .tp-table tbody th { font-weight: 600; font-size: 9.5pt; }
  .tp-totals { display: flex; justify-content: flex-end; gap: 18pt; margin-top: 12pt; }
  .tp-total { display: flex; align-items: center; gap: 7pt; font-size: 9pt; font-weight: 600; }
  .tp-box { display: inline-block; width: 64pt; height: 24pt; border: 0.75pt solid var(--quiet); }
  .tp-sign { display: grid; grid-template-columns: 1fr 1fr; gap: 32pt; margin-top: auto; padding-top: 28pt; }
  .tp-line { border-top: 0.75pt solid var(--ink); padding-top: 4pt; font-size: 8.5pt; color: var(--quiet); }
  .tp-foot { display: flex; align-items: baseline; gap: 8pt; margin-top: 22pt; font-size: 8pt; color: var(--quiet); }
  .tp-mark { font-family: var(--head); font-weight: 600; font-size: 10pt; color: var(--ink); }
}

/* Hours log tool */
/* guides/proof-of-hours-worked.html. A white hero, then the tool on --mist (the light
   neutral the invoice generator's preview uses), holding one white card: the editable
   area reads as the app. Class names keep the "log-" prefix, which the CSS checks treat
   as tool chrome, so the hairline greys below are allowed here and nowhere else. The
   older .tool-* and .log-table rules above are no longer used by the page. */
.log-surface { --log-line: #E4E7E2; --log-field: #D3D7D1; }
.log-hero { padding: 64px 0 36px; }
.log-hero h1 { margin: 0 0 12px; }
.log-lede { color: var(--quiet); font-size: 16px; line-height: 1.5; max-width: 52ch; }
.log-surface { background: var(--mist); padding: 48px 0 56px; }
.log-card { background: var(--paper); border: 1px solid var(--log-line); border-radius: 16px; padding: 28px 32px 0; }
.log-ids { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 680px; margin-bottom: 28px; }
.log-id label { display: block; font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.log-id input, .log-grid input { font: inherit; color: var(--ink); background: var(--paper); border: 1px solid var(--log-field); border-radius: 8px; width: 100%; margin: 0; }
.log-id input { height: 44px; padding: 0 12px; font-size: 16px; }
.log-id input::placeholder, .log-grid input::placeholder { color: var(--quiet); opacity: 0.7; }
.log-id input:focus, .log-grid input:focus { outline: 2px solid var(--green); outline-offset: 0; border-color: var(--green); }
.log-grid { width: 100%; border-collapse: collapse; table-layout: fixed; font-variant-numeric: tabular-nums; }
.log-grid th { text-align: left; font-size: 13px; font-weight: 600; color: var(--quiet); padding: 0 6px 10px; border-bottom: 1px solid var(--log-line); white-space: nowrap; }
.log-grid td { padding: 6px; height: 48px; border-bottom: 1px solid var(--log-line); vertical-align: middle; }
.log-grid th:first-child, .log-grid td:first-child { padding-left: 0; }
.log-grid th:last-child, .log-grid td:last-child { padding-right: 0; }
.log-grid .log-c-date { width: 164px; }
.log-grid .log-c-time { width: 118px; }
.log-grid .log-c-brk { width: 104px; }
.log-grid .log-c-hrs { width: 92px; text-align: right; padding-right: 20px; }
.log-grid .log-c-rm { width: 36px; text-align: right; }
.log-grid input { height: 36px; padding: 0 10px; font-size: 15px; font-variant-numeric: tabular-nums; }
.log-grid input[type="date"] { padding-right: 6px; }
.log-grid input.log-bad { border-color: var(--ink); border-style: dashed; }
.log-hrs { display: block; font-weight: 600; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.log-rm { width: 30px; height: 30px; border: 0; border-radius: 8px; background: none; color: var(--quiet); font: inherit; font-size: 16px; line-height: 1; cursor: pointer; opacity: 0; }
.log-grid tr:hover .log-rm, .log-grid tr:focus-within .log-rm, .log-rm:focus-visible { opacity: 1; }
.log-rm:hover { color: var(--ink); background: var(--mist); }
.log-rm:focus-visible { outline: 2px solid var(--green); }
@media (hover: none) { .log-rm { opacity: 1; } }
.log-add-row { display: block; width: 100%; height: 48px; padding: 0; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--log-line); color: var(--green); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.log-add-row:hover { text-decoration: underline; text-underline-offset: 3px; }
.log-add-row:focus-visible, .log-clear-btn:focus-visible, .log-print-btn:focus-visible, .log-add-btn:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.log-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px 32px; padding: 22px 0 26px; }
.log-stats { display: flex; gap: 40px; margin: 0; }
.log-stats dt { font-size: 13px; font-weight: 600; color: var(--quiet); }
.log-stats dd { margin: 2px 0 0; font-family: var(--head); font-size: 19px; line-height: 1.2; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.log-decimal { font-family: var(--text); font-size: 15px; font-weight: 400; color: var(--quiet); }
.log-acts { display: flex; align-items: center; gap: 20px; }
.log-saved-msg { font-size: 14px; color: var(--green); white-space: nowrap; }
.log-clear-btn { background: none; border: 0; padding: 6px 2px; color: var(--quiet); font: inherit; font-size: 15px; cursor: pointer; }
.log-clear-btn:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.log-print-btn { background: var(--ink); color: var(--paper); border: 0; border-radius: 12px; padding: 14px 20px; font: inherit; font-size: 16px; font-weight: 600; line-height: 1; cursor: pointer; white-space: nowrap; }
.log-add-btn { display: none; }
.log-msg { font-size: 15px; color: var(--ink); margin: -8px 0 0; padding-bottom: 22px; }
.log-week-list { list-style: none; padding: 0; margin: 20px 0 0; display: flex; flex-wrap: wrap; gap: 6px 32px; font-size: 15px; color: var(--quiet); }
.log-week-list li + li { margin-top: 0; }
.log-week-hrs { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.log-sheet { display: none; }
/* Under the tool: four short topics in a 2 by 2 grid, then the app. */
.log-about { padding: 88px 0 120px; }
.log-topics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 72px; }
.log-topic h2, .log-phone h2 { font-size: 21px; line-height: 1.2; margin: 0 0 12px; }
.log-topic p { font-size: 16px; line-height: 1.55; max-width: 52ch; }
.log-topic p + p { margin-top: 10px; }
.log-phone { display: flex; align-items: center; justify-content: space-between; gap: 32px 64px; margin-top: 88px; padding-top: 48px; border-top: 1px solid var(--line); }
.log-phone-copy p { font-size: 16px; line-height: 1.55; max-width: 60ch; }
.log-phone-act { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; flex-shrink: 0; }

@media (max-width: 1000px) and (min-width: 761px) {
  .log-card { padding: 24px 24px 0; }
  .log-grid .log-c-date { width: 150px; }
  .log-grid .log-c-time { width: 100px; }
  .log-grid .log-c-brk { width: 84px; }
  .log-grid .log-c-hrs { width: 80px; padding-right: 12px; }
}

/* Phones: one card per day on the mist, and the totals, Add and Print pinned to the
   bottom of the tool while it is on screen. */
@media (max-width: 760px) {
  .log-hero { padding: 36px 0 24px; }
  .log-hero h1 { font-size: 32px; }
  .log-lede { font-size: 16px; }
  .log-surface { padding: 16px 0 0; }
  .log-card { background: none; border: 0; border-radius: 0; padding: 0; }
  .log-ids { grid-template-columns: minmax(0, 1fr); gap: 12px; background: var(--paper); border: 1px solid var(--log-line); border-radius: 12px; padding: 14px; margin-bottom: 12px; }
  .log-grid, .log-grid tbody { display: block; }
  .log-grid thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .log-grid tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) 30px; grid-template-areas: "date date hrs rm" "start end brk brk" "note note note note"; gap: 10px 10px; background: var(--paper); border: 1px solid var(--log-line); border-radius: 12px; padding: 12px 12px 14px; margin-bottom: 10px; }
  .log-grid td { display: block; width: auto !important; height: auto; padding: 0 !important; border: 0; text-align: left; }
  .log-grid td::before { content: attr(data-label); display: block; font-size: 12px; font-weight: 600; color: var(--quiet); margin-bottom: 4px; }
  .log-grid td.log-c-date::before, .log-grid td.log-c-rm::before { content: none; }
  .log-grid .log-c-date { grid-area: date; }
  .log-grid .log-c-start { grid-area: start; }
  .log-grid .log-c-end { grid-area: end; }
  .log-grid .log-c-brk { grid-area: brk; }
  .log-grid .log-c-note { grid-area: note; }
  .log-grid .log-c-hrs { grid-area: hrs; text-align: right; align-self: center; }
  .log-grid .log-c-hrs::before { content: none; }
  .log-grid .log-c-rm { grid-area: rm; align-self: center; text-align: right; }
  .log-grid input { height: 42px; font-size: 16px; padding: 0 10px; }
  .log-grid .log-c-date input { font-weight: 600; }
  .log-hrs { font-family: var(--head); font-size: 16px; font-weight: 700; }
  .log-rm { opacity: 1; }
  .log-add-row { display: none; }
  .log-bar { position: sticky; bottom: 0; z-index: 2; display: block; margin: 6px calc(-1 * var(--gutter)) 0; padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom)); background: var(--mist); border-top: 1px solid var(--log-line); }
  .log-stats { gap: 20px; padding-right: 56px; }
  .log-stats dt { font-size: 12px; }
  .log-stats dd { font-size: 16px; margin-top: 0; }
  .log-decimal { font-size: 13px; }
  .log-acts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 10px; }
  .log-saved-msg { display: none; }
  .log-clear-btn { position: absolute; top: 12px; right: var(--gutter); font-size: 14px; }
  .log-add-btn { display: block; width: 100%; height: 44px; background: var(--paper); color: var(--ink); border: 1px solid var(--log-field); border-radius: 12px; font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; }
  .log-print-btn { width: 100%; height: 44px; padding: 0 16px; }
  .log-msg { margin: 0; padding: 8px 0 12px; }
  .log-week-list { margin: 16px 0 0; padding-bottom: 24px; }
  .log-about { padding: 56px 0 88px; }
  .log-topics { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .log-topic h2, .log-phone h2 { font-size: 18px; }
  .log-phone { display: block; margin-top: 56px; padding-top: 36px; }
  .log-phone-act { margin-top: 24px; }
}

/* Print: only the filled sheet, as a plain dated record with a signature line. */
@media print {
  body:has(.log-sheet) main > section:not(.log-sheet) { display: none; }
  .log-sheet { display: block; color: var(--ink); font-size: 11pt; line-height: 1.4; }
  .log-sheet h2 { font-size: 20pt; margin: 0 0 6pt; }
  .log-sheet-meta { font-size: 10.5pt; color: var(--ink); margin: 0 0 16pt; max-width: none; }
  .log-sheet-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
  .log-sheet-table th { text-align: left; font-size: 9pt; font-weight: 600; color: var(--quiet); padding: 0 8pt 5pt 0; border-bottom: 1.5pt solid var(--ink); }
  .log-sheet-table td { font-weight: 400; padding: 6pt 8pt 6pt 0; border-bottom: 0.75pt solid var(--quiet); vertical-align: top; }
  .log-sheet-table .num { text-align: right; white-space: nowrap; }
  .log-sheet-table tfoot td { font-weight: 700; border-top: 1.5pt solid var(--ink); border-bottom: 0; }
  .log-sheet-table tr { break-inside: avoid; }
  .log-sheet-sign { display: grid; grid-template-columns: 2fr 1fr; gap: 24pt; margin-top: 40pt; break-inside: avoid; }
  .log-sheet-sign div { border-top: 0.75pt solid var(--ink); padding-top: 4pt; font-size: 9pt; color: var(--quiet); }
  .log-sheet-foot { margin-top: 18pt; font-size: 9pt; color: var(--quiet); max-width: none; }
}

/* Invoice generator: the help under the tool. A calm surface (--mist) with white rounded cards,
   one card per topic, and questions as accordion rows. Headings 28 to 32px, body 17px. */
.v3.plain.gen-tool .gen-page { isolation: isolate; }
.v3.plain.gen-tool .help,
.v3.plain.gen-tool .landing-prose { position: relative; max-width: none; padding: 72px 0 96px; margin: 0; }
.v3.plain.gen-tool .help::before,
.v3.plain.gen-tool .landing-prose::before { content: ""; position: absolute; top: 0; bottom: 0; left: -100vw; right: -100vw; background: var(--mist); z-index: -1; }
.help .landing-updated, .landing-prose .landing-updated { margin: 0 0 20px; font-size: 14px; color: var(--quiet); }
.help-sec, .landing-prose .landing-block { background: var(--paper); border-radius: 28px; padding: 44px 48px; margin: 0; }
.help-sec + .help-sec, .landing-prose .landing-block + .landing-block { margin-top: 24px; }
.help-sec h2, .landing-prose .landing-block h2 { font-family: var(--head); font-size: 24px; line-height: 1.15; font-weight: 600; margin: 0; max-width: 30ch; }
.help-lead { margin: 10px 0 0; font-size: 16px; line-height: 1.5; color: var(--quiet); max-width: 62ch; }
.help-sec p, .landing-prose .landing-block p { font-size: 16px; line-height: 1.55; max-width: 62ch; }
.help-grid { display: grid; gap: 16px; margin-top: 28px; }
.help-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.help-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.help-card, .help-opt { background: var(--mist); border-radius: 20px; padding: 28px; }
.help-card h3, .help-opt h3 { font-family: var(--head); font-size: 16px; line-height: 1.25; font-weight: 600; margin: 0 0 10px; }
.help-card p, .help-opt p { margin: 0; color: var(--quiet); }
.help-card p + p, .help-opt p + p { margin-top: 10px; }
.help-after { margin-top: 24px; color: var(--quiet); }
.help-sec .landing-table-wrap { margin-top: 24px; }
.help-sec .landing-table-note { margin-top: 12px; }
.help-compare { display: grid; gap: 16px; margin-top: 28px; }
.help-compare.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.help-compare.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.help-opt h3 { color: var(--green); }
.help-check { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.help-ticks { list-style: none; margin: 28px 0 0; padding: 0; }
.help-ticks li { position: relative; padding: 13px 0 13px 40px; font-size: 16px; line-height: 1.4; border-top: 1px solid var(--line); }
.help-ticks li:first-child { border-top: 0; }
.help-ticks li::before { content: ""; position: absolute; left: 4px; top: 16px; width: 20px; height: 20px; border-radius: 50%; background: var(--green); }
.help-ticks li::after { content: ""; position: absolute; left: 11px; top: 21px; width: 5px; height: 9px; border: solid var(--paper); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.help-note { margin-top: 20px; color: var(--quiet); }
.help-sample { background: var(--mist); border-radius: 24px; padding: 32px; }
.help-doc { background: var(--paper); border-radius: 8px; padding: 26px 26px 22px; font-size: 13px; line-height: 1.4; color: var(--ink); }
.help-doc small { display: block; font-size: 11px; color: var(--quiet); margin-bottom: 2px; }
.help-doc span { display: block; }
.hd-top { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 14px; border-bottom: 2px solid var(--ink); }
.hd-top .hd-title { font-family: var(--head); font-size: 16px; font-weight: 700; }
.hd-top span:last-child { color: var(--quiet); }
.hd-parties { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 12px; padding: 16px 0; }
.help-doc table { width: 100%; border-collapse: collapse; margin-top: 4px; font-size: 12px; }
.help-doc th { text-align: left; font-weight: 600; color: var(--quiet); font-size: 11px; padding: 8px 6px 8px 0; border-bottom: 1px solid var(--line); }
.help-doc td { padding: 10px 6px 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.help-doc th:nth-child(n+2), .help-doc td:nth-child(n+2) { text-align: right; padding-left: 18px; white-space: nowrap; }
.help-doc th:last-child, .help-doc td:last-child { padding-right: 0; }
.help-doc td:nth-child(3), .help-doc td:nth-child(4) { color: var(--quiet); }
.hd-total { display: flex; justify-content: space-between; align-items: center; margin: 16px 0 0 auto; width: 58%; background: var(--mist); border-radius: 8px; padding: 10px 12px; }
.hd-total .hd-sum { font-size: 15px; font-weight: 600; }
.hd-pay { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.help-faq { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start; }
.help-rows { border-top: 1px solid var(--line); }
.help-q { border-bottom: 1px solid var(--line); }
.help-q summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 20px 0; font-size: 16px; line-height: 1.35; font-weight: 600; }
.help-q summary::-webkit-details-marker { display: none; }
.help-q summary::after { content: ""; flex: none; width: 9px; height: 9px; border: solid var(--green); border-width: 0 2px 2px 0; transform: rotate(45deg); margin-top: -4px; }
.help-q[open] summary::after { transform: rotate(-135deg); margin-top: 4px; }
.help-a { padding: 0 0 22px; }
.help-a p { margin: 0; color: var(--quiet); }
.help-a p + p { margin-top: 10px; }
/* The closing card: words and actions on the left, a whole phone on the right, about the same height. */
.help-app { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; align-items: center; }
.help-app h2 { margin-bottom: 20px; }
.help-app p + p { margin-top: 14px; }
.help-app-act { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 28px; }
.help-app .help-app-free { margin-top: 16px; font-size: 15px; color: var(--quiet); }
.help-app .help-app-free a { color: var(--ink); text-decoration: underline; }
.help-app-shot { display: flex; justify-content: center; }
.help-app-shot .phone { width: 250px; }
.landing-prose { display: block; }
@media (max-width: 1000px) {
  .help-grid.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .help-check, .help-faq { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .help-app { grid-template-columns: minmax(0, 1fr); gap: 36px; }
}
@media (max-width: 640px) {
  .v3.plain.gen-tool .help, .v3.plain.gen-tool .landing-prose { padding: 40px 0 56px; }
  .help-sec, .landing-prose .landing-block { border-radius: 24px; padding: 28px 20px; }
  .help-sec + .help-sec, .landing-prose .landing-block + .landing-block { margin-top: 16px; }
  .help-sec h2, .landing-prose .landing-block h2 { font-size: 21px; }
  .help-grid.cols-3, .help-grid.cols-2, .help-compare.cols-2, .help-compare.cols-3 { grid-template-columns: minmax(0, 1fr); }
  .help-card, .help-opt { padding: 22px; }
  .help-sample { padding: 16px; border-radius: 20px; }
  .help-doc { padding: 18px 16px; }
  .hd-parties { grid-template-columns: 1fr 1fr; }
  .hd-total { width: 100%; }
}

/* Help center */
/* help.html, modelled on offwegosim.com/help: the whole page on --mist, a search under a
   short header, a sticky topic list with counts on the left (sideways chips on phones), and
   one white card per topic holding native details rows. The label "Browse topics" stays in
   sentence case: the reference sets it in small capitals, our rules ban uppercase. */
body.help-page { background: var(--mist); }
.v3.plain.help-page .nav { background: var(--mist); }
.help-page .footer { border-top: 1px solid var(--line); }

.hc-hero { padding: 56px 0 36px; text-align: center; }
.hc-hero .container { max-width: calc(720px + 2 * var(--gutter)); }
.hc-hero h1 { font-size: 45px; line-height: 1.05; }
.hc-lede { margin: 14px auto 0; font-size: 16px; line-height: 1.45; color: var(--quiet); max-width: 40ch; }
.hc-search-field { margin: 32px auto 0; text-align: left; }
.hc-search-field label { display: block; font-size: 14px; font-weight: 600; margin: 0 0 8px 2px; }
.hc-search { display: flex; align-items: center; gap: 12px; height: 58px; padding: 0 18px; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; color: var(--quiet); transition: border-color .15s ease; }
.hc-search:hover { border-color: var(--quiet); }
.hc-search:focus-within { border-color: var(--green); outline: 2px solid var(--green); outline-offset: 2px; }
.hc-search svg { flex: none; }
.hc-search input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; font: inherit; font-size: 16px; color: var(--ink); }
.hc-search input:focus-visible { outline: none; }
.hc-search input::placeholder { color: var(--quiet); }
.hc-popular { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; margin: 16px auto 0; font-size: 14px; color: var(--quiet); max-width: none; }

.hc-body { padding: 16px 0 72px; }
.hc-layout { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 40px; align-items: start; }
.hc-topics { position: sticky; top: 24px; min-width: 0; }
.hc-label { margin: 2px 0 10px 12px; font-size: 13px; font-weight: 600; color: var(--quiet); }
.hc-topics ul { list-style: none; margin: 0; padding: 0; }
.hc-topics li + li { margin-top: 2px; }
.hc-topics a[data-topic] { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 10px; font-size: 15px; line-height: 1.3; color: var(--quiet); text-decoration: none; transition: background-color .15s ease, color .15s ease; }
.hc-topics a[data-topic]:hover { background: var(--paper); color: var(--ink); }
.hc-topics a[aria-current="true"], .hc-topics a[aria-current="true"]:hover { background: var(--sage); color: var(--green); font-weight: 600; }
.hc-count { flex: none; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--quiet); }
.hc-topics a[aria-current="true"] .hc-count { color: var(--green); }
.hc-contact-link { display: inline-block; margin: 18px 0 0 12px; font-size: 15px; font-weight: 600; text-decoration: none; }
.hc-contact-link:hover { text-decoration: underline; }
.hc-topics a:focus-visible, .hc-popular a:focus-visible, .hc-a a:focus-visible, .hc-contact a:focus-visible, .hc-empty a:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

.hc-answers { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.hc-results { font-size: 14px; color: var(--quiet); margin: 10px 0 -6px; }
.hc-card { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 28px 32px 6px; scroll-margin-top: 24px; }
.hc-card-head { padding-bottom: 14px; }
.hc-card-head h2 { font-size: 21px; line-height: 1.2; }
.hc-card-head p { margin-top: 6px; font-size: 15px; color: var(--quiet); }
.hc-q { border-top: 1px solid var(--line); scroll-margin-top: 96px; }
.hc-q summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 0; border-radius: 6px; }
.hc-q summary::-webkit-details-marker { display: none; }
.hc-q summary::after { content: ""; flex: none; width: 8px; height: 8px; margin: -4px 4px 0 0; border: solid var(--quiet); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .18s ease, border-color .15s ease; }
.hc-q[open] summary::after { transform: rotate(-135deg); margin-top: 4px; border-color: var(--green); }
.hc-q summary h3 { font-family: var(--text); font-size: 16px; line-height: 1.4; font-weight: 600; transition: color .15s ease; }
.hc-q summary:hover h3, .hc-q summary:hover::after { color: var(--green); border-color: var(--green); }
.hc-q summary:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; }
.hc-q mark { background: var(--sage); color: inherit; border-radius: 3px; padding: 0 1px; }
.hc-flash summary h3 { color: var(--green); }
.hc-a { padding: 0 44px 22px 0; }
.hc-a p { font-size: 16px; line-height: 1.6; color: var(--quiet); max-width: 64ch; }
.hc-a p + p { margin-top: 10px; }

.hc-empty { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 40px 32px; text-align: center; }
.hc-empty h2 { font-size: 18px; }
.hc-empty p { margin: 8px auto 20px; font-size: 16px; color: var(--quiet); }
.hc-reset { font: inherit; font-size: 15px; font-weight: 600; color: var(--ink); background: var(--paper); border: 1px solid var(--ink); border-radius: 999px; padding: 10px 18px; cursor: pointer; }
.hc-reset:hover { background: var(--sage); border-color: var(--line); }
.hc-reset:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

.hc-contact { padding: 64px 0 80px; border-top: 1px solid var(--line); scroll-margin-top: 24px; }
.hc-contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.hc-contact h2 { font-size: 27px; }
.hc-contact-grid > div > p { margin-top: 12px; color: var(--quiet); }
.hc-contact-card { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 28px; }
.hc-contact-card h3 { font-size: 16px; margin-bottom: 16px; }
.hc-contact-card .small { margin-top: 16px; }

@media (prefers-reduced-motion: reduce) {
  .hc-search, .hc-topics a[data-topic], .hc-q summary::after, .hc-q summary h3 { transition: none; }
}
@media (max-width: 1000px) {
  .hc-layout { grid-template-columns: 200px minmax(0, 1fr); gap: 24px; }
  .hc-card { padding: 24px 24px 4px; }
}
@media (max-width: 760px) {
  .hc-hero { padding: 32px 0 20px; }
  .hc-hero h1 { font-size: 32px; }
  .hc-lede { font-size: 16px; }
  .hc-search-field { margin-top: 24px; }
  .hc-search { height: 52px; padding: 0 14px; }
  .hc-popular { justify-content: flex-start; font-size: 13px; gap: 6px 14px; }
  .hc-body { padding: 8px 0 48px; }
  .hc-layout { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .hc-topics { position: static; }
  .hc-label { display: none; }
  .hc-topics ul { display: flex; gap: 8px; overflow-x: auto; margin: 0 calc(-1 * var(--gutter)); padding: 2px var(--gutter) 8px; scrollbar-width: none; scroll-padding: 0 var(--gutter); }
  .hc-topics ul::-webkit-scrollbar { display: none; }
  .hc-topics li { flex: none; }
  .hc-topics li + li { margin-top: 0; }
  .hc-topics a[data-topic] { padding: 9px 14px; gap: 10px; white-space: nowrap; background: var(--paper); border: 1px solid var(--line); }
  .hc-topics a[aria-current="true"], .hc-topics a[aria-current="true"]:hover { background: var(--sage); border-color: var(--line); }
  .hc-contact-link { margin: 6px 0 0 2px; font-size: 14px; }
  .hc-answers { gap: 14px; }
  .hc-results { margin: 4px 0 -2px; font-size: 13px; }
  .hc-card { padding: 22px 20px 2px; border-radius: 14px; }
  .hc-card-head h2 { font-size: 18px; }
  .hc-card-head p { font-size: 14px; }
  .hc-q summary { padding: 16px 0; gap: 16px; }
  .hc-q summary h3 { font-size: 16px; }
  .hc-a { padding-right: 0; }
  .hc-a p { font-size: 15px; }
  .hc-contact { padding: 48px 0 56px; }
  .hc-contact-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .hc-contact h2 { font-size: 22px; }
  .hc-contact-card { padding: 22px; }
}

/* about page v3 */
/* About, after Linear, Stripe and Notion: a left-aligned headline on white, one row of work photos,
   heading-left text-right sections with short paragraphs, plain rows for beliefs, and link rows to close. */
.v3.plain.about-page .nav { background: var(--paper); }
.about-page .ab-hero { padding: 96px 0 48px; background: var(--paper); }
.about-page .ab-kicker { font-size: 15px; font-weight: 600; color: var(--green); margin: 0 0 16px; }
.about-page .ab-hero h1 { font-size: 45px; line-height: 1.05; font-weight: 600; max-width: 14ch; }
.about-page .ab-lede { margin-top: 20px; font-size: 16px; line-height: 1.5; color: var(--quiet); max-width: 34em; }
.about-page .ab-photos .wrap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding-top: 24px; padding-bottom: 40px; }
.about-page .ab-photos img { display: block; width: 100%; height: auto; border-radius: 16px; }
.about-page .ab-split .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: 48px; padding-top: 56px; padding-bottom: 56px; border-top: 1px solid var(--line); }
.about-page .ab-split h2 { font-size: 22px; line-height: 1.2; font-weight: 600; }
.about-page .ab-text p { font-size: 16px; line-height: 1.6; color: var(--ink); max-width: 36em; margin: 0; }
.about-page .ab-text p + p { margin-top: 16px; }
.about-page .ab-rows { margin: 0; }
.about-page .ab-rows > div { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 24px; padding: 18px 0; border-top: 1px solid var(--line); }
.about-page .ab-rows > div:first-child { border-top: 0; padding-top: 0; }
.about-page .ab-rows dt { font-size: 16px; font-weight: 600; color: var(--ink); }
.about-page .ab-rows dd { margin: 0; font-size: 16px; line-height: 1.55; color: var(--quiet); }
.about-page .ab-links .wrap { padding-top: 24px; padding-bottom: 96px; }
.about-page .ab-links a { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 20px 0; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: 16px; }
.about-page .ab-links a:last-child { border-bottom: 1px solid var(--line); }
.about-page .ab-links span:not(.go) { color: var(--quiet); }
.about-page .ab-links .go { font-weight: 600; }
.about-page .ab-links .go::after { content: " \203A"; }
.about-page .ab-links a:hover .go { color: var(--green); }
@media (max-width: 760px) {
  .about-page .ab-hero { padding: 56px 0 32px; }
  .about-page .ab-hero h1 { font-size: 30px; }
  .about-page .ab-lede { font-size: 16px; }
  .about-page .ab-photos .wrap { grid-template-columns: minmax(0, 1fr); padding-bottom: 24px; }
  .about-page .ab-photos img + img { display: none; }
  .about-page .ab-split .wrap { grid-template-columns: minmax(0, 1fr); gap: 16px; padding-top: 40px; padding-bottom: 40px; }
  .about-page .ab-split h2 { font-size: 19px; }
  .about-page .ab-rows > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .about-page .ab-links a { flex-direction: column; gap: 4px; }
}

/* footer v3: column titles read as titles, not links */
.footer h3 { font-weight: 600; color: var(--ink); }

/* feature pages v3 */
/* Time tracking and Invoicing: a short outcome headline, one sub-line, the outcome as a picture
   right under it, then text-and-picture rows, a compact card grid, two-column questions and a calm close. */
.v3.plain.fp .page-hero.fp-hero { padding: 64px 0 0; overflow: hidden; }
.v3.plain.fp .fp-hero h1 { font-size: 46px; line-height: 1.04; font-weight: 500; max-width: none; text-wrap: balance; }
.v3.plain.fp .fp-hero p { margin-top: 16px; font-size: 17px; max-width: 32em; text-wrap: balance; }
.v3.plain.fp .fp-hero .cta-actions { margin-top: 28px; }
.fp-stage { display: flex; justify-content: center; align-items: flex-start; gap: 32px; height: 520px; margin-top: 56px; overflow: hidden; }
.fp-stage .fp-shot { width: 230px; height: auto; border-radius: 36px 36px 0 0; background: var(--paper); flex: none; }
.fp-stage .fp-doc { width: 400px; border-radius: 12px 12px 0 0; margin-top: 48px; }

.fp-rows { padding: 64px 0 16px; }
.fp-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 72px; align-items: center; padding: 48px 0; }
.fp-row.flip .fp-text { order: 2; }
.v3.plain.fp .fp-row h2, .v3.plain.fp .fp-more h2, .v3.plain.fp .fp-faq h2, .v3.plain.fp .fp-close h2 { font-size: 27px; line-height: 1.1; font-weight: 500; }
.fp-text p { margin-top: 14px; font-size: 16px; color: var(--quiet); max-width: 28em; }
.fp-tile { background: var(--sage); border-radius: 28px; padding: 40px; display: flex; justify-content: center; align-items: center; }
.fp-tile img { display: block; width: 100%; max-width: 480px; height: auto; border-radius: 14px; }

.fp-more { padding: 64px 0 0; }
.fp-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 32px; }
.fp-card { background: var(--sage); border-radius: 24px; padding: 24px; }
.fp-card h3 { font-size: 16px; line-height: 1.25; font-weight: 600; }
.fp-card p { margin-top: 6px; font-size: 16px; color: var(--quiet); }
.fp-pic { height: 168px; margin-bottom: 20px; display: flex; align-items: center; }
.fp-pic img { display: block; width: 100%; height: auto; border-radius: 12px; }
.fp-pic.top { overflow: hidden; border-radius: 12px; }
.fp-pic.top img { height: 100%; object-fit: cover; object-position: top; }

.fp-faq { padding: 112px 0 0; }
.fp-qs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 48px; }
.fp-qs .faq-item { margin-top: 32px; }
.fp-qs .faq-item h3 { font-size: 16px; line-height: 1.3; font-weight: 600; }
.fp-qs .faq-item p { font-size: 16px; color: var(--quiet); }

.fp-close { padding: 112px 0 128px; text-align: center; }
.fp-close .cta-actions { justify-content: center; margin-top: 24px; }
.fp-close .landing-note { margin: 16px auto 0; max-width: none; }

@media (max-width: 760px) {
  .v3.plain.fp .page-hero.fp-hero { padding-top: 40px; }
  .v3.plain.fp .fp-hero h1 { font-size: 30px; }
  .v3.plain.fp .fp-hero p { font-size: 16px; }
  .fp-stage { height: 360px; gap: 12px; margin-top: 40px; padding: 0 var(--gutter); }
  .fp-stage .fp-shot { width: calc(50% - 6px); max-width: 200px; border-radius: 24px 24px 0 0; }
  .fp-stage .fp-doc { width: calc(50% - 6px); max-width: 220px; border-radius: 8px 8px 0 0; margin-top: 28px; }
  .fp-rows { padding: 40px 0 0; }
  .fp-row { grid-template-columns: 1fr; gap: 24px; padding: 32px 0; }
  .fp-row.flip .fp-text { order: 0; }
  .v3.plain.fp .fp-row h2, .v3.plain.fp .fp-more h2, .v3.plain.fp .fp-faq h2, .v3.plain.fp .fp-close h2 { font-size: 22px; }
  .fp-text p { font-size: 16px; }
  .fp-tile { padding: 20px; border-radius: 22px; }
  .fp-more { padding-top: 40px; }
  .fp-cards { grid-template-columns: 1fr; gap: 16px; margin-top: 24px; }
  .fp-pic { height: auto; max-height: 160px; }
  .fp-pic.top { height: 160px; }
  .fp-faq { padding-top: 72px; }
  .fp-qs { grid-template-columns: 1fr; }
  .fp-qs .faq-item { margin-top: 24px; }
  .fp-close { padding: 72px 0 88px; }
}

/* pricing table: a quiet second line under a row label */
.compare .row-sub { display: block; margin-top: 2px; font-size: 14px; color: var(--quiet); }
.fp .fp-langs { margin-top: 8px; font-size: 14px; color: var(--quiet); opacity: 0.85; }

/* Home hero fits the first screen: the promise, then the whole photo in the space that is left. */
.v3-hero { min-height: 100svh; display: flex; flex-direction: column; }
.v3-hero .intro { padding-top: 24px; }
.v3-hero .v3-scene { flex: 1 1 0; height: auto; min-height: 320px; margin-top: 28px; overflow: visible; }
.v3-hero .v3-frame { position: absolute; inset: 0 var(--gutter) 32px; display: flex; justify-content: center; }
.v3-hero .v3-frame > .ph { width: auto; height: 100%; max-width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 24px; }
.v3-hero .v3-frame { container-type: size; }
.v3-hero .v3-frame .v3-card { top: 20px; right: max(20px, calc((100% - min(100%, 100cqh * 16 / 9)) / 2 + 20px)); width: min(340px, 34%); border-radius: 18px; }
@media (max-width: 760px) {
  .v3-hero { min-height: 0; }
  .v3-hero .v3-scene { flex: none; height: 440px; margin-top: 24px; }
  .v3-hero .v3-frame { inset: 0; }
  .v3-hero .v3-frame > .ph { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; }
  .v3-hero .v3-frame .v3-card { top: 16px; left: 16px; right: auto; width: calc(100% - 32px); }
}

/* Two pictures as one (owner, 29 Oct 2026): a second image peeks from behind or over the first. */
.v3-tile.wide.peek { position: relative; height: 480px; padding: 20px 0 0; align-items: flex-start; justify-content: center; }
.v3-tile.peek .lock { width: 210px; height: auto; border-radius: 32px; flex: none; }
.v3-tile.wide.peek .shot { width: 460px; margin: 110px 0 0 -100px; align-self: flex-start; position: relative; z-index: 1; border-radius: 20px; outline: 8px solid var(--sage); }
.v3-tile.cut.has-sheet { position: relative; min-height: 500px; max-height: none; }
.v3-tile.cut.has-sheet .shot { transform: translateX(-170px); }
.v3-sheet { position: absolute; top: 110px; left: calc(50% - 10px); width: 330px; z-index: 1; background: var(--paper); border-radius: 16px; padding: 18px 22px 8px; text-align: left; outline: 8px solid var(--sage); }
.v3-sheet-h { font-size: 13px; font-weight: 600; color: var(--quiet); margin: 0 0 6px; }
.v3-sheet .v3-money { margin: 0; width: 100%; font-size: 15px; }
@media (max-width: 760px) {
  .v3-tile.wide.peek { height: 420px; padding: 16px 0 0; }
  .v3-tile.peek .lock { width: 176px; border-radius: 24px; }
  .v3-tile.wide.peek .shot { width: 60%; margin: 90px 0 0 -80px; border-radius: 14px; outline-width: 6px; }
  .v3-tile.cut.has-sheet { flex-direction: column; align-items: center; min-height: 0; }
  .v3-tile.cut.has-sheet .shot { transform: none; }
  .v3-sheet { position: relative; top: auto; left: auto; width: calc(100% - 32px); margin: -96px 16px 16px; }
}

/* Soft backgrounds: picture tiles alternate cool and warm down the page, like the reference. */
main > section:nth-of-type(even) .v3-tile, main > section:nth-of-type(even) .fp-tile { background: var(--warm); }

/* Invoice generator: one generic tool, and a row of role icons for an invoice made for that work. */
.gen-roles { margin-top: 64px; }
.gen-roles h2 { font-size: 27px; }
.gen-role-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }
.gen-role { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; color: var(--ink); text-decoration: none; font-size: 14px; line-height: 1.3; }
.gen-role img { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; }
.gen-role:hover span { color: var(--green); }
@media (max-width: 760px) {
  .gen-role-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px 12px; }
  .gen-role img { width: 64px; height: 64px; }
  .gen-role { font-size: 13px; }
}

/* A role's three pages link each other: two quiet cards in the page body. */
.role-tools .wrap { padding-top: 64px; padding-bottom: 8px; }
.role-tools h2 { font-size: 22px; }
.role-tools-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 20px; max-width: 760px; }
.role-tools-grid a { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 16px; color: var(--ink); text-decoration: none; }
.role-tools-grid a:hover { border-color: var(--ink); }
.role-tools .rt-title { font-weight: 600; font-size: 16px; }
.role-tools .rt-title::after { content: " \203A"; }
.role-tools .rt-sub { font-size: 14px; color: var(--quiet); }

/* Language: a globe and the current code in the header, on every page. */
.lang-globe { display: inline-flex; align-items: center; gap: 5px; color: var(--quiet); text-decoration: none; font-size: 12px; font-weight: 500; letter-spacing: 0.02em; }
.lang-globe:hover { color: var(--ink); text-decoration: none; }
#lang-toggle.has-globe .lang-option, #lang-toggle.has-globe .lang-divider { display: none; }
.nav-links #lang-toggle, .nav-links > .lang-globe { order: 1; }

/* Header and footer after apple.com (owner, 29 Oct 2026): a quiet bar with a hairline, small grey
   links and a pill button; a grey footer that opens with an icon breadcrumb, bold column titles
   over grey links, a help line, then the fine print. */
.nav { padding: 0; }
.nav .wrap { padding-top: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.logo { font-size: 19px; }
.nav-links { gap: 26px; }
.nav-links a { color: var(--quiet); }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--ink); text-decoration: none; }
.nav .btn { background: var(--green); color: var(--paper); border-radius: 999px; padding: 8px 16px; font-size: 13px; font-weight: 500; }
.footer { background: var(--mist); padding: 0 0 40px; font-size: 13px; }
.footer .wrap { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 32px; padding-top: 0; }
.footer .brand { grid-column: 1 / -1; display: flex; align-items: center; padding: 14px 0; margin-bottom: 28px; border-bottom: 1px solid var(--line); }
.footer .brand p { display: none; }
.footer .brand .logo { display: inline-flex; align-items: center; margin: 0; font-size: 14px; font-weight: 400; }
.footer .brand .logo::before { content: "\203A"; display: inline-block; padding-left: 34px; margin-right: 12px; color: var(--quiet); font-size: 18px; line-height: 20px; background: url(/images/brand/icon-192.png) left center / 22px 22px no-repeat; }
.footer h3 { font-size: 13px; font-weight: 600; margin-bottom: 14px; }
.footer a { margin-bottom: 11px; }
.footer .fine { margin-top: 14px; font-size: 12px; max-width: none; }
@media (max-width: 760px) {
  .nav .wrap { padding-top: 10px; padding-bottom: 10px; }
  .footer .wrap { grid-template-columns: 1fr 1fr; gap: 0 20px; }
  .footer .wrap > div:not(.brand) { margin-bottom: 20px; }
}

/* Spacing fixes (owner, 29 Oct 2026): a closing band with no photo under it keeps room below its
   buttons; the role tools block sits in the space the section above leaves, with room below. */
.v3-close:not(:has(.v3-scene)):not(:has(.stage)) { padding-bottom: 128px; }
.role-tools .wrap { padding-top: 0; padding-bottom: 120px; }
@media (max-width: 760px) {
  .v3-close:not(:has(.v3-scene)):not(:has(.stage)) { padding-bottom: 72px; }
  .role-tools .wrap { padding-bottom: 72px; }
}
/* On a timesheet or a generator the block follows content that ends without its own gap. */
.role-tools:not(:has(+ .v3-close)) .wrap { padding-top: 88px; }
@media (max-width: 760px) { .role-tools:not(:has(+ .v3-close)) .wrap { padding-top: 56px; } }
/* The last section of a page keeps room above the footer, unless it is a shaded band that meets it. */
main > .ts-app:last-child, main > .gen-page:last-child { margin-bottom: 120px; }
@media (max-width: 760px) { main > .ts-app:last-child, main > .gen-page:last-child { margin-bottom: 64px; } }