/* Superinspect landing page. Static: no JavaScript, no web fonts, nothing from
   another origin (CSP in _headers: style-src 'self'; img-src 'self'). */
:root{
  --blue:#0b3cf0; --blue-2:#1f55ff; --navy:#02061f; --ink:#0d0f14; --panel:#1b1d23;
  --text:#ffffff; --soft:rgba(255,255,255,.82); --dim:rgba(255,255,255,.6);
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--ink);scroll-behavior:smooth}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Inter,system-ui,sans-serif;color:var(--soft);background:var(--ink);overflow-x:hidden}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* announcement bar */
.bar{display:block;background:var(--navy);color:var(--soft);text-align:center;font-size:.9rem;padding:.9rem 1rem}
.bar:hover{color:#fff}
.bar span{margin-left:.4rem}

/* header */
.nav{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  margin:0;padding:1.4rem clamp(1.25rem,4vw,4.5rem)}
.brand{display:inline-flex;align-items:center;gap:.6rem;color:#fff;font-size:1.3rem;font-weight:400;letter-spacing:.01em}
.mark{width:26px;height:26px;flex:none}
.links{display:flex;align-items:center;gap:2.6rem;font-size:.95rem;font-weight:650;color:#fff}
.links a:hover{opacity:.8}
.right{display:flex;align-items:center;gap:.75rem}
.pill{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;border-radius:999px;font-weight:650;font-size:.9rem;
  padding:.65rem 1.15rem;transition:background .2s,opacity .2s}
.pill-glass{background:rgba(255,255,255,.14);color:#fff}
.pill-glass:hover{background:rgba(255,255,255,.22)}
.pill-dark{background:var(--ink);color:#fff}
.pill-dark:hover{background:#000}

/* hero: deep navy-black, one horizontal flare of blue light (the moment of
   detection), bold type. No hanging beam. */
.hero{position:relative;isolation:isolate;overflow:hidden;
  background:
    linear-gradient(180deg,transparent 86%,#02061f 100%),
    radial-gradient(ellipse 80% 90% at 50% 38%,#1652ff 0%,#0b3cf0 40%,#0830cf 65%,#05208f 88%,#031466 100%)}
.hero-in{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:3rem 1.5rem 12vh;
  min-height:max(560px,calc(100svh - 8.25rem))}
.flare{position:relative;width:100vw;height:clamp(200px,34vh,360px);margin-bottom:2.5rem;pointer-events:none}
.flare .halo{position:absolute;left:50%;top:50%;width:min(900px,140vw);height:420px;translate:-50% -50%;
  background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(40,100,255,.38),rgba(20,60,200,.12) 45%,transparent 70%)}
.flare .streak{position:absolute;left:0;right:0;top:50%;height:2px;translate:0 -50%;
  background:linear-gradient(90deg,transparent 0%,rgba(40,110,255,.35) 18%,rgba(120,170,255,.9) 42%,#fff 50%,rgba(120,170,255,.9) 58%,rgba(40,110,255,.35) 82%,transparent 100%)}
.flare .glow{position:absolute;left:5%;right:5%;top:50%;height:26px;translate:0 -50%;filter:blur(10px);
  background:linear-gradient(90deg,transparent,rgba(50,120,255,.55) 30%,rgba(150,190,255,.9) 50%,rgba(50,120,255,.55) 70%,transparent)}
.flare .core{position:absolute;left:50%;top:50%;width:18px;height:18px;border-radius:50%;translate:-50% -50%;background:#fff;
  box-shadow:0 0 18px 6px #fff,0 0 50px 22px rgba(120,170,255,.85),0 0 140px 60px rgba(40,100,255,.5)}
.flare .core{animation:flash 5s ease-in-out infinite}
.flare .streak,.flare .glow{animation:breathe 5s ease-in-out infinite}
@keyframes flash{0%,100%{opacity:.85;scale:1}48%{opacity:1;scale:1.18}52%{opacity:1;scale:1.1}}
@keyframes breathe{0%,100%{opacity:.8}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.flare .core,.flare .streak,.flare .glow{animation:none}}

h1{font-size:clamp(2.6rem,5.2vw,4.6rem);font-weight:800;letter-spacing:-.035em;line-height:1.08;color:#fff;max-width:1320px;
  text-shadow:0 2px 30px rgba(0,10,80,.25)}
.lead{margin-top:2rem;max-width:700px;font-size:1.22rem;line-height:1.65;color:#fff}

/* the action bar: like a search field, but it opens an e-mail */
.action{display:flex;align-items:center;gap:.75rem;margin-top:3.75rem;width:min(700px,100%);
  padding:.55rem .55rem .55rem 1.75rem;border-radius:999px;background:var(--ink);box-shadow:0 10px 40px rgba(0,0,30,.35)}
.action .to{flex:1;min-width:0;text-align:left;color:rgba(255,255,255,.65);font-size:1.02rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem;margin-top:2.75rem;max-width:1000px}
.chips li{list-style:none;padding:.6rem 1.15rem;border-radius:999px;background:rgba(255,255,255,.14);border:0;color:#fff;font-size:.85rem;font-weight:600}
.action .go{flex:none;border-radius:999px;padding:.95rem 1.7rem;background:var(--blue-2);color:#fff;font-weight:650;font-size:.95rem}
.action:hover .go{background:#3a6bff}

@media (max-width:860px){
  .links{display:none}
  .brand{font-size:1.15rem}
  .nav{padding:1.1rem 1.25rem}
  .hero-in{padding-bottom:6rem}
  .flare{height:clamp(150px,24vh,220px);margin-bottom:1.5rem}
  .action{margin-top:2.5rem}
  .action{padding-left:1.1rem}
  .action .go{padding:.75rem 1.1rem}
}
@media (max-width:520px){ .right .pill-dark{display:none} }
@media (max-width:420px){ .action .to{display:none} .action{justify-content:center;padding:.4rem} .action .go{flex:1;text-align:center} }

/* ---------- sections below the hero (bolt-style boxes on deep navy) ---------- */
.body{background:linear-gradient(180deg,#01030f 0%,#040a24 30%,#030718 100%);color:var(--soft)}
.sec{max-width:1180px;margin:0 auto;padding:11rem 1.5rem 0}
.head{text-align:center;max-width:860px;margin:0 auto}
.head .pre{display:block;font-size:clamp(1.9rem,3.6vw,3.1rem);font-weight:800;letter-spacing:-.03em;line-height:1.15;color:rgba(255,255,255,.45)}
.head h2{margin-top:1rem;font-size:clamp(2.2rem,4.4vw,3.7rem);font-weight:800;letter-spacing:-.035em;line-height:1.1;color:#fff;
  text-shadow:0 0 28px rgba(140,180,255,.55),0 0 80px rgba(60,120,255,.45)}
.head p{margin:2.25rem auto 0;max-width:700px;font-size:1.1rem;line-height:1.6;color:rgba(255,255,255,.7)}
.box{position:relative;overflow:hidden;border:1px solid rgba(140,165,255,.14);border-radius:1.25rem;
  background:linear-gradient(180deg,rgba(25,32,70,.55),rgba(12,16,40,.75));padding:2rem}
.box h3{color:#fff;font-size:1.35rem;font-weight:800;letter-spacing:-.01em}
.box > p{margin-top:.8rem;line-height:1.6;color:rgba(255,255,255,.68)}
.kick{display:block;font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#7fa2ff;margin-bottom:.7rem}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

/* How it works: bento */
.bento{display:grid;grid-template-columns:1.35fr 1fr;gap:1.25rem;margin-top:5rem}
.bento .seal{grid-row:span 2}
.vis{margin-top:1.75rem;border:1px solid rgba(140,165,255,.14);border-radius:.9rem;background:rgba(3,6,22,.7);padding:1.1rem 1.25rem;font-size:.88rem}
.ev{display:grid;grid-template-columns:auto 1fr auto;gap:1rem;align-items:center;padding:.55rem 0;border-bottom:1px solid rgba(255,255,255,.06);color:rgba(255,255,255,.55)}
.ev:last-child{border-bottom:0}
.ev b{color:#fff;font-weight:600}
.ev.on{color:#cfe0ff}.ev.on b{color:#fff}
.ev .dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.25)}
.ev.on .dot{background:#3d7bff;box-shadow:0 0 10px #3d7bff}
.chain{display:flex;flex-direction:column;gap:.6rem}
.link{border:1px solid rgba(140,165,255,.18);border-radius:.6rem;padding:.65rem .8rem;color:rgba(255,255,255,.6)}
.link b{display:block;color:#fff;font-weight:600;margin-bottom:.15rem}
.arrow{text-align:center;color:rgba(127,162,255,.7);font-size:.9rem;line-height:1}
.cp{margin-top:.4rem;border:1px dashed rgba(140,165,255,.4);border-radius:.6rem;padding:.65rem .8rem;color:#cfe0ff}
.cp b{color:#fff}
.finding{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem}
.finding .id{color:#7fa2ff;font-weight:700}
.finding .what{color:#fff}
.finding .to{color:rgba(255,255,255,.55)}
.tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.9rem}
.tags span{border-radius:999px;padding:.35rem .75rem;background:rgba(61,123,255,.16);color:#cfe0ff;font-size:.8rem;font-weight:600}

/* Results: big numbers */
.nums{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;margin-top:5rem}
.num .big{display:block;font-size:clamp(2.8rem,5.4vw,4.4rem);font-weight:800;letter-spacing:-.04em;line-height:1;color:#fff;
  text-shadow:0 0 50px rgba(110,150,255,.4)}
.num .what{display:block;margin-top:.8rem;color:#fff;font-size:1.1rem;font-weight:600;line-height:1.4}
.num .note{display:block;margin-top:.7rem;color:rgba(255,255,255,.6);line-height:1.55}
.src{display:inline-block;margin-top:1.1rem;border-radius:999px;padding:.35rem .75rem;border:1px solid rgba(140,165,255,.2);font-size:.78rem;color:rgba(255,255,255,.7)}

/* Why not ...: three boxes + accordion */
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:5rem}
.faq{max-width:820px;margin:5rem auto 0}
.faq details{border-bottom:1px solid rgba(255,255,255,.1)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:1rem;padding:1.25rem .25rem;color:#fff;font-weight:650;font-size:1.08rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:.6rem;height:.6rem;margin-top:.35rem;border-right:2px solid #fff;border-bottom:2px solid #fff;rotate:45deg;transition:rotate .2s}
.faq details[open] summary::after{rotate:225deg;margin-top:.6rem}
.faq details p{padding:0 .25rem 1.4rem;line-height:1.65;color:rgba(255,255,255,.7)}

/* Closing band */
.close{position:relative;isolation:isolate;overflow:hidden;margin-top:11rem;text-align:center;
  background:linear-gradient(180deg,#030718 0%,#0a2bc9 30%,var(--blue-2) 60%,var(--blue) 100%);padding:5rem 1.5rem 9rem}
.close .flare{height:140px;margin:0 0 1.5rem;left:50%;translate:-50% 0}
.close h2{font-size:clamp(2.3rem,4.6vw,3.9rem);font-weight:800;letter-spacing:-.03em;line-height:1.1;color:#fff;max-width:900px;margin:0 auto}
.close .label{display:block;margin-bottom:1.6rem;font-size:.85rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.85)}
.close p{margin:2rem auto 0;max-width:680px;font-size:1.2rem;line-height:1.6;color:rgba(255,255,255,.9)}
.close .action{margin-top:3.5rem}
.close .note{margin-top:1.4rem;font-size:.9rem;color:rgba(255,255,255,.8)}
.close .action{margin-left:auto;margin-right:auto}

/* Footer */
.foot{background:#000;color:rgba(255,255,255,.6);font-size:.9rem}
.foot-in{margin:0;padding:3.5rem clamp(1.25rem,4vw,4.5rem);display:flex;flex-wrap:wrap;gap:2rem;justify-content:space-between;align-items:flex-start}
.foot .brand{font-size:1.15rem}
.foot .who{margin-top:.9rem;line-height:1.6;max-width:420px}
.foot nav{display:flex;gap:1.75rem}
.foot nav a:hover{color:#fff}
.foot .copy{width:100%;border-top:1px solid rgba(255,255,255,.1);padding-top:1.5rem;font-size:.82rem;color:rgba(255,255,255,.45)}

@media (max-width:900px){
  .sec{padding-top:7rem}
  .bento,.nums,.three{grid-template-columns:1fr}
  .bento .seal{grid-row:auto}
  .box{padding:1.5rem}
  .close{margin-top:6rem;padding:6rem 1.25rem 5rem}
}
.nw{white-space:nowrap}
h1,h2,.head .pre{text-wrap:balance}

/* Facts ticker under the hero (owner, Nov 11 2026, after text.com's band): a light
   strip between the blue hero and the dark body, big bold facts scrolling slowly,
   our eye mark between them. Pure CSS; pauses on hover; still under reduced motion. */
.ticker{background:#eef1f7;color:#02061f;overflow:hidden;border-block:1px solid rgba(2,6,31,.06)}
.track{display:flex;width:max-content;animation:ticker 45s linear infinite}
.ticker:hover .track{animation-play-state:paused}
.run{display:flex;align-items:center;list-style:none;padding:2.4rem 0}
.run li{flex:none;font-size:clamp(1.6rem,3vw,2.6rem);font-weight:800;letter-spacing:-.025em;white-space:nowrap;padding:0 2.25rem}
.run li.dot{padding:0}
.sep{display:block;width:clamp(26px,2.4vw,38px);height:clamp(26px,2.4vw,38px)}
@keyframes ticker{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .track{animation:none;width:auto;justify-content:center}
  .run[aria-hidden]{display:none}
  .run{flex-wrap:wrap;justify-content:center;row-gap:1rem;padding:2rem 1rem}
  .run li:last-child{display:none}
}

/* ---------- About page (Nov 11 2026) ---------- */
.page-hero{background:radial-gradient(ellipse 80% 120% at 50% 0%,#1652ff 0%,#0b3cf0 40%,#0830cf 70%,#02061f 100%)}
.page-hero-in{max-width:880px;margin:0 auto;text-align:center;padding:clamp(3rem,9vh,7rem) 1.5rem clamp(4rem,11vh,8rem)}
.page-hero-in .eyebrow{display:block;margin-bottom:1.4rem;font-size:.8rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.75)}
.page-hero-in h1{font-size:clamp(2rem,4.4vw,3.4rem);font-weight:800;letter-spacing:-.03em;line-height:1.12;color:#fff;text-wrap:balance}
.page-hero-in .lead{margin:1.8rem auto 0;max-width:680px;font-size:clamp(1.05rem,1.4vw,1.2rem);line-height:1.65;color:rgba(255,255,255,.9)}
.about{max-width:860px;padding-top:6rem}
.timeline{list-style:none;position:relative;margin:0;padding:0}
.timeline::before{content:"";position:absolute;left:7.4rem;top:.6rem;bottom:.6rem;width:1px;background:linear-gradient(180deg,rgba(127,162,255,.5),rgba(127,162,255,.1))}
.timeline li{position:relative;display:grid;grid-template-columns:6.4rem 1fr;gap:2rem;padding:0 0 3rem}
.timeline li::before{content:"";position:absolute;left:calc(7.4rem - 5px);top:.45rem;width:11px;height:11px;border-radius:50%;background:#0a5cff;box-shadow:0 0 0 3px #04071a,0 0 14px rgba(61,123,255,.7)}
.timeline li:last-child::before{background:#fff;box-shadow:0 0 0 3px #04071a,0 0 18px rgba(170,200,255,.9)}
.timeline .when{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9rem;font-weight:600;color:#9fb8ff;text-align:right;padding-top:.15rem}
.timeline h3{color:#fff;font-size:1.25rem;font-weight:800;letter-spacing:-.01em}
.timeline p{margin-top:.5rem;line-height:1.65;color:rgba(255,255,255,.7)}
.timeline em{font-style:italic;color:rgba(255,255,255,.85)}
.why{margin-top:3rem;padding:2.5rem;border:1px solid rgba(140,165,255,.14);border-radius:1.25rem;background:linear-gradient(180deg,rgba(25,32,70,.55),rgba(12,16,40,.75))}
.why h2{color:#fff;font-size:1.6rem;font-weight:800;letter-spacing:-.02em}
.why p{margin-top:1rem;line-height:1.7;color:rgba(255,255,255,.75)}
.why .btn-main{display:inline-flex;margin-top:1.75rem;padding:.9rem 1.7rem;border-radius:999px;background:#fff;color:#02061f;font-weight:700}
.sub .body{padding-bottom:7rem}
@media (max-width:640px){
  .timeline::before{left:.35rem}
  .timeline li{grid-template-columns:1fr;gap:.35rem;padding-left:1.8rem}
  .timeline li::before{left:0}
  .timeline .when{text-align:left}
  .why{padding:1.75rem}
}
.timeline li:last-child{padding-bottom:0}
@media (max-width:520px){.bar .wide{display:none}}

/* ===== merged from the hero test page (Nov 11 2026), in their original order ===== */
/* Rotating facts in the hero (test, Nov 11 2026, after seecon.ch): CSS only.
   Four phrases share one grid cell; each is "typed" (clip from the right, in
   character-like steps), held, then wiped, 4 s apart. */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.rotator{margin-top:2.4rem;min-height:2.6rem}
.rot{display:inline-grid;justify-items:center}
.r{grid-area:1/1;display:inline-flex;align-items:center;gap:.35rem;font-size:clamp(1.25rem,2.2vw,1.75rem);font-weight:700;letter-spacing:-.015em;color:#fff;
  white-space:nowrap;clip-path:inset(0 100% 0 0);animation:type 16s infinite}
.r2{animation-delay:4s}.r3{animation-delay:8s}.r4{animation-delay:12s}
.caret{display:inline-block;width:3px;height:1.1em;background:#9fc0ff;animation:blink .9s steps(1) infinite}
@keyframes type{
  0%{clip-path:inset(0 100% 0 0);animation-timing-function:steps(28,end)}
  7%{clip-path:inset(0 0 0 0)}
  20%{clip-path:inset(0 0 0 0);animation-timing-function:steps(28,end)}
  24%,100%{clip-path:inset(0 100% 0 0)}}
@keyframes blink{50%{opacity:0}}
.action{margin-top:2.6rem}
@media (prefers-reduced-motion:reduce){
  .r{animation:none;clip-path:none;position:static}.r2,.r3,.r4{display:none}.caret{display:none}
}
.hero-in{min-height:max(560px,calc(100svh - 8.25rem))}
/* REC status pill around the rotating facts (test v2) */
.rotator{display:inline-flex;align-items:center;gap:1rem;margin-top:2.6rem;padding:.75rem 1.5rem .75rem 1.1rem;border-radius:999px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);box-shadow:0 10px 40px rgba(0,10,80,.25),inset 0 1px 0 rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);min-height:0}
.rec{display:inline-flex;align-items:center;gap:.5rem;padding-right:1rem;border-right:1px solid rgba(255,255,255,.22);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.8rem;font-weight:700;letter-spacing:.14em;color:rgba(255,255,255,.85)}
.recdot{width:10px;height:10px;border-radius:50%;background:#fff;box-shadow:0 0 0 0 rgba(255,255,255,.7);animation:rec 1.6s ease-out infinite}
@keyframes rec{0%{box-shadow:0 0 0 0 rgba(255,255,255,.7)}70%{box-shadow:0 0 0 10px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
.rot{justify-items:start}
.r{font-size:clamp(1.05rem,1.8vw,1.35rem);font-weight:650}
@media (prefers-reduced-motion:reduce){.recdot{animation:none}}
@media (max-width:520px){.rotator{gap:.7rem;padding:.6rem 1rem .6rem .8rem}.rec{padding-right:.7rem;font-size:.7rem}.r{font-size:.95rem}}
/* Hero CTA as one compact button + text link (test v3): the REC pill stays the only wide element. */
.cta-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1.75rem;margin-top:2.75rem}
.btn-main{display:inline-flex;align-items:center;padding:1rem 2rem;border-radius:999px;background:#fff;color:#02061f;font-weight:700;font-size:1.02rem;
  box-shadow:0 10px 30px rgba(0,10,80,.3);transition:transform .15s,box-shadow .15s}
.btn-main:hover{transform:translateY(-1px);box-shadow:0 14px 36px rgba(0,10,80,.38)}
.btn-link{color:#fff;font-weight:650;font-size:1.02rem;opacity:.9}
.btn-link:hover{opacity:1;text-decoration:underline;text-underline-offset:4px}
/* v4: no top bar, no hero buttons; the header button is the one CTA, also on phones. */
@media (max-width:520px){ .right .pill-dark{display:none} .pill-glass{padding:.55rem .75rem} }
.hero-in{min-height:max(560px,calc(100svh - 8.25rem))}
.rotator{margin-top:3rem}
/* v5: a small button attached to the REC pill (after fishaudio's "Try | Live 3 →" chip). */
.rotator{padding:.4rem .4rem .4rem 1.1rem;gap:1rem}
.pill-go{flex:none;margin-left:.5rem;padding:.65rem 1.1rem;border-radius:999px;background:#fff;color:#02061f;font-weight:700;font-size:.92rem;white-space:nowrap;transition:background .15s}
.pill-go:hover{background:#e8eeff}
@media (max-width:640px){.rotator{flex-wrap:wrap;justify-content:center;border-radius:1.4rem;padding:.7rem}.pill-go{margin:0;width:100%;text-align:center}}
/* v6: category label above the headline + a "Works with" row (after text.com). Names as text, no logos. */
.eyebrow{display:block;margin-bottom:1.4rem;font-size:.85rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.8)}
.works{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.6rem;margin-top:2.6rem;font-size:.95rem;color:rgba(255,255,255,.8)}
.works span{padding:.4rem .9rem;border-radius:999px;border:1px solid rgba(255,255,255,.25);color:#fff;font-weight:600;font-size:.88rem}
/* v7: plain text, no capsules; "Supports" (the checked FAQ wording), not "Works with" (reads as an official partner programme). */
.works{gap:.55rem;margin-top:2.4rem;font-size:.95rem;color:rgba(255,255,255,.72)}
.works b{color:#fff;font-weight:600}
.works i{font-style:normal;color:rgba(255,255,255,.45)}
/* v8: spacing and type scale with the screen HEIGHT as well as the width, so the
   hero content breathes in proportion on laptops, tall monitors and phones. */
.hero-in .eyebrow{margin-bottom:clamp(1.1rem,2.6vh,2.4rem);font-size:clamp(.8rem,1.1vh + .45rem,1rem)}
.hero-in h1{font-size:clamp(2.4rem,min(5.4vw,8.2vh),5.4rem);line-height:1.08}
.hero-in .lead{margin-top:clamp(1.3rem,3.2vh,3rem);max-width:min(760px,92vw);font-size:clamp(1.08rem,min(1.45vw,2.3vh),1.45rem);line-height:1.6}
.hero-in .rotator{margin-top:clamp(2.2rem,5.5vh,5.5rem);padding:clamp(.4rem,.8vh,.6rem) clamp(.4rem,.8vh,.6rem) clamp(.4rem,.8vh,.6rem) clamp(1.1rem,1.6vh,1.6rem)}
.hero-in .r{font-size:clamp(1.05rem,min(1.6vw,2.4vh),1.6rem)}
.hero-in .pill-go{padding:clamp(.65rem,1.2vh,1rem) clamp(1.1rem,1.8vh,1.6rem);font-size:clamp(.92rem,1.4vh,1.1rem)}
.hero-in .works{margin-top:clamp(2rem,4.6vh,4.5rem);font-size:clamp(.95rem,1.4vh,1.1rem)}
.hero-in{padding-top:clamp(2rem,6vh,6rem);padding-bottom:clamp(4rem,14vh,14rem)}
/* v8b: more generous gaps; Supports line as balanced inline text. */
.hero-in .eyebrow{margin-bottom:clamp(1.4rem,3.2vh,2.8rem)}
.hero-in .lead{margin-top:clamp(1.6rem,4vh,3.4rem)}
.hero-in .rotator{margin-top:clamp(2.8rem,6.8vh,6rem)}
.hero-in .works{display:block;text-align:center;text-wrap:balance;margin-top:clamp(2.4rem,5.6vh,5rem);line-height:1.9}
.hero-in .works b{white-space:nowrap}
.hero-in .works i{margin:0 .5rem}
.hero-in .works .lbl{margin-right:.45rem;padding:0;border:0;font-weight:400;font-size:inherit;color:rgba(255,255,255,.72)}
/* v9: the pill stays a pill on every screen; Supported as a text-only logo bar. */
@media (max-width:640px){
  .hero-in .rotator{flex-wrap:nowrap;border-radius:999px;padding:.55rem 1.1rem .55rem .9rem;justify-content:flex-start;max-width:100%}
  .hero-in .pill-go{display:none}
  .right .pill-dark{display:inline-flex !important;padding:.55rem .85rem;font-size:.85rem;white-space:nowrap}
  .right{gap:.5rem}
  .hero-in .r{font-size:1rem}
}
.works2{margin-top:clamp(2.8rem,6.5vh,6rem)}
.works2 .wl{display:block;font-size:.78rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.works2 ul{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem clamp(1.6rem,3vw,3rem);margin-top:1rem}
.works2 li{font-size:clamp(1.05rem,min(1.5vw,2.2vh),1.4rem);font-weight:800;letter-spacing:-.01em;color:rgba(255,255,255,.88)}
/* v9b: on phones the label is a quiet line, not a second headline (height scaling made it grow). */
@media (max-width:640px){
  .hero-in .eyebrow{font-size:.68rem;letter-spacing:.14em;color:rgba(255,255,255,.62);margin-bottom:1.1rem}
}
/* v9c: the REC pill has one scale everywhere (no height-based padding), so it never swells into a box. */
.hero-in .rotator{padding:.45rem .45rem .45rem 1.2rem}
.hero-in .pill-go{padding:.7rem 1.3rem;font-size:clamp(.92rem,min(1.15vw,1.6vh),1.02rem)}
.hero-in .r{font-size:clamp(1.02rem,min(1.45vw,2.1vh),1.35rem)}
@media (max-width:640px){.hero-in .rotator{padding:.55rem 1.1rem .55rem .9rem}.hero-in .r{font-size:1rem}}
/* v9d: gaps scale with min(height, width), like the type, so a tall narrow screen
   doesn't pull the block apart. */
.hero-in .eyebrow{margin-bottom:clamp(1.1rem,min(3.2vh,2.2vw),2.6rem)}
.hero-in .lead{margin-top:clamp(1.3rem,min(4vh,2.6vw),3rem)}
.hero-in .rotator{margin-top:clamp(2.2rem,min(6.8vh,4.2vw),5rem)}
.works2{margin-top:clamp(2rem,min(6vh,3.8vw),4.5rem)}
@media (max-width:640px){.hero-in .rotator{margin-top:2.2rem}.works2{margin-top:2rem}}
.bar .wide{margin-left:0}

/* Footer v2 (Nov 11 2026): three short columns + base row; no logo (the header carries it). */
.foot-in{display:block}
.foot-cols{display:grid;grid-template-columns:repeat(3,minmax(0,220px));gap:2rem 4rem}
.foot-cols h2{margin-bottom:1rem;font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.foot-cols a{display:block;margin-top:.7rem;color:rgba(255,255,255,.75);font-size:.95rem}
.foot-cols a:hover{color:#fff}
.foot-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.75rem;margin-top:3rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.1);font-size:.85rem;color:rgba(255,255,255,.45)}
@media (max-width:640px){.foot-cols{grid-template-columns:1fr 1fr;gap:2rem}}
.foot .foot-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
@media (max-width:640px){.foot .foot-cols{grid-template-columns:1fr 1fr}}

/* Footer v3 (Nov 11 2026, after the Stadtliste footer): charcoal-navy surface with a
   thin blue top line, a statement + contact row, back-to-top. */
.foot{background:#0b0e1a;position:relative}
.foot::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(61,123,255,.7),transparent)}
.foot-mid{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.25rem;margin-top:3rem;padding-top:2rem;border-top:1px solid rgba(255,255,255,.08)}
.foot-claim{color:#fff;font-size:1.15rem;font-weight:800;letter-spacing:-.01em}
.foot-mail{display:inline-flex;align-items:center;gap:.6rem;padding:.6rem 1.1rem;border:1px solid rgba(255,255,255,.22);border-radius:999px;color:#fff;font-weight:600;font-size:.92rem;transition:border-color .15s,background .15s}
.foot-mail:hover{border-color:rgba(255,255,255,.45);background:rgba(255,255,255,.05)}
.foot-mail svg{width:18px;height:18px}
.foot-base{margin-top:2rem;border-top:1px solid rgba(255,255,255,.08);align-items:center}
.foot-made{display:inline-flex;align-items:center;gap:1rem}
.totop{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:#fff;color:#02061f}
.totop svg{width:18px;height:18px}
.totop:hover{background:#e8eeff}

/* Footer v4: middle row removed (duplicated the pilot band); the base row is a trust
   signal, so it reads clearly (as on Stadtliste). */
.foot-base{margin-top:3rem;font-size:.92rem;color:rgba(255,255,255,.78)}

/* Top bar v2 (Nov 11 2026): slow marquee like the stadt.me announcement bar; full
   sentence on every width; pauses on hover; still (short form) under reduced motion. */
.bar{position:relative;overflow:hidden;white-space:nowrap;padding:.9rem 0}
.bar .bar-track{display:inline-flex;width:max-content;animation:barmove 60s linear infinite}
.bar:hover .bar-track,.bar:focus-visible .bar-track{animation-play-state:paused}
.bar .bar-group{display:inline-flex}
.bar .bar-item{display:inline-flex;align-items:center;margin:0;padding:0 3.5rem}
.bar .bar-item::after{content:"";width:5px;height:5px;border-radius:50%;background:rgba(127,162,255,.7);margin-left:3.5rem;display:inline-block}
.bar .bar-arrow{margin-left:.45rem}
.bar span{margin-left:0}
.bar .bar-static{display:none}
@keyframes barmove{to{transform:translateX(-50%)}}

/* FAQ: smooth open/close without JavaScript where the browser supports it. */
:root{interpolate-size:allow-keywords}
.faq details::details-content{block-size:0;overflow:hidden;opacity:0;
  transition:block-size .35s ease,opacity .3s ease,content-visibility .35s allow-discrete}
.faq details[open]::details-content{block-size:auto;opacity:1}
@media (prefers-reduced-motion:reduce){.faq details::details-content{transition:none}}

/* Top bar v3: ONE message at a time, crossing like a ticker (enters right, leaves left, then repeats). */
.bar .bar-track{display:inline-block;padding-left:100%;animation:bartick 24s linear infinite}
.bar .bar-item{padding:0}
.bar .bar-item::after{display:none}
@keyframes bartick{from{transform:translateX(0)}to{transform:translateX(-100%)}}

/* Top bar v4: still and centred where the sentence fits; a slow ticker only on narrow screens. */
.bar{text-align:center}
.bar .bar-track{padding-left:0;animation:none}
@media (max-width:640px){
  .bar{text-align:left}
  .bar .bar-track{padding-left:100%;animation:bartick 26s linear infinite}
}
@media (max-width:640px) and (prefers-reduced-motion:reduce){.bar .bar-track{display:none}.bar .bar-static{display:block;text-align:center}}

/* Top bar v5 (Nov 11 2026, after Fish Audio's "NEW" bar): badge + white text, bluer navy. */
.bar{background:linear-gradient(90deg,#030a33,#06145c 50%,#030a33);color:#fff;padding:.7rem 0;font-size:.92rem}
.bar .bar-item{display:inline-flex;align-items:center;gap:.75rem}
.bar .bar-badge{display:inline-block;padding:.22rem .6rem;border-radius:999px;background:#1f55ff;color:#fff;font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.bar .bar-text{color:#fff;font-weight:500}
.bar .bar-arrow{margin-left:-.25rem;font-weight:700;transition:transform .15s}
.bar:hover .bar-text{text-decoration:underline;text-underline-offset:3px}
.bar:hover .bar-arrow{transform:translateX(3px)}

/* Top bar v6 (owner: v5 competed with the header): quieter than the header and no shapes the
   header uses. Thin solid strip, small text, "Pilot phase" bold white as the only accent. */
.bar{background:#02061f;padding:.5rem 0;font-size:.82rem}
.bar .bar-item{gap:.45rem}
.bar .bar-badge{padding:0;border-radius:0;background:none;color:#fff;font-size:inherit;font-weight:700;letter-spacing:0;text-transform:none}
.bar .bar-badge::after{content:":"}
.bar .bar-text{color:rgba(255,255,255,.72);font-weight:400}
.bar .bar-arrow{margin-left:0;color:rgba(255,255,255,.72);font-weight:400}
.bar:hover .bar-text{color:#fff}

/* Top bar v7: full height again and easy to read (owner: the jury should see it first). */
.bar{padding:.9rem 0;font-size:.95rem}
.bar .bar-text{color:rgba(255,255,255,.88)}
.bar .bar-arrow{color:rgba(255,255,255,.88)}

/* Problem section v2 (test, Nov 11 2026; Bolt structure): headline + subtitle, three role
   cards with a code-drawn visual bleeding off the bottom-right edge, then the cited statistic
   paired with the card that shows where the missed leakage happens. */
.roles{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:auto auto 1fr;column-gap:1.25rem;margin-top:5rem}
.role{display:grid;grid-row:span 3;grid-template-rows:subgrid;padding-bottom:0}
.role .vis{margin-top:0;align-self:end;font-size:.82rem}
.gap{display:flex;flex-direction:column;padding-bottom:0}
.role .vis,.gap .vis{margin:auto -2rem 0 0;padding-top:1.1rem;border-right:0;border-bottom:0;border-radius:.9rem 0 0 0}
.role > p,.gap > p{margin-bottom:1.75rem}
.role .vis{padding-bottom:1.3rem}
.ev > span:last-child{white-space:nowrap}
.ev.warn{color:#ffd9a8}.ev.warn .dot{background:#ffb347;box-shadow:0 0 10px #ffb347}
.qs .q,.tree > div{display:flex;justify-content:space-between;gap:1rem;padding:.55rem 0;border-bottom:1px solid rgba(255,255,255,.06);color:rgba(255,255,255,.62)}
.qs .q:last-child,.tree > div:last-child{border-bottom:0}
.qs .q b,.tree b{color:#fff;font-weight:600;white-space:nowrap}
.tree .t1 span{padding-left:1ch}.tree .t2 span{padding-left:3ch}.tree .t3 span{padding-left:5ch}
.tree .t2{color:#cfe0ff}

.pair{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;margin-top:1.25rem}
.stat{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:3rem 2rem}
.stat .big{font-size:clamp(3.6rem,8vw,6rem);font-weight:800;letter-spacing:-.04em;line-height:1;color:#fff;text-shadow:0 0 50px rgba(110,150,255,.4)}
.stat .stat-what{margin-top:.6rem;font-size:clamp(1.3rem,2.2vw,1.75rem);font-weight:700;letter-spacing:-.01em;color:rgba(255,255,255,.6)}
.stat > p{margin-top:1.4rem;max-width:30rem;color:rgba(255,255,255,.68);line-height:1.6}
.stat .cite{margin-top:1rem;font-size:.85rem;color:rgba(255,255,255,.6)}
.stat .cite a{color:rgba(255,255,255,.85);text-decoration:underline;text-decoration-color:rgba(140,165,255,.6);text-underline-offset:.2em}
.stat .cite a:hover{color:#fff;text-decoration-color:#fff}
.stat .cite a:focus-visible{outline:2px solid #8ca5ff;outline-offset:2px;border-radius:2px}

.flow{display:grid;grid-template-columns:auto auto auto auto auto 1fr;align-items:center;gap:.9rem .6rem;padding-bottom:1.4rem}
.flow .node{border:1px solid rgba(140,165,255,.25);border-radius:.5rem;padding:.45rem .7rem;color:#fff;white-space:nowrap}
.flow .hop{color:#ffb347;text-align:center}
.flow .out{border-color:rgba(255,255,255,.3)}
.flow .brk{grid-row:2;border-top:1px solid;padding-top:.45rem;font-size:.78rem;text-align:center;white-space:nowrap}
.flow .b-out{grid-column:5/6;color:rgba(255,255,255,.55);border-color:rgba(255,255,255,.35)}
.flow .b-all{grid-row:3;grid-column:1/6;color:#cfe0ff;border-color:#3d7bff}
@media (max-width:980px){.roles{grid-template-columns:1fr;grid-template-rows:none}.role{grid-row:auto;grid-template-rows:auto auto 1fr}.role + .role{margin-top:1.25rem}}
@media (max-width:760px){.pair{grid-template-columns:1fr}.role .vis,.gap .vis{margin-right:-1.5rem}.flow{gap:.8rem .35rem}.flow .node{padding:.4rem .5rem}}
.head p{text-wrap:balance}
.box > p{text-wrap:pretty}

/* Semantic accents (Nov 11 2026): colour carries meaning, like an instrument.
   blue = recorded (existing), flight-recorder orange = flagged / the gap, green = verified. */
.cp b{color:#6ee7a8}
.finding .id{color:#ffb347}

/* Security section (test, Nov 11 2026): six checkable properties, 3x2 tiles aligned
   by subgrid (title / text / panel rows line up), then a bracket and one closing line. */
.props{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:auto auto 1fr auto auto 1fr;column-gap:1.25rem;margin-top:5rem}
.prop{display:grid;grid-row:span 3;grid-template-rows:subgrid;padding-bottom:0}
.prop:nth-child(n+4){margin-top:1.25rem}
.prop > p{margin-bottom:1.75rem}
.prop .vis{margin:0 -2rem 0 0;align-self:end;border-right:0;border-bottom:0;border-radius:.9rem 0 0 0;padding-bottom:1.3rem;font-size:.82rem}
.kv > div{display:flex;justify-content:space-between;gap:1rem;padding:.55rem 0;border-bottom:1px solid rgba(255,255,255,.06);color:rgba(255,255,255,.62)}
.kv > div:last-child{border-bottom:0}
.kv b{color:#fff;font-weight:600;white-space:nowrap}
.kv b.ok{color:#6ee7a8}.kv b.flag{color:#ffb347}.kv b.dim{color:rgba(255,255,255,.45);font-weight:400}
.bracket{position:relative;height:1.5rem;margin:3rem 0 0;border:1px solid rgba(140,165,255,.3);border-bottom:0}
.bracket::after{content:"";position:absolute;left:50%;top:0;width:1px;height:2.5rem;background:rgba(140,165,255,.3)}
.bracket-line{margin:2.25rem auto 0;max-width:640px;text-align:center;color:#fff;font-size:1.2rem;font-weight:650;line-height:1.5;text-wrap:balance}
@media (max-width:980px){.props{grid-template-columns:1fr;grid-template-rows:none}.prop{grid-row:auto;grid-template-rows:auto auto 1fr}.prop + .prop{margin-top:1.25rem}.bracket{display:none}.bracket-line{margin-top:3rem}}
@media (max-width:760px){.prop .vis{margin-right:-1.5rem}}


/* Section shades (test, Nov 11 2026; owner: slight variation, not bands): alternate middle
   sections sit on a lifted navy-grey with faint light from above, hairline edges. Same theme:
   space in shades of black, blue and grey; the tool brings the light. */
.sec.shade{position:relative;isolation:isolate;margin-top:6rem;padding-top:7rem;padding-bottom:7rem}
.sec.shade::before{content:"";position:absolute;inset:0 calc(50% - 50vw);z-index:-1;
  background:radial-gradient(60% 45% at 50% 0%,rgba(90,125,255,.10),transparent 70%),linear-gradient(180deg,#0b1024,#080c1d);
  border-top:1px solid rgba(140,165,255,.09);border-bottom:1px solid rgba(140,165,255,.06)}
.sec.shade + .sec{padding-top:8rem}
.sec.shade + .close{margin-top:0}
@media (max-width:760px){.sec.shade{margin-top:4rem;padding-top:5rem;padding-bottom:5rem}.sec.shade + .sec{padding-top:6rem}}

/* Headline glow toned down (owner: too flashy on the dark background). */
.head h2{text-shadow:0 0 22px rgba(140,180,255,.22),0 0 60px rgba(60,120,255,.16)}

/* 404 page (Nov 11 2026): the placeholder's drifting light streaks live here only
   (owner: the landing page has enough going on). Static, no JS; none under reduced motion. */
.nf{min-height:100svh;display:flex;flex-direction:column;position:relative;isolation:isolate;overflow:hidden;
  background:radial-gradient(70% 55% at 50% 0%,rgba(31,85,255,.22),transparent 70%),#01030f}
.nf .lines{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:repeating-linear-gradient(-22deg,rgba(255,255,255,.025) 0 1px,transparent 1px 38px)}
.nf .s{position:absolute;z-index:-1;height:1px;width:140px;opacity:0;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(200,215,255,.7));rotate:-22deg;animation:streak 7s linear infinite}
.nf .s1{top:12%;left:58%;animation-delay:0s}
.nf .s2{top:28%;left:12%;animation-delay:2.4s;width:110px}
.nf .s3{top:64%;left:72%;animation-delay:4.1s}
.nf .s4{top:80%;left:30%;animation-delay:5.6s;width:90px}
.nf .s5{top:44%;left:88%;animation-delay:1.2s;width:120px}
@keyframes streak{0%{opacity:0;translate:-60px -24px}15%{opacity:1}60%{opacity:0;translate:220px 89px}100%{opacity:0;translate:220px 89px}}
@media (prefers-reduced-motion:reduce){.nf .s{display:none}}
.nf .nf-top{padding:1.5rem 1.5rem 0;max-width:1180px;width:100%;margin:0 auto}
.nf main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:4rem 1.5rem}
.nf h1{font-size:clamp(2.2rem,5.5vw,3.6rem);font-weight:800;letter-spacing:-.035em;line-height:1.1;color:#fff;
  text-shadow:0 0 22px rgba(140,180,255,.22),0 0 60px rgba(60,120,255,.16)}
.nf main p{margin-top:1.25rem;max-width:520px;font-size:1.1rem;line-height:1.6;color:rgba(255,255,255,.7)}
.nf .nf-go{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem;margin-top:2.5rem}
.nf .nf-go a{border-radius:999px;padding:.8rem 1.4rem;font-weight:700;font-size:.98rem;text-decoration:none}
.nf .nf-go .home{background:#fff;color:#0a0f24}
.nf .nf-go .home:hover{background:#e6ecff}
.nf .nf-go .alt{border:1px solid rgba(140,165,255,.3);color:#fff}
.nf .nf-go .alt:hover{border-color:rgba(200,215,255,.6)}
.nf .nf-go a:focus-visible{outline:2px solid #8ca5ff;outline-offset:3px}
.nf .nf-foot{padding:1.5rem;text-align:center;font-size:.85rem}
.nf .nf-foot a{color:rgba(255,255,255,.6);margin:0 .7rem;text-decoration:none}
.nf .nf-foot a:hover{color:#fff}

/* How it works, coloured tiles (test, Nov 11 2026; after Spaceship's product cards): one wide
   card (panel left), two half cards (panel on top). Panel colours carry the page's meanings:
   blue = recorded, green = verified, orange = findings. The code panels sit on them as screens. */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;margin-top:5rem}
.tile{padding:0;display:flex;flex-direction:column}
.tile.wide{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr}
.tile .art{display:flex;align-items:center;justify-content:center;padding:2.75rem 2.5rem;min-height:250px}
.tile .art .vis{margin:0;width:100%;max-width:460px;background:rgba(3,6,22,.86);border-color:rgba(255,255,255,.12);box-shadow:0 24px 60px rgba(0,0,0,.35)}
.tile .txt{padding:2.5rem}
.tile.wide .txt{align-self:center;padding:3rem}
.tile h3{font-size:clamp(1.6rem,2.6vw,2.2rem);letter-spacing:-.025em;line-height:1.15}
.tile .txt p{margin-top:.9rem;line-height:1.6;color:rgba(255,255,255,.68)}
.art-blue{background:radial-gradient(120% 120% at 0% 0%,#4f86ff 0%,#0b3cf0 45%,#08217f 100%)}
.art-green{background:radial-gradient(120% 120% at 0% 0%,#2fbf8f 0%,#0f7a68 45%,#0b3d5c 100%)}
.art-amber{background:radial-gradient(120% 120% at 0% 0%,#ffc56b 0%,#f0892a 45%,#9c3f17 100%)}
.kick.k-blue{color:#7fa2ff}.kick.k-green{color:#6ee7a8}.kick.k-amber{color:#ffb347}
@media (max-width:760px){.tiles{grid-template-columns:1fr}.tile.wide{grid-template-columns:1fr}.tile .art{padding:2rem 1.25rem;min-height:0}.tile .txt,.tile.wide .txt{padding:1.75rem 1.5rem}}
/* half tiles: panel row and text row line up across the pair (subgrid) */
@media (min-width:761px){
  .tiles{grid-template-rows:auto auto auto;row-gap:0}
  .tile.wide{margin-bottom:1.25rem}
  .tile:not(.wide){grid-row:span 2;display:grid;grid-template-rows:subgrid}
}

/* Security tiles in colour (test, Nov 11 2026): one deeper teal-green family for all six
   (green = a safeguard that holds), darker than the How cards so those stay the highlight. */
.props-c{grid-template-rows:auto auto auto auto;row-gap:0}
.props-c .tile{grid-row:span 2;display:grid;grid-template-rows:subgrid;margin:0}
.props-c .tile:nth-child(n+4){margin-top:1.25rem}
.props-c .art{min-height:0;padding:2rem 1.75rem}
.props-c .art .vis{padding:.9rem 1.1rem}
.props-c .txt{padding:1.75rem 2rem 2rem}
.props-c .tile h3{font-size:1.35rem;letter-spacing:-.01em}
.props-c .txt p{margin-top:.7rem}
.art-sec{background:radial-gradient(120% 120% at 0% 0%,#1d8a72 0%,#0d5a5a 45%,#0a2f4a 100%)}
@media (max-width:980px){.props-c{grid-template-columns:1fr;grid-template-rows:none}.props-c .tile{grid-row:auto;grid-template-rows:auto auto}.props-c .tile + .tile{margin-top:1.25rem}}

/* Hero on tall portrait screens (owner, Nov 11 2026: 27" in portrait looked "zoomed out":
   the hero filled the whole height with small content in the middle). Above phone width the
   height is also capped by the width (68vw), so landscape screens keep their height
   (100svh is the smaller value there) and portrait screens stop stretching. Phones unchanged. */
@media (min-width:761px){
  .hero,.hero-in{min-height:max(560px,min(calc(100svh - 8.25rem),68vw))}
}

/* Hero lead as two lines (Nov 11 2026): staccato line in white, the claim below it. */
.hero-in .lead .lead-a{display:block;font-weight:700;color:#fff}
.hero-in .lead .lead-b{display:block;margin-top:.35rem;color:rgba(255,255,255,.85)}

/* About timeline: the highlighted (white) dot marks Superinspect (.now), not the last entry,
   since the timeline is chronological and stadt.me (Aug 2026) comes after it. */
.timeline li:last-child:not(.now)::before{background:#0a5cff;box-shadow:0 0 0 3px #04071a,0 0 14px rgba(61,123,255,.7)}
.timeline li.now::before{background:#fff;box-shadow:0 0 0 3px #04071a,0 0 18px rgba(170,200,255,.9)}

/* Legal pages (Impressum / Datenschutz, Nov 11 2026): one readable column, no cards. */
.legal-page .page-hero-in h1{font-size:clamp(2rem,4.4vw,3.2rem)}
.legal-doc{max-width:760px;padding-top:5rem;padding-bottom:7rem}
.legal-doc .lede{color:rgba(255,255,255,.6);font-size:.95rem}
.legal-doc h2{margin-top:2.6rem;color:#fff;font-size:1.25rem;font-weight:800;letter-spacing:-.01em}
.legal-doc p{margin-top:.8rem;line-height:1.7;color:rgba(255,255,255,.75)}
.legal-doc a{color:#fff;text-decoration:underline;text-decoration-color:rgba(140,165,255,.6);text-underline-offset:.2em}
.legal-doc a:hover{text-decoration-color:#fff}
.legal-doc a:focus-visible{outline:2px solid #8ca5ff;outline-offset:2px;border-radius:2px}
@media (max-width:760px){.legal-doc{padding-top:3rem;padding-bottom:5rem}}

/* 360 px phones (Nov 11 2026 check): the header (brand + language pill + pilot pill) was
   1-6 px wider than the screen on every page but the home page. Tighter at <=400 px. */
@media (max-width:400px){
  .nav{padding-left:1rem;padding-right:1rem;gap:.5rem}
  .brand{font-size:1.05rem;gap:.45rem}
  .right{gap:.4rem}
  .right .pill-dark{padding:.5rem .75rem;font-size:.82rem}
  .pill-glass{padding:.5rem .65rem}
}
/* 404: the drifting streaks live in a fixed, clipped sky so they never widen the page */
.nf .sky{position:fixed;inset:0;overflow:hidden;z-index:-1;pointer-events:none}
.nf .sky .lines{position:absolute;inset:0}
/* long German compounds ("Datenschutzerklärung") on 360 px: title scales with the width, text may hyphenate */
.legal-page .page-hero-in h1{font-size:clamp(1.6rem,7.5vw,3.2rem);hyphens:auto;overflow-wrap:break-word}
.legal-doc p,.legal-doc h2{hyphens:auto;overflow-wrap:break-word}

/* Contrast (WCAG AA, Nov 11 2026 check): small text on the bright hero blue (#1652ff) needs
   ~88 % white; the soft blue-white below reaches 4.9:1 and keeps the label quieter than white. */
.eyebrow,.hero-in .eyebrow,.page-hero-in .eyebrow,.works2 .wl{color:#e8eeff}
.hero-in .lead .lead-b{color:rgba(255,255,255,.9)}
.close .label{color:rgba(255,255,255,.92)}
.close .note{color:rgba(255,255,255,.9)}
.kv b.dim{color:rgba(255,255,255,.52)}

/* Mid widths (641-900 px: tablets, editor previews): the hero pill kept its desktop size
   on half the screen and repeated the header's "Request a pilot". Same rule as phones:
   the header carries the CTA, the hero pill shows only REC + the fact. */
@media (max-width:900px){
  .hero-in .pill-go{display:none}
  .hero-in .rotator{padding:.6rem 1.3rem .6rem 1rem}
}

/* Nov 11 2026 (owner, phone review) ---------------------------------------------------- */
/* Pilot band: the About page's white button instead of the dark email bar; the address
   lives in the note below as a link. */
.close .pilot-btn{margin-top:3rem}
.close .note a{color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.6);text-underline-offset:.2em}
.close .note a:hover{text-decoration-color:#fff}
.btn-main:focus-visible,.back-home:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* Way back from About and the legal pages (the header is not sticky). */
.back-home{display:inline-block;margin-top:3rem;color:rgba(255,255,255,.8);font-weight:650}
.back-home:hover{color:#fff}

/* Mobile menu: a <details> disclosure (no JavaScript, CSP unchanged), shown where the
   header links are hidden. Holds the section links, Home on subpages, and the language. */
.mnav{display:none;position:relative}
.mnav summary{list-style:none;cursor:pointer;width:2.5rem;height:2.5rem;border-radius:999px;background:rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center}
.mnav summary::-webkit-details-marker{display:none}
.mnav summary:hover{background:rgba(255,255,255,.22)}
.mnav summary:focus-visible{outline:2px solid #fff;outline-offset:2px}
.mnav-ico{position:relative;display:block;width:1.05rem;height:2px;border-radius:2px;background:#fff;box-shadow:0 -5px 0 #fff,0 5px 0 #fff}
.mnav[open] .mnav-ico{background:transparent;box-shadow:none}
.mnav[open] .mnav-ico::before,.mnav[open] .mnav-ico::after{content:"";position:absolute;left:0;top:0;width:100%;height:2px;border-radius:2px;background:#fff;rotate:45deg}
.mnav[open] .mnav-ico::after{rotate:-45deg}
.mnav-panel{position:absolute;right:0;top:calc(100% + .6rem);z-index:20;min-width:13.5rem;display:flex;flex-direction:column;padding:.45rem;
  border-radius:1rem;background:#0b1024;border:1px solid rgba(140,165,255,.22);box-shadow:0 20px 50px rgba(0,0,0,.45)}
.mnav-panel a{padding:.8rem 1rem;border-radius:.6rem;color:#fff;font-weight:650;font-size:1rem}
.mnav-panel a:hover,.mnav-panel a:focus-visible{background:rgba(255,255,255,.08);outline:none}
.mnav-panel .mnav-lang{margin-top:.3rem;border-top:1px solid rgba(255,255,255,.1);border-radius:0 0 .6rem .6rem;color:rgba(255,255,255,.75)}
@media (max-width:860px){.mnav{display:block}}
@media (max-width:520px){.right .pill-glass{display:none}}

/* Flow diagram on phones: no bleed past the card, smaller type, the label may wrap. */
@media (max-width:520px){
  .gap .vis{margin-right:0;border-right:1px solid rgba(140,165,255,.14);border-radius:.9rem}
  .flow{font-size:.72rem;gap:.7rem .3rem;padding-left:1rem;padding-right:1rem}
  .flow .node{padding:.35rem .4rem}
  .flow .brk{white-space:normal;font-size:.68rem;line-height:1.3}
}
/* Hero pill on small phones (<=420 px): the longest fact ran past the pill's right edge. */
@media (max-width:420px){
  .hero-in .rotator{gap:.55rem;padding:.55rem .9rem .55rem .7rem}
  .hero-in .rec{padding-right:.55rem;font-size:.66rem;letter-spacing:.12em}
  .hero-in .r{font-size:.86rem}
}
/* Long German words on phones: card columns stay within the card, headlines may hyphenate. */
.props-c .tile,.roles .role,.tiles .tile{grid-template-columns:minmax(0,1fr)}
.head h2,.head .pre{overflow-wrap:break-word;hyphens:auto}
.close .note{text-wrap:balance}

/* REC dot in recording red (owner, Nov 11 2026: the convention for "recording"). The pulse
   ring follows the colour. */
.recdot{background:#ff3b3b;box-shadow:0 0 0 0 rgba(255,59,59,.7);animation-name:recred}
@keyframes recred{0%{box-shadow:0 0 0 0 rgba(255,59,59,.7)}70%{box-shadow:0 0 0 10px rgba(255,59,59,0)}100%{box-shadow:0 0 0 0 rgba(255,59,59,0)}}
/* Security closing line on phones: the bracket was hidden below 980 px, so the line hung
   alone. A short centred stem now ties it to the tiles, and the line is set smaller. */
@media (max-width:980px){
  .bracket{display:block;height:0;border:0;margin-top:1.5rem}
  .bracket::after{height:2rem;translate:-50% 0}
  .bracket-line{margin-top:2.75rem;font-size:1.05rem;font-weight:600;color:rgba(255,255,255,.88);padding:0 .5rem}
}