/* Soft green surfaces, quiet rules, readable text in both themes. */
:root {
  color-scheme: light;
  --bg: #f1f6ef;
  --surface: #f1f6ef;
  --g: #285d43;
  --g-strong: #244b37;
  --g-dim: #496351;
  --g-line: #a8bdab;
  --g-tint: #dce8d8;
  --g-wash: #e9f0e6;
  --on-g: #fafcf8;
  --hero-ink: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #1b3027;
    --surface: #22392e;
    --g: #b5d1bd;
    --g-strong: #cee1d2;
    --g-dim: #a5bcad;
    --g-line: #607d6c;
    --g-tint: #2b4537;
    --g-wash: #20372c;
    --on-g: #1b3027;
    --hero-ink: brightness(0) saturate(100%) invert(85%) sepia(10%) saturate(466%) hue-rotate(82deg) brightness(94%) contrast(92%);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #1b3027;
  --surface: #22392e;
  --g: #b5d1bd;
  --g-strong: #cee1d2;
  --g-dim: #a5bcad;
  --g-line: #607d6c;
  --g-tint: #2b4537;
  --g-wash: #20372c;
  --on-g: #1b3027;
  --hero-ink: brightness(0) saturate(100%) invert(85%) sepia(10%) saturate(466%) hue-rotate(82deg) brightness(94%) contrast(92%);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; overflow-wrap: break-word; background: var(--bg); color: var(--g); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif; font-size: 1.0625rem; line-height: 1.6; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { color: var(--g-strong); font-weight: 500; letter-spacing: -0.01em; margin: 0; }
h1 { font-size: clamp(2rem, 5vw, 3.25rem); line-height: 1.1; letter-spacing: -0.02em; max-width: 22ch; }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.2; }
h3 { font-size: 1.0625rem; line-height: 1.4; }
p { margin: 0; max-width: 62ch; }
p + p { margin-top: 1em; }
ul, ol { margin: 0; padding-left: 1.25em; max-width: 62ch; }
li + li { margin-top: 0.25em; }
small, .small { font-size: 0.875rem; }
.dim { color: var(--g-dim); }
code, pre, .mono, kbd { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9375em; }
.mono { font-variant-numeric: tabular-nums; white-space: nowrap; }
code { overflow-wrap: anywhere; }
a { color: inherit; text-decoration: underline; text-underline-offset: 0.15em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--g); outline-offset: 3px; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
button:disabled { cursor: default; }
.wrap { max-width: 72rem; margin: 0 auto; padding: 0 1.25rem; }
@media (min-width: 48em) { .wrap { padding: 0 2rem; } }
.skip { position: absolute; left: -999px; top: 0; padding: 0.5rem 1rem; background: var(--bg); }
.skip:focus { left: 1rem; top: 1rem; z-index: 10; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Header and the once-per-visit wordmark. */
.top { border-bottom: 1px solid var(--g-line); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4rem; flex-wrap: wrap; padding-top: 0.75rem; padding-bottom: 0.75rem; }
.nav { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; font-size: 0.9375rem; flex: 1 1 auto; min-width: 0; justify-content: flex-end; }
.nav a { text-decoration: none; }
.nav a:hover { text-decoration: underline; }
.nav .waitlist-link { color: var(--g-strong); font-weight: 600; text-decoration: underline; }
.waitlist-note { margin-top: 1rem; font-size: 0.9375rem; color: var(--g-dim); max-width: 42ch; }
.feature-note { margin-top: 1rem; }
.legal-draft { margin-top: 2rem; padding: 1rem 1.25rem; background: var(--g-wash); border-left: 3px solid var(--g-line); font-size: 0.9375rem; }
.legal-details { max-width: 42rem; margin: 0; }
.legal-details > div { padding: 0.8rem 0; border-bottom: 1px solid var(--g-line); }
.legal-details dt { font-size: 0.875rem; color: var(--g-dim); }
.legal-details dd { margin: 0.25rem 0 0; }
.btn { display: inline-block; padding: 0.55em 1em; background: var(--g); color: var(--on-g); text-decoration: none; border: 1px solid var(--g); line-height: 1.2; }
.btn:hover { background: var(--g-strong); border-color: var(--g-strong); text-decoration: none; }
.btn.ghost { background: transparent; color: var(--g); }
.btn.ghost:hover { background: var(--g-wash); }
.mark { font-weight: 500; font-size: 1.25rem; text-decoration: none; color: var(--g-strong); letter-spacing: -0.01em; white-space: nowrap; flex: 0 1 auto; min-width: 0; overflow: hidden; padding-right: 2px; }
.mark .zb { color: var(--g-strong); }
.mark:hover .zb { color: var(--g); }
/* The hourglass stroke of the brand Z sits over the typed glyph: a replaced element on the
   baseline needs no font metrics for its vertical position; app.js measures the glyph for the rest. */
.z-line { vertical-align: baseline; overflow: visible; width: 0.53em; height: 0.705em; margin-left: -0.56em; margin-right: 0.03em; }
.z-line line { stroke: currentColor; stroke-width: 0.06em; opacity: 0.4; transition: opacity 0.9s ease; }
.mark:not(.brand) .z-line line { opacity: 0; }
.mark .caret { display: inline-block; width: 1.5px; margin-right: -1.5px; height: 1em; margin-bottom: -0.12em; background: var(--g); animation: caret-blink 1.1s steps(1) infinite; }
@keyframes caret-blink { 50% { opacity: 0; } }
/* On a phone the typed word scrolls like a text field; fade the clipped start. */
.mark.scrolled { -webkit-mask-image: linear-gradient(to right, transparent, #000 1.5rem); mask-image: linear-gradient(to right, transparent, #000 1.5rem); }
/* A text editor's selection: a soft tint behind unchanged text. */
.mark .sel { background: color-mix(in srgb, var(--g-line) 55%, transparent); }
.theme { display: none; color: var(--g-dim); }
.js .theme { display: inline-flex; }
.theme-toggle { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; padding: 0 0.25rem; }
.theme-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.toggle-track { width: 36px; height: 22px; border: 1px solid var(--g-dim); border-radius: 12px; padding: 3px; background: var(--g-wash); }
.toggle-track > span { display: block; width: 14px; height: 14px; border-radius: 50%; background: var(--g); transition: transform 0.18s ease; }
.theme-toggle[aria-checked="true"] .toggle-track > span { transform: translateX(14px); }
.menu-toggle { display: none; }
@media (max-width: 47.999em) {
  .top .mark { flex: 1 1 0; }
  .js .menu-toggle { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; margin-right: -0.6rem; border-radius: 6px; color: var(--g-strong); }
  .js .menu-toggle[aria-expanded="true"] { background: var(--g-tint); }
  .menu-toggle svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
  .js .top .nav { display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 0; font-size: 1.0625rem; border-top: 1px solid var(--g-line); padding-top: 0.25rem; }
  .js .top .nav.open { display: flex; }
  .js .top .nav a { display: flex; align-items: center; min-height: 44px; }
  .js .top .nav .theme { align-self: flex-start; margin-left: -0.25rem; }
}

/* Page layout. */
.hero-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: 2rem; }
.hero-figure { width: 100%; max-width: 28rem; margin: 0; justify-self: end; }
.hero-art { display: block; width: 100%; height: auto; filter: var(--hero-ink); }
.hero-figure figcaption { margin: 0.5rem auto 0; max-width: 38rem; color: var(--g-dim); font-size: 0.6875rem; line-height: 1.4; text-align: center; }
@media (max-width: 47.999em) {
  .hero-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .hero-copy { display: contents; }
  .hero-copy > .kicker { order: 1; }
  .hero-copy > h1 { order: 2; }
  .hero-copy > .lead { order: 3; }
  .hero-figure { order: 4; width: min(100%, 23rem); margin-top: 1rem; justify-self: center; }
  .hero-copy > .waitlist-note { order: 5; }
  .hero-copy > .actions { order: 6; }
}
section { padding: 4rem 0; border-bottom: 1px solid var(--g-line); }
@media (min-width: 48em) { section { padding: 6rem 0; } }
.kicker { font-size: 0.8125rem; color: var(--g-dim); letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 1.25rem; }
/* "Very fair pricing" shows the restaurant it is named after, next to the pointer. */
.fair-tip { font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; cursor: help; text-decoration: underline dotted var(--g-line); text-decoration-thickness: 1px; text-underline-offset: 0.25em; }
.fair-tip:hover, .fair-tip[aria-expanded="true"] { text-decoration-color: var(--g-dim); }
.fair-photo { position: fixed; left: 0; top: 0; z-index: 20; width: min(480px, calc(100vw - 16px)); border: 1px solid var(--g); background: var(--bg); pointer-events: none; }
.fair-photo img { display: block; width: 100%; height: auto; }
.lead { font-size: 1.25rem; line-height: 1.5; margin-top: 1.5rem; }
.two { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
@media (min-width: 60em) { .two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; align-items: start; } }
.stack > * + * { margin-top: 1.25rem; }
.actions { display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; margin-top: 2rem; }
.plain-list li + li { margin-top: 0.4rem; }
.compact-two { margin-top: 2.5rem; }
.demo-reset, .more-link { margin-top: 1.5rem; }
.qa-list { margin-top: 2rem; }
.hero { padding-top: 5rem; }
@media (min-width: 48em) { .hero { padding-top: 8rem; } }
.two > *, .features > * { min-width: 0; }

/* Desktop: feature list beside the example. Phones: example inside its selected row. */
.features { margin-top: 2.5rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.flist { border-top: 1px solid var(--g-line); min-width: 0; }
.frow { padding: 2rem 0 0.75rem 0; border-bottom: 1px solid var(--g-line); cursor: pointer; }
.frow > h3 button { text-align: left; color: inherit; width: 100%; min-height: 44px; }
.frow > p { font-size: 0.9375rem; color: var(--g-dim); max-width: none; }
.frow.on > h3 button { text-decoration: underline; text-underline-offset: 0.2em; }
.preview { width: 100%; min-width: 0; container-type: inline-size; cursor: default; }
@media (min-width: 56.25em) {
  .features { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: 3rem; align-items: start; }
  .frow { padding: 0.45rem 0.75rem 0.9rem 0.75rem; }
  .frow.on { background: var(--g-wash); }
  .preview { position: sticky; top: 1.5rem; }
}
@media (max-width: 56.249em) {
  /* Tight under the rule, the gap sits between the title row and its text (board #375). */
  .frow { padding: 0.25rem 0 1.5rem; }
  .frow > h3 { margin-bottom: 0.5rem; }
  .preview { margin-top: 1.25rem; }
  .frow > h3 button { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
  /* Drawn, not a glyph, so it centres on the title exactly. */
  .js .frow > h3 button::after { content: ""; flex: none; width: 0.875rem; height: 0.875rem; background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat; }
  .js .frow.on > h3 button::after { background-size: 100% 1.5px, 0 0; }
}

/* UI examples are normal, reflowing HTML. No crops, fixed canvases or scroll frames. */
.ui { font-size: 0.875rem; line-height: 1.5; color: var(--g); }
.ui * { min-width: 0; }
.ui p { max-width: none; }
.ui strong { font-weight: 600; color: var(--g-strong); }
.ui small { display: block; font-size: 0.75rem; color: var(--g-dim); }
.ui-card { background: var(--surface); border: 1px solid var(--g-line); border-radius: 12px; padding: 1.25rem; }
.ui-heading, .ui-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.6rem 1rem; }
.ui-heading { margin-bottom: 1.25rem; }
.ui-heading > strong { font-size: 1rem; }
.ui-heading > span:not(.ui-tag) { color: var(--g-dim); font-size: 0.75rem; }
.ui-button { display: inline-block; padding: 0.4rem 0.75rem; border: 1px solid var(--g); border-radius: 6px; background: var(--surface); color: var(--g-strong); font-weight: 500; line-height: 1.4; white-space: nowrap; }
.ui-button:not(:disabled):not(.inert) { box-shadow: 0 2px 0 var(--g-line); }
.ui-button:not(.inert):hover:not(:disabled), .ui-button[aria-pressed="true"] { background: var(--g-tint); }
.ui-button.solid { background: var(--g); color: var(--on-g); border-color: var(--g); }
/* Same weight as the rule above, so a solid button keeps its own fill and light-on-green text when hovered. */
.ui-button.solid:not(.inert):hover:not(:disabled), .ui-button.solid[aria-pressed="true"] { background: var(--g-strong); border-color: var(--g-strong); }
.ui-button:disabled { border-color: var(--g-line); color: var(--g-dim); }
.ui-button.solid:disabled { background: var(--g-dim); color: var(--on-g); border-color: var(--g-dim); }
.ui-link { padding: 0.3rem 0.65rem; border: 1px solid var(--g-line); border-radius: 6px; background: var(--g-wash); text-decoration: underline; text-underline-offset: 0.2em; font-size: 0.8125rem; }
.ui-link:not(.inert):hover { border-color: var(--g); background: var(--g-tint); }
/* Controls the example does not wire up stay flat and quiet, so only live ones read as clickable. */
.ui .inert { cursor: default; }
.ui .ui-button.inert, .ui .ui-link.inert { background: transparent; border-color: transparent; color: var(--g-dim); font-weight: 400; text-decoration: none; }
.ui a.ui-link { display: inline-flex; align-items: center; color: inherit; }
.ui .demo-hint { margin-bottom: 0.85rem; font-size: 0.8125rem; color: var(--g-dim); }
.ui-tag { display: inline-block; padding: 0.2rem 0.55rem; border-radius: 20px; background: var(--g-tint); font-size: 0.75rem; white-space: nowrap; }
.ui label { display: block; margin: 1rem 0; }
.ui input:not([type="checkbox"]), .ui textarea, .ui select { display: block; width: 100%; margin-top: 0.4rem; padding: 0.7rem; color: var(--g); background: var(--bg); border: 1px solid var(--g-dim); border-radius: 5px; font: inherit; font-size: 1rem; }
.ui textarea { resize: vertical; }
.ui input::placeholder, .ui textarea::placeholder { color: var(--g-dim); opacity: 1; }
.ui .ui-check { display: flex; align-items: center; gap: 0.65rem; min-height: 44px; }
.ui input[type="checkbox"] { flex: none; width: 18px; height: 18px; accent-color: var(--g); }
.ui-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1.25rem; }
.ui-eyebrow { color: var(--g-dim); font-size: 0.75rem; margin: 1rem 0 0.5rem; }
.ui [role="status"] { color: var(--g-dim); font-size: 0.8125rem; margin-top: 0.75rem; }
.ui details { margin-top: 0.75rem; }
.ui summary { cursor: pointer; min-height: 44px; padding: 0.65rem 0; text-decoration: underline; text-underline-offset: 0.2em; }
.ui details p { margin-bottom: 1rem; }
.ui progress { appearance: none; display: block; width: 100%; height: 8px; border: 0; border-radius: 5px; background: var(--g-tint); color: var(--g); margin: 1rem 0; overflow: hidden; }
.ui progress::-webkit-progress-bar { background: var(--g-tint); }
.ui progress::-webkit-progress-value { background: var(--g); border-radius: 5px; }
.ui progress::-moz-progress-bar { background: var(--g); }

/* Imports have no decorative outer box. */
.import-example { padding: 0.5rem 0; }
.import-source { display: inline-grid; min-width: 6.5em; }
.import-source > span { grid-area: 1 / 1; opacity: 0; animation: import-source 12s linear infinite; }
.import-source > span:nth-child(2) { animation-delay: -9s; }
.import-source > span:nth-child(3) { animation-delay: -6s; }
.import-source > span:nth-child(4) { animation-delay: -3s; }
.import-stages { list-style: none; padding: 0; display: grid; gap: 0.75rem; margin-bottom: 1.5rem; counter-reset: phases; }
.import-stages li { counter-increment: phases; display: flex; gap: 0.75rem; align-items: center; margin: 0; }
.import-stages li::before { content: counter(phases); display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid var(--g-dim); border-radius: 50%; font-size: 0.75rem; }
.import-stages li.current { color: var(--g-strong); font-weight: 600; }
.import-stages li.current::before { border-color: var(--g); background: var(--g-tint); }
.import-stages li.complete::before { content: "✓"; background: var(--g); color: var(--on-g); border-color: var(--g); }
.import-records { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; padding: 1rem 0; }
.import-records strong { display: block; font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.import-records span { font-size: 0.75rem; color: var(--g-dim); }
.import-result { margin-top: 1rem; }
.import-result [role="status"] { flex: 1 1 12rem; }
.import-log { min-height: 8.25rem; padding: 0.75rem 0 0.75rem 1.5rem; border-block: 1px solid var(--g-line); font-size: 0.8125rem; }
.import-log li { padding: 0.25rem 0; animation: import-line 240ms ease-out both; }
.import-verification { margin-top: 1rem; padding: 1rem; border: 1px solid var(--g-line); border-radius: 8px; background: var(--g-wash); }
.import-verification .ui-heading { margin-bottom: 0.75rem; }
.import-summary { margin: 0; }
.import-summary > div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.45rem 0; border-top: 1px solid var(--g-line); }
.import-summary dd { margin: 0; font-weight: 600; color: var(--g-strong); text-align: right; }
@keyframes import-line { from { opacity: 0; transform: translateY(4px); } }
@keyframes import-source {
  0%, 20% { opacity: 1; }
  25%, 95% { opacity: 0; }
  100% { opacity: 1; }
}

/* The same live timer on four devices, laid out as one grid: the web app across the top, the
   desktop popover and the phone side by side with shared top and bottom edges, the terminal
   across the bottom. One gap between pieces, one inner padding, one radius, one type scale. */
.timer-collage { --collage-gap: 1.25rem; --collage-pad: 1rem; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 15rem); gap: var(--collage-gap); align-items: stretch; font-size: 0.75rem; }
.timer-collage > figure { margin: 0; min-width: 0; }
.timer-web, .terminal-device { grid-column: 1 / -1; }
.device-label { color: var(--g-dim); font-size: 0.75rem; font-weight: 500; }
.timer-collage .app-example, .timer-collage .menubar, .timer-collage .menubar-popover, .timer-collage .phone-sample, .timer-collage .terminal-sample { border: 1px solid var(--g-line); background: var(--surface); }
.timer-collage .app-example, .timer-collage .menubar-popover, .timer-collage .phone-sample, .timer-collage .terminal-sample { border-radius: 12px; }
.timer-collage .app-content, .timer-collage .menubar-popover, .timer-collage .terminal-sample { padding: var(--collage-pad); }
.timer-collage .ui-heading { margin-bottom: 0.75rem; }
.timer-collage .ui-heading > strong { font-size: 0.875rem; }
.timer-collage .web-label { margin: 0 0 0.75rem; }
.timer-line { display: flex; align-items: center; gap: 0.75rem; padding: 1rem 0; border-top: 1px solid var(--g-line); flex-wrap: wrap; }
.timer-line > span:first-child { flex: 1 1 9rem; }
/* The desktop column: a menu bar with the tray timer at its right end, the popover hanging from it
   and filling the rest of the row, so its footer lines up with the phone's. */
.desktop-sample { --tray-anchor: calc(3.6rem + 1px); display: flex; flex-direction: column; gap: 0.75rem; }
.menubar { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; background: var(--g-tint); border-radius: 8px; padding: 0.25rem 0.35rem; font-size: 0.75rem; }
.menubar .device-label { padding-left: 0.65rem; }
.menubar-trigger { display: flex; align-items: center; justify-content: center; gap: 0.3rem; width: 6.5rem; min-height: 26px; flex: none; border: 1px solid var(--g-line); border-radius: 5px; }
.menubar-trigger[aria-expanded="true"] { background: var(--g-tint); border-color: var(--g-dim); }
.menubar-trigger:hover { border-color: var(--g); background: var(--g-tint); }
.menubar-popover { position: relative; flex: 1; display: flex; flex-direction: column; box-shadow: 0 6px 18px color-mix(in srgb, var(--g) 8%, transparent); }
.menubar-popover[hidden] { display: none; }
.menubar-popover::before { content: ""; position: absolute; width: 12px; height: 12px; top: -7px; right: calc(var(--tray-anchor) - 6px); transform: rotate(45deg); background: var(--surface); border-top: 1px solid var(--g-line); border-left: 1px solid var(--g-line); }
.menubar-popover .ui-heading { flex-wrap: wrap; }
/* The phone: the mobile app's day view, a plain list rather than a big clock. */
.mobile-sample { display: flex; }
.phone-sample { flex: 1; display: flex; flex-direction: column; border-radius: 28px; padding: 0.75rem var(--collage-pad); }
/* The status bar carries the label beside the speaker, as a phone's clock sits beside its notch. */
.phone-status { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; }
.phone-speaker { width: 32px; height: 3px; border-radius: 3px; background: var(--g-dim); }
.phone-home { flex: none; width: 64px; height: 3px; border-radius: 3px; background: var(--g-dim); margin: 0.75rem auto 0; }
.phone-entry { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.25rem 0.5rem; padding: 0.75rem; border-top: 1px solid var(--g-line); }
.sample-week + .phone-entry { border-top: 0; }
.phone-entry > :nth-child(2n) { justify-self: end; }
.phone-entry small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--g-dim); font-size: 0.6875rem; }
.phone-entry strong { font-weight: 600; }
.phone-entry .ui-button { padding: 0.2rem 0.5rem; font-size: 0.6875rem; }
.terminal-sample { background: var(--g-tint); display: grid; gap: 0.4rem; font-size: 0.75rem; }
.terminal-sample .device-label { margin-bottom: 0.35rem; }

