/* schwupps.app, the site of the Schwupps app, on the Tafel kit (Tafel 3; page of 7 October 2026, evening). Loaded after
   kit/tafel.css and kit/tafel-landing.css, which carry the paper, the type, the lamps, the boards, the clipboard, the
   chalkboard, the ledger, the start plate and the footer.
   This file adds what the public page of a product does not have: the nav that marks where the reader is; the job
   pinned on the page in the hero (the job with its photos as one line, three offers pinned side by side, Wupp's slip);
   the two sides of a job as a document, a row a side, the professional's side with the same job as it arrives; the way
   of a job as one sheet with the stamp; Wupp with its figure, its five things on the clipboard and its rungs after them;
   the four rules as plates on the chalkboard; the state as four stations on a line; the start list as a plate; the quiet
   row of the platforms beneath; the footer with the legal pages of the app; and the paper of the legal pages and of the
   page that is not there.
   Schwupps itself is ink on paper; the three product inks stay on their marks and their names. The Wupp figure is the
   kit's one symbol #i-wupp wherever it stands, so that the next figure replaces it everywhere.
   No inline styles or scripts (strict CSP); tokens only in the :root blocks; no clamp(). Headings take their size as a
   longhand (font-size), beside the kit's shorthand: the detector's static pass reads sizes only from longhands. */

:root {
  --ink-schwupps: #141414;
  --ink-schwupps-deep: #3E3E3D;
  --wupp-figure: 104px;
  --wupp-figure-s: 72px;
  --pin-head: 9px;
}

body.site { --ink-brand: var(--ink-schwupps); --ink-brand-deep: var(--ink-schwupps-deep); --ink-brand-tint: var(--plate-2); }

/* ---------- the header: the wordmark, the four places of the page, the languages ---------- */
.site .site-header .wordmark .mark { width: 28px; height: 28px; }
.site .site-header .wordmark .name { font-size: var(--t-xl); }
.site .site-nav { justify-content: flex-end; }
.site .site-header .lang { margin-left: auto; }
.site .site-nav a[aria-current="true"] { color: var(--ink); text-decoration-line: underline; text-decoration-thickness: 2px; text-underline-offset: 0.5em; }

/* ---------- the hero: the sentence, one part a line; the words, the actions and the state at left, the job on its board
   at right ---------- */
.site .hero { padding-bottom: 64px; }
.site .hero .wrap { grid-template-areas: "say say" "text board"; row-gap: 36px; }
.site .hero .say { max-width: none; font-size: var(--say); }
.site .hero .say span { display: block; }
.site .hero-text { gap: 22px; padding-top: 4px; }
.site .hero .for-whom { margin-top: -10px; }
.site .hero .actions .btn svg.icon { width: 16px; height: 16px; }
/* the address beside the actions: the start list is a mail, and a machine without a mail program still has a way */
.site .hero-mail { margin-top: -10px; color: var(--ink-2); font-size: var(--t-s); }
.site .hero-mail a { color: var(--ink); font-weight: 600; white-space: nowrap; }
/* the state of the app under the actions: a lamp at the edge and one honest sentence, the way to the whole state */
.site .hero-text .hero-stand { grid-area: auto; margin-top: 10px; padding-top: 16px; }
.site .hero-stand p { max-width: 52ch; }
.site .hero-stand a { white-space: nowrap; }

/* the job pinned on the page: a label written on the board, the job as a sheet, the three offers pinned side by side
   under it, Wupp's slip; the page is the board, so nothing here sits in a second frame */
.jobboard { display: grid; gap: 18px; padding-top: 2px; container-type: inline-size; }
.job-head { display: grid; gap: 2px; padding-bottom: 10px; border-bottom: 1px solid var(--rule); font-weight: 600; font-size: var(--t-l); line-height: 1.3; }
.job-head small { color: var(--muted); font-weight: 400; font-size: var(--t-s); line-height: 1.35; }
.jobcard { position: relative; display: grid; gap: 10px; margin-top: 6px; padding: 24px 24px 22px; background: var(--sheet); border-radius: var(--r);
  box-shadow: 0 0 0 1px var(--edge-strong), 1px 2px 0 var(--lift-soft); --knock: var(--sheet); }
