/* Ordo website – shared styles. Same tokens as the app (packages/app/src/styles.css): cool neutral greys, one blue
   accent, solid colours only. Wide pages, open layouts instead of rows of boxes, and isometric scenes (iso.js) that
   carry most of the explaining. No external fonts or scripts, no tracking. */
:root {
  --bg: #f5f5f7;
  --surface: #ffffff;
  --surface-2: #f0f1f5;
  --border: #e3e4ea;
  --hairline: rgb(0 0 0 / 0.07);
  --text: #1d1d1f;
  --muted: #6b6b72;
  --accent: #0a5fe0;
  --accent-hover: #0b4fb8;
  --accent-text: #0a5fe0;
  --accent-soft: #eaf2ff;
  --on-accent: #ffffff;
  --ok: #34c759;
  --glass: rgb(245 245 247 / 0.82);
  --shadow-card: 0 1px 2px rgb(0 0 0 / 0.03), 0 4px 16px -8px rgb(0 0 0 / 0.06);
  --shadow-pop: 0 24px 60px -24px rgb(0 0 0 / 0.18), 0 4px 14px rgb(0 0 0 / 0.04);
  --font: "Geist Variable", "Geist", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI Variable", "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
  --mono: "Cascadia Code", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --mono-font: ui-monospace, "Cascadia Code", "JetBrains Mono", SFMono-Regular, Menlo, Consolas, monospace;
  /* the isometric scenes (iso.js) – change these and every scene recolours */
  --iso-ground: #e9ecf1;
  --iso-floor: #ffffff;
  --iso-floor-room: #ffffff;
  --iso-floor-work: #f0f2f6;
  --iso-wall: #eceef3;
  --iso-desk: #f1f2f6;
  --iso-metal: #d9dde5;
  --iso-binder: #dfe3ea;
  --iso-soft: #c3cad6;
  --iso-dark: #2d3340;
  --iso-dark-2: #3a414f;
  --iso-paper: #ffffff;
  --iso-accent: #0a5fe0;
  --iso-acc-soft: #cfe0fb;
  --iso-sky: #d9e6fb;
  --iso-frame: #f7f8fa;
  --iso-key: rgb(255 255 255 / 0.6);
  --iso-screen: #f5f8ff;
  --iso-screen-2: #e8eef9;
  --iso-scr-dim: #c9d3e3;
  --iso-scr-ink: #2d3340;
  --iso-scr-ink2: #9aa3b2;
  --iso-scr-row: #ffffff;
  --iso-scr-new: #dce9ff;
  --iso-crate: #dcc8a6;
  --iso-crate-2: #c9ae88;
  --iso-pot: #cfd4dd;
  --iso-leaf: #a3bea8;
  --iso-leaf-2: #8fae97;
  --iso-pants: #3a4150;
  --iso-shirt-1: #5b6577;
  --iso-shirt-2: #e2e5ec;
  --iso-shirt-3: #8a93a6;
  --iso-hair: #2b2f38;
  --iso-shade: #1b2233;
  --iso-edge: rgb(27 34 51 / 0.15);
  --iso-edge-2: rgb(27 34 51 / 0.14);
  --iso-shadow: rgb(27 34 51 / 0.07);
  --iso-ink: #2d3340;
  --iso-wire: #aab4c4;
  --iso-ghost: #8f98a8;
  --p-ink: #2d3340;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0c0c0e;
    --surface: #1c1c1e;
    --surface-2: #26262a;
    --border: #36363a;
    --hairline: rgb(255 255 255 / 0.08);
    --text: #f5f5f7;
    --muted: #9a9aa0;
    --accent-text: #5b9cff;
    --accent-soft: #12284c;
    --ok: #30d158;
    --glass: rgb(12 12 14 / 0.8);
    --shadow-card: none;
    --shadow-pop: 0 24px 60px -24px rgb(0 0 0 / 0.7);
    --iso-ground: #1d1f25;
    --iso-floor: #2c2f37;
    --iso-floor-room: #2c2f37;
    --iso-floor-work: #33363f;
    --iso-wall: #24272e;
    --iso-desk: #3b3f49;
    --iso-metal: #474c58;
    --iso-binder: #414652;
    --iso-soft: #5a6070;
    --iso-dark: #17191f;
    --iso-dark-2: #252830;
    --iso-paper: #eceef3;
    --iso-accent: #2f7bff;
    --iso-acc-soft: #1b3462;
    --iso-sky: #17253f;
    --iso-frame: #3a3e48;
    --iso-key: rgb(255 255 255 / 0.07);
    --iso-screen: #10151f;
    --iso-screen-2: #171d2a;
    --iso-scr-dim: #2a3446;
    --iso-scr-ink: #c9d2e3;
    --iso-scr-ink2: #56607a;
    --iso-scr-row: #161c28;
    --iso-scr-new: #15305c;
    --iso-crate: #8f7a58;
    --iso-crate-2: #735f44;
    --iso-pot: #4a505c;
    --iso-leaf: #567460;
    --iso-leaf-2: #4a6654;
    --iso-pants: #1b1e25;
    --iso-shirt-1: #6a7385;
    --iso-shirt-2: #c8ccd5;
    --iso-shirt-3: #4c5363;
    --iso-hair: #101216;
    --iso-shade: #000000;
    --iso-edge: rgb(255 255 255 / 0.07);
    --iso-edge-2: rgb(255 255 255 / 0.08);
    --iso-shadow: rgb(0 0 0 / 0.34);
    --iso-ink: #d3d8e2;
    --iso-wire: #454c5b;
    --iso-ghost: #687082;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 16.5px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: #bad6ff; color: #0c2552; }
a { color: var(--accent-text); text-decoration-thickness: 1px; text-underline-offset: 2px; }
img, svg { max-width: 100%; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
:focus-visible { outline: 3px solid rgb(10 95 224 / 0.45); outline-offset: 2px; border-radius: 6px; }
.wrap { max-width: 1320px; margin: 0 auto; padding: 0 20px; }
@media (min-width: 900px) { .wrap { padding: 0 40px; } }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 50; background: var(--surface); color: var(--text); padding: 8px 14px; border-radius: 10px; }
.skip:focus { left: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* header – frosted, the same links on every page */
.top { position: sticky; top: 0; z-index: 30; background: var(--glass); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); border-bottom: 1px solid var(--hairline); }
.top .wrap { display: flex; align-items: center; gap: 12px; height: 60px; }
.brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--text); font-weight: 650; font-size: 1.14rem; letter-spacing: -0.02em; }
.brand img { width: 28px; height: 28px; display: block; }
.nav { margin-left: auto; display: flex; gap: 2px; align-items: center; }
.nav a { color: var(--muted); text-decoration: none; font-size: 0.93rem; padding: 7px 12px; border-radius: 9px; }
.nav a:hover { color: var(--text); background: var(--hairline); }
.nav a[aria-current="page"] { color: var(--text); font-weight: 550; }
.nav .cta { color: var(--on-accent); background: var(--accent); font-weight: 550; margin-left: 8px; }
.nav .cta:hover { background: var(--accent-hover); color: var(--on-accent); }
.menu { display: none; position: relative; }
.menu > summary { list-style: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; cursor: pointer; color: var(--text); }
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary:hover { background: var(--hairline); }
.menu .m-close { display: none; }
.menu[open] .m-open { display: none; }
.menu[open] .m-close { display: block; }
.menu-panel { position: absolute; right: 0; top: calc(100% + 8px); width: min(270px, calc(100vw - 32px)); display: grid; gap: 2px; padding: 6px; background: var(--surface); border: 1px solid var(--hairline); border-radius: 16px; box-shadow: var(--shadow-pop); }
.menu-panel a { display: block; padding: 11px 14px; border-radius: 10px; color: var(--text); text-decoration: none; }
.menu-panel a:hover { background: var(--surface-2); }
.menu-panel a[aria-current="page"] { color: var(--accent-text); font-weight: 550; }
@media (max-width: 1020px) { .nav > a:not(.cta) { display: none; } .menu { display: block; } }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 50px; padding: 0 24px; border-radius: 14px; font: inherit; font-weight: 550; font-size: 0.98rem; text-decoration: none; white-space: nowrap; cursor: pointer; border: 0; transition: transform 150ms cubic-bezier(.2,.8,.2,1), background-color 150ms, border-color 150ms; }
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--accent); color: var(--on-accent); box-shadow: 0 1px 2px rgb(10 95 224 / 0.25); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-outline { color: var(--text); background: var(--surface); border: 1px solid var(--border); }
.btn-outline:hover { background: var(--surface-2); }
.btn-sm { height: 40px; padding: 0 16px; border-radius: 11px; font-size: 0.92rem; }
.btn .i { width: 18px; height: 18px; }
.btn svg.win { width: 17px; height: 17px; fill: currentColor; stroke: none; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 30px 0 14px; }
@media (max-width: 420px) { .actions .btn { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }

/* type */
h1 { font-size: clamp(2.6rem, 5.4vw, 4.6rem); line-height: 1.02; letter-spacing: -0.042em; font-weight: 700; margin: 6px 0 22px; }
h2 { font-size: clamp(1.9rem, 3.4vw, 3rem); line-height: 1.08; letter-spacing: -0.035em; font-weight: 680; margin: 0 0 16px; }
h3 { font-size: 1.15rem; line-height: 1.3; letter-spacing: -0.015em; font-weight: 620; margin: 0 0 6px; }
h1 em, h2 em { font-style: normal; color: var(--accent-text); }
.lead { color: var(--muted); font-size: clamp(1.08rem, 1.5vw, 1.24rem); line-height: 1.58; max-width: 36em; margin: 0; }
.sub { color: var(--muted); font-size: 1.1rem; line-height: 1.6; margin: 0 0 40px; max-width: 42em; }
.meta { color: var(--muted); font-size: 0.9rem; margin: 0; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono-font); font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin: 0 0 16px; }
.eyebrow::before { content: ""; width: 18px; height: 6px; border-radius: 2px; background: var(--accent); flex: none; }
.more { display: inline-flex; align-items: center; gap: 6px; margin-top: 22px; font-weight: 550; text-decoration: none; color: var(--accent-text); }
.more:hover { text-decoration: underline; }
.more .i { width: 17px; height: 17px; transition: transform 150ms cubic-bezier(.2,.8,.2,1); }
.more:hover .i { transform: translateX(3px); }
code { font-family: var(--mono); font-size: 0.88em; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.chips span { font-family: var(--mono-font); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 9px; border-radius: 6px; border: 1px solid var(--border); color: var(--muted); }
.tag { display: inline-flex; align-items: center; font-size: 0.8rem; font-weight: 550; padding: 3px 10px; border-radius: 999px; color: var(--accent-text); background: var(--accent-soft); white-space: nowrap; }
.tag.soft { color: var(--muted); background: var(--surface-2); }

/* sections – open, with air; no boxes */
.sec { padding: 64px 0; }
@media (min-width: 960px) { .sec { padding: 96px 0; } }
.sec.tight { padding-top: 24px; }
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: center; }
@media (min-width: 960px) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 72px; } .split.flip > :first-child { order: 2; } .split.even { grid-template-columns: 1fr 1fr; align-items: start; } }
/* points: icon, title, a few lines – side by side, no frame */
.points { display: grid; gap: 36px 48px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.pt .i { width: 26px; height: 26px; color: var(--accent-text); stroke-width: 1.8; margin-bottom: 14px; }
.pt p { color: var(--muted); margin: 0; }
.pt h3 { margin-bottom: 8px; }
/* a checklist in two columns */
.checks { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 10px 28px; }
@media (min-width: 640px) { .checks { grid-template-columns: 1fr 1fr; } }
.checks li { display: flex; gap: 10px; align-items: flex-start; color: var(--text); }
.checks .i { width: 18px; height: 18px; margin-top: 4px; color: var(--accent-text); stroke-width: 2.4; }
.list { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 14px; }
.list li { display: flex; gap: 12px; color: var(--muted); }
.list li strong { color: var(--text); font-weight: 600; }
.list .i { color: var(--accent-text); margin-top: 2px; }
/* big numbers in a row */
.zeros { display: grid; gap: 32px 48px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.zeros b { display: block; font-size: clamp(4rem, 9vw, 7rem); font-weight: 700; letter-spacing: -0.06em; line-height: 0.9; color: var(--accent-text); font-variant-numeric: tabular-nums; }
.zeros h3 { margin: 14px 0 6px; font-size: 1.25rem; }
.zeros p { color: var(--muted); margin: 0; max-width: 22em; }
/* links to other pages, as large lines */
.go { display: grid; border-top: 1px solid var(--border); margin-top: 8px; }
.go a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 24px; align-items: center; padding: 26px 0; border-bottom: 1px solid var(--border); color: var(--text); text-decoration: none; }
.go a b { font-size: clamp(1.3rem, 2.4vw, 1.9rem); font-weight: 650; letter-spacing: -0.03em; }
.go a span { grid-column: 1; color: var(--muted); }
.go a .i { grid-row: 1 / span 2; grid-column: 2; width: 28px; height: 28px; color: var(--accent-text); transition: transform 200ms cubic-bezier(.2,.8,.2,1); }
.go a:hover .i { transform: translateX(6px); }
.go a:hover b { color: var(--accent-text); }
/* the full-width band for the call to action */
.band { background: var(--surface); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.band .wrap { display: grid; gap: 28px; align-items: center; padding-top: 72px; padding-bottom: 72px; }
@media (min-width: 960px) { .band .wrap { grid-template-columns: minmax(0, 1.2fr) auto; gap: 64px; } }
.band h2 { margin-bottom: 10px; }
.band .sub { margin: 0; }
.band .actions { margin: 0; }

/* start page hero: the copy, and the whole company next to it */
.hero { padding: 40px 0 32px; overflow-x: clip; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: center; }
@media (min-width: 1100px) { .hero { padding: 56px 0 48px; } .hero-grid { grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); gap: 32px; } .hero-art { margin-right: -40px; } }
.hero-copy h1 { margin-top: 0; }

/* inner pages: copy on one side, the page's own scene on the other */
.phero { padding: 40px 0 24px; overflow-x: clip; }
.phero .split { align-items: center; }
@media (min-width: 960px) { .phero { padding: 56px 0 40px; } .phero .split { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: start; } .phero .split > :first-child { padding-top: 48px; } }
.phero h1 { margin-top: 0; font-size: clamp(2.4rem, 4.4vw, 3.9rem); }
.jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.jump a { font-size: 0.92rem; font-weight: 550; color: var(--text); text-decoration: none; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border); }
.jump a:hover { border-color: var(--accent); color: var(--accent-text); }

/* ---------------------------------------------------------------------------------------------------------------
   isometric scenes (iso.js) – flat colours, three faces shaded by mixing toward --iso-shade
   --------------------------------------------------------------------------------------------------------------- */
.iso { position: relative; user-select: none; -webkit-tap-highlight-color: transparent; }
.iso svg { display: block; width: 100%; height: auto; overflow: hidden; font-family: var(--font); }
.iso .b > * { stroke: var(--iso-edge); stroke-width: 1; stroke-linejoin: round; }
.iso .t { fill: var(--m); }
.iso .l { fill: color-mix(in srgb, var(--m) 88%, var(--iso-shade)); }
.iso .r { fill: color-mix(in srgb, var(--m) 74%, var(--iso-shade)); }
.iso .pp > * { stroke: none; }
.iso .ghost > * { fill: color-mix(in srgb, var(--iso-accent) 7%, transparent); stroke: var(--iso-ghost); stroke-width: 1.4; stroke-dasharray: 5 4; }
.iso .ghost-back { fill: none; stroke: var(--iso-ghost); stroke-width: 1.2; stroke-dasharray: 5 4; opacity: 0.55; }
/* clickable spots: a pulsing blue dot until clicked once (same dot as in front of the hint under a scene) */
.iso .iso-hint { pointer-events: none; }
.iso .iso-hint-dot { fill: var(--accent); stroke: var(--bg); stroke-width: 2; }
.iso .iso-hint-ring { fill: none; stroke: var(--accent); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: hint-ring 2.4s ease-out infinite; }
@keyframes hint-ring { 0% { transform: scale(1); opacity: 0.8; } 70%, 100% { transform: scale(3); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .iso .iso-hint-ring { animation: none; opacity: 0; } }
.iso .soft-acc { --m: var(--iso-acc-soft) !important; }
.iso [data-rooms] { transition: opacity 450ms ease, transform 650ms cubic-bezier(.2,.8,.2,1); }
.iso .away { opacity: 0; transform: translateY(30px); pointer-events: none; }
.iso .slab { opacity: 0; transition: opacity 450ms ease; }
.iso.is-focus .slab { opacity: 1; }
.iso .shadow { fill: var(--iso-shadow); }
.iso .shadow-soft { fill: rgb(0 0 0 / 0.13); }
.iso .room-hl { fill: var(--iso-accent); opacity: 0; transition: opacity 200ms ease; }
.iso .room-hl.on { opacity: 0.1; }
.iso .sheet { fill: var(--iso-paper); stroke: var(--iso-edge); stroke-width: 1; }
.iso .beam { fill: var(--iso-accent); opacity: 0.28; }
.iso .wire { fill: none; stroke: var(--iso-wire); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 8; }
.iso .wire.on { stroke: var(--iso-accent); }
.iso .lane { fill: var(--iso-soft); opacity: 0.55; }
.iso .skin { stroke: none; }
.iso .hair { fill: var(--iso-hair); }
.iso .orb-ball { fill: var(--iso-accent); }
.iso .orb-glint { fill: #fff; opacity: 0.5; }
.iso .orb-ring { fill: none; stroke: var(--iso-accent); stroke-width: 2.5; }
.iso .orb-shadow { fill: var(--iso-accent); opacity: 0.16; }
.iso .w-frame { fill: var(--iso-frame); }
.iso .w-sky { fill: var(--iso-sky); }
.iso .w-glint { fill: none; stroke: #fff; stroke-opacity: 0.5; stroke-width: 6; stroke-linecap: round; }
.iso .c-face { fill: var(--iso-paper); stroke: var(--iso-edge); stroke-width: 2; }
.iso .c-hand { stroke: var(--p-ink); stroke-width: 2.5; stroke-linecap: round; }
.iso .c-short { stroke-width: 3.5; }
.iso .c-pin { fill: var(--iso-accent); }
.iso .sign { fill: var(--iso-accent); }
.iso .sign-text { fill: #fff; font-weight: 700; text-anchor: middle; letter-spacing: -0.02em; }
.iso .spine-label { fill: var(--iso-paper); opacity: 0.9; }
.iso .spine-hole { fill: var(--iso-shade); opacity: 0.35; }
.iso .slot-hole { fill: var(--iso-shade); opacity: 0.16; }
.iso .slot-paper { fill: var(--iso-paper); }
.iso .env { fill: var(--iso-paper); stroke: var(--iso-edge); stroke-width: 1.5; }
.iso .env-flap { fill: none; stroke: var(--iso-ghost); stroke-width: 1.5; stroke-linejoin: round; }
.iso .safe-door { fill: var(--iso-dark-2); }
.iso .safe-dial, .iso .safe-handle, .iso .safe-hinge { fill: var(--iso-metal); }
.iso .safe-ring { fill: none; stroke: var(--iso-metal); stroke-width: 5; opacity: 0.6; }
.iso .safe-tick { stroke: var(--iso-dark); stroke-width: 2.5; }
.iso .safe-hub { fill: var(--iso-dark); }
.iso .safe-mark { fill: var(--iso-accent); stroke: var(--iso-accent); stroke-width: 3; stroke-linecap: round; }
.iso .drawer-line { fill: none; stroke: var(--iso-edge-2); stroke-width: 1.5; }
.iso .handle { fill: var(--iso-ink); opacity: 0.45; }
.iso .key { fill: var(--iso-key); }
.iso .d-label { fill: var(--iso-paper); }
.iso .d-label.on { fill: var(--iso-accent); }
.iso .d-text { fill: var(--p-ink); font-weight: 650; text-anchor: middle; }
.iso .d-text.on { fill: #fff; }
.iso .kb-head { fill: #e2e6ee; }
.iso .kb-text { fill: var(--p-ink); font-weight: 650; text-anchor: middle; }
.iso .kb-card { fill: #eef1f6; stroke: #dde2ea; stroke-width: 1; }
.iso .kb-card.on { fill: var(--iso-accent); stroke: none; }
.iso .scr { fill: var(--iso-screen); }
.iso .scr-side { fill: var(--iso-screen-2); }
.iso .scr-dim { fill: var(--iso-scr-dim); }
.iso .scr-ink { fill: var(--iso-scr-ink); }
.iso .scr-ink2 { fill: var(--iso-scr-ink2); }
.iso .scr-acc, .iso .scr-ok { fill: var(--iso-accent); }
.iso .scr-row { fill: var(--iso-scr-row); }
.iso .scr-new { fill: var(--iso-scr-new); }
.iso .scr-okmark { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.iso .scr-shutter { fill: none; stroke: var(--iso-scr-ink); stroke-width: 5; }
.iso .mach-win { fill: var(--iso-dark); }
.iso .mach-glow { fill: var(--iso-accent); }
.iso .mach-head { fill: var(--iso-metal); }
.iso .mach-panel { fill: var(--iso-dark-2); }
.iso .belt-line { fill: #fff; opacity: 0.12; }
.iso .leaf { fill: var(--iso-leaf); }
.iso .leaf-2 { fill: var(--iso-leaf-2); }
.iso .p-ink { fill: var(--p-ink); }
.iso .p-ink2 { fill: #8a909c; }
.iso .p-dim { fill: #dfe2e8; }
.iso .p-qrbg { fill: #fff; }
.iso .p-acc { fill: var(--iso-accent); }
.iso .p-badge { fill: #fff; font-family: var(--mono-font); font-weight: 700; text-anchor: middle; }
.iso .n-name { fill: var(--iso-ink); font-weight: 700; text-anchor: middle; letter-spacing: -0.02em; }
.iso .n-sub { fill: var(--iso-ink); opacity: 0.6; text-anchor: middle; }
.iso .n-floor { fill: var(--iso-ink); opacity: 0.65; font-weight: 600; text-anchor: middle; }
.iso .ordo-ring { fill: none; stroke: #fff; stroke-width: 13; }
.iso .lock-arc { fill: none; stroke: var(--iso-accent); stroke-width: 6; stroke-linecap: round; }
.iso .finger { fill: none; stroke: var(--iso-accent); stroke-width: 3; }
.iso .slot { fill: #000; opacity: 0.55; }
.iso .glow-line { fill: none; stroke: var(--iso-accent); stroke-width: 3; stroke-linecap: round; }
.iso .dim { opacity: 0.22; transition: opacity 400ms ease; }
.iso .hub-node.lift { transform: translateY(-10px); }
.iso [data-rooms="server"], .iso [data-rooms="db"] { transition: opacity 400ms ease; }
.iso .hub-node { transition: transform 400ms cubic-bezier(.2,.8,.2,1); }
.iso .focus-ring { fill: none; stroke: var(--iso-accent); stroke-width: 3; stroke-dasharray: 2 7; stroke-linecap: round; }
.iso .zone { fill: var(--iso-acc-soft); opacity: 0.45; }
.iso .zone.soft { fill: var(--iso-soft); opacity: 0.18; }
.iso .ghost-floor { fill: none; stroke: var(--iso-ghost); stroke-width: 1.6; stroke-dasharray: 6 5; }
.iso .mono { font-family: var(--mono-font); letter-spacing: 0.08em; }
.iso .mod-win { fill: var(--iso-shade); opacity: 0.08; }
.iso .top-ring { fill: none; stroke: var(--iso-accent); stroke-width: 12; }
.iso .top-icon { fill: none; stroke: var(--iso-accent); stroke-width: 12; stroke-linecap: round; stroke-linejoin: round; }
.iso .top-fill { fill: var(--iso-accent); }
.iso .watch { fill: var(--iso-paper); }
.iso .watch-btn { fill: var(--iso-metal); }
.iso .watch-tick { stroke: var(--p-ink); stroke-width: 4; stroke-linecap: round; }
.iso .watch-hand { stroke: var(--iso-accent); stroke-width: 6; stroke-linecap: round; }
.iso .safe-in { fill: var(--iso-shade); opacity: 0.85; }
.iso .safe-shelf { fill: var(--iso-metal); }
.iso .safe-folder { fill: var(--iso-binder); }
.iso .safe-folder.on { fill: var(--iso-accent); }
.iso .door { fill: var(--iso-dark-2); stroke: var(--iso-edge); stroke-width: 1; }
.iso .rack { fill: var(--iso-dark-2); }
.iso .led { fill: var(--iso-scr-dim); }
.iso .led.on { fill: var(--iso-accent); }

/* notes, speech bubbles and labels over a scene */
.iso-tags { position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: var(--ar, 1); pointer-events: none; }
.iso-tag { position: absolute; display: flex; align-items: center; gap: 9px; padding: 7px 12px 7px 7px; background: var(--surface); border: 1px solid var(--hairline); border-radius: 12px; box-shadow: var(--shadow-pop); font-size: 12.5px; line-height: 1.25; white-space: nowrap; opacity: 0; transform: translate(-50%, calc(-100% + 8px)) scale(0.97); transition: opacity 260ms ease, transform 420ms cubic-bezier(.2,.8,.2,1); z-index: 2; }
.iso-tag.on { opacity: 1; transform: translate(-50%, -100%); }
.iso-tag.side { transform: translate(14px, -50%) scale(0.97); }
.iso-tag.side.on { transform: translate(22px, -50%); }
.iso-tag.left { transform: translate(calc(-100% - 14px), -50%) scale(0.97); }
.iso-tag.left.on { transform: translate(calc(-100% - 22px), -50%); }
.iso-tag b { display: block; font-weight: 600; color: var(--text); }
.iso-tag small { display: block; font-size: 11.5px; color: var(--muted); }
.iso-tag small:empty { display: none; }
.iso-tag-i { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; flex: none; background: var(--surface-2); color: var(--text); }
.iso-tag-i svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.iso-tag.acc .iso-tag-i { background: var(--accent); color: var(--on-accent); }
.iso-say { position: absolute; z-index: 3; max-width: 240px; padding: 8px 12px; border-radius: 14px; background: var(--text); color: var(--bg); font-size: 13px; font-weight: 550; line-height: 1.3; white-space: normal; width: max-content; opacity: 0; transform: translate(-50%, calc(-100% - 4px)) scale(0.9); transform-origin: 50% 100%; transition: opacity 200ms ease, transform 320ms cubic-bezier(.2,1.4,.4,1); }
.iso-say::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; background: inherit; transform: translateX(-50%) rotate(45deg); border-radius: 2px; }
.iso-say.on { opacity: 1; transform: translate(-50%, calc(-100% - 12px)); }
.iso-room-label { position: absolute; z-index: 2; pointer-events: none; padding: 6px 12px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: 13px; font-weight: 600; white-space: nowrap; opacity: 0; transform: translate(-50%, -50%) scale(0.9); transition: opacity 180ms ease, transform 260ms cubic-bezier(.2,.8,.2,1); }
.iso-room-label.on { opacity: 1; transform: translate(-50%, -50%); }
@media (max-width: 560px) { .iso-tag { font-size: 11px; padding: 5px 9px 5px 5px; gap: 7px; } .iso-tag small { font-size: 10.5px; } .iso-tag-i { width: 22px; height: 22px; } .iso-say { font-size: 12px; max-width: 180px; } }
@media (prefers-reduced-motion: reduce) { .iso-tag, .iso-say, .iso-room-label, .iso [data-rooms] { transition: none; } }

/* the company on the start page: info in the free corner top left, one button per room below */
.iso-ui { position: relative; }
.iso-info { max-width: 340px; margin: 0; }
.iso-info-k { margin: 0 0 6px; font-family: var(--mono-font); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-text); }
.iso-info h3 { font-size: 1.25rem; margin: 0 0 6px; }
.iso-info-t { margin: 0; color: var(--muted); font-size: 0.95rem; }
.iso-info-a { display: flex; align-items: center; gap: 16px; margin-top: 10px; }
.iso-info-a .more { margin: 0; }
.iso-info-a .more[hidden] { display: none; }
.iso-back { display: none; font: inherit; font-size: 0.9rem; font-weight: 550; color: var(--muted); background: none; border: 0; padding: 0; cursor: pointer; }
.iso-back:hover { color: var(--text); }
.is-focus .iso-back { display: inline; }
.iso-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 18px; }
.iso-chips button { font: inherit; font-size: 0.88rem; font-weight: 550; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 7px 14px; cursor: pointer; transition: background-color 150ms, color 150ms, border-color 150ms; }
.iso-chips button:hover { border-color: var(--accent); }
.iso-chips button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
/* wide screens: the info sits in the empty corner bottom left of the house */
@media (min-width: 760px) {
  .hero-art .iso-ui { position: static; }
  .hero-art .iso-info { position: absolute; z-index: 2; left: 0; top: calc(var(--ar-h, 100%) * 0); max-width: min(340px, 34%); }
  .hero-art .iso-info { top: auto; bottom: 74px; }
}
@media (max-width: 759px) {
  .iso-chips { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
  .iso-chips button { flex: none; }
  .iso-info { margin-top: 14px; }
}
/* Atlas: the question and the answer under the scene */
.atlas-talk { display: grid; gap: 8px; max-width: 520px; margin: 18px auto 0; min-height: 112px; }
.atlas-talk p { margin: 0; padding: 10px 14px; border-radius: 18px; font-size: 0.96rem; line-height: 1.45; }
.atlas-talk .me { justify-self: end; background: var(--accent); color: var(--on-accent); border-bottom-right-radius: 6px; }
.atlas-talk .me:empty { display: none; }
.atlas-talk .at { justify-self: start; background: var(--surface); border: 1px solid var(--hairline); border-bottom-left-radius: 6px; }
.atlas-talk .at b { display: block; font-size: 0.78rem; color: var(--accent-text); margin-bottom: 2px; }
.atlas-talk.asking .at span::after { content: "schaut nach …"; color: var(--muted); }
.atlas-talk:not(.asking) .at:has(span:empty) { display: none; }
/* a scene with a row of buttons under it (Atlas questions, Download platforms, Sicherheit modes) */
.iso-pick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; justify-content: center; }
.iso-pick button { font: inherit; font-size: 0.92rem; font-weight: 550; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 9px 16px; cursor: pointer; transition: background-color 150ms, color 150ms, border-color 150ms; }
.iso-pick button:hover { border-color: var(--accent); }
.iso-pick button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.hint { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 0.86rem; color: var(--muted); }
.hint::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: seats-pulse 2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .hint::before { animation: none; } }

/* module rows on Funktionen: text next to its own room */
.mod { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: center; padding: 64px 0; border-top: 1px solid var(--border); }
.mod:first-of-type { border-top: 0; }
@media (min-width: 960px) { .mod { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 72px; padding: 96px 0; } .mod.flip > :first-child { order: 2; } }
.mod-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 14px; }
.mod-head h2 { margin: 0; }
.mod p.sub { margin-bottom: 0; }
.tile { display: inline-flex; align-items: center; justify-content: center; flex: none; color: #fff; width: 44px; height: 44px; border-radius: 12px; background: var(--accent); }
.tile svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
img.tile { display: block; background: none; }

/* live counter of free places in the private beta (filled by counter.js, hidden until real numbers arrive) */
.seats { margin-top: 28px; max-width: 30rem; background: var(--surface); border: 1px solid var(--hairline); border-radius: 18px; box-shadow: var(--shadow-card); padding: 18px 20px 16px; }
.seats-top { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 0.82rem; font-weight: 500; color: var(--muted); }
.seats-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; animation: seats-pulse 2.4s ease-in-out infinite; }
@keyframes seats-pulse { 50% { opacity: 0.3; } }
.seats-text { margin: 0; font-size: 1.12rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; }
.seats-num { font-size: 2.4rem; font-weight: 650; letter-spacing: -0.035em; line-height: 1; color: var(--accent-text); font-variant-numeric: tabular-nums; }
.seats-bar { height: 6px; margin: 14px 0 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.seats-bar span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--accent); transition: width 900ms cubic-bezier(.2,.8,.2,1); }
.seats-scale { display: flex; justify-content: space-between; gap: 12px; margin: 0; font-size: 0.82rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.seats-foot { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--border); font-size: 0.85rem; color: var(--muted); }
.seats-line { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 0.92rem; color: var(--muted); text-align: left; }
.seats-line b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.seats .seats-full, .seats-line .seats-full { display: none; }
.seats.is-full .seats-open, .seats-line.is-full .seats-open { display: none; }
.seats.is-full .seats-full, .seats-line.is-full .seats-full { display: inline; }
.seats.is-full .seats-dot, .seats-line.is-full .seats-dot { animation: none; background: var(--muted); }
.seats[hidden], .seats-line[hidden] { display: none; }
.dl-hero .seats { margin-top: 24px; }
.beta .seats-line { margin-top: 4px; }
@media (prefers-reduced-motion: reduce) { .seats-dot { animation: none; } .seats-bar span, .more .i { transition: none; } }

/* the story: steps on the left, the app window stays in view on the right and changes with them */
.story-sec { padding-top: 40px; }
.story { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; margin-top: 8px; }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.step { position: relative; padding: 0 0 0 28px; }
.step::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: -8px; width: 2px; background: var(--border); border-radius: 2px; }
.step:last-child::before { bottom: auto; height: 40px; }
.step::after { content: ""; position: absolute; left: 0; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--bg); border: 2px solid var(--border); box-sizing: border-box; transition: background-color 250ms, border-color 250ms, transform 250ms; }
.step.is-on::after { background: var(--accent); border-color: var(--accent); transform: scale(1.15); }
.step-n { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-family: var(--mono-font); font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.step-n span { color: var(--accent-text); }
.step h3 { font-size: clamp(1.4rem, 2.6vw, 1.85rem); line-height: 1.15; letter-spacing: -0.025em; font-weight: 650; margin: 0 0 10px; }
.step p:not(.step-n) { color: var(--muted); margin: 0; max-width: 32em; }
.step .actions { margin: 22px 0 0; }
.story.js .step { opacity: 0.38; transition: opacity 300ms ease; }
.story.js .step.is-on { opacity: 1; }
@media (min-width: 900px) {
  .story { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: 56px; align-items: start; }
  .steps { padding: 12vh 0 16vh; }
  .step { min-height: 46vh; display: flex; flex-direction: column; justify-content: center; }
  .step::before { top: 50%; bottom: -50%; }
  .step:first-child::before { top: calc(50% - 40px); }
  .step:last-child::before { bottom: auto; height: 0; }
  .step::after { top: calc(50% - 6px); }
  .step > :first-child { margin-top: 0; }
  .stage { position: sticky; top: calc(50vh - 220px); }
}
@media (max-width: 899px) {
  /* phones and tablets: the window waits at the top, the steps scroll underneath it */
  .story { gap: 0; }
  .stage { position: sticky; top: 60px; z-index: 2; order: -1; padding: 10px 0 14px; background: var(--bg); }
  .step { min-height: 52vh; padding-top: 28px; }
  .story:not(.js) .step { min-height: 0; padding-bottom: 24px; }
}

.appwin { background: var(--surface); border: 1px solid var(--hairline); border-radius: 18px; box-shadow: var(--shadow-pop); overflow: hidden; font-size: 13px; line-height: 1.4; user-select: none; }
.appwin-bar { display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-bottom: 1px solid var(--hairline); background: var(--surface-2); font-size: 12px; font-weight: 500; color: var(--muted); }
.appwin-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--border); display: block; }
.appwin-bar span { margin-left: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sw-body { display: grid; grid-template-columns: 150px 1fr; height: 380px; }
.sw-side { background: var(--surface-2); border-right: 1px solid var(--hairline); padding: 12px 8px; }
.sw-brand { display: flex; align-items: center; gap: 7px; font-weight: 600; font-size: 13.5px; padding: 2px 8px 12px; }
.sw-nav { position: relative; display: grid; grid-auto-rows: 32px; }
.sw-nav [data-nav] { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; padding: 0 8px; border-radius: 8px; color: var(--muted); white-space: nowrap; transition: color 250ms; }
.sw-nav [data-nav] .i { width: 15px; height: 15px; }
.sw-nav [data-nav].on { color: var(--text); font-weight: 500; }
.sw-nav [data-nav] em { margin-left: auto; font-style: normal; font-size: 11px; color: var(--on-accent); background: var(--accent); border-radius: 99px; padding: 0 6px; line-height: 17px; }
.sw-pill { position: absolute; left: 0; right: 0; top: 0; height: 32px; border-radius: 8px; background: var(--surface); box-shadow: 0 1px 2px rgb(0 0 0 / 0.08); transition: transform 420ms cubic-bezier(.2,.8,.2,1); }
.sw-main { position: relative; min-width: 0; overflow: hidden; }
.pane { position: absolute; inset: 0; padding: 18px 20px; opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity 320ms ease, transform 420ms cubic-bezier(.2,.8,.2,1); }
.pane.is-on { opacity: 1; transform: none; }
.pane-h { margin: 0 0 10px; font-size: 12px; font-weight: 600; color: var(--muted); }
@media (max-width: 899px) {
  .sw-body { grid-template-columns: 1fr; height: 300px; }
  .sw-side { display: none; }
  .pane { padding: 14px; }
}
@media (max-width: 480px) { .appwin { font-size: 12px; } .sw-body { height: 286px; } }

/* 01 Eingang */
.src { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.src span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 99px; background: var(--surface-2); font-size: 12px; font-weight: 500; }
.src .i { width: 14px; height: 14px; color: var(--accent-text); }
.inlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.inlist li { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 11px; min-width: 0; }
.inlist li:first-child { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: var(--accent-soft); }
.ft { font-family: var(--mono-font); font-size: 10.5px; font-weight: 700; text-align: center; padding: 4px 0; border-radius: 6px; background: var(--surface-2); color: var(--muted); }
.nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.nm small { display: block; font-weight: 400; font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.st { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 500; color: var(--muted); white-space: nowrap; }
.st::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #34c759; }
.st.wait::before { background: var(--accent); }
.st.busy { color: var(--accent-text); }
.st.busy::before { background: var(--accent); animation: seats-pulse 1s ease-in-out infinite; }
.pane.is-on .inlist li { animation: rowin 520ms cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(150ms + var(--i) * 110ms); }

/* 02 Lesen – the invoice is read field by field */
.read { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 18px; height: 100%; }
.paper { position: relative; border-radius: 6px; background: #fff; border: 1px solid #e4e6eb; padding: 16px; box-shadow: 0 10px 30px -18px rgb(0 0 0 / 0.4); color: #1d1f24; overflow: hidden; }
.paper .p-logo { width: 44px; height: 12px; border-radius: 3px; background: #1d1f24; margin-bottom: 14px; }
.paper .p-line { height: 7px; border-radius: 3px; background: #e7e9ee; margin: 7px 0; }
.paper .p-line.s { width: 55%; }
.paper .p-line.m { width: 75%; }
.paper .p-total { margin-top: 18px; display: flex; justify-content: space-between; font-family: var(--mono-font); font-size: 11px; font-weight: 700; }
.paper .scan { position: absolute; left: 0; right: 0; height: 36px; top: -40px; background: rgb(10 95 224 / 0.12); border-bottom: 2px solid rgb(10 95 224 / 0.55); }
.pane.is-on .paper .scan { animation: scan 9s infinite; }
@keyframes scan { 0% { top: -40px; } 22% { top: 100%; } 100% { top: 100%; } }
.fields { display: grid; gap: 9px; align-content: start; }
.fld { display: grid; grid-template-columns: 74px 1fr 10px; align-items: center; gap: 8px; }
.fld label { color: var(--muted); font-size: 12px; }
.fld .v { height: 30px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-2); display: flex; align-items: center; padding: 0 10px; overflow: hidden; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fld .v span { display: inline-block; overflow: hidden; max-width: 0; }
.fld .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); }
.pane.is-on .fld .v span { animation: type 9s infinite steps(18, end); }
.pane.is-on .fld .dot { animation: ok 9s infinite; }
.fld:nth-child(1) span, .fld:nth-child(1) .dot { animation-delay: 0.9s !important; }
.fld:nth-child(2) span, .fld:nth-child(2) .dot { animation-delay: 1.4s !important; }
.fld:nth-child(3) span, .fld:nth-child(3) .dot { animation-delay: 1.9s !important; }
.fld:nth-child(4) span, .fld:nth-child(4) .dot { animation-delay: 2.4s !important; }
.fld:nth-child(5) span, .fld:nth-child(5) .dot { animation-delay: 2.9s !important; }
@keyframes type { 0% { max-width: 0; } 8% { max-width: 20em; } 92% { max-width: 20em; } 100% { max-width: 0; } }
@keyframes ok { 0%, 6% { background: var(--border); } 9%, 92% { background: #34c759; } 100% { background: var(--border); } }
.booked { margin-top: 6px; justify-self: start; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; background: var(--accent); color: var(--on-accent); font-weight: 600; opacity: 0; }
.booked .i { width: 16px; height: 16px; }
.pane.is-on .booked { animation: booked 9s infinite; }
@keyframes booked { 0%, 40% { opacity: 0; transform: translateY(6px) scale(0.98); } 44%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@media (max-width: 899px) { .read { grid-template-columns: 0.8fr 1.2fr; gap: 12px; } .paper { padding: 12px; } .fld { grid-template-columns: 58px 1fr 8px; gap: 6px; } .fld .v { height: 26px; padding: 0 7px; } .fields { gap: 6px; } }

/* 03 Prüfen – one unsure field, Enter books */
.chk { display: grid; grid-template-columns: 136px 1fr; gap: 16px; height: 100%; }
.chk-list { display: grid; gap: 6px; align-content: start; }
.ci { display: grid; grid-template-columns: 8px 1fr; column-gap: 8px; align-items: center; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--border); font-weight: 500; font-size: 12.5px; }
.ci small { grid-column: 2; font-weight: 400; color: var(--muted); font-size: 11.5px; }
.ci i { width: 8px; height: 8px; border-radius: 50%; background: #34c759; grid-row: span 2; }
.ci.now { border-color: var(--accent); background: var(--accent-soft); }
.ci.now i { background: var(--accent); }
.chk-form { display: grid; gap: 10px; align-content: start; }
.f2 label { display: block; font-size: 11.5px; color: var(--muted); margin-bottom: 3px; }
.f2 .v { position: relative; height: 34px; display: flex; align-items: center; padding: 0 11px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface-2); font-weight: 500; }
.f2.unsure .v { border: 1.5px solid var(--accent); background: var(--surface); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent); }
.f2 .was { color: var(--accent-text); font-weight: 500; }
.f2 .now { position: absolute; left: 11px; opacity: 0; }
.chk-key { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 12px; color: var(--muted); }
.kbd { display: inline-block; font-family: var(--mono-font); font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 6px; border: 1px solid var(--border); border-bottom-width: 3px; background: var(--surface); color: var(--text); }
.chk-done { display: inline-flex; align-items: center; gap: 8px; justify-self: start; padding: 8px 12px; border-radius: 10px; background: var(--accent); color: var(--on-accent); font-weight: 600; font-size: 12.5px; opacity: 0; transform: translateY(6px); }
.chk-done .i { width: 16px; height: 16px; }
.pane.is-on .f2 .was { animation: out 400ms 1.2s both; }
.pane.is-on .f2 .now { animation: in 400ms 1.3s both; }
.pane.is-on .f2.unsure .v { animation: settle 500ms 2.3s both; }
.pane.is-on .kbd { animation: press 300ms 2.1s both; }
.pane.is-on .chk-done { animation: in-up 450ms 2.5s both; }
.pane.is-on .ci.now i { animation: green 300ms 2.5s both; }
@keyframes out { to { opacity: 0; transform: translateY(-4px); } }
@keyframes in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes in-up { to { opacity: 1; transform: none; } }
@keyframes press { 50% { transform: translateY(2px); border-bottom-width: 1px; background: var(--accent-soft); } }
@keyframes settle { to { border-color: var(--border); box-shadow: none; background: var(--surface-2); } }
@keyframes green { to { background: #34c759; } }
@media (max-width: 899px) { .chk { grid-template-columns: 1fr; gap: 10px; } .chk-list { grid-template-columns: repeat(3, 1fr); } .ci { padding: 6px 8px; font-size: 11.5px; } .ci small { display: none; } .ci { white-space: nowrap; overflow: hidden; } .f2:nth-child(3) { display: none; } }

/* 04 Buchen – the booking, line by line */
.jr-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.jr-head b { display: block; font-size: 14px; }
.jr-head small { color: var(--muted); font-size: 11.5px; }
.jr { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; font-variant-numeric: tabular-nums; }
.jr-row { display: grid; grid-template-columns: 1fr 76px 76px; gap: 8px; padding: 9px 12px; align-items: center; }
.jr-row span:not(:first-child) { text-align: right; }
.jr-row + .jr-row { border-top: 1px solid var(--border); }
.jr-row.th { font-size: 11.5px; color: var(--muted); background: var(--surface-2); padding-top: 7px; padding-bottom: 7px; }
.jr-row code { font-family: var(--mono-font); font-size: 11.5px; color: var(--accent-text); margin-right: 6px; }
.jr-row.sum { font-weight: 600; background: var(--surface-2); }
.pane.is-on .jr-row[style] { animation: rowin 480ms cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(250ms + var(--i) * 260ms); }
.pane.is-on .jr-row.sum { animation: fadein 400ms 1.1s both; }
.learn { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; padding: 10px 12px; border-radius: 11px; background: var(--accent-soft); font-size: 12.5px; color: var(--text); }
.learn .i { width: 16px; height: 16px; color: var(--accent-text); margin-top: 1px; }
.pane.is-on .learn { animation: rowin 500ms 1.5s cubic-bezier(.2,.8,.2,1) both; }

/* 05 Steuer – the UVA moves with the booking */
.tabs { display: flex; align-items: center; gap: 4px; margin-bottom: 12px; }
.tabs span { font-size: 12px; font-weight: 500; padding: 5px 11px; border-radius: 8px; color: var(--muted); }
.tabs span.on { background: var(--surface-2); color: var(--text); }
.tabs em { margin-left: auto; font-style: normal; font-size: 11.5px; color: var(--accent-text); background: var(--accent-soft); padding: 3px 9px; border-radius: 99px; white-space: nowrap; }
.kz2 { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.kz2 .kz-row:first-child { border-top: 0; }
.kz-row { display: grid; grid-template-columns: 52px 1fr auto 18px; gap: 12px; align-items: center; padding: 11px 14px; border-top: 1px solid var(--border); font-size: 0.93em; }
.kz-row code { font-family: var(--mono); font-size: 0.85rem; color: var(--accent-text); }
.kz-row .lbl { color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kz-row .val { position: relative; font-variant-numeric: tabular-nums; font-weight: 500; text-align: right; display: inline-grid; }
.kz-row .val > span { grid-area: 1 / 1; }
.kz-row .val .new { opacity: 0; }
.kz-row .i { width: 15px; height: 15px; color: var(--muted); }
.kz-row.total .lbl, .kz-row.total .val { color: var(--text); font-weight: 600; }
.kz-row .plus { font-weight: 600; font-size: 11px; color: var(--accent-text); background: var(--accent-soft); padding: 1px 6px; border-radius: 99px; margin-left: 4px; opacity: 0; }
.copied { position: relative; display: grid; place-items: center; }
.copied em { position: absolute; right: -4px; bottom: calc(100% + 6px); font-style: normal; font-size: 11px; font-weight: 600; color: var(--bg); background: var(--text); padding: 3px 7px; border-radius: 6px; white-space: nowrap; opacity: 0; }
.pane.is-on .kz-row.hot { animation: flash 1.2s 0.6s both; }
.pane.is-on .kz-row .plus { animation: in 400ms 0.6s both; }
.pane.is-on .kz-row .val .old { animation: out 300ms 0.9s both; }
.pane.is-on .kz-row .val .new { animation: in 300ms 1s both; }
.pane.is-on .kz-row.total .val .old { animation-delay: 1.3s; }
.pane.is-on .kz-row.total .val .new { animation-delay: 1.4s; }
.pane.is-on .copied .i { animation: press-i 300ms 2.2s both; }
.pane.is-on .copied em { animation: in 300ms 2.3s both; }
@keyframes flash { 0%, 100% { background: transparent; } 30% { background: var(--accent-soft); } }
@keyframes press-i { 50% { transform: scale(0.8); color: var(--accent-text); } to { color: var(--accent-text); } }
@media (max-width: 480px) { .kz-row { grid-template-columns: 48px 1fr auto 15px; gap: 8px; padding: 9px 10px; } .tabs span:nth-child(3) { display: none; } }

/* 06 Kanzlei – export in one go */
.ex { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ex li { display: flex; align-items: center; gap: 11px; padding: 9px 11px; border: 1px solid var(--border); border-radius: 11px; }
.ex b { display: block; font-weight: 600; }
.ex small { display: block; font-size: 11.5px; color: var(--muted); }
.cb { width: 18px; height: 18px; flex: none; border-radius: 5px; border: 1.5px solid var(--border); display: grid; place-items: center; }
.cb.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.cb .i { width: 12px; height: 12px; stroke-width: 3; }
.ex-bar { height: 6px; margin: 16px 0 12px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.ex-bar span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--accent); }
.ex-files { display: flex; flex-wrap: wrap; gap: 6px; }
.ex-files span { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono-font); font-size: 11.5px; padding: 6px 10px; border-radius: 8px; background: var(--surface-2); opacity: 0; }
.ex-files .i { width: 14px; height: 14px; color: #34c759; }
.pane.is-on .ex-bar span { animation: fill 1.4s 0.4s cubic-bezier(.4,.1,.2,1) both; }
.pane.is-on .ex-files span { animation: in 400ms 1.9s both; }
.pane.is-on .ex-files span + span { animation-delay: 2.1s; }
@keyframes fill { to { width: 100%; } }
@media (max-width: 480px) { .ex li { padding: 7px 9px; } .ex small { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .pane, .sw-pill, .story.js .step, .step::after { transition: none; }
  .pane.is-on *, .pane.is-on .paper .scan { animation: none !important; }
  .paper .scan { display: none; }
  .fld .v span { max-width: none; }
  .fld .dot, .ci.now i { background: #34c759; }
  .booked, .chk-done, .ex-files span, .copied em, .kz-row .plus, .kz-row .val .new, .f2 .now { opacity: 1; transform: none; }
  .kz-row .val .old, .f2 .was { opacity: 0; }
  .ex-bar span { width: 100%; }
}


/* questions – lines, not boxes */
.faq { max-width: 860px; border-top: 1px solid var(--border); }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary { cursor: pointer; font-weight: 600; font-size: 1.08rem; padding: 20px 0; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent-text); font-weight: 400; font-size: 1.4rem; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq details p { color: var(--muted); margin: 0 0 22px; max-width: 46em; }

/* Atlas: providers as one clean list, the three levels as a switch */
.providers { border-top: 1px solid var(--border); margin-top: 8px; }
.prov { display: grid; gap: 6px 32px; padding: 24px 0; border-bottom: 1px solid var(--border); }
@media (min-width: 760px) { .prov { grid-template-columns: 260px minmax(0, 1fr); } }
.prov h3 { display: flex; align-items: center; gap: 10px; margin: 0; }
.prov p { margin: 0; color: var(--muted); }
.levels { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 14px; background: var(--surface-2); margin: 8px 0 22px; }
.levels button { font: inherit; font-weight: 550; font-size: 0.95rem; padding: 10px 18px; border-radius: 10px; border: 0; background: none; color: var(--muted); cursor: pointer; }
.levels button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgb(0 0 0 / 0.1); }
.level-text { font-size: 1.15rem; max-width: 36em; margin: 0; min-height: 3.4em; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.pills span { padding: 9px 15px; border-radius: 18px 18px 18px 6px; background: var(--surface); border: 1px solid var(--hairline); font-size: 0.96rem; }
.pills.me span { border-radius: 18px 18px 6px 18px; background: var(--accent); color: var(--on-accent); border-color: transparent; }

/* pickers (site.js): one panel at a time */
[data-panel] > [data-v]:not(.on) { display: none; }
.level-text { margin: 0 0 10px; }

/* Download: one platform at a time */
.plat { display: none; }
.plat.on { display: block; animation: rowin 400ms cubic-bezier(.2,.8,.2,1) both; }
.plat ol { color: var(--muted); padding-left: 1.2em; margin: 12px 0 0; }
.qr { background: #fff; border-radius: 14px; padding: 10px; width: 132px; margin-top: 18px; border: 1px solid var(--border); }
.qr img { display: block; width: 100%; height: auto; }
.plat-tabs { margin: 26px 0 6px; }

/* Pläne: a voluntary survey. Offers as two big cards with the price, the rest as tiles – space instead of lines. */
.poll-top { display: grid; gap: 18px 48px; align-items: start; margin: 0 0 56px; }
@media (min-width: 900px) { .poll-top { grid-template-columns: minmax(0, 30rem) minmax(0, 1fr); } }
.poll-email { display: grid; gap: 6px; }
.poll-email label, .poll-form label.lbl { font-weight: 550; font-size: 0.95rem; }
.poll-email small, .poll-form small { color: var(--muted); font-size: 0.86rem; }
.poll-why { color: var(--muted); font-size: 0.93rem; }
@media (min-width: 900px) { .poll-why { padding-top: 30px; } }
.poll-why summary { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; list-style: none; color: var(--text); font-weight: 550; }
.poll-why summary::-webkit-details-marker { display: none; }
.poll-why summary .i { color: var(--accent-text); flex: none; margin-top: 3px; }
.poll-why p { margin: 10px 0 0 30px; }
.input { height: 48px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; width: 100%; }
textarea.input { height: auto; min-height: 80px; padding: 10px 14px; resize: vertical; }
.input:focus { outline: 3px solid rgb(10 95 224 / 0.3); border-color: var(--accent); }
.poll-group { margin: 0 0 64px; }
.poll-group h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin: 0 0 6px; }
.poll-group > p { color: var(--muted); margin: 0 0 22px; max-width: 46em; }
.poll-offers, .poll-tiles { display: grid; gap: 16px; }
@media (min-width: 760px) { .poll-offers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
@media (min-width: 640px) { .poll-tiles { grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); } }
.poll-card { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 22px; border-radius: 18px; background: var(--surface-2); min-width: 0; }
.poll-card h3 { margin: 8px 0 0; font-size: 1.08rem; }
.poll-card .poll-body { margin: 2px 0 0; color: var(--muted); font-size: 0.95rem; }
.poll-offers .poll-card { padding: 30px; border-radius: 22px; background: var(--surface); box-shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 12px 32px -18px rgb(0 0 0 / 0.25); }
.poll-offers .poll-card h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); }
.poll-price { margin: 4px 0 6px; color: var(--accent-text); font-weight: 650; font-size: clamp(1.5rem, 2.6vw, 2rem); letter-spacing: -0.01em; }
.poll-foot { width: 100%; margin-top: auto; padding-top: 16px; }
.poll-bar { height: 6px; border-radius: 99px; background: color-mix(in srgb, var(--muted) 18%, transparent); overflow: hidden; margin-bottom: 12px; }
.poll-bar span { display: block; height: 100%; background: var(--accent); border-radius: inherit; transition: width 600ms cubic-bezier(.2,.8,.2,1); }
.poll-votes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.vote { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border-radius: 11px; border: 0; background: var(--bg); color: var(--text); font: inherit; font-weight: 550; cursor: pointer; font-variant-numeric: tabular-nums; }
.poll-offers .vote { background: var(--surface-2); }
.vote:hover { background: color-mix(in srgb, var(--accent) 12%, var(--surface-2)); }
.vote[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
.vote:disabled { opacity: 0.6; cursor: default; }
.vote .i { width: 16px; height: 16px; }
.poll-share { margin-left: auto; color: var(--muted); font-size: 0.86rem; }
.poll-mine { color: var(--muted); font-size: 0.84rem; margin: 10px 0 0; }
.poll-card .poll-msg { margin-top: 8px; }
.poll-form { display: grid; gap: 12px; max-width: 36rem; }
.poll-checks { display: flex; flex-wrap: wrap; gap: 8px; }
.poll-checks label { display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; font-size: 0.94rem; }
.poll-checks input { accent-color: var(--accent); }
.poll-msg { margin: 0; font-size: 0.93rem; }
.poll-msg.err { color: #d70015; }
@media (prefers-color-scheme: dark) { .poll-msg.err { color: #ff6961; } }
.poll-msg.ok { color: var(--accent-text); }

/* Schnittstellen: tables and code for the technical part */
.api-wrap { overflow-x: auto; margin: 8px 0 18px; }
.api { width: 100%; border-collapse: collapse; font-size: 0.94rem; }
.api th, .api td { text-align: left; padding: 12px 14px 12px 0; border-bottom: 1px solid var(--border); vertical-align: top; }
.api th { color: var(--muted); font-weight: 550; font-size: 0.86rem; }
.api td:first-child { white-space: nowrap; }
pre { background: var(--surface); border: 1px solid var(--hairline); border-radius: 14px; padding: 16px 18px; overflow-x: auto; font-family: var(--mono); font-size: 0.85rem; line-height: 1.55; margin: 12px 0 18px; }
.cols { display: grid; gap: 32px 56px; }
@media (min-width: 960px) { .cols { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } }
.cols h3 { margin-top: 28px; }
.cols p { color: var(--muted); }

/* legal pages: comfortable text width, same header as everywhere */
.prose { max-width: 780px; padding: 56px 0 40px; }
.prose h1 { font-size: clamp(2.2rem, 4.5vw, 3rem); }
.prose h2 { font-size: 1.35rem; letter-spacing: -0.02em; margin: 44px 0 10px; }
.prose h3 { font-size: 1.06rem; margin: 26px 0 6px; }
.prose p, .prose li { color: var(--muted); }
.prose p { margin: 0 0 12px; }
.prose ul { padding-left: 1.2em; margin: 0 0 12px; }
.prose li { margin-bottom: 4px; }
.prose strong { color: var(--text); font-weight: 600; }
.prose dl { display: grid; grid-template-columns: max-content 1fr; gap: 10px 28px; margin: 16px 0; padding: 18px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.prose dt { font-weight: 550; }
.prose dd { margin: 0; color: var(--muted); }
@media (max-width: 560px) { .prose dl { grid-template-columns: 1fr; gap: 0; } .prose dd { margin-bottom: 10px; } }
.prose .updated { font-size: 0.9rem; }

/* footer – everything at the bottom of every page */
footer { border-top: 1px solid var(--hairline); padding: 56px 0 40px; color: var(--muted); font-size: 0.92rem; }
.foot { display: grid; gap: 32px 48px; }
@media (min-width: 860px) { .foot { grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); } }
.foot p { margin: 12px 0 0; max-width: 26em; }
.foot h4 { margin: 0 0 12px; font-size: 0.82rem; font-family: var(--mono-font); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text); }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.foot a { color: var(--muted); text-decoration: none; }
.foot a:hover { color: var(--text); text-decoration: underline; }
.foot-end { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--hairline); font-size: 0.86rem; }

/* things rise in once */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 560ms cubic-bezier(.2,.7,.2,1), transform 560ms cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
@keyframes rowin { from { opacity: 0; transform: translateY(-8px); } }
@keyframes fadein { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .plat.on { animation: none; } }