/* Invoice preview, editable message and delivery history. */
.invoice-paper { background: var(--bg); padding: 1.25rem; border: 1px solid var(--g-line); }
.invoice-paper h4 { font-size: 1.5rem; }
.bill-to { display: grid; gap: 0.25rem; margin: 1.5rem 0; }
.invoice-lines { margin: 0; }
.invoice-lines > div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.8rem 0; border-top: 1px solid var(--g-line); }
.invoice-lines dd { margin: 0; white-space: nowrap; font-variant-numeric: tabular-nums; }
.invoice-total { font-weight: 600; }
.attachment-list, .export-formats { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0; }
.attachment-list span { font-size: 0.75rem; border-bottom: 1px solid var(--g-dim); }
.email-preview { background: var(--g-wash); padding: 1rem; margin-top: 1rem; }
.email-preview p { white-space: pre-wrap; margin-top: 0.75rem; }
.reminder-settings { margin-top: 1.5rem; border-top: 1px solid var(--g-line); }
.delivery-history { list-style: none; padding: 0; }
.delivery-history li { padding: 1rem 0 1rem 1rem; border-left: 2px solid var(--g-line); }
.delivery-history span { display: block; font-size: 0.8125rem; color: var(--g-dim); }

/* Command palette: grouped navigation results, as in the app. */
.search-example { min-height: 25rem; }
.search-launch { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; text-align: left; border-color: var(--g-dim); }
kbd { padding: 0.15rem 0.4rem; border: 1px solid var(--g-dim); border-radius: 4px; }
.palette { margin-top: 0.75rem; }
.palette .search-input { margin-top: 0; }
.palette-result, .palette-reference { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 0; border-top: 1px solid var(--g-line); }
.palette-result .ui-button { flex: none; }
.search-status { min-height: 2rem; }

