: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 cool paper-grey scale with a hint of green (the colour of a
     ledger sheet, so white cards and the invoice read as paper laid on it),
     plus exactly one deliberate accent (Klyrenta lime), used like a
     highlighter: small, meaningful marks rather than fills — primary actions
     read through weight and near-black contrast instead. Text tokens keep at
     least 4.6:1 on every background in the scale. */
  --bg: #eff1ec;
  --bg-subtle: #e7eae3;
  --bg-muted: #e0e4dc;
  --surface: #ffffff;
  --border: #d6dbd2;
  --border-strong: #bec5ba;
  --ink: #121417;
  --ink-muted: #4b5258;
  --ink-subtle: #5e646b;
  --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.8:1),
     so a visitor can see where to type (WCAG 1.4.11). */
  --input-border: #7e857d;
  --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: #121518;
  --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 {
    /* The same cool green-grey, at night. */
    --bg: #0e1211;
    --bg-subtle: #141918;
    --bg-muted: #1b201e;
    --surface: #161b1a;
    --border: #262d2b;
    --border-strong: #36403d;
    --ink: #eef1ec;
    --ink-muted: #b0b6b3;
    --ink-subtle: #9ba29f;
    --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: #6c7370; /* 3.6: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); }
.hero-cost { max-width: 620px; margin: var(--space-6) 0 0; color: var(--ink); font-size: var(--text-sm); font-weight: 600; }
.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: perspective(1100px) translate(var(--fan-x), var(--fan-y)) rotate(calc(var(--rest-rot) + var(--fan-rot))) rotateY(var(--fan-turn)) 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. The glow is cut
   off with overflow: clip, not hidden: a hidden box counts as a scroll container,
   and every "once it is in view" animation inside it (view timelines) would then
   measure against that box instead of the screen and fire straight away.
   Browsers without clip keep hidden. */
.hero, .section-dark, .fit-section { position: relative; overflow: hidden; overflow: clip; }
.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: 128px; }
.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; }
/* Behind the hero, a fine squared grid like a ledger sheet, strongest around the panel and fading out
   towards the edges and under the headline. */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(to bottom, color-mix(in srgb, var(--ink) 7%, transparent) 1px, transparent 1px),
    linear-gradient(to right, color-mix(in srgb, var(--ink) 7%, transparent) 1px, transparent 1px);
  background-size: 28px 28px;
  background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 58% 78% at 72% 50%, #000 22%, transparent 80%);
  mask-image: radial-gradient(ellipse 58% 78% at 72% 50%, #000 22%, transparent 80%);
}
@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 90% 40% at 50% 74%, #000 20%, transparent 78%);
    mask-image: radial-gradient(ellipse 90% 40% at 50% 74%, #000 20%, transparent 78%);
  }
}

/* ---------- Hero: the invoice that checks itself ----------
   Inside the panel, a fictional supplier invoice with its QR payment slip feeds
   up under a reading line, like paper through a scanner. Each detail the line
   crosses is marked with the lime highlighter (supplier, UID, number and dates,
   totals); the IBAN on the slip is marked amber, with a warning flag. The four
   steps below the invoice light up in step with it, the last one amber
   ("1 warning: bank details changed"), and the status dot turns green.
   - Tied to the scroll, like the rest of the page: the invoice is read as the
     visitor scrolls down and "unread" as they scroll back up, at their own
     speed, and it stops when they stop. Nothing is pinned: the page always
     scrolls normally. On a computer the reading takes the first ~400px of
     scroll (the panel is on the first screen); where the hero is one column
     (tablets, phones) it takes ~480px while the panel crosses the screen.
   - One number drives everything: --rt-p, the reading progress (0 to 1) on
     the panel, which every element inside it inherits and turns into its own
     position, mark length or opacity with calc(). Its resting value is 1, so
     without animation support, or for visitors who asked for less motion,
     everything simply shows the end state: the slip in view, all marks set,
     every step lit. Browsers without scroll-linked animation play the same
     reading once, in under five seconds, on load.
   - Only translate / scale / opacity / colours move; the panel's own tilt
     (transform) stays untouched.
   Sizes inside the invoice are in cqw of the sheet (container query units):
   the sheet is drawn on a 500 x 707 grid, so 1 grid unit = 0.2cqw at any width. */