.jobcard::before, .procard::before, .offer::before { content: ""; position: absolute; top: -4px; left: 50%; width: var(--pin-head); height: var(--pin-head); margin-left: -4.5px; border-radius: 50%;
  background: var(--pin); box-shadow: 1px 1.5px 0 var(--pin-shadow), inset 1.5px 1.5px 0 -0.5px var(--pin-light); }
.jobcard .from, .procard .from { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; color: var(--muted); font-size: var(--t-xs); }
.job-title { font-weight: 600; font-size: var(--t-2xl); line-height: 1.15; letter-spacing: -0.012em; }
.job-place { display: flex; align-items: center; gap: 6px; margin-top: -4px; color: var(--ink-2); font-size: var(--t-s); }
.job-place svg.icon { color: var(--muted); }
.job-quote { color: var(--ink); line-height: 1.5; text-wrap: pretty; }
/* an attachment of a job, as one line: the photos by what they show, never a made-up picture */
.job-att { display: flex; align-items: flex-start; gap: 8px; color: var(--ink-2); font-size: var(--t-s); line-height: 1.45; }
.job-att svg.icon { flex: none; margin-top: 1px; color: var(--muted); }
.offers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 4px; }
.offer { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 2px; min-width: 0; padding: 16px 14px 13px;
  background: var(--sheet); border: 1px solid var(--edge); border-radius: var(--r); box-shadow: 0 1px 0 var(--lift-soft); }
.offer b { font-weight: 600; font-size: var(--t-m); line-height: 1.3; }
.offer .dist { color: var(--muted); font-size: var(--t-s); line-height: 1.35; }
.offer .price { margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--rule); font-weight: 600; font-size: var(--t-2xl); line-height: 1; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.job-slip { padding: 0; --knock: var(--sheet); }
.job-slip .msg:has(> .who-chip.wupp) { margin: 0; }
.job-slip .msg-text { color: var(--ink); }
@container (max-width: 30em) {
  .offers { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .offer { grid-template-columns: minmax(0, 1fr) auto; gap: 1px 14px; align-items: center; padding: 14px 14px 12px; }
  .offer .price { grid-column: 2; grid-row: 1 / span 2; margin: 0; padding: 0; border: 0; font-size: var(--t-xl); }
}

/* ---------- a section's heading in the text face, where it stands beside its object instead of over it ---------- */
.site .block-head h2 { font-size: var(--t-3xl); }
.flow-text h2, .contact h2 { font-weight: 600; font-size: var(--t-3xl); line-height: 1.12; letter-spacing: -0.015em; text-wrap: balance; }
.flow-text h2 { padding-bottom: 14px; border-bottom: 1px solid var(--rule); }
.flow-text .lead, .wupp-head .lead { max-width: 52ch; font-size: var(--t-l); line-height: 1.55; text-wrap: pretty; }

/* ---------- two sides of one job, as a document: a row a side under a rule, the side's name at left, its clauses at
   right; the professional's row carries the same job as it arrives, the one object of the section, so that the section
   reads as the job seen from both sides rather than as a list of features ---------- */
.side-row { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 20px 48px; padding: 26px 0 30px; border-top: 2px solid var(--ink); scroll-margin-top: 88px; }
.side-row + .side-row { margin-top: 10px; }
.side-label { display: grid; gap: 4px; align-content: start; }
.side-label h3 { font-weight: 600; font-size: var(--t-2xl); line-height: 1.15; letter-spacing: -0.012em; }
.side-label p { color: var(--ink-2); font-size: var(--t-s); }
/* a clause: its first words in ink as its name, the rest of the sentence after them */
.clauses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; align-content: start; }
.clauses li { padding: 14px 0 16px; border-top: 1px solid var(--rule); color: var(--ink-2); line-height: 1.55; }
.clauses li:nth-child(-n+2) { padding-top: 2px; border-top: 0; }
.clauses b { color: var(--ink); font-weight: 600; }
.side-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 32px; align-items: start; }
.side-body .clauses { grid-template-columns: minmax(0, 1fr); }
.side-body .clauses li:nth-child(2) { padding-top: 14px; border-top: 1px solid var(--rule); }
/* the job as it arrives at a professional: pinned like the customer's job, with the professional's one action */
.procard { position: relative; display: grid; gap: 10px; align-content: start; min-width: 0; padding: 22px 22px 20px; background: var(--sheet); border-radius: var(--r);
  box-shadow: 0 0 0 1px var(--edge-strong), 1px 2px 0 var(--lift-soft); --knock: var(--sheet); }
