/* ===== FIRESTICK SETUP — TEAL TIMELINE THEME (distinct from player page) ===== */
:root{--fs-accent:#14b8a6;--fs-accent2:#06b6d4;--fs-deep:#0f766e;--fs-ink:#0f172a;--fs-muted:#5b6478;--fs-glow:rgba(20,184,166,.45)}

/* ---------- HERO ---------- */
.hero-area{
  position:relative;overflow:hidden;
  background:radial-gradient(1000px 500px at 15% -10%,#0f766e 0%,transparent 60%),
             radial-gradient(900px 600px at 100% 10%,#0e7490 0%,transparent 55%),
             linear-gradient(135deg,#04121a 0%,#082430 55%,#0a2c3a 100%)!important}
.hero-area::after{content:"";position:absolute;inset:0;background:radial-gradient(600px 320px at 80% 90%,rgba(6,182,212,.2),transparent 70%);pointer-events:none}
.hero-area .section-title{position:relative;z-index:2}
.hero-area .section-title h3{color:#5eead4!important;letter-spacing:2px;font-weight:700}
.hero-area .section-title{max-width:1000px!important}
.hero-area .section-title h2{color:#fff!important;font-weight:800;font-size:2.4rem;line-height:1.18;max-width:100%}
.hero-area .section-title p{color:#bfe9e3!important;font-size:1.06rem;line-height:1.7}
.hero-area .section-title p strong{color:#fff}

/* ---------- NOTE ---------- */
.fs-note{display:flex;gap:14px;align-items:flex-start;background:#effcfa;border:1px solid #bcefe7;border-radius:14px;padding:20px 24px;margin-bottom:40px}
.fs-note i{font-size:1.6rem;color:var(--fs-accent);margin-top:2px}
.fs-note p{margin:0;line-height:1.65;color:#284b47}
.fs-note a{color:var(--fs-deep);font-weight:700}

/* ---------- STEPS AS TIMELINE ---------- */
.fs-step{display:flex;gap:24px;align-items:flex-start;padding:0 0 34px;position:relative}
.fs-step::before{content:"";position:absolute;left:26px;top:52px;bottom:-6px;width:2px;background:linear-gradient(var(--fs-accent),rgba(20,184,166,.15));z-index:0}
.fs-step:last-of-type::before{display:none}
.fs-num{position:relative;z-index:1;flex:0 0 auto;width:54px;height:54px;border-radius:16px;
  background:linear-gradient(135deg,var(--fs-accent),var(--fs-accent2));color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:1.4rem;font-weight:800;
  box-shadow:0 10px 24px var(--fs-glow);transform:rotate(-6deg)}
.fs-step>div{flex:1;background:#fff;border:1px solid #eef1f7;border-radius:16px;padding:22px 26px;
  box-shadow:0 4px 14px rgba(20,40,90,.04);transition:transform .2s,box-shadow .2s}
.fs-step>div:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(15,118,110,.12)}
.fs-step h3{font-size:1.25rem;margin:0 0 8px;color:var(--fs-ink)}
.fs-step p{line-height:1.7;margin:0 0 8px;color:var(--fs-muted)}
.fs-code{display:inline-block;font-size:1.7rem;font-weight:800;letter-spacing:4px;
  background:linear-gradient(135deg,#04121a,#0f766e);color:#5eead4;padding:10px 24px;border-radius:10px;margin:6px 0 10px}
.fs-tip{font-size:.9rem;color:#556;background:#f5f9f9;padding:11px 15px;border-radius:10px;border-left:3px solid var(--fs-accent)}
.fs-tip a{color:var(--fs-deep);font-weight:600}

/* ---------- CTA ---------- */
.fs-cta{position:relative;overflow:hidden;text-align:center;border-radius:20px;padding:48px 30px;color:#fff;margin:46px 0;
  background:radial-gradient(600px 300px at 12% 0%,#0e7490,transparent 60%),linear-gradient(135deg,#14b8a6,#0e7490)}
.fs-cta h2{color:#fff;margin-bottom:10px;font-size:1.9rem}
.fs-cta p{color:rgba(255,255,255,.92);margin-bottom:22px;max-width:600px;margin-left:auto;margin-right:auto}
.fs-cta .btn{background:#fff;color:var(--fs-deep);padding:14px 34px;border-radius:10px;font-weight:800;display:inline-block;transition:transform .2s,box-shadow .2s}
.fs-cta .btn:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(0,0,0,.22)}

/* ---------- FAQ ---------- */
.fs-faq{max-width:820px;margin:46px auto 0}
.fs-faq>h2{font-size:1.6rem;margin-bottom:20px;text-align:center;color:var(--fs-ink)}
.fs-faq details{border:1px solid #e6ebf0;border-radius:12px;margin-bottom:12px;background:#fff;transition:box-shadow .2s}
.fs-faq details[open]{box-shadow:0 12px 30px rgba(15,118,110,.08)}
.fs-faq summary{cursor:pointer;padding:17px 22px;font-weight:600;list-style:none;position:relative;padding-right:46px;color:var(--fs-ink)}
.fs-faq summary::-webkit-details-marker{display:none}
.fs-faq summary::after{content:"+";position:absolute;right:22px;top:50%;transform:translateY(-50%);font-size:1.5rem;color:var(--fs-accent);line-height:1}
.fs-faq details[open] summary::after{content:"\2212"}
.fs-faq details p{padding:0 22px 18px;margin:0;color:var(--fs-muted);line-height:1.65}

@media(max-width:768px){
  .hero-area .section-title h2{font-size:2rem}
  .fs-num{width:46px;height:46px;font-size:1.2rem}
  .fs-step::before{left:22px;top:46px}
  .fs-step{gap:16px}
}