/* Reports, expenses, team insights and exports. */
.ui-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin-bottom: 1.5rem; }
.ui-stats strong { display: block; font-size: clamp(1.2rem, 4cqw, 1.6rem); font-variant-numeric: tabular-nums; }
.budget-meter { padding: 1rem 0; border-block: 1px solid var(--g-line); }
.budget-meter .ui-row { font-size: 0.8125rem; }
.hours-chart { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; }
.hours-chart > div { display: grid; grid-template-rows: 1.5rem 100px 1.5rem; text-align: center; align-items: end; }
.hours-chart i { display: block; height: var(--bar); background: var(--g); border-radius: 3px 3px 0 0; margin: 0 0.4rem; }
.expense-line, .team-person { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding: 1rem 0; border-top: 1px solid var(--g-line); }
.receipt { background: var(--bg); border: 1px dashed var(--g-dim); padding: 1.5rem; text-align: center; margin: 0.5rem 0 1rem; }
.estimate-example { margin-top: 1rem; }
.outlier-note { background: var(--g-tint); padding: 0.25rem 1rem 1rem; border-radius: 8px; }
.outlier-note .ui-row { padding: 0.75rem 0; }
.outlier-note [data-week] { margin-top: 1rem; }
.export-contents { list-style: none; padding: 0; margin: 1rem 0; }
.export-contents li { padding: 0.75rem 0; border-bottom: 1px solid var(--g-line); }
.export-contents li::before { content: "✓"; margin-right: 0.75rem; }
/* Source-aligned diagrams: a condensed real screen hierarchy in a plain rounded frame.
   Tables scroll locally on phones, preserving their columns instead of turning
   them into a different interface. */
