:root {
  /* Native controls (scrollbars, date pickers, autofill) follow the visitor's theme. */
  color-scheme: light dark;
  /* Two families, system fonts only — no @font-face, no CDN, nothing for
     font-src 'none' to block. --font-display is a serif for the one
     headline per page that carries the emotional weight (h1 only); every
     other heading and all body/UI text stays in --font-body. This is the
     one deliberate personality choice in the type system — everywhere else
     still reads as one consistent voice. */
  --font-display: Georgia, 'Iowan Old Style', 'Palatino Linotype', Palatino, serif;
  --font-body: ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Type scale — deliberately sized. */
  --text-xs: .75rem;       /* 12px */
  --text-sm: .8125rem;     /* 13px */
  --text-base: 1rem;       /* 16px */
  --text-md: 1.0625rem;    /* 17px */
  --text-lg: 1.1875rem;    /* 19px */
  --text-xl: 1.375rem;     /* 22px */
  --text-2xl: 1.75rem;     /* 28px */
  --text-3xl: clamp(1.75rem, 2.4vw + 1.2rem, 2.5rem);
  --text-4xl: clamp(2.125rem, 3vw + 1.4rem, 3.375rem);
  --text-5xl: clamp(2.75rem, 4.2vw + 1.4rem, 4.75rem);
  --leading-tight: 1.1;
  --leading-snug: 1.35;
  --leading-normal: 1.62;
  --tracking-tight: -.03em;
  --tracking-normal: 0em;
  --tracking-wide: .05em;
  --tracking-wider: .11em;

  /* Spacing — a single 4px-based scale used everywhere instead of ad-hoc values. */
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem;
  --space-5: 1.25rem; --space-6: 1.5rem; --space-7: 1.75rem; --space-8: 2rem; --space-9: 2.25rem;
  --space-10: 2.5rem; --space-12: 3rem; --space-14: 3.5rem; --space-16: 4rem;
  --space-20: 5rem; --space-24: 6rem; --space-28: 7rem;

  /* Color — a warm off-white scale (never pure white) plus exactly one
     deliberate accent (Klyrenta lime), reserved for small, meaningful
     highlights rather than fills — primary actions read through weight and
     near-black contrast instead, the same restraint the reference brief
     asked for. */
  --bg: #faf9f5;
  --bg-subtle: #f5f2ec;
  --bg-muted: #f1eee5;
  --surface: #ffffff;
  --border: #e8e4da;
  --border-strong: #d6d0c2;
  --ink: #17191b;
  --ink-muted: #565a5e;
  --ink-subtle: #696c70;
  --accent: #d9ef54;
  --accent-strong: #c3d93f;
  --accent-ink: #1c2410;
  --danger: #b3261e;
  --danger-bg: #fdf1f0;
  --danger-border: #dfc3bd;
  --success: #3d8a59;
  /* Form field outlines: at least 3:1 against the field background (#ffffff: 3.7:1),
     so a visitor can see where to type (WCAG 1.4.11). */
  --input-border: #8a8577;
  --focus-ring: #2168ca;
  /* A handful of sections (footer, dark callouts, the closing band)
     are deliberately dark for visual contrast regardless of site theme —
     unlike --ink/--bg, these never flip under prefers-color-scheme, so
     their text never ends up light-on-light once dark mode inverts --ink. */
  --ink-fixed: #17191b;
  --bg-fixed: #ffffff;
  --ink-fixed-muted: #b7bab4;
  --ink-fixed-subtle: #8c8f89;
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 20px; --radius-pill: 999px;

  /* Motion — purposeful only: buttons/links/forms, never decorative.
     ease-out for things entering/exiting, ease-in-out for movement that
     stays on screen (an accordion growing in place), plain "ease" for
     hover/color. Never ease-in in UI — it feels slow exactly when the
     visitor is watching most closely. */
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --ease-standard: ease;
  /* Arrivals (load and scroll-in): an ease-out a little softer than --ease-out,
     so the last stretch of the movement is still visible as it settles. */
  --ease-arrive: cubic-bezier(.215, .61, .355, 1);
  --duration-fast: 150ms;
  --duration-base: 180ms;
  --shell: 1180px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111113;
    --bg-subtle: #17181a;
    --bg-muted: #1e1f22;
    --surface: #19191c;
    --border: #2a2b2e;
    --border-strong: #3a3b3f;
    --ink: #f2f2f0;
    --ink-muted: #b0b3b6;
    --ink-subtle: #9b9ea2;
    --accent: #dff568;
    --accent-strong: #eaff8a;
    --accent-ink: #14200c;
    color-scheme: dark;
    --danger: #ff8a80;
    --danger-bg: #3a1c1a;
    /* The light-theme value (#dfc3bd) glared on dark surfaces; this one keeps 3.4:1
       against --danger-bg and 3.9:1 against --surface. */
    --danger-border: #b0605a;
    --success: #5cb87a; /* 7.2:1 on --surface (the light green was 4.2:1) */
    --input-border: #6e7075; /* 3.5:1 against the dark --surface */
    /* --ink-fixed stays constant across themes by design (see its definition
       above), but "constant" collided with dark mode's own --surface: once
       --surface darkens too, the two converge (#17191b vs #19191c) and the
       dark callouts and bands silently lose their contrast against the plain
       cards next to them. Pin it to true black here so it stays visually
       distinct from --surface in dark mode specifically. */
    --ink-fixed: #000000;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; color: var(--ink); background: var(--bg);
  font-family: var(--font-body);
  font-size: var(--text-base); line-height: var(--leading-normal); -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }
a { color: inherit; text-underline-offset: .2em; }
button, input, textarea, select { font: inherit; color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; border-radius: 2px; }
.shell { width: min(calc(100% - 40px), var(--shell)); margin-inline: auto; }
.narrow { max-width: 800px; }
.skip-link {
  position: fixed; z-index: 100; left: var(--space-4); top: var(--space-2);
  transform: translateY(-160%); padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm); background: var(--accent); color: var(--accent-ink);
  font-weight: 700; transition: transform var(--duration-base) var(--ease-out);
}
.skip-link:focus { transform: none; }
.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 ---------- */
.site-header { position: relative; z-index: 10; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(8px); }
.nav-shell { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-7); }
.brand { display: inline-flex; align-items: center; gap: var(--space-3); text-decoration: none; color: var(--ink); font-size: var(--text-sm); line-height: 1; letter-spacing: var(--tracking-normal); }
.brand strong { font-size: var(--text-base); letter-spacing: var(--tracking-tight); }
.brand-mark { width: 30px; height: 30px; display: flex; align-items: flex-end; gap: 3px; padding: 7px; border-radius: 8px; background: var(--ink-fixed); }
@media (prefers-color-scheme: dark) { .brand-mark { box-shadow: inset 0 0 0 1px var(--border-strong); } }
.brand-mark span { width: 4px; background: var(--accent); border-radius: 1px; }
.brand-mark span:nth-child(1) { height: 8px; } .brand-mark span:nth-child(2) { height: 12px; } .brand-mark span:nth-child(3) { height: 16px; }
.site-header nav ul { display: flex; align-items: center; gap: var(--space-7); margin: 0; padding: 0; list-style: none; }
.site-header nav a { position: relative; color: var(--ink-muted); text-decoration: none; font-size: var(--text-sm); font-weight: 550; transition: color var(--duration-base) var(--ease-standard); }
@media (hover: hover) and (pointer: fine) { .site-header nav a:hover { color: var(--ink); } }
.site-header nav a[aria-current="page"] { color: var(--ink); }
.site-header nav a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -21px; height: 2px; background: var(--accent); }
.site-header nav .nav-cta {
  display: inline-flex; min-height: 38px; align-items: center; padding: 0 var(--space-4);
  color: var(--bg); background: var(--ink); border-radius: var(--radius-pill);
  transition: background-color var(--duration-base) var(--ease-standard), transform 160ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .site-header nav .nav-cta:hover { background: color-mix(in srgb, var(--ink) 85%, var(--bg)); } }
.site-header nav .nav-cta:active { transform: scale(.97); }
.site-header nav .nav-cta[aria-current="page"] { color: var(--bg); }
.site-header nav .nav-cta[aria-current="page"]::after { display: none; }
.nav-group { display: flex; align-items: center; gap: var(--space-6); }
/* A single light-gray pill track holding all five options — the current
   language reads as a plain white segment inside it, no accent needed for
   something that's just showing current state, not asking for a click. */
.lang-switch { display: flex; align-items: center; gap: 2px; margin: 0; padding: 3px; list-style: none; border-radius: var(--radius-pill); background: var(--bg-muted); }
.lang-switch a, .lang-switch span {
  display: inline-flex; min-width: 28px; justify-content: center; padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 650; letter-spacing: var(--tracking-normal);
  text-decoration: none; color: var(--ink-subtle); transition: color var(--duration-base) var(--ease-standard), background-color var(--duration-base) var(--ease-standard);
}
@media (hover: hover) and (pointer: fine) { .lang-switch a:hover { color: var(--ink); } }
.lang-switch span[aria-current="true"] { color: var(--ink); background: var(--surface); }

/* ---------- Hero ---------- */
.hero { padding: var(--space-24) 0 var(--space-20); background: var(--bg); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(48px, 7vw, 96px); align-items: center; }
.eyebrow { display: inline-block; margin-bottom: var(--space-4); color: var(--ink-subtle); font-size: var(--text-xs); line-height: 1.2; font-weight: 650; letter-spacing: var(--tracking-wider); text-transform: uppercase; }
.eyebrow.light { color: var(--accent); }
h1, h2, h3 { margin: 0; font-weight: 700; line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }
h1 { font-size: var(--text-5xl); font-family: var(--font-display); letter-spacing: var(--tracking-normal); }
h2 { font-size: var(--text-4xl); }
h3 { font-size: var(--text-xl); }
/* The promise is a full sentence in every language (up to ~110 characters in French and Italian),
   so the home headline sits a step below the page-title size to stay within five or six lines. */
.hero h1 { max-width: 740px; font-size: clamp(2.5rem, 3.2vw + 1.2rem, 4rem); }
.hero h1 em { color: var(--ink); font-style: normal; font-weight: 700; background: linear-gradient(to bottom, transparent 62%, var(--accent) 62%); }
/* Dark mode: light text on the lime mark was 1.08:1. The words carry the accent
   themselves instead (15.6:1 on the dark background); the mark stays for light mode. */
