/* Hallmark · shape: Split Studio (/), Long Document (impressum.html, datenschutz.html) · genre: modern-minimal · theme: Dose (deal 1/3, seed queue-management-system-doctors-0cf8·9e5b802d·2026-11-12·r0, by request) · redesign: full
 * hero: Settled (/), Banner (impressum.html, datenschutz.html) · nav: edge-aligned · footer: mast · imagery: the product, built: board, ticket labels, dispatcher, counter · signature: the printed ticket label beside the call board, its number counting down as the board calls · dose: white
 * axes: light/grotesk-sans/chromatic-orange · posture: committed · accent: smartQ orange in place of the pharmacy green, by the owner's request · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V5 · weakest: R, plastic bands, labels and screens could crowd; kept one ink band, one tray per section and the orange on controls, stamps and the current call only */
/* Hallmark · waive 84 · every built screen sits in a data-slot marked data-kind product, so real captures can replace it · the owner barred running the live smartQ queue system for site captures, so board, labels, dispatcher and counter are built to match the real screens */
/* Hallmark · waive 23 · the orange fill is the .counter product screen inside a data-kind product slot · the real smartQ counter turns orange past its warning threshold, so the sample shows that state */
/* Hallmark · waive 78 · impressum.html and datenschutz.html are a Long Document whose h2 are numbered clause heads inside running text · the legal pages read as legal text, so their clause heads stay at title size */
/* Hallmark · waive 77 · legal prose held at a 60ch measure on impressum.html and datenschutz.html · a legal text reads best in one column, widening it to ten columns would hurt the reading */
/* Hallmark · waive 44c · impressum.html and datenschutz.html open on a Banner head right above the clauses · the legal pages put the clauses on the first screen instead of a hero */
/* Hallmark · answered F4 · one filled primary per screen outside the product samples; the orange keys inside the demo and dispatcher are the simulated device keys */
/* Hallmark · answered F7 · the lifted white recipe is one material on purpose: every built product screen is the same white surface on plastic, as the theme sets it */
/* Hallmark · answered F15 · the 24px gap belongs to the demo tray and the 40px gap to the plastic bands, both inner layouts, while every section grid keeps 32px */
/* Hallmark · dismissed 59 · the demo tray is the working proof of the steps above it, counted twice as two sections */
/* Hallmark · waive 25 · the legal pages cap clause prose at 60ch on impressum.html and datenschutz.html · Instrument Sans runs narrow, so 60ch keeps lines under 75 characters */
/* Hallmark · answered F8 · parallax by the owner's request: native scroll-driven layers in the hero, the step visuals and the privacy labels, translate only, off under reduced motion and without support */
/* Hallmark · dropped https://www.gesetze.li, mailto:kontakt@example.li · the owner removed the trade-licence section and wrote the contact address as plain text on the legal pages */
/* Hallmark · waive 39b · button.inline-button sits inside a sentence of datenschutz.html, the footer carries the same action at 44px · a 44px control in running prose would break the line it belongs to */
/* Hallmark · dropped data-slot phone-ticket · the digital ticket now lives as the hero's printed label, which carries the same hooks; the privacy section shows two record labels instead */
@import url("./tokens.css");
@import url("./base.css");

