/* ----- Tokens ------------------------------------------------------------ */
:root {
  --ink:        #121110;
  --ink-2:      #4A453F;
  --ink-3:      #8C867F;
  --ink-4:      #B8B2AB;
  --line:       #DDD8D2;
  --fill:       #EFEBE6;
  --ground:     #FAF9F7;

  --accent:     #FF4A1C;
  --accent-ink: #FFFFFF;
  --accent-2:   #C6350F;

  --font: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --w-reg: 400;  --w-med: 500;  --w-bold: 700;  --w-black: 800;

  --t-amount:  66px;
  --t-title:   48px;
  --t-lead:    27px;
  --t-section: 23px;
  --t-body:    18px;
  --t-body-lg: 20px;
  --t-label:   13px;
  --t-fine:    14px;

  --tr-tight:  -0.045em;
  --tr-snug:   -0.02em;
  --tr-caps:    0.14em;

  --s-1: 8px;  --s-2: 12px;  --s-3: 16px;  --s-4: 22px;
  --s-5: 32px; --s-6: 40px;  --s-7: 56px;  --s-8: 80px;

  --rule: 3px;
  --hair: 1px;
  --radius: 0;
  --tap-min: 44px;
  --action-h: 82px;
  --screen-max: 480px;
  --pad: 32px;

  --focus: 3px solid var(--accent);
  --focus-offset: 3px;
}

/* ----- Reset ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: 1.5;
  font-weight: var(--w-reg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }

.num, .amount, .row__value, .li__amount, .badge { font-variant-numeric: tabular-nums; }

/* ----- Base elements ----------------------------------------------------- */
h1, h2, h3 { font-weight: var(--w-black); letter-spacing: var(--tr-snug); line-height: 1.0; }
a { color: var(--ink); text-underline-offset: 4px; }
a:hover { color: var(--accent-2); }

:focus-visible { outline: var(--focus); outline-offset: var(--focus-offset); }
:focus:not(:focus-visible) { outline: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ----- Layout ------------------------------------------------------------ */
.screen {
  max-width: var(--screen-max);
  min-height: 100dvh;
  margin-inline: auto;
  padding: var(--s-6) var(--pad);
  display: flex;
  flex-direction: column;
  gap: 0;
}
.spacer { flex: 1 1 auto; }
.stack   { display: flex; flex-direction: column; }
.stack > * + * { margin-top: var(--s-3); }

/* ----- Wordmark ---------------------------------------------------------- */
.brand { display: flex; align-items: center; gap: 10px; }
/* Sized by height so the icon keeps its own 51:36 proportions whatever it is
   replaced with later. It leads the wordmark, so it is set well above the 15px
   name; the folder's eyes and legs need the room to read. No orange tile behind
   it — the mark stands on its own. display:block kills the inline-image
   baseline gap. */
.brand__mark { display: block; height: 32px; width: auto; }
.brand__name { font-size: 15px; font-weight: var(--w-black); letter-spacing: var(--tr-snug); }

/* ----- Type utilities ---------------------------------------------------- */
.label {
  font-size: var(--t-label); font-weight: var(--w-bold);
  letter-spacing: var(--tr-caps); text-transform: uppercase;
  color: var(--ink-3);
}
.label--action { color: var(--accent); }
.title  { font-size: var(--t-title); font-weight: var(--w-black); letter-spacing: var(--tr-tight); line-height: .95; }
.lead   { font-size: var(--t-lead); font-weight: var(--w-med); letter-spacing: var(--tr-snug); }
.body   { font-size: var(--t-body); color: var(--ink-2); text-wrap: pretty; }
.fine   { font-size: var(--t-fine); color: var(--ink-3); }
.amount { font-size: var(--t-amount); font-weight: var(--w-black); letter-spacing: var(--tr-tight); line-height: .95; }

/* ----- Dividers ---------------------------------------------------------- */
.rule { height: var(--rule); background: var(--ink); border: 0; }
.hair { height: var(--hair); background: var(--line); border: 0; }

/* ----- The primary action ------------------------------------------------ */
.action {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: var(--action-h);
  padding: 0 var(--s-4);
  background: var(--accent); color: var(--accent-ink);
  border: 0; border-radius: var(--radius);
  font-size: var(--t-body-lg); font-weight: var(--w-bold); letter-spacing: -0.01em;
  text-align: center; text-decoration: none;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.action:hover  { background: var(--accent-2); color: var(--accent-ink); }
.action:active { transform: translateY(1px); }
.action[disabled], .action[aria-disabled="true"] {
  background: var(--fill); color: var(--ink-4); cursor: not-allowed;
}

.action-link {
  align-self: center; min-height: var(--tap-min);
  display: inline-flex; align-items: center;
  font-size: var(--t-body); font-weight: 600;
  text-decoration: underline; text-underline-offset: 4px;
  background: none; border: 0; cursor: pointer;
}

/* ----- Ghost action — outlined, transparent, icon + label ---------------- */
.ghost {
  flex: 1 1 0; min-width: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 56px; padding: 0 var(--s-3);
  background: none; color: var(--ink);
  border: var(--hair) solid var(--line); border-radius: var(--radius);
  font-size: var(--t-body); font-weight: var(--w-bold); letter-spacing: -0.01em;
  text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.ghost:hover  { border-color: var(--ink); }
.ghost:active { transform: translateY(1px); }
.ghost__icon  { width: 20px; height: 20px; flex: 0 0 auto; }

/* A row of equal-weight ghost actions (e.g. Instellingen / Uitloggen). */
.footer-actions { display: flex; gap: var(--s-3); margin-top: var(--s-5); }
.footer-actions > form { flex: 1 1 0; min-width: 0; display: flex; }

/* ----- The two-way choice (blueprint §5.8 / §17 rule 7) ------------------ */
.choices { display: flex; flex-direction: column; gap: var(--s-3); }
.choice {
  display: flex; align-items: center;
  width: 100%; min-height: 84px; padding: 0 var(--s-4);
  background: var(--ground); color: var(--ink);
  border: var(--rule) solid var(--ink); border-radius: var(--radius);
  font-size: 24px; font-weight: var(--w-bold); letter-spacing: var(--tr-snug);
  text-align: left; cursor: pointer;
}
.choice:hover { background: var(--fill); }

/* ----- List rows --------------------------------------------------------- */
.row {
  display: flex; align-items: center; gap: var(--s-3);
  min-height: var(--tap-min); padding: 20px 0;
  border-bottom: var(--hair) solid var(--line);
  text-decoration: none; color: var(--ink);
}
.row__index  { width: 26px; font-size: 15px; font-weight: var(--w-bold); color: var(--ink-4); }
.row__main   { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.row__title  { font-size: var(--t-section); font-weight: var(--w-bold); letter-spacing: var(--tr-snug); }
.row__subtitle { font-size: 13px; font-weight: var(--w-med); color: var(--ink-3); }
.row__value  { flex: 0 0 auto; white-space: nowrap; font-size: 16px; font-weight: var(--w-med); color: var(--ink-3); }

/* Invoice / cost line item */
.li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); }
.li__label  { font-size: 17px; font-weight: var(--w-med); }
.li__amount { font-size: 17px; font-weight: 600; }
.li--muted .li__label, .li--muted .li__amount { color: var(--ink-3); font-weight: var(--w-med); }
.li--total  .li__label, .li--total  .li__amount { font-size: 19px; font-weight: var(--w-black); color: var(--ink); }

/* ----- Count badge ------------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; height: 30px; padding: 0 8px;
  background: var(--accent); color: var(--accent-ink);
  font-size: 16px; font-weight: var(--w-black);
}
.badge--quiet { background: transparent; color: var(--ink-3); font-weight: var(--w-med); }

/* ----- Underline input --------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: var(--s-2); }
.field__input {
  width: 100%; min-height: var(--tap-min); padding: 0 0 14px;
  background: none; border: 0; border-bottom: var(--rule) solid var(--ink);
  border-radius: 0;
  font-size: 24px; font-weight: var(--w-med); color: var(--ink);
}
.field__input::placeholder { color: var(--ink-3); }

/* ----- Document / audio preview placeholder ------------------------------ */
.preview {
  display: flex; align-items: center; justify-content: center;
  min-height: 190px; background: var(--fill);
  border: var(--hair) solid var(--line);
}
.preview img { width: 100%; height: auto; }

/* ----- Status dot -------------------------------------------------------- */
.status { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-fine); color: var(--ink-3); }
.status::before { content: ""; width: 8px; height: 8px; background: currentColor; }
.status--attention { color: var(--accent); }
.status--done      { color: var(--ink); }


/* ----- Accessibility ----------------------------------------------------- */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 10;
  background: var(--ink); color: var(--ground); padding: var(--s-2) var(--s-3);
}
.skip-link:focus { left: var(--s-3); }