.app-example { border: 1px solid var(--g-line); border-radius: 12px; background: var(--surface); overflow: hidden; font-size: 0.75rem; }
.sample-week .current, .palette-result.current { background: var(--g-tint); color: var(--g-strong); font-weight: 600; }
.app-content { padding: 1rem; }
.app-content .ui-heading { margin-bottom: 1rem; }
.app-content .ui-heading > strong { font-size: 0.9375rem; }
.app-example .ui-button, .app-example .ui-link { font-size: 0.75rem; padding: 0.3rem 0.6rem; line-height: 1.4; }
.web-label { margin-bottom: 0.75rem; }
.app-content .ui-stats { gap: 0.5rem; margin-bottom: 1rem; }
.app-content .ui-stats > div { padding: 0.6rem; border: 1px solid var(--g-line); border-radius: 6px; }
.app-content .ui-stats strong { font-size: clamp(0.85rem, 2.4cqw, 1.2rem); }
.app-content small { font-size: 0.6875rem; }
.sample-segment { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--g-line); border-radius: 5px; overflow: hidden; font-size: 0.6875rem; }
.sample-segment > * { padding: 0.3rem 0.65rem; }
.sample-segment b { background: var(--g-tint); }
.ui-heading > .sample-segment { font-size: 0.6875rem; color: inherit; }
.sample-toolbar { margin-bottom: 0.75rem; }
.sample-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-bottom: 1px solid var(--g-line); font-size: 0.6875rem; }
/* the week's own rule separates it from the first entry */
.sample-week + .timer-line { border-top: 0; }
.sample-week > span { padding: 0.4rem 0.15rem; text-align: center; }
.sample-week small, .sample-week.compact small { font-size: 0.5625rem; }
.sample-week .current { border-bottom: 2px solid var(--g); }
.is-running { background: var(--g-tint); }
.timer-web { padding: 0; }
/* Rows keep an inner gutter, so the running row's tint never touches its text or button;
   the Total row and the desktop footer use the same gutter, so every text lines up. */
.timer-line { padding: 0.75rem; }
.timer-line > span:first-child { flex-basis: 7rem; }
.timer-total { padding-inline: 0.75rem; }
.timer-total { padding-top: 0.75rem; border-top: 1px solid var(--g-line); }
/* The running entry's live dot: the app's animate-ping (TimerBar, CommandPalette), a ring that
   swells and fades beside the clock. Still under reduced motion. */