@media (prefers-color-scheme: dark) { .hero h1 em { color: var(--accent); background-image: none; } }
.hero-lead { max-width: 620px; margin: var(--space-6) 0 var(--space-8); color: var(--ink-muted); font-size: var(--text-lg); line-height: var(--leading-normal); }
.button-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-6); }
.button {
  min-height: 46px; display: inline-flex; justify-content: center; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-5); border: 1px solid transparent; border-radius: var(--radius-pill);
  cursor: pointer; font-weight: 650; font-size: var(--text-sm); line-height: 1.2; text-decoration: none;
  transition: background-color var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard),
    color var(--duration-base) var(--ease-standard), transform 160ms var(--ease-out);
}
.button:active { transform: scale(.97); }
.button-primary { color: var(--bg); background: var(--ink); border-color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .button-primary:hover { background: color-mix(in srgb, var(--ink) 85%, var(--bg)); border-color: color-mix(in srgb, var(--ink) 85%, var(--bg)); } }
.button-secondary { color: var(--ink); border-color: var(--border-strong); background: var(--surface); }
@media (hover: hover) and (pointer: fine) { .button-secondary:hover { border-color: var(--ink); background: var(--bg-muted); } }
.text-link { display: inline-flex; gap: var(--space-2); align-items: center; color: var(--ink); font-weight: 650; text-decoration: none; transition: gap var(--duration-base) var(--ease-standard); }
@media (hover: hover) and (pointer: fine) { .text-link:hover { gap: var(--space-3); } }
.text-link.light { color: var(--accent); }
.hero-points { display: flex; gap: var(--space-6); margin: var(--space-10) 0 0; padding: 0; color: var(--ink-subtle); font-size: var(--text-xs); font-weight: 600; list-style: none; }
.hero-points { flex-wrap: wrap; row-gap: var(--space-2); }
.hero-points li { display: flex; align-items: center; gap: var(--space-2); white-space: nowrap; }
.hero-points li::before { content: ""; width: 5px; height: 5px; border-radius: var(--radius-pill); background: var(--ink-subtle); }
.workflow-panel { margin: 0; padding: var(--space-6); border-radius: var(--radius-lg); background: var(--surface); }
.panel-top { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding-bottom: var(--space-4); border-bottom: 1px solid var(--border); color: var(--ink-subtle); font-size: var(--text-xs); font-weight: 650; letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.status-dot { color: var(--ink-muted); }
.status-dot::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: var(--space-2); border-radius: var(--radius-pill); background: var(--success); }
.workflow-panel ol { margin: var(--space-6) 0 0; padding: 0; list-style: none; }
.workflow-panel li { display: flex; align-items: center; gap: var(--space-4); }
.workflow-panel li div { display: flex; flex-direction: column; }
.workflow-panel small { margin-top: 2px; color: var(--ink-subtle); }
.workflow-icon { flex: 0 0 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--ink-muted); background: var(--bg); font-size: var(--text-xs); font-weight: 700; }
.workflow-icon.accent { color: var(--accent-ink); border-color: var(--accent); background: var(--accent); }
.workflow-panel li:has(.workflow-line) { height: 18px; margin-left: 17px; }
.workflow-line { width: 1px; height: 18px; background: var(--border-strong); }
/* ---------- Sample documents carousel ----------
   Swipe/scroll with zero JS: native horizontal scroll + scroll-snap. The
   browser owns the whole gesture — touch swipe, trackpad, mouse-wheel
   shift-scroll, and keyboard once the track is focused (explicit tabindex
   below; native overflow containers are not reliably part of the default
   Tab order without one) — exactly what CSP script-src 'none' requires and,
   done this way, costs nothing. Mouse click-drag is deliberately NOT
   promised anywhere in the copy: no browser scrolls a plain overflow
   container that way without JS, so claiming it would be a broken promise. */
.sample-docs { padding: 0 0 var(--space-16); background: var(--bg); }
.doc-carousel {
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  scrollbar-width: none; perspective: 1200px;
  -webkit-mask-image: linear-gradient(to right, black, black calc(100% - 64px), transparent);
  mask-image: linear-gradient(to right, black, black calc(100% - 64px), transparent);
}
.doc-carousel::-webkit-scrollbar { display: none; }
.doc-carousel:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 4px; }
/* Fixed (not viewport-scaling) gutters: at 1440px+ a shell-matching gutter
   grows just as fast as the viewport, permanently eating the exact width
   that was supposed to become real overflow. Cards are sized generously
   enough that a small fixed gutter still leaves genuine scroll range on an
   ordinary laptop screen, not just below the width three cards fit flat. */
.doc-track {
  display: flex; align-items: flex-start; gap: var(--space-7); margin: 0; list-style: none;
  padding: var(--space-4) 0 var(--space-10) max(20px, calc((100vw - var(--shell)) / 2 * .24));
}
.doc-card {
  flex: 0 0 auto; width: min(500px, 84vw); scroll-snap-align: start; padding: var(--space-7);
  border-radius: var(--radius-lg); background: var(--surface); box-shadow: 0 24px 50px -24px rgba(23, 25, 27, .28);
  user-select: none; -webkit-user-select: none;
  /* One transform composed from separate custom properties, each owned by a
     single rule (rest tilt here, hover state below) — never two rules
     re-declaring the whole `transform` shorthand for the same element, which
     is what silently broke the dashboard's tilt earlier this project. */
  --rest-rot: 0deg; --hover-lift: 0px; --hover-rot: 0deg; --hover-scale: 1;
  transform: translate(var(--fan-x), var(--fan-y)) rotate(calc(var(--rest-rot) + var(--fan-rot))) translateY(var(--hover-lift)) rotate3d(1, -.4, 0, var(--hover-rot)) scale(var(--hover-scale));
  transition: transform .5s var(--ease-out), box-shadow .4s var(--ease-out);
}
.doc-track > .doc-card:nth-child(1) { --rest-rot: -1.4deg; }
.doc-track > .doc-card:nth-child(2) { --rest-rot: .8deg; }
.doc-track > .doc-card:nth-child(3) { --rest-rot: -.6deg; }
/* Trailing space so the last real card can rest with a little breathing
   room instead of jamming flush into the viewport edge. */
.doc-card-spacer { flex: 0 0 auto; width: max(20px, calc((100vw - var(--shell)) / 2 * .24)); scroll-snap-align: none; }
@media (hover: hover) and (pointer: fine) {
  .doc-card:hover { --hover-lift: -8px; --hover-rot: 7deg; --hover-scale: 1.03; box-shadow: 0 34px 70px -22px rgba(23, 25, 27, .34); }
}
.doc-card-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-5); }
.doc-kind { font-size: var(--text-xs); font-weight: 650; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--ink-subtle); }
/* One status pill per example: the check result is the section's whole payoff,
   so it gets real, restrained colour — keyed to the result (warning, error, ok)
   from the language-neutral data, never to the translated text. */