/* ----- Auto-save status (editor JS) — a quiet inline confirmation --------- */
.save-status {
  display: inline-block; margin-left: var(--s-3);
  font-size: var(--t-fine); color: var(--ink-3);
}
.save-status[data-state="error"] { color: var(--accent-2); }

/* ----- Upload dropzone (map home) — send documents into the pipeline ------ */
.dropzone {
  display: block; text-align: center;
  padding: var(--s-5) var(--s-4);
  border: 2px dashed var(--line); background: var(--ground);
}
.dropzone.dropzone--over { border-color: var(--accent); background: var(--fill); }
.dropzone__label { display: block; cursor: pointer; }
.dropzone__title { display: block; font-weight: var(--w-bold); font-size: var(--t-body); }
.dropzone__hint { display: block; margin-top: var(--s-2); color: var(--ink-3); font-size: var(--t-fine); }
.dropzone__actions {
  margin-top: var(--s-3); display: flex; gap: var(--s-3);
  align-items: center; justify-content: center;
}
.dropzone__status { color: var(--ink-3); font-size: var(--t-fine); }
.dropzone__status[data-state="error"] { color: var(--accent-2); }
.dropzone__input:focus-visible + .dropzone__label { outline: var(--focus); outline-offset: var(--focus-offset); }
.upload-notice { margin-top: var(--s-3); text-align: center; color: var(--ink-3); font-size: var(--t-fine); }
.upload-notice--warn { color: var(--accent-2); }

/* ----- Deliberate spacing (space is placed, not global — blueprint §17) --- */
.mt-2 { margin-top: var(--s-2); } .mt-3 { margin-top: var(--s-3); }
.mt-4 { margin-top: var(--s-4); } .mt-5 { margin-top: var(--s-5); }
.mt-6 { margin-top: var(--s-6); } .mt-7 { margin-top: var(--s-7); }
.mt-8 { margin-top: var(--s-8); }

/* ----- Top bar (wordmark left, quarter download right) ------------------- */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.iconbtn {
  display: inline-flex; align-items: center; gap: var(--s-1);
  min-height: var(--tap-min); padding: 0 var(--s-2);
  background: #fff; border: var(--hair) solid var(--line); border-radius: 8px;
  color: var(--ink); text-decoration: none;
}
.iconbtn:hover { border-color: var(--ink); color: var(--ink); }
.iconbtn__icon { width: 20px; height: 20px; flex: 0 0 auto; }
.iconbtn__text { font-size: 15px; font-weight: var(--w-bold); letter-spacing: var(--tr-snug); color: var(--ink); }
.iconbtn__tag {
  font-size: var(--t-label); font-weight: var(--w-bold);
  letter-spacing: var(--tr-caps); color: var(--ink-3); font-variant-numeric: tabular-nums;
}

/* ----- Search field (map) — the underline field with a leading glyph ------ */
.search { display: flex; align-items: flex-end; gap: var(--s-3);
  border-bottom: var(--rule) solid var(--ink); }
.search__icon { flex: 0 0 auto; width: 22px; height: 22px; margin-bottom: 14px; color: var(--ink); }
.search__input {
  flex: 1 1 auto; min-height: var(--tap-min); padding: 0 0 14px;
  background: none; border: 0; border-radius: 0;
  font-size: var(--t-body-lg); font-weight: var(--w-med); color: var(--ink);
}
.search__input::placeholder { color: var(--ink-3); }

/* ----- A list of rows with no trailing hairline (the last row's border) --- */
.list { display: flex; flex-direction: column; }
.list .row:last-child { border-bottom: 0; }

/* ----- Empty state ------------------------------------------------------- */
.empty { padding: var(--s-6) 0; color: var(--ink-3); font-size: var(--t-body); }

/* ----- Nog uitzoeken: swipeable classify deck ---------------------------- */
/* A horizontal scroll-snap track gives native touch "swipe" with zero JS. Cards
   bleed to the screen edges (negative margin = --pad) so the next card peeks. */