.run-time { display: inline-flex; align-items: center; gap: 0.5rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.is-running .run-time { color: var(--g-strong); font-weight: 600; }
.live-dot { position: relative; display: none; width: 8px; height: 8px; border-radius: 50%; background: var(--g); flex: none; }
.is-running .live-dot { display: inline-block; }
.live-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--g); opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .is-running .live-dot::after { animation: live-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; }
}
@keyframes live-ping { 0% { transform: scale(1); opacity: 0.75; } 75%, 100% { transform: scale(2); opacity: 0; } }
.menubar-popover .ui-button { padding: 0.3rem 0.5rem; font-size: 0.6875rem; }
/* Footers sit at the bottom of their piece, so the popover's and the phone's totals share a line. */
.device-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; border-top: 1px solid var(--g-line); margin-top: auto; padding: 0.75rem 0.75rem 0; font-size: 0.75rem; }
.device-footer > small { font-size: 0.75rem; }
.phone-tabs { display: flex; justify-content: space-between; gap: 0.4rem; border-top: 1px solid var(--g-line); padding-top: 0.75rem; margin-top: 0.75rem; font-size: 0.625rem; }
.sample-table-wrap { overflow-x: auto; margin: 0.65rem 0; border: 1px solid var(--g-line); border-radius: 6px; }
.sample-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 0.6875rem; font-variant-numeric: tabular-nums; }
.sample-table th { font-weight: 500; color: var(--g-dim); background: var(--g-wash); }
.sample-table td, .sample-table th { padding: 0.65rem 0.6rem; border-bottom: 1px solid var(--g-line); white-space: nowrap; }
.sample-table tr:last-child td { border-bottom: 0; }
.sample-table .ui-link { font-size: inherit; }
.sample-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.sample-box { padding: 0.8rem; border: 1px solid var(--g-line); border-radius: 6px; margin: 0.75rem 0; }
.sample-columns .sample-box { margin: 0; }
.invoice-dates { padding: 1rem 0; }
.app-content .invoice-lines { margin: 0.75rem 0 1rem; }
.sample-composer { margin-top: 1rem; box-shadow: 0 8px 24px var(--g-wash); }
.composer-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 1rem; }
.composer-options { border-left: 1px solid var(--g-line); padding-left: 1rem; }
.composer-options > small { margin-top: 1rem; }
.sample-composer .invoice-paper { padding: 0.8rem; font-size: 0.6875rem; }
.sample-composer .invoice-paper h4 { font-size: 1.125rem; }
.sample-composer .invoice-lines > div { flex-wrap: wrap; gap: 0.25rem; }
.palette-result { width: 100%; text-align: left; border-radius: 4px; padding: 0.65rem; min-height: 44px; }
.palette-result:hover { background: var(--g-wash); }
.palette-help { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; padding-top: 0.75rem; color: var(--g-dim); font-size: 0.625rem; }
.search-status { margin-top: 1rem; }
.sample-filter { padding: 0.75rem 0; color: var(--g-dim); font-size: 0.6875rem; }
.sample-heatmap { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 7px); grid-template-columns: repeat(16, minmax(0, 1fr)); gap: 3px; margin-top: 0.75rem; }
.sample-heatmap i { background: var(--g); border-radius: 1px; }
.app-content .hours-chart { gap: 0.25rem; }
.app-content .hours-chart > div { grid-template-rows: 1.5rem 72px 1.5rem; font-size: 0.625rem; }
.app-content .hours-chart small { font-size: 0.5625rem; }
.app-content .hours-chart i { margin: 0 0.1rem; }
.app-content .four-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.team-trend { display: flex; align-items: end; gap: 0.5rem; height: 70px; margin-top: 0.75rem; }
.team-trend i { flex: 1; background: linear-gradient(to top, var(--g) 82%, var(--g-tint) 82%); border-radius: 2px 2px 0 0; }
@container (max-width: 540px) {
  .app-content { padding: 0.75rem; }
  .composer-grid { grid-template-columns: minmax(0, 1fr); }
  .composer-options { border-left: 0; border-top: 1px solid var(--g-line); padding: 1rem 0 0; }
}
@container (max-width: 380px) {
  .app-content .ui-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sample-columns { grid-template-columns: minmax(0, 1fr); }
}
@container (max-width: 380px) {
  .timer-collage { grid-template-columns: minmax(0, 1fr); }
  .timer-collage > figure { grid-column: auto; }
  .invoice-example { padding: 1rem; }
  .invoice-paper { padding: 0.8rem; }
}