.doc-card-top { align-items: flex-start; }
.doc-status { max-width: 66%; padding: var(--space-1) var(--space-3); border-radius: var(--radius-md); background: var(--bg-muted); color: var(--ink-muted); font-size: var(--text-xs); font-weight: 650; line-height: 1.4; text-align: right; }
.doc-status.is-ok { background: var(--accent); color: var(--accent-ink); }
.doc-status.is-warning { background: #fbead0; color: #7a4f0e; }
.doc-status.is-error { background: var(--danger-bg); color: var(--danger); }
@media (prefers-color-scheme: dark) { .doc-status.is-warning { background: color-mix(in srgb, #e3a008 20%, var(--surface)); color: #f5c451; } }
.doc-vendor {
  margin: 0 0 var(--space-4); font-weight: 650; font-size: var(--text-md);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.doc-meta { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin: 0 0 var(--space-5); padding: var(--space-4) 0; border-top: 1px dashed var(--border); border-bottom: 1px dashed var(--border); }
.doc-meta dt { margin: 0 0 2px; color: var(--ink-subtle); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.doc-meta dd { margin: 0; font-size: var(--text-sm); font-weight: 550; }
.doc-concept { margin: 0 0 var(--space-5); color: var(--ink-muted); font-size: var(--text-sm); }
.doc-amount { margin: 0; font-family: var(--font-display); font-size: var(--text-2xl); letter-spacing: var(--tracking-tight); }
.doc-finding { margin: var(--space-5) 0 0; padding-top: var(--space-4); border-top: 1px dashed var(--border); color: var(--ink-muted); font-size: var(--text-sm); line-height: 1.5; }
.doc-disclaimer { margin: var(--space-2) 0 0; text-align: center; color: var(--ink-subtle); font-size: var(--text-xs); }

.principle-strip { color: var(--ink); background: var(--bg-subtle); border-block: 1px solid var(--border); }
.principle-strip p { margin: 0; padding: var(--space-5) 0; text-align: center; font-size: var(--text-sm); }
.principle-strip strong { font-weight: 650; }

/* ---------- Depth & motion (still CSP script-src 'none' — no JS anywhere) ---------- */

/* Cross-document view transitions: the browser crossfades the whole PRG-style
   navigation between pages (and after form submits) instead of a hard cut —
   real morphing between states, at zero JS cost. Ignored where unsupported. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .5s; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }

/* A slow, autonomous glow drift — never cursor-driven, since that needs JS.
   Reads as ambient depth on the hero and the two dark sections. */
.hero, .section-dark, .fit-section { position: relative; overflow: hidden; }
.hero::before, .section-dark::before, .fit-section::before {
  content: ""; position: absolute; inset: -30%; z-index: 0; pointer-events: none;
  background: radial-gradient(600px circle at 18% 22%, rgba(217, 239, 84, .16), transparent 60%),
    radial-gradient(520px circle at 84% 78%, rgba(217, 239, 84, .09), transparent 58%);
  animation: oo-drift 24s ease-in-out infinite alternate;
}
.hero > *, .section-dark > *, .fit-section > * { position: relative; z-index: 1; }
@keyframes oo-drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(3%, -2%) scale(1.06); } }

/* The hero panel rests at a slight 3D angle instead of lying flat — real
   perspective, not a flourish — and faces the visitor once they engage with
   the hero. Fixed-angle only: mouse-tracking tilt needs JS. */
.workflow-panel {
  transform: perspective(1400px) rotateY(-3deg) rotateX(1.5deg);
  transition: transform .6s var(--ease-out);
  box-shadow: 0 40px 80px -30px rgba(23, 25, 27, .22);
}
@media (hover: hover) and (pointer: fine) {
  .hero:hover .workflow-panel { transform: perspective(1400px) rotateY(0deg) rotateX(0deg); }
}

/* ---------- Hero background: live data flows ----------
   What comes in (PDF, email, a web form) runs down into the workflow panel;
   what comes out (spreadsheet, CRM, accounting) runs on below it. A short
   pulse travels each line, inputs in lime, results in ink, staggered so
   something is always moving without anything shouting. Both pieces hang off
   the panel's own edges (bottom: 100% / top: 100%), so the lines meet the
   panel exactly at every width and tilt with it; the panel's vertical margin
   reserves their room, so they never run over the text beside or above it.
   A dot grid fades in behind the panel only. Pure SVG + CSS, nothing to load. */
.hero { --flow-h: 150px; }
.workflow-panel { position: relative; margin-block: var(--flow-h); }
.flow { position: absolute; left: 0; right: 0; height: var(--flow-h); pointer-events: none; }
.flow-in { bottom: 100%; }
.flow-out { top: 100%; }
.flow svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.flow-base { fill: none; stroke: color-mix(in srgb, var(--ink) 24%, transparent); stroke-width: 1.2; }
.flow-pulse { fill: none; stroke: var(--accent-strong); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 70 3000; stroke-dashoffset: 70; }
.flow-out .flow-pulse { stroke: var(--ink); stroke-width: 2.4; }
.flow-node { fill: var(--surface); stroke: color-mix(in srgb, var(--ink) 35%, transparent); stroke-width: 1; }
.flow-port { fill: var(--accent); stroke: var(--ink); stroke-width: 1.2; }
.flow-chip {
  position: absolute; display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px;
  border-radius: var(--radius-pill); background: var(--surface); color: var(--ink-muted);
  box-shadow: 0 1px 0 rgba(23, 25, 27, .06), 0 6px 18px -10px rgba(23, 25, 27, .35);
  font-size: var(--text-xs); font-weight: 650; line-height: 1; letter-spacing: .01em; white-space: nowrap;
}
.flow-chip::before { content: ""; width: 6px; height: 6px; border-radius: var(--radius-pill); background: var(--accent-strong); }
.flow-out .flow-chip::before { background: var(--ink); }
.flow-in .flow-chip { top: 0; }
.flow-out .flow-chip { bottom: 0; }
.flow-chip.c1 { left: 0; }
.flow-chip.c2 { left: 50%; translate: -50% 0; }
.flow-chip.c3 { right: 0; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--ink) 15%, transparent) 1px, transparent 0);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse 34% 62% at 74% 54%, #000 18%, transparent 78%);
  mask-image: radial-gradient(ellipse 34% 62% at 74% 54%, #000 18%, transparent 78%);
}
@keyframes flow-pulse { 0% { stroke-dashoffset: 70; } 70%, 100% { stroke-dashoffset: -1000; } }
@media (prefers-reduced-motion: no-preference) {
  .flow-pulse { animation: flow-pulse 3.4s cubic-bezier(.45, 0, .25, 1) infinite; }
  .flow-in .p2 { animation-delay: 1.1s; }
  .flow-in .p3 { animation-delay: 2.2s; }
  /* Results leave a beat after inputs arrive, as if the panel had just processed them. */
  .flow-out .p1 { animation-delay: .6s; }
  .flow-out .p2 { animation-delay: 1.7s; }
  .flow-out .p3 { animation-delay: 2.8s; }
}
@media (max-width: 680px) { .flow-chip { gap: 5px; padding: 4px 9px; font-size: .6875rem; } }
@media (max-width: 920px) {
  .hero { --flow-h: 104px; }
  .hero::after {
    -webkit-mask-image: radial-gradient(ellipse 80% 34% at 50% 76%, #000 15%, transparent 75%);
    mask-image: radial-gradient(ellipse 80% 34% at 50% 76%, #000 15%, transparent 75%);
  }
}

/* ---------- Sections ---------- */
.section { padding: var(--space-24) 0; }
.section-dark { color: var(--bg-fixed); background: var(--ink-fixed); }
.section-heading { display: grid; grid-template-columns: 1.4fr .6fr; gap: var(--space-14); align-items: end; margin-bottom: var(--space-12); }
.section-heading p { margin: 0; color: var(--ink-muted); font-size: var(--text-md); }
.section-dark .section-heading p { color: var(--ink-fixed-muted); }
.section-action { margin-top: var(--space-8); text-align: right; }
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 0; padding: 0; list-style: none; }
.process-grid li { min-height: 250px; padding: var(--space-6); border-left: 1px solid rgba(255, 255, 255, .14); }
.section:not(.section-dark) .process-grid li { border-color: var(--border); }
.process-grid li:last-child { border-right: 1px solid rgba(255, 255, 255, .14); }
.section:not(.section-dark) .process-grid li:last-child { border-color: var(--border); }
.process-grid > li > span { display: block; margin-bottom: var(--space-12); color: var(--accent); font-size: var(--text-xs); font-weight: 650; }
.section:not(.section-dark) .process-grid > li > span { color: var(--ink-subtle); }
.process-grid h2, .process-grid h3 { font-size: var(--text-lg); }
.process-grid p { margin: var(--space-3) 0 0; color: var(--ink-fixed-subtle); font-size: var(--text-sm); }
.section:not(.section-dark) .process-grid p { color: var(--ink-muted); }

.price-card { position: relative; display: flex; flex-direction: column; padding: var(--space-8); border-radius: var(--radius-lg); background: var(--surface); transition: transform var(--duration-base) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .price-card:hover { transform: perspective(900px) rotateX(2deg) translateY(-4px); } }
.price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--space-2); margin: var(--space-6) 0 var(--space-4); }
/* The amount never breaks ("CHF" over "1’490"); a long suffix such as "one-off setup" moves to the next line instead. */
.price strong { white-space: nowrap; }
.price strong { font-size: var(--text-3xl); line-height: 1; letter-spacing: var(--tracking-tight); }
.price span { color: var(--ink-subtle); font-size: var(--text-sm); }
.price-card > p { min-height: 55px; color: var(--ink-muted); }
.price-card ul { flex: 1; margin: var(--space-5) 0 var(--space-8); padding: var(--space-5) 0 0; border-top: 1px solid var(--border); list-style: none; }
.price-card li { position: relative; margin: var(--space-3) 0; padding-left: var(--space-6); }
.price-card li::before { content: "✓"; position: absolute; left: 0; color: var(--ink-muted); font-weight: 700; }
.price-card .button { align-self: flex-start; }
/* On the black bands (closing call to action, dark callouts) the default black
   primary button disappeared into its background; use the accent so the main
   call to action reads as a button. */
.fit-section .button-primary, .callout .button-primary { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
@media (hover: hover) and (pointer: fine) { .fit-section .button-primary:hover, .callout .button-primary:hover { background: color-mix(in srgb, var(--accent) 88%, #ffffff); border-color: color-mix(in srgb, var(--accent) 88%, #ffffff); } }
.price-card > h2, .price-card > h3 { font-size: var(--text-xl); }
/* Plan choice on the request form: native radios styled as pills, no JavaScript. */
.plan-field { margin: 0 0 var(--space-7); padding: 0; border: 0; min-width: 0; }
.plan-field legend { display: flex; justify-content: space-between; gap: var(--space-4); width: 100%; margin-bottom: var(--space-3); padding: 0; font-weight: 650; font-size: var(--text-sm); }
.plan-field legend span { color: var(--ink-subtle); font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; }
.plan-options { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.plan-option { position: relative; display: inline-flex; margin: 0; font-weight: 600; font-size: var(--text-sm); cursor: pointer; }
.field .plan-option input { position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; opacity: 0; }
.field .plan-option span { font-size: var(--text-sm); font-weight: 600; letter-spacing: normal; text-transform: none; }
.field .plan-option span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-5); border: 1px solid var(--input-border); border-radius: var(--radius-pill); background: var(--surface); color: var(--ink-muted); transition: background-color var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard), transform 120ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .field .plan-option:hover span { border-color: var(--ink-subtle); color: var(--ink); } }
.field .plan-option:active span { transform: scale(.97); }
.field .plan-option input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.field .plan-option input:focus-visible + span { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.plan-field:target legend { color: var(--ink); }
.pricing-disclaimer { max-width: 720px; margin: var(--space-6) auto 0; color: var(--ink-subtle); text-align: center; font-size: var(--text-xs); }
.pricing-disclaimer.pricing-vat { margin-top: var(--space-1); }
.price-actions { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.price-actions .text-link { font-size: var(--text-sm); }
.fit-section { padding: var(--space-20) 0; color: var(--bg-fixed); background: var(--ink-fixed); }
.fit-grid { display: grid; grid-template-columns: 1fr .8fr; gap: var(--space-20); align-items: center; }
.fit-grid h2 { max-width: 600px; } .fit-grid > div > p { max-width: 600px; color: var(--ink-fixed-muted); } .fit-grid .button { margin-top: var(--space-4); }
.fit-list { border-top: 1px solid rgba(255, 255, 255, .16); }
.fit-list div { padding: var(--space-6) 0; border-bottom: 1px solid rgba(255, 255, 255, .16); }
.fit-list strong { color: var(--accent); } .fit-list p { margin: var(--space-1) 0 0; color: var(--ink-fixed-muted); }

.page-hero { padding: var(--space-20) 0 var(--space-16); background: var(--bg-subtle); text-align: center; }
.page-hero.compact { padding: var(--space-16) 0 var(--space-14); }
.page-hero p { max-width: 680px; margin: var(--space-6) auto 0; color: var(--ink-muted); font-size: var(--text-lg); }
.page-hero .eyebrow { margin-bottom: var(--space-4); }
.center-cta { max-width: 720px; margin: var(--space-24) auto 0; text-align: center; } .center-cta p { color: var(--ink-muted); } .center-cta .button { margin-top: var(--space-3); }
.deliverables { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); margin: var(--space-16) 0; }
.deliverables > div { padding: var(--space-8); border-radius: var(--radius-lg); background: var(--bg-subtle); }
.deliverables h2 { font-size: var(--text-2xl); } .deliverables ul { margin: var(--space-5) 0 0; padding-left: var(--space-5); } .deliverables li { margin: var(--space-3) 0; color: var(--ink-muted); }
.callout { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-14); align-items: center; margin-top: var(--space-16); padding: var(--space-10); border-radius: var(--radius-lg); color: var(--bg-fixed); background: var(--ink-fixed); }
.callout p { margin-top: 0; color: var(--ink-fixed-muted); font-size: var(--text-md); } .callout h2 { font-size: var(--text-3xl); }
.faq-grid { display: grid; grid-template-columns: .6fr 1.4fr; gap: var(--space-16); margin-top: var(--space-20); padding-top: var(--space-16); border-top: 1px solid var(--border); }
details { border-bottom: 1px solid var(--border); }
summary { padding: var(--space-4) var(--space-1); cursor: pointer; font-weight: 650; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; color: var(--ink-subtle); font-weight: 400; font-size: var(--text-lg); transition: transform var(--duration-base) var(--ease-out); }
details[open] summary::after { transform: rotate(45deg); }
/* Height can't be transitioned directly, and a fixed max-height guesses
   wrong for five languages of different lengths — a 0fr/1fr grid track
   grows to the content's real height at any length, in any language. */
.faq-body { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 260ms var(--ease-in-out), opacity 200ms var(--ease-standard); }
details[open] .faq-body { grid-template-rows: 1fr; opacity: 1; }
.faq-body > p { min-height: 0; overflow: hidden; margin: 0 var(--space-1) var(--space-6); color: var(--ink-muted); }

/* ---------- Forms ---------- */
.form-section { padding: var(--space-16) 0 var(--space-24); background: var(--bg-subtle); }
.form-layout { display: grid; grid-template-columns: .55fr 1.45fr; gap: var(--space-10); align-items: start; }
.form-layout aside { position: sticky; top: var(--space-6); }
.sensitive-warning { padding: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-muted); }
.sensitive-warning strong { color: var(--ink); } .sensitive-warning p { margin: var(--space-1) 0 0; font-size: var(--text-sm); }
.form-layout aside h2 { margin-top: 0; font-size: var(--text-xl); }
.form-layout aside .aside-body { margin: var(--space-3) 0; color: var(--ink-muted); }
.form-layout aside .sensitive-warning { margin-top: var(--space-6); }
.check-list { padding: 0; list-style: none; } .check-list li { position: relative; padding: var(--space-2) 0 var(--space-2) var(--space-6); color: var(--ink-muted); } .check-list li::before { content: "→"; position: absolute; left: 0; color: var(--ink-subtle); font-weight: 700; }
.sensitive-warning { border-color: var(--danger-border); background: var(--danger-bg); }
.form-card { padding: clamp(24px, 5vw, 48px); border-radius: var(--radius-lg); background: var(--surface); }
.error-summary { margin-bottom: var(--space-7); padding: var(--space-5); border-left: 3px solid var(--danger); background: var(--danger-bg); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.error-summary h2 { font-size: var(--text-lg); } .error-summary p { margin: var(--space-2) 0; } .error-summary ul { margin-bottom: 0; } .error-summary a { color: var(--danger); font-weight: 650; }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.field { margin-bottom: var(--space-6); }
.field label { display: flex; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-2); font-weight: 650; font-size: var(--text-sm); }
.field label span { color: var(--ink-subtle); font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-normal); text-transform: uppercase; }
.field input, .field textarea, .field select {
  width: 100%; min-height: 44px; padding: var(--space-3) var(--space-4); color: var(--ink);
  border: 1px solid var(--input-border); border-radius: var(--radius-sm); background: var(--surface); font-size: var(--text-base);
  transition: border-color var(--duration-base) var(--ease-standard), background-color var(--duration-base) var(--ease-standard);
}
.field textarea { resize: vertical; }
@media (hover: hover) and (pointer: fine) { .field input:hover, .field textarea:hover, .field select:hover { border-color: var(--ink-subtle); } }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible { border-color: var(--focus-ring); }
.field [aria-invalid="true"] { border: 1px solid var(--danger); background: var(--danger-bg); }
.field-hint { margin: var(--space-2) 0 0; color: var(--ink-subtle); font-size: var(--text-xs); }
.field-error { margin: var(--space-2) 0 0; color: var(--danger); font-size: var(--text-sm); font-weight: 650; }
.submit-button { margin-top: var(--space-2); border: 0; } .form-footnote { margin: var(--space-4) 0 0; color: var(--ink-subtle); font-size: var(--text-xs); }
.form-footnote a { color: var(--ink-muted); text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: .2em; }
.honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }

/* ---------- Legal / status / results ---------- */
.legal-section { padding: var(--space-16) 0 var(--space-24); }
.legal-layout { display: grid; grid-template-columns: 230px minmax(0, 720px); gap: var(--space-16); justify-content: center; align-items: start; }
.legal-layout nav { position: sticky; top: var(--space-6); display: flex; flex-direction: column; border-top: 1px solid var(--border); }
.legal-layout nav a { padding: var(--space-3) var(--space-1); border-bottom: 1px solid var(--border); text-decoration: none; font-size: var(--text-sm); font-weight: 600; color: var(--ink-muted); transition: color var(--duration-base) var(--ease-standard); }
@media (hover: hover) and (pointer: fine) { .legal-layout nav a:hover { color: var(--ink); } }
.legal-layout article h2 { margin: var(--space-10) 0 var(--space-4); font-size: var(--text-2xl); }
.legal-layout article p, .legal-layout article li { color: var(--ink-muted); }
.legal-layout article ul { padding-left: var(--space-5); }
.legal-layout article li { margin: var(--space-2) 0; }
.legal-address { margin: 0 0 var(--space-4); padding: var(--space-4) var(--space-5); border-left: 3px solid var(--border-strong); color: var(--ink); font-style: normal; }
.legal-todo { color: var(--danger); font-weight: 650; }
.legal-todo-note { margin-bottom: var(--space-4); }
.legal-alert { padding: var(--space-5); border: 1px solid var(--danger-border); border-radius: var(--radius-md); background: var(--danger-bg); }
.legal-alert p { margin: var(--space-1) 0 0; }
.legal-definition { display: grid; grid-template-columns: 170px 1fr; border-top: 1px solid var(--border); }
.legal-definition dt, .legal-definition dd { margin: 0; padding: var(--space-3) 0; border-bottom: 1px solid var(--border); }
.legal-definition dt { font-weight: 650; } .legal-definition dd { color: var(--ink-muted); }

.result-page { min-height: 60vh; display: grid; place-items: center; padding: var(--space-20) 0; background: var(--bg-subtle); }
.result-card { max-width: 680px; margin: auto; padding: clamp(32px, 6vw, 64px); text-align: center; border-radius: var(--radius-lg); background: var(--surface); }
.result-card h1 { font-size: clamp(2rem, 4.5vw, 2.75rem); }
.result-card p { margin: var(--space-6) auto var(--space-7); color: var(--ink-muted); font-size: var(--text-md); }
.result-card .button-row { justify-content: center; }
.result-mark { width: 48px; height: 48px; display: grid; place-items: center; margin: 0 auto var(--space-5); border-radius: var(--radius-pill); color: var(--accent-ink); background: var(--accent); font-size: var(--text-xl); font-weight: 700; }
.error-code { display: block; color: var(--ink-subtle); font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-wide); }

.status-card { padding: var(--space-8); margin-bottom: var(--space-5); border-radius: var(--radius-lg); background: var(--surface); }
.status-card h2 { font-size: var(--text-xl); margin-bottom: var(--space-3); overflow-wrap: anywhere; }
.status-card .pill { display: inline-flex; padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); background: var(--bg-muted); color: var(--ink-muted); font-size: var(--text-xs); font-weight: 650; }
.status-card > p { margin: var(--space-4) 0 0; color: var(--ink-muted); }
.extracted-fields { display: grid; gap: var(--space-3); margin: var(--space-6) 0; padding: var(--space-5); border-radius: var(--radius-md); background: var(--bg-muted); }
.extracted-fields div { display: grid; grid-template-columns: 160px 1fr; gap: var(--space-4); }
.extracted-fields dt { color: var(--ink-subtle); } .extracted-fields dt::first-letter { text-transform: uppercase; } .extracted-fields dd { margin: 0; font-weight: 550; }
.status-card form { margin-top: var(--space-5); }
.empty { color: var(--ink-subtle); text-align: center; padding: var(--space-10) 0; }
.account-link { margin: var(--space-6) 0 0; text-align: center; }