.deck {
  display: flex; gap: var(--s-4);
  overflow-x: auto; scroll-snap-type: x mandatory;
  margin-inline: calc(-1 * var(--pad)); padding-inline: var(--pad);
  scroll-padding-inline: var(--pad);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.deck::-webkit-scrollbar { display: none; }
.deck--single { margin-inline: 0; padding-inline: 0; }
.card { flex: 0 0 100%; scroll-snap-align: center; display: flex; flex-direction: column; }
.deck--single .card { flex-basis: auto; }

/* Per-type preview variants (file tile + voice transcript) */
.preview--file, .preview--voice {
  flex-direction: column; gap: var(--s-3); padding: var(--s-4); text-align: center;
}
.preview__file { font-size: var(--t-body); font-weight: var(--w-bold); word-break: break-all; }
.preview__transcript {
  font-size: var(--t-body-lg); font-weight: var(--w-med); color: var(--ink);
  text-align: left; align-self: stretch;
}
.preview__audio { width: 100%; }

/* "Andere soort" disclosure — a native <details>, no JS */
.more { margin-top: var(--s-3); }
.more > summary {
  list-style: none; cursor: pointer; min-height: var(--tap-min);
  display: inline-flex; align-items: center;
  font-size: var(--t-body); font-weight: 600;
  text-decoration: underline; text-underline-offset: 4px; color: var(--ink);
}
.more > summary::-webkit-details-marker { display: none; }

/* ----- Inline preview overlay (folder items) ----------------------------- */
/* JS-free modal: a folder row links to #p-<n> to open the matching .viewer,
   the scrim + close link back to #r-<n> (the row) to dismiss. Panels stay in
   the DOM but hidden until targeted. PDFs (<object>) defer their load until
   shown; images may still be fetched by some browsers while hidden, so this
   suits reasonably-sized folders rather than unbounded lists. */
.viewer { position: fixed; inset: 0; z-index: 50; display: none; }
.viewer:target { display: block; }
.viewer__scrim {
  position: fixed; inset: 0;
  background: rgba(18, 17, 16, 0.72);
  -webkit-tap-highlight-color: transparent;
}
.viewer__panel {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  width: 100%; max-width: var(--screen-max); height: 100dvh;
  margin-inline: auto;
  background: var(--ground);
}
.viewer__bar {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-2) var(--pad);
  border-bottom: var(--hair) solid var(--line);
}
.viewer__title {
  flex: 1 1 auto;
  font-size: var(--t-body); font-weight: var(--w-bold); letter-spacing: var(--tr-snug);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.viewer__x {
  flex: 0 0 auto; width: var(--tap-min); height: var(--tap-min);
  margin-right: calc(-1 * var(--s-2));
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink); text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.viewer__x:hover { color: var(--accent-2); }
.viewer__body {
  flex: 1 1 auto; min-height: 0;
  background: var(--fill);
  display: flex; flex-direction: column;
}
.viewer__body--image { overflow: auto; -webkit-overflow-scrolling: touch; }
.viewer__img { max-width: 100%; width: auto; height: auto; margin-inline: auto; }
.viewer__pdf { flex: 1 1 auto; width: 100%; min-height: 0; border: 0; }
.viewer__fallback {
  margin: auto; padding: var(--s-6) var(--pad);
  text-align: center; color: var(--ink-2);
  display: flex; flex-direction: column; align-items: center; gap: var(--s-3);
}
.viewer__open {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  min-height: var(--tap-min); padding: var(--s-2) var(--s-3);
  border-top: var(--hair) solid var(--line);
  font-size: var(--t-body); font-weight: 600;
  text-decoration: underline; text-underline-offset: 4px;
}
/* Large screens: the full-screen sheet becomes a right-side drawer that slides
   in over a fading scrim. @starting-style + transition-behavior:allow-discrete
   let the enter/exit animate even though visibility stays driven by the
   display:none/:target toggle (still no JS); browsers without support just show
   it instantly, and prefers-reduced-motion collapses the timings to nil. Phones
   keep the instant full-height sheet untouched. */
@media (min-width: 720px) {
  .viewer { transition: display 0.3s allow-discrete; }
  .viewer__scrim { opacity: 0; transition: opacity 0.3s ease; }
  .viewer:target .viewer__scrim { opacity: 1; }
  .viewer__panel {
    margin-inline: auto 0;
    max-width: min(540px, 92vw);
    box-shadow: 0 0 60px rgba(18, 17, 16, 0.28);
    translate: 100% 0;
    transition: translate 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  }
  .viewer:target .viewer__panel { translate: 0 0; }
  @starting-style {
    .viewer:target .viewer__scrim { opacity: 0; }
    .viewer:target .viewer__panel { translate: 100% 0; }
  }
}

/* ----- Inline field validation ------------------------------------------- */
/* accent-2 (the darker tint) keeps error text legible without spending the
   pure accent, which stays reserved for the primary action. */
.field__error { color: var(--accent-2); font-size: var(--t-fine); font-weight: var(--w-med); }

/* ----- Processing bar (documents still in the pipeline) ------------------ */
/* Shown only while work is in flight; the page meta-refreshes so the fill
   advances on its own — no client JS. The accent spinner and progress fill
   carry the "live" signal, so the frame stays a plain hairline box. */
.proc {
  border: var(--hair) solid var(--line);
  padding: var(--s-3);
  background: var(--fill);
}
.proc__head { display: flex; align-items: center; gap: var(--s-2); }
.proc__title {
  flex: 1 1 auto;
  font-size: var(--t-label); font-weight: var(--w-bold);
  letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--ink-2);
}
.proc__spin {
  flex: 0 0 auto; width: 13px; height: 13px;
  border: 2px solid var(--ink-4); border-top-color: var(--accent);
  border-radius: 50%;
  animation: proc-spin 0.9s linear infinite;
}
@keyframes proc-spin { to { transform: rotate(360deg); } }
.proc__list { display: flex; flex-direction: column; gap: var(--s-3); margin-top: var(--s-3); }
.proc__meta { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2); }
.proc__type { font-size: var(--t-body); font-weight: var(--w-bold); letter-spacing: var(--tr-snug); }
.proc__stage { flex: 0 0 auto; font-size: var(--t-fine); color: var(--ink-3); }
.proc__track { margin-top: var(--s-1); height: 4px; background: var(--line); overflow: hidden; }
.proc__fill { height: 100%; background: var(--accent); transition: width 0.4s ease; }

/* ----- Flash / notice block ---------------------------------------------- */
/* A filled hairline box (fill vs. ground already sets it apart); errors take
   the accent border and accent-2 text, matching the inline field errors. */
.notice {
  border: var(--hair) solid var(--line);
  padding: var(--s-2) var(--s-3);
  background: var(--fill); color: var(--ink-2);
  font-size: var(--t-body);
}
.notice--error { border-color: var(--accent); color: var(--accent-2); }

/* ----- Boxed inputs ------------------------------------------------------- */
/* House style moved from the underline field to a white boxed input. Overridden
   here (not in BASE_CSS) so the shared system stays the single source of truth.
   Applies to text inputs and selects via .field__input; the search field keeps
   its underline (.search__input is a separate class). Keyboard focus still shows
   the accent outline from :focus-visible — we only recolour the border. */
.field__input {
  padding: 12px 14px;
  background: #fff;
  border: var(--hair) solid var(--line);
  border-radius: 8px;
  font-size: var(--t-body-lg);
}
.field__input::placeholder { color: var(--ink-4); }
.field__input:focus { border-color: var(--ink); }

/* Section headings (e.g. "ADRES", "BETALING") read as group headers — dark and
   heavier — so they stand apart from the quieter grey field labels beneath them. */
.label--heading { color: var(--ink); font-weight: var(--w-black); font-size: var(--t-fine); }

/* Breathing room below each input: space consecutive fields (and selects) apart
   so a stack of inputs doesn't feel cramped. Section gaps are placed separately. */
.field + .field { margin-top: var(--s-4); }