/* Fonts: self-hosted (no third-party requests), SIL OFL */
@font-face { font-family: "Schibsted Grotesk"; src: url("fonts/schibsted-grotesk-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("fonts/instrument-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("fonts/instrument-sans-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Mono"; src: url("fonts/dm-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Mono"; src: url("fonts/dm-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

body { background: var(--grain), var(--color-paper); font-size: 1.0625rem; font-synthesis: none; }
h1, h2, h3 { line-height: 1.02; }
h3 { line-height: 1.15; }
b, strong, dt, th { font-weight: 500; }
.mono { font-family: var(--font-outlier); font-variant-numeric: tabular-nums; }
.muted { color: var(--color-muted); }
.lead { color: var(--color-ink-2); }

/* Skip link */
.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper); border-radius: var(--radius-input); }
.skip:focus-visible { top: var(--space-md); }

/* Moulded controls */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 52px; padding: 0 var(--space-lg); border: 0; border-radius: var(--radius-input); background: linear-gradient(var(--glint), var(--color-paper)); color: var(--color-ink); font: 500 var(--text-md)/1 var(--font-body); white-space: nowrap; text-decoration: none; cursor: pointer; box-shadow: inset 0 1px 0 var(--glint), 0 0 0 1px var(--color-rule-strong), 0 3px 0 var(--color-rule-strong); transition: transform var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out); }
.btn:hover { box-shadow: inset 0 1px 0 var(--glint), 0 0 0 1px var(--color-ink-2), 0 3px 0 var(--color-ink-2); }
.btn:active { transform: translateY(3px); box-shadow: inset 0 1px 0 var(--glint), 0 0 0 1px var(--color-rule-strong), 0 0 0 var(--color-rule-strong); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn--primary { background: linear-gradient(var(--color-accent), var(--color-accent-deep)); color: var(--color-accent-ink); box-shadow: inset 0 1px 0 var(--color-accent-soft), 0 0 0 1px var(--color-accent-deep), 0 3px 0 var(--color-stamp); }
.btn--primary:hover { box-shadow: inset 0 1px 0 var(--color-accent-soft), 0 0 0 1px var(--color-stamp), 0 3px 0 var(--color-ink-2); }
.btn--primary:active { box-shadow: inset 0 1px 0 var(--color-accent-soft), 0 0 0 1px var(--color-accent-deep), 0 0 0 var(--color-stamp); }
.btn--small { min-height: 44px; padding: 0 var(--space-md); font-size: var(--text-sm); }
.btn--nav { min-height: 46px; }
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }

/* Nav: edge-aligned on the paper */
.site-header { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: var(--grain), var(--color-paper); border-bottom: 1px solid transparent; transition: border-color var(--dur-short) var(--ease-out); }
.site-header.scrolled { border-bottom-color: var(--color-rule); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-height: var(--nav-height); }
.wordmark { font: 700 var(--text-xl)/1 var(--font-display); letter-spacing: -0.03em; color: var(--color-ink); text-decoration: none; }
.wordmark span, .footer-mark span { color: var(--color-accent-deep); }
.nav { display: flex; align-items: center; gap: var(--space-lg); }
.nav a:not(.btn) { color: var(--color-ink-2); font-weight: 500; text-decoration: none; white-space: nowrap; padding-block: var(--space-xs); text-underline-offset: 0.3em; }
.nav a:not(.btn):hover { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; }
.nav-toggle { display: none; background: none; border: 0; padding: var(--space-sm); cursor: pointer; border-radius: var(--radius-input); }
.nav-toggle span { display: block; width: 24px; height: 2px; margin: var(--space-2xs) 0; background: var(--color-ink); transition: transform var(--dur-short) var(--ease-out), opacity var(--dur-short) var(--ease-out); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 64rem) {
  .nav-toggle { display: block; }
  .nav { position: absolute; top: var(--nav-height); left: 0; right: 0; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: var(--space-xs) var(--gutter) var(--space-lg); background: var(--grain), var(--color-paper); border-bottom: 1px solid var(--color-rule); }
  .nav.open { display: flex; }
  .nav a:not(.btn) { padding-block: var(--space-sm); border-bottom: 1px solid var(--color-rule); font-size: var(--text-lg); }
  .nav .btn { margin-top: var(--space-md); }
  .nav--legal { position: static; display: flex; padding: 0; background: none; border: 0; box-shadow: none; }
  .nav--legal .btn { margin-top: 0; }
}

/* Sections */
.section { padding-block: var(--section-gap); }
.section--tint { background: var(--grain), var(--color-paper-2); }
.head-split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: end; margin-bottom: var(--space-2xl); }
.head-split h2 { grid-column: 1 / span 6; }
.head-split .lead { grid-column: 8 / span 5; }
figcaption { margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-muted); }
@media (max-width: 60rem) {
  .head-split h2, .head-split .lead { grid-column: 1 / -1; }
  .head-split .lead { margin-top: var(--space-md); }
}

/* Split Studio: text left, proof keeps the right */
.split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-2xl); align-items: center; }
.split-text { grid-column: 1 / span 5; min-width: 0; }
.split-proof { grid-column: 7 / span 6; min-width: 0; margin: 0; }
.split .split-text > * + * { margin-top: var(--space-lg); }
.split .split-text > h2 + * { margin-top: var(--space-lg); }
.split--joined { margin-top: var(--section-gap-s); padding-top: var(--section-gap-s); border-top: 1px solid var(--color-rule); }
.split--form { align-items: start; }
.split--form .split-text { grid-column: 1 / span 4; }
.split--form .contact-form { grid-column: 6 / span 7; }
@media (max-width: 60rem) {
  .split-text, .split-proof, .split--form .split-text, .split--form .contact-form { grid-column: 1 / -1; }
  .split { row-gap: var(--space-xl); }
}