.scan-tray { margin-top: var(--space-5); }
.scan-window {
  position: relative; overflow: hidden; container-type: inline-size;
  /* The window shows 330 of the sheet's 707 grid units (the sheet is 88% of the window wide). */
  aspect-ratio: 1 / .5808;
  border-radius: var(--radius-md); background: var(--bg-muted);
  box-shadow: inset 0 1px 3px rgba(18, 20, 23, .1), inset 0 0 0 1px color-mix(in srgb, var(--ink) 6%, transparent);
}
/* The sheet stays paper white in dark mode too. Its resting place shows the payment slip:
   the reading line (the window's middle) at grid line 590. */
.iv {
  position: absolute; top: 0; left: 6%; width: 88%; aspect-ratio: 500 / 707;
  container-type: inline-size; translate: 0 -60.11%;
  background: #fff; color: #1b1b1b; border-radius: 2px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-variant-numeric: tabular-nums;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 14px 30px -14px rgba(18, 24, 20, .32);
}
.iv > * { position: absolute; margin: 0; white-space: nowrap; line-height: 1.2; }
.iv-name { font-size: 2.6cqw; font-weight: 700; letter-spacing: .01em; }
.iv-s { font-size: 1.6cqw; color: #5a5a5a; }
.iv-s.iv-strong { color: #222; }
.iv-s.iv-lines { line-height: 1.5; }
.iv-addr { font-size: 1.8cqw; line-height: 1.45; }
.iv-title { font-size: 4cqw; font-weight: 700; letter-spacing: -.01em; }
.iv-lab { font-size: 1.36cqw; text-transform: uppercase; letter-spacing: .08em; color: #5a5a5a; }
.iv-val { font-size: 2cqw; font-weight: 600; }
.iv-row { display: grid; grid-template-columns: 4.8cqw 1fr 12cqw 12.8cqw 14cqw; padding: 1cqw 0; border-bottom: 1px solid #e0e0e0; font-size: 1.8cqw; }
.iv-row span:nth-child(n+3) { text-align: right; }
.iv-row.iv-head { font-size: 1.36cqw; text-transform: uppercase; letter-spacing: .08em; color: #5a5a5a; border-bottom-color: #1b1b1b; }
.iv-tot { display: flex; justify-content: space-between; font-size: 1.8cqw; }
.iv-tot.iv-big { padding-top: .8cqw; border-top: 1px solid #1b1b1b; font-size: 2.1cqw; font-weight: 700; }
.iv-perf { border-top: 1px dashed #9a9a9a; }
.iv-perf-v { border-left: 1px dashed #9a9a9a; }
.iv-qt { font-size: 1.9cqw; font-weight: 700; }
.iv-ql { font-size: 1.28cqw; font-weight: 700; }
.iv-qv { font-size: 1.48cqw; line-height: 1.4; }
.iv-qv.iv-qmid { font-size: 1.6cqw; }
.iv-qv.iv-qbig { font-size: 1.8cqw; }
.iv-iban { font-size: 1.72cqw; letter-spacing: .01em; }
.iv-qr { display: block; fill: #000; }
.iv-logo { display: block; }
/* Positions on the sheet (generated from the 500 x 707 grid). */
.iv .at1 { left: 7.2cqw; top: 6cqw; width: 4cqw; height: 4cqw; }
.iv .at2 { left: 11.8cqw; top: 5.8cqw; width: 27.2cqw; height: 3.6cqw; }
.iv .at3 { left: 12.4cqw; top: 6.2cqw; }
.iv .at4 { left: 12.4cqw; top: 9.8cqw; }
.iv .at5 { left: 6.6cqw; top: 13.4cqw; width: 26.4cqw; height: 2.8cqw; }
.iv .at6 { left: 7.2cqw; top: 14cqw; }
.iv .at7 { left: 60cqw; top: 20.8cqw; }
.iv .at8 { left: 60cqw; top: 34.4cqw; }
.iv .at9 { left: 7.2cqw; top: 37.6cqw; }
.iv .at10 { left: 7.2cqw; top: 44.8cqw; }
.iv .at11 { left: 35.2cqw; top: 44.8cqw; }
.iv .at12 { left: 63.2cqw; top: 44.8cqw; }
.iv .at13 { left: 6.6cqw; top: 46.6cqw; width: 16cqw; height: 3.2cqw; }
.iv .at14 { left: 34.6cqw; top: 46.6cqw; width: 13.2cqw; height: 3.2cqw; }
.iv .at15 { left: 62.6cqw; top: 46.6cqw; width: 13.2cqw; height: 3.2cqw; }
.iv .at16 { left: 7.2cqw; top: 47.2cqw; }
.iv .at17 { left: 35.2cqw; top: 47.2cqw; }
.iv .at18 { left: 63.2cqw; top: 47.2cqw; }
.iv .at19 { left: 7.2cqw; top: 53.6cqw; width: 85.6cqw; }
.iv .at20 { left: 7.2cqw; top: 57cqw; width: 85.6cqw; }
.iv .at21 { left: 7.2cqw; top: 60.8cqw; width: 85.6cqw; }
.iv .at22 { left: 7.2cqw; top: 64.6cqw; width: 85.6cqw; }
.iv .at23 { left: 58.4cqw; top: 71.8cqw; width: 35.2cqw; height: 3cqw; }
.iv .at24 { left: 58.4cqw; top: 75.4cqw; width: 35.2cqw; height: 3cqw; }
.iv .at25 { left: 58.4cqw; top: 79.2cqw; width: 35.2cqw; height: 3.8cqw; }
.iv .at26 { left: 59.2cqw; top: 72.4cqw; width: 33.6cqw; }
.iv .at27 { left: 59.2cqw; top: 76cqw; width: 33.6cqw; }
.iv .at28 { left: 59.2cqw; top: 79.2cqw; width: 33.6cqw; }
.iv .at29 { left: 7.2cqw; top: 85.2cqw; }
.iv .at30 { left: 0cqw; top: 91.6cqw; width: 100cqw; }
.iv .at31 { left: 29.6cqw; top: 91.6cqw; height: 49.8cqw; }
.iv .at32 { left: 2.4cqw; top: 93.6cqw; }
.iv .at33 { left: 2.4cqw; top: 97.6cqw; }
.iv .at34 { left: 2.4cqw; top: 99.4cqw; }
.iv .at35 { left: 2.4cqw; top: 109.6cqw; }
.iv .at36 { left: 2.4cqw; top: 111.4cqw; }
.iv .at37 { left: 2.4cqw; top: 128cqw; }
.iv .at38 { left: 10.4cqw; top: 128cqw; }
.iv .at39 { left: 2.4cqw; top: 130cqw; }
.iv .at40 { left: 10.4cqw; top: 130cqw; }
.iv .at41 { left: 16.4cqw; top: 136.8cqw; }
.iv .at42 { left: 32.4cqw; top: 93.6cqw; }
.iv .at43 { left: 32.4cqw; top: 97.6cqw; width: 21.6cqw; height: 21.6cqw; }
.iv .at44 { left: 32.4cqw; top: 122.4cqw; }
.iv .at45 { left: 40.4cqw; top: 122.4cqw; }
.iv .at46 { left: 32.4cqw; top: 124.4cqw; }
.iv .at47 { left: 40.4cqw; top: 124.4cqw; }
.iv .at48 { left: 56.4cqw; top: 93.6cqw; }
.iv .at49 { left: 55.8cqw; top: 95.2cqw; width: 30cqw; height: 3.2cqw; }
.iv .at50 { left: 56.4cqw; top: 95.6cqw; }
.iv .at51 { left: 86.8cqw; top: 95.2cqw; width: 3.2cqw; height: 3.2cqw; }
.iv .at52 { left: 56.4cqw; top: 98.4cqw; }
.iv .at53 { left: 56.4cqw; top: 106cqw; }
.iv .at54 { left: 56.4cqw; top: 107.8cqw; }
.iv .at55 { left: 56.4cqw; top: 111.6cqw; }
.iv .at56 { left: 56.4cqw; top: 113.4cqw; }
/* Highlighter marks, under the text (multiply keeps the ink black). */
.iv-hl { border-radius: 1px; background: #dcf25e; mix-blend-mode: multiply; transform-origin: 0 50%; }
.iv-hl.iv-warn { background: #f6c04c; }
.iv-flag {
  display: grid; place-items: center; border-radius: 50%; background: #c98510; color: #fff;
  font-size: 2.2cqw; font-weight: 700; line-height: 1;
}
/* The reading line, at the middle of the window, with the lime glow of what it has just read above it.
   Shown only while reading (hidden at rest, the end state). */
.scan-bar { position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: #121417; pointer-events: none; }
.scan-bar::before { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 14cqw; background: linear-gradient(to top, rgba(220, 242, 94, .42), rgba(220, 242, 94, 0)); }
.scan-bar::after { content: ""; position: absolute; left: 0; right: 0; top: -3px; height: 8px; background: linear-gradient(to right, #c3d93f 0 12px, transparent 12px calc(100% - 12px), #c3d93f calc(100% - 12px)); border-radius: 2px; }

/* The four steps under the invoice: two by two (the connecting lines only belong to the single column on phones). */
.workflow-panel ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-5); margin-top: var(--space-5); }
.workflow-panel ol > li { align-items: flex-start; gap: var(--space-3); }
.workflow-panel ol > li[aria-hidden] { display: none; }
.workflow-panel ol strong { font-size: var(--text-sm); line-height: 1.3; }
.workflow-panel ol small { font-size: var(--text-xs); line-height: 1.4; }
.workflow-panel .workflow-icon { flex-basis: 30px; height: 30px; }
/* Step 4 carries the warning, in the warning colours used by the sample results. */
.workflow-icon.accent { color: #7a4f0e; border-color: #e3a008; background: #fbead0; }
@media (prefers-color-scheme: dark) { .workflow-icon.accent { color: #f5c451; border-color: #b9820a; background: color-mix(in srgb, #e3a008 20%, var(--surface)); } }
@media (max-width: 680px) {
  .scan-tray { margin-top: var(--space-4); }
  .workflow-panel ol { grid-template-columns: 1fr; gap: 0; }
  .workflow-panel ol > li { align-items: center; }
  .workflow-panel ol > li[aria-hidden] { display: flex; }
  .workflow-panel ol strong { font-size: var(--text-base); }
  .workflow-panel ol small { font-size: var(--text-sm); }
  .workflow-panel .workflow-icon { flex-basis: 34px; height: 34px; }
}

/* The reading. --rt-p runs from 0 (the invoice's top under the line, nothing marked, steps dim) to 1
   (the slip in view, everything marked). Reading proper (--rt-r) is the stretch .06-.92 of it: the line
   goes from grid line 20 to grid line 590, and each mark is set as the line reaches its middle (--at). */
@property --rt-p { syntax: '<number>'; inherits: true; initial-value: 1; }
@keyframes rt-read { from { --rt-p: 0; } to { --rt-p: 1; } }
.workflow-panel { --rt-p: 1; --rt-r: clamp(0, (var(--rt-p) - .06) / .86, 1); }
.iv { translate: 0 calc(20.51% - 80.62% * var(--rt-r)); }
.scan-bar { opacity: clamp(0, min((var(--rt-p) - .04) / .03, (.95 - var(--rt-p)) / .03), 1); }
.iv-hl { scale: clamp(0, (var(--rt-p) - var(--at)) / .035, 1) 1; }
.iv-hl.m1 { --at: .087; } .iv-hl.m2 { --at: .141; }
.iv-hl.m3 { --at: .394; } .iv-hl.m4 { --at: .404; } .iv-hl.m5 { --at: .414; }
.iv-hl.m6 { --at: .583; } .iv-hl.m7 { --at: .61; } .iv-hl.m8 { --at: .641; }
.iv-hl.m9 { --at: .76; }
.iv-flag { --on: clamp(0, (var(--rt-p) - .783) / .03, 1); scale: var(--on); opacity: var(--on); }
/* Steps: dim until the reading reaches them; steps 1-3 then flash lime for a moment, step 4 lights amber. */
.workflow-panel ol > li:not([aria-hidden]) {
  --on: clamp(0, (var(--rt-p) - var(--at)) / .03, 1);
  opacity: calc(.42 + .58 * var(--on)); translate: 0 calc(4px - 4px * var(--on));
}
.workflow-panel ol > li:nth-child(1) { --at: .02; }
.workflow-panel ol > li:nth-child(3) { --at: .42; }
.workflow-panel ol > li:nth-child(5) { --at: .66; }
.workflow-panel ol > li:nth-child(7) { --at: .8; }
.workflow-panel ol > li:not([aria-hidden]):not(:nth-child(7)) .workflow-icon {
  --glow: clamp(0, min((var(--rt-p) - var(--at)) / .02, (var(--at) + .14 - var(--rt-p)) / .08), 1);
  background-color: color-mix(in srgb, var(--accent) calc(100% * var(--glow)), var(--bg));
  border-color: color-mix(in srgb, var(--accent-strong) calc(100% * var(--glow)), var(--border));
}
.panel-top .status-dot { --on: clamp(0, (var(--rt-p) - .93) / .04, 1); opacity: calc(.45 + .55 * var(--on)); }
.panel-top .status-dot::before { background-color: color-mix(in srgb, var(--success) calc(100% * var(--on)), var(--border-strong)); }
@media (prefers-reduced-motion: no-preference) {
  /* Without scroll-linked animation: the reading plays once on load. */
  .hero .workflow-panel { animation: oo-arrive 900ms var(--ease-arrive) 240ms backwards, rt-read 4600ms linear 700ms both; }
  @supports (animation-timeline: view()) {
    /* Phones and tablets: from when 280px of the panel is on screen, over the next 480px of scroll. */
    .hero .workflow-panel {
      animation: oo-arrive 900ms var(--ease-arrive) 240ms backwards, rt-read linear both;
      animation-timeline: auto, view();
      animation-range: normal, entry 280px entry 760px;
    }
    /* Computers: the panel is on the first screen, so over the first 400px of scroll (it starts a little
       way in, with the supplier already marked, so the first screen never looks unfinished). */
    @media (min-width: 921px) {
      .hero .workflow-panel { animation-timeline: auto, scroll(root block); animation-range: normal, -40px 360px; }
    }
  }
}

/* ---------- 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; }
/* Terms (/agb) and data processing agreement (/avv): the version line under the lead, and the notes that link to them. */
.page-hero .legal-version { margin-top: var(--space-3); color: var(--ink-subtle); font-size: var(--text-xs); }
.terms-note a, .legal-terms a { color: inherit; text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: .2em; }
.plan-terms { margin: calc(-1 * var(--space-4)) 0 var(--space-6); }
.result-card .plan-terms { margin: calc(-1 * var(--space-4)) 0 var(--space-6); text-align: left; }
.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; }
/* "Remember me on this device" on the button page of a sign-in link. */
.result-card .remember-device { display: inline-flex; align-items: center; gap: var(--space-3); min-height: 44px; color: var(--ink); font-size: var(--text-sm); font-weight: 550; cursor: pointer; }
.result-card .remember-device input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); cursor: pointer; }
/* Deleting the own account (/account/delete): the confirmation tick. */
.delete-confirm { display: flex; align-items: flex-start; gap: var(--space-3); margin: var(--space-5) 0; color: var(--ink); font-size: var(--text-sm); font-weight: 550; cursor: pointer; }
.delete-confirm input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--accent); cursor: pointer; }
.account-delete { margin-top: var(--space-6); font-size: var(--text-sm); }
.result-card .remember-hint { margin: 0 auto var(--space-6); color: var(--ink-muted); font-size: var(--text-sm); }
.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; }
/* The checks tick one after the other once their row is in view: the mark springs in and the row
   flashes the lime highlighter for a moment (behind the text: ::after at z-index -1 inside the
   isolated row). Same once-in-view flag as the arrivals below; without it, every mark is simply there. */
.check-grid li { isolation: isolate; }
.check-grid li::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--accent); opacity: 0; pointer-events: none; }
@keyframes rt-tick { from { opacity: 0; scale: .2; rotate: -45deg; } 60% { opacity: 1; scale: 1.4; rotate: 0deg; } }
@keyframes rt-row { from { opacity: 0; } 25% { opacity: .5; } to { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .check-grid li { animation: oo-seen linear both; animation-timeline: view(); animation-range: entry 40px entry 120px; }
    @container style(--oo-seen: 0) { .check-grid li::before { opacity: 0; } }
    @container style(--oo-seen: 1) {
      .check-grid li::before { display: inline-block; animation: rt-tick 560ms var(--ease-out) backwards; }
      .check-grid li::after { animation: rt-row 1100ms var(--ease-out) backwards; }
    }
    .check-grid li:nth-child(1)::before, .check-grid li:nth-child(1)::after { animation-delay: 260ms; }
    .check-grid li:nth-child(2)::before, .check-grid li:nth-child(2)::after { animation-delay: 360ms; }
    .check-grid li:nth-child(3)::before, .check-grid li:nth-child(3)::after { animation-delay: 460ms; }
    .check-grid li:nth-child(4)::before, .check-grid li:nth-child(4)::after { animation-delay: 560ms; }
    .check-grid li:nth-child(5)::before, .check-grid li:nth-child(5)::after { animation-delay: 660ms; }
    .check-grid li:nth-child(6)::before, .check-grid li:nth-child(6)::after { animation-delay: 760ms; }
    .check-grid li:nth-child(7)::before, .check-grid li:nth-child(7)::after { animation-delay: 860ms; }
    .check-grid li:nth-child(8)::before, .check-grid li:nth-child(8)::after { animation-delay: 960ms; }
    .check-grid li:nth-child(9)::before, .check-grid li:nth-child(9)::after { animation-delay: 1060ms; }
  }
}
.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); }
.buy-more-note { margin: var(--space-2) 0 var(--space-4); color: var(--ink-muted); font-size: var(--text-sm); }
.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); }
/* Every plan of a product, one line each (price, billing, what it gives), then the page rule. */
.product-offers { display: grid; gap: var(--space-3); margin: var(--space-6) 0 0; padding: 0; color: var(--ink-subtle); font-size: var(--text-sm); list-style: none; }
.product-offers li { display: grid; gap: 2px; min-width: 0; }
.product-offers .offer-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--space-2); }
.product-offers strong { color: var(--ink); font-size: var(--text-lg); line-height: 1.2; letter-spacing: var(--tracking-tight); white-space: nowrap; }
.product-offers .offer-what { color: var(--ink-muted); font-size: var(--text-xs); }
.product-row-side .product-offers { margin-top: 0; }
/* "Buy" / "Subscribe" next to each plan (home cards, /services, the pricing columns): a small pill that sits
   above a card's whole-card link. */
.product-offers li { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-3); align-items: center; }
.product-offers .offer-price, .product-offers .offer-what { grid-column: 1; }
.product-offers .offer-buy { grid-column: 2; grid-row: 1 / span 2; }
.offer-buy {
  position: relative; z-index: 1; display: inline-flex; align-items: center; gap: var(--space-1); min-height: 36px;
  padding: 0 var(--space-4); border: 1px solid var(--border-strong); border-radius: var(--radius-pill); background: var(--surface);
  color: var(--ink); font-size: var(--text-xs); font-weight: 650; line-height: 1.2; text-decoration: none; white-space: nowrap;
  transition: background-color var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard), transform 160ms var(--ease-out);
}
.offer-buy:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .offer-buy:hover { border-color: var(--ink); background: var(--bg-muted); } }
.price-card .offer-list .offer-buy { margin-top: var(--space-3); }
/* The product pages' price cards each end with their button, all at one height. */
.offer-grid .price-card > p.offer-terms { padding-bottom: var(--space-5); }
.offer-grid .price-card .button { margin-top: auto; }
/* Before files are chosen: what makes a document readable (a neutral note, not a warning). */
.upload-tips { margin: var(--space-4) 0 var(--space-6); padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); background: var(--bg-subtle); color: var(--ink-muted); font-size: var(--text-sm); }
.upload-tips-title { margin: 0 0 var(--space-2); color: var(--ink); font-weight: 650; }
.upload-tips ul { display: grid; gap: var(--space-1); margin: 0; padding-left: var(--space-5); }
.verify-as { margin-top: 0; font-weight: 650; color: var(--ink); }
/* The plan chosen on a price card, above the sign-up and sign-in forms. */
.plan-chosen { margin: 0 0 var(--space-6); 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; }
.result-card .plan-chosen { margin: var(--space-6) 0; color: var(--ink); font-size: var(--text-sm); text-align: left; }
.product-pages, .offer-pages { margin: var(--space-2) 0 var(--space-3); color: var(--ink-subtle); font-size: var(--text-xs); }
.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; }
.account-signout-all { margin-top: var(--space-4); }
.account-signout-all form { margin: 0; }
.account-signout-all .field-hint { margin: var(--space-2) 0 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; }
@property --fan-turn { 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.
       It starts after the first 360px, once the invoice in the panel has
       been read, so the reading is never dimmed. */
    @media (min-width: 921px) {
      .hero .hero-grid { animation: oo-hero-away linear both; animation-timeline: scroll(root block); animation-range: 360px calc(360px + 60vh); }
    }

    /* 3. The sample documents arrive as a fanned deck that closes up as the
          section scrolls into view, each card turning to face the visitor like
          a page laid on the desk; once they lie flat, each result is stamped
          on. 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; --deal-turn: -34deg; }
    .doc-track > .doc-card:nth-child(2) { --deal-x: 120px; --deal-y: 70px; --deal-rot: 3deg; --deal-turn: -44deg; }
    .doc-track > .doc-card:nth-child(3) { --deal-x: 200px; --deal-y: 100px; --deal-rot: 6deg; --deal-turn: -54deg; }
    .doc-track > .doc-card .doc-status { animation: rt-stamp linear both; animation-timeline: --docs; animation-range: cover 36% cover 46%; }
    .doc-track > .doc-card:nth-child(2) .doc-status { animation-range: cover 39% cover 49%; }
    .doc-track > .doc-card:nth-child(3) .doc-status { animation-range: cover 42% cover 52%; }
  }
  @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); --fan-turn: var(--deal-turn); }
  40% { opacity: 1; }
  to { opacity: 1; --fan-x: 0px; --fan-y: 0px; --fan-rot: 0deg; --fan-turn: 0deg; }
}
@keyframes rt-stamp { from { opacity: 0; scale: 1.7; rotate: -9deg; } 70% { opacity: 1; scale: .94; rotate: 1deg; } to { opacity: 1; scale: 1; rotate: 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-cost { animation-delay: 440ms; }
  .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; } }

/* Five header items since "Sign in" joined them: in German and French they no longer fit on one row below about
   1000 px, so up to 1100 px the header wraps as it does below 920 px, instead of breaking labels over two lines. */
@media (max-width: 1100px) {
  .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; }
  .site-header nav a[aria-current="page"]::after { bottom: -4px; }
}