/* ----- Tabbed panels (JS-free subnav) ------------------------------------ */
/* Hidden radios hold the open tab; the <label>s toggle them and CSS shows the
   matching panel — no client JS. On a phone the subnav is a horizontal, edge-to-
   edge scrolling bar of underline tabs; on wide screens it becomes a sticky left
   sidebar so the freed-up width is spent on the form, not on empty margins.
   Panels are matched to tabs positionally (see tabPanelShow) so this stays
   generic. */
.tabs { display: block; }
/* Radios carry .visually-hidden (out of flow, still focusable), so they neither
   take grid space nor show; they exist only to hold state and drive the CSS. */
/* Phone: an equal-width row of underline tabs that fills the width (the four
   labels are short enough to sit side by side); it can still scroll on a very
   narrow device as a safety net. */
.subnav {
  display: flex;
  gap: var(--s-1);
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: var(--hair) solid var(--line);
}
.subnav::-webkit-scrollbar { display: none; }
.subnav__item {
  flex: 1 1 0; min-width: 0;
  display: inline-flex; align-items: center; justify-content: center;
  text-align: center;
  min-height: var(--tap-min);
  padding: 0 var(--s-1) var(--s-2);
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  color: var(--ink-3);
  font-size: 12px; font-weight: var(--w-bold);
  letter-spacing: 0.04em; text-transform: uppercase;
  white-space: nowrap; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.subnav__item:hover { color: var(--ink); }

.tabs__body { margin-top: var(--s-5); }
.panel { display: none; }
@keyframes panel-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.tabs__radio:nth-of-type(1):checked ~ .tabs__body .panel:nth-of-type(1),
.tabs__radio:nth-of-type(2):checked ~ .tabs__body .panel:nth-of-type(2),
.tabs__radio:nth-of-type(3):checked ~ .tabs__body .panel:nth-of-type(3),
.tabs__radio:nth-of-type(4):checked ~ .tabs__body .panel:nth-of-type(4),
.tabs__radio:nth-of-type(5):checked ~ .tabs__body .panel:nth-of-type(5),
.tabs__radio:nth-of-type(6):checked ~ .tabs__body .panel:nth-of-type(6),
.tabs__radio:nth-of-type(7):checked ~ .tabs__body .panel:nth-of-type(7),
.tabs__radio:nth-of-type(8):checked ~ .tabs__body .panel:nth-of-type(8) {
  display: block;
  animation: panel-in 0.24s ease both;
}
.tabs__radio:nth-of-type(1):checked ~ .subnav .subnav__item:nth-of-type(1),
.tabs__radio:nth-of-type(2):checked ~ .subnav .subnav__item:nth-of-type(2),
.tabs__radio:nth-of-type(3):checked ~ .subnav .subnav__item:nth-of-type(3),
.tabs__radio:nth-of-type(4):checked ~ .subnav .subnav__item:nth-of-type(4),
.tabs__radio:nth-of-type(5):checked ~ .subnav .subnav__item:nth-of-type(5),
.tabs__radio:nth-of-type(6):checked ~ .subnav .subnav__item:nth-of-type(6),
.tabs__radio:nth-of-type(7):checked ~ .subnav .subnav__item:nth-of-type(7),
.tabs__radio:nth-of-type(8):checked ~ .subnav .subnav__item:nth-of-type(8) {
  color: var(--ink);
  border-bottom-color: var(--accent);
}
.tabs__radio:nth-of-type(1):focus-visible ~ .subnav .subnav__item:nth-of-type(1),
.tabs__radio:nth-of-type(2):focus-visible ~ .subnav .subnav__item:nth-of-type(2),
.tabs__radio:nth-of-type(3):focus-visible ~ .subnav .subnav__item:nth-of-type(3),
.tabs__radio:nth-of-type(4):focus-visible ~ .subnav .subnav__item:nth-of-type(4),
.tabs__radio:nth-of-type(5):focus-visible ~ .subnav .subnav__item:nth-of-type(5),
.tabs__radio:nth-of-type(6):focus-visible ~ .subnav .subnav__item:nth-of-type(6),
.tabs__radio:nth-of-type(7):focus-visible ~ .subnav .subnav__item:nth-of-type(7),
.tabs__radio:nth-of-type(8):focus-visible ~ .subnav .subnav__item:nth-of-type(8) {
  outline: var(--focus);
  outline-offset: 2px;
}

/* Wide screens: the tabs become a two-column layout — a sticky vertical sidebar
   of tabs on the left, the active panel filling the room on the right. */
@media (min-width: 720px) {
  .tabs {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    grid-template-areas: "nav body";
    gap: var(--s-7);
    align-items: start;
  }
  .subnav {
    grid-area: nav;
    flex-direction: column;
    gap: 2px;
    overflow: visible;
    border-bottom: 0;
    border-right: var(--hair) solid var(--line);
    margin-inline: 0;
    padding-inline: 0;
    padding-right: var(--s-4);
    position: sticky; top: var(--s-6);
  }
  .subnav__item {
    flex: 0 0 auto;
    justify-content: flex-start;
    text-align: left;
    min-height: 40px;
    padding: var(--s-2) var(--s-3);
    margin-bottom: 0;
    border-bottom: 0;
    border-left: 2px solid transparent;
    font-size: var(--t-label);
    letter-spacing: var(--tr-caps);
  }
  .tabs__body { grid-area: body; margin-top: 0; }
  .tabs__radio:nth-of-type(1):checked ~ .subnav .subnav__item:nth-of-type(1),
.tabs__radio:nth-of-type(2):checked ~ .subnav .subnav__item:nth-of-type(2),
.tabs__radio:nth-of-type(3):checked ~ .subnav .subnav__item:nth-of-type(3),
.tabs__radio:nth-of-type(4):checked ~ .subnav .subnav__item:nth-of-type(4),
.tabs__radio:nth-of-type(5):checked ~ .subnav .subnav__item:nth-of-type(5),
.tabs__radio:nth-of-type(6):checked ~ .subnav .subnav__item:nth-of-type(6),
.tabs__radio:nth-of-type(7):checked ~ .subnav .subnav__item:nth-of-type(7),
.tabs__radio:nth-of-type(8):checked ~ .subnav .subnav__item:nth-of-type(8) {
    color: var(--ink);
    border-bottom-color: transparent;
    border-left-color: var(--accent);
    background: var(--fill);
  }
}

/* ----- Invoice document (mirrors the PDF) -------------------------------- */
.rule--accent { background: var(--accent); }
.doc__title {
  font-size: 34px; font-weight: var(--w-black); letter-spacing: var(--tr-caps);
  text-transform: uppercase; margin-top: var(--s-1);
}
.doc .rule { margin-top: var(--s-3); }
.doc__parties {
  display: flex; flex-direction: column; gap: var(--s-4);
  margin-top: var(--s-4);
}
.party { display: flex; flex-direction: column; }
.party__label {
  font-size: var(--t-label); font-weight: var(--w-bold);
  letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--ink-3);
  margin-bottom: var(--s-1);
}
.party__name { font-size: var(--t-body-lg); font-weight: var(--w-bold); letter-spacing: var(--tr-snug); }
.party__line { font-size: var(--t-body); color: var(--ink-2); }
.docmeta { display: flex; flex-direction: column; gap: var(--s-2); }
.docmeta__item { display: flex; flex-direction: column; }
.docmeta__label {
  font-size: var(--t-label); font-weight: var(--w-bold);
  letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--ink-3);
}
.docmeta__value { font-size: var(--t-body-lg); font-weight: var(--w-bold); font-variant-numeric: tabular-nums; }

