/* Pingtail design system: one stylesheet, light + dark (system preference, overridable with data-theme). Mobile-first:
   every layout stacks to one column on small screens, tap targets are at least 44px, photos keep their box (no layout shift). */
/* Bricolage Grotesque (SIL OFL, fonts/OFL.txt): one variable family for display and text; the optical-size axis keeps headlines
   tight and body text plain. Self-hosted, so the strict CSP (default-src 'self') needs no font-src exception. */
@font-face { font-family: "Bricolage"; font-style: normal; font-weight: 300 800; font-display: swap;
  src: url("/static/fonts/bricolage-grotesque-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Bricolage"; font-style: normal; font-weight: 300 800; font-display: swap;
  src: url("/static/fonts/bricolage-grotesque-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* Palette: paper, ledger grey, deep navy ink and a bookkeeper's stamp blue. Green and red are verdict colours, never decoration. */
:root {
  --bg: #f6f7f9; --surface: #ffffff; --surface-2: #e9edf2; --ink: #0f1b2d; --ink-2: #4b5768; --line: #d6dce4;
  --accent: #1e4db7; --accent-ink: #ffffff; --accent-soft: #e4ebfa; --accent-deep: #163c93; --ok: #157a4a; --warn: #8a5a00; --bad: #c0392b;
  --focus: #1e4db7; --radius: 12px; --shadow: 0 1px 2px rgba(15, 27, 45, .05), 0 8px 24px rgba(15, 27, 45, .06);
  --font: "Bricolage", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  --img-dim: 1; --photo-shade: rgba(10, 16, 26, .66); --tap: 44px;
  --sp-section: clamp(56px, 8vw, 96px); --sp-section-tight: clamp(40px, 5vw, 52px); --surface-dark: #0b1730;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f141c; --surface: #161c26; --surface-2: #1d2532; --ink: #e8ebf0; --ink-2: #a9b3c1; --line: #2c3645;
    --accent: #8fb0ff; --accent-ink: #0b1730; --accent-soft: #1f2c47; --accent-deep: #a9c2ff; --ok: #5ccf96; --warn: #e5b84a; --bad: #ff8a80;
    --focus: #8fb0ff; --shadow: none; --img-dim: .86; --photo-shade: rgba(8, 11, 16, .74); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0f141c; --surface: #161c26; --surface-2: #1d2532; --ink: #e8ebf0; --ink-2: #a9b3c1; --line: #2c3645;
  --accent: #8fb0ff; --accent-ink: #0b1730; --accent-soft: #1f2c47; --accent-deep: #a9c2ff; --ok: #5ccf96; --warn: #e5b84a; --bad: #ff8a80;
  --focus: #8fb0ff; --shadow: none; --img-dim: .86; --photo-shade: rgba(8, 11, 16, .74); color-scheme: dark;
}

/* SITE STYLE (owner 18 Oct 2026, DESIGN-PRINCIPLES "Compose the page", lesson G56; docs/DESIGN-PASS-2026-10-18.md "Site style"). One set for
   every page: public, sign-in, workspace, Settings, client pages. It stands above every approved prototype.
   Spacing: 8 / 16 / 24 / 40 (and 4 inside a control). A block takes its gap from the page, never its own rhythm.
   Type: 12.5 meta, 14 app body, 16 card title, 20 section title, 26 page state (app h1); the public display sizes are h1 / h2 below.
   Border rule: a 1 px --line border only on a thing you press or type in (a button, an input, a pressable card, a menu, a sheet).
   Bars, strips, filter rows, link rows, section heads and table frames are grouped by space, the --surface paper and type weight.
   Measure: the app's content and its bars share one 1240 px column (--measure). */
:root {
  --space-s: 8px; --space-m: 16px; --space-l: 24px; --space-xl: 40px;   /* = components.css --s-2, --s-4, --s-5 and 40 */
  --t-meta: 12.5px; --t-body: 14px; --t-card: 16px; --t-sec: 20px; --t-state: 26px;
  --measure: 1240px; --r-ctl: 8px; --r-paper: 12px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* in-page anchors (#how, #pricing, #packs, resource headings) land under the sticky header with room to breathe */
[id] { scroll-margin-top: 88px; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.6 var(--font); overflow-wrap: break-word; font-optical-sizing: auto; }
@media (min-width: 900px) { body { font-size: 17px; } }
img { max-width: 100%; height: auto; }
a { color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color .15s ease; }
a:hover { color: var(--accent-deep); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3, .h3 { line-height: 1.12; margin: 0 0 .5em; letter-spacing: -.02em; font-weight: 700; }
h1 { font-size: clamp(2.3rem, 1.4rem + 3.4vw, 3.6rem); line-height: 1.04; letter-spacing: -.028em; }
h2 { font-size: clamp(1.7rem, 1.2rem + 1.9vw, 2.6rem); }
h3, .h3 { font-size: 1.2rem; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
code, pre { font-family: var(--mono); font-size: .92em; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--surface); padding: 8px 12px; z-index: 10; }
.skip:focus { left: 8px; }

.wrap { width: 100%; max-width: 1140px; margin: 0 auto; padding-inline: clamp(16px, 4vw, 24px); }
.narrow { max-width: 760px; }
.center { text-align: center; }
.muted { color: var(--ink-2); }
.small { font-size: .9rem; }
section { padding-block: var(--sp-section); }
.section-tight { padding-block: var(--sp-section-tight); }
.section-slim { padding-block: clamp(32px, 4vw, 48px); }
.band { background: var(--surface-2); }
.band-dark { background: var(--surface-dark); color: #e8ebf0; }
.band-dark h2, .band-dark h3 { color: #fff; }
.band-dark .lead, .band-dark .muted, .band-dark .small { color: rgba(232, 235, 240, .78); }
.band-dark .eyebrow { color: rgba(232, 235, 240, .7); }
.section-head { margin-bottom: clamp(24px, 4vw, 40px); }
.section-head h2 { max-width: 22ch; }
.section-head .lead { margin-bottom: 0; }
.section-head .eyebrow { margin-bottom: .5em; }
.page-head { padding-bottom: 12px; }
.section-h { margin-top: .4em; }
/* a section label is plain sentence-case text, quiet, never tracked capitals */
.eyebrow { font-size: 1rem; font-weight: 500; color: var(--ink-2); margin-bottom: .5em; }
.lead { font-size: clamp(1.1rem, 1rem + .5vw, 1.3rem); line-height: 1.5; color: var(--ink-2); max-width: 58ch; }

/* breadcrumbs */
.crumbs { font-size: .9rem; color: var(--ink-2); margin-bottom: .4em; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; }
.crumbs li { display: inline-flex; align-items: center; }
.crumbs li + li::before { content: "/"; margin-inline: 8px; color: var(--line); }
.crumbs a { display: inline-flex; align-items: center; min-height: var(--tap); }

/* header / nav */
.site-header { background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
               border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; }
.bar { display: flex; align-items: center; gap: 16px; min-height: 64px; flex-wrap: wrap; }
.brand { font-weight: 700; font-size: 1.15rem; letter-spacing: -.01em; color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; margin: 0; min-height: var(--tap); }
.brand-logo { width: 28px; height: 28px; display: block; }
.firm-badge { display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); color: var(--ink-2); text-decoration: none; font-size: .92rem; padding-left: 10px; border-left: 1px solid var(--line); }
.firm-badge .pill { font-size: .78rem; flex: none; }
/* a long firm name is cut with an ellipsis: the header stays one row high, so the open menu below it always fits the screen */
.firm-badge { max-width: min(38vw, 360px); }
.firm-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 560px) { .firm-badge { display: none; } }
.nav { display: flex; align-items: center; gap: 4px 18px; margin-left: auto; flex-wrap: wrap; }
.nav a { color: var(--ink-2); text-decoration: none; font-weight: 500; display: inline-flex; align-items: center; min-height: var(--tap); }
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); }
.nav .btn { color: var(--accent-ink); }
.nav-toggle { display: none; margin-left: auto; background: none; border: 1px solid var(--line); color: var(--ink); border-radius: 8px;
              padding: 6px 16px; font: inherit; min-height: var(--tap); cursor: pointer; }
@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; align-items: center; }
  .nav { display: none; width: 100%; flex-direction: column; align-items: stretch; gap: 0; padding-bottom: 14px; }
  .nav a { padding-block: 4px; border-top: 1px solid var(--line); }
  .nav .btn { justify-content: center; margin-top: 10px; border-top: 0; }
  .nav.is-open { display: flex; }
  /* the open menu never outgrows the screen (a phone on its side, a long firm menu): it scrolls inside the header, and it
     opens above the cookie banner so every item can be reached before the banner is answered */
  .nav.is-open { flex-wrap: nowrap; max-height: calc(100vh - 64px); max-height: calc(100dvh - 64px); overflow-y: auto; overscroll-behavior: contain; }
  .nav.is-open > * { flex: none; }
  .site-header:has(.nav.is-open) { z-index: 25; }
}
/* APP_NAV_V2 (templates/app/_nav_account.html; docs/NAV-ACCOUNT-MENU.md): the daily work on the bar, everything about the
   firm and the account in one menu under the firm's name at the right; on a phone the daily items are a strip of tabs */
.daily-nav { display: flex; align-items: stretch; gap: 4px; margin-left: 12px; align-self: stretch; }
.daily-nav a { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap); padding: 0 12px; color: var(--ink-2);
               text-decoration: none; font-weight: 500; white-space: nowrap; box-shadow: inset 0 -2px 0 transparent; }
.daily-nav a:hover { color: var(--ink); }
.daily-nav a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); }
.account-menu { position: relative; margin-left: auto; min-width: 0; }
.account-menu > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; min-height: var(--tap); min-width: 0;
                          max-width: min(34vw, 340px); padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); font-size: .92rem; }