/* Plastic, trays, sheets and labels: the Dose material */
.plastic { --t: var(--p-tue); position: relative; border-radius: var(--radius-card); background: linear-gradient(color-mix(in oklab, var(--glint) 34%, transparent), transparent 18%), color-mix(in oklab, var(--t) 64%, transparent); box-shadow: inset 0 1.5px 0 var(--glint), inset 0 -26px 36px -28px color-mix(in oklab, var(--t) 45%, var(--color-ink)); }
.tray { border-radius: var(--radius-card); background: var(--grain), var(--color-paper-3); box-shadow: var(--shadow-sunk); padding: var(--space-xl); }
.sheet { border-radius: var(--radius-card); background: var(--color-screen); box-shadow: var(--shadow-lift); }
.screen { border-radius: var(--radius-card); background: var(--color-screen); box-shadow: var(--shadow-lift); }
.label { position: relative; display: flex; flex-direction: column; gap: var(--space-2xs); padding: var(--space-md) var(--space-lg) 0; border-radius: var(--radius-input); background: var(--grain), var(--color-label); box-shadow: var(--shadow-lift); font: 400 var(--text-sm)/1.45 var(--font-outlier); color: var(--color-ink-2); }
.label-kind { color: var(--color-muted); }
.label-no { font: 500 4.5rem/1 var(--font-outlier); letter-spacing: -0.04em; color: var(--color-ink); font-variant-numeric: tabular-nums; }
.label-stub { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); margin-top: var(--space-md); padding: var(--space-sm) 0 var(--space-md); border-top: 1.5px dashed var(--color-rule-strong); }
.label-bar { flex: 0 0 72px; height: 6px; border-radius: var(--radius-pill); background: var(--color-paper-3); overflow: hidden; }
.label-bar i { display: block; width: 100%; height: 100%; background: var(--color-accent); transform-origin: left; transform: scaleX(var(--progress, 0.3)); transition: transform var(--dur-long) var(--ease-out); }
.stamp { position: absolute; right: var(--space-md); top: var(--space-2xl); padding: var(--space-2xs) var(--space-sm); border: 2px solid var(--color-stamp); outline: 1.5px solid var(--color-stamp); outline-offset: 2px; border-radius: var(--radius-input); color: var(--color-stamp); background: color-mix(in oklab, var(--color-label) 80%, transparent); font: 500 var(--text-sm)/1.3 var(--font-outlier); text-align: center; transform: rotate(-8deg); }
.stamp--grey { border-color: var(--color-muted); outline-color: var(--color-muted); color: var(--color-muted); }

/* Window light across the hero paper (still, no loop) */
.window-light { position: absolute; inset: 0 0 auto 40%; height: 100%; pointer-events: none; overflow: hidden; }
.window-light i { position: absolute; width: 24%; height: 44%; background: var(--light); filter: blur(30px); transform: skewX(-18deg); opacity: 0.85; }
.window-light i:nth-child(1) { left: 18%; top: 2%; } .window-light i:nth-child(2) { left: 46%; top: 2%; }
.window-light i:nth-child(3) { left: 18%; top: 52%; } .window-light i:nth-child(4) { left: 46%; top: 52%; }