/* ---------- Product pages and the client area's tool cards ---------- */
.tool-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
.tool-card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-8); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); color: var(--ink); text-decoration: none; transition: transform var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-standard); }
.tool-card h3 { margin: 0; font-size: var(--text-xl); }
.tool-card p { margin: 0; color: var(--ink-muted); }
.tool-card .price { margin: var(--space-2) 0; }
.tool-card .text-link { margin-top: auto; }
@media (hover: hover) and (pointer: fine) { .tool-card:hover { transform: translateY(-3px); border-color: var(--border-strong); } }
.tool-grid.compact .tool-card { padding: var(--space-6); }
.account-tools h2 { font-size: var(--text-xl); margin-bottom: var(--space-4); }
.hero-actions { display: flex; justify-content: center; margin-top: var(--space-8); }
.page-hero p.hero-note { margin-top: var(--space-4); color: var(--ink-subtle); font-size: var(--text-sm); }
.process-grid.tool-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: var(--space-16); }
.tool-steps li { min-height: 0; }
.tool-fields { display: grid; grid-template-columns: .8fr 1.2fr; gap: var(--space-12); align-items: start; margin-bottom: var(--space-16); }
.tool-fields h2 { font-size: var(--text-2xl); margin: 0; }
.field-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.field-chips li { padding: var(--space-2) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface); font-size: var(--text-sm); font-weight: 550; }
.check-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.check-grid li { position: relative; padding: var(--space-4) var(--space-4) var(--space-4) var(--space-10); border-radius: var(--radius-md); background: var(--surface); }
.check-grid li::before { content: "✓"; position: absolute; left: var(--space-4); top: var(--space-4); color: var(--success); font-weight: 700; }
.offer-block { margin-bottom: var(--space-12); }
.tool-privacy { padding: var(--space-6) var(--space-8); border-radius: var(--radius-lg); background: var(--bg-subtle); }
.tool-privacy p { margin: var(--space-2) 0 0; color: var(--ink-muted); }
.tool-upload h2, .buy-block h2 { font-size: var(--text-xl); margin: 0 0 var(--space-5); }
.tool-upload input[type="file"] { padding: var(--space-4); border: 1px dashed var(--input-border); border-radius: var(--radius-md); background: var(--bg-subtle); }
.tool-limit { padding: var(--space-4) var(--space-5); border: 1px solid var(--danger-border); border-radius: var(--radius-md); background: var(--danger-bg); }
.buy-block { padding: var(--space-6) var(--space-8); border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); }
.buy-block > p { margin: 0 0 var(--space-3); color: var(--ink-muted); }
.buy-block .field-hint { margin-top: var(--space-4); }
.batch-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.batch-list a { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); text-decoration: none; font-variant-numeric: tabular-nums; }
.batch-list a > span:first-child { flex: 1; }
.batch-list .pill, .batch-table .pill, .review-item .pill { display: inline-flex; padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); background: var(--bg-muted); color: var(--ink-muted); font-size: var(--text-xs); font-weight: 650; white-space: nowrap; }
.table-scroll { overflow-x: auto; border-radius: var(--radius-lg); background: var(--surface); }
.batch-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.batch-table th { padding: var(--space-4); border-bottom: 1px solid var(--border); color: var(--ink-subtle); font-size: var(--text-xs); font-weight: 650; letter-spacing: var(--tracking-wide); text-align: left; text-transform: uppercase; white-space: nowrap; }
.batch-table td { padding: var(--space-4); border-bottom: 1px solid var(--border); vertical-align: top; }
.batch-table tr:last-child td { border-bottom: 0; }
.batch-table td small { display: block; margin-top: var(--space-1); color: var(--ink-subtle); }
.review-summary { margin: 0; padding: var(--space-5) var(--space-6); border-radius: var(--radius-lg); background: var(--ink-fixed); color: var(--bg-fixed); font-weight: 650; }
.review-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.review-item { padding: var(--space-5) var(--space-6); border-left: 4px solid var(--danger); border-radius: var(--radius-md); background: var(--surface); }
.review-item.is-clean { border-left-color: var(--success); }
.review-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); overflow-wrap: anywhere; }
.review-item > p { margin: var(--space-2) 0 0; color: var(--ink-muted); font-size: var(--text-sm); }
.issue-list { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; gap: var(--space-2); }
.issue { display: flex; align-items: baseline; gap: var(--space-3); font-size: var(--text-sm); }
.issue-error .pill { background: var(--danger-bg); color: var(--danger); }
.issue-warning .pill { background: color-mix(in srgb, #e3a008 18%, var(--surface)); color: #8a5a00; }
@media (prefers-color-scheme: dark) { .issue-warning .pill { color: #f5c451; } }
/* Every value the model read, folded under each invoice (the report shows only what a check found). */
.values-read { margin-top: var(--space-3); border-bottom: 0; }
.values-read summary { padding: var(--space-2) 0; justify-content: flex-start; color: var(--ink-muted); font-size: var(--text-sm); font-weight: 600; }
.values-read summary::after { font-size: var(--text-base); }
.values-read dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: var(--space-2) var(--space-5); margin: var(--space-2) 0 0; font-size: var(--text-sm); }
.values-read dl > div { min-width: 0; }
.values-read dt { color: var(--ink-subtle); font-size: var(--text-xs); font-weight: 650; letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.values-read dd { margin: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
/* The client's monthly plans: renewal or end date, and where to change or cancel them. */
.account-subscriptions h2 { font-size: var(--text-xl); margin-bottom: var(--space-4); }
.plain-list { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: grid; gap: var(--space-2); }
.plain-list li { padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); background: var(--surface); }
.account-subscriptions .field-hint { margin-top: var(--space-2); }
@media (max-width: 720px) {
  .tool-grid, .check-grid, .tool-fields { grid-template-columns: 1fr; }
  .tool-fields { gap: var(--space-5); }
  .tool-card, .buy-block, .tool-privacy { padding: var(--space-6); }
}

/* ---------- Marketing: problems, products, trust, rules ---------- */
.section-subtle { background: var(--bg-subtle); }
.section > .shell > .tool-fields:last-child { margin-bottom: 0; }
.section > .shell > .tool-fields:last-child h2 { font-size: var(--text-3xl); }
.section-dark .process-grid.tool-steps { margin-bottom: 0; }
.faq-grid > h2 { font-size: var(--text-3xl); }
.tool-fields > div > p { max-width: 440px; margin: var(--space-4) 0 0; color: var(--ink-muted); }
/* Four ways money gets lost: a ruled 2x2, the same grid language as the rest of the site. */
.problem-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--border); border-left: 1px solid var(--border); }
.problem-grid li { min-width: 0; padding: var(--space-8); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.problem-number { display: block; margin-bottom: var(--space-6); color: var(--ink-subtle); font-size: var(--text-xs); font-weight: 650; letter-spacing: var(--tracking-wide); }
.problem-grid h3 { max-width: 420px; font-size: var(--text-xl); }
.problem-grid p { max-width: 520px; margin: var(--space-3) 0 0; color: var(--ink-muted); }
/* Product teasers: one link per card, stretched over the whole card (no JS). */
.product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.product-card { position: relative; display: flex; flex-direction: column; min-width: 0; padding: var(--space-8); border-radius: var(--radius-lg); background: var(--surface); transition: transform var(--duration-base) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .product-card:hover { transform: translateY(-4px); } }
.product-card .eyebrow { margin-bottom: var(--space-3); }
.product-card h3 { font-size: var(--text-xl); }
.product-card > p { margin: var(--space-3) 0 0; color: var(--ink-muted); }
.product-card .product-price, .product-row-side .product-price { margin: var(--space-6) 0 0; }
.product-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--space-2); color: var(--ink-subtle); font-size: var(--text-sm); }
.product-price strong { color: var(--ink); font-size: var(--text-2xl); line-height: 1.1; letter-spacing: var(--tracking-tight); white-space: nowrap; }
.product-card .product-free, .product-row-side .product-free { margin: var(--space-1) 0 0; color: var(--ink-muted); font-size: var(--text-sm); }
.product-card .product-link { margin-top: auto; padding-top: var(--space-6); }
.product-link::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-lg); }
.product-grid + .pricing-vat { margin-top: var(--space-6); }
/* What happens to the documents: four plain facts. */
.trust-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); margin: 0; padding: 0; list-style: none; }
.trust-grid li { min-width: 0; padding: var(--space-6); border-radius: var(--radius-lg); background: var(--surface); }
.trust-grid h3 { font-size: var(--text-lg); line-height: var(--leading-snug); }
.trust-grid p { margin: var(--space-2) 0 0; color: var(--ink-muted); font-size: var(--text-sm); }
.faq-grid.standalone { margin-top: 0; padding-top: 0; border-top: 0; }
/* /services: one row per product. */
.product-rows { display: grid; gap: var(--space-5); }
.product-row { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--space-12); align-items: start; padding: var(--space-10); border-radius: var(--radius-lg); background: var(--bg-subtle); }
.product-row .eyebrow { margin-bottom: var(--space-3); }
.product-row h2 { font-size: var(--text-3xl); }
.product-row-copy > p { max-width: 620px; margin: var(--space-4) 0 0; color: var(--ink-muted); font-size: var(--text-md); }
.product-row .check-list { margin: var(--space-5) 0 0; }
.product-row .check-list li::before, .product-audience .check-list li::before { content: "✓"; color: var(--success); }
.product-row-side { padding: var(--space-6); border-radius: var(--radius-md); background: var(--surface); }
.product-row-side .product-price { margin-top: 0; }
.product-row-side .price-actions { margin-top: var(--space-6); }
.included-block { margin-top: var(--space-20); }
.product-rows + .pricing-vat { margin-top: var(--space-6); }
/* /how-it-works: each rule, explained. */
.process-grid + .rules-block { margin-top: var(--space-20); }
.rules-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.rule-card { min-width: 0; padding: var(--space-8); border-radius: var(--radius-lg); background: var(--bg-subtle); }
.rule-card.rule-wide { grid-column: 1 / -1; }
.rule-card h3 { font-size: var(--text-xl); }
.rule-card p { max-width: 720px; margin: var(--space-3) 0 0; color: var(--ink-muted); }
.rule-card p + h3 { margin-top: var(--space-8); }
.rule-card .table-scroll { margin-top: var(--space-5); border-radius: var(--radius-md); }
.rate-table, .vat-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.rate-table th, .rate-table td, .vat-table th, .vat-table td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); text-align: left; }
.rate-table tbody tr:last-child > *, .vat-table tbody tr:last-child > * { border-bottom: 0; }
.rate-table thead th, .vat-table thead th { color: var(--ink-subtle); font-size: var(--text-xs); font-weight: 650; letter-spacing: var(--tracking-wide); text-transform: uppercase; white-space: nowrap; }
.rate-table tbody th, .vat-table tbody th { font-weight: 600; white-space: nowrap; }
.rate-table td { font-weight: 650; white-space: nowrap; }
.vat-table td { text-align: right; white-space: nowrap; }
.vat-table thead th:not(:first-child) { text-align: right; }
.register-states { display: grid; gap: var(--space-2); margin: var(--space-5) 0 0; }
.register-states div { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--surface); }
.register-states dt { font-size: var(--text-sm); font-weight: 650; }
.register-states dd { margin: var(--space-1) 0 0; color: var(--ink-muted); font-size: var(--text-sm); }
.deliverables li a { color: var(--ink); }
.callout > div > p:last-child { margin-bottom: 0; }
.callout .button, .callout .text-link { margin-top: var(--space-2); }
/* /pricing: one column per product, every offer listed. */
.product-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.product-plan { min-width: 0; padding: var(--space-7); }
@media (hover: hover) and (pointer: fine) { .product-plan:hover { transform: none; } }
.product-plan .eyebrow { margin-bottom: var(--space-3); }
.product-plan > h2 { font-size: var(--text-2xl); }
.price-card > p.plan-lead { min-height: 0; margin: var(--space-3) 0 0; font-size: var(--text-sm); }
.price-card > p.plan-free { min-height: 0; margin: var(--space-5) 0 0; padding: var(--space-3) var(--space-4); border-left: 3px solid var(--accent-strong); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--bg-subtle); color: var(--ink); font-size: var(--text-sm); font-weight: 600; }
.price-card .offer-list { flex: 0 0 auto; margin: var(--space-5) 0 0; padding: 0; border-top: 1px solid var(--border); }
.price-card .offer-list li { margin: 0; padding: var(--space-4) 0; border-bottom: 1px solid var(--border); }
.price-card .offer-list li::before { content: none; }
.offer-list .price { margin: 0 0 var(--space-1); }
.offer-list .price strong { font-size: var(--text-2xl); }
.offer-name { margin: 0; font-weight: 650; }
.offer-detail { margin: var(--space-1) 0 0; color: var(--ink-muted); font-size: var(--text-sm); }
.offer-terms { margin: var(--space-1) 0 0; color: var(--ink-subtle); font-size: var(--text-xs); }
.price-card .plan-includes { margin: var(--space-5) 0 var(--space-7); padding-top: 0; border-top: 0; font-size: var(--text-sm); }
.price-card .plan-includes li { margin: var(--space-2) 0; color: var(--ink-muted); }
.product-plans + .pricing-disclaimer { margin-top: var(--space-8); }
.why-prices { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--space-12); margin-top: var(--space-20); padding-top: var(--space-16); border-top: 1px solid var(--border); }
.why-prices h2 { font-size: var(--text-3xl); }
.why-list { display: grid; gap: var(--space-6); }
.why-list strong { font-size: var(--text-lg); }
.why-list p { max-width: 620px; margin: var(--space-2) 0 0; color: var(--ink-muted); }
/* Product pages: hero actions, the note, the report illustration and the offers. */
.hero-actions { flex-wrap: wrap; gap: var(--space-3); }
.process-grid.product-steps { margin-bottom: var(--space-16); }
.product-steps li { min-height: 0; }
.product-note { margin: 0 0 var(--space-16); padding: var(--space-6) var(--space-8); border-left: 3px solid var(--accent-strong); border-radius: 0 var(--radius-md) var(--radius-md) 0; background: var(--bg-subtle); }
.product-note p { max-width: 760px; margin: var(--space-2) 0 0; color: var(--ink-muted); }
.product-split { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: var(--space-12); align-items: start; margin-bottom: var(--space-16); }
.product-split > * { min-width: 0; }
.product-audience h2 { font-size: var(--text-2xl); }
.product-audience .check-list { margin: var(--space-5) 0 0; }
.report-sample { margin: 0; padding: var(--space-6); border-radius: var(--radius-lg); background: var(--bg-subtle); }
.report-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2) var(--space-4); margin-bottom: var(--space-4); padding-bottom: var(--space-4); border-bottom: 1px solid var(--border); color: var(--ink-subtle); font-size: var(--text-xs); font-weight: 650; letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.report-top span:first-child { color: var(--ink); }
.report-summary { margin: 0 0 var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--ink-fixed); color: var(--bg-fixed); font-size: var(--text-sm); font-weight: 650; }
.report-rows { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.report-row { min-width: 0; padding: var(--space-4) var(--space-5); border-left: 4px solid var(--danger); border-radius: var(--radius-md); background: var(--surface); }
.report-row.is-ok { border-left-color: var(--success); }
.report-row.is-warning { border-left-color: #e3a008; }
.report-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-3); }
.report-head strong { font-size: var(--text-sm); overflow-wrap: anywhere; }
.report-row .pill { display: inline-flex; padding: 2px var(--space-3); border-radius: var(--radius-pill); background: var(--danger-bg); color: var(--danger); font-size: var(--text-xs); font-weight: 650; white-space: nowrap; }
.report-row.is-ok .pill { background: color-mix(in srgb, var(--success) 14%, var(--surface)); color: var(--success); }
.report-row.is-warning .pill { background: color-mix(in srgb, #e3a008 18%, var(--surface)); color: #7a4f0e; }
@media (prefers-color-scheme: dark) { .report-row.is-warning .pill { color: #f5c451; } }
.report-row > p { margin: var(--space-1) 0 0; color: var(--ink-muted); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.report-row > p.report-issue { color: var(--ink); }
.report-sample .table-scroll { border-radius: var(--radius-md); }
.vat-totals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); margin: var(--space-2) 0 var(--space-4); }
.vat-totals div { min-width: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--surface); }
.vat-totals dt { color: var(--ink-subtle); font-size: var(--text-xs); }
.vat-totals dd { margin: 2px 0 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.report-export { margin-top: var(--space-5); }
.report-export strong { display: block; margin-bottom: var(--space-3); font-size: var(--text-sm); }
.report-export .field-chips li { padding: var(--space-1) var(--space-3); font-size: var(--text-xs); }
.offer-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-8); margin-bottom: var(--space-6); }
.offer-head h2 { font-size: var(--text-2xl); }
.offer-head p { max-width: 560px; margin: 0; color: var(--ink-muted); font-size: var(--text-sm); }
.offer-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.offer-grid.count-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.offer-grid.count-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.offer-grid .price-card { min-width: 0; padding: var(--space-6); }
.offer-grid .price-card > p { min-height: 0; margin: 0; font-size: var(--text-sm); }
.offer-grid .price-card > p.offer-terms { margin-top: var(--space-2); font-size: var(--text-xs); }
.offer-grid .price { margin: var(--space-4) 0 var(--space-3); }
.offer-grid .price strong { font-size: var(--text-2xl); }
.offer-grid .offer-free { border: 1px dashed var(--border-strong); background: transparent; }
.offer-free .button { margin-top: var(--space-5); }
@media (min-width: 681px) { .offer-grid .price-card > h3 { min-height: 2.2em; } }
.faq-grid + .tool-privacy { margin-top: var(--space-16); }
.offer-includes { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-2) var(--space-8); align-items: baseline; margin-top: var(--space-4); padding: var(--space-5) var(--space-6); border-radius: var(--radius-lg); background: var(--bg-subtle); font-size: var(--text-sm); }
.offer-includes ul { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin: 0; padding: 0; list-style: none; }
.offer-includes li { position: relative; padding-left: var(--space-5); color: var(--ink-muted); }
.offer-includes li::before { content: "✓"; position: absolute; left: 0; color: var(--success); font-weight: 700; }
@media (max-width: 1080px) {
  .trust-grid, .offer-grid.count-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-plans { grid-template-columns: minmax(0, 1fr); max-width: 640px; margin-inline: auto; }
}
@media (max-width: 920px) {
  .product-grid, .product-row, .product-split, .why-prices { grid-template-columns: minmax(0, 1fr); }
  .product-row, .product-split, .why-prices { gap: var(--space-6); }
  .offer-grid, .offer-grid.count-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .offer-includes { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 680px) {
  .vat-totals { grid-template-columns: minmax(0, 1fr); }
  .offer-grid.count-4, .offer-grid.count-2, .trust-grid { grid-template-columns: minmax(0, 1fr); }
  .product-card, .product-plan { padding: var(--space-6); }
  .report-sample { padding: var(--space-4); }
  .vat-table th, .vat-table td { padding: var(--space-2) var(--space-3); }
  .vat-table { font-size: var(--text-xs); }
  .vat-table thead th { letter-spacing: 0; white-space: normal; }
  .product-row h2 { font-size: var(--text-2xl); }
  .product-note { padding: var(--space-5); }
}

/* ---------- Client area ---------- */
.account-login { max-width: 560px; margin: 0 auto; }
.account-soon { max-width: 640px; margin: 0 auto; border-color: var(--border-strong); background: var(--surface); }
.account-layout { display: grid; gap: var(--space-8); }
.account-layout > * { min-width: 0; }
.plan-status { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-8); align-items: center; padding: var(--space-8); border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); }
.plan-status h2 { font-size: var(--text-xl); margin: var(--space-2) 0 var(--space-3); }
.plan-status p { margin: 0; color: var(--ink-muted); }
.plan-status.plan-ended, .plan-status.plan-paused, .plan-status.is-full { border-color: var(--danger-border); }
.usage { display: grid; gap: var(--space-3); }
.usage label, .usage .usage-count { margin: 0; color: var(--ink); font-weight: 650; font-variant-numeric: tabular-nums; }
.usage meter { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 10px; border: 0; border-radius: var(--radius-pill); background: var(--bg-muted); overflow: hidden; }
.usage meter::-webkit-meter-bar { height: 10px; border: 0; border-radius: var(--radius-pill); background: var(--bg-muted); }
.usage meter::-webkit-meter-optimum-value { border-radius: var(--radius-pill); background: var(--accent-strong); }
.usage meter::-webkit-meter-suboptimum-value { border-radius: var(--radius-pill); background: #e3a008; }
.usage meter::-webkit-meter-even-less-good-value { border-radius: var(--radius-pill); background: var(--danger); }
.usage meter::-moz-meter-bar { border-radius: var(--radius-pill); background: var(--accent-strong); }
.usage meter:-moz-meter-sub-optimum::-moz-meter-bar { background: #e3a008; }
.usage meter:-moz-meter-sub-sub-optimum::-moz-meter-bar { background: var(--danger); }
.usage-note { font-size: var(--text-sm); }
.usage .button { justify-self: start; margin-top: var(--space-2); }
.account-requests h2 { font-size: var(--text-xl); margin-bottom: var(--space-4); }
.account-requests > ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.account-request { padding: var(--space-6); border-radius: var(--radius-lg); background: var(--surface); }
.account-request-head { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.account-request > p { margin: var(--space-3) 0; color: var(--ink-muted); overflow-wrap: anywhere; }
.account-request .pill, .account-docs .pill { display: inline-flex; padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); background: var(--bg-muted); color: var(--ink-muted); font-size: var(--text-xs); font-weight: 650; }
.account-docs { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: grid; gap: var(--space-2); }
.account-docs li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--bg-muted); overflow-wrap: anywhere; }
.account-actions { align-items: center; }
.account-actions form { margin: 0; }
@media (max-width: 720px) { .plan-status { grid-template-columns: 1fr; padding: var(--space-6); } }