.account-menu > summary::-webkit-details-marker { display: none; }
.account-menu > summary .pill { font-size: .78rem; flex: none; }
.account-menu > summary::after { content: ""; flex: none; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
                                 transform: translateY(-2px) rotate(45deg); transition: transform .15s ease; }
.account-menu[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.account-menu > summary:hover, .account-menu[open] > summary, .account-menu > summary.is-current { border-color: var(--ink-2); }
.account-menu-list { position: absolute; right: 0; top: calc(100% + 8px); width: 340px; max-width: calc(100vw - 32px); display: flex; flex-direction: column;
                     padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); z-index: 30;
                     max-height: calc(100dvh - 90px); overflow-y: auto; overscroll-behavior: contain; }
.account-item { display: flex; flex-direction: column; justify-content: center; gap: 1px; min-height: 52px; padding: 7px 12px; border-radius: 8px;
                color: var(--ink); text-decoration: none; text-align: left; }
.account-item:hover { background: var(--surface-2); }
.account-item[aria-current="page"] { background: var(--accent-soft); }
.account-item-name { font-weight: 600; }
.account-item-line { font-size: .86rem; color: var(--ink-2); line-height: 1.35; }
.account-logout { margin: 6px 0 0; padding-top: 6px; border-top: 1px solid var(--line); }
.account-item-action { width: 100%; min-height: var(--tap); background: none; border: 0; font: inherit; font-weight: 600; cursor: pointer; color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .account-menu > summary::after { transition: none; } }
@media (max-width: 860px) {
  .bar:has(.daily-nav) { row-gap: 0; }
  .daily-nav { order: 3; width: 100%; margin: 0 -8px; width: calc(100% + 16px); gap: 0; border-top: 1px solid var(--line); }
  .daily-nav a { flex: 1 1 0; min-width: 0; padding: 0 4px; overflow: hidden; text-overflow: ellipsis; font-size: .95rem; }
  .account-menu > summary { max-width: 62vw; padding: 0 12px; }
  .account-menu-list { position: fixed; left: 16px; right: 16px; top: 64px; width: auto; max-width: none; max-height: calc(100dvh - 80px); }
  .site-header:has(.account-menu[open]) { z-index: 25; }
}
/* the context bar (templates/app/_context_bar.html): the client and the period on a client's work pages, and its sections */
.context-bar { background: var(--surface); border-bottom: 1px solid var(--line); }
.context-row { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; min-height: 56px; }
.context-back { display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); color: var(--ink-2); text-decoration: none; font-size: .92rem; padding-right: 4px; }
.context-back::before { content: ""; width: 7px; height: 7px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.context-back:hover { color: var(--ink); }
.context-pick { position: relative; min-width: 0; }
.context-pick > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; min-height: var(--tap); padding: 0 12px;
                          border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); max-width: min(60vw, 320px); }
.context-pick > summary::-webkit-details-marker { display: none; }
.context-pick > summary::after { content: ""; flex: none; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
                                 transform: translateY(-2px) rotate(45deg); }
.context-pick[open] > summary, .context-pick > summary:hover { border-color: var(--ink-2); }
.context-value { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.context-list { position: absolute; left: 0; top: calc(100% + 6px); width: 300px; max-width: calc(100vw - 32px); max-height: min(420px, calc(100dvh - 160px)); overflow-y: auto;
                display: flex; flex-direction: column; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); z-index: 30; }
.context-group { margin: 8px 10px 2px; font-size: .8rem; color: var(--ink-2); }
.context-group:first-of-type { margin-top: 4px; }
.context-item { display: flex; align-items: center; min-height: var(--tap); padding: 0 10px; border-radius: 6px; color: var(--ink); text-decoration: none; }
.context-item:hover { background: var(--surface-2); }
.context-item[hidden], .context-filter[hidden] { display: none; }
.context-item[aria-current="page"] { background: var(--accent-soft); font-weight: 600; }
.context-filter { margin: 2px 2px 6px; min-height: var(--tap); }
.context-tabs { display: flex; align-items: stretch; margin-left: auto; align-self: stretch; }
.context-tabs a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 12px; color: var(--ink-2); text-decoration: none; font-weight: 500;
                  white-space: nowrap; box-shadow: inset 0 -2px 0 transparent; }
.context-tabs a:hover { color: var(--ink); }
.context-tabs a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); }
@media (max-width: 860px) {
  .context-row { padding-top: 6px; }
  .context-back { font-size: 0; gap: 0; min-width: var(--tap); justify-content: center; padding: 0; }
  .context-back::before { width: 9px; height: 9px; }
  .context-tabs { order: 3; width: 100%; margin-left: 0; overflow-x: auto; scrollbar-width: none; border-top: 1px solid var(--line); }
  .context-tabs a { flex: 1 0 auto; justify-content: center; padding: 0 10px; }
  .context-pick:last-of-type .context-list { left: auto; right: 0; }
}
/* where a client stands (templates/app/_client_summary.html): one link card per kind of work, its count, one line */
.hub-wrap { padding-top: 4px; }
.hub-quiet { margin: 0; color: var(--muted, inherit); font-size: 0.95rem; line-height: 1.5; }
.hub-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.hub-card { display: flex; flex-direction: column; gap: 4px; min-height: 76px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line);
            border-radius: var(--radius); color: var(--ink); text-decoration: none; }