/* Hero: Settled */
.hero { position: relative; display: grid; align-items: center; min-height: calc(100dvh - var(--nav-height)); padding-block: var(--space-2xl); overflow: clip; }
.hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: center; }
.hero-copy h1 { max-width: 11ch; }
.hero-copy .lead { margin-top: var(--space-lg); max-width: 30ch; }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xl); }
.hero-stage { position: relative; min-height: 640px; margin: 0; }
.hero-stage .board { position: absolute; left: 0; top: 0; width: 70%; }
.label--hero { position: absolute; right: 0; top: 300px; width: 270px; transform: rotate(3deg); z-index: var(--z-raised); }
.trays { position: absolute; left: 4%; right: 0; bottom: 64px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-sm); transform: perspective(1400px) rotateX(48deg) rotateZ(-6deg); transform-origin: bottom; }
.trays span { --t: var(--p-tue); display: grid; place-items: center; height: 110px; border-radius: var(--radius-card); background: linear-gradient(color-mix(in oklab, var(--glint) 34%, transparent), transparent 22%), color-mix(in oklab, var(--t) 66%, transparent); box-shadow: inset 0 1.5px 0 var(--glint), inset 0 -24px 34px -24px color-mix(in oklab, var(--t) 45%, var(--color-ink)); font: 700 var(--text-lg)/1 var(--font-display); color: color-mix(in oklab, var(--t) 35%, var(--color-ink)); }
.hero-stage figcaption { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); }
html:not(.js) [data-loop-toggle] { display: none; }
@media (prefers-reduced-motion: reduce) { [data-loop-toggle] { display: none; } }
@media (max-width: 60rem) {
  .hero { min-height: 0; padding-block: var(--space-xl) var(--space-3xl); }
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); }
  .hero-stage { min-height: 0; display: grid; gap: var(--space-lg); }
  .hero-stage .board, .label--hero, .hero-stage figcaption { position: relative; inset: auto; width: 100%; }
  .label--hero { width: min(100%, 300px); margin-left: auto; transform: rotate(2deg); }
  .trays { display: none; }
}