/* ---------- Footer ---------- */
.site-footer { padding: var(--space-16) 0 var(--space-6); color: var(--ink-fixed-muted); background: var(--ink-fixed); }
.footer-grid { display: grid; grid-template-columns: 1.4fr .7fr .7fr; gap: var(--space-14); padding-bottom: var(--space-12); }
.footer-brand { color: var(--bg-fixed); font-size: var(--text-lg); font-weight: 650; text-decoration: none; }
.footer-grid p { max-width: 340px; color: var(--ink-fixed-subtle); }
.footer-grid h2 { margin-bottom: var(--space-4); color: var(--bg-fixed); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; font-weight: 650; }
.footer-grid > div { display: flex; flex-direction: column; align-items: flex-start; }
.footer-grid a:not(.footer-brand) { margin: var(--space-1) 0; text-decoration: none; color: var(--ink-fixed-muted); transition: color var(--duration-base) var(--ease-standard); }
@media (hover: hover) and (pointer: fine) { .footer-grid a:hover { color: var(--accent); } }
.footer-bottom { display: flex; justify-content: space-between; gap: var(--space-6); padding-top: var(--space-5); border-top: 1px solid rgba(255, 255, 255, .1); color: var(--ink-fixed-subtle); font-size: var(--text-xs); }

/* ---------- Scroll choreography (CSS only, CSP script-src 'none') ----------
   The page answers the mouse wheel and the finger: everything below is tied
   to scroll position with animation-timeline, so it moves exactly as fast as
   the visitor scrolls and stops when they stop. Rules of the house:
   - only transform/opacity-type properties (translate, scale, opacity);
   - `translate`/`scale` individual properties or registered custom
     properties, never a second `transform` shorthand on an element that
     already owns one (hover tilts stay intact);
   - @supports + prefers-reduced-motion gate: without support, or for anyone
     who asked for less motion, the page is simply static and fully visible. */
