html{scroll-behavior:smooth}
body{margin:0;background:var(--surface-app);color:var(--text-primary);font-family:var(--font-sans);-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
a:hover{opacity:.7}
.wrap{max-width:1120px;margin:0 auto;padding-inline:40px}
.h1{margin:0;font:600 clamp(36px,4.6vw,58px)/1.06 var(--font-sans);letter-spacing:-0.02em;text-wrap:balance}
.h2{margin:0;font:600 clamp(26px,2.9vw,35px)/1.16 var(--font-sans);letter-spacing:-0.02em;text-wrap:balance}
.h3{margin:0;font:600 20px/1.3 var(--font-sans);letter-spacing:-0.015em}
.lede{margin:0;font:400 18.5px/1.55 var(--font-sans);color:var(--text-secondary);max-width:54ch;text-wrap:pretty}
.body{margin:0;font:var(--type-body);font-size:15.5px;color:var(--text-secondary);text-wrap:pretty;max-width:62ch}
.mono{font:var(--type-mono);font-size:13px}
.eyebrow{margin:0;font:var(--type-eyebrow);letter-spacing:var(--tracking-eyebrow);color:var(--text-tertiary)}
.tile-title{margin:0;font:var(--type-card-title-small);font-size:16px}
.pp{max-width:720px}
.pp h2{margin:0;font:600 21px/1.3 var(--font-sans);letter-spacing:-0.015em}
.pp .item{padding:26px 0;border-top:1px solid var(--separator)}
.section{padding:clamp(58px,8vw,104px) 0;border-top:1px solid var(--separator)}
/* The hero has no border of its own, so it needs the same bottom gap the
   sections give themselves — otherwise its screenshot sits on the divider. */
.hero{padding-top:clamp(44px,6vw,86px);padding-bottom:clamp(58px,8vw,104px)}
.cta{display:inline-flex;align-items:center;justify-content:center;min-height:var(--hit-target);padding:17px 26px;border-radius:var(--radius-section);background:var(--accent);color:var(--on-accent);font:var(--type-button);border:none;cursor:pointer;transition:opacity 220ms var(--ease-snap,ease)}
.cta:hover{opacity:.85;color:var(--on-accent)}
.cta.ink{background:var(--ink-button);color:var(--on-ink-button)}
.cta.ink:hover{color:var(--on-ink-button)}
.cta.small{padding:12px 18px;font:var(--type-button-small);min-height:0;white-space:nowrap}
.topbar-outer{position:sticky;top:0;z-index:5;background:var(--surface-app);border-bottom:1px solid var(--separator)}
.topbar{display:flex;align-items:center;gap:24px;height:68px}
.topbar .brand{font:600 18px var(--font-sans);letter-spacing:-0.01em;color:var(--text-primary);white-space:nowrap}
.topbar .grow{flex:1}
.nav{display:flex;gap:20px;margin-left:8px}
.nav a{color:var(--text-secondary);font:var(--type-row-title)}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(36px,5.5vw,80px);align-items:center}
.split.rev>*:first-child{order:2}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
/* Two columns that compare, so they match: .split's 1.05fr/.95fr and its
   wide gap are for a text-and-screenshot row, not for cards side by side. */
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:stretch}
/* Questions open and close without a line of script: <details> already does
   it, and the marker is replaced so the control matches the rest of the page. */
.qa{border-top:1px solid var(--separator)}
.qa:last-child{border-bottom:1px solid var(--separator)}
.qa summary{list-style:none;cursor:pointer;padding:19px 0;display:flex;gap:16px;align-items:baseline;font:var(--type-row-title);color:var(--text-primary)}
.qa summary::-webkit-details-marker{display:none}
.qa summary:after{content:"+";margin-left:auto;font:400 19px/1 var(--font-sans);color:var(--text-tertiary)}
.qa[open] summary:after{content:"\2013"}
.qa summary:hover{opacity:.65}
.qa-a{padding-bottom:22px}
.qa-a .body{max-width:70ch}
.qa-a .body+.body{margin-top:12px}
.tile{padding:24px;border-radius:var(--radius-section);background:var(--surface-row)}
/* The Pro column inverts, so everything inside it has to bring its own
   colour — .tile-title and .bullets both default to the page's ink. */
.tile.ink{background:var(--ink-button)}
.tile.ink .tile-title,.tile.ink .bullets li{color:var(--on-ink-button)}
.tile.ink .bullets li:before{background:var(--on-ink-button);opacity:.5}
.pro{display:inline-block;margin-left:7px;padding:3px 8px;border-radius:var(--radius-pill);background:var(--ink-button);color:var(--on-ink-button);font:var(--type-button-small);font-size:11px;letter-spacing:0;vertical-align:baseline}
.shot{width:100%;height:auto;max-width:330px;display:block;border-radius:30px;border:1px solid var(--border-card);background:var(--surface-card)}
.shotwrap{display:flex;justify-content:center}
.langs{display:flex;gap:2px;padding:3px;border-radius:var(--radius-pill);background:var(--surface-row)}
.langs a{text-decoration:none;padding:7px 12px;border-radius:var(--radius-pill);font:var(--type-button-small);color:var(--text-tertiary);transition:opacity 220ms var(--ease-snap,ease)}
.langs a[aria-current="page"]{background:var(--ink-button);color:var(--on-ink-button)}
.langs a:hover{opacity:.75}
.bullets{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.bullets li{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:baseline;font:var(--type-row-title);color:var(--text-primary)}
.bullets li:before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent);transform:translateY(-3px)}
@media(max-width:900px){.wrap{padding-inline:24px}.split,.grid2,.grid3{grid-template-columns:1fr;gap:28px}.split.rev>*:first-child{order:0}}
/* The full bar needs ~590px (EN) / ~680px (DE); the in-page anchors are the
   first thing to go, since the page is short and the footer repeats them. */
@media(max-width:900px){.topbar .nav{display:none}}
/* Without the anchors the bar still needs ~410px. Below that the header keeps
   the wordmark and the language switch; every page has its own CTA in view. */
@media(max-width:480px){.topbar{gap:12px;height:60px}.topbar .cta{display:none}.langs a{padding:6px 10px}}