/* The call board: Ticket and Platz columns, plain numbers, like the real monitor */
.board { display: flex; flex-direction: column; padding: var(--space-lg); }
.board-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: var(--space-sm); border-bottom: 1px solid var(--color-rule); color: var(--color-muted); font-size: var(--text-sm); }
.board-head strong { font: 700 var(--text-xl)/1 var(--font-display); letter-spacing: -0.02em; color: var(--color-ink); }
.board-cols { display: grid; grid-template-columns: 1fr 1fr; padding: var(--space-md) var(--space-sm) var(--space-xs); font-size: var(--text-sm); color: var(--color-muted); }
.board-cols span:last-child { text-align: right; }
.board-rows { display: grid; gap: var(--space-2xs); }
.mrow { display: grid; grid-template-columns: 1fr auto; align-items: center; min-height: 64px; padding: 0 var(--space-sm); border-bottom: 1px solid var(--color-rule); }
.mrow b { font: 700 2.5rem/1 var(--font-display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.mrow span { color: var(--color-ink-2); }
.mrow.is-new { border-radius: var(--radius-input); border-bottom-color: transparent; background: var(--color-accent); color: var(--color-accent-ink); }
.mrow.is-new span { color: var(--color-accent-ink); }
.mrow.empty { grid-template-columns: 1fr; text-align: center; color: var(--color-muted); font-size: var(--text-sm); min-height: 52px; border-bottom: 0; }
.mrow.anim { animation: rowIn var(--dur-long) var(--ease-out); }
@keyframes rowIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.board-foot { padding-top: var(--space-md); text-align: right; color: var(--color-muted); font-size: var(--text-sm); }
.board-foot b { font-size: var(--text-lg); color: var(--color-ink); }
.board--small { padding: var(--space-md) var(--space-lg); }
.board--small .mrow { min-height: 52px; }
.board--small .mrow b { font-size: var(--text-2xl); }

/* Parallax on scroll: native scroll-driven animations, decorative only.
   Progressive enhancement: browsers without support (or with reduced motion) keep the still layout, no JS fallback. */
@keyframes parallax-drift { to { translate: 0 var(--drift, 0); } }
@keyframes parallax-float { from { translate: 0 var(--float, 40px); } to { translate: 0 calc(-1 * var(--float, 40px)); } }
@supports ((animation-timeline: view()) and (animation-range: entry)) {
  @media (prefers-reduced-motion: no-preference) {
    .hero { view-timeline: --hero; }
    .window-light, .trays, .hero-stage .board, .label--hero, .hero-copy {
      animation: parallax-drift linear both;
      animation-timeline: --hero;
      animation-range: exit 0% exit 100%;
    }
    .window-light { --drift: 140px; }
    .trays { --drift: -30px; }
    .hero-copy { --drift: -50px; }
    .hero-stage .board { --drift: -100px; }
    .label--hero { --drift: -200px; }
    .band-visual, .label--record {
      animation: parallax-float linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
    .band-visual { --float: 36px; }
    .label--record { --float: 24px; }
    .label--record + .label--record { --float: 64px; }
  }
}

/* Ablauf: a sequence as plastic bands */
.bands { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-lg); }
.band { display: grid; grid-template-columns: 120px minmax(0, 1fr) minmax(0, 360px); gap: var(--space-xl); align-items: center; padding: var(--space-xl) var(--space-2xl); min-height: 220px; }
.band-no { font: 700 var(--text-display)/0.9 var(--font-display); letter-spacing: -0.04em; color: color-mix(in oklab, var(--t) 40%, var(--color-ink)); }
.band-text h3 { font-size: var(--text-2xl); }
.band-text p { margin-top: var(--space-sm); color: var(--color-ink-2); max-width: 52ch; }
.band-visual { justify-self: end; width: 100%; }
.label--mini { width: 240px; margin-left: auto; transform: rotate(2deg); }
.label--mini .label-no { font-size: 3rem; }
.mini-board { padding: var(--space-sm); border-radius: var(--radius-card); background: var(--color-screen); box-shadow: var(--shadow-lift); }
.mini-board .mrow { min-height: 52px; }
.mini-board .mrow b { font-size: var(--text-2xl); }
.mini-keys { display: grid; gap: var(--space-sm); padding: var(--space-md); border-radius: var(--radius-card); background: var(--color-screen); box-shadow: var(--shadow-lift); }
@media (max-width: 60rem) {
  .band { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); padding: var(--space-lg); }
  .band-no { font-size: var(--text-3xl); }
  .band-visual { justify-self: stretch; }
  .label--mini { margin-left: 0; }
}

/* Device keys (product samples) */
.key { display: grid; place-items: center; min-height: 48px; padding: 0 var(--space-sm); border-radius: var(--radius-input); background: linear-gradient(var(--glint), var(--color-paper)); box-shadow: inset 0 1px 0 var(--glint), 0 0 0 1px var(--color-rule-strong), 0 2px 0 var(--color-rule-strong); font-size: var(--text-sm); font-weight: 500; text-align: center; }
.key--primary { background: linear-gradient(var(--color-accent), var(--color-accent-deep)); color: var(--color-accent-ink); box-shadow: inset 0 1px 0 var(--color-accent-soft), 0 0 0 1px var(--color-accent-deep), 0 2px 0 var(--color-stamp); }
.key--done { background: linear-gradient(color-mix(in oklab, var(--glint) 40%, var(--p-thu)), var(--p-thu)); }

/* Demo in a tray */
.demo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--space-lg); margin: 0; align-items: start; }
.demo-panel { min-width: 0; }
.demo-kiosk, .demo-dispatch { display: flex; flex-direction: column; gap: var(--space-md); padding: var(--space-lg); border-radius: var(--radius-card); background: var(--color-screen); box-shadow: var(--shadow-lift); }
.panel-title { font: 500 var(--text-sm)/1.3 var(--font-body); letter-spacing: 0; color: var(--color-muted); max-width: none; }
.panel-hint { color: var(--color-ink-2); }
.demo-btns, .demo-actions { display: grid; gap: var(--space-sm); }
.label--demo { margin-top: var(--space-xs); transform: rotate(-1.5deg); animation: rowIn var(--dur-long) var(--ease-out); }
.label--demo .label-no { font-size: 3.25rem; padding-bottom: var(--space-md); }
.demo-current { padding: var(--space-md); border-radius: var(--radius-input); background: var(--color-paper-2); text-align: center; }
.demo-current small { display: block; font-size: var(--text-sm); color: var(--color-muted); }
.demo-current strong { font: 700 var(--text-3xl)/1.1 var(--font-display); font-variant-numeric: tabular-nums; }
.check { display: flex; align-items: center; gap: var(--space-xs); min-height: 44px; font-size: var(--text-sm); color: var(--color-ink-2); }
.check input, .chips input { width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--color-stamp); }
.demo-queue { margin-top: var(--space-md); }
.demo-queue small { display: block; margin-bottom: var(--space-xs); font-size: var(--text-sm); color: var(--color-muted); }
.queue-chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); font: 400 var(--text-sm)/1.4 var(--font-outlier); }
.chip { padding: var(--space-2xs) var(--space-sm); border-radius: var(--radius-pill); background: var(--color-screen); box-shadow: 0 0 0 1px var(--color-rule-strong); font-variant-numeric: tabular-nums; }
.chip.deferred { background: transparent; box-shadow: 0 0 0 1px var(--color-rule-strong); color: var(--color-muted); }
.demo-note { grid-column: 1 / -1; margin-top: 0; }
@media (max-width: 64rem) { .demo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .demo-monitor { grid-column: 1 / -1; } }
@media (max-width: 40rem) { .demo { grid-template-columns: minmax(0, 1fr); } .tray { padding: var(--space-md); } }