@property --fan-x { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --fan-y { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --fan-rot { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    /* 1. A thin reading-progress line across the top of every page. */
    body::after {
      content: ""; position: fixed; z-index: 60; inset: 0 0 auto 0; height: 2px; pointer-events: none;
      background: var(--accent); transform-origin: 0 50%;
      animation: oo-progress linear both; animation-timeline: scroll(root block);
    }

    /* 2. The hero eases away as you scroll past it: a touch slower than the
          page (parallax), slightly smaller and dimmer, so the next section
          feels like it slides over it rather than the page just moving. */
    .page-hero .shell {
      animation: oo-hero-away linear both; animation-timeline: scroll(root block);
      animation-range: 0 75vh;
    }
    /* Only where the whole home hero fits the first screen: on a phone the
       workflow panel and its data flows sit a screen further down, and
       fading the hero on the way there left them washed out on arrival. */
    @media (min-width: 921px) {
      .hero .hero-grid { animation: oo-hero-away linear both; animation-timeline: scroll(root block); animation-range: 0 75vh; }
    }

    /* 3. The sample documents arrive as a fanned deck that closes up as the
          section scrolls into view — one named timeline on the section, so
          the cards follow the page scroll, not the carousel's own sideways one. */
    .sample-docs { view-timeline: --docs block; }
    .doc-track > .doc-card { animation: oo-deal linear both; animation-timeline: --docs; animation-range: entry 0% cover 45%; }
    .doc-track > .doc-card:nth-child(1) { --deal-x: 40px;  --deal-y: 40px; --deal-rot: -4deg; }
    .doc-track > .doc-card:nth-child(2) { --deal-x: 120px; --deal-y: 70px; --deal-rot: 3deg; }
    .doc-track > .doc-card:nth-child(3) { --deal-x: 200px; --deal-y: 100px; --deal-rot: 6deg; }
  }
  @media (min-width: 921px) {
    /* 4. Desktop: the header stays with you and gains a soft edge once the
          page has moved, so it reads as floating above the content. */
    .site-header { position: sticky; top: 0; }
    @supports (animation-timeline: scroll()) {
      .site-header { animation: oo-header-lift linear both; animation-timeline: scroll(root block); animation-range: 0 140px; }
    }
  }
}
@keyframes oo-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes oo-hero-away { from { opacity: 1; translate: 0 0; scale: 1; } to { opacity: .35; translate: 0 -56px; scale: .97; } }
@keyframes oo-deal {
  from { opacity: 0; --fan-x: var(--deal-x); --fan-y: var(--deal-y); --fan-rot: var(--deal-rot); }
  40% { opacity: 1; }
  to { opacity: 1; --fan-x: 0px; --fan-y: 0px; --fan-rot: 0deg; }
}
@keyframes oo-header-lift { from { box-shadow: 0 0 0 0 rgba(23, 25, 27, 0); } to { box-shadow: 0 10px 30px -18px rgba(23, 25, 27, .35); } }

/* ---------- Arrival: one entrance for the whole site ----------
   In the spirit of emilkowal.ski: content arrives with a short rise, a fade
   and a blur that clears — fast at the start, settling gently (ease-out),
   each item a beat after the one before. CSS only, CSP script-src 'none'.
   - On load, the first screen arrives on its own; the home headline word by
     word, then its lime mark sweeps in under the last words.
   - On scroll, every block plays that same entrance once it is ~100px into
     view. Time-based, not tied to scroll speed, so it is always seen in full
     however fast the visitor scrolls (a scrubbed effect finishes at the
     bottom edge of the screen, where nobody is looking — that was the
     earlier version, and it went unnoticed).
   How "once it is in view" works without JS: each block runs a tiny
   scroll-linked animation of an integer flag (--oo-seen: 0 below the fold,
   1 once in view) and its children ask for that flag with a style query.
   Children only hide while the flag is exactly 0, and the flag's resting
   value is 2, so a browser without view timelines or style queries, or one
   that never resolves the flag, always shows the page — nothing can stay
   hidden. Only opacity / translate / filter move: never `transform`, which
   the hover tilts own. Visitors who asked for less motion get none of it. */
@property --oo-seen { syntax: '<integer>'; inherits: false; initial-value: 2; }
@keyframes oo-seen { from { --oo-seen: 0; } to { --oo-seen: 1; } }
@keyframes oo-arrive { from { opacity: 0; translate: 0 20px; filter: blur(6px); } }
@keyframes oo-word { from { opacity: 0; translate: 0 .32em; filter: blur(10px); } }
@keyframes oo-mark { from { background-size: 0% 100%; } }

@media (prefers-reduced-motion: no-preference) {
  /* On load: first screen. */
  .hero-copy > :not(h1), .workflow-panel, .page-hero .shell > *, .result-card {
    animation: oo-arrive 720ms var(--ease-arrive) backwards;
  }
  .hero-copy > .hero-lead { animation-delay: 320ms; }
  .hero-copy > .button-row { animation-delay: 400ms; }
  .hero-copy > .hero-points { animation-delay: 480ms; }
  .workflow-panel { animation-delay: 240ms; animation-duration: 900ms; }
  .page-hero .shell > :nth-child(2) { animation-delay: 70ms; }
  .page-hero .shell > :nth-child(3) { animation-delay: 140ms; }
  .page-hero .shell > :nth-child(4) { animation-delay: 210ms; }
  .page-hero .shell > :nth-child(5) { animation-delay: 280ms; }
  /* A page that reloads itself every few seconds while invoices are read
     (batch, VAT period, client folder) would replay the entrance each time. */
  .is-live .page-hero .shell > *, .is-live .result-card { animation: none; }
  .hero h1 .w { display: inline-block; animation: oo-word 800ms var(--ease-arrive) backwards; }
  .hero h1 .w1 { animation-delay: 60ms; }
  .hero h1 .w2 { animation-delay: 105ms; }
  .hero h1 .w3 { animation-delay: 150ms; }
  .hero h1 .w4 { animation-delay: 195ms; }
  .hero h1 .w5 { animation-delay: 240ms; }
  .hero h1 .w6 { animation-delay: 285ms; }
  .hero h1 .w7 { animation-delay: 330ms; }
  .hero h1 .w8 { animation-delay: 375ms; }
  .hero h1 .w9 { animation-delay: 420ms; }
  .hero h1 .w10 { animation-delay: 465ms; }
  .hero h1 .w11 { animation-delay: 510ms; }
  .hero h1 .w12 { animation-delay: 555ms; }
  .hero h1 .w13 { animation-delay: 600ms; }
  .hero h1 .w14 { animation-delay: 645ms; }
  .hero h1 .w15 { animation-delay: 690ms; }
  .hero h1 .w16 { animation-delay: 735ms; }
  .hero h1 em { background-repeat: no-repeat; background-size: 100% 100%; animation: oo-mark 760ms var(--ease-out) 620ms backwards; }

  /* On scroll: each block, once it is in view. */
  @supports (animation-timeline: view()) {
    .section-heading, .problem-grid, .product-grid, .trust-grid, .process-grid, .product-rows, .product-plans, .rules-grid, .why-list, .product-split, .fit-grid, .faq-grid, .deliverables, .callout, .center-cta, .tool-fields, .offer-grid, .tool-privacy, .principle-strip .shell {
      animation: oo-seen linear both; animation-timeline: view(); animation-range: entry 0px entry 200px;
    }
    @container style(--oo-seen: 0) { :is(.section-heading, .problem-grid, .product-grid, .trust-grid, .process-grid, .product-rows, .product-plans, .rules-grid, .why-list, .product-split, .fit-grid, .faq-grid, .deliverables, .callout, .center-cta, .tool-fields, .offer-grid, .tool-privacy, .principle-strip .shell) > * { opacity: 0; } }
    @container style(--oo-seen: 1) { :is(.section-heading, .problem-grid, .product-grid, .trust-grid, .process-grid, .product-rows, .product-plans, .rules-grid, .why-list, .product-split, .fit-grid, .faq-grid, .deliverables, .callout, .center-cta, .tool-fields, .offer-grid, .tool-privacy, .principle-strip .shell) > * { animation: oo-arrive 720ms var(--ease-arrive) backwards; } }
    :is(.section-heading, .problem-grid, .product-grid, .trust-grid, .process-grid, .product-rows, .product-plans, .rules-grid, .why-list, .product-split, .fit-grid, .faq-grid, .deliverables, .callout, .center-cta, .tool-fields, .offer-grid, .tool-privacy, .principle-strip .shell) > :nth-child(2) { animation-delay: 80ms; }
    :is(.section-heading, .problem-grid, .product-grid, .trust-grid, .process-grid, .product-rows, .product-plans, .rules-grid, .why-list, .product-split, .fit-grid, .faq-grid, .deliverables, .callout, .center-cta, .tool-fields, .offer-grid, .tool-privacy, .principle-strip .shell) > :nth-child(3) { animation-delay: 160ms; }
    :is(.section-heading, .problem-grid, .product-grid, .trust-grid, .process-grid, .product-rows, .product-plans, .rules-grid, .why-list, .product-split, .fit-grid, .faq-grid, .deliverables, .callout, .center-cta, .tool-fields, .offer-grid, .tool-privacy, .principle-strip .shell) > :nth-child(4) { animation-delay: 240ms; }
    :is(.section-heading, .problem-grid, .product-grid, .trust-grid, .process-grid, .product-rows, .product-plans, .rules-grid, .why-list, .product-split, .fit-grid, .faq-grid, .deliverables, .callout, .center-cta, .tool-fields, .offer-grid, .tool-privacy, .principle-strip .shell) > :nth-child(5) { animation-delay: 320ms; }
    :is(.section-heading, .problem-grid, .product-grid, .trust-grid, .process-grid, .product-rows, .product-plans, .rules-grid, .why-list, .product-split, .fit-grid, .faq-grid, .deliverables, .callout, .center-cta, .tool-fields, .offer-grid, .tool-privacy, .principle-strip .shell) > :nth-child(6) { animation-delay: 400ms; }
    :is(.section-heading, .problem-grid, .product-grid, .trust-grid, .process-grid, .product-rows, .product-plans, .rules-grid, .why-list, .product-split, .fit-grid, .faq-grid, .deliverables, .callout, .center-cta, .tool-fields, .offer-grid, .tool-privacy, .principle-strip .shell) > :nth-child(7) { animation-delay: 480ms; }
  }

  /* Buttons: the arrow leans the way it points while the pointer is on it. */
  .button > span[aria-hidden] { display: inline-block; transition: translate 160ms var(--ease-out); }
  @media (hover: hover) and (pointer: fine) { .button:hover > span[aria-hidden] { translate: 2px -2px; } }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

@media (max-width: 920px) {
  .nav-shell { align-items: flex-start; padding-block: var(--space-4); }
  .site-header nav ul { justify-content: flex-end; flex-wrap: wrap; gap: var(--space-3) var(--space-5); }
  .site-header nav .nav-cta { min-height: 34px; }
  /* The current-page line sat 21px below the link — on the wrapped header that is
     under (and hidden by) the request button on the next row. */
  .site-header nav a[aria-current="page"]::after { bottom: -4px; }
  .lang-switch a, .lang-switch span { min-height: 32px; align-items: center; }
  .process-grid.tool-steps li:nth-child(3) { border-top: 0; }
  .hero-grid, .section-heading, .fit-grid, .form-layout, .legal-layout, .faq-grid { grid-template-columns: 1fr; }
  .hero { padding-top: var(--space-16); }
  .process-grid { grid-template-columns: repeat(2, 1fr); }
  .process-grid li:nth-child(3), .process-grid li:nth-child(4) { border-top: 1px solid rgba(255, 255, 255, .14); }
  .section:not(.section-dark) .process-grid li:nth-child(3), .section:not(.section-dark) .process-grid li:nth-child(4) { border-color: var(--border); }
  .form-layout aside, .legal-layout nav { position: static; }
  .legal-layout nav { display: none; }
  .form-layout { gap: var(--space-6); }
  .footer-grid { grid-template-columns: 1.2fr .8fr .8fr; gap: var(--space-8); }
}

@media (max-width: 680px) {
  .shell { width: min(calc(100% - 28px), var(--shell)); }
  /* Phone header: brand and language on one row, links below, the request button full width.
     .nav-group dissolves into the header grid so its two parts can sit on different rows. */
  .nav-shell { display: grid; grid-template-columns: 1fr auto; align-items: center; row-gap: var(--space-2); }
  .nav-group { display: contents; }
  .brand { margin-bottom: 0; }
  .nav-shell > .lang-switch, .nav-group > .lang-switch { grid-column: 2; grid-row: 1; }
  .site-header nav { grid-column: 1 / -1; grid-row: 2; }
  .site-header nav ul { justify-content: flex-start; gap: var(--space-1) var(--space-4); }
  .site-header nav a { min-height: 44px; display: inline-flex; align-items: center; font-size: var(--text-sm); }
  .site-header nav li:last-child { width: 100%; }
  .site-header nav a[aria-current="page"]::after { bottom: 6px; }
  .site-header nav .nav-cta { justify-content: center; width: 100%; min-height: 44px; margin-top: var(--space-1); }
  .lang-switch { margin-top: 0; }
  .hero { padding: var(--space-14) 0; }
  .hero h1 { font-size: var(--text-3xl); }
  .hero-points { align-items: flex-start; flex-direction: column; gap: var(--space-2); }
  .workflow-panel { margin-inline: 0; padding: var(--space-5); }
  .section { padding: var(--space-16) 0; }
  .section-heading { gap: var(--space-5); margin-bottom: var(--space-8); }
  .section-heading h2 { font-size: var(--text-2xl); }
  .section-action { text-align: left; }
  .problem-grid, .product-grid, .trust-grid, .product-plans, .rules-grid, .why-prices, .product-split, .offer-grid, .deliverables, .callout, .faq-grid, .field-row, .extracted-fields div { grid-template-columns: 1fr; }
  .problem-grid li, .rule-card, .product-row { padding: var(--space-6); }
  .price-card { padding: var(--space-7); }
  .process-grid, .process-grid.tool-steps { grid-template-columns: 1fr; }
  .process-grid li { min-height: auto; border-right: 1px solid rgba(255, 255, 255, .14); border-bottom: 1px solid rgba(255, 255, 255, .14); }
  .section:not(.section-dark) .process-grid li { border-color: var(--border); }
  .process-grid > li > span { margin-bottom: var(--space-5); }
  .callout { padding: var(--space-8) var(--space-6); gap: var(--space-5); }
  .faq-grid { gap: var(--space-5); margin-top: var(--space-16); }
  .page-hero { padding: var(--space-14) 0; }
  .page-hero h1 { font-size: var(--text-3xl); }
  .form-section { padding: var(--space-8) 0 var(--space-16); }
  .form-card { border-radius: var(--radius-md); }
  .submit-button { width: 100%; }
  .legal-definition { grid-template-columns: 1fr; }
  .legal-definition dt { padding-bottom: 0; border-bottom: 0; }
  .legal-definition dd { padding-top: var(--space-1); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid > div:first-child { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; gap: var(--space-1); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-copy, .workflow-panel, .process-grid li,
  .problem-grid > *, .product-grid > *, .trust-grid > *, .deliverables > *, .faq-grid details, .hero-points > li {
    opacity: 1; transform: none; animation: none;
  }
  .hero::before, .section-dark::before, .fit-section::before { animation: none; }
  *, *::before, *::after {
    transition-property: color, background-color, border-color, opacity !important;
    transition-duration: var(--duration-fast) !important;
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
  }
  .button:active, .site-header nav .nav-cta:active { transform: none; }
  .doc-card, .doc-card:hover { transform: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* Feedback strip (every page) and feedback form */
.feedback-strip { border-bottom: 1px solid var(--border); background: var(--bg-subtle); font-size: var(--text-sm); }
.feedback-strip p { margin: 0; padding: var(--space-2) 0; color: var(--ink-muted); text-align: center; }
.feedback-strip a { color: var(--ink); font-weight: 650; text-decoration: none; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .feedback-strip a:hover { text-decoration: underline; text-underline-offset: 3px; } }
.feedback-card textarea { min-height: 9rem; resize: vertical; }

/* Operator area (only the operator sees it) */
.operator { padding: var(--space-12) 0 var(--space-20); }
.operator h2 { margin: var(--space-12) 0 var(--space-4); font-size: var(--text-xl); }
.operator h2:first-child { margin-top: 0; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: var(--space-3); }
@media (max-width: 480px) { .stat-grid { grid-template-columns: 1fr 1fr; } .stat { padding: var(--space-4); } }
.stat { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.stat-label { color: var(--ink-subtle); font-size: var(--text-xs); font-weight: 650; }
.stat strong { font-size: var(--text-2xl); line-height: var(--leading-tight); font-variant-numeric: tabular-nums; }
.stat small { color: var(--ink-subtle); font-size: var(--text-xs); }
.operator-note { max-width: 70ch; color: var(--ink-muted); font-size: var(--text-sm); }
.table-wrap { overflow-x: auto; }
.operator-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.operator-table th, .operator-table td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap; }
.operator-table meter { width: min(12rem, 24vw); height: .6rem; margin-right: var(--space-2); vertical-align: middle; }
.feedback-list { display: grid; gap: var(--space-3); }
.feedback-item { padding: var(--space-5); border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface); }
.feedback-item.is-read { border-color: var(--border); background: var(--bg-subtle); }
.feedback-item header { color: var(--ink-subtle); font-size: var(--text-xs); }
.feedback-item .pill { display: inline-flex; padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); background: var(--bg-muted); color: var(--ink-muted); font-size: var(--text-xs); font-weight: 650; }
.feedback-message { margin: var(--space-3) 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.feedback-meta { margin: 0 0 var(--space-3); color: var(--ink-muted); font-size: var(--text-sm); overflow-wrap: anywhere; }
.feedback-item button.text-link { padding: 0; border: 0; background: none; cursor: pointer; font: inherit; font-size: var(--text-sm); font-weight: 650; }
.empty-note { color: var(--ink-muted); }
/* The good/bad choice only matters for an opinion; hide it for the other types where :has() exists. */
@supports selector(:has(*)) {
  .feedback-card form:not(:has(.feedback-kind input[value="experience"]:checked)) .feedback-rating { display: none; }
}
.feedback-prompt { margin: var(--space-8) 0 0; color: var(--ink-muted); }
.feedback-item .pill.rating-good { background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success); }
.feedback-item .pill.rating-bad { background: var(--danger-bg); color: var(--danger); }

/* ==== New offer (October 2026): UID register notes on the Invoice check, VAT pre-check workspace and report ==== */
.issue-info .pill { background: var(--bg-muted); color: var(--ink-muted); }
.review-item.vat-check { border-left-color: #e3a008; }
.vat-period { margin: 0 0 var(--space-6); padding: 0; border: 0; }
.vat-period legend { margin-bottom: var(--space-3); padding: 0; font-weight: 650; font-size: var(--text-sm); }
.vat-period-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.vat-period-fields .field { margin-bottom: 0; }
@media (max-width: 480px) { .vat-period-fields { grid-template-columns: 1fr; } }
.vat-caption { caption-side: top; padding: var(--space-4); font-weight: 650; text-align: left; }
.vat-total-row th, .vat-total-row td { border-top: 1px solid var(--border); font-weight: 650; }
.vat-total-row th { padding: var(--space-4); border-bottom: 0; color: inherit; font-size: inherit; letter-spacing: normal; text-align: left; text-transform: none; }
.vat-totals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vat-totals .stat strong { font-size: var(--text-xl); white-space: nowrap; }
.review-item .pill.vat-verdict { gap: var(--space-1); }
.vat-invoices-title { margin: var(--space-6) 0 var(--space-3); font-size: var(--text-xl); }
.vat-note { color: var(--ink-subtle); font-size: var(--text-sm); }
/* ==== end of the new-offer block ==== */

/* ==== Receipt inbox for fiduciaries: workspace, client folder, the client's upload page ==== */
.trust-allowance { font-size: var(--text-md) !important; font-weight: 650; color: var(--ink) !important; font-variant-numeric: tabular-nums; }
.trust-create-fields { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 0 var(--space-5); }
.trust-upgrade { margin: 0; color: var(--ink-muted); }
.folder-list a { flex-wrap: wrap; row-gap: var(--space-2); min-height: 64px; }
.folder-list .folder-name { display: flex; flex-direction: column; gap: 2px; min-width: min(100%, 14rem); overflow-wrap: anywhere; }
.folder-list a > span[aria-hidden] { margin-left: auto; }
.folder-list .folder-name small { color: var(--ink-subtle); font-size: var(--text-xs); font-weight: 550; }
.folder-list.is-archived a { background: var(--bg-muted); color: var(--ink-muted); }
@media (hover: hover) and (pointer: fine) { .folder-list a { transition: background-color var(--duration-base) var(--ease-standard); } .folder-list a:hover { background: var(--bg-muted); } }
.batch-list .pill.is-warning, .doc-row.tone-warning .status-pill, .doc-row.tone-quota .status-pill { background: color-mix(in srgb, #e3a008 18%, var(--surface)); color: #7a4f0e; }
@media (prefers-color-scheme: dark) { .batch-list .pill.is-warning, .doc-row.tone-warning .status-pill, .doc-row.tone-quota .status-pill { color: #f5c451; } }

.trust-shell { max-width: 1040px; }
.trust-card { padding: var(--space-6) var(--space-8); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.trust-card h2, .trust-month > h2 { margin: 0 0 var(--space-4); font-size: var(--text-xl); }
.trust-card > p { margin: 0 0 var(--space-5); color: var(--ink-muted); }
.trust-card .field { margin-bottom: var(--space-5); }
.trust-link.is-fresh { border-color: var(--ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 70%, transparent); }
.trust-link .trust-link-note { color: var(--ink); font-weight: 600; }
.trust-link-field input { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--text-sm); background: var(--bg-subtle); }
.trust-link-actions { margin: 0 0 var(--space-5); }
.trust-link-form { gap: var(--space-3); }
.trust-archived { border-color: var(--border-strong); background: var(--bg-muted); }
.trust-archived p { margin: 0; }
.month-nav { margin: 0 0 var(--space-5); overflow-x: auto; }
.month-nav ul { display: flex; gap: var(--space-2); margin: 0; padding: 2px; list-style: none; }
.month-nav a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--space-4); border: 1px solid var(--border-strong); border-radius: var(--radius-pill); background: var(--surface); color: var(--ink-muted); font-size: var(--text-sm); font-weight: 600; text-decoration: none; white-space: nowrap; }
.month-nav a[aria-current="page"] { border-color: var(--ink); background: var(--ink); color: var(--bg); }
@media (hover: hover) and (pointer: fine) { .month-nav a:not([aria-current]):hover { border-color: var(--ink-subtle); color: var(--ink); } }
.trust-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: var(--space-5); }
.trust-stats .stat.is-warning { border-color: color-mix(in srgb, #e3a008 55%, var(--border)); }
.doc-table th.num, .doc-table td.num { text-align: right; white-space: nowrap; }
.doc-table td:first-child, .doc-table td:nth-child(2) { white-space: nowrap; }
.doc-table .doc-supplier { overflow-wrap: anywhere; min-width: 12rem; }
.doc-table .doc-supplier strong { display: block; font-weight: 650; }
.doc-table .doc-supplier span { display: block; min-width: 0; }
.doc-table .doc-check { min-width: 15rem; }
.doc-table .doc-check small { display: block; margin-top: var(--space-2); color: var(--ink-subtle); }
.doc-table .doc-check .issue-list { margin-top: var(--space-3); }
.doc-table .issue { font-size: var(--text-xs); }
.doc-row td:first-child { box-shadow: inset 4px 0 0 var(--border-strong); }
.doc-row.tone-ok td:first-child { box-shadow: inset 4px 0 0 var(--success); }
.doc-row.tone-warning td:first-child, .doc-row.tone-quota td:first-child { box-shadow: inset 4px 0 0 #e3a008; }
.doc-row.tone-error td:first-child { box-shadow: inset 4px 0 0 var(--danger); }
.doc-row.tone-ok .status-pill { background: color-mix(in srgb, var(--success) 14%, var(--surface)); color: var(--success); }
.doc-row.tone-error .status-pill, .doc-row.tone-error td.doc-check > .pill { background: var(--danger-bg); color: var(--danger); }
.trust-downloads { margin-top: var(--space-5); }
.trust-downloads .button-row { gap: var(--space-3); }
.trust-manage { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-5); align-items: start; }
@media (max-width: 860px) { .trust-manage { grid-template-columns: 1fr; } }
@media (max-width: 720px) {
  .trust-create-fields { grid-template-columns: 1fr; }
  .trust-card { padding: var(--space-6); }
  .trust-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
  .trust-stats .stat { padding: var(--space-3) var(--space-4); }
  .trust-stats .stat strong { font-size: var(--text-xl); }
  /* The documents table becomes one card per document, each value under its column name. */
  .doc-table-wrap { overflow: visible; background: none; }
  .doc-table, .doc-table tbody, .doc-table tr, .doc-table td { display: block; width: 100%; }
  .doc-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .doc-table tbody { display: grid; gap: var(--space-3); }
  .doc-table tr { padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); background: var(--surface); box-shadow: inset 4px 0 0 var(--border-strong); }
  .doc-table tr.tone-ok { box-shadow: inset 4px 0 0 var(--success); }
  .doc-table tr.tone-warning, .doc-table tr.tone-quota { box-shadow: inset 4px 0 0 #e3a008; }
  .doc-table tr.tone-error { box-shadow: inset 4px 0 0 var(--danger); }
  .doc-table td, .doc-table tr:last-child td { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--space-3); padding: var(--space-1) 0; border: 0; box-shadow: none !important; text-align: left !important; white-space: normal !important; min-width: 0; }
  .doc-table td::before { content: attr(data-label); color: var(--ink-subtle); font-size: var(--text-xs); font-weight: 650; padding-top: 2px; }
  .doc-table td.doc-check { grid-template-columns: 1fr; padding-top: var(--space-3); }
  .doc-table td.doc-check::before { display: none; }
  .doc-table td.doc-check > .pill { justify-self: start; }
}

/* The client's upload page: one task, large targets, works with a thumb. */
body.minimal { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
body.minimal > main { flex: 1; display: flex; flex-direction: column; }
body.minimal > main > .result-page, body.minimal > main > .client-section { flex: 1; }
.minimal-header .nav-shell { min-height: 64px; }
.minimal-footer { padding: var(--space-6) 0; }
.minimal-footer .footer-bottom { padding-top: 0; border-top: 0; align-items: center; }
.minimal-footer a { color: var(--ink-fixed-muted); }
.minimal-links { display: flex; flex-wrap: wrap; gap: var(--space-5); }
.client-hero h1 { font-size: clamp(2rem, 6vw, 3rem); }
.client-hero p { font-size: var(--text-md); }
.client-hero .client-folder { display: inline-flex; margin-top: var(--space-5); padding: var(--space-2) var(--space-4); border: 1px solid var(--border-strong); border-radius: var(--radius-pill); background: var(--surface); color: var(--ink); font-size: var(--text-sm); font-weight: 650; overflow-wrap: anywhere; }
.client-section { padding-top: var(--space-10); }
.client-upload { max-width: 640px; margin: 0 auto; border: 1px solid var(--border); }
.client-upload .field label { font-size: var(--text-md); }
.client-upload input[type="file"] { min-height: 132px; padding: var(--space-8) var(--space-5); border: 2px dashed var(--input-border); border-radius: var(--radius-md); background: var(--bg-subtle); font-size: var(--text-base); cursor: pointer; }
.client-upload input[type="file"]::file-selector-button { margin-right: var(--space-4); min-height: 46px; padding: 0 var(--space-5); border: 0; border-radius: var(--radius-pill); background: var(--ink); color: var(--bg); font: inherit; font-weight: 650; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .client-upload input[type="file"]:hover { border-color: var(--ink-subtle); } }
.client-upload .client-submit { width: 100%; min-height: 54px; font-size: var(--text-base); }
.client-received { margin: var(--space-5) 0 0; color: var(--ink-muted); font-size: var(--text-sm); font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }
.client-privacy { max-width: 640px; margin: var(--space-6) auto 0; color: var(--ink-subtle); font-size: var(--text-sm); text-align: center; }
.client-privacy a { color: var(--ink-muted); }
.result-mark.is-muted { background: var(--bg-muted); color: var(--ink-muted); }
@media (max-width: 680px) {
  .client-section { padding-top: var(--space-6); }
  .client-upload input[type="file"] { min-height: 112px; padding: var(--space-6) var(--space-4); }
  .client-upload input[type="file"]::file-selector-button { display: block; width: 100%; margin: 0 0 var(--space-3); }
}
/* ==== end of the receipt inbox block ==== */