.pro-scope { color: var(--ink); line-height: 1.5; text-wrap: pretty; }
.pro-act { margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--rule); }
.pro-act .act { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 14px; border-radius: var(--r); background: var(--ink); color: var(--sheet); font-weight: 600; font-size: var(--t-m); line-height: 1.2; text-shadow: none; }

/* ---------- the way of a job: the words at left, the job's sheet at right with the stamp on its fourth step ---------- */
.flow-wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px 56px; align-items: start; }
.flow-text { display: grid; gap: 20px; align-content: start; min-width: 0; }
.roles { display: grid; margin-top: 4px; }
.roles > div { display: grid; grid-template-columns: minmax(6rem, 8.5rem) minmax(0, 1fr); gap: 2px 16px; padding: 11px 0 12px; border-bottom: 1px solid var(--rule); }
.roles > div:first-child { border-top: 1px solid var(--ink); }
.roles dt { font-weight: 600; color: var(--ink); }
.roles dd { margin: 0; color: var(--ink-2); }
/* why the stamp: the one decision of a job, held rather than clicked */
.why-stamp { display: grid; gap: 8px; margin-top: 10px; }
.why-stamp h3 { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: var(--t-l); line-height: 1.3; }
.why-stamp h3 svg.icon { color: var(--sign); }
.why-stamp p { max-width: 52ch; color: var(--ink-2); line-height: 1.55; }
.sheet.flowsheet { max-width: none; gap: 0; padding: 30px 32px 24px; font-size: var(--t-m); }
.sheet.flowsheet > p { max-width: none; }
.flowsheet .from { padding-bottom: 14px; }
.flow-title { padding-bottom: 14px; border-bottom: 2px solid var(--ink); font-weight: 600; font-size: var(--t-2xl); line-height: 1.2; letter-spacing: -0.012em; }
.flowsheet .steps li { display: grid; grid-template-columns: 20px minmax(0, 10.5rem) minmax(0, 1fr) auto; gap: 2px 16px; align-items: baseline; min-height: 56px; padding: 12px 0 13px; }
.flowsheet .steps li + li { border-top: 1px solid var(--rule); }
.flowsheet .steps .n { color: var(--muted); font-weight: 600; font-size: var(--t-s); font-variant-numeric: tabular-nums; text-align: right; }
.flowsheet .steps p { display: grid; gap: 1px; min-width: 0; }
.flowsheet .steps b { font-weight: 600; font-size: var(--t-m); line-height: 1.35; color: var(--ink); }
.flowsheet .steps .step-by { color: var(--muted); font-size: var(--t-s); line-height: 1.35; }
.flowsheet .steps .step-what { min-width: 0; color: var(--ink-2); font-size: var(--t-s); line-height: 1.45; }
.flowsheet .steps li.has-stamp { align-items: center; }
.flowsheet .steps li.has-stamp > .n { align-self: baseline; }
/* the impression of the kit's stamp (.stamp .seal in tafel.css) without the stamp's plate around it: a person's decision,
   so the blue of the sign instead of a product's ink */