/* Facts as definition lists */
.facts { margin: 0; display: grid; }
.facts > div { padding-block: var(--space-md); border-top: 1px solid var(--color-rule); }
.facts > div:last-child { border-bottom: 1px solid var(--color-rule); }
.facts dt { color: var(--color-ink); }
.facts dd { margin: var(--space-2xs) 0 0; color: var(--color-ink-2); }

/* Proof beds: a plastic band under each product screen */
.proof-bed { display: grid; place-items: center; padding: var(--space-2xl) var(--space-xl); }

/* Dispatcher screen */
.dispatcher { display: flex; flex-direction: column; width: min(100%, 380px); overflow: hidden; border-radius: var(--radius-screen); }
.dsp-head { padding: var(--space-md); background: var(--color-ink-2); color: var(--color-on-band); text-align: center; font: 700 var(--text-lg)/1 var(--font-display); }
.dsp-current { padding: var(--space-lg) var(--space-md); text-align: center; background: var(--color-paper-2); }
.dsp-current small { display: block; font-size: var(--text-sm); color: var(--color-muted); }
.dsp-current strong { font: 700 5rem/1 var(--font-display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.dsp-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-xs); padding: var(--space-md); }
.dsp-grid .key { grid-column: span 2; }
.dsp-grid .key--wide { grid-column: span 6; }
.dsp-grid .key--half { grid-column: span 3; }
.dsp-foot { padding: var(--space-sm) var(--space-md); border-top: 1px solid var(--color-rule); font-size: var(--text-sm); color: var(--color-ink-2); text-align: center; }
.split-proof > figcaption { text-align: center; }

/* Counter screen: the real counter turns orange past its warning threshold */
.counter { display: grid; place-items: center; align-content: center; gap: var(--space-xs); width: 100%; aspect-ratio: 4 / 3; border-radius: var(--radius-screen); background: var(--color-accent); color: var(--color-accent-ink); text-align: center; }
.counter small, .counter span { font-size: var(--text-lg); font-weight: 500; }
.counter strong { font: 700 clamp(7rem, 12vw, 11rem)/1 var(--font-display); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }

/* Hardware family: the owner's product render, transparent PNG on the paper */
.hw-family { margin: 0 0 var(--space-2xl); text-align: center; }
.hw-family img { width: 100%; max-width: 1200px; height: auto; margin-inline: auto; }
.hw-family figcaption { margin-top: var(--space-md); }

/* Hardware table on a lifted sheet */
.table-wrap { padding: var(--space-md) var(--space-xl); }
.hw-table { width: 100%; border-collapse: collapse; }
.hw-table th, .hw-table td { padding: var(--space-lg) var(--space-lg) var(--space-lg) 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--color-rule); }
.hw-table tbody tr:last-child > * { border-bottom: 0; }
.hw-table thead th { padding-block: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); white-space: nowrap; }
.hw-table tbody th { width: 24%; font: 700 var(--text-title)/1.15 var(--font-display); letter-spacing: -0.02em; }
.hw-table td:nth-child(2) { width: 44%; color: var(--color-ink-2); }
.hw-table td:last-child { padding-right: 0; font-size: var(--text-sm); }
.hw-note { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xl); margin-top: var(--space-2xl); }
.hw-note p { max-width: 60ch; color: var(--color-ink-2); }
.hw-note b { color: var(--color-ink); }
@media (max-width: 60rem) {
  .table-wrap { padding: var(--space-xs) var(--space-lg); }
  .hw-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .hw-table, .hw-table tbody, .hw-table tr, .hw-table th, .hw-table td { display: block; width: 100%; }
  .hw-table tr { padding-block: var(--space-lg); border-bottom: 1px solid var(--color-rule); }
  .hw-table tbody tr:last-child { border-bottom: 0; }
  .hw-table th, .hw-table td, .hw-table tbody th, .hw-table td:nth-child(2) { width: auto; padding: 0; border: 0; }
  .hw-table td { margin-top: var(--space-xs); }
  .hw-note { flex-direction: column; align-items: flex-start; gap: var(--space-md); }
}

/* The ink band: privacy, a record as labels */
.band-ink { background: var(--color-band); color: var(--color-on-band); }
.band-ink h2 { color: var(--color-on-band); }
.band-ink .lead { color: var(--color-on-band-2); }
.facts--ink > div { border-color: var(--color-ink-2); }
.facts--ink dt { color: var(--color-on-band); }
.facts--ink dd { color: var(--color-on-band-2); }
.labels { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-lg); align-items: start; }
.labels figcaption { grid-column: 1 / -1; color: var(--color-on-band-2); }
.label--record { transform: rotate(-2deg); }
.label--record + .label--record { transform: rotate(2.5deg); margin-top: var(--space-2xl); }
.label--done .label-no { color: var(--color-muted); }
@media (max-width: 40rem) { .labels { grid-template-columns: minmax(0, 1fr); } .label--record + .label--record { margin-top: 0; } }

/* Industries: rows */
.rows-head { margin-bottom: var(--space-2xl); }
.rows { list-style: none; margin: 0; padding: 0; }
.rows li { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); padding-block: var(--space-xl); border-top: 1px solid var(--color-rule-strong); }
.rows li:last-child { border-bottom: 1px solid var(--color-rule-strong); }
.rows h3 { grid-column: 1 / span 5; font-size: var(--text-2xl); }
.rows p { grid-column: 6 / span 7; color: var(--color-ink-2); max-width: 62ch; }
@media (max-width: 60rem) { .rows h3, .rows p { grid-column: 1 / -1; } .rows p { margin-top: var(--space-xs); } }

/* FAQ */
.faq-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-xl); align-items: start; }
.faq-grid h2 { grid-column: 1 / span 4; position: sticky; top: calc(var(--nav-height) + var(--space-lg)); }
.faq { grid-column: 6 / span 7; }
.faq details { border-top: 1px solid var(--color-rule-strong); }
.faq details:last-child { border-bottom: 1px solid var(--color-rule-strong); }
.faq summary { position: relative; display: flex; align-items: center; min-height: 68px; padding: var(--space-md) var(--space-2xl) var(--space-md) 0; font: 500 var(--text-lg)/1.3 var(--font-body); cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: var(--space-xs); top: 50%; transform: translateY(-50%); font: 400 var(--text-2xl)/1 var(--font-outlier); color: var(--color-stamp); transition: transform var(--dur-short) var(--ease-out); }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq summary:hover { color: var(--color-ink-2); }
.faq details p { padding-bottom: var(--space-lg); color: var(--color-ink-2); }
@media (max-width: 60rem) { .faq-grid h2, .faq { grid-column: 1 / -1; } .faq-grid h2 { position: static; } }

/* Contact form in a tray */
.contact-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-lg) var(--space-md); }
.field { display: flex; flex-direction: column; gap: var(--space-xs); min-width: 0; }
.full { grid-column: 1 / -1; }
.field label, .interest legend { font-size: var(--text-sm); font-weight: 500; }
.field input:not([type="checkbox"]), .field select, .field textarea { min-height: 52px; padding: var(--space-sm) var(--space-md); border: 1px solid var(--color-muted); border-radius: var(--radius-input); background: var(--color-screen); color: var(--color-ink); font-size: var(--text-md); outline: 2px solid transparent; outline-offset: -3px; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline-color: var(--color-focus); }
.field input[aria-invalid], .field input.invalid { border-color: var(--color-error); }
.interest { border: 0; padding: 0; margin: 0; }
.interest legend { padding: 0; margin-bottom: var(--space-xs); }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.chips label { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 44px; padding: 0 var(--space-md); border-radius: var(--radius-input); background: linear-gradient(var(--glint), var(--color-paper)); box-shadow: inset 0 1px 0 var(--glint), 0 0 0 1px var(--color-rule-strong), 0 2px 0 var(--color-rule-strong); font-size: var(--text-sm); cursor: pointer; }
.chips label:has(input:checked) { background: var(--color-accent-soft); box-shadow: inset 0 1px 0 var(--glint), 0 0 0 1px var(--color-accent-deep), 0 2px 0 var(--color-accent-deep); }
.chips label:has(input:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.consent { align-items: flex-start; }
.consent input { margin-top: var(--space-2xs); }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); }
.form-msg { min-height: 1lh; font-size: var(--text-sm); color: var(--color-muted); }
.form-msg.error { color: var(--color-error); }
@media (max-width: 40rem) { .contact-form { grid-template-columns: minmax(0, 1fr); } }

/* Footer: mast */
.site-footer { padding-block: var(--space-3xl) var(--space-xl); background: var(--grain), var(--color-paper-3); color: var(--color-ink-2); }
.footer-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--space-lg) var(--space-xl); }
.footer-mark { grid-column: 1 / -1; padding-bottom: var(--space-lg); font: 700 clamp(4.5rem, 14vw, 12rem)/1 var(--font-display); letter-spacing: -0.05em; color: var(--color-ink); }
.footer-nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-lg); }
.footer-nav a { color: var(--color-ink); text-decoration: none; }
.footer-nav a:hover { text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; }
.copy { font-size: var(--text-sm); }
@media (max-width: 40rem) { .footer-inner { grid-template-columns: minmax(0, 1fr); } }

/* Legal pages */
.toc { margin-bottom: var(--space-xl); padding: var(--space-md) var(--space-lg); border-radius: var(--radius-input); background: var(--color-paper-2); }
.toc ol { margin: 0; padding-left: var(--space-lg); columns: 2; column-gap: var(--space-xl); font-size: var(--text-sm); }
.toc li { break-inside: avoid; padding-block: var(--space-3xs); }
.toc a { color: var(--color-ink); text-decoration-color: var(--color-rule-strong); }
.toc a:hover { text-decoration-color: var(--color-accent); }
@media (max-width: 40rem) { .toc ol { columns: 1; } }
.legal { padding-block: var(--space-xl) var(--section-gap); }
.legal .container > * { max-width: 60ch; }
.legal h1 { font-size: var(--text-display-s); max-width: 20ch; margin-bottom: var(--space-lg); }
.legal h2 { font-size: var(--text-xl); max-width: 40ch; margin-top: var(--space-xl); margin-bottom: var(--space-xs); }
.legal p { color: var(--color-ink-2); line-height: 1.7; }
.legal p + p { margin-top: var(--space-sm); }
.todo { padding: var(--space-md) var(--space-lg); border-radius: var(--radius-input); background: var(--color-accent-soft); color: var(--color-ink); }

/* Consent banner: a small non-modal bar (dialog popover="manual"), equal-weight choices */
.consent { margin: 0; padding: var(--space-sm) var(--space-lg); border: 0; border-radius: var(--radius-card); background: var(--grain), var(--color-screen); color: var(--color-ink); box-shadow: var(--shadow-lift), 0 0 0 1px var(--color-rule); }
.consent:is(:popover-open, [open]) { position: fixed; inset: auto var(--space-md) var(--space-md) var(--space-md); z-index: var(--z-modal); display: flex; align-items: center; gap: var(--space-lg); width: auto; max-width: 1120px; margin-inline: auto; }
.consent-body { flex: 1; min-width: 0; font-size: var(--text-sm); }
.consent-body p { color: var(--color-ink-2); max-width: 80ch; }
.consent-body strong { color: var(--color-ink); font-weight: 500; }
.consent-body a { color: var(--color-ink); text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; }
.consent-details summary { display: inline-flex; align-items: center; min-height: 32px; cursor: pointer; font-weight: 500; text-decoration: underline; text-decoration-color: var(--color-rule-strong); text-underline-offset: 0.25em; }
.consent-options { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs) var(--space-lg); padding-bottom: var(--space-2xs); }
.consent-options .check { min-height: 36px; }
.consent-actions { display: flex; gap: var(--space-sm); flex-shrink: 0; }
.consent-actions .btn { min-height: 44px; }
@media (max-width: 60rem) {
  .consent:is(:popover-open, [open]) { flex-direction: column; align-items: stretch; gap: var(--space-xs); inset: auto var(--space-xs) var(--space-xs) var(--space-xs); padding: var(--space-sm) var(--space-md); }
  .consent-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Footer and inline button that reopen the consent settings */
.footer-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; font: inherit; color: var(--color-ink); cursor: pointer; }
.inline-button { padding: 0; border: 0; background: none; font: inherit; color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; text-underline-offset: 0.16em; cursor: pointer; }
.inline-button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.footer-link:hover { text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; }
.footer-link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }