/* ═══════════════════════════════════════════════════════════════════════
   Stellium — star-atlas identity, committed dark. One spacing scale, one
   card treatment, one section pattern; the variety comes from the content,
   not from each section inventing its own frame.

   No inline styles anywhere: the site runs under a strict CSP
   (style-src 'self', no unsafe-inline), so every rule lives here.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  /* ground + ink */
  --sky:#0a0c18; --sky2:#0d1022; --card:#10132a; --raise:#141935;
  --ink:#e8e4d8; --mut:#9a96a8; --dim:#6f6b80;
  --line:rgba(212,181,110,.20); --line-2:rgba(212,181,110,.34);

  /* accents — the four bodies of the stellium */
  --gold:#d4b56e; --gold-hi:#f0d9a4;
  --triton:#5fd8e8; --dlss:#8be08b; --bridge:#e89a5f; --eg:#c98bde;

  /* type */
  --serif:'Palatino Linotype',Palatino,Georgia,serif;
  --sans:'Segoe UI',system-ui,-apple-system,sans-serif;
  --mono:Consolas,'Cascadia Code',ui-monospace,monospace;

  /* one spacing scale, used everywhere */
  --s1:6px; --s2:12px; --s3:20px; --s4:32px; --s5:52px; --s6:84px;
  --r:12px;              /* one radius */
  --nav-h:58px;
  --wrap:1060px;
}

*{box-sizing:border-box; margin:0;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} }

body{
  background:var(--sky); color:var(--ink);
  font-family:var(--sans); font-size:16.5px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

a{color:var(--gold); text-decoration:none;}
a:hover{color:var(--gold-hi);}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px; border-radius:3px;}
img{max-width:100%;}

.wrap{max-width:var(--wrap); margin:0 auto; padding:0 var(--s3);}

/* skip link — keyboard users should not tab through the star chart */
.skip{position:absolute; left:-9999px; top:0; z-index:100;
      background:var(--gold); color:var(--sky); padding:10px 16px;
      font-family:var(--mono); font-size:13px;}
.skip:focus{left:var(--s3); top:var(--s3);}

/* ── nav ─────────────────────────────────────────────────────────────── */
.nav{position:sticky; top:0; z-index:50; height:var(--nav-h);
     background:rgba(10,12,24,.86); backdrop-filter:blur(10px);
     border-bottom:1px solid var(--line);}
.nav-in{max-width:var(--wrap); margin:0 auto; padding:0 var(--s3);
        height:100%; display:flex; align-items:center; gap:var(--s3);}
.nav-mark{font-family:var(--serif); font-size:17px; letter-spacing:.22em;
          color:var(--ink); white-space:nowrap; text-indent:.22em;}
.nav-mark b{color:var(--gold); font-weight:400;}
.nav-links{display:flex; gap:var(--s3); margin-left:auto; align-items:center;
           overflow-x:auto; scrollbar-width:none;}
.nav-links::-webkit-scrollbar{display:none;}
.nav-links a{font-family:var(--mono); font-size:11.5px; letter-spacing:.14em;
             color:var(--mut); text-transform:uppercase; white-space:nowrap;}
.nav-links a:hover{color:var(--ink);}
.nav-links .btn{padding:7px 14px; font-size:11px;}
@media (max-width:720px){
  .nav-mark{font-size:15px; letter-spacing:.14em; text-indent:.14em;}
  .nav-links{gap:var(--s2);}
  .nav-links a.hide-sm{display:none;}
}

/* ── buttons ─────────────────────────────────────────────────────────── */
.btn{display:inline-block; font-family:var(--mono); font-size:12.5px;
     letter-spacing:.12em; text-transform:uppercase; padding:11px 20px;
     border:1px solid var(--line-2); border-radius:6px; color:var(--ink);
     background:transparent; transition:background .15s, border-color .15s,
     color .15s; white-space:nowrap;}
.btn:hover{border-color:var(--gold); color:var(--gold-hi); background:var(--sky2);}
.btn.primary{background:var(--gold); border-color:var(--gold); color:var(--sky);
             font-weight:700;}
.btn.primary:hover{background:var(--gold-hi); color:var(--sky);}
.links{display:flex; gap:var(--s2); flex-wrap:wrap; align-items:center;}

/* ── hero ────────────────────────────────────────────────────────────── */
.hero{position:relative; min-height:calc(100vh - var(--nav-h));
      display:flex; align-items:center; overflow:hidden;
      border-bottom:1px solid var(--line);}
#chart{position:absolute; inset:0; width:100%; height:100%; display:block;}
.hero-in{position:relative; z-index:2; width:100%; text-align:center;
         padding:var(--s6) var(--s3);}