/* ----- Invoice line table ------------------------------------------------ */
/* Phones: each line is a small card (omschrijving on its own row; aantal +
   stukprijs share the next; the running amount sits right). Wide screens (see
   the min-width block) promote it to a real table row under a shared header. */
.linetable { display: flex; flex-direction: column; margin-top: var(--s-3); }
.ln--head { display: none; }
.ln {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas:
    "desc desc del"
    "qty price vat"
    "amt amt amt";
  gap: var(--s-2) var(--s-3);
  padding: var(--s-4) 0;
  border-bottom: var(--hair) solid var(--line);
}
.ln--ro {
  grid-template-columns: 1fr 1fr auto;
  grid-template-areas: "desc desc amt" "qty qty amt";
  align-items: baseline;
}
.ln--ro .ln__cell--price { display: none; }
.ln__cell { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.ln__cell--desc { grid-area: desc; }
.ln__cell--qty { grid-area: qty; }
.ln__cell--price { grid-area: price; }
.ln__cell--vat { grid-area: vat; }
.ln__lab {
  font-size: var(--t-label); font-weight: var(--w-bold);
  letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--ink-3);
}
.ln__in {
  width: 100%; min-height: var(--tap-min); padding: 10px 12px;
  background: #fff; border: var(--hair) solid var(--line); border-radius: 8px;
  font-size: var(--t-body); font-weight: var(--w-med); color: var(--ink);
}
.ln__in::placeholder { color: var(--ink-4); }
.ln__in:focus { border-color: var(--ink); }
.ln__in--num { font-variant-numeric: tabular-nums; }
/* The per-line BTW dropdown keeps the boxed-input look but the native arrow. */
.ln__sel { cursor: pointer; }
.ln__vat { display: none; font-size: var(--t-fine); color: var(--ink-3); }
.ln__amt {
  grid-area: amt; align-self: center; text-align: right; white-space: nowrap;
  font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink-2);
}
.ln--ro .ln__amt { align-self: baseline; }
.ln__ro-num { font-variant-numeric: tabular-nums; }
.ln__del {
  grid-area: del; justify-self: end; align-self: start;
  width: 32px; height: 32px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: var(--hair) solid var(--line); border-radius: 8px;
  font-size: 22px; line-height: 1; color: var(--ink-3); cursor: pointer;
}
.ln__del:hover { border-color: var(--accent); color: var(--accent); }
.ln__add {
  align-self: flex-start; min-height: var(--tap-min); margin-top: var(--s-3);
  padding: 0 var(--s-3);
  background: none; border: var(--hair) dashed var(--line); border-radius: 8px;
  font-size: var(--t-body); font-weight: 600; color: var(--ink); cursor: pointer;
}
.ln__add:hover { border-color: var(--ink); }

/* ----- Small screens: keep the biggest type from overflowing 320px -------- */
@media (max-width: 380px) {
  :root { --pad: 22px; --t-amount: 54px; --t-title: 40px; --t-lead: 24px; }
}
@media (max-width: 340px) {
  :root { --t-amount: 46px; --t-title: 34px; }
  .choice { font-size: 21px; }
}

/* ----- Wide screens: the column stays a phone-width card, comfortably set -- */
@media (min-width: 720px) {
  .screen { padding-top: var(--s-8); padding-bottom: var(--s-8); }

  /* Screens that carry a data table (the invoice document) may use more of the
     available width instead of staying pinned to the phone column. */
  .screen--wide { max-width: 720px; }

  /* Seller (left) + meta (right) share one row, as on the PDF. */
  .screen--wide .doc__parties {
    flex-direction: row; justify-content: space-between; align-items: flex-start;
    gap: var(--s-6);
  }
  .screen--wide .docmeta { align-items: flex-end; }
  .screen--wide .docmeta__item { align-items: flex-end; }

  /* Promote the stacked line cards to a real table: shared header + one row per
     line (Omschrijving | Aantal | Stukprijs | BTW | Bedrag | delete). */
  .screen--wide .ln--head,
  .screen--wide .ln {
    grid-template-columns: 1fr 72px 112px 76px 120px 32px;
    grid-template-areas: "desc qty price vat amt del";
    align-items: center;
    gap: var(--s-3);
  }
  .screen--wide .ln--ro {
    grid-template-columns: 1fr 72px 112px 76px 120px;
    grid-template-areas: "desc qty price vat amt";
  }
  .screen--wide .ln--ro .ln__cell--price { display: flex; }
  .screen--wide .ln--head {
    display: grid;
    padding-bottom: var(--s-2);
    border-bottom: var(--hair) solid var(--line);
    font-size: var(--t-label); font-weight: var(--w-bold);
    letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--ink-3);
  }
  .screen--wide .ln--head .ln__cell--qty,
  .screen--wide .ln--head .ln__cell--price,
  .screen--wide .ln--head .ln__vat,
  .screen--wide .ln--head .ln__amt { text-align: right; }
  /* The header reuses .ln__amt for column alignment; drop its darker body color. */
  .screen--wide .ln--head .ln__amt { color: var(--ink-3); font-weight: var(--w-bold); }
  .screen--wide .ln__lab { display: none; }
  .screen--wide .ln__vat { display: block; grid-area: vat; text-align: right; align-self: center; }
  .screen--wide .ln__in--num { text-align: right; }
  .screen--wide .ln__del { align-self: center; }
  .screen--wide .ln__add { margin-top: var(--s-4); }
}

/* ----- Inbox addresses (map footer + welcome) --------------------------- */
/* A distinct boxed surface (fill vs. the page ground) so the two send-in
   addresses read as one unit. Each address pairs a small caps label (title)
   with the monospace address (value), plus a copy button the script reveals. */
.addresses {
  display: flex; flex-direction: column; gap: var(--s-4);
  padding: var(--s-4);
  background: var(--fill);
  border: var(--hair) solid var(--line);
}
.addr { display: flex; flex-direction: column; gap: var(--s-1); }
.addr__label {
  font-size: var(--t-label); font-weight: var(--w-bold);
  letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--ink-3);
}
.addr__row { display: flex; align-items: center; gap: var(--s-2); }
.addr__value {
  flex: 1 1 auto; min-width: 0; word-break: break-all;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 16px; font-weight: var(--w-med); color: var(--ink);
  text-decoration: none;
}
.addr__value:hover { color: var(--accent-2); }
.addr__copy {
  flex: 0 0 auto;
  min-height: var(--tap-min); padding: 0 var(--s-3);
  background: #fff; color: var(--ink);
  border: var(--hair) solid var(--line); border-radius: var(--radius);
  font-size: var(--t-label); font-weight: var(--w-bold);
  letter-spacing: var(--tr-caps); text-transform: uppercase;
  cursor: pointer; white-space: nowrap;
}
.addr__copy:hover { border-color: var(--ink); }
.addr__copy[data-copied] { background: var(--ink); color: var(--ground); border-color: var(--ink); }
.addr__hint { font-size: var(--t-fine); color: var(--ink-3); }