.hub-card:hover { border-color: var(--ink-2); }
.hub-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hub-title { font-weight: 600; }
.hub-num { min-width: 28px; height: 28px; padding: 0 8px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
           background: var(--accent); color: var(--accent-ink); font-weight: 600; font-size: .9rem; }
.hub-line { font-size: .92rem; color: var(--ink-2); }
@media (max-width: 560px) { .hub-cards { grid-template-columns: 1fr; gap: 8px; } .hub-card { min-height: 64px; padding: 12px 14px; } }
/* HOME_UMBRELLA: the DocChase / Loop switch beside the brand, and its line in the footer */
.product-switch { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; font-size: .85rem; }
.product-switch a { display: inline-flex; align-items: center; min-height: 30px; padding: 0 10px; border-radius: 999px; color: var(--ink-2); text-decoration: none; font-weight: 500; }
.product-switch a:hover { color: var(--ink); }
.product-switch a[aria-current] { background: var(--surface-2); color: var(--ink); }
@media (max-width: 1199px) { .product-switch { display: none; } }   /* only where the header has room; the footer always carries it */
.product-switch-foot { display: flex; flex-wrap: wrap; gap: 0 12px; }
.product-switch-foot a { display: inline-flex; align-items: center; min-height: var(--tap); }
.subnav { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--tap); background: var(--accent);
       color: var(--accent-ink); border: 1px solid var(--accent); border-radius: 10px; padding: 10px 20px; font: 600 1rem/1.2 var(--font);
       text-decoration: none; cursor: pointer; text-align: center; transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .1s ease; }