/* Supporting content. */
.demo { min-width: 0; }
.transcript { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.8125rem; line-height: 1.65; white-space: normal; overflow-wrap: anywhere; margin: 0; height: 30rem; overflow: hidden; padding: 0.5rem 0.75rem 1rem 0; color: var(--g); overflow-anchor: none; }
.transcript.is-scrolling { mask-image: linear-gradient(to bottom, transparent, #000 3rem); -webkit-mask-image: linear-gradient(to bottom, transparent, #000 3rem); }
.transcript-session { display: flow-root; padding-bottom: 2rem; }
.transcript-caption { margin-bottom: 1rem; }
.transcript-line { display: grid; grid-template-columns: 3.75rem minmax(0, 1fr); gap: 0.5rem; margin-bottom: 0.8rem; }
.transcript-line > span:last-child { white-space: pre-wrap; }
.transcript .who { color: var(--g-dim); font-size: 0.6875rem; padding-top: 0.15rem; }
.transcript-prompt { margin-top: 2rem; color: var(--g-strong); font-weight: 600; }
.transcript-prompt:first-child { margin-top: 0; }
.transcript-tool { color: color-mix(in srgb, var(--g-dim) 92%, var(--bg)); font-size: 0.6875rem; }
.transcript-full { height: auto; overflow: visible; }
@media (max-width: 40em) {
  .transcript:not(.transcript-full) { height: 26rem; }
  .transcript-line { grid-template-columns: 3rem minmax(0, 1fr); gap: 0.35rem; }
  .transcript .who { font-size: 0.625rem; }
}
.list { list-style: none; padding: 0; margin: 2rem 0 0; max-width: none; border-top: 1px solid var(--g-line); }
.list li { margin: 0; padding: 1rem 0; border-bottom: 1px solid var(--g-line); display: grid; gap: 0.25rem 2rem; }
@media (min-width: 48em) { .list li { grid-template-columns: 14rem 1fr; } }
.list b { font-weight: 500; color: var(--g-strong); }
.list p { color: var(--g-dim); font-size: 0.9375rem; }
.price { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; background: var(--g-line); border: 1px solid var(--g-line); margin-top: 2.5rem; }
@media (min-width: 60em) { .price { grid-template-columns: 3fr 2fr; } }
.price > div { background: var(--bg); padding: 2rem; }
.price h3 { font-size: 1.25rem; }
.price .figure { font-size: clamp(2.25rem, 5vw, 3.25rem); line-height: 1; letter-spacing: -0.02em; color: var(--g-strong); margin-top: 1.5rem; font-variant-numeric: tabular-nums; }
.price .figure small { font-size: 0.45em; letter-spacing: 0; color: var(--g-dim); }
.price .figure + .dim { margin-top: 0.5rem; }
.price ul { margin-top: 1.5rem; list-style: none; padding: 0; }
.price li { padding: 0.5rem 0; border-top: 1px solid var(--g-line); font-size: 0.9375rem; }
.fine { font-size: 0.875rem; color: var(--g-dim); margin-top: 1.5rem; }
input[type="range"] { appearance: none; width: 100%; height: 1px; background: var(--g-dim); margin: 1.75rem 0 0.75rem; outline-offset: 8px; }
input[type="range"]::-webkit-slider-thumb { appearance: none; width: 18px; height: 18px; background: var(--g); border: 0; border-radius: 0; cursor: pointer; }
input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; background: var(--g); border: 0; border-radius: 0; cursor: pointer; }
.range-labels { display: flex; justify-content: space-between; font-size: 0.8125rem; color: var(--g-dim); }
.qa { border-top: 1px solid var(--g-line); padding: 1.5rem 0; }
.qa:last-of-type { border-bottom: 1px solid var(--g-line); }
.qa h3 { margin-bottom: 0.5rem; }
.qa p { color: var(--g-dim); }
.privacy-pledge { display: block; color: var(--g-strong); font-size: 1.1875rem; font-weight: 600; margin-bottom: 0.4rem; }
.privacy-promise { margin-top: 1.5rem; padding: 1rem 1.25rem; border-left: 3px solid var(--g); background: var(--g-wash); }
.faq .qa { padding: 2rem 0; }
footer { padding: 3rem 0 4rem; font-size: 0.9375rem; color: var(--g-dim); }
footer .wrap { display: flex; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; }
footer ul { list-style: none; padding: 0; display: flex; gap: 1.5rem; flex-wrap: wrap; }
footer li { margin: 0; }
.page { padding-top: 4rem; padding-bottom: 6rem; }
.page h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); }
.page .section { margin-top: 3rem; }
.page .section h2 { font-size: 1.25rem; margin-bottom: 0.75rem; }
.page .section ul { margin-top: 0.75rem; }
.page .section h3 { font-size: 1rem; margin: 1.5rem 0 0.4rem; }
.page .section ul + p, .page .section .legal-wrap + p { margin-top: 0.75rem; }
.page .section li { max-width: 62ch; }
.legal-wrap { overflow-x: auto; margin-top: 1rem; border: 1px solid var(--g-line); border-radius: 6px; }
.legal-table { width: 100%; min-width: 36rem; border-collapse: collapse; text-align: left; font-size: 0.9375rem; }
.legal-table th, .legal-table td { padding: 0.65rem 0.9rem; border-bottom: 1px solid var(--g-line); vertical-align: top; }
.legal-table th { font-weight: 500; color: var(--g-dim); background: var(--g-wash); }
.legal-table tr:last-child td { border-bottom: 0; }
@media (max-width: 40em) {
  .top .wrap { gap: 0.25rem; }
  .mark { max-width: 100%; width: 100%; }
  .nav { gap: 0.15rem 1rem; font-size: 0.875rem; flex-basis: 100%; justify-content: flex-start; }
  .nav a { display: inline-flex; align-items: center; min-height: 44px; }
  .nav .theme { margin-left: auto; }
  .hero { padding-top: 3rem; }
  section { padding: 3rem 0; }
  .lead { font-size: 1.125rem; }
  .price > div { padding: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .mark .caret { animation: none; }
  .z-line line { transition: none; }
  .toggle-track > span { transition: none; }
  .import-log li { animation: none; }
  .import-source > span { animation: none; opacity: 0; }
  .import-source > span:first-child { opacity: 1; }
}
/* Live controls pulse slowly for as long as they do something; with reduced motion they keep a still ring. */
.ui .interaction-cue { box-shadow: 0 0 0 3px color-mix(in srgb, var(--g) 45%, transparent); }
.ui .sample-segment .interaction-cue, .ui .star.interaction-cue { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--g) 60%, transparent); }
.ui .report-tab.interaction-cue { box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--g) 55%, transparent); background: var(--g-wash); }
.ui .star.interaction-cue { border-radius: 4px; }
/* A live search field glows as the whole box, not as the bare input inside it. */
.ui .search-bar input.interaction-cue { box-shadow: none; animation: none; }
.ui .search-bar:has(input.interaction-cue) { box-shadow: 0 0 0 3px color-mix(in srgb, var(--g) 45%, transparent); }
@media (prefers-reduced-motion: no-preference) {
  .ui .interaction-cue { animation: cue-glow 3.2s ease-in-out infinite; }
  .ui .sample-segment .interaction-cue, .ui .star.interaction-cue { animation-name: cue-glow-inset; }
  .ui .report-tab.interaction-cue { animation-name: cue-glow-tab; }
  .ui .search-bar:has(input.interaction-cue) { animation: cue-glow 3.2s ease-in-out infinite; }
}
@keyframes cue-glow {
  0%, 100% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--g) 25%, transparent), 0 0 0 0 transparent; }
  50% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--g) 35%, transparent), 0 0 10px 2px color-mix(in srgb, var(--g) 22%, transparent); }
}
@keyframes cue-glow-inset {
  0%, 100% { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--g) 20%, transparent); }
  50% { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--g) 45%, transparent); }
}
@keyframes cue-glow-tab {
  0%, 100% { box-shadow: inset 0 -2px 0 transparent; background-color: transparent; }
  50% { box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--g) 45%, transparent); background-color: var(--g-wash); }
}

