/* Layout: a dark stage. The hero shows the same screen twice, once for the speaker and once for the audience. */
:root{--bg:#10151c;--panel:#18202a;--line:#2c3744;--fg:#f4f1e8;--muted:#aab2bb;--amber:#f2b84b;--slide:#dfe6ee;--slide-ink:#1b2632;
--display:"Bahnschrift","DIN Alternate","Segoe UI Variable Display","Segoe UI",system-ui,sans-serif;--body:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,sans-serif;--mono:"Cascadia Mono",ui-monospace,Consolas,Menlo,monospace;color-scheme:dark}
*{box-sizing:border-box}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:17px/1.6 var(--body)}
a{color:var(--amber)}a:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:1120px;margin-inline:auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;background:var(--amber);color:#10151c;padding:8px 12px;z-index:5}
header.top .wrap{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center;justify-content:space-between;padding-block:18px}
.brand{display:flex;gap:10px;align-items:center;color:var(--fg);text-decoration:none;font:600 20px var(--display);letter-spacing:.01em}
.brand img{width:32px;height:32px;border-radius:7px}
nav.links{display:flex;flex-wrap:wrap;gap:6px 20px;font-size:15px}nav.links a{color:var(--muted);text-decoration:none}nav.links a:hover{color:var(--fg)}
h1,h2,h3{font-family:var(--display);line-height:1.12;text-wrap:balance;margin:0;font-weight:600}
.hero{padding-block:44px 64px}
.hero h1{font-size:clamp(38px,6.4vw,72px);max-width:17ch}
.lead{font-size:clamp(18px,2vw,21px);color:var(--muted);max-width:60ch;margin:20px 0 0}
.cta{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;margin-top:26px}
.price{font:600 17px var(--display);background:var(--amber);color:#10151c;padding:11px 18px;border-radius:6px}
.note{color:var(--muted);font-size:15px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:44px}
figure{margin:0;min-width:0}figcaption{font:600 13px var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.screen{aspect-ratio:16/10;background:var(--slide);color:var(--slide-ink);border:1px solid var(--line);border-radius:8px;overflow:hidden;position:relative;padding:7% 8%}
.slide-t{font:600 clamp(16px,2.3vw,27px) var(--display)}.bars{display:flex;align-items:flex-end;gap:7%;height:46%;margin-top:7%}.bars i{flex:1;background:#4a6a8a;border-radius:2px 2px 0 0}
.prompter{position:absolute;left:12%;right:12%;top:0;height:50%;background:#141a22;color:var(--fg);overflow:hidden;border-radius:0 0 8px 8px;box-shadow:0 8px 24px #0007}
.roll{padding:8% 7%;font-size:clamp(12px,1.55vw,18px);line-height:1.5;animation:roll 22s linear infinite alternate}
.band{position:absolute;left:0;right:0;top:34%;height:1.6em;font-size:clamp(12px,1.55vw,18px);background:#f2b84b26}
.hud{position:absolute;right:8px;top:6px;font:600 clamp(11px,1.3vw,15px) var(--mono);background:#141a22e6;padding:2px 7px;border-radius:4px;display:flex;gap:6px;align-items:center}.hud b{width:.7em;height:.7em;border-radius:50%;background:#3fb96b}
@keyframes roll{to{transform:translateY(-34%)}}
@media (prefers-reduced-motion:reduce){.roll{animation:none}html{scroll-behavior:auto}}
section.band-s{border-top:1px solid var(--line);padding-block:60px}
h2{font-size:clamp(28px,3.6vw,42px);max-width:22ch}
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:32px 36px;margin-top:34px}
.features>div{min-width:0}h3{font-size:21px;margin-bottom:8px}.features p{margin:0;color:var(--muted);font-size:16px}
.shot{margin-top:36px;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}.pair>div{min-width:0}
ul.plain{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:12px}ul.plain li{padding-left:22px;position:relative}ul.plain li:before{content:"";position:absolute;left:0;top:.72em;width:10px;height:2px;background:var(--amber)}
.keys{font-family:var(--mono);font-size:14px;width:100%;border-collapse:collapse;margin-top:20px}.keys td{padding:8px 12px 8px 0;border-top:1px solid var(--line);vertical-align:top}.keys td:first-child{color:var(--amber);white-space:nowrap}.keys td+td{font-family:var(--body);font-size:15px;color:var(--muted)}
.big{font:600 clamp(48px,7vw,76px)/1 var(--display);color:var(--amber);font-variant-numeric:tabular-nums;margin-top:20px}
details{border-top:1px solid var(--line);padding-block:14px}details summary{cursor:pointer;font:600 18px var(--display)}details p{margin:10px 0 0;color:var(--muted);max-width:66ch}
.faq{margin-top:26px;max-width:800px}
.doc{max-width:760px;padding-block:24px 64px}.doc h1{font-size:clamp(32px,5vw,48px)}.doc h2{font-size:22px;margin-top:34px;max-width:none}.doc p,.doc li{color:#d6d8d6}.doc address{font-style:normal}.doc code{font:14px var(--mono);overflow-wrap:anywhere}
footer{border-top:1px solid var(--line);padding-block:30px;font-size:15px;color:var(--muted)}footer .row{display:flex;flex-wrap:wrap;gap:6px 18px}footer p{margin:10px 0 0}
@media (max-width:820px){.split,.pair{grid-template-columns:1fr}.features{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.features{grid-template-columns:1fr}}