/* ----- Onboarding steps (welcome) --------------------------------------- */
/* Three all-optional cards. One column on a phone; the column card grows into a
   two- then three-up grid on wider screens so the welcome uses the room instead
   of a lonely phone column. The :has() widens the wide-cap only for this screen,
   and degrades to the 720px cap where :has() is unsupported (still fine). */
.steps { display: grid; grid-template-columns: 1fr; gap: var(--s-4); margin-top: var(--s-6); }
.step {
  display: flex; flex-direction: column; gap: var(--s-3);
  padding: var(--s-5);
  background: #fff; border: var(--hair) solid var(--line);
}
.step__head { display: flex; align-items: center; gap: var(--s-3); }
.step__num {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  background: var(--accent); color: var(--accent-ink);
  font-size: var(--t-fine); font-weight: var(--w-black);
  font-variant-numeric: tabular-nums;
}
.step__title { flex: 1 1 auto; min-width: 0; font-size: var(--t-section); font-weight: var(--w-black); letter-spacing: var(--tr-snug); }
.step__body { display: flex; flex-direction: column; gap: var(--s-3); }
.step__variant { display: flex; flex-direction: column; gap: var(--s-3); }

/* A full-width outline action inside a step, so the one accent stays on the
   final "Naar mijn map". Renders the same for <a> and <button>. */