@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); }
}

/* Reading in progress (batch, VAT period, client folder): a turning wheel, the status, and a bar of how many are
   read. The wheel only turns for those who allow motion; the bar and the text say the same without it. */
.read-progress { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: var(--space-3); row-gap: var(--space-3); }
.read-progress p { margin: 0; }
.read-progress progress { grid-column: 1 / -1; width: 100%; max-width: 32rem; height: 6px; appearance: none; -webkit-appearance: none; border: 0; border-radius: var(--radius-pill); background: var(--bg-muted); color: var(--ink); overflow: hidden; }
.read-progress progress::-webkit-progress-bar { background: var(--bg-muted); border-radius: var(--radius-pill); }
.read-progress progress::-webkit-progress-value { background: var(--ink); border-radius: var(--radius-pill); }
.read-progress progress::-moz-progress-bar { background: var(--ink); border-radius: var(--radius-pill); }
.spinner { display: inline-block; flex: none; width: 1.1em; height: 1.1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; opacity: .75; }
.pill.is-busy { align-items: center; gap: var(--space-2); }
/* Stopped (the day's cap, the reading service, a stall): no wheel; the reason, in the warning colours. */
.read-progress.is-stopped { grid-template-columns: 1fr; }
.read-progress .read-reason { color: var(--ink); font-weight: 600; }
.pill.is-stopped { background: color-mix(in srgb, #e3a008 18%, var(--surface)); color: #8a5a00; }
@media (prefers-color-scheme: dark) { .pill.is-stopped { color: #f5c451; } }
.pill.is-busy .spinner { width: .95em; height: .95em; border-width: 1.5px; }
@keyframes oo-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: no-preference) { .spinner { animation: oo-spin 900ms linear infinite; } }

@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 ==== */