:root {
  --bg:#f3f6ef;
  --bg-elevated:#ffffff;
  --border:#d8e0d0;
  --text:#1a2332;
  --text-dark:#111111;
  --text-light:#f0f0f0;
  --muted:#5c6b7a;
  --accent:#2ee66b;
  --accent-strong:#1cb85a;
  --accent-h:145;
  --gold:#d4a017;
  --gold-h:43;
  --pitch:#1a2332;
  --link:#0d6e4f;
  --link-hover:#095a40;
  --link-on-dark:#7dffb0;
  --link-on-dark-hover:#a8ffca;
  --on-accent:#0a1a12;
  --on-pitch-muted:#a8b5c4;
  --font:'Work Sans',system-ui,sans-serif;
  --font-display:'Anton','Arial Narrow',sans-serif;
  --font-meta:'IBM Plex Mono',ui-monospace,monospace;
  --radius:6px;
  --max:1120px;
  --shadow:0 8px 24px rgba(26,35,50,0.08);
}
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { font-family:var(--font); font-size:1rem; line-height:1.6; color:var(--text); background:var(--bg); min-height:100vh; }
img { max-width:100%; display:block; }
a { color:var(--link); word-break:break-all; }
a:hover { color:var(--link-hover); }
a:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; }
button:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
h1,h2,h3,h4 { font-family:var(--font-display); line-height:1.15; color:inherit; }
h1 { font-size:clamp(2rem,5vw,3.5rem); }
h2 { font-size:clamp(1.5rem,3.5vw,2.4rem); }
h3 { font-size:clamp(1.1rem,2.5vw,1.5rem); }
h4 { font-size:1.1rem; }
p { margin-bottom:1rem; }
ul,ol { padding-left:1.5rem; }
blockquote { word-break:break-word; overflow-wrap:break-word; border-left:4px solid var(--accent); padding:0.75rem 1.25rem; margin:1rem 0; color:var(--muted); }
.container { max-width:var(--max); margin:0 auto; padding:0 1.5rem; }
.section { padding:4rem 0; }
.section--sm { padding:2.5rem 0; }
/* skip link */
.skip-link { position:absolute; top:-100%; left:1rem; background:var(--accent); color:var(--on-accent); padding:0.5rem 1rem; border-radius:var(--radius); font-weight:700; z-index:9999; transition:top 0.15s; }
.skip-link:focus { top:0.5rem; }
/* scroll progress */
#scroll-progress { position:fixed; top:0; left:0; height:3px; background:var(--accent); z-index:2001; width:0; transition:width 0.1s linear; pointer-events:none; }
/* header */
.site-header { position:sticky; top:0; z-index:1000; width:100%; background:var(--pitch); color:var(--text-light); border-bottom:2px solid var(--accent); }
.site-header * { color:inherit; }
.header-inner { display:flex; align-items:center; justify-content:space-between; padding:0 1.5rem; height:60px; }
.header-logo { flex-shrink:0; text-decoration:none; font-family:var(--font-display); font-size:1.5rem; color:var(--accent); letter-spacing:0.02em; }
.header-logo:hover { color:var(--accent); }
.header-info-badge { font-family:var(--font-meta); font-size:0.7rem; background:rgba(46,230,107,0.15); color:var(--accent); border:1px solid var(--accent); border-radius:2px; padding:0.1rem 0.4rem; margin-left:0.5rem; vertical-align:middle; }
.main-nav { display:flex; flex-direction:row; align-items:center; gap:1.5rem; flex-shrink:0; list-style:none; }
.nav-item { position:relative; }
.nav-link { color:var(--text-light); text-decoration:none; font-size:0.88rem; font-weight:500; padding:0.3rem 0; border-bottom:2px solid transparent; transition:color 0.15s,border-color 0.15s; white-space:nowrap; }
.nav-link:hover { color:var(--accent); }
.nav-item.active .nav-link { border-bottom-color:var(--accent); color:var(--accent); }
.has-dropdown { position:relative; }
.dropdown { position:absolute; top:100%; left:0; display:none; z-index:999; background:var(--pitch); border:2px solid var(--accent); min-width:180px; padding-top:8px; color:var(--text-light); }
.dropdown * { color:inherit; }
.dropdown::before { content:''; position:absolute; top:-8px; left:0; right:0; height:8px; }
.dropdown a { display:block; padding:0.6rem 1rem; text-decoration:none; font-size:0.86rem; color:var(--text-light); border-bottom:1px solid rgba(168,181,196,0.15); transition:background 0.12s; white-space:nowrap; }
.dropdown a:last-child { border-bottom:none; }
.dropdown a:hover { background:var(--accent); color:var(--on-accent); }
.has-dropdown:hover > .dropdown { display:block; }
.nav-cta { background:var(--accent); color:var(--on-accent); padding:0.4rem 1rem; border-radius:var(--radius); font-weight:700; font-size:0.88rem; text-decoration:none; flex-shrink:0; transition:background 0.15s; }
.nav-cta:hover { background:var(--accent-strong); color:var(--on-accent); }
.hamburger { display:none; background:none; border:1.5px solid var(--on-pitch-muted); border-radius:var(--radius); padding:0.35rem 0.6rem; cursor:pointer; color:var(--text-light); font-size:1.1rem; }
@media(max-width:640px){
  .hamburger { display:flex; align-items:center; }
  .main-nav { display:none; position:absolute; top:60px; left:0; width:100%; background:var(--pitch); flex-direction:column; align-items:flex-start; padding:1rem 1.5rem; gap:0.25rem; border-bottom:2px solid var(--accent); z-index:998; }
  .main-nav.is-open { display:flex; }
  .main-nav .nav-link { padding:0.55rem 0; font-size:1rem; }
  .dropdown { position:static; border:none; border-left:2px solid var(--accent); padding:0 0 0 1rem; margin-top:0.25rem; background:transparent; display:none; }
  .has-dropdown.is-open > .dropdown { display:block; }
  .nav-cta { margin-top:0.75rem; }
}
/* hero */
.hero { background:var(--pitch); color:var(--text-light); padding:5rem 0 4rem; position:relative; overflow:hidden; }
.hero * { color:inherit; }
.hero::after { content:''; position:absolute; bottom:-1px; left:0; right:0; height:60px; background:var(--bg); clip-path:polygon(0 100%,100% 0,100% 100%); pointer-events:none; }
.hero__eyebrow { font-family:var(--font-meta); font-size:0.8rem; color:var(--accent); text-transform:uppercase; letter-spacing:0.1em; margin-bottom:0.75rem; display:block; }
.hero__title { margin-bottom:1rem; }
.hero__lead { font-size:1.1rem; color:var(--on-pitch-muted); max-width:560px; margin-bottom:1.75rem; }
.hero__cta-stack { display:flex; gap:0.75rem; flex-wrap:wrap; align-items:center; }
.hero__badge { font-family:var(--font-meta); font-size:0.75rem; color:var(--on-pitch-muted); margin-top:1rem; display:block; }
/* bands */
.band-pitch { background:var(--pitch); color:var(--text-light); padding:2.5rem 0; }
.band-pitch * { color:inherit; }
.band-bg { background:var(--pitch); color:var(--text-light); padding:3rem 0; }
.band-bg * { color:inherit; }
.band-elevated { background:var(--bg-elevated); padding:3rem 0; }
.band-accent { background:var(--accent); color:var(--on-accent); padding:2.5rem 0; }
.band-accent * { color:inherit; }
/* age/responsible band */
.age-gate-note { background:var(--pitch); color:var(--text-light); padding:1.25rem 0; font-family:var(--font-meta); font-size:0.8rem; border-top:2px solid var(--accent); }
.age-gate-note * { color:inherit; }
.responsible-band { background:var(--pitch); color:var(--text-light); padding:1.5rem 0; }
.responsible-band * { color:inherit; }
/* buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:0.4rem; padding:0.7rem 1.5rem; border-radius:var(--radius); font-family:var(--font); font-weight:700; font-size:1rem; cursor:pointer; text-decoration:none; border:2px solid transparent; transition:background 0.18s,transform 0.15s,box-shadow 0.18s; }
.btn:active { transform:scale(0.97); }
.btn--primary { background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
.btn--primary:hover { background:var(--accent-strong); border-color:var(--accent-strong); color:var(--on-accent); box-shadow:0 4px 16px rgba(46,230,107,0.35); }
.btn--ghost { background:transparent; color:var(--text-light); border-color:var(--on-pitch-muted); }
.btn--ghost:hover { border-color:var(--accent); color:var(--accent); }
.btn--outline { background:transparent; color:var(--accent-strong); border-color:var(--accent-strong); }
.btn--outline:hover { background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
.btn--lg { padding:0.9rem 2rem; font-size:1.1rem; }
.btn--sm { padding:0.45rem 1rem; font-size:0.85rem; }
/* official cta */
.cta-official { background:var(--pitch); color:var(--text-light); padding:4rem 0; text-align:center; }
.cta-official * { color:inherit; }
.cta-official__title { margin-bottom:0.75rem; }
.cta-official__sub { color:var(--on-pitch-muted); margin-bottom:1.75rem; font-size:1rem; }
/* footer */
.site-footer { background:var(--pitch); color:var(--text-light); padding:3rem 0 1.5rem; }
.site-footer * { color:inherit; }
.footer-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; margin-bottom:2rem; }
.footer-col__heading { display:block; text-transform:uppercase; letter-spacing:0.08em; font-size:0.75rem; font-family:var(--font-meta); color:var(--accent); margin-bottom:0.75rem; }
.footer-col ul { list-style:none; padding:0; margin:0; }
.footer-col ul li { margin-bottom:0.5rem; }
.footer-col ul li a { color:var(--on-pitch-muted); text-decoration:none; font-size:0.88rem; transition:color 0.15s; }
.footer-col ul li a:hover { color:var(--accent); }
.footer-disclaimer { border-top:1px solid rgba(168,181,196,0.25); padding-top:1.5rem; font-size:0.8rem; color:var(--on-pitch-muted); margin-top:2rem; line-height:1.7; }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; padding-top:1rem; border-top:1px solid rgba(168,181,196,0.25); font-size:0.75rem; margin-top:1rem; color:var(--on-pitch-muted); }
@media(max-width:640px){
  .footer-grid { grid-template-columns:1fr 1fr; }
  .footer-bottom { flex-direction:column; gap:0.5rem; text-align:center; }
}
/* cards generic */
.card { background:var(--bg-elevated); border:1.5px solid var(--border); border-radius:var(--radius); padding:1.5rem; margin-bottom:0; }
.card-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; margin-bottom:2rem; }
@media(max-width:640px){ .card-grid { grid-template-columns:1fr; } }
@media(min-width:641px) and (max-width:780px){ .card-grid { grid-template-columns:repeat(2,1fr); } }
/* grid helpers */
.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
@media(max-width:640px){ .grid-2,.grid-3,.grid-4 { grid-template-columns:1fr; } }
@media(min-width:641px) and (max-width:780px){ .grid-3,.grid-4 { grid-template-columns:repeat(2,1fr); } }
/* prose */
.prose { max-width:720px; }
.prose h2 { margin:2rem 0 0.75rem; }
.prose h3 { margin:1.5rem 0 0.5rem; }
.prose p { margin-bottom:1rem; color:var(--muted); }
.prose ul,.prose ol { margin-bottom:1rem; }
.prose li { margin-bottom:0.35rem; color:var(--muted); }
.prose a { color:var(--link); }
/* breadcrumb */
.breadcrumb { font-family:var(--font-meta); font-size:0.78rem; color:var(--muted); display:flex; gap:0.4rem; flex-wrap:wrap; margin-bottom:1.5rem; }
.breadcrumb a { color:var(--muted); text-decoration:none; }
.breadcrumb a:hover { color:var(--accent-strong); }
.breadcrumb__sep { color:var(--border); }
.breadcrumb [aria-current='page'] { color:var(--text); font-weight:600; }
/* notice */
.notice { background:rgba(212,160,23,0.1); border:1.5px solid var(--gold); border-radius:var(--radius); padding:1rem 1.25rem; font-size:0.9rem; margin-bottom:1.5rem; }
.notice__icon { margin-right:0.4rem; }
/* inline link row */
.inline-link-row { display:flex; gap:1rem; flex-wrap:wrap; align-items:center; margin-bottom:1.5rem; }
/* section heading */
.section-heading { margin-bottom:0.5rem; }
.section-sub { color:var(--muted); font-size:1rem; margin-bottom:2rem; max-width:600px; }
/* mono label */
.mono-label { font-family:var(--font-meta); font-size:0.75rem; color:var(--muted); text-transform:uppercase; letter-spacing:0.08em; }
/* divider */
.divider { border:none; border-top:1px solid var(--border); margin:2rem 0; }
/* access card */
.access-card { background:var(--bg-elevated); border:1.5px solid var(--border); border-radius:var(--radius); padding:1.5rem; transition:border-color 0.18s,transform 0.18s; }
.access-card:hover { border-color:var(--accent); transform:translateY(-2px); }
/* reveal animations */
.js-ready .reveal { opacity:0; transform:translateY(24px); transition:opacity 0.55s ease,transform 0.55s ease; }
.js-ready .reveal.is-visible { opacity:1; transform:none; }
.js-ready .reveal-slide { opacity:0; transform:translateX(-24px); transition:opacity 0.5s ease,transform 0.5s ease; }
.js-ready .reveal-slide.is-visible { opacity:1; transform:none; }
.js-ready .reveal-scale { opacity:0; transform:scale(0.95); transition:opacity 0.5s ease,transform 0.5s ease; }
.js-ready .reveal-scale.is-visible { opacity:1; transform:none; }
.js-ready .timeline-item { opacity:0; transform:translateX(-16px); transition:opacity 0.5s ease,transform 0.5s ease; }
.js-ready .timeline-item.is-visible { opacity:1; transform:none; }
@media(prefers-reduced-motion:reduce){
  .js-ready .reveal,.js-ready .reveal-slide,.js-ready .reveal-scale,.js-ready .timeline-item { opacity:1!important; transform:none!important; transition:none!important; }
}
/* text utilities */
.text-accent { color:var(--accent-strong); }
.text-muted { color:var(--muted); }
.text-mono { font-family:var(--font-meta); }
.text-center { text-align:center; }
.fw-700 { font-weight:700; }
.mb-0 { margin-bottom:0; }
.mb-1 { margin-bottom:0.5rem; }
.mb-2 { margin-bottom:1rem; }
.mb-3 { margin-bottom:1.5rem; }
.mb-4 { margin-bottom:2rem; }
.mt-2 { margin-top:1rem; }
.mt-3 { margin-top:1.5rem; }
/* two col layout */
.layout-two-col { display:grid; grid-template-columns:1fr 280px; gap:2.5rem; align-items:start; }
@media(max-width:780px){ .layout-two-col { grid-template-columns:1fr; } }
/* +18 badge */
.badge-18 { display:inline-flex; align-items:center; justify-content:center; width:2.5rem; height:2.5rem; background:var(--accent); color:var(--on-accent); font-family:var(--font-display); font-size:1rem; border-radius:50%; flex-shrink:0; }
/* tag */
.tag { display:inline-block; background:rgba(46,230,107,0.12); color:var(--accent-strong); border:1px solid rgba(46,230,107,0.3); border-radius:2px; font-family:var(--font-meta); font-size:0.72rem; padding:0.15rem 0.5rem; }
/* verify badge */
.verify-note { font-family:var(--font-meta); font-size:0.75rem; color:var(--muted); background:rgba(92,107,122,0.08); border:1px solid var(--border); border-radius:2px; padding:0.15rem 0.5rem; margin-left:0.4rem; }