.stamped { display: block; padding: 0 4px 0 6px; }
.stamped .seal { --st: var(--sign); display: grid; place-items: center; min-height: 44px; padding: 8px 16px 7px; border: 2.5px solid var(--st); border-radius: 26px;
  box-shadow: inset 0 0 0 2px var(--sheet), inset 0 0 0 3.2px var(--st); color: var(--st); font-weight: 700; font-size: var(--t-xs); line-height: 1.1;
  letter-spacing: 0.16em; text-transform: uppercase; text-align: center; opacity: 0.85; transform: rotate(-5deg); filter: url(#bleed); text-shadow: none; }
/* the confirmed price under the double rule of a ledger, from the offer, never typed */
.flow-sum { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; margin-top: 2px; padding-top: 12px; border-top: 3px double var(--ink); }
.flow-sum span { font-weight: 600; }
.flow-sum b { font-weight: 600; font-size: var(--t-2xl); line-height: 1; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.flow-note { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; align-items: start; margin-top: 20px; padding-top: 12px; border-top: 1px solid var(--rule); color: var(--ink-2); font-size: var(--t-s); line-height: 1.5; }

/* ---------- Wupp: the figure, its name and its words on top; below them the five things on the clipboard, and the rungs
   after the five things, each in one plain line ---------- */
.wupp-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 18px 56px; align-items: center; margin-bottom: 44px; padding-bottom: 26px; border-bottom: 1px solid var(--rule); }
.wupp-head .lead { color: var(--ink-2); }
.wupp-body { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px 56px; align-items: start; }
/* Wupp introduced as a character: the figure large beside its name, the name in the text face, its role under it */
.wupp-card { display: grid; grid-template-columns: var(--wupp-figure) minmax(0, 1fr); gap: 22px; align-items: center; min-width: 0; }
.wupp-card h2 { font-weight: 600; font-size: var(--t-4xl); line-height: 1.05; letter-spacing: -0.02em; }
.wupp-role { margin-top: 6px; color: var(--ink-2); font-size: var(--t-l); line-height: 1.35; }
.wupp-figure { display: block; width: var(--wupp-figure); height: var(--wupp-figure); color: var(--ink); --knock: var(--sheet); }
.wupp-figure svg { display: block; width: 100%; height: 100%; overflow: visible; fill: none; stroke: none; }
/* the ladder of TAFEL.md 20.8: Wupp stops at the lowest rung that answers */
.rungs { display: grid; min-width: 0; padding-top: 6px; }
.rungs h3 { padding-bottom: 10px; border-bottom: 1px solid var(--ink); font-weight: 600; font-size: var(--t-l); line-height: 1.3; }
.ladder-list li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 0 14px; align-items: start; padding: 12px 0 13px; border-bottom: 1px solid var(--rule); }
.ladder-list .n { font-weight: 600; font-size: var(--t-l); line-height: 1.3; font-variant-numeric: tabular-nums; text-align: right; }
.ladder-list p { display: grid; gap: 1px; }
.ladder-list b { font-weight: 600; font-size: var(--t-m); line-height: 1.4; color: var(--ink); }
.ladder-list p > span { color: var(--ink-2); font-size: var(--t-s); line-height: 1.45; }
.rungs-note { margin-top: 12px; color: var(--ink-2); font-size: var(--t-s); }
.clipboard .msg-body { gap: 4px; }
.does { display: grid; margin-top: 6px; }
.does li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 0 12px; align-items: start; padding: 11px 0 12px; border-top: 1px solid var(--rule); }
.does li > svg.icon { margin-top: 1px; color: var(--ink-2); }
.does p { display: grid; gap: 2px; }
.does b { font-weight: 600; font-size: var(--t-m); line-height: 1.35; color: var(--ink); }
.does p > span { color: var(--ink-2); line-height: 1.45; }

