/* Gobo Designer landing page: the "stage" bands and feature layout on top of /style.css.
   The stage colours are the app's own (lighting-desk dark, lamp amber) and stay dark in both
   themes; everything below the hero follows the site's light/dark tokens. */
:root{
  --stage:#0d0f11;
  --stage-2:#15181c;
  --stage-ink:#f1eee8;
  --stage-ink-2:#c9c5bd;
  --stage-ink-3:#a39f97;
  --lamp:#ffc457;
  --lamp-hover:#ffd27a;
  --lamp-ink:#1d1606;
}

/* nav sits on the stage, not on navy */
.stage-nav{background:var(--stage);border-bottom:1px solid #22262b}
.stage-nav .nav-links a{color:var(--stage-ink-2)}
.stage-nav .nav-links a:hover{color:var(--stage-ink)}

/* the band/stage link colours (.band a, .stage a) outrank .btn-lamp, so restate the ink there */
.btn-lamp,.band .btn-lamp,.stage .btn-lamp{background:var(--lamp);color:var(--lamp-ink)}
.btn-lamp:hover,.band .btn-lamp:hover,.stage .btn-lamp:hover{background:var(--lamp-hover)}
.stage .btn-ghost{color:var(--stage-ink);border-color:rgba(241,238,232,.35)}
.stage .btn-ghost:hover{border-color:var(--stage-ink);background:rgba(241,238,232,.06)}

/* ---------- stage hero: a warm beam falling from top left onto the screenshot ---------- */
.stage{
  background:
    radial-gradient(60% 55% at 78% 62%, rgba(255,196,87,.13), transparent 70%),
    conic-gradient(from 118deg at 8% -10%, transparent 0deg, rgba(255,196,87,.07) 14deg, transparent 30deg),
    var(--stage);
  color:var(--stage-ink);
  overflow:hidden;
}
.stage a{color:var(--stage-ink)}
.stage .fine{color:var(--stage-ink-3)}
.stage .lead{color:var(--stage-ink-2)}
.stage :where(a,button):focus-visible{outline-color:var(--lamp)}
.stage-hero{display:grid;gap:clamp(32px,4.5vw,52px);padding-block:clamp(44px,6vw,80px) clamp(48px,6vw,84px)}
.stage-copy{max-width:44em}
.kicker{margin:0 0 14px;font-size:14px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--lamp)}
.stage .h1{max-width:15em}
.stage-shot{margin:0}
.stage-shot img{
  display:block;width:100%;border-radius:12px;
  border:1px solid #2e333a;
  box-shadow:0 0 0 1px rgba(255,196,87,.06), 0 30px 80px -20px rgba(255,196,87,.22), 0 24px 60px -24px #000;
}
.stage-shot figcaption{margin-top:14px;font-size:14px;color:var(--stage-ink-3)}

.stage-end .dl .meta{color:var(--stage-ink-2)}

/* ---------- features: copy beside the screenshot on wide screens ---------- */
.feat{border-top:1px solid var(--hairline);padding:clamp(28px,3.5vw,44px) 0;display:grid;gap:18px}
.feat-copy p{margin:10px 0 0;color:var(--muted);max-width:60ch}
.feat-copy p b{color:var(--ink);font-weight:700}
.feat .shot{margin:0}
@media (min-width:980px){
  .feat{grid-template-columns:minmax(0,1fr) minmax(0,1.9fr);gap:40px;align-items:center}
}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--hairline);max-width:72ch}
.faq details{border-bottom:1px solid var(--hairline)}
.faq summary{
  cursor:pointer;list-style:none;padding:18px 32px 18px 0;position:relative;
  font-weight:700;font-variation-settings:"wght" 700,"wdth" 95,"opsz" 18;font-size:18px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:14px;font-size:24px;line-height:1;color:var(--muted)}
.faq details[open] summary::after{content:"−"}
.faq details p{margin:0 0 20px;color:var(--muted);max-width:64ch}

/* guides list on the landing page */
.guide-links{list-style:none;padding:0;margin:0;border-top:1px solid var(--hairline);max-width:72ch}
.guide-links li{border-bottom:1px solid var(--hairline);padding:14px 0;font-size:18px;font-weight:600}