.step__cta {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; min-height: 56px; padding: 0 var(--s-3);
  background: none; color: var(--ink);
  border: var(--hair) solid var(--ink); border-radius: var(--radius);
  font-size: var(--t-body); font-weight: var(--w-bold); letter-spacing: -0.01em;
  text-align: center; text-decoration: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.step__cta:hover { background: var(--fill); color: var(--ink); }
.step__cta:active { transform: translateY(1px); }

/* The Android two-step how-to: a tidy ordered list with accent markers. */
.substeps {
  margin: 0; padding-left: 1.25em;
  display: flex; flex-direction: column; gap: var(--s-2);
  font-size: var(--t-body); color: var(--ink-2);
}
.substeps li::marker { color: var(--accent); font-weight: var(--w-black); }

@media (min-width: 720px) {
  .screen--wide:has(.steps) { max-width: 1040px; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
@media (min-width: 1000px) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ----- Landing page ------------------------------------------------------ */
/* The only public screen, and the only one that is not a phone column. It is
   built as a desktop page that collapses rather than a phone page that
   stretches: one column on a phone, and from 960px a two-column hero, a story
   of alternating screenshot rows, and a grid of channel cards. Every class here
   belongs to landing markup alone and carries an lp- prefix, so generic names
   (row, card, way) cannot collide with the app's. The widths hang off
   .screen--landing, so no app screen moves. */

/* Top bar: wordmark left, the one escape hatch right. */
.lp-bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding-bottom: var(--s-4); border-bottom: var(--hair) solid var(--line);
}
.lp-bar__actions { display: flex; align-items: center; gap: var(--s-3); }
.lp-bar__link {
  font-size: var(--t-label); font-weight: var(--w-bold); letter-spacing: var(--tr-caps);
  text-transform: uppercase; color: var(--ink-3); text-decoration: none;
}
.lp-bar__link:hover { color: var(--accent); }
/* The call-us option, set as a pill so it reads as an offer and not a footnote:
   the folk who would rather talk to a person can see the number without hunting
   for it. The icon carries the accent; the number stays ink so it's legible. */
.lp-bar__phone {
  display: inline-flex; align-items: center; gap: var(--s-1);
  padding: 8px 14px; border: var(--hair) solid var(--line); border-radius: 999px;
  font-size: var(--t-fine); font-weight: var(--w-bold); letter-spacing: var(--tr-snug);
  color: var(--ink); text-decoration: none; white-space: nowrap;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.lp-bar__phone-icon { width: 16px; height: 16px; color: var(--accent); }
.lp-bar__phone:hover { border-color: var(--accent); color: var(--accent); }
/* On a narrow phone the number itself would crowd the wordmark, so only the
   glyph stays; tapping it still dials. */
@media (max-width: 480px) {
  .lp-bar__phone span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .lp-bar__phone { padding: 8px; }
}

/* Hero: the story on one side, the single action on the other. */
.lp-hero { padding-top: var(--s-7); }
.lp-hero__copy > * + * { margin-top: var(--s-4); }

/* "administratie." is one long unbreakable word, so a fixed 48px headline runs
   off the side of a 390px iPhone (the system only steps the title down below
   380px). Sizing it against the viewport keeps it as big as will actually fit. */
.screen--landing .title { font-size: clamp(32px, 9.5vw, 48px); }

/* Three plain promises, set as a row rather than a feature list. */
.lp-points {
  list-style: none; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5);
  font-size: var(--t-fine); font-weight: var(--w-bold); color: var(--ink-2);
}
.lp-points li::before { content: "\2192"; color: var(--accent); margin-right: 8px; }

/* The sign-up card: the page's one action, boxed so it reads as the one thing
   to do. Square like everything else here; only the phone shots get a radius. */
.lp-card {
  margin-top: var(--s-6); padding: var(--s-5);
  background: #fff; border: var(--hair) solid var(--line);
  box-shadow: 0 20px 44px rgba(18, 17, 16, 0.07);
}
.lp-card__foot {
  display: flex; justify-content: center;
  margin-top: var(--s-4); padding-top: var(--s-4);
  border-top: var(--hair) solid var(--line);
}

/* Every band below the hero opens with a small heading and a line of copy. */
.lp-sec { padding-top: var(--s-8); }
.lp-sec__head > * + * { margin-top: var(--s-3); }

/* The story is three acts, each a point beside its screenshot. On a phone the
   copy sits above its shot and the acts stack; from 960px the two side acts
   alternate left/right (see the flip rule below). The gap is the story's own
   rhythm, so the middle feature doesn't add its own top margin. */
.lp-story { margin-top: var(--s-5); display: flex; flex-direction: column; gap: var(--s-8); }
.lp-row__copy > * + * { margin-top: var(--s-3); }
.lp-row__num {
  font-size: var(--t-label); font-weight: var(--w-bold);
  letter-spacing: var(--tr-caps); color: var(--accent);
}
.lp-row__title {
  font-size: var(--t-section); font-weight: var(--w-black); letter-spacing: var(--tr-snug);
}

/* A screenshot, centred and capped by height so a tall phone frame and a wider
   document read as the same size on the page. figure carries a default 40px
   inline margin, so it is reset here. The tilt is added from 720px up; on a
   phone the shot stays straight so a rotated corner can't reach the edge. */
.lp-media { margin: var(--s-5) 0 0; display: flex; justify-content: center; }
.lp-media img {
  display: block; width: auto; height: auto; max-width: 100%; max-height: 420px;
  border: var(--hair) solid var(--line); box-shadow: 0 18px 40px rgba(18, 17, 16, 0.16);
  transition: transform 0.25s ease;
}
.lp-media--phone img { border-radius: 26px; }
.lp-media--doc img { border-radius: 12px; background: #fff; }

/* Act two — talk-to-invoice — is the payoff, so it breaks the side-by-side
   rhythm and runs full width: the spoken note, an arrow, the invoice it became.
   Below 620px the pair stacks and the arrow turns to point down. */
.lp-feature { text-align: center; }
.lp-feature .lp-row__copy { max-width: 54ch; margin-inline: auto; }
.lp-talk {
  margin-top: var(--s-6);
  display: flex; align-items: center; justify-content: center; gap: var(--s-4);
}
.lp-talk .lp-media { margin-top: 0; }
.lp-talk .lp-media--phone img { max-height: 320px; }
.lp-talk .lp-media--doc img { max-height: 380px; }
.lp-talk__arrow { flex: none; font-size: 32px; line-height: 1; color: var(--accent); }
@media (max-width: 620px) {
  .lp-talk { flex-direction: column; }
  .lp-talk__arrow { transform: rotate(90deg); }
}

/* The WhatsApp act shows the conversation itself, built as an on-brand chat
   thread instead of a screenshot: the sender's own messages take the one accent,
   Supermappie's replies use the neutral surface, so the thread reads as a real
   chat without a second brand colour (and ships no binary asset). */
.lp-chat {
  margin: var(--s-6) auto 0; width: 100%; max-width: 400px;
  display: flex; flex-direction: column; gap: var(--s-2);
  padding: var(--s-4); text-align: left;
  background: #fff; border: var(--hair) solid var(--line); border-radius: 22px;
  box-shadow: 0 18px 40px rgba(18, 17, 16, 0.12);
}
.lp-chat__head {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: var(--s-2); margin-bottom: var(--s-1);
  border-bottom: var(--hair) solid var(--line);
}
.lp-chat__avatar { height: 26px; width: auto; }
.lp-chat__who { display: flex; flex-direction: column; line-height: 1.15; }
.lp-chat__name { font-size: var(--t-fine); font-weight: var(--w-black); letter-spacing: var(--tr-snug); }
.lp-chat__status { font-size: 11px; color: var(--ink-3); }
.lp-chat__msg { display: flex; }
.lp-chat__msg--out { justify-content: flex-end; }
.lp-chat__msg--in { justify-content: flex-start; }
.lp-chat__bubble {
  max-width: 84%; padding: 10px 13px;
  font-size: var(--t-fine); line-height: 1.45; border-radius: 16px;
}
.lp-chat__bubble--out { background: var(--accent); color: var(--accent-ink); border-bottom-right-radius: 5px; }
.lp-chat__bubble--in  { background: var(--fill); color: var(--ink); border-bottom-left-radius: 5px; }
.lp-chat__photo, .lp-chat__voice { display: flex; align-items: center; gap: 10px; }
.lp-chat__thumb {
  flex: none; width: 30px; height: 30px; border-radius: 8px;
  display: grid; place-items: center; background: rgba(255, 255, 255, 0.22);
}
.lp-chat__thumb svg { width: 18px; height: 18px; }
.lp-chat__wave { width: 88px; height: 22px; }
.lp-chat__time { font-size: 11px; opacity: .75; }

/* The shortcut nudge sits directly under the steps, because step 01 is the
   shortcut. Both device variants render without JS; landing.js drops one. */
.lp-nudge { margin-top: var(--s-5); text-align: center; }
.lp-nudge .action-link { justify-content: center; }

/* The channels that are not a phone gesture, as a row of equal cards. It is a
   <ul>, so it needs the same list reset as .lp-steps: without it the browser's
   default padding-inline-start pushes the whole grid ~40px to the right of the
   section heading. */
.lp-ways { list-style: none; padding: 0; display: grid; gap: var(--s-3); margin-top: var(--s-5); }
.lp-way {
  display: flex; flex-direction: column; gap: var(--s-1);
  padding: var(--s-4); background: #fff; border: var(--hair) solid var(--line);
}
.lp-way__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2); }
.lp-way__title { font-size: var(--t-body); font-weight: var(--w-black); letter-spacing: var(--tr-snug); }
.lp-way__hint { font-size: var(--t-fine); color: var(--ink-2); }

/* Hero trust strip: the honest, checkable promises, set as a quiet band right
   under the hero. A fill panel keeps it calm (not another loud accent block);
   each item is prefixed with the accent arrow used elsewhere on the page so it
   reads as part of the same language. Wraps to two rows on a phone, one on wide. */
.lp-trust-strip {
  list-style: none; margin: var(--s-6) 0 0; padding: var(--s-4);
  background: var(--fill); border: var(--hair) solid var(--line);
  display: grid; grid-template-columns: 1fr; gap: var(--s-3) var(--s-5);
}
.lp-trust-strip__item {
  display: flex; align-items: baseline; gap: var(--s-2);
  font-size: var(--t-fine); font-weight: var(--w-bold); color: var(--ink);
}
.lp-trust-strip__item::before { content: "\2192"; color: var(--accent); font-weight: var(--w-black); }
@media (min-width: 720px) {
  .lp-trust-strip { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .lp-trust-strip { grid-template-columns: repeat(4, 1fr); gap: var(--s-4); }
}

/* "Waarom" trust cards: the same white bordered card as .lp-way, but each carries
   a heading and a fuller line, because these are reasons to trust rather than
   channels. One column on a phone, two then three across as room allows. */
.lp-whys { list-style: none; padding: 0; display: grid; gap: var(--s-3); margin-top: var(--s-5); }
.lp-why {
  display: flex; flex-direction: column; gap: var(--s-2);
  padding: var(--s-4); background: #fff; border: var(--hair) solid var(--line);
}
.lp-why__title { font-size: var(--t-body); font-weight: var(--w-black); letter-spacing: var(--tr-snug); }
.lp-why__copy { font-size: var(--t-fine); color: var(--ink-2); line-height: 1.5; }
@media (min-width: 620px) {
  .lp-whys { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .lp-whys { grid-template-columns: repeat(3, 1fr); }
}

/* Support callout: a plain, human close to the trust band — a real number and
   real hours instead of invented testimonials. Set on a fill panel so it reads
   as one reassuring unit; the phone number takes the accent to invite the tap. */
.lp-support {
  margin-top: var(--s-5); padding: var(--s-5);
  background: var(--fill); border: var(--hair) solid var(--line);
  display: flex; flex-direction: column; gap: var(--s-2); align-items: flex-start;
}
.lp-support__title { font-size: var(--t-section); font-weight: var(--w-black); letter-spacing: var(--tr-snug); }
.lp-support__copy { font-size: var(--t-fine); color: var(--ink-2); max-width: 52ch; }
.lp-support__phone {
  margin-top: var(--s-2);
  display: inline-flex; align-items: center; gap: var(--s-1);
  font-size: var(--t-body-lg); font-weight: var(--w-black); letter-spacing: var(--tr-snug);
  color: var(--ink); text-decoration: none;
}
.lp-support__icon { width: 22px; height: 22px; color: var(--accent); }
.lp-support__phone:hover { color: var(--accent); }
@media (min-width: 720px) {
  .lp-support {
    flex-direction: row; align-items: center; justify-content: space-between;
    gap: var(--s-5); padding: var(--s-5) var(--s-6);
  }
  .lp-support__phone { margin-top: 0; flex: none; white-space: nowrap; }
}

/* Pricing: two plans as equal cards, said plainly. Mirrors .lp-ways so the band
   reads as part of the same rhythm; the yearly card is outlined in ink to mark it
   as the better deal, with a small accent tag. Stacks on a phone, two-up from 720px. */
.lp-plans { list-style: none; padding: 0; display: grid; gap: var(--s-3); margin-top: var(--s-5); }
.lp-plan {
  display: flex; flex-direction: column; gap: var(--s-2);
  padding: var(--s-5); background: #fff; border: var(--hair) solid var(--line);
}
.lp-plan--best { border: var(--rule) solid var(--ink); }
.lp-plan__name {
  display: flex; align-items: center; gap: var(--s-2);
  font-size: var(--t-label); font-weight: var(--w-bold);
  letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--ink-3);
}
.lp-plan__tag {
  font-size: var(--t-fine); font-weight: var(--w-bold);
  letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--accent);
  border: var(--hair) solid var(--accent); padding: 1px 8px;
}
.lp-plan__price {
  font-size: var(--t-lead); font-weight: var(--w-black); letter-spacing: var(--tr-snug);
  color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1;
}
.lp-plan__per { font-size: var(--t-body); font-weight: var(--w-med); color: var(--ink-3); margin-left: 6px; }
.lp-plan__note { font-size: var(--t-fine); color: var(--ink-2); }
.lp-plans__free {
  margin-top: var(--s-4); font-size: var(--t-fine); color: var(--ink-2); text-align: center;
}
@media (min-width: 720px) {
  .lp-plans { grid-template-columns: repeat(2, 1fr); }
}

/* Closing band: the same single action, for a reader who never scrolls back. */
.lp-cta {
  margin-top: var(--s-8); padding-block: var(--s-7) var(--s-6);
  text-align: center;
}
.lp-cta__action { max-width: 340px; margin: var(--s-5) auto var(--s-3); }
.lp-cta .action-link { justify-content: center; }

/* Footer: the trust band. A landing page asks a zzp'er to hand over their
   administration, so it closes by naming the real company behind it — the
   wordmark, a person to call, and the registration facts (KVK, btw, a street
   address) that say this is a business you can hold to account. Set on a fill
   panel so it reads as the page's foundation, not another section. */
.lp-foot {
  margin-top: var(--s-8);
  padding: var(--s-6) var(--s-5) var(--s-5);
  background: var(--fill); border-top: var(--rule) solid var(--ink);
}
.lp-foot__lead > * + * { margin-top: var(--s-3); }
.lp-foot__tag { font-size: var(--t-fine); color: var(--ink-2); max-width: 42ch; }
.lp-foot__phone {
  display: inline-flex; align-items: center; gap: var(--s-1);
  font-size: var(--t-body); font-weight: var(--w-black); letter-spacing: var(--tr-snug);
  color: var(--ink); text-decoration: none;
}
.lp-foot__phone-icon { width: 20px; height: 20px; color: var(--accent); }
.lp-foot__phone:hover { color: var(--accent); }

/* The registration facts, as a definition list so each label owns its value.
   Stacks on a phone, spreads to a four-up row once there's room. */
.lp-trust {
  margin-top: var(--s-6); padding-top: var(--s-5);
  border-top: var(--hair) solid var(--line);
  display: grid; gap: var(--s-4);
}
.lp-trust__key {
  font-size: var(--t-label); font-weight: var(--w-bold);
  letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--ink-3);
}
.lp-trust__val {
  margin-top: 6px; font-size: var(--t-fine); font-weight: var(--w-med);
  color: var(--ink); line-height: 1.5; font-variant-numeric: tabular-nums;
}

.lp-foot__base {
  margin-top: var(--s-5); padding-top: var(--s-4);
  border-top: var(--hair) solid var(--line);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-1) var(--s-3);
  font-size: var(--t-fine); color: var(--ink-3);
}

@media (min-width: 720px) {
  .lp-trust { grid-template-columns: repeat(4, 1fr); gap: var(--s-5); }
}

@media (min-width: 720px) {
  .screen--landing { max-width: 900px; padding-inline: var(--s-7); }
  .screen--landing .title { font-size: 64px; }
  .screen--landing .lead  { font-size: 30px; }
  .screen--landing .body  { font-size: var(--t-body-lg); max-width: 62ch; }
  /* There is room now, so the shots get their playful tilt and straighten under
     the pointer. In the talk pair the two lean toward each other. */
  .lp-media--phone img { transform: rotate(-2deg); }
  .lp-media--doc img { transform: rotate(1.5deg); }
  .lp-talk .lp-media--phone img { transform: rotate(-3deg); }
  .lp-talk .lp-media--doc img { transform: rotate(2.5deg); }
  .lp-row:hover .lp-media img,
  .lp-feature:hover .lp-media img { transform: rotate(0deg); }
  /* Two channels now (WhatsApp leads the story), so the band is one full row. */
  .lp-ways  { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 960px) {
  .screen--landing { max-width: 1140px; }
  /* Once the hero splits, the headline only has the left column to live in, and
     "administratie." cannot break. Scaling it against the viewport keeps it off
     the card at 960px and still lets it reach full size on a wide display. */
  .screen--landing .title { font-size: clamp(52px, 5.4vw, 72px); }
  /* The hero splits in two: story left, sign-up card right, tops aligned. The
     card keeps a floor so its button and fine print never get squeezed. */
  .lp-hero {
    display: grid; grid-template-columns: 1.1fr minmax(320px, 0.9fr);
    gap: var(--s-8); align-items: start;
  }
  .lp-card { margin-top: 0; padding: var(--s-6); }
  /* The two side acts split into copy | shot, centred on the row. The second one
     flips so the page zig-zags instead of marching down one edge. The media's
     top margin (its phone spacing) is dropped now it sits in a column. */
  .lp-row {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: var(--s-8); align-items: center;
  }
  .lp-row .lp-media { margin-top: 0; }
  .lp-row .lp-media img { max-height: 480px; }
  .lp-row--flip .lp-row__copy { order: 2; }
}