/* ---------- what holds: four plates screwed to the chalkboard ---------- */
.block.dark { --ink-brand: var(--ink); }
.rule-plates { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.rule-plate { position: relative; display: grid; gap: 10px; align-content: start; min-width: 0; padding: 28px 24px 26px;
  background: var(--screw) left 8px top 8px / 8px 8px no-repeat, var(--screw) right 8px top 8px / 8px 8px no-repeat,
              var(--screw) left 8px bottom 8px / 8px 8px no-repeat, var(--screw) right 8px bottom 8px / 8px 8px no-repeat, var(--sheet);
  border: 1.5px solid var(--plate-line); border-radius: var(--r); --knock: var(--sheet); }
.rule-plate > svg.icon { margin-bottom: 4px; color: var(--ink-2); }
.rule-plate h3 { font-weight: 600; font-size: var(--t-xl); line-height: 1.25; letter-spacing: -0.01em; color: var(--ink); text-wrap: balance; }
.rule-plate p { color: var(--ink-2); line-height: 1.5; }

/* ---------- where it stands: four stations on one line, drawn through what exists and dashed toward what comes ---------- */
.stand-route { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 0; }
.stand-route li { display: flex; flex-direction: column; gap: 8px; padding-right: 28px; }
.stand-route li.is-next { border-top-style: dashed; border-top-color: var(--control-line); }
.stand-route li.is-next .stop { background: var(--page); box-shadow: inset 0 0 0 1.5px var(--ink); }
.stand-route h3 { font-size: var(--t-l); }
.stand-route p { color: var(--ink-2); font-size: var(--t-s); line-height: 1.5; }
.stand-route .addr { display: flex; flex-wrap: wrap; gap: 2px 12px; }
.stand-route .addr .mono { color: var(--ink); font-size: var(--t-xs); }
/* the state of each station stands at its foot, so that the four states read on one line */
.stand-route .lw { align-self: flex-start; margin-top: auto; padding-top: 4px; color: var(--ink); font-weight: 600; }

/* ---------- the start list: a plate with four screws; the words at left, the mail at right ---------- */
.site .startplate { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: 22px 56px; }
.list-text { display: grid; gap: 12px; align-content: start; min-width: 0; }
.list-text h2 { font-weight: 600; font-size: var(--t-3xl); line-height: 1.12; letter-spacing: -0.015em; text-wrap: balance; }
.list-text p { max-width: 58ch; color: var(--ink-2); line-height: 1.55; }
.list-act { display: grid; gap: 12px; justify-items: start; align-content: center; min-width: 0; }
.list-act .btn.primary { min-height: 52px; padding: 12px 22px; font-size: var(--t-l); }
.list-act p { max-width: 40ch; color: var(--ink-2); font-size: var(--t-s); line-height: 1.5; }
.list-act p a { color: var(--ink); font-weight: 600; white-space: nowrap; }

/* ---------- contact: the heading at left, the address in large type at right ---------- */
.contact { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 10px 56px; align-items: baseline; }
.contact h2 { grid-row: span 2; }
.contact .mail { font-weight: 600; font-size: var(--t-4xl); line-height: 1.1; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.contact .mail a { text-decoration-color: var(--control-line); text-underline-offset: 0.14em; }
.contact .contact-p { color: var(--ink-2); font-size: var(--t-l); }

/* ---------- the platforms beneath: one quiet row, the marks in their inks, the names and their addresses ---------- */
.platforms { padding: 36px 16px 40px; border-top: 1px solid var(--rule); }
.plat-wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 14px 56px; align-items: center; }
.plat-text h2 { font-weight: 600; font-size: var(--t-l); line-height: 1.3; }
.plat-text p { max-width: 46ch; margin-top: 4px; color: var(--ink-2); font-size: var(--t-s); }
.plat-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.plat-list li { position: relative; min-width: 0; }
.plat-list li + li::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 1px; background: var(--rule); }
.plat-list a { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; align-items: center; min-height: 56px; padding: 6px 16px; border-radius: var(--r); color: var(--ink); text-decoration: none; }
.plat-list li:first-child a { padding-left: 0; }
.plat-list a:hover { background: var(--wash); }
.plat-list a:hover b { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.plat-list .brandmark { width: 30px; height: 30px; }
.plat-list .brandmark svg { width: 26px; height: 26px; }
.plat-name { display: grid; gap: 1px; min-width: 0; }
.plat-name b { font-weight: 700; font-size: var(--t-m); line-height: 1.25; letter-spacing: -0.01em; }
.plat-list .wm-p { color: var(--mk); }
.plat-name .mono { color: var(--ink-2); font-size: var(--t-xs); }

/* ---------- the footer: the maker's name under the wordmark; the legal pages of the app in two columns ---------- */
.site .site-footer .wrap { grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); }
.site-footer .foot-company { margin-top: 6px; color: var(--muted); }