.hero h1{font-family:var(--serif); font-weight:400;
         font-size:clamp(42px,8.5vw,92px); line-height:1.02;
         letter-spacing:.26em; text-indent:.26em; text-wrap:balance;}
.hero h1 b{color:var(--gold); font-weight:400;}
.hero .lede{font-family:var(--serif); font-style:italic; color:var(--mut);
            font-size:clamp(15px,2vw,19px); margin:var(--s3) auto 0;
            max-width:54ch;}
.hero .links{justify-content:center; margin-top:var(--s4);}
.hero .note{font-family:var(--mono); font-size:11.5px; letter-spacing:.06em;
            color:var(--dim); margin:var(--s3) auto 0; max-width:56ch;}
.hero-hint{position:absolute; bottom:var(--s3); left:0; right:0;
           text-align:center; font-family:var(--mono); font-size:10.5px;
           letter-spacing:.28em; color:var(--dim); z-index:2;}

/* ── the one section pattern ─────────────────────────────────────────── */
.sec{padding:var(--s6) 0 0; scroll-margin-top:calc(var(--nav-h) + 12px);}
.sec:last-of-type{padding-bottom:var(--s5);}
.sec-head{margin-bottom:var(--s4);}
.eyebrow{display:block; font-family:var(--mono); font-size:11px;
         letter-spacing:.2em; text-transform:uppercase; color:var(--gold);
         margin-bottom:var(--s1);}
.sec-head h2{font-family:var(--serif); font-weight:400;
             font-size:clamp(27px,4vw,38px); line-height:1.15;
             letter-spacing:.01em; text-wrap:balance;}
.sec-head p{color:var(--mut); max-width:62ch; margin-top:var(--s2);
            font-size:17px;}
.sec-head p strong{color:var(--ink); font-weight:600;}
.rule{height:1px; background:var(--line); border:0; margin-top:var(--s6);}

/* ── cards ───────────────────────────────────────────────────────────── */
.card{border:1px solid var(--line); border-radius:var(--r);
      background:var(--card); padding:var(--s4);}
.card.accent{border-color:var(--line-2);}
.card h3{font-family:var(--serif); font-weight:400; font-size:25px;
         line-height:1.2; display:flex; align-items:center; gap:var(--s2);
         flex-wrap:wrap;}
.card .kind{display:block; font-family:var(--mono); font-size:11px;
            letter-spacing:.14em; text-transform:uppercase; color:var(--mut);
            margin-top:var(--s1);}
.card p{color:var(--mut); margin-top:var(--s3); max-width:60ch;}
.card p strong{color:var(--ink); font-weight:600;}
.card .links{margin-top:var(--s4);}

.tag{font-family:var(--mono); font-size:9.5px; letter-spacing:.16em;
     text-transform:uppercase; padding:4px 9px; border-radius:4px;
     border:1px solid currentColor; font-weight:700; line-height:1;}
.tag.free{color:var(--dlss);}
.tag.paid{color:var(--gold);}
.tag.flag{color:var(--mut);}

/* two-up offer grid */
.duo{display:grid; gap:var(--s3);
     grid-template-columns:repeat(auto-fit,minmax(300px,1fr));}
.duo .card{display:flex; flex-direction:column;}
.duo .card .links{margin-top:auto; padding-top:var(--s4);}
.price{font-family:var(--serif); font-size:31px; color:var(--ink);
       margin-top:var(--s3); line-height:1.1;}
.price small{display:block; font-family:var(--mono); font-size:11px;
             letter-spacing:.12em; color:var(--mut); text-transform:uppercase;
             margin-top:var(--s1);}
#triton .card.accent{border-left:3px solid var(--triton);}
#online .card.accent{border-left:3px solid var(--gold);}

/* feature lists */
.feats{list-style:none; padding:0; margin-top:var(--s3); display:grid;
       gap:var(--s1) var(--s3);
       grid-template-columns:repeat(auto-fit,minmax(210px,1fr));}
.feats li{color:var(--mut); font-size:14.5px; padding-left:17px;
          position:relative; line-height:1.5;}
.feats li::before{content:'\2726'; position:absolute; left:0; top:2px;
                  font-size:9px; color:var(--gold);}
.feats.cy li::before{color:var(--triton);}

/* prose block */
.prose p{color:var(--mut); max-width:66ch;}
.prose p + p{margin-top:var(--s2);}
.prose strong{color:var(--ink); font-weight:600;}
.prose em{color:var(--gold); font-style:normal;}

/* ── disclosure rows (mods + FAQ share one treatment) ────────────────── */
.rows{display:grid; gap:var(--s2);}
.row{border:1px solid var(--line); border-radius:var(--r);
     background:var(--card); overflow:hidden;
     scroll-margin-top:calc(var(--nav-h) + 12px);}
.row summary{list-style:none; cursor:pointer; padding:16px var(--s3);
             display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap;}
.row summary::-webkit-details-marker{display:none;}
.row summary:hover{background:var(--raise);}
.row[open] summary{background:var(--raise); border-bottom:1px solid var(--line);}
.r-name{font-family:var(--serif); font-size:19px; letter-spacing:.03em;
        color:var(--ink);}
.r-tease{color:var(--mut); font-size:14.5px; flex:1; min-width:180px;}
.r-mark{width:20px; height:20px; flex:none; position:relative; margin-left:auto;}
.r-mark::before,.r-mark::after{content:''; position:absolute;
  background:var(--gold); transition:transform .18s ease, opacity .18s ease;}
.r-mark::before{top:9px; left:2px; width:16px; height:1.5px;}
.r-mark::after{top:2px; left:9px; width:1.5px; height:16px;}
.row[open] .r-mark::after{transform:rotate(90deg); opacity:0;}
.r-body{padding:var(--s3);}
.r-body p{color:var(--mut); max-width:64ch;}
.r-body .links{margin-top:var(--s3);}
#dlss .r-name{color:var(--dlss);} #dlss .feats li::before{color:var(--dlss);}
#bridge .r-name{color:var(--bridge);} #bridge .feats li::before{color:var(--bridge);}
#genesis .r-name{color:var(--eg);}
.soon{font-family:var(--mono); font-size:11px; letter-spacing:.16em;
      color:var(--eg); text-transform:uppercase;}

/* ── video cards ─────────────────────────────────────────────────────── */
/* The thumbnails are bright hand-drawn artwork against a dark star atlas,
   so they are framed as cards rather than bled into the page — the frame
   reads as "this is a video still", which is what it is. */
.vid{display:block; border:1px solid var(--line); border-radius:var(--r);
     background:var(--card); overflow:hidden;
     transition:border-color .15s ease, transform .15s ease;}
.vid:hover{border-color:var(--gold); transform:translateY(-2px);}
@media (prefers-reduced-motion:reduce){ .vid:hover{transform:none;} }
.vid img{display:block; width:100%; height:auto;}
.vid-meta{display:block; padding:14px var(--s3);}
.vid-meta strong{display:block; color:var(--ink); font-size:15.5px;
                 font-weight:600; line-height:1.35;}
.vid-meta span{display:block; font-family:var(--mono); font-size:11px;
               letter-spacing:.08em; color:var(--mut); margin-top:5px;}
.vid.lead{max-width:660px;}
.vid.lead .vid-meta strong{font-size:18px;}
.vids{display:grid; gap:var(--s3); margin-top:var(--s3); max-width:660px;
      grid-template-columns:repeat(auto-fit,minmax(230px,1fr));}

/* Die Miniaturbilder waren nur Bilder in einem Link -- sie lasen sich als
   Bildschirmfotos. Abspielzeichen und Laufzeit machen daraus etwas, das
   sichtbar abspielt. Beides aus CSS gezeichnet: kein Bild, kein Skript. */
.vid-shot{display:block; position:relative; line-height:0;}
.vid-play{position:absolute; inset:0; margin:auto;
          width:58px; height:58px; border-radius:50%;
          background:rgba(9,11,18,.58);
          border:1px solid rgba(255,255,255,.34);
          display:grid; place-items:center;
          backdrop-filter:blur(2px);
          transition:background .15s ease, border-color .15s ease,
                     transform .15s ease;}
.vid-play::after{content:""; width:0; height:0; margin-left:5px;
                 border-left:17px solid #fff;
                 border-top:10.5px solid transparent;
                 border-bottom:10.5px solid transparent;}
.vid:hover .vid-play{background:var(--gold); border-color:var(--gold);
                     transform:scale(1.06);}
.vid:hover .vid-play::after{border-left-color:#0b0d14;}
@media (prefers-reduced-motion:reduce){ .vid:hover .vid-play{transform:none;} }

.vid-dur{position:absolute; right:9px; bottom:9px;
         font-family:var(--mono); font-size:11px; letter-spacing:.04em;
         line-height:1; padding:4px 7px; border-radius:4px;
         background:rgba(9,11,18,.82); color:#fff;
         border:1px solid rgba(255,255,255,.16);}

/* Auf dem Telefon ist die Karte halb so breit; ein Knopf in Originalgroesse
   verdeckt dort das halbe Bild. */
@media (max-width:560px){
  .vid-play{width:46px; height:46px;}
  .vid-play::after{border-left-width:13px; border-top-width:8px;
                   border-bottom-width:8px; margin-left:4px;}
}

/* ── partner ─────────────────────────────────────────────────────────── */
.partner{display:flex; gap:var(--s3); align-items:center; flex-wrap:wrap;
         border:1px solid var(--line); border-radius:var(--r);
         background:var(--sky2); padding:var(--s3) var(--s4);
         margin-top:var(--s5);}
.partner img{flex:none; width:44px; height:44px;}
.partner > div{flex:1; min-width:240px;}
.partner p{color:var(--mut); font-size:15px; margin-top:var(--s1);
           max-width:58ch;}
.partner p strong{color:var(--ink);}
.promo{font-family:var(--mono); color:var(--gold-hi); background:var(--card);
       padding:2px 7px; border-radius:4px; font-size:13px;}

/* ── footer ──────────────────────────────────────────────────────────── */
footer{border-top:1px solid var(--line); margin-top:var(--s6);
       padding:var(--s5) 0 var(--s4); background:var(--sky2);}
.foot{display:grid; gap:var(--s4);
      grid-template-columns:repeat(auto-fit,minmax(190px,1fr));}
.foot h4{font-family:var(--mono); font-size:10.5px; letter-spacing:.18em;
         text-transform:uppercase; color:var(--dim); font-weight:400;
         margin-bottom:var(--s2);}
.foot ul{list-style:none; padding:0; display:grid; gap:var(--s1);}
.foot a{color:var(--mut); font-size:14.5px;}
.foot a:hover{color:var(--gold-hi);}
.foot-mark{font-family:var(--serif); font-size:19px; letter-spacing:.2em;
           color:var(--ink); text-indent:.2em;}
.foot-mark b{color:var(--gold); font-weight:400;}
.foot-note{color:var(--dim); font-size:13.5px; margin-top:var(--s2);
           max-width:34ch;}
.legal{border-top:1px solid var(--line); margin-top:var(--s4);
       padding-top:var(--s3); color:var(--dim); font-size:13px;
       font-family:var(--mono); letter-spacing:.04em;}

/* the trial note sits under the two-up offer, not in the footer column that
   .foot-note is sized for */
#trial-note{max-width:64ch; margin-top:var(--s3); color:var(--mut);
            font-size:14.5px;}

/* Below 560px the nav text links would scroll sideways inside their own
   container — technically fine, but a scrolling nav reads as broken. Keep
   the wordmark and the one button that matters; every section is still
   reachable from the footer. */
@media (max-width:560px){
  .nav-links a:not(.btn){display:none;}
  .nav-in{justify-content:space-between;}
}

/* ── language switcher ── */
/* Language picker. <details> so it needs no script under the CSP.
   Lives in .nav-in, NOT in .nav-links: that one sets overflow-x:auto for
   horizontal scrolling on narrow screens, which makes it a clipping box -
   and per spec overflow-x:auto computes overflow-y to auto as well, so an
   absolutely positioned menu hanging below it was simply cut off. */
.lp{position:relative; flex:none; margin-left:var(--s3);}
.lp-btn{display:flex; align-items:center; gap:5px; cursor:pointer;
        list-style:none; padding:4px 7px; border-radius:4px;
        border:1px solid var(--line); color:var(--dim);
        font-family:var(--mono); font-size:10.5px; letter-spacing:.08em;}
.lp-btn::-webkit-details-marker{display:none;}
.lp-btn:hover{color:var(--ink); background:var(--raise);}
.lp[open] .lp-btn{color:var(--gold);}
.lp-caret{width:0; height:0; border-left:3.5px solid transparent;
          border-right:3.5px solid transparent;
          border-top:4px solid currentColor;}
.lp[open] .lp-caret{transform:rotate(180deg);}
.lp-menu{position:absolute; top:calc(100% + 6px); right:0; z-index:60;
         min-width:150px; padding:4px; display:flex; flex-direction:column;
         background:var(--raise); border:1px solid var(--line);
         border-radius:6px; box-shadow:0 10px 28px rgba(0,0,0,.45);}
.lp-item{padding:7px 10px; border-radius:4px; font-size:13px;
         color:var(--dim); white-space:nowrap;}
a.lp-item:hover{color:var(--ink); background:var(--line);}
.lp-item.on{color:var(--gold);}
/* Deliberately NOT hidden on small screens: the old row was display:none
   below 560px, so a phone could not change language at all. */
@media (max-width:560px){ .lp-menu{min-width:132px;} }