/* Page chrome shared by the invoice, projects and reports examples: title row with actions, collapsible panels. */
.page-head { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 0.6rem 1rem; margin-bottom: 0.9rem; }
.page-title { font-size: 1rem; font-weight: 600; color: var(--g-strong); }
.page-head small { display: block; margin-top: 0.15rem; }
.action-bar { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.panel { border: 1px solid var(--g-line); border-radius: 8px; margin-bottom: 0.75rem; overflow: hidden; }
.panel-title { display: flex; align-items: center; gap: 0.4rem; margin: 0; padding: 0.5rem 0.8rem; font-size: 0.8125rem; font-weight: 600; color: var(--g-strong); background: var(--g-wash); border-bottom: 1px solid var(--g-line); }
.panel-body { padding: 0.8rem; }
.status-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.status-grid > div { padding: 0.8rem; }
.status-grid > div + div { border-left: 1px solid var(--g-line); }
.status-grid .ui-eyebrow, .group-row td { margin: 0 0 0.6rem; font-size: 0.625rem; letter-spacing: 0.06em; text-transform: uppercase; }
.status-grid .ui-row { margin-bottom: 0.5rem; }
.status-grid .ui-row .ui-eyebrow { margin: 0; }
.status-text { margin: 0; font-size: 0.75rem; }
.delivery-steps { list-style: none; margin: 0; padding: 0; }
.delivery-steps li { position: relative; margin: 0; padding: 0 0 0.85rem 1.4rem; }
/* One unbroken line: each step draws from its own dot's centre to the next dot's centre, under the dots. */
.delivery-steps li::before { content: ""; position: absolute; left: 4px; top: 9px; bottom: -9px; width: 2px; background: var(--g-line); }
.delivery-steps li:not(:has(~ li:not([hidden])))::before { display: none; }
.delivery-steps li::after { content: ""; position: absolute; left: 0; top: 4px; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--g-dim); background: var(--surface); box-sizing: border-box; }
.delivery-steps li.done::after { background: var(--g); border-color: var(--g); }
.delivery-steps li.done:has(+ .done, + [hidden] + .done)::before { background: var(--g); }
.delivery-steps strong { display: block; font-size: 0.75rem; }
.delivery-sends { list-style: none; margin: 0.3rem 0 0; padding: 0; font-size: 0.6875rem; color: var(--g-dim); }
.delivery-sends li { padding: 0; }
.delivery-sends li::before, .delivery-sends li::after { display: none; }
.invoice-no { display: block; font-size: 1.1rem; font-weight: 400; }
.paper-from { text-align: right; }
.paper-dates { text-align: right; }
/* The send dialog covers the page; the page fades back and the dialog fades in. */
.app-main { position: relative; }
.app-content { transition: opacity 0.35s ease; }
.is-sending .app-content { opacity: 0.12; pointer-events: none; }
.send-overlay { position: absolute; inset: 0.6rem 0.6rem auto; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); overflow: auto; background: var(--surface); border: 1px solid var(--g-line); border-radius: 10px; box-shadow: 0 14px 36px color-mix(in srgb, var(--g) 20%, transparent); opacity: 0; visibility: hidden; transition: opacity 0.35s ease, visibility 0s linear 0.35s; font-size: 0.75rem; }
.is-sending .send-overlay { opacity: 1; visibility: visible; transition: opacity 0.35s ease; }
.send-preview { padding: 0.8rem; background: var(--g-wash); }
.send-preview .ui-tabs { margin-bottom: 0.75rem; }
.send-preview .invoice-paper { padding: 1rem; font-size: 0.6875rem; background: #fff; color: #1d2a22; border-color: #d5ddd6; }
.send-preview .invoice-paper h4, .send-preview .invoice-paper strong { color: #1d2a22; }
.send-preview .invoice-paper small { color: #5b6a60; }
.send-preview .invoice-paper h4 { font-size: 1.25rem; line-height: 1.15; }
.send-preview .invoice-lines > div { padding: 0.5rem 0; border-top-color: #d5ddd6; }
.send-preview .bill-to { margin: 1rem 0 0.5rem; }
.send-pane { padding: 0.8rem; display: flex; flex-direction: column; }
.send-pane .ui-heading { margin-bottom: 0.5rem; }
.send-pane .ui-eyebrow { margin-top: 0.5rem; }
.send-pane .sample-box { margin: 0 0 0.5rem; }
.send-note { margin: 0.75rem 0 0; }
.send-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 0.4rem; margin-top: auto; padding-top: 1rem; }
/* Quick search: one bar, grouped rows, a green edge on the chosen row, as in the app. */
.ui label.search-bar { display: flex; align-items: center; gap: 0.6rem; padding: 0.35rem 0.8rem; border: 1px solid var(--g-line); border-radius: 8px; background: var(--surface); cursor: text; margin: 0; }
.search-bar:focus-within { border-color: var(--g); }
.ui .search-bar input { flex: 1; width: auto; margin: 0; padding: 0.45rem 0; border: 0; background: transparent; font-size: 0.9375rem; }
.ui .search-bar input:focus { outline: none; }
.search-bar kbd { font-size: 0.6875rem; color: var(--g-dim); white-space: nowrap; }
.ui label.search-bar.small { padding: 0 0.6rem; flex: 1 1 8rem; }
.ui .search-bar.small input { font-size: 0.75rem; line-height: 1.4; padding: 0.3rem 0; }
.search-example { min-height: 24rem; }
.palette-list { position: relative; margin-top: 0.5rem; max-height: 22rem; overflow-y: auto; border: 1px solid var(--g-line); border-radius: 8px; background: var(--surface); }
.palette-group { position: sticky; top: 0; z-index: 1; margin: 0; padding: 0.55rem 0.9rem 0.25rem; background: var(--surface); font-size: 0.6875rem; color: var(--g-dim); }
.palette-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; min-height: 40px; padding: 0.5rem 0.9rem 0.5rem calc(0.9rem - 2px); border: 0; border-left: 2px solid transparent; border-radius: 0; background: none; color: var(--g-dim); text-align: left; font: inherit; font-size: 0.875rem; cursor: pointer; }
.palette-row:hover { background: var(--g-wash); }
.palette-row.current { border-left-color: var(--g); color: var(--g-strong); font-weight: 600; }
.palette-row > span:first-child { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.palette-row small { display: inline; font-size: 0.75rem; font-weight: 400; color: var(--g-dim); }
.palette-row .dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--g); flex: none; }
.palette-row .dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--g); opacity: 0; }
@media (prefers-reduced-motion: no-preference) { .palette-row:not(.stopped) .dot::after { animation: live-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; } }
.palette-row.stopped .dot { background: var(--g-dim); box-shadow: none; }
.palette-row .accent { flex: none; font-size: 0.75rem; font-weight: 400; color: var(--g-dim); }
.palette-row.current .accent { color: var(--g); }
/* Projects list: grouped by client, pinned first, budget bars with the overrun in red. */
.projects-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; }
.dim-label { color: var(--g-dim); font-size: 0.6875rem; margin-left: auto; }
.projects-table td:first-child { width: 1.5rem; padding-right: 0; }
.projects-table td, .projects-table th { padding: 0.5rem 0.45rem; }
.star { display: inline-flex; color: var(--g-line); font-size: 0.95rem; }
.star.on { color: var(--g); }
.star.on .icon { fill: currentColor; }
.group-pin { display: inline-flex; align-items: center; gap: 0.3rem; }
.group-row td { padding: 0.35rem 0.6rem; background: var(--g-wash); color: var(--g-dim); }
.projects-table small.inline { display: inline; }
.budget-bar { display: inline-flex; width: 5.5rem; height: 7px; border-radius: 4px; background: var(--g-tint); overflow: hidden; vertical-align: middle; }
.budget-bar i { display: block; height: 100%; background: var(--g); }
.budget-bar b { flex: none; width: 1px; height: 100%; background: var(--g-strong); }
.budget-bar i.overrun { background: #c2534a; }
.over-row td { background: color-mix(in srgb, #c2534a 7%, transparent); }
.neg { color: #c2534a; }
/* Reports: tabs, range control, summary cards, growth chart. */
.report-tabs { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--g-line); margin-bottom: 0.9rem; }
.ui .report-tab { min-height: 0; padding: 0.45rem 0.7rem; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; color: var(--g-dim); font-size: 0.75rem; cursor: pointer; }
.ui .report-tab[aria-selected="true"] { color: var(--g-strong); font-weight: 600; border-bottom-color: var(--g); }
.report-toolbar { display: flex; flex-wrap: nowrap; white-space: nowrap; align-items: center; gap: 0.5rem 0.75rem; margin-bottom: 0.9rem; font-size: 0.6875rem; color: var(--g-dim); }
.toolbar-end { margin-left: auto; display: flex; gap: 0.35rem; }
.range-control { display: inline-flex; align-items: center; border: 1px solid var(--g-line); border-radius: 5px; overflow: hidden; }
.range-control > span { padding: 0.3rem 0.5rem; color: var(--g-dim); }
.range-control b { padding: 0.3rem 0.6rem; border-inline: 1px solid var(--g-line); font-weight: 500; color: var(--g-strong); }
.ui .sample-segment button { padding: 0.3rem 0.65rem; border: 0; background: none; color: var(--g); font: inherit; cursor: pointer; }
.ui .sample-segment button:hover { background: var(--g-wash); }
.report-cards > div { display: flex; flex-direction: column; justify-content: space-between; gap: 0.35rem; min-height: 3.5rem; }
.report-cards strong { text-align: right; }
.app-content .insight-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.app-content .insight-cards strong { font-size: clamp(0.8rem, 2cqw, 1rem); }
.profit { color: #3aa66b; }
.growth-chart { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.6rem; height: 110px; align-items: end; margin: 0.9rem 0 1.4rem; }
.growth-chart > div { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 3px; height: 100%; }
.growth-chart i { display: block; width: 32%; border-radius: 2px 2px 0 0; background: var(--g-dim); }
.growth-chart i + i { background: var(--g); }
.growth-chart small { position: absolute; left: 0; right: 0; bottom: -1.2rem; text-align: center; font-size: 0.5625rem; }
.chart-legend { display: flex; gap: 1rem; font-size: 0.625rem; color: var(--g-dim); }
.chart-legend i { display: inline-block; width: 8px; height: 8px; margin-right: 0.3rem; border-radius: 2px; background: var(--g-dim); }
.chart-legend i.l2 { background: var(--g); }
.report-builder { margin: 0 0 0.9rem; }
.report-builder label { margin: 0.25rem 0; }
@container (max-width: 540px) {
  .status-grid { grid-template-columns: minmax(0, 1fr); }
  .status-grid > div + div { border-left: 0; border-top: 1px solid var(--g-line); }
  .send-overlay { grid-template-columns: minmax(0, 1fr); inset: 0.4rem 0.4rem auto; }
  .app-content .insight-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .report-toolbar { flex-wrap: wrap; }
  .toolbar-end { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .app-content, .send-overlay, .is-sending .send-overlay { transition: none; }
}

/* Line icons, the ghost icon button (dialog close, clear search). */
.icon { display: inline-block; flex: none; width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.panel-title .icon { width: 14px; height: 14px; color: var(--g-dim); }
.icon-button { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; color: var(--g-dim); }
.icon-button:hover { background: var(--g-tint); color: var(--g-strong); }
.icon-button .icon { width: 16px; height: 16px; }
.search-bar > .icon { width: 18px; height: 18px; color: var(--g-dim); }
.search-bar.small > .icon { width: 14px; height: 14px; }
/* New report: the app's dialog over a faded page, in the site's own style. */
.is-dialog .app-content { opacity: 0.12; pointer-events: none; }
.report-dialog { position: absolute; top: 0.6rem; left: 50%; transform: translateX(-50%); width: min(30rem, calc(100% - 1.2rem)); padding: 0.9rem 1rem; background: var(--surface); border: 1px solid var(--g-line); border-radius: 10px; box-shadow: 0 14px 36px color-mix(in srgb, var(--g) 20%, transparent); font-size: 0.75rem; }
.report-dialog .ui-heading { margin-bottom: 0.5rem; }
.ui .report-dialog label:not(.ui-check) { margin: 0 0 0.75rem; font-weight: 500; color: var(--g-strong); }
.ui .report-dialog input:not([type="checkbox"]), .ui .report-dialog select { margin-top: 0.3rem; padding: 0.45rem 0.6rem; font-size: 0.8125rem; font-weight: 400; }
.report-dialog .sample-columns { gap: 0 0.75rem; }
.builder-field { margin: 0 0 0.75rem; }
.field-label { display: block; margin-bottom: 0.35rem; font-weight: 500; color: var(--g-strong); }
.filter-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.filter-chips span { padding: 0.25rem 0.6rem; border: 1px dashed var(--g-line); border-radius: 6px; color: var(--g-dim); }
.builder-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 0.75rem; }
.ui .report-dialog .ui-check { min-height: 32px; margin: 0; gap: 0.5rem; }
.ui .report-dialog .share-check { color: var(--g-dim); }
.report-dialog .send-actions { padding-top: 0.5rem; }
@container (max-width: 380px) { .builder-checks { grid-template-columns: minmax(0, 1fr); } }

/* Downloads: tabs over the sections (all sections show without JS). */
.dl-tabs { display: flex; flex-wrap: wrap; gap: 0 1.5rem; margin-top: 2.5rem; border-bottom: 1px solid var(--g-line); }
.dl-tabs [role="tab"] { min-height: 44px; padding: 0.5rem 0; margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--g-dim); }
.dl-tabs [role="tab"]:hover { color: var(--g-strong); }
.dl-tabs [role="tab"][aria-selected="true"] { color: var(--g-strong); border-bottom-color: var(--g); font-weight: 500; }
.dl-tabs + .dl-panel, .dl-panel + .dl-panel:not([hidden]) { margin-top: 2rem; }
.soon { display: inline-block; margin-left: 0.35rem; padding: 0.05rem 0.45rem; border: 1px solid var(--g-line); border-radius: 20px; font-size: 0.75rem; font-weight: 400; color: var(--g-dim); vertical-align: 0.1em; }

/* Impressum contact form, posted to app.zebu.work/contact: the second direct channel beside email. */
.contact-form { display: grid; gap: 1rem; max-width: 34rem; margin: 1.5rem 0 2rem; }
.contact-form label { display: grid; gap: 0.4rem; font-size: 0.9375rem; }
.contact-form input, .contact-form textarea { width: 100%; padding: 0.65rem 0.75rem; color: var(--g-strong); background: var(--surface); border: 1px solid var(--g-line); border-radius: 6px; font: inherit; }
.contact-form input:focus-visible, .contact-form textarea:focus-visible { outline: 2px solid var(--g); outline-offset: 1px; border-color: var(--g); }
.contact-form textarea { resize: vertical; min-height: 8rem; }
.contact-form .btn { justify-self: start; cursor: pointer; }
.contact-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-status { margin-top: 1rem; padding: 0.75rem 1rem; border-left: 3px solid var(--g); background: var(--g-wash); }
.compare-link { margin-top: 1.25rem; font-size: 0.9375rem; }