.btn:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: var(--accent-ink); }
.btn:active { transform: translateY(1px); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { background: var(--surface-2); border-color: var(--ink-2); color: var(--ink); }
.btn-small { padding: 6px 14px; font-size: .92rem; }
.btn-danger { background: var(--bad); border-color: var(--bad); color: #fff; }
.btn-danger:hover { background: var(--bad); border-color: var(--bad); filter: brightness(.92); }
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; }
/* an in-page link with weight; no arrow glued to the text, the underline is the affordance */
.link-arrow { font-weight: 600; display: inline-flex; align-items: center; min-height: var(--tap); text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.link-arrow:hover { text-decoration-color: currentColor; }
@media (max-width: 560px) {
  .cta-row .btn, .cta-band .btn, .form .btn[type=submit], .auth-main .btn[type=submit] { width: 100%; }
}

/* layout grids */
.hero-grid, .two-col, .split { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(20px, 4vw, 40px); align-items: start; }
.grid-2, .grid-3 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
@media (min-width: 700px) { .grid-2, .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) {
  .hero-grid, .two-col { grid-template-columns: 1.2fr 1fr; }
  .split { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; }
  .split-flip > :first-child { order: 2; }
}
@media (min-width: 1000px) { .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; margin-bottom: 18px; }
.card > :last-child { margin-bottom: 0; }
/* a whole card that is a link: pointer, border darkens and it lifts a touch on hover, the ring on focus; the inner .btn is a span */
.card-link { color: inherit; text-decoration: none; display: block; cursor: pointer; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.card-link:hover { border-color: var(--ink-2); color: inherit; box-shadow: 0 10px 28px -14px rgba(15, 27, 45, .3); transform: translateY(-2px); }
.card-link:focus-visible { border-color: var(--focus); }
.card-link:hover .btn { background: var(--accent-deep); border-color: var(--accent-deep); }
.card-link:hover .btn-ghost { background: var(--surface-2); border-color: var(--ink-2); }
.card h3 a, .card h2 a { display: inline-block; padding-block: 12px; margin-block: -12px; }
.hero-grid > *, .two-col > *, .split > *, .grid-2 > *, .grid-3 > * { min-width: 0; }   /* wide code/tables never stretch a column */
.grid-2 > .card, .grid-3 > .card { margin-bottom: 0; }
.grid-2 > .cl-status { align-self: start; }
/* the dashboard's Open requests + Your plan pair (layout review 10 Oct 2026, issue 12): each card as tall as its own
   content, so a one-line Open requests card is not stretched into an empty box beside the plan. CSS only: the dashboard is
   a frozen reviewer template; the pair is found by the self-test form only it carries. */
.grid-2:has(> .card > form[action="/app/selftest"]) { align-items: start; }
.hero { padding-block: clamp(36px, 6vw, 64px); }
.hero-card { margin: 0; }

/* photos */
.photo { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; filter: brightness(var(--img-dim)); }
.card-media { overflow: hidden; padding-top: 0; }
.card-media > .photo { width: calc(100% + 40px); max-width: none; margin: 0 -20px 16px; border-radius: 0; }
.photo-frame { position: relative; margin: 0; border-radius: var(--radius); overflow: hidden; background: var(--surface-2); box-shadow: var(--shadow); }
.photo-frame .photo { aspect-ratio: 4 / 3; }
@media (min-width: 900px) { .photo-frame .photo { aspect-ratio: 16 / 11; } }
@media (prefers-reduced-motion: no-preference) {
  .card-media > .photo { transition: transform .35s ease; }
  .card-link:hover .photo, .card-media:hover > .photo { transform: scale(1.03); }
}

/* home hero over a photo: dark shade keeps text legible in light and dark themes */
.hero-photo { position: relative; isolation: isolate; overflow: hidden; background: #0f1720; color: #fff; padding-block: clamp(44px, 9vw, 120px); }
.hero-photo .hero-img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; aspect-ratio: auto; object-fit: cover;
                        object-position: 65% 60%; z-index: -2; filter: none; }
.hero-photo::before { content: ""; position: absolute; inset: 0; z-index: -1;
                      background: linear-gradient(180deg, rgba(10, 16, 26, .84) 0%, rgba(10, 16, 26, .74) 100%); }
@media (min-width: 900px) {
  .hero-photo::before { background: linear-gradient(90deg, rgba(10, 16, 26, .9) 0%, rgba(10, 16, 26, .74) 50%, rgba(10, 16, 26, .3) 100%); }
  .hero-photo .hero-grid { align-items: center; }
}
.hero-photo h1 { color: #fff; }
.hero-photo .lead, .hero-photo .muted { color: rgba(255, 255, 255, .88); }
.hero-photo .eyebrow { color: #ffc49d; }
.hero-photo .btn { background: #d9651c; border-color: #d9651c; color: #fff; }
.hero-photo .btn-ghost { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .75); color: #fff; }
.hero-photo .pill { background: rgba(255, 255, 255, .14); color: #fff; }
.hero-photo .hero-card { background: rgba(12, 18, 27, .74); border-color: rgba(255, 255, 255, .18); color: #fff; box-shadow: none; }
.hero-photo .hero-card ul.checks li::before { border-color: #6fe0a6; }
.hero-chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* page banner photo (feed, use case, guide, about, process, pricing, api, contact) */
.banner { position: relative; margin: 0; background: var(--surface-2); }
.banner .photo { aspect-ratio: auto; height: clamp(160px, 30vw, 360px); }
.banner::after { content: ""; position: absolute; inset: auto 0 0 0; height: 45%; background: linear-gradient(to bottom, transparent, var(--bg)); pointer-events: none; }
.banner-slim .photo { height: clamp(110px, 18vw, 220px); }

/* call to action band over a photo (decorative background, no content image) */
.cta-photo { position: relative; isolation: isolate; color: #fff; background: #10161f url("/static/img/truck-desert-highway-800.webp") center / cover no-repeat; }
@media (min-width: 900px) { .cta-photo { background-image: url("/static/img/truck-desert-highway-1600.webp"); } }
.cta-photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--photo-shade); }
.cta-photo h2, .cta-photo p { color: #fff; }
.cta-photo .btn { background: #d9651c; border-color: #d9651c; color: #fff; }

/* sign-up / log-in: side photo on wide screens only (display:none keeps the lazy image from loading on phones) */
.auth-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: stretch; }
.auth-main { max-width: 560px; width: 100%; }
.auth-aside { display: none; }
@media (min-width: 960px) {
  .auth-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .auth-aside { display: block; position: relative; border-radius: var(--radius); overflow: hidden; min-height: 460px; background: #10161f; color: #fff; }
  .auth-aside .photo { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
  .auth-aside::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(10, 16, 26, .86), rgba(10, 16, 26, .1) 60%); }
  .auth-caption { position: absolute; z-index: 2; inset: auto 24px 24px 24px; margin: 0; }
  .auth-caption strong { display: block; font-size: 1.3rem; }
}

ul.plain { list-style: none; padding: 0; margin: 0 0 1em; }
ul.plain li { margin: 0; }
ul.plain a { display: inline-flex; align-items: center; min-height: var(--tap); max-width: 100%; }
/* a long name, file name, email or URL with no space in it breaks inside its box instead of widening the page (`anywhere` also
   lets a flex or grid item shrink below the word; tables keep whole words, they scroll in .table-wrap) */
ul.plain, .crumbs, .card, .footer-grid { overflow-wrap: anywhere; }
table { overflow-wrap: break-word; }
ul.checks { list-style: none; padding: 0; margin: 0 0 1em; }
ul.checks li { padding-left: 1.6em; position: relative; margin: 8px 0; }
ul.checks li::before { content: ""; position: absolute; left: .2em; top: .55em; width: .7em; height: .38em; border-left: 2px solid var(--ok); border-bottom: 2px solid var(--ok); transform: rotate(-45deg); }
ul.tags { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
ul.tags li, .pill { display: inline-block; background: var(--accent-soft); color: var(--ink); border-radius: 999px; padding: 2px 10px; font-size: .88rem; }
a.pill { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 14px; text-decoration: none; }
ol.steps { padding-left: 1.2em; display: grid; gap: 12px; }

/* facts + stats */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); gap: 10px; margin: 12px 0; }
.facts div { background: var(--surface-2); border-radius: 8px; padding: 8px 12px; }
.facts dt { font-size: .78rem; color: var(--ink-2); text-transform: uppercase; letter-spacing: .05em; }
.facts dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 14px; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.stat-v { font-size: 2rem; font-weight: 700; margin: 0; font-variant-numeric: tabular-nums; }
.stat-l { margin: 0; font-weight: 600; }
.stat-s { margin: 0; color: var(--ink-2); font-size: .88rem; }

/* tables: always inside a horizontal scroll container */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); margin-bottom: 1em; max-width: 100%; }
.table-wrap:focus-visible { outline: 2px solid var(--accent, #1f6feb); outline-offset: 2px; }
table { border-collapse: collapse; width: 100%; font-size: .94rem; }
th { text-align: left; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-2); padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
td { padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
table.data td { white-space: nowrap; font-variant-numeric: tabular-nums; }
pre.code { background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 14px; overflow-x: auto; white-space: pre; max-width: 100%; }

/* forms */
.form .field { margin-bottom: 14px; }
.field label { display: block; font-weight: 600; margin-bottom: 4px; }
.field.check { display: flex; gap: 10px; align-items: flex-start; }
.field.check label { font-weight: 400; }
.field.check input { width: 22px; height: 22px; margin-top: 2px; flex: none; }
input[type=text], input[type=email], input[type=password], input[type=tel], input[type=number], input:not([type]), select, textarea {
  width: 100%; min-height: var(--tap); padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); font: inherit; font-size: 1rem; }
.inline-form { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0; }
.inline-form input, .inline-form select { width: auto; max-width: 100%; }
input[type=file] { max-width: 100%; }
.hint { font-size: .88rem; color: var(--ink-2); margin: 4px 0 0; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.errors { border: 1px solid var(--bad); background: color-mix(in srgb, var(--bad) 8%, var(--surface)); border-radius: var(--radius); padding: 12px 16px; margin-bottom: 16px; }
.errors ul { margin: 0; padding-left: 1.2em; }
.notice, .flash { border-left: 4px solid var(--warn); background: var(--surface); padding: 10px 14px; border-radius: 6px; margin: 12px 0; }
.flash { border-left-color: var(--ok); }
.key-once { border-color: var(--ok); }

/* pricing */
.switches { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 12px; }
.segmented { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: var(--surface); }
.seg { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 16px; text-decoration: none; color: var(--ink); font-weight: 600; font-size: .95rem; }
.seg.is-on { background: var(--accent); color: var(--accent-ink); }
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 18px; }
.plan-featured { border: 2px solid var(--accent); }
.price { min-height: 3.4em; }
.amount { font-size: 1.9rem; font-weight: 700; display: inline-block; }
.amount .per { font-size: .95rem; font-weight: 500; color: var(--ink-2); }
.amount .tax { display: block; font-size: .8rem; font-weight: 400; color: var(--ink-2); }
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 0 15px; margin-bottom: 10px; }
.faq summary { font-weight: 600; cursor: pointer; min-height: var(--tap); display: flex; align-items: center; padding-block: 8px; }
.faq details p { margin: 0 0 12px; }
/* a closed fold on a form: what can wait (app/client_new.html "More about this contact") */
.fold { border-top: 1px solid var(--line); margin-top: 18px; padding-top: 4px; }
.fold summary { cursor: pointer; min-height: var(--tap); display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding-block: 8px; font-weight: 600; list-style: none; }
.fold summary::-webkit-details-marker { display: none; }
.fold summary::before { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2); transform: rotate(-45deg); margin-right: 6px; transition: transform .15s; }
.fold[open] summary::before { transform: rotate(45deg); }
.fold summary:focus-visible { outline: 2px solid var(--accent, #1f5f4a); outline-offset: 2px; border-radius: 4px; }
.fold-hint { font-weight: 400; font-size: .9rem; color: var(--ink-2); }
.fold-body { padding-top: 6px; }
@media (prefers-reduced-motion: reduce) { .fold summary::before { transition: none; } }

.btn-large { padding: 13px 26px; font-size: 1.08rem; border-radius: 12px; }
/* call to action band (home, checklists, _cta.html) */
.cta-band { text-align: center; }
.cta-band .lead { margin-inline: auto; }
.cta-band .cta-row { justify-content: center; }
.cta-band.band-dark .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .4); }
.cta-band.band-dark .btn-ghost:hover { background: rgba(255, 255, 255, .1); border-color: #fff; color: #fff; }
.cta-band.band-dark .btn:not(.btn-ghost) { background: #fff; border-color: #fff; color: var(--surface-dark); }
.cta-band.band-dark .btn:not(.btn-ghost):hover { background: #e4ebfa; border-color: #e4ebfa; color: var(--surface-dark); }
.cta-note { margin: 10px 0 0; font-size: .92rem; color: var(--ink-2); font-weight: 600; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* header country selector: a small pill, in the menu on a phone; the geo guess is a one-line notice under the header */
.country-pill { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.country-pill select { width: auto; min-height: 36px; padding: 4px 28px 4px 12px; border-radius: 999px; font-size: .92rem; font-weight: 600; background: var(--surface-2); }
@media (max-width: 860px) { .country-pill { padding-block: 10px; border-top: 1px solid var(--line); } .country-pill select { width: 100%; } }
.geo-bar { background: var(--accent-soft); border-bottom: 1px solid var(--line); }
.geo-notice { margin: 0; padding-block: 6px; font-size: .9rem; line-height: 1.4; color: var(--ink); display: flex; flex-wrap: wrap; align-items: center; gap: 0 14px; }
.geo-notice a { font-weight: 600; display: inline-flex; align-items: center; min-height: 32px; }
@media (max-width: 560px) { .geo-notice a { min-height: var(--tap); } }

/* tabs (role=tablist / tab / tabpanel, keyboard handling in site.js) */
[role=tablist] { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
[role=tab] { display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
             color: var(--ink); padding: 0 14px; font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap; scroll-snap-align: start; }
[role=tab]:hover { border-color: var(--ink-2); }
[role=tab][aria-selected=true] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
[role=tab][aria-selected=true] .pill { background: rgba(255, 255, 255, .18); color: inherit; }
[role=tab] .pill { font-size: .8rem; padding: 0 8px; line-height: 1.6; }
[role=tabpanel]:focus-visible { outline-offset: 6px; }
@media (max-width: 700px) {
  [role=tablist] { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    padding-bottom: 8px; margin-inline: calc(-1 * clamp(16px, 4vw, 24px)); padding-inline: clamp(16px, 4vw, 24px); scrollbar-width: thin; }
}

/* browser frame + lightbox */
.browser-frame { margin: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface); box-shadow: 0 18px 50px rgba(22, 32, 46, .14); }
.browser-bar { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.browser-bar i { width: 10px; height: 10px; border-radius: 999px; background: var(--line); }
.browser-bar span { margin-left: 10px; flex: 1; font-size: .78rem; color: var(--ink-2); background: var(--surface); border-radius: 6px; padding: 2px 10px; line-height: 1.6;
                    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.browser-frame img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; filter: brightness(var(--img-dim)); }
.browser-frame figcaption { padding: 12px 16px; font-size: .9rem; color: var(--ink-2); border-top: 1px solid var(--line); }
a[data-zoom] { display: block; position: relative; color: inherit; }
a[data-zoom]::after { content: ""; position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border-radius: 8px; background: var(--ink);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/%3E%3C/svg%3E") center / 18px no-repeat;
  opacity: .85; }
a[data-zoom]::before { content: ""; position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border-radius: 8px; background: var(--surface); box-shadow: var(--shadow); opacity: .9; }
a[data-zoom]:hover::after { opacity: 1; }
dialog.lightbox { max-width: min(96vw, 1400px); max-height: 96vh; padding: 0; border: 0; border-radius: 12px; background: var(--surface); color: var(--ink); overflow: hidden; }
dialog.lightbox::backdrop { background: rgba(10, 16, 26, .8); }
dialog.lightbox img { display: block; max-height: 88vh; max-width: 100%; width: auto; height: auto; margin: 0 auto; }
.lightbox-cap { margin: 0; padding: 10px 56px 10px 16px; font-size: .9rem; color: var(--ink-2); }
.lightbox-cap:empty { display: none; }
.lightbox-close { position: absolute; top: 8px; right: 8px; width: var(--tap); height: var(--tap); border-radius: 999px; border: 1px solid var(--line); background: var(--surface);
                  color: var(--ink); font: 700 1.1rem/1 var(--font); cursor: pointer; }

/* feature row: copy 40 %, image 60 % */
.feature-row { display: grid; gap: clamp(24px, 5vw, 64px); align-items: center; }
.feature-row > * { min-width: 0; }
@media (min-width: 900px) {
  .feature-row { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .feature-row.flip > :first-child { order: 2; }
}
@media (max-width: 899px) { .feature-row > .feature-media { order: -1; } }

/* country pack tabs */
.pack-panel { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: clamp(18px, 3vw, 28px); }
.pack-panel h3 { font-size: 1.25rem; margin-bottom: 14px; }
.pack-list { list-style: none; padding: 0; margin: 0; }
.pack-list li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); break-inside: avoid; }
.pack-list li .small { flex: none; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.pack-region { margin-top: 18px; }
.pack-region h4 { margin: 0 0 8px; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); font-weight: 600; }
.pack-region ul.tags { margin: 0; }
.pack-region ul.tags li { font-size: .9rem; }
@media (min-width: 700px) { .pack-list { columns: 2; column-gap: 32px; } .pack-list li { display: flex; } }

/* resource cards with an icon */
.card-link .card-icon { display: inline-flex; width: 28px; height: 28px; color: var(--accent); margin-bottom: 12px; }
.card-link .card-icon svg { width: 28px; height: 28px; }
table.preview td { font-size: .92rem; }
.steps-3 { list-style: none; padding: 0; margin: 0 0 1em; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.steps-3 > .card { margin-bottom: 0; }
.step-n { display: inline-flex; align-items: center; justify-content: center; width: 2.1em; height: 2.1em; border-radius: 999px;
  background: var(--accent); color: var(--accent-ink); font-weight: 700; margin-bottom: 10px; }
.grid-4 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.grid-4 > * { min-width: 0; }
.grid-4 > .card { margin-bottom: 0; }
@media (min-width: 700px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 820px) { .steps-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.plans-2 { grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); max-width: 860px; margin-bottom: 12px; }
.plan .pill { margin-bottom: 8px; }
.annual { display: block; font-size: .9rem; color: var(--ink-2); }
table.compare th[scope=row] { text-transform: none; letter-spacing: 0; font-size: .94rem; color: var(--ink); white-space: normal; font-weight: 500; }
table.compare td { text-align: center; white-space: nowrap; }
.free-leads { border: 2px solid var(--accent); }

/* content pages and resources */
.content-body { padding-top: 8px; }
.card-link .h3 { display: block; font-weight: 700; margin-bottom: .4em; }
.card-link p { color: var(--ink-2); }
.prose .template-box { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 8px; padding: 14px 18px; margin: 1em 0; }
.prose .template-box p:last-child { margin-bottom: 0; }
.prose .tpl-subject { font-weight: 600; }
.prose .callout { background: var(--accent-soft); border-radius: 8px; padding: 14px 18px; margin: 1.2em 0; }
.prose .callout p:last-child { margin-bottom: 0; }
.prose ul.tick { list-style: none; padding-left: 0; }
.prose ul.tick li { padding-left: 1.7em; position: relative; margin: 8px 0; }
.prose ul.tick li::before { content: ""; position: absolute; left: .1em; top: .3em; width: .9em; height: .9em; border: 2px solid var(--ink-2); border-radius: 3px; }
.prose td, .prose th { white-space: normal; }
.prose .toc { background: var(--surface-2); border-radius: 8px; padding: 12px 18px; }
.prose .toc ul { margin: 0; }
.prose img.shot-inline { border: 1px solid var(--line); border-radius: 8px; }
@media print { .prose ul.tick li::before { border-color: #000; } .cta-band, .band { display: none !important; } }

/* prose (markdown) */
.prose h2 { margin-top: 1.6em; }
.prose h3 { margin-top: 1.3em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose table { margin: 1em 0; border: 1px solid var(--line); display: block; overflow-x: auto; max-width: 100%; }
.prose code { overflow-wrap: anywhere; }
.prose blockquote { border-left: 4px solid var(--line); margin: 1em 0; padding: .2em 1em; color: var(--ink-2); }

/* blog (index, categories, posts, weekly data chart: inline SVG coloured by these classes, no inline styles) */
.blog-cat-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 6px; }
.blog-cat-list a.pill[aria-current="true"] { background: var(--accent); color: var(--accent-ink); }
.blog-meta { margin-bottom: .4em; }
.reading-band { border-top: 1px solid var(--line); }
.reading-band h2 { margin-top: 0; }
.blog-meta a { color: var(--ink-2); }
.pager { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: center; margin-top: 28px; }
.blog-body { padding-bottom: 8px; }
.blog-foot { padding-bottom: clamp(28px, 5vw, 56px); }
.blog-next { margin-top: 18px; }
.chart { margin: 1.4em 0; }
.chart-svg { display: block; width: 100%; max-width: 640px; height: auto; }
.chart-bar { fill: var(--accent); }
.chart-label, .chart-value { fill: var(--ink); font: 14px var(--font); }
.chart figcaption { font-size: .88rem; color: var(--ink-2); margin-top: 6px; }

/* footer: quiet ink-coloured links, sentence-case column titles, the brand line and the small print with room to breathe */
.site-footer { background: var(--surface); border-top: 1px solid var(--line); padding-top: clamp(40px, 6vw, 64px); margin-top: 0; font-size: .95rem; }
.footer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
.footer-grid > :first-child { grid-column: 1 / -1; max-width: 34ch; }
@media (min-width: 900px) { .footer-grid { grid-template-columns: 1.6fr repeat(4, minmax(0, 1fr)); gap: 32px; } .footer-grid > :first-child { grid-column: auto; } }
.site-footer .brand { font-size: 1.25rem; min-height: 0; margin-bottom: 8px; }
.site-footer .brand + p { color: var(--ink-2); font-size: .95rem; line-height: 1.55; }
.footer-h { font-size: .95rem; font-weight: 650; color: var(--ink); margin: 6px 0 10px; letter-spacing: 0; }
.site-footer ul.plain li a { color: var(--ink-2); text-decoration: none; min-height: var(--tap); font-size: .95rem; transition: color .15s ease; }
.site-footer ul.plain li a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.footer-bottom { border-top: 1px solid var(--line); margin-top: clamp(32px, 5vw, 48px); padding-block: 24px; display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; }
.footer-bottom p { margin: 0; color: var(--ink-2); }
.footer-bottom > p:last-child { margin-left: auto; }
.footer-bottom select { min-height: var(--tap); padding: 4px 28px 4px 10px; width: auto; font-size: .92rem; border-radius: 8px; }
.footer-bottom label { color: var(--ink-2); }
/* cookie consent banner (logic in /static/tags.js; rendered only when a tag is enabled) */
.cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--surface); border-top: 2px solid var(--accent);
                 box-shadow: 0 -6px 24px rgba(0, 0, 0, .12); padding-block: 14px; max-height: 80vh; overflow-y: auto; }
.cookie-title { font-size: 1.05rem; margin: 0 0 4px; }
.cookie-banner p { margin: 0 0 10px; }
.cookie-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cookie-prefs fieldset { border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; margin: 0 0 10px; }
.cookie-prefs .field { margin-bottom: 8px; }
.cookie-prefs .hint { display: block; }
/* on a phone the banner must stay under a third of the screen and never sit on a form: the rule sentence and the link stay,
   the detail lives in Preferences and the cookie notice; the three choices share one row at the same size */
@media (max-width: 560px) {
  .cookie-banner { padding-block: 10px; max-height: 70vh; }
  .cookie-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .cookie-detail { display: none; }
  .cookie-banner p { font-size: .875rem; line-height: 1.4; margin-bottom: 8px; }
  .cookie-actions { gap: 8px; flex-wrap: nowrap; }
  .cookie-actions .btn { flex: 1 1 0; min-width: 0; padding-inline: 6px; font-size: .875rem; white-space: nowrap; }
  /* room to scroll the last form field and button clear of the banner while it is open */
  body:has(#cookie-banner:not([hidden])) { padding-bottom: 230px; }
}
@media print { .site-header, .site-footer, .cta-row, .btn, .banner, .auth-aside { display: none !important; } body { background: #fff; color: #000; } }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }

/* ---- social proof (templates/_proof.html, data in app/web/proof_data): reviews, the tablet strip, the moving reviews on sign-up and
   log-in, the quiet panel in the payment funnel. The quote is the hero; the person is small type under it. ---- */
.flag { display: inline-block; flex: none; width: 18px; height: 12px; border-radius: 2px; vertical-align: -1px; box-shadow: 0 0 0 1px rgba(15, 27, 45, .14); }
.rv { margin: 0; }
.rv-q { margin: 0 0 14px; quotes: "\201C" "\201D"; }
.rv-q p { margin: 0; font-size: 1rem; line-height: 1.55; color: var(--ink); text-wrap: pretty; }
.rv-q p::before { content: open-quote; }
.rv-q p::after { content: close-quote; }
.rv-who { display: flex; align-items: center; gap: 12px; font-size: .88rem; line-height: 1.35; color: var(--ink-2); }
.rv-av { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--surface-2); color: var(--ink-2); font-weight: 600; font-size: .82rem; letter-spacing: .02em; }
.rv-id { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; row-gap: 2px; min-width: 0; }
.rv-id strong { color: var(--ink); font-weight: 600; font-size: .95rem; flex-basis: 100%; }
.rv-where { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.rv-role, .rv-where { flex-basis: 100%; }
/* stars: drawn only for a confirmed rating, quiet beside the quote; a half star is the left half of the filled star */
.stars { display: inline-flex; align-items: center; gap: 2px; margin: 0 0 8px; }
.st { width: 15px; height: 15px; }
.st-bg { fill: var(--line); }
.st-fg { fill: var(--warn); }
.st-half .st-fg { clip-path: inset(0 50% 0 0); }
.st-n { margin-left: 6px; font-size: .85rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* the tablet strip: a still label, then the tablets drifting left (two copies, the second aria-hidden, so the loop has no seam).
   Paused on hover, on focus and with the button; with reduced motion it is a still row that wraps. Never wider than its box. */
.strip { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 12px 0; margin: 0 0 clamp(24px, 3vw, 36px); border-block: 1px solid var(--line); }
.strip-label { margin: 0; flex: none; font-weight: 600; font-size: .95rem; color: var(--ink-2); }
.strip-view { flex: 1 1 280px; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent); }
.strip-track { display: flex; width: max-content; }
.strip-list { display: flex; flex: none; gap: 10px; margin: 0; padding: 0 10px 0 0; list-style: none; }
.tab-pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); white-space: nowrap; font-size: .9rem; line-height: 1.2; }
.tab-pill strong { font-weight: 600; }
.tab-pill span { color: var(--ink-2); padding-left: 9px; border-left: 1px solid var(--line); }
.strip-toggle, .rc-btn { display: inline-grid; place-items: center; flex: none; width: var(--tap); height: var(--tap); padding: 0; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); cursor: pointer; }
.strip-toggle[hidden], .rc-btn[hidden] { display: none; }
.strip-toggle:hover, .rc-btn:hover { color: var(--ink); border-color: var(--ink-2); }
.strip-toggle svg, .rc-btn svg { width: 16px; height: 16px; }
.strip-toggle .i-play, .rc-pause .i-play { display: none; }
.strip.is-paused .strip-toggle .i-play, .rc.is-paused .rc-pause .i-play { display: block; }
.strip.is-paused .strip-toggle .i-pause, .rc.is-paused .rc-pause .i-pause { display: none; }
@keyframes strip-drift { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: no-preference) {
  .strip-track { animation: strip-drift 50s linear infinite; }
  .strip:hover .strip-track, .strip:focus-within .strip-track, .strip.is-paused .strip-track { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
  .strip-copy, .strip-toggle { display: none !important; }
  .strip-track { display: block; width: auto; }
  .strip-list { flex: 1 1 auto; flex-wrap: wrap; padding: 0; }
  .strip-view { overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .tab-pill { white-space: normal; max-width: 100%; border-radius: 18px; }
}

/* the moving reviews (sign-up, log-in): every slide in one grid cell, so the box keeps the tallest quote's height and nothing
   below it moves as quotes of different lengths rotate. Without JavaScript only the first shows. */
html:not(.js) .rc-slide:not(:first-child) { display: none; }
.js .rc-slides { display: grid; }
.js .rc-slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s linear .5s; }
.js .rc-slide.is-on { opacity: 1; visibility: visible; transition: opacity .5s ease .1s; }
@media (prefers-reduced-motion: reduce) { .js .rc-slide, .js .rc-slide.is-on { transition: none; } }
.rc-ctrl { margin-top: 18px; }
.rc-bar { display: block; height: 2px; margin-bottom: 14px; background: var(--line); border-radius: 2px; overflow: hidden; }
.rc-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rc-people { display: flex; flex-wrap: wrap; gap: 5px; }
/* a reviewer button: their initials in the neutral circle, their flag pinned to its corner; the current one is filled */
.rc-who { position: relative; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--ink-2); font: 600 .68rem/1 var(--font); letter-spacing: .02em; cursor: pointer; }
.rc-who .flag { position: absolute; right: -3px; bottom: -2px; width: 14px; height: 9.5px; border-radius: 1.5px; }
.rc-who:hover { border-color: var(--ink-2); color: var(--ink); }
.rc-who[aria-current="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.rc-bar i { display: block; height: 100%; width: 100%; background: currentColor; transform-origin: left; transform: scaleX(0); }
.rc.is-running .rc-bar i { animation: rc-timer 8s linear forwards; }
.rc.is-held .rc-bar i, .rc.is-paused .rc-bar i { animation-play-state: paused; }
@keyframes rc-timer { to { transform: scaleX(1); } }

/* sign-up and log-in: the form left, the panel right (after the form on phones); the panel is the page's one dark block */
.auth-sec { padding-block: clamp(28px, 5vw, 56px); }
.auth-panel { display: flex; flex-direction: column; gap: 14px; padding: clamp(22px, 3vw, 34px); border-radius: var(--radius); background: var(--surface-dark); color: #e8ebf0; }
@media (min-width: 960px) {
  .auth-split-panel { grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); column-gap: clamp(32px, 4vw, 56px); }
  .auth-panel { align-self: start; }
}
.auth-panel-h { margin: 0; font-size: clamp(1.25rem, 1.1rem + .5vw, 1.45rem); font-weight: 700; line-height: 1.2; letter-spacing: -.012em; color: #fff; }
.auth-reasons { margin: 0; }
.auth-reasons li { margin: 7px 0; color: rgba(232, 235, 240, .9); }
.auth-panel ul.checks li::before { border-color: #6fe0a6; }
.auth-panel .rc { margin-top: 8px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .14); color: rgba(232, 235, 240, .7); }
.auth-panel .rv-q p { color: #fff; font-size: 1.04rem; line-height: 1.55; }
.auth-panel .rv-who { color: rgba(232, 235, 240, .72); }
.auth-panel .rv-id strong { color: #fff; }
.auth-panel .rv-av { background: rgba(255, 255, 255, .1); color: #fff; }
.auth-panel .flag { box-shadow: 0 0 0 1px rgba(255, 255, 255, .25); }
.auth-panel .rc-btn, .auth-panel .rc-who { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .3); }
.auth-panel .rc-who { color: rgba(232, 235, 240, .8); }
.auth-panel .rc-btn:hover, .auth-panel .rc-who:hover { border-color: #fff; color: #fff; }
.auth-panel .rc-who[aria-current="true"] { background: #fff; border-color: #fff; color: var(--surface-dark); }
.auth-panel .rc-bar { background: rgba(255, 255, 255, .16); }
.auth-panel :focus-visible { outline-color: #8fb0ff; }
/* below the sign-up form: what changes, the countries, one way back up */
.auth-more h2 { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem); margin-bottom: .8em; }
.auth-benefits { list-style: none; margin: 0 0 clamp(24px, 3vw, 32px); padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px 32px; }
@media (min-width: 640px) { .auth-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .auth-benefits { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.auth-benefits li { padding-top: 12px; border-top: 2px solid var(--ink); }
.auth-benefits h3 { font-size: 1.02rem; margin-bottom: .35em; }
.auth-benefits p { margin: 0; color: var(--ink-2); font-size: .95rem; }
.auth-more .strip { margin-bottom: 20px; }
.auth-more-go { margin: 0; }

/* the payment funnel: a quiet panel under the plans, never above a pay button */
.funnel-proof { border-top: 1px solid var(--line); }
.fp-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px 48px; align-items: start; }
@media (min-width: 900px) { .fp-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); } }
.fp-h { font-size: 1.25rem; margin-bottom: .6em; }
.fp-list { margin: 0; }
.fp-list li { color: var(--ink-2); }
.fp-reviews { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 20px 32px; }
.rv-compact { padding-top: 14px; border-top: 1px solid var(--line); }
.rv-compact .rv-q p { font-size: .95rem; }

/* /app/start: the head and the plans sit close together so the first pay button is in view at 1366x768 and on a phone */
.start-head { padding-top: clamp(20px, 3vw, 32px); padding-bottom: 0; }
.start-head .lead { margin-bottom: .5em; }
.start-plans { padding-top: 16px; }
/* what adding a card means: one band, three promises, read before the first pay button */
.assure { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 14px 0 0; background: var(--surface);
  border: 1px solid var(--line); border-top: 3px solid var(--ok); border-radius: 4px 4px var(--radius) var(--radius); }
.assure > div { padding: 14px 18px 16px; }
.assure > div + div { border-left: 1px solid var(--line); }
.assure dt { font-weight: 650; font-size: 1.05rem; color: var(--ink); margin-bottom: 2px; }
.assure dd { margin: 0; color: var(--ink-2); font-size: .95rem; line-height: 1.45; }
@media (max-width: 720px) {
  .assure { grid-template-columns: 1fr; }
  .assure > div { padding: 12px 16px; }
  .assure > div + div { border-left: 0; border-top: 1px solid var(--line); }
}
.start-why { max-width: 62ch; margin: 28px 0 22px; padding-left: 18px; border-left: 3px solid var(--accent-soft); }
.start-why h2 { font-size: 1.15rem; margin: 0 0 6px; }
.start-why p { margin: 0 0 6px; color: var(--ink-2); }
.start-why .start-why-close { color: var(--ink); font-weight: 550; margin-bottom: 0; }
/* with the context bar on the page, its "All clients" and the client's name replace the page's breadcrumb */
body:has(.context-bar) .page-head .crumbs { display: none; }


/* SITE STYLE border rule, site-wide (owner 18 Oct 2026; DESIGN-PRINCIPLES "Compose the page", G56; docs/DESIGN-PASS-2026-10-18.md). A static card,
   panel, stat, table frame or bar is white paper on the page with no grey rule; only what you press or type in keeps its outline (a card link,
   a button, an input, a FAQ fold, a menu, a sheet). The page footer is a white band without a rule over it. */
.card:not(.card-link), .stat, .pack-panel, .table-wrap { border-color: transparent; }
.prose .template-box { border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent; }
.context-bar { border-bottom-color: transparent; }
.site-footer { border-top-color: transparent; }

/* SITE STYLE on the public pages (18 Oct 2026, G56): at most one filled call per scene and two on a page. The header's "Start free" is the
   outlined twin of the page's own filled call; the cookie choices are equal and outlined (neither pushed); a chosen tab or pill is tinted,
   never a second fill. Every target is 44 px; static pills and dividers lose their grey rule. */
/* the header's Start free is outlined only on a page that carries its own filled call; elsewhere it is the page's one call */
body:has(main .btn:not(.btn-ghost):not(.btn-danger)) .site-header .btn:not(.btn-ghost) { background: var(--surface); color: var(--accent-deep); border-color: var(--line); }
body:has(main .btn:not(.btn-ghost):not(.btn-danger)) .site-header .btn:not(.btn-ghost):hover { border-color: var(--accent); background: var(--accent-soft); }
/* on a page whose hero call is the large button, a second, smaller call in a row lower down is outlined (one filled call per scene) */
main:has(.btn-large) .cta-row > .btn:not(.btn-large):not(.btn-ghost) { background: var(--surface); color: var(--accent-deep); border-color: var(--line); }
.cookie-actions .btn:not(.btn-ghost) { background: var(--surface); color: var(--ink); border-color: var(--ink-2); }
.cookie-actions .btn:not(.btn-ghost):hover { background: var(--surface-2); }
[role=tab][aria-selected=true] { background: var(--accent-soft); color: var(--accent-deep); border-color: var(--accent); }
[role=tab][aria-selected=true] .pill { background: var(--surface); color: inherit; }
.blog-cat-list a.pill[aria-current="true"] { background: var(--accent-soft); color: var(--accent-deep); box-shadow: inset 0 0 0 1px var(--accent); }
#site-country { min-height: var(--tap); }
.geo-bar { border-bottom-color: transparent; }
.geo-notice a { min-height: var(--tap); }
.rc-who { width: var(--tap); height: var(--tap); }
#f-terms { block-size: var(--tap); inline-size: 22px; margin-block: 0; }
.tab-pill { border-color: transparent; background: transparent; }
.rv { border-top-color: transparent; }
.crumbs a { display: inline-flex; align-items: center; min-height: var(--tap); }
/* the client page's cards: one filled call per page (New request); a card's own Save or Add is outlined, a delete is a red outline */
.app .card .btn.btn-small:not(.btn-ghost) { background: var(--surface); color: var(--ink); border-color: var(--line); }
.btn-ghost.btn-danger { background: var(--surface); color: var(--bad); border-color: var(--bad); }
.btn-ghost.btn-danger:hover { background: color-mix(in srgb, var(--bad) 10%, var(--surface)); color: var(--bad); }

/* Resumed pass, 18 Oct 2026 (docs/DESIGN-PASS-2026-10-18.md "Site style"): the client's upload page and the public footer follow the same border rule:
   the client header is a white band and the client footer a quiet block, both grouped by space, no grey rule; the language picker is as wide as
   its words, not a full-width field. */
header.client-header { border-bottom-color: transparent; }
footer.client-footer { border-top-color: transparent; }
.client-header + * select#lang, form:has(> select#lang) select#lang { width: auto; min-width: 160px; }
.site-footer .footer-bottom { border-top-color: transparent; }
/* The cookie banner keeps 16 px (12 on a phone) above its title; the country strip's pills are grouped by space, with no box edge to measure from;
   the sign-up page's benefits keep 16 px under their ink rule. */
.cookie-banner { padding-block: 16px; }
@media (max-width: 479px) { .cookie-banner { padding-block: 12px; } }
.tab-pill { border-width: 0; background: none; }
.auth-benefits > li { padding-top: 16px; }
/* A destructive action that is not the next step is a red text button (DESIGN-PRINCIPLES section 4: "a red text link or outlined button"),
   so a card keeps at most two outlined buttons (C11). 44 px target. */
.link-danger { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0; border: 0; background: none; color: var(--bad);
  font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.link-danger:hover { color: var(--bad); text-decoration-thickness: 2px; }
/* A visually hidden file input (the label is the target) takes no box at all. */
input[type="file"].sr-only { width: 0; height: 0; }
.app nav.crumbs a, nav.crumbs ol li a { display: inline-flex; align-items: center; min-height: var(--tap); }

/* Design review, 18 Oct 2026 (docs/DESIGN-REVIEW-2026-10-18.md; DESIGN-PRINCIPLES "Compose the page", G56). */
/* A page's head and its first block are one group: the lede sits 24 px above what it introduces, not a 130 px dead band (/my, /report, legal). */
main > .page-head + section { padding-top: var(--space-l, 24px); }
/* The footers' language picker is as wide as its words on every page (it was a 290 px field in the app and public footers). */
.footer-bottom select, .app-footer-tools select { width: auto; min-width: 0; max-width: 220px; }
/* The support address never breaks mid-word in the footer's narrow Help column. */
.footer-grid a[href^="mailto:"] { overflow-wrap: normal; word-break: normal; white-space: nowrap; }
/* The client's questions page (/q): a payee group is headed by weight and space, not a 2 px ink rule; the chosen sort is tinted, never a
   second filled control beside "Send my answers" (rule 3). */
.client-body .q-group-head { border-bottom: 0; padding-bottom: var(--space-s, 8px); }
.client-body .q-sort a[aria-current] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-deep); }
/* The published report (/report) on the client's page frame: card titles on the card scale, table heads in sentence case, no sideways scroll. */
.client-body .card > h2 { font-size: var(--t-sec, 20px); line-height: 1.3; letter-spacing: -.01em; margin: 0 0 var(--space-m, 16px); }
.client-body .table th { color: var(--ink-2); }
.client-body .table { width: 100%; }
@media (max-width: 479px) { .client-body .table th, .client-body .table td { padding-inline: 6px; } }
/* No tracked capitals anywhere (site style "Type"; frontend-design): table heads and fact labels are sentence case at the meta size, weight
   makes them heads (public tables, Plan and billing's usage facts, the report). A table head may wrap on a phone rather than push the page sideways. */
th { text-transform: none; letter-spacing: 0; font-size: var(--t-meta, 12.5px); font-weight: 600; }
.facts dt { text-transform: none; letter-spacing: 0; font-size: var(--t-meta, 12.5px); font-weight: 600; }
.pack-region h4, .group-title { text-transform: none; letter-spacing: 0; }
@media (max-width: 479px) { th { white-space: normal; } }
/* /q: a question card keeps 16 px from every edge to its words (R21, C12; it had 14 / 14 / 12). */
.client-body .q-item { padding: var(--space-m, 16px); }
/* Preview only (PREVIEW_ACCESS + BUILD_TAG, base.html and client/base.html): one thin line saying which build this page is.
   28 px in normal flow above the top bar, the muted surface, small type, no link. Absent on production. */
.preview-ribbon { box-sizing: border-box; height: 28px; display: flex; align-items: center; justify-content: center; padding: 0 var(--space-m, 16px);
  background: var(--surface-2); color: var(--ink-2); font-size: var(--t-meta, 12.5px); line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }