/* NorthStarBets 1 — rewards/wagering satellite. Own layout: centered hero, vertical timeline, comparison strip. */

:root{
  --ink-bg:#0a1b2e;
  --panel:#102943;
  --ink:#f4f8fa;
  --ink-dim:#aec2d1;
  --ink-faint:#7791a3;
  --mint:#2fe08a;
  --mint-soft:#8fedb8;
  --amber:#f0b444;
  --line:rgba(47,224,138,.22);
  --card-border:rgba(255,255,255,.09);
  --radius:20px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--ink-bg);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.65;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:var(--mint-soft);text-decoration:none}
a:hover{text-decoration:underline}
ul{margin:0;padding:0;list-style:none}
.wrap{max-width:900px;margin:0 auto;padding:0 20px}

.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0;margin:-1px}

/* Centered header, no nav bar, badge under logo */
.masthead{padding:28px 0 0;text-align:center}
.masthead .brand{display:inline-flex;align-items:center;gap:10px;justify-content:center}
.masthead .brand img{width:32px;height:32px}
.masthead .brand-word{font-weight:800;font-size:1.15rem}
.masthead .brand-word b{color:var(--mint-soft)}
.masthead .tagline{color:var(--ink-faint);font-size:.85rem;margin-top:6px}

/* Centered hero */
.hero-center{text-align:center;padding:34px 0 40px}
.hero-center .kicker{display:inline-block;background:rgba(47,224,138,.1);border:1px solid var(--line);color:var(--mint-soft);font-size:.78rem;font-weight:700;padding:6px 14px;border-radius:999px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:16px}
.hero-center h1{font-size:clamp(1.7rem,3.6vw,2.4rem);line-height:1.2;margin:0 0 16px}
.hero-center .lede{color:var(--ink-dim);font-size:1.05rem;max-width:64ch;margin:0 auto 24px}
.hero-btns{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;background:var(--mint);color:#05190f;font-weight:800;padding:13px 24px;border-radius:12px}
.btn:hover{text-decoration:none;filter:brightness(1.07)}
.btn-ghost{border:1px solid var(--card-border);color:var(--ink);padding:12px 22px;border-radius:12px}

/* license band */
.license-band{background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:14px 0;text-align:center;font-size:.85rem;color:var(--ink-dim)}
.license-band strong{color:var(--ink)}

/* content sections */
.section{padding:46px 0}
.section h2{font-size:1.4rem;margin:0 0 10px;text-align:center}
.section .sub{color:var(--ink-dim);text-align:center;max-width:66ch;margin:0 auto 28px}

/* vertical timeline for "how rewards work" */
.timeline{max-width:680px;margin:0 auto;position:relative}
.timeline::before{content:"";position:absolute;left:19px;top:6px;bottom:6px;width:2px;background:var(--line)}
.tl-step{position:relative;padding-left:56px;margin-bottom:26px}
.tl-step:last-child{margin-bottom:0}
.tl-num{position:absolute;left:0;top:0;width:40px;height:40px;border-radius:50%;background:var(--panel);border:2px solid var(--mint);color:var(--mint-soft);display:flex;align-items:center;justify-content:center;font-weight:800}
.tl-step h3{margin:0 0 6px;font-size:1.05rem}
.tl-step p{margin:0;color:var(--ink-dim)}

/* comparison strip */
.compare-strip{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.compare-card{background:var(--panel);border:1px solid var(--card-border);border-radius:var(--radius);padding:22px}
.compare-card h3{margin:0 0 12px;font-size:1rem;color:var(--mint-soft)}
.compare-card ul li{padding:7px 0;color:var(--ink-dim);border-top:1px dashed rgba(255,255,255,.08)}
.compare-card ul li:first-child{border-top:0}

/* fact panel */
.fact-panel{background:var(--panel);border:1px solid var(--card-border);border-radius:var(--radius);padding:26px;max-width:760px;margin:0 auto}
.fact-panel p{margin:0 0 12px;color:var(--ink-dim)}
.fact-panel p:last-child{margin-bottom:0}
.fact-panel strong{color:var(--ink)}

/* faq accordion-like, no js */
.faq-wrap{max-width:760px;margin:0 auto}
.faq-item{border-top:1px solid var(--card-border);padding:16px 0}
.faq-item:first-child{border-top:0}
.faq-item h3{margin:0 0 6px;font-size:1rem}
.faq-item p{margin:0;color:var(--ink-dim)}

.cta-band{text-align:center;padding:40px 0;background:var(--panel);border-top:1px solid var(--line);margin-top:10px}
.cta-band p{color:var(--ink-dim);max-width:56ch;margin:0 auto 18px}

footer.site-footer{padding:30px 0 24px;text-align:center}
.footer-links{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;margin-bottom:14px}
.footer-links a{color:var(--ink-dim)}
.footer-legal{color:var(--ink-faint);font-size:.8rem;line-height:1.7;max-width:70ch;margin:0 auto}
.footer-legal .rg{margin-top:8px}

@media (max-width:700px){
  .compare-strip{grid-template-columns:1fr}
}