/* ---------- the paper pages: the legal texts and the page that is not there, one sheet pinned to the board ---------- */
.paper { padding: 48px 16px 80px; }
.paper-sheet { max-width: 46rem; margin: 0 auto; gap: 0; padding: 48px 56px 44px; font-size: var(--t-m); line-height: 1.6; }
.paper-sheet h1 { font-weight: 600; font-size: var(--t-3xl); line-height: 1.15; letter-spacing: -0.015em; }
.paper-sub { margin-top: 8px; color: var(--muted); }
.paper-langs { display: grid; gap: 8px; margin-top: 22px; padding: 14px 16px; background: var(--plate-2); border: 1px solid var(--edge); border-radius: var(--r); font-size: var(--t-s); line-height: 1.5; color: var(--ink-2); }
.paper-langs b { color: var(--ink); }
.paper-short { margin-top: 20px; }
.paper-toc { margin-top: 22px; padding: 14px 0 16px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.paper-toc ol { columns: 2; column-gap: 36px; padding-left: 22px; list-style: decimal; font-size: var(--t-s); }
.paper-toc li { break-inside: avoid; padding: 2px 0; }
.paper-sheet h2 { margin-top: 40px; padding-bottom: 8px; border-bottom: 1px solid var(--rule); font-weight: 600; font-size: var(--t-xl); line-height: 1.3; scroll-margin-top: 84px; }
.paper-sheet h3 { margin-top: 24px; font-weight: 600; font-size: var(--t-l); line-height: 1.35; }
.paper-sheet p, .paper-sheet ul, .paper-sheet address, .paper-sheet dl { margin-top: 12px; }
.paper-sheet p, .paper-sheet li { max-width: 68ch; }
.paper-sheet h2 + p, .paper-sheet h3 + p, .paper-sheet h2 + address, .paper-sheet h2 + ul { margin-top: 14px; }
.paper-sheet ul:not(.lost-links) { display: grid; gap: 6px; padding-left: 20px; list-style: disc; }
.paper-sheet address { font-style: normal; }
.paper-sheet .small { font-size: var(--t-s); color: var(--muted); }
.recipients { display: grid; border-top: 2px solid var(--ink); font-size: var(--t-s); }
.recipients > div { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 4fr) minmax(0, 4fr); gap: 4px 16px; padding: 10px 0 11px; border-bottom: 1px solid var(--rule); }
.recipients dt { font-weight: 600; color: var(--ink); }
.recipients dd { margin: 0; color: var(--ink-2); }
.paper-foot { margin-top: 36px; padding-top: 14px; border-top: 1px solid var(--rule); font-size: var(--t-s); color: var(--muted); }
/* the note at the top of a sheet: for which service the page holds */
.paper-sheet .paper-note { max-width: none; margin-top: 0; margin-bottom: 26px; padding-bottom: 14px; border-bottom: 1px solid var(--rule); font-size: var(--t-s); line-height: 1.5; color: var(--ink-2); }
/* the pages of the Schwupps App, carried over word for word: a passage the old page set apart lies on the sheet as a
   plate with a hairline edge; the English text follows the German under its own heading; the page's own links close it */
.paper-box { margin-top: 18px; padding: 14px 16px 15px; border: 1px solid var(--edge-strong); border-radius: var(--r); }
.paper-box > p:first-child { margin-top: 0; }
.paper-box.small { font-size: var(--t-s); color: var(--ink-2); }
.paper-en { margin-top: 8px; }
.paper-en > h2 { margin-top: 44px; }
.paper-sheet code { font-family: var(--f-mono); font-size: 0.92em; }
.paper-sheet hr { margin: 36px 0 0; border: 0; border-top: 1px solid var(--rule); }
.paper-sheet hr + h2 { margin-top: 28px; }
/* the contents already close on a rule; the break that follows them would draw it twice */
.paper-toc + hr { display: none; }
.paper-toc + hr + h2 { margin-top: 40px; }
.paper-sheet .tablewrap { margin-top: 14px; }
.paper-sheet .ledger { min-width: 36rem; }
.paper-sheet .ledger td { vertical-align: top; }
.paper-nav { display: flex; flex-wrap: wrap; gap: 0 24px; margin-top: 40px; padding-top: 6px; border-top: 1px solid var(--rule); font-weight: 600; font-size: var(--t-s); }
.paper-nav a { display: inline-flex; align-items: center; min-height: 44px; }
.paper-sheet .from { padding-bottom: 18px; }
.is-lost h1 + p[lang] { margin-top: 10px; }
.is-lost > p[lang] { font-size: var(--t-l); color: var(--ink-2); }
.lost-links { display: grid; gap: 2px; margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--rule); }
.lost-links a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }

/* ---------- motion of the kit: the offers settle onto their pins, the slips slide in, the stamp lands ---------- */
@media (prefers-reduced-motion: no-preference) {
  .offers.is-arriving > li { animation: settle 160ms var(--ease) backwards; }
  .offers.is-arriving > li:nth-child(2) { animation-delay: 40ms; }
  .offers.is-arriving > li:nth-child(3) { animation-delay: 80ms; }
  .job-slip.is-arriving .msg { animation: slip-arrive 240ms var(--ease) 200ms backwards; }
  .flowsheet.is-arriving, .procard.is-arriving { animation: settle 160ms var(--ease) backwards; }
  .flowsheet.is-arriving .stamped .seal { animation: seal-press 320ms var(--ease) 240ms backwards; }
  .clipboard.is-arriving .msg { animation: slip-arrive 240ms var(--ease) 140ms backwards; }
  .rule-plates.is-arriving > li { animation: settle 160ms var(--ease) backwards; }
  .rule-plates.is-arriving > li:nth-child(2) { animation-delay: 40ms; }
  .rule-plates.is-arriving > li:nth-child(3) { animation-delay: 80ms; }
  .rule-plates.is-arriving > li:nth-child(4) { animation-delay: 120ms; }
}
@keyframes seal-press { from { transform: rotate(-5deg) scale(1.15); } to { transform: rotate(-5deg) scale(1); } }

/* ---------- widths (the breakpoints of the kit: 1100, 900, 700 and 520 px at 16 px) ---------- */
@media (min-width: 68.76em) {
  /* on a wide screen the words of the way stay beside the sheet while it passes */
  .flow-text { position: sticky; top: 96px; }
}
@media (max-width: 68.75em) {
  /* the job follows the words */
  .site .hero .wrap { grid-template-areas: "say" "text" "board"; row-gap: 28px; }
  .site .hero-text .hero-stand { margin-top: 2px; }
  .flow-wrap, .wupp-head, .wupp-body, .side-row, .contact, .plat-wrap { grid-template-columns: minmax(0, 1fr); }
  .wupp-head { margin-bottom: 36px; }
  .contact h2 { grid-row: auto; }
  .rule-plates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stand-route { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .wupp-card { grid-template-columns: var(--wupp-figure-s) minmax(0, 1fr); }
  .wupp-figure { width: var(--wupp-figure-s); height: var(--wupp-figure-s); }
  .site .site-footer .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 56.25em) {
  .site .site-nav { justify-content: flex-start; margin: 0 -10px; }
  .site .startplate { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 43.75em) {
  /* the sentence may break inside a part now, never beside the page's edge */
  :root { --say: 3.25rem; }
  .site .hero .say span { white-space: normal; }
  .site .site-header .lang a { min-width: 44px; min-height: 44px; }
  .rule-plates { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  /* the clauses and the professional's card stand one under the other */
  .clauses, .side-body { grid-template-columns: minmax(0, 1fr); }
  .clauses li:nth-child(2) { padding-top: 14px; border-top: 1px solid var(--rule); }
  .stand-route { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .stand-route li { padding-right: 0; }
  .flowsheet .steps li { grid-template-columns: 20px minmax(0, 1fr); gap: 4px 14px; }
  .flowsheet .steps .step-what { grid-column: 2; }
  .flowsheet .steps li.has-stamp > .n { align-self: start; }
  .flowsheet .steps .stamped { grid-column: 2; justify-self: start; margin-top: 10px; padding-left: 4px; }
  .plat-list { grid-template-columns: minmax(0, 1fr); }
  .plat-list li + li::before { left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 1px; }
  .plat-list a, .plat-list li:first-child a { padding: 8px 0; }
  .contact .mail { font-size: var(--t-3xl); }
  .paper-toc ol { columns: 1; }
  .recipients > div { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 32.5em) {
  :root { --say: 2.75rem; --wupp-figure-s: 64px; }
  .site .hero { padding-bottom: 40px; }
  /* on a phone the two actions take the width, one under the other */
  .site .hero .actions .btn { flex: 1 1 100%; }
  .jobcard { padding: 20px 16px 18px; }
  .procard { padding: 20px 16px 18px; }
  .sheet.flowsheet { padding: 24px 18px 20px; }
  .roles > div { grid-template-columns: minmax(0, 1fr); }
  .wupp-card h2 { font-size: var(--t-3xl); }
  .site .clipboard { padding: 38px 8px 12px; }
  /* the slip's list takes the whole slip under Wupp's corner, so that its words keep their width */
  .clipboard .does { margin-left: -42px; }
  .rule-plate { padding: 26px 20px 22px; }
  .site .startplate { padding: 22px 18px 24px; }
  .list-text h2 { font-size: var(--t-2xl); }
  .list-act { justify-items: stretch; }
  .contact .mail { font-size: var(--t-2xl); }
  .paper { padding: 24px 12px 48px; }
  .paper-sheet { padding: 30px 20px 28px; }
}