/*
 * ZeitWerk design tokens: the ONE source of colour for every web surface
 * (docs/design/design-system.md §2, binding from 2026-11-09; ZEIT-171).
 * Imported by web/admin, web/clock and web/site. No colour value may appear in
 * those apps' CSS outside this file (scripts/check-tokens.mjs enforces it).
 *
 * Theme (§7): light by default. Dark applies only when <html data-theme="dark">
 * is set by the sun/moon toggle; there is deliberately no prefers-color-scheme
 * query, so every surface opens light.
 *
 * Contrast (WCAG 2.2, measured): --text-3 >= 4.64:1 on --bg and --bg-alt;
 * --border-input >= 4.15:1 (1.4.11); --accent 5.95-8.26:1 on the pages; the
 * primary button 21:1; stamp buttons with white text 5.98:1 / 6.50:1.
 */
:root {
  color-scheme: light;

  /* §2 tokens (light) */
  --bg: #ffffff;
  --bg-alt: #f6f7f9;
  --surface: #ffffff;
  --text: #101828;
  --text-2: #475467;
  --text-3: #667085;
  --accent: #2a4fe0;
  --button-bg: #000000;
  --button-fg: #ffffff;
  --border-input: #737c8c;
  --border-deco: #e4e7ec;
  --ok: #067647;
  --danger: #b42318;
  --warn: #b54708;
  --clock-in: #0a7333;
  --clock-out: #b52417;

  /* Tints for status chips and selection backgrounds (§6: "tinted background plus
     text and an icon"); never used for text. */
  --accent-tint: #eef3ff;
  --accent-tint-2: #dbe5ff;
  --ok-tint: #ecfdf3;
  --warn-tint: #fffaeb;
  --danger-tint: #fef3f2;

  /* Fixed colours that do not follow the theme: text on filled status/stamp
     buttons, and printed letters (PIN and reminder letters are always paper). */
  --on-fill: #ffffff;
  /* Text on a --danger fill (destructive buttons): white on #b42318 is 6.57:1, but
     white on the dark-theme #f97066 is only 2.79:1, so dark switches to #0b0f17 (6.88:1). */
  --on-danger: #ffffff;
  /* Text on an --accent fill (badges, today's date): white on #2a4fe0 is 6.38:1;
     on the dark-theme #8ea6ff it would be 2.32:1, so dark uses #0b0f17 (8.26:1). */
  --on-accent: #ffffff;
  --paper: #ffffff;
  --ink: #101828;
  --ink-2: #667085;
  --scrim: rgb(16 24 40 / 45%);

  /* Data visualisation: six distinguishable category colours (planner, absences). */
  --cat-0: #3b63f6;
  --cat-1: #f79009;
  --cat-2: #12b76a;
  --cat-3: #7a5af8;
  --cat-4: #ee46bc;
  --cat-5: #06aed4;

  /* §4 typography and §6 layout */
  --font: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;
  --radius-button: 12px;
  --radius-card: 20px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --shadow-card: 0 1px 3px rgb(16 24 40 / 8%), 0 1px 2px rgb(16 24 40 / 4%);
  --motion: 160ms;
}

[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0b0f17;
  --bg-alt: #121826;
  --surface: #121826;
  --text: #eef1f6;
  --text-2: #b4bdcc;
  --text-3: #8b96a8;
  --accent: #8ea6ff;
  --button-bg: #ffffff;
  --button-fg: #000000;
  --border-input: #6e7b92;
  --border-deco: #232c3e;
  --ok: #47cd89;
  --danger: #f97066;
  --warn: #fdb022;
  /* --clock-in / --clock-out: the same in both themes (§2). */

  --accent-tint: #172447;
  --accent-tint-2: #1d2f5e;
  --ok-tint: #0c2a1c;
  --warn-tint: #2d1f05;
  --danger-tint: #2f1210;
  --scrim: rgb(0 0 0 / 60%);
  --on-danger: #0b0f17;
  --on-accent: #0b0f17;

  /* §6: dark mode uses a 1 px border instead of a shadow. */
  --shadow-card: 0 0 0 1px var(--border-deco);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion: 0ms;
  }
}

/* Public website (ZEIT-162), ported from the ZEIT-167 prototype (docs/design/zeit-167-landing-prototype.html):
   one 1120px column; alternating white / tinted full-width bands.
   Colours come ONLY from web/shared/tokens.css (design system §2, ZEIT-171), which
   scripts/build.mjs puts in front of this file; light by default, dark only via
   the toggle's data-theme. This file keeps the site's type scale and layout sizes
   (benchmark §7.5) and no colour values (scripts/check-tokens.mjs). */
:root {
  --font: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, sans-serif;
  --type-display: clamp(2.25rem, 1.4rem + 3vw, 3.75rem);
  --type-title-1: clamp(2rem, 1.5rem + 2vw, 3rem);
  --type-title-2: 1.375rem;
  --type-lead: 1.3125rem;
  --type-body: 1.0625rem;
  --type-callout: 1rem;
  --type-footnote: .8125rem;
  --type-caption: .75rem;

  --header-h: 64px;
  --r-btn: 12px; --r-card: 20px; --r-media: 28px;
}
@media (prefers-contrast: more) {
  :root { --text-2: var(--text); --border-input: var(--text-3); }
}

* { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--header-h) + 16px); scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: 0ms !important; animation: none !important; } }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 var(--type-body)/1.47 var(--font);
  -webkit-font-smoothing: antialiased;
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--bg); }
.num, .price, time { font-variant-numeric: tabular-nums; }
h1, h2, h3 { text-wrap: balance; margin: 0; overflow-wrap: break-word; }
@media (max-width: 480px) { h2 { hyphens: auto; } }
p { margin: 0; }
a { color: var(--accent); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px;
}

.wrap {
  max-width: 1120px; margin: 0 auto;
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
}
.band { padding-block: 96px; }
.band.alt { background: var(--bg-alt); }
@media (max-width: 767px) { .band { padding-block: 64px; } }

.skip { position: absolute; left: 16px; top: -100px; z-index: 50; background: var(--button-bg); color: var(--button-fg); padding: 12px 16px; border-radius: var(--r-btn); font-weight: 600; text-decoration: none; }
.skip:focus { top: calc(env(safe-area-inset-top, 0px) + 8px); }

/* Prototype note */
.proto { background: var(--accent-tint); color: var(--text-2); font-size: var(--type-footnote); }
.proto .wrap { padding-block: 8px; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.proto strong { color: var(--text); }

/* Header */
header.site {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--border-deco);
}
header.site .wrap { height: var(--header-h); display: flex; align-items: center; gap: 24px; }
.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-weight: 700; font-size: 1.1875rem; letter-spacing: -.01em; min-height: 44px; }
/* The ZE:T WERK mark (design system §5): black on white, so it keeps its own
   white tile (--paper) in dark mode, like an app icon; 22 % corner radius. */
.mark { display: block; flex: none; border-radius: 22%; background: var(--paper); box-shadow: 0 0 0 1px var(--border-deco); }
.fmark { margin: 0 0 32px; }
nav.primary { display: flex; gap: 4px; }
nav.primary a, .hdr-link { color: var(--text); text-decoration: none; font: 500 var(--type-callout)/1 var(--font); padding: 14px 10px; border-radius: 8px; }
nav.primary a:hover, .hdr-link:hover { color: var(--accent); }
.spacer { flex: 1; }
.lang { display: inline-flex; align-items: center; font: 500 var(--type-footnote)/1 var(--font); color: var(--text-3); }
.lang a { color: var(--text-3); text-decoration: none; min-width: 44px; min-height: 44px; display: inline-grid; place-items: center; border-radius: 8px; }
.lang a[aria-current="page"] { color: var(--text); font-weight: 700; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px; border-radius: var(--r-btn);
  background: var(--button-bg); color: var(--button-fg);
  font: 500 var(--type-callout)/1.2 var(--font); text-decoration: none; border: 0; cursor: pointer;
  transition: opacity .15s ease-out;
}
/* Design system §3: hover 85 %, pressed 75 %, disabled 35 % of the fill (a
   brightness filter does nothing on the black brand button). */
.btn:hover { opacity: .85; }
.btn:active { opacity: .75; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .35; cursor: not-allowed; }
.btn.sm { min-height: 44px; padding: 0 16px; }
.textlink { font: 500 var(--type-callout)/1.2 var(--font); color: var(--accent); text-decoration: none; display: inline-flex; align-items: center; min-height: 48px; gap: 6px; }
.textlink:hover { text-decoration: underline; }
.menu-btn { display: none; background: none; border: 0; color: var(--text); width: 44px; height: 44px; border-radius: 10px; cursor: pointer; }
.btn-short { display: none; }
@media (max-width: 959px) {
  nav.primary, .hdr-desktop { display: none; }
  .menu-btn { display: inline-grid; place-items: center; }
  .btn-long { display: none; } .btn-short { display: inline; }
  header.site .wrap { gap: 8px; }
}

/* Hero */
.hero { padding-block: 72px 96px; position: relative; overflow: hidden; isolation: isolate; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 48px; align-items: center; }
@media (max-width: 959px) { .hero .wrap { grid-template-columns: minmax(0, 1fr); gap: 56px; } .hero { padding-block: 40px 64px; } }
.eyebrow { font: 600 var(--type-caption)/1.33 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; }
.hero h1 { font-size: var(--type-display); line-height: 1.05; font-weight: 700; letter-spacing: -.022em; }
.hero h1 .l2 { display: block; color: var(--text-2); margin-top: .12em; }
.lead { font-size: var(--type-lead); line-height: 1.43; color: var(--text-2); max-width: 34em; }
.hero .lead { margin-top: 24px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; margin-top: 32px; }
.micro { font-size: var(--type-footnote); color: var(--text-3); margin-top: 10px; }
.priceline { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--border-deco); font-size: var(--type-callout); color: var(--text); display: flex; flex-wrap: wrap; gap: 4px 14px; }
.priceline strong { font-weight: 700; }
.priceline .dot { color: var(--text-3); }
sup a { text-decoration: none; font-size: .75em; padding: 0 2px; }

/* Fact strip */
.facts { border-top: 1px solid var(--border-deco); border-bottom: 1px solid var(--border-deco); }
.facts .wrap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fact { padding: 32px 24px; display: flex; flex-direction: column; gap: 8px; }
.fact + .fact { border-left: 1px solid var(--border-deco); }
.fact svg { color: var(--accent); }
.fact h3 { font-size: var(--type-callout); font-weight: 600; line-height: 1.3; }
.fact p { font-size: .9375rem; color: var(--text-2); line-height: 1.45; }
.fact a { font-size: var(--type-footnote); font-weight: 500; margin-top: auto; padding-top: 6px; }
@media (max-width: 959px) {
  .facts .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fact:nth-child(3) { border-left: 0; }
  .fact:nth-child(n+3) { border-top: 1px solid var(--border-deco); }
}
@media (max-width: 560px) {
  .facts .wrap { grid-template-columns: minmax(0, 1fr); }
  .fact, .fact + .fact { border-left: 0; padding: 24px 0; }
  .fact + .fact { border-top: 1px solid var(--border-deco); }
}

/* Section heads */
.sec-head { max-width: 760px; margin-bottom: 48px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.sec-head h2 { font-size: var(--type-title-1); line-height: 1.1; font-weight: 700; letter-spacing: -.02em; }

/* Three ways */
.ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 959px) { .ways { grid-template-columns: minmax(0, 1fr); } }
.way { display: grid; gap: 20px; align-content: start; }
.way h3 { font-size: var(--type-title-2); font-weight: 600; letter-spacing: -.01em; }
.way p { color: var(--text-2); }
.foot-line { margin-top: 32px; color: var(--text-3); font-size: var(--type-footnote); }

/* Law */
.law-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 959px) { .law-cards { grid-template-columns: minmax(0, 1fr); } }
.law { background: var(--surface); border-radius: var(--r-card); padding: 32px; display: grid; gap: 10px; align-content: start; border: 1px solid var(--border-deco); }
.law .term { font: 600 var(--type-caption)/1.33 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.law h3 { font-size: var(--type-title-2); font-weight: 600; letter-spacing: -.01em; }
.law p { color: var(--text-2); }
.sources { margin-top: 28px; font-size: var(--type-footnote); color: var(--text-3); }
.sources a { color: var(--text-3); }

/* PDF */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
@media (max-width: 959px) { .split { grid-template-columns: minmax(0, 1fr); gap: 40px; } }
.split .sec-head { margin-bottom: 0; }
.checks { display: grid; gap: 12px; margin-top: 28px; }
.checks li { display: flex; gap: 12px; align-items: start; }
.checks svg { flex: none; color: var(--ok); margin-top: 3px; }
ul.checks { list-style: none; padding: 0; margin: 28px 0 0; }

/* Works council */
.wc-items { list-style: none; padding: 0; margin: 28px 0 32px; display: grid; gap: 0; border-top: 1px solid var(--border-deco); }
.wc-items li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--border-deco); }
.wc-items svg { color: var(--accent); margin-top: 2px; }
.wc-items b { display: block; }
.wc-items span { color: var(--text-2); font-size: .9375rem; }
/* Privacy */
.privacy { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 64px; align-items: center; }
@media (max-width: 959px) { .privacy { grid-template-columns: minmax(0, 1fr); gap: 40px; } }
.pts { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--border-deco); }
.pts li { padding: 18px 0; border-bottom: 1px solid var(--border-deco); display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; }
.pts svg { color: var(--accent); margin-top: 2px; }
.pts b { display: block; }
.pts span { color: var(--text-2); font-size: .9375rem; }
.diagram { width: 100%; max-width: 440px; justify-self: center; }
.diagram text { font-family: var(--font); }

/* Steps */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; counter-reset: s; }
@media (max-width: 959px) { .steps { grid-template-columns: minmax(0, 1fr); } }
.steps li { counter-increment: s; display: grid; gap: 10px; align-content: start; padding-top: 24px; border-top: 2px solid var(--text); }
.steps li::before { content: counter(s); font-size: 2.5rem; font-weight: 700; letter-spacing: -.02em; line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; }
.steps h3 { font-size: var(--type-title-2); font-weight: 600; }
.steps p { color: var(--text-2); }

/* Pricing */
.price-wrap { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 24px; align-items: stretch; }
@media (max-width: 959px) { .price-wrap { grid-template-columns: minmax(0, 1fr); } }
.card { background: var(--surface); border: 1px solid var(--border-deco); border-radius: var(--r-card); padding: 32px; box-shadow: var(--shadow-card); }
.card h3 { font-size: var(--type-title-2); font-weight: 600; }
.plans { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-top: 24px; }
@media (max-width: 480px) { .plans { grid-template-columns: minmax(0, 1fr); } }
.plan { border: 1px solid var(--border-deco); border-radius: 14px; padding: 20px; display: grid; gap: 4px; }
.plan .label { font-size: var(--type-footnote); color: var(--text-2); font-weight: 600; }
.plan .amount { font-size: 2.5rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.plan .per { font-size: var(--type-footnote); color: var(--text-2); }
.never { list-style: none; padding: 0; margin: 24px 0 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 16px; }
@media (max-width: 480px) { .never { grid-template-columns: minmax(0, 1fr); } }
.never li { display: flex; gap: 10px; align-items: start; font-size: .9375rem; }
.never svg { flex: none; color: var(--ok); margin-top: 3px; }
.pay { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border-deco); font-size: var(--type-footnote); color: var(--text-2); }
.card .btn { margin-top: 24px; }
/* FAQ */
.faq { max-width: 820px; border-top: 1px solid var(--border-deco); }
.faq details { border-bottom: 1px solid var(--border-deco); }
.faq summary { min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; font-weight: 600; font-size: 1.0625rem; list-style: none; padding: 12px 0; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-weight: 400; font-size: 1.5rem; color: var(--text-3); flex: none; }
.faq details[open] summary::after { content: "–"; }
.faq details p { color: var(--text-2); padding: 0 0 20px; max-width: 64ch; }

/* Closing */
.closing { text-align: center; }
.closing .wrap { display: grid; justify-items: center; gap: 16px; }
.closing h2 { font-size: var(--type-title-1); font-weight: 700; letter-spacing: -.02em; }
.closing .cta-row { justify-content: center; margin-top: 16px; }

/* Footer */
footer.site { border-top: 1px solid var(--border-deco); padding-block: 56px 32px; font-size: .9375rem; }
.fcols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
@media (max-width: 767px) { .fcols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 400px) { .fcols { grid-template-columns: minmax(0, 1fr); } }
.fcols .fh { font-size: var(--type-footnote); font-weight: 600; color: var(--text); margin-bottom: 12px; }
.fcols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.fcols a { color: var(--text-2); text-decoration: none; display: inline-flex; min-height: 32px; align-items: center; }
.fcols a:hover { color: var(--accent); text-decoration: underline; }
.fbottom { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--border-deco); display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; color: var(--text-3); font-size: var(--type-footnote); }
.footnotes { margin-top: 24px; color: var(--text-3); font-size: var(--type-footnote); }
.footnotes ol { margin: 0; padding-left: 18px; }

/* ZEIT-162 port: classes for the prototype's inline styles (the strict CSP
   allows no style attribute), and single-column layouts while the device
   captures and the calculator (part 2c) are not there yet. */
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hero .wrap.solo { grid-template-columns: minmax(0, 1fr); max-width: 1120px; }
.hero .wrap.solo > div { max-width: 820px; }
.textlink.start { align-self: flex-start; }
.sec-head.flush { margin-bottom: 0; }
.sec-head.tight { margin-bottom: 32px; }
.honest { margin-top: 24px; color: var(--text-2); }
.pay.net { border: 0; padding: 0; margin-top: 10px; }
.legal .sec-head { margin-bottom: 24px; }
.imprint-block { margin-top: 28px; max-width: 42rem; }
.imprint-block h2 { font-size: var(--type-title-2); line-height: 1.27; font-weight: 600; margin-bottom: 8px; }

/* Part 2c: progressive enhancement driven by /site.<hash>.js (menu sheet,
   price calculator, light/dark toggle). Without script these stay hidden and
   the page is complete: the menu link goes to the footer navigation. */
/* Mobile sheet */
.sheet {
  position: fixed; inset: 0; z-index: 40; background: var(--bg);
  padding: calc(env(safe-area-inset-top, 0px) + 12px) max(20px, env(safe-area-inset-right, 0px)) calc(env(safe-area-inset-bottom, 0px) + 24px) max(20px, env(safe-area-inset-left, 0px));
  display: flex; flex-direction: column; gap: 8px;
  transform: translateY(-8px); opacity: 0; transition: transform .25s ease-out, opacity .25s ease-out;
}
.sheet.open { transform: none; opacity: 1; }
.sheet-top { display: flex; justify-content: space-between; align-items: center; height: 52px; }
.sheet nav { display: flex; flex-direction: column; border-top: 1px solid var(--border-deco); margin-top: 8px; }
.sheet nav a { color: var(--text); text-decoration: none; font-size: 1.375rem; font-weight: 600; padding: 14px 0; border-bottom: 1px solid var(--border-deco); }
.sheet .btn { margin-top: 16px; }


.calc { background: var(--bg-alt); border-radius: var(--r-card); padding: 32px; display: grid; gap: 16px; align-content: start; }
.calc label { font-weight: 600; }
.calc input { width: 100%; min-height: 48px; padding: 0 14px; font: 600 1.25rem var(--font); font-variant-numeric: tabular-nums; color: var(--text); background: var(--bg); border: 1px solid var(--border-input); border-radius: var(--r-btn); }
.calc-out { display: grid; gap: 12px; }
.calc-out div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border-deco); }
.calc-out dt { color: var(--text-2); font-size: .9375rem; }
.calc-out dd { margin: 0; font-weight: 700; font-size: 1.25rem; }
.calc .hint { font-size: var(--type-footnote); color: var(--text-3); }

.theme-toggle { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 10px; background: none; color: var(--text); cursor: pointer; }
.theme-toggle .moon { display: none; }
:root[data-theme="dark"] .theme-toggle .sun { display: none; }
:root[data-theme="dark"] .theme-toggle .moon { display: inline; }
.sheet .theme-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
.sheet .lang { gap: 8px; }
.price-wrap:has(.calc[hidden]) { grid-template-columns: minmax(0, 1fr); max-width: 640px; }
/* The hidden attribute wins over component display rules (toggle, calculator,
   sheet stay hidden until the script reveals them). */
[hidden] { display: none !important; }
/* Narrow phones: the header carries logo, trial button, theme toggle and menu
   button; tighter spacing keeps it inside 320 px (WCAG 1.4.10). */
@media (max-width: 380px) {
  header.site .wrap { gap: 4px; }
  .btn.sm { padding: 0 12px; }
}
/* The header carries nav, language, theme toggle, sign-in and the trial button:
   button labels never wrap, and the gaps tighten before the phone layout. */
.btn { white-space: nowrap; }
/* Below 320 px the header's short trial label may wrap rather than push the page
   sideways (WCAG 1.4.10). Since part 2e the 40 px mark leaves room for one line at 320 px. */
@media (max-width: 319px) { header.site .btn.sm { white-space: normal; text-align: center; line-height: 1.15; } }
@media (max-width: 1180px) and (min-width: 960px) {
  header.site .wrap { gap: 12px; }
  nav.primary a { padding-inline: 8px; }
}

/* ---- Part 2d (ZEIT-162): hero video, real device captures, people band ----
   Colours only from web/shared/tokens.css (design system §2): the veil is
   --bg at 85 % (so every text token keeps >= 4.5:1 on the brightest and the
   darkest frame), device frames are --ink with a --border-deco edge (visible
   in both themes), screens are --paper because the captures are light UI. */
.hero-media { position: absolute; inset: 0; z-index: -1; }
.hero-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity .8s ease-in-out; }
.hero-media video.is-on { opacity: 1; }
.hero-media::after { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--bg) 85%, transparent); }
@media (prefers-reduced-motion: reduce) { .hero-media video { transition: none; } }
.hero-pause {
  position: absolute; z-index: 2; right: max(20px, env(safe-area-inset-right, 0px)); bottom: 20px;
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px;
  border-radius: 999px; border: 1px solid var(--border-input); background: var(--bg); color: var(--text);
  font: 500 var(--type-footnote)/1 var(--font); cursor: pointer;
}
.hero-pause:hover { opacity: .85; }
.hero-pause:active { opacity: .75; }
.hero-pause svg { flex: none; }

.devices { display: flex; align-items: flex-end; justify-content: center; }
.ipad, .iphone { position: relative; background: var(--ink); box-shadow: var(--shadow-card); outline: 1px solid var(--border-deco); }
.ipad { order: 2; flex: 0 0 52%; aspect-ratio: 3 / 4; margin-bottom: 6%; border-radius: 30px; padding: 14px; }
.iphone { order: 1; flex: 0 0 38%; margin-right: -6%; aspect-ratio: 9 / 19.2; border-radius: 40px; padding: 10px; z-index: 2; }
.ipad .scr, .iphone .scr { height: 100%; overflow: hidden; background: var(--paper); }
.ipad .scr { border-radius: 18px; }
.iphone .scr { border-radius: 31px; }
/* contain, not cover: the captures keep their own margins (no text cut at the frame edge). */
.devices .real { width: 100%; height: 100%; object-fit: contain; object-position: top; display: block; }
@media (max-width: 959px) { .devices { max-width: 560px; width: 100%; margin: 0 auto; } }
@media (max-width: 480px) {
  .ipad { border-radius: 18px; padding: 7px; } .ipad .scr { border-radius: 14px; }
  .iphone { border-radius: 26px; padding: 6px; } .iphone .scr { border-radius: 22px; }
}

.people-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 959px) { .people-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .people-grid { grid-template-columns: minmax(0, 1fr); } }
.people-grid figure { margin: 0; display: grid; gap: 10px; }
.people-grid img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-card); background: var(--bg-alt); }
.people-grid figcaption { font-weight: 600; }
.people + .band { padding-top: 0; }

.way .shot { height: 260px; border-radius: var(--r-card); background: var(--bg-alt); display: grid; place-items: center; overflow: hidden; }
.mini-phone, .mini-pad { background: var(--ink); outline: 1px solid var(--border-deco); }
.mini-phone { width: 120px; height: 230px; margin-top: 60px; border-radius: 26px; padding: 6px; }
.mini-pad { width: 170px; height: 226px; margin-top: 40px; border-radius: 20px; padding: 8px; }
.mini-real { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; background: var(--paper); }
.mini-phone .mini-real { border-radius: 21px; }
.mini-pad .mini-real { border-radius: 13px; }
.mini-win { width: 270px; height: 190px; margin-top: 60px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border-deco); box-shadow: var(--shadow-card); overflow: hidden; }
.mini-win .bar { height: 24px; background: var(--bg-alt); display: flex; gap: 5px; align-items: center; padding: 0 9px; border-bottom: 1px solid var(--border-deco); }
.mini-win .bar i { width: 7px; height: 7px; border-radius: 50%; background: var(--border-deco); }
.mini-win .body { padding: 18px; display: grid; gap: 10px; }
.sk { height: 9px; border-radius: 5px; background: var(--border-deco); }
.sk.w80 { width: 80%; } .sk.w55 { width: 55%; }
.sk.b { height: 30px; border-radius: 9px; background: var(--button-bg); }