/* Scava start page. Dark, calm, precise; petrol is the only accent. Motion is added by home.js and only
   for people who have not asked their system to reduce motion. */
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("marke/ibm-plex-sans-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("marke/ibm-plex-sans-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --bg: #17191D;
  --bg-2: #1B1E23;
  --ink: #1E2227;
  --raised: #20252B;
  --raised-2: #282E35;
  --line: rgba(160, 193, 205, .11);
  --line-2: rgba(160, 193, 205, .2);
  --text: #EEF3F5;
  --soft: #AEBCC2;
  --dim: #7D8C93;
  --petrol: #2586A7;
  --petrol-hi: #52AFCF;
  --flaeche: #A0C1CD;
  --ok: #4CC38A;
  --radius: 18px;
  --maxw: 1180px;
  --font: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", "Cascadia Code", Consolas, "Liberation Mono", Menlo, monospace;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --nav: 68px;
  --foot: 88px;
  color-scheme: dark;
}
/* home/pager.js moves the page itself, one screen per scroll; the browser must not smooth it again. */
html.paged { scroll-behavior: auto; }
/* Touch screens scroll freely, without snapping, and every part is only as tall as its content (see "Touch
   screens" at the end). Whole screens one at a time are for a mouse or a trackpad (home/pager.js). */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 17px/1.6 var(--font); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg { display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: rgba(82, 175, 207, .35); }
:focus-visible { outline: 2px solid var(--petrol-hi); outline-offset: 3px; border-radius: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--petrol); color: #fff; padding: .5rem .9rem; border-radius: 10px; text-decoration: none; }
.skip:focus { top: 12px; }
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* ---- motion: hidden start states only when home.js will animate them ------------------------------ */
.motion [data-reveal] { opacity: 0; transform: translateY(18px); }
.motion [data-reveal-group] > * { opacity: 0; transform: translateY(18px); }
/* Decoration rests while the page glides to the next screen and wherever it is off screen
   (home/pager.js sets html.gliding, home/sections.js sets .off), so the glide gets every frame. */
html.gliding .page *, html.gliding .page *::before, html.gliding .page *::after,
.off *, .off *::before, .off *::after { animation-play-state: paused !important; }

/* ---- buttons ------------------------------------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border: 0; border-radius: 999px; padding: .78rem 1.25rem; font-weight: 600; font-size: .97rem; text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s; }
.btn-primary { color: #fff; background: linear-gradient(180deg, #2E9AC0, #2586A7); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 10px 28px -10px rgba(37, 134, 167, .85); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26), 0 14px 34px -10px rgba(82, 175, 207, .9); }
.btn-primary:active { transform: translateY(0) scale(.98); }
.btn-ghost { color: var(--text); background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px var(--line-2); }
.btn-ghost:hover { background: rgba(255, 255, 255, .08); }
.btn-sm { padding: .5rem .95rem; font-size: .9rem; }
.btn svg { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.btn:hover svg { transform: translateX(3px); }

/* ---- navigation ---------------------------------------------------------------------------------- */
.nav { position: fixed; inset: 0 0 auto; z-index: 50; transition: background .3s, box-shadow .3s; }
.nav.scrolled { background: rgba(21, 23, 27, .94); box-shadow: 0 1px 0 var(--line); }
.nav-in { display: flex; align-items: center; gap: 2rem; height: 68px; }
.brand img { height: 22px; width: auto; }
.nav-links { display: flex; gap: 1.6rem; margin-left: auto; }
.nav-links a { color: var(--soft); text-decoration: none; font-size: .93rem; transition: color .2s; }
.nav-links a:hover { color: var(--text); }

/* ---- hero ---------------------------------------------------------------------------------------- */
/* Every part of the page is at least one screen high (data-page); its content sits in the middle. */
.page { min-height: 100vh; min-height: 100svh; }
.hero { position: relative; display: flex; flex-direction: column; padding: var(--nav) 0 0; overflow: hidden; isolation: isolate; }
.hero-main { flex: 1; display: flex; align-items: center; padding: 3vh 0; }
.field { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; touch-action: pan-y; }
.hero-glow { position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(900px 520px at 12% 8%, rgba(37, 134, 167, .22), transparent 60%),
    radial-gradient(700px 600px at 92% 70%, rgba(37, 134, 167, .14), transparent 62%),
    linear-gradient(180deg, transparent 70%, var(--bg)); }
.hero-in { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 56px; align-items: center; }
.hero-copy { container-type: inline-size; }
.pill { display: inline-flex; align-items: center; gap: .55rem; margin: 0 0 1.4rem; padding: .38rem .8rem .38rem .62rem; border-radius: 999px; font-size: .84rem; color: var(--soft); background: rgba(255, 255, 255, .035); box-shadow: inset 0 0 0 1px var(--line-2); }
.pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--petrol-hi); box-shadow: 0 0 0 0 rgba(82, 175, 207, .7); animation: ping 2.4s var(--ease) infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(82, 175, 207, .6); } 70%, 100% { box-shadow: 0 0 0 9px rgba(82, 175, 207, 0); } }
.hero-title { margin: 0; font-weight: 600; font-size: clamp(2.6rem, 4.7vw, 4.4rem); line-height: 1.03; letter-spacing: -.038em; }
/* The longest line, "to your customer", is 8.71 em wide (measured); with a little room it always fits. */
@supports (font-size: 1cqi) { .hero-title { font-size: min(4.4rem, 100cqi / 9.1); } }
.hero-title .line { display: block; }
/* The word sits on the same baseline as "to". The gradient is painted through the letters, so each box
   reaches above the ascenders and below the descenders (padding), without changing the line (margin). */
.rotator { position: relative; display: inline-block; vertical-align: baseline; }
/* The headline's tight letter-spacing makes each letter's box narrower than the letter (v, y reach past
   it), so the box gets room on every side too; the negative margin keeps the spacing as it was. */
.rot-word, .rot-l { background-image: linear-gradient(92deg, #6CC4E2 0%, #52AFCF 40%, #A0C1CD 100%); -webkit-background-clip: text; background-clip: text; color: transparent; padding: .16em .12em .26em; margin: -.16em -.12em -.26em; }
.rot-word { display: inline-block; white-space: nowrap; }
.rot-word.split { background-image: none; padding: 0; margin: 0; }
.rot-l { display: inline-block; background-repeat: no-repeat; will-change: transform, opacity; }
.lead { margin: 1.6rem 0 0; max-width: 37rem; font-size: clamp(1.02rem, 1.25vw, 1.15rem); color: var(--soft); }
/* A soft halo in the page colour keeps the copy readable while the field moves behind it. */
.hero-copy .lead, .hero-copy .facts, .hero-copy .join-note { text-shadow: 0 0 14px var(--bg), 0 0 4px var(--bg); }
.lead b { color: var(--text); font-weight: 600; }
.facts { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin: 1.4rem 0 0; padding: 0; list-style: none; color: var(--dim); font-size: .9rem; }
.facts li { display: inline-flex; align-items: center; gap: .45rem; }
.facts li::before { content: ""; width: 14px; height: 14px; background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='%2352AFCF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* ---- waitlist form (hero and end of page) -------------------------------------------------------- */
.join { position: relative; margin: 2rem 0 0; max-width: 33rem; }
.join-box { position: relative; min-height: 60px; padding: 6px; border-radius: 999px; background: rgba(13, 15, 18, .9); box-shadow: inset 0 0 0 1px var(--line-2), 0 20px 50px -25px rgba(0, 0, 0, .8); transition: box-shadow .25s; }
.join-box:focus-within { box-shadow: inset 0 0 0 1px rgba(82, 175, 207, .65), 0 0 0 4px rgba(37, 134, 167, .18), 0 20px 50px -25px rgba(0, 0, 0, .8); }
.join-step { display: flex; align-items: center; gap: 8px; min-height: 48px; }
.join-step[hidden] { display: none; }
.join input[type="email"] { flex: 1; min-width: 0; height: 48px; padding: 0 1.1rem; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; font-size: 1rem; }
.join input::placeholder { color: var(--dim); }
.join-q { margin: 0 .2rem 0 .9rem; font-size: .9rem; color: var(--soft); white-space: nowrap; }
.chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; height: 40px; padding: 0 .9rem; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .06); color: var(--text); font-size: .9rem; font-weight: 500; cursor: pointer; box-shadow: inset 0 0 0 1px var(--line-2); transition: background .2s, box-shadow .2s, transform .15s; }
.chip:hover { background: rgba(37, 134, 167, .25); box-shadow: inset 0 0 0 1px rgba(82, 175, 207, .55); }
.chip:active { transform: scale(.96); }
.chip:disabled { cursor: progress; }
.chip.picked { background: var(--petrol); color: #fff; box-shadow: inset 0 0 0 1px var(--petrol-hi), 0 0 18px -4px rgba(82, 175, 207, .8); }
.join-done { padding: 0 .6rem 0 .5rem; }
.join-done svg { flex: none; width: 34px; height: 34px; }
.join-done svg circle { fill: rgba(76, 195, 138, .15); }
.join-done svg path { fill: none; stroke: var(--ok); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 0; }
.join-done p { margin: 0; font-size: .95rem; color: var(--soft); line-height: 1.35; }
.join-done b { color: var(--text); }
.join-msg { min-height: 1.3em; margin: .55rem 1.1rem 0; font-size: .86rem; color: #F2A39A; }
.join-note { margin: .2rem 1.1rem 0; font-size: .84rem; color: var(--dim); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ---- hero demo: the agent publishes, the browser opens ------------------------------------------- */
.demo { position: relative; height: 470px; }
/* The illustrations are pictures (werkzeuge/darstellungen.mjs renders them from werkzeuge/darstellungen/
   quelle.html, styled by the rules further down): their text cannot be selected, copied or dragged out.
   The rules for the inside of the windows, cards and panels below are only used for that rendering.
   That source page loads this file too, so rules that change how a picture looks (display, width, height)
   only match the pictures themselves (their file in /static/home/bilder/, or the img of a <picture>), never
   the icons of the source. test/home-browser.test.js checks that every icon there keeps its size. */
.demo img, .beam img, .viz img, .device img, .panel img { -webkit-user-select: none; user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none; pointer-events: none; }
img[src^="/static/home/bilder/"] { display: block; }
.demo-base { width: 100%; height: auto; }
.demo-part { position: absolute; height: auto; }
.demo-fab { border-radius: 999px; box-shadow: 0 8px 20px -6px rgba(37, 134, 167, .7); }
.demo-cursor { position: absolute; background: var(--petrol-hi); animation: blink 1s steps(1) infinite; }
.demo-spin { position: absolute; box-sizing: border-box; border-radius: 50%; border: 2px solid rgba(82, 175, 207, .25); border-top-color: var(--petrol-hi); animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
picture.node-img { display: block; }
img.node-img, .node-img img { max-width: 100%; height: auto; border-radius: 16px; box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .9); }
.viz picture { display: block; margin: -24px; }
.viz picture img { max-width: 100%; height: auto; }
.device picture img { width: 100%; height: auto; }
picture.panel { display: block; }
picture.panel img { width: 100%; height: auto; }
.win-bar { display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; }
.win-bar i { width: 11px; height: 11px; border-radius: 50%; background: #3A4148; }
.term { position: absolute; left: 0; top: 0; width: 88%; border-radius: 16px; background: #0E1114; box-shadow: inset 0 0 0 1px var(--line-2), 0 40px 80px -30px rgba(0, 0, 0, .9); overflow: hidden; transform-origin: 30% 20%; }
.term .win-bar { background: rgba(255, 255, 255, .025); box-shadow: inset 0 -1px 0 var(--line); }
.term .win-bar span { margin-left: 8px; font-size: .78rem; color: var(--dim); }
.term-body { padding: 18px 20px 22px; font: 13.5px/1.75 var(--mono); color: #CFE0E6; min-height: 200px; }
.term-body p { margin: 0; }
.t-prompt { color: var(--text); }
.t-caret { color: var(--petrol-hi); margin-right: .4rem; }
.t-cursor { display: inline-block; width: 8px; height: 1.05em; margin-left: 1px; vertical-align: -2px; background: var(--petrol-hi); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.t-line { margin-top: .5rem !important; color: var(--soft); }
.t-dim { color: var(--dim); }
.t-ok { display: inline-block; width: 1.1em; color: var(--ok); margin-right: .3rem; }
.t-ok.busy { color: var(--petrol-hi); }
.t-url { color: var(--petrol-hi); }
.browser { position: absolute; right: 0; bottom: 0; width: 84%; border-radius: 16px; background: #F7F9FA; color: #1E2227; overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 50px 90px -30px rgba(0, 0, 0, .95), 0 0 120px -40px rgba(37, 134, 167, .55); transform-origin: 70% 80%; }
.browser .win-bar { background: #E9EEF0; }
.browser .win-bar i { background: #CBD3D8; }
.url { display: flex; align-items: center; gap: 6px; margin-left: 10px; flex: 1; height: 24px; padding: 0 10px; border-radius: 8px; background: #fff; font-size: .74rem; color: #4A555D; box-shadow: inset 0 0 0 1px #DCE3E6; }
.url svg { width: 11px; height: 11px; }
.browser-body { position: relative; height: 262px; }
.signin { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; text-align: center; font-size: .9rem; }
.signin img { width: 30px; height: 30px; margin-bottom: 2px; }
.signin b { font-size: 1rem; margin-bottom: 4px; }
.b-google, .b-code { display: flex; align-items: center; justify-content: center; gap: 8px; width: 230px; height: 38px; border-radius: 10px; font-weight: 600; font-size: .85rem; }
.b-google { background: #fff; box-shadow: inset 0 0 0 1px #D5DDE1; }
/* Google's own "G", as its sign-in branding guidelines ask for on "Continue with Google" buttons. */
.b-google::before, .mini-btn.g::before { content: ""; flex: none; width: 16px; height: 16px; background: url("marke/google-g.svg") center / contain no-repeat; }
.b-code { background: #1E2227; color: #fff; }
.app { position: absolute; inset: 0; padding: 18px 20px; opacity: 0; }
.app-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.app-head b { font-size: 1.05rem; }
.app-head span { font-size: .8rem; color: #6B777F; }
.rows { margin: 0; padding: 0; list-style: none; }
.rows li { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-top: 1px solid #E4EAED; font-size: .9rem; }
.rows li span { margin-left: auto; color: #6B777F; font-size: .82rem; }
.rows i { width: 9px; height: 9px; border-radius: 50%; }
.c1 { background: #2586A7; } .c2 { background: #A0C1CD; } .c3 { background: #1E2227; }
.fab { position: absolute; right: 14px; bottom: 14px; padding: 8px 13px; border-radius: 999px; background: #2586A7; color: #fff; font-size: .78rem; font-weight: 600; box-shadow: 0 8px 20px -6px rgba(37, 134, 167, .7); }

/* ---- tools marquee ------------------------------------------------------------------------------- */
.tools { position: relative; padding: 16px 0 18px; border-top: 1px solid var(--line); background: rgba(19, 21, 25, .86); }
.tools-label { margin: 0 0 12px; text-align: center; font-size: .84rem; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee-track { display: flex; width: max-content; animation: marquee var(--duration, 38s) linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track span { display: inline-flex; align-items: center; gap: .55rem; margin-right: 14px; padding: .62rem 1.1rem; border-radius: 999px; font-weight: 500; font-size: .98rem; color: var(--soft); background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px var(--line); white-space: nowrap; }
.marquee-track span::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--petrol); transform: rotate(45deg); }
/* --round is the width of one round of names (home/sections.js); without script, half the track. */
@keyframes marquee { to { transform: translateX(calc(-1 * var(--round, 50%))); } }

/* ---- sections ------------------------------------------------------------------------------------ */
.section { position: relative; padding: clamp(80px, 11vw, 140px) 0; }
.section.page { display: flex; flex-direction: column; justify-content: center; padding: calc(var(--nav) + 3vh) 0 4vh; }
.section.alt { background: var(--bg-2); border-block: 1px solid var(--line); }
.eyebrow { margin: 0 0 .9rem; font-size: .84rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--petrol-hi); }
.h2 { margin: 0; max-width: 18ch; text-wrap: balance; font-size: clamp(2rem, 4.2vw, 3.3rem); line-height: 1.07; letter-spacing: -.03em; font-weight: 600; }
.sub { margin: 1.1rem 0 0; max-width: 40rem; color: var(--soft); font-size: 1.08rem; }
.center { text-align: center; }
/* Heading on the left, its explanation on the right: one screen holds the heading and all the cards. */
.split-head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 48px; align-items: end; }
.split-head .h2 { max-width: none; }
.split-head .sub { margin: 0 0 .3rem; }
.center .h2, .center .sub { margin-left: auto; margin-right: auto; }

/* ---- how it works: beams from your agent through Scava to your team ------------------------------- */
.beam { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 40px; margin: 5vh auto 0; max-width: 980px; min-height: 320px; }
.beam-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.beam-col { position: relative; z-index: 1; display: grid; gap: 18px; }
.beam-col.left { justify-items: start; }
.beam-col.right { justify-items: end; }
.node { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; background: linear-gradient(180deg, var(--raised-2), var(--raised)); box-shadow: inset 0 0 0 1px var(--line-2), 0 18px 40px -24px rgba(0, 0, 0, .9); }
.node small { display: block; color: var(--dim); font-size: .78rem; }
.node b { font-weight: 600; font-size: .95rem; }
.node.agent { flex-direction: column; align-items: flex-start; gap: 10px; padding: 18px; min-width: 230px; }
.agent-top { display: flex; align-items: center; gap: 10px; }
.icon-box { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: rgba(37, 134, 167, .18); box-shadow: inset 0 0 0 1px rgba(82, 175, 207, .35); color: var(--petrol-hi); font: 600 .9rem var(--mono); }
.agent-cmd { font: 12.5px/1.5 var(--mono); color: var(--soft); background: rgba(0, 0, 0, .28); border-radius: 9px; padding: 8px 10px; box-shadow: inset 0 0 0 1px var(--line); }
.agent-cmd em { font-style: normal; color: var(--petrol-hi); }
.hub { position: relative; display: grid; place-items: center; width: 116px; height: 116px; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #2B3239, #1C2126); box-shadow: inset 0 0 0 1px rgba(82, 175, 207, .45), 0 0 60px -6px rgba(37, 134, 167, .55); }
.hub img:not(.hub-label) { width: 52px; height: 52px; }
.hub::before, .hub::after { content: ""; position: absolute; inset: -14px; border-radius: 50%; border: 1px solid rgba(82, 175, 207, .28); animation: halo 3.2s var(--ease) infinite; }
.hub::after { animation-delay: 1.6s; }
@keyframes halo { 0% { transform: scale(.82); opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } }
.hub-label { position: absolute; top: calc(100% + 26px); left: 50%; transform: translateX(-50%); white-space: nowrap; text-align: center; font-size: .82rem; color: var(--dim); }
.av { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; font-weight: 600; font-size: .9rem; color: #fff; }
.a1 { background: linear-gradient(135deg, #2E9AC0, #1F6F8C); }
.a2 { background: linear-gradient(135deg, #8FB6C3, #5E8795); }
.a3 { background: linear-gradient(135deg, #3A434B, #262C32); box-shadow: inset 0 0 0 1px var(--line-2); }
.node.person { min-width: 210px; }
.beam-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin: 5vh 0 0; padding: 0; list-style: none; counter-reset: step; }
.beam-steps li { padding-top: 18px; border-top: 1px solid var(--line-2); }
.beam-steps h3 { margin: 0 0 .35rem; font-size: 1.08rem; }
.beam-steps h3 span { color: var(--petrol-hi); font: 500 .85rem var(--mono); margin-right: .5rem; }
.beam-steps p { margin: 0; color: var(--soft); font-size: .97rem; }
.beam-path { fill: none; stroke: rgba(160, 193, 205, .18); stroke-width: 1.5; }
.beam-light { fill: none; stroke: var(--petrol-hi); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 16 184; stroke-dashoffset: 16; animation: beam 3.2s cubic-bezier(.5, 0, .3, 1) infinite; }
@keyframes beam { 0% { stroke-dashoffset: 16; } 55%, 100% { stroke-dashoffset: -100; } }

/* ---- features: bento grid with a glow that follows the cursor ------------------------------------- */
.bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 4vh; }
.card { position: relative; display: flex; flex-direction: column; min-height: 240px; padding: 22px; border-radius: var(--radius); background: linear-gradient(180deg, rgba(40, 46, 53, .75), rgba(30, 35, 40, .75)); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; isolation: isolate; --x: -500px; --y: -500px; }
.card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; z-index: 2; pointer-events: none;
  background: radial-gradient(260px circle at var(--x) var(--y), rgba(82, 175, 207, .95), rgba(37, 134, 167, .35) 40%, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.card::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(420px circle at var(--x) var(--y), rgba(37, 134, 167, .14), transparent 60%); }
.card.span-2 { grid-column: span 2; }
.card h3 { margin: auto 0 .3rem; font-size: 1.1rem; letter-spacing: -.01em; }
.card p { margin: 0; color: var(--soft); font-size: .94rem; line-height: 1.5; }
.viz { position: relative; margin-bottom: 18px; }
.code { margin: 0; padding: 14px 16px; border-radius: 12px; background: rgba(0, 0, 0, .3); box-shadow: inset 0 0 0 1px var(--line); font: 13px/1.65 var(--mono); color: #CFE0E6; white-space: pre; overflow: hidden; }
.card:not(.span-2) .code { padding: 11px 13px; font-size: 11.5px; line-height: 1.5; }
.code .k { color: var(--flaeche); } .code .s { color: #7FD0B0; } .code .f { color: var(--petrol-hi); } .code .p { color: var(--dim); }
.mini-signin { display: flex; gap: 10px; flex-wrap: wrap; }
.mini-btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 10px; font-size: .88rem; font-weight: 600; background: #fff; color: #1E2227; }
.mini-btn.dark { background: rgba(0, 0, 0, .35); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); }
.share-row { display: flex; flex-wrap: wrap; gap: 8px; }
.tag { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; background: rgba(37, 134, 167, .16); box-shadow: inset 0 0 0 1px rgba(82, 175, 207, .35); font-size: .84rem; color: #CFE7EF; }
.avatars { display: flex; margin-top: 10px; }
.avatars span { width: 32px; height: 32px; margin-left: -8px; border-radius: 50%; display: grid; place-items: center; font-size: .78rem; font-weight: 600; color: #fff; box-shadow: 0 0 0 2px #22272D; }
.avatars span:first-child { margin-left: 0; }
.bubble { display: inline-block; max-width: 100%; padding: 12px 14px; border-radius: 14px 14px 14px 4px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px var(--line-2); font-size: .9rem; }
.bubble small { display: block; color: var(--dim); font-size: .76rem; margin-bottom: 2px; }
.bubble-actions { display: flex; gap: 8px; margin-top: 10px; }
.bubble-actions span { height: 30px; padding: 0 12px; display: inline-flex; align-items: center; border-radius: 8px; font-size: .8rem; font-weight: 600; }
.bubble-actions .yes { background: var(--petrol); color: #fff; }
.bubble-actions .no { box-shadow: inset 0 0 0 1px var(--line-2); color: var(--soft); }
.versions { display: flex; align-items: center; gap: 0; }
.versions span { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font: 600 .78rem var(--mono); background: rgba(0, 0, 0, .3); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--soft); }
.versions span.now { background: var(--petrol); color: #fff; box-shadow: 0 0 24px -4px rgba(82, 175, 207, .8); }
.versions i { width: 34px; height: 1px; background: var(--line-2); }
.shield-list { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; font-size: .88rem; color: var(--soft); }
.shield-list li { display: flex; align-items: center; gap: 9px; }
.shield-list li::before { content: ""; width: 16px; height: 16px; flex: none; background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.5l5 2v4c0 3.2-2.2 5.6-5 6.9C5.2 13.1 3 10.7 3 7.5v-4z' fill='none' stroke='%2352AFCF' stroke-width='1.4'/%3E%3Cpath d='M5.8 8l1.6 1.6L10.4 6.6' fill='none' stroke='%2352AFCF' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E"); }
.shield-viz { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.shield-big { flex: none; width: 38px; height: 44px; }

/* ---- preview: the screen tilts up as you scroll ------------------------------------------------- */
.preview { overflow: hidden; }
.stage-3d { perspective: 1400px; margin-top: 4vh; }
.device { position: relative; max-width: 1000px; margin: 0 auto; border-radius: 18px; background: #F7F9FA; color: #1E2227; overflow: hidden; transform-origin: 50% 0%; box-shadow: 0 0 0 1px rgba(255, 255, 255, .07), 0 80px 120px -50px rgba(0, 0, 0, .95), 0 0 160px -60px rgba(37, 134, 167, .6); }
.motion .device { transform: rotateX(22deg) scale(.9); }
.device .win-bar { background: #E9EEF0; height: 42px; }
.device .win-bar i { background: #CBD3D8; }
.device .url { max-width: 420px; margin: 0 auto; flex: 0 1 420px; }
.dv { display: grid; grid-template-columns: 1fr 300px; min-height: 430px; }
.dv-main { padding: 26px 30px; }
.dv-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.dv-head h4 { margin: 0; font-size: 1.35rem; letter-spacing: -.01em; }
.dv-head span { font-size: .85rem; color: #6B777F; }
.dv-form { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 8px; margin-bottom: 18px; }
.dv-form span { height: 38px; border-radius: 9px; background: #fff; box-shadow: inset 0 0 0 1px #DCE3E6; font-size: .8rem; color: #8B969D; display: flex; align-items: center; padding: 0 10px; }
.dv-form b { height: 38px; padding: 0 16px; display: flex; align-items: center; border-radius: 9px; background: #1E2227; color: #fff; font-size: .82rem; }
.dv-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.dv-table th { text-align: left; font-size: .76rem; font-weight: 600; color: #6B777F; text-transform: uppercase; letter-spacing: .05em; padding: 0 8px 8px; }
.dv-table td { padding: 11px 8px; border-top: 1px solid #E4EAED; }
.dv-table .you { font-size: .7rem; padding: 2px 7px; border-radius: 999px; background: #E3F1F6; color: #2586A7; font-weight: 600; }
.dv-side { position: relative; background: #EEF3F5; border-left: 1px solid #E0E7EA; padding: 22px; }
.wish-panel { position: absolute; right: 18px; bottom: 64px; left: 18px; padding: 16px; border-radius: 14px; background: #fff; box-shadow: 0 18px 40px -12px rgba(30, 34, 39, .35), 0 0 0 1px #E0E7EA; font-size: .86rem; }
.wish-panel b { display: block; margin-bottom: 8px; font-size: .95rem; }
.wish-text { padding: 10px 12px; min-height: 64px; border-radius: 9px; box-shadow: inset 0 0 0 1px #2586A7; color: #1E2227; }
.wish-row { display: flex; justify-content: space-between; margin-top: 10px; }
.wish-row span { height: 30px; padding: 0 12px; display: inline-flex; align-items: center; border-radius: 8px; font-size: .78rem; font-weight: 600; }
.wish-row .pt { color: #2586A7; box-shadow: inset 0 0 0 1px #2586A7; }
.wish-row .send { background: #2586A7; color: #fff; }
.dv-side .fab { right: 18px; bottom: 18px; }
.side-title { font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: #6B777F; margin-bottom: 10px; }
.side-stat { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #E0E7EA; font-size: .86rem; }

/* ---- change requests: sticky stage while the steps scroll past --------------------------------- */
/* Change requests: on wide screens the section is four screens high and its content stays put (sticky);
   each screen of scrolling is one step of the story (home/sections.js sets .on and --p). */
.requests.page { display: block; padding: 0; border-block: 0; box-shadow: inset 0 1px 0 var(--line), inset 0 -1px 0 var(--line); } /* a painted edge: a real border would move the story by a pixel at its first and last step */
.pin { display: flex; align-items: center; min-height: 100vh; min-height: 100svh; padding: calc(var(--nav) + 3vh) 0 4vh; }
.loop { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 56px; align-items: center; }
.loop-steps { position: relative; margin: 4vh 0 0; padding: 0 0 0 28px; list-style: none; }
.loop-steps::before, .loop-steps::after { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 2px; border-radius: 2px; }
.loop-steps::before { background: var(--line-2); }
.loop-steps::after { background: linear-gradient(180deg, var(--petrol-hi), var(--petrol)); transform-origin: top; transform: scaleY(var(--p, 0)); box-shadow: 0 0 12px rgba(82, 175, 207, .6); transition: transform .9s var(--ease); }
.loop-step { display: flex; flex-direction: column; padding: 9px 0 10px; }
.loop-live .loop-step { opacity: .38; }
.loop-live .loop-step.on { opacity: 1; }
.loop-step .n { font: 500 .85rem var(--mono); color: var(--petrol-hi); }
.loop-step h3 { margin: .3rem 0 0; font-size: clamp(1.25rem, 2vw, 1.6rem); letter-spacing: -.02em; line-height: 1.15; }
.loop-step p { margin: .4rem 0 0; color: var(--soft); max-width: 28rem; font-size: .97rem; }
/* Nothing changes size when the step changes (that made the list jump): only brightness and colour. */
.loop-live .loop-step { transition: opacity .6s var(--ease); }
.loop-step h3, .loop-step .n { transition: color .6s var(--ease); }
.loop-live .loop-step:not(.on) .n { color: var(--dim); }
.loop-stage { position: relative; height: 440px; }
@media (min-width: 981px) {
  .requests.page { height: 400vh; height: 400svh; }
  .pin { position: sticky; top: 0; height: 100vh; height: 100svh; }
}
.stage { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transform: translateY(14px) scale(.98); transition: opacity .7s var(--ease), transform .8s var(--ease); pointer-events: none; }
.stage.on { opacity: 1; transform: none; }
.panel { width: min(100%, 470px); border-radius: 18px; overflow: hidden; box-shadow: 0 0 0 1px var(--line-2), 0 50px 90px -40px rgba(0, 0, 0, .95), 0 0 120px -60px rgba(37, 134, 167, .7); }
.panel.light { background: #F7F9FA; color: #1E2227; }
.panel.dark { background: #0E1114; color: #CFE0E6; }
.panel .win-bar { background: #E9EEF0; } .panel.dark .win-bar { background: rgba(255, 255, 255, .03); box-shadow: inset 0 -1px 0 var(--line); }
.panel .win-bar i { background: #CBD3D8; } .panel.dark .win-bar i { background: #3A4148; }
.pbody { padding: 22px; }
.mail-from { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.mail-from img { width: 30px; height: 30px; }
.mail-from b { display: block; font-size: .95rem; }
.mail-from small { color: #6B777F; font-size: .78rem; }
.mail-quote { padding: 12px 14px; border-left: 3px solid #2586A7; background: #EEF5F8; border-radius: 0 10px 10px 0; font-size: .92rem; margin: 10px 0 16px; }
.mail-btns { display: flex; gap: 8px; }
.mail-btns span { height: 36px; padding: 0 16px; display: inline-flex; align-items: center; border-radius: 9px; font-weight: 600; font-size: .85rem; }
.mail-btns .yes { background: #2586A7; color: #fff; box-shadow: 0 0 0 4px rgba(37, 134, 167, .2); }
.mail-btns .no { box-shadow: inset 0 0 0 1px #CBD3D8; color: #4A555D; }
.pbody.term-like { font: 13.5px/1.8 var(--mono); }
.pbody.term-like p { margin: 0; }
.highlight-col { box-shadow: inset 0 0 0 2px #2586A7; border-radius: 6px; }
.live-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: rgba(76, 195, 138, .15); color: #23905D; font-size: .78rem; font-weight: 600; }
.live-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #2DB073; }
.panel .rows { margin-bottom: 14px; }
.wish-panel.inline { position: static; margin-top: 4px; }
.mail-line { margin: 0 0 4px; font-size: .9rem; color: #4A555D; }
.bar-title { margin-left: 8px; font-size: .78rem; color: var(--dim); }
.half { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; margin: 6px 0 18px; }
.half span { height: 38px; display: flex; align-items: center; padding: 0 12px; border-radius: 9px; background: #fff; box-shadow: inset 0 0 0 1px #DCE3E6; font-size: .82rem; color: #8B969D; }
.half .half-on { color: #2586A7; font-weight: 600; box-shadow: inset 0 0 0 2px #2586A7; background: #EAF5F9; }
.half .half-on::before { content: ""; width: 26px; height: 15px; margin-right: 8px; border-radius: 999px; background: #2586A7 radial-gradient(circle at 18.5px 7.5px, #fff 5px, transparent 5.5px); }
.toast { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: #1E2227; color: #EEF3F5; box-shadow: 0 18px 40px -14px rgba(30, 34, 39, .6); }
.toast img { flex: none; }
.toast b { display: block; font-size: .9rem; }
.toast small { color: #AEBCC2; font-size: .8rem; }
.stage-inline, .dv-fab { display: none; }
.dot-c { display: inline-block; width: 9px; height: 9px; margin-right: 9px; border-radius: 50%; vertical-align: 1px; }
.highlight-col { padding: 1px 6px; margin-right: -6px; }

/* ---- FAQ ----------------------------------------------------------------------------------------- */
.faq-list { position: relative; max-width: 820px; margin: 4vh auto 0; }
.faq-item { border-bottom: 1px solid var(--line-2); }
.faq-q { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 19px 2px; font-size: 1.08rem; font-weight: 600; cursor: pointer; list-style: none; transition: color .2s; }
.faq-q::-webkit-details-marker { display: none; }
.faq-q:hover { color: #fff; }
.faq-q .plus { position: relative; flex: none; width: 18px; height: 18px; transition: transform .35s var(--ease); }
.faq-q .plus::before, .faq-q .plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px; border-radius: 2px; background: var(--petrol-hi); }
.faq-q .plus::after { transform: rotate(90deg); }
.faq-item[open] .plus { transform: rotate(45deg); }
/* The space under an answer is padding, not a margin of its text: the opening animation then takes it
   along instead of adding it in one jump at the end. */
.faq-a { padding-bottom: 22px; }
.faq-a p { margin: 0; color: var(--soft); max-width: 44rem; }
.faq-a p + p { margin-top: 12px; }
/* Browsers that can animate to "auto" open the answers smoothly; the others simply open them. */
@supports (interpolate-size: allow-keywords) {
  .faq-list { interpolate-size: allow-keywords; }
  .faq-item::details-content { height: 0; overflow: clip; transition: height .4s var(--ease), content-visibility .4s allow-discrete; }
  .faq-item[open]::details-content { height: auto; }
}

/* ---- final call to action ---------------------------------------------------------------------- */
.final { overflow: hidden; isolation: isolate; text-align: center; }
/* The last screen holds the final call and the footer together. */
.final.page { min-height: calc(100vh - var(--foot)); min-height: calc(100svh - var(--foot)); }
/* The field fades in from the top, so the last part does not start with a hard edge after the FAQ (Stefan, 05.11.2026). */
.final .field { z-index: -1; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 35%); mask-image: linear-gradient(to bottom, transparent, #000 35%); }
.final-card { position: relative; max-width: 760px; margin: 0 auto; padding: clamp(36px, 6vw, 64px) clamp(22px, 5vw, 56px); border-radius: 28px; background: radial-gradient(600px 300px at 50% 0%, rgba(37, 134, 167, .2), transparent 70%), rgba(23, 25, 29, .93); }
@property --angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.final-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--angle), transparent 0 70%, rgba(82, 175, 207, .9) 80%, #A0C1CD 85%, transparent 92%), linear-gradient(var(--line-2), var(--line-2));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: spin 6s linear infinite; }
@keyframes spin { to { --angle: 360deg; } }
.final .h2 { max-width: none; margin: 0 auto; }
.final .h2 .line { display: block; }
.final .join { margin: 2rem auto 0; text-align: left; }
.final-tag { margin: 1.4rem 0 0; font: 500 .9rem var(--mono); color: var(--dim); }

/* ---- footer -------------------------------------------------------------------------------------- */
/* A thin line that can be seen against the field of the last part (Stefan, 05.11.2026). */
.foot { display: flex; align-items: center; min-height: var(--foot); border-top: 1px solid var(--line-2); padding: 0; color: var(--dim); font-size: .9rem; }
.foot-in { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.foot-in img { width: 22px; height: 22px; }
.foot nav { margin-left: auto; display: flex; gap: 1.3rem; }
.foot a { text-decoration: none; color: var(--dim); }
.foot a:hover { color: var(--text); }

/* ---- smaller screens ----------------------------------------------------------------------------- */
/* Laptops with low screens: everything a little tighter, so each part still fits on one screen. */
@media (min-width: 981px) and (max-height: 860px) {
  /* Not on the change-request section itself: its screen (.pin) has the padding. Padding on both moved
     the story down by that much on its first step, and it jumped when the screen began to stay put. */
  .section.page:not(.requests), .pin { padding-top: calc(var(--nav) + 1.5vh); padding-bottom: 2vh; }
  .eyebrow { margin-bottom: .55rem; }
  .h2 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); }
  .sub { margin-top: .6rem; font-size: 1rem; }
  .hero-title { font-size: min(3.7rem, 100cqi / 9.1); }
  .lead { margin-top: 1.1rem; font-size: 1rem; }
  .join { margin-top: 1.3rem; }
  .facts { margin-top: 1rem; }
  .demo { height: 430px; }
  .beam { min-height: 270px; margin-top: 3vh; }
  .beam-steps { margin-top: 3vh; }
  .bento { margin-top: 3vh; gap: 12px; }
  .card { min-height: 0; padding: 18px; }
  .card p { font-size: .92rem; }
  .viz { margin-bottom: 16px; }
  .stage-3d { margin-top: 3vh; }
  .device { zoom: .8; }
  .loop-stage { height: 400px; }
  .loop-stage .panel { zoom: .92; }
  .loop-steps { margin-top: 2.4vh; }
  .loop-step { padding: 6px 0 7px; }
  .loop-step h3 { font-size: clamp(1.12rem, 1.6vw, 1.35rem); }
  .loop-step p { margin-top: .2rem; font-size: .9rem; line-height: 1.45; }
  .faq-q { padding: 14px 2px; font-size: 1rem; }
}
@media (min-width: 981px) and (max-height: 720px) {
  .sub { display: none; }
  .device { zoom: .66; }
  .loop-stage .panel { zoom: .82; }
  .loop-step { padding: 4px 0 5px; }
  .loop-step .n { font-size: .78rem; }
  .loop-step p { font-size: .86rem; line-height: 1.4; }
  .tools-label { display: none; }
}
@media (max-width: 1100px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .split-head { grid-template-columns: 1fr; gap: 0; }
  .split-head .sub { margin-top: 1.1rem; }
}
@media (max-width: 980px) {
  .nav-links { display: none; }
  .nav-in { justify-content: space-between; }
  .hero-main { padding: 4vh 0; }
  .hero-in { grid-template-columns: 1fr; gap: 48px; }
  .demo { height: 430px; max-width: 560px; }
  .beam { grid-template-columns: 1fr; justify-items: center; gap: 56px; min-height: 0; }
  .beam-col.left, .beam-col.right { justify-items: center; }
  .beam-col.right { grid-template-columns: repeat(3, auto); gap: 10px; }
  .node.person { min-width: 0; flex-direction: column; text-align: center; padding: 12px; gap: 6px; }
  .beam .hub-label { display: none; }
  .beam-steps { grid-template-columns: 1fr; gap: 18px; margin-top: 50px; }
  .dv { grid-template-columns: 1fr; }
  .dv-side { display: none; }
  .loop { grid-template-columns: 1fr; gap: 0; }
  .loop-stage { position: relative; top: 0; order: -1; height: 330px; margin-bottom: 10px; }
  .loop-live .loop-stage { display: none; }
  .loop-live .loop-step, .loop-live .loop-step:not(.on) { min-height: 0; padding: 30px 0; opacity: 1; }
  .loop-live .stage-inline { display: block; margin-top: 22px; }
  .stage-inline .panel { width: min(100%, 470px); }
  .dv-main { position: relative; padding-bottom: 70px; }
  .dv-main .dv-fab { display: inline-flex; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .wrap { padding: 0 18px; }
  .nav .btn-sm { padding: .45rem .8rem; font-size: .84rem; }
  .demo { height: 390px; }
  .term { width: 100%; }
  .term-body { font-size: 12px; min-height: 170px; padding: 14px 14px 18px; }
  .browser { width: 92%; }
  .browser-body { height: 230px; }
  .join-box { border-radius: 22px; }
  .join-step.join-email { flex-wrap: wrap; }
  .join input[type="email"] { flex-basis: 100%; height: 46px; }
  .join-step.join-email .btn { width: 100%; }
  .join-step.join-tool { flex-direction: column; align-items: stretch; padding: 8px 4px; }
  .join-q { margin: 0 0 6px .4rem; }
  .chips { flex-wrap: wrap; }
  .bento { grid-template-columns: 1fr; }
  :root { --foot: 112px; }
  .card.span-2 { grid-column: auto; }
  .dv-form { grid-template-columns: 1fr 1fr; }
  .dv-main { padding: 18px; }
  .foot nav { margin-left: 0; width: 100%; }
}
/* Touch screens (Stefan, 05.11.2026: whole screens one at a time make sense with a mouse, not on a phone): they
   scroll freely (home/pager.js does nothing there) and a part is only as tall as its content; the first screen
   stays a full screen. Same test as in home/pager.js: no fine pointer that can hover. */
@media (hover: none), (pointer: coarse) {
  .page:not(.hero), .final.page, .pin { min-height: 0; }
  .section.page:not(.requests), .pin { padding: 72px 0; }
}

/* ---- people who asked for less motion ---------------------------------------------------------- */
/* Only when the page is not marked for motion: ?motion=on (early.js) shows the motion anyway. */
@media (prefers-reduced-motion: reduce) {
  :root:not(.motion) { scroll-behavior: auto; }
  :root:not(.motion) .pill .dot, :root:not(.motion) .t-cursor, :root:not(.motion) .demo-cursor, :root:not(.motion) .demo-spin, :root:not(.motion) .hub::before,
  :root:not(.motion) .hub::after, :root:not(.motion) .final-card::before { animation: none; }
  :root:not(.motion) .beam-light { display: none; }
  :root:not(.motion) .beam-path { stroke: rgba(82, 175, 207, .45); }
  :root:not(.motion) .marquee-track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; }
  :root:not(.motion) .marquee { -webkit-mask-image: none; mask-image: none; }
  :root:not(.motion) .marquee-track [aria-hidden="true"] { display: none; }
  :root:not(.motion) :is(.stage, .faq-a, .loop-step), :root:not(.motion) .faq-item::details-content { transition: none; }
}