/* Nice Little Earner — landing page
   One job: conversion. No dependencies, no build step, no third-party requests. */

:root{
  --bg:#100f0d;
  --bg-2:#171613;
  --bg-3:#1e1c18;
  --ink:#ece7dd;
  --ink-dim:#9b9287;
  --amber:#f2b705;
  --amber-deep:#c98a3f;
  --line:rgba(236,231,221,.14);
  --wrap:1080px;
  --stack:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--stack);
  font-size:clamp(16px,1.05vw + 13px,18px);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto}
a{color:var(--amber)}
a:focus-visible,button:focus-visible,input:focus-visible{
  outline:3px solid var(--amber);outline-offset:3px;
}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px}
.wrap.narrow{max-width:720px}

.visually-hidden{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip{
  position:absolute;left:-9999px;top:0;z-index:10;
  background:var(--amber);color:#100f0d;padding:12px 18px;font-weight:700;
}
.skip:focus{left:0}

/* hazard tape divider */
.hazard{
  height:10px;
  background:repeating-linear-gradient(45deg,
    var(--amber) 0 18px, #100f0d 18px 36px);
  opacity:.9;
}

/* ---------- hero ---------- */
.hero{
  position:relative;
  background:
    radial-gradient(90% 70% at 50% 0%, #23201a 0%, var(--bg) 68%);
  border-bottom:1px solid var(--line);
}
.hero .wrap{padding-top:64px;padding-bottom:72px}

.eyebrow{
  margin:0 0 22px;
  font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-dim);font-weight:700;
}

h1{
  margin:0 0 26px;
  font-size:clamp(3.1rem,11vw,7.2rem);
  line-height:.9;
  letter-spacing:-.035em;
  font-weight:900;
  text-transform:uppercase;
}
h1 .hl{color:var(--amber)}

.lede{
  margin:0 0 20px;
  font-size:clamp(1.15rem,2.1vw,1.5rem);
  font-weight:600;
  max-width:24ch;
  line-height:1.3;
}
.hook{
  margin:0 0 34px;
  color:var(--ink-dim);
  max-width:56ch;
}

.facts{
  list-style:none;margin:0 0 34px;padding:0;
  display:flex;flex-wrap:wrap;gap:10px;
}
.facts li{
  border:1px solid var(--line);
  background:var(--bg-2);
  padding:9px 15px;
  font-size:.87rem;
  color:var(--ink-dim);
}
.facts strong{color:var(--ink);font-weight:800}

.scroll-cue{margin:0}
.scroll-cue a{
  font-weight:700;text-decoration:none;
  border-bottom:2px solid var(--amber);padding-bottom:3px;
}
.scroll-cue a:hover{color:var(--ink)}

/* ---------- sections ---------- */
.section{padding:84px 0;border-bottom:1px solid var(--line)}
.section h2{
  margin:0 0 22px;
  font-size:clamp(1.9rem,4.6vw,3.1rem);
  line-height:1.02;
  letter-spacing:-.03em;
  font-weight:900;
  text-transform:uppercase;
}
.section-lede{margin:0 0 40px;color:var(--ink-dim);max-width:58ch}
.section p{max-width:62ch}
.quiet{color:var(--ink-dim);font-size:.93rem}

/* ---------- the three forks ---------- */
.forks{
  list-style:none;margin:0 0 40px;padding:0;
  display:grid;gap:18px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.forks li{
  background:var(--bg-2);
  border:1px solid var(--line);
  border-top:3px solid var(--amber);
  padding:26px 24px 28px;
}
.forks .num{
  display:block;margin-bottom:14px;
  font-size:.8rem;font-weight:800;letter-spacing:.16em;
  color:var(--amber-deep);
}
.forks h3{
  margin:0 0 10px;
  font-size:1.35rem;font-weight:800;
  letter-spacing:-.01em;text-transform:uppercase;
}
.forks p{margin:0;color:var(--ink-dim);font-size:.95rem}

.kicker{
  margin:0;
  font-size:clamp(1.2rem,2.6vw,1.7rem);
  font-weight:800;color:var(--amber);
  text-transform:uppercase;letter-spacing:-.01em;
}

.coop{background:var(--bg-2)}
.coop strong,.ea strong{color:var(--ink)}
.coop p,.ea p{margin:0 0 18px}

/* ---------- sign-up ---------- */
.signup{position:relative;background:var(--bg-3);border-bottom:0}
.signup .hazard{position:absolute;top:0;left:0;right:0}
.signup .wrap{padding-top:34px}

.form{margin:0}
.form-row{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:14px}
.form input[type=email]{
  flex:1 1 260px;min-width:0;
  background:#0c0b09;
  border:1px solid var(--line);
  color:var(--ink);
  font:inherit;
  padding:15px 16px;
}
.form input[type=email]::placeholder{color:#6d675e}
.form button{
  flex:0 0 auto;
  background:var(--amber);
  color:#100f0d;
  border:0;
  font:inherit;font-weight:800;
  letter-spacing:.01em;
  padding:15px 26px;
  cursor:pointer;
}
.form button:hover{background:#ffc824}
.form button[disabled]{opacity:.55;cursor:progress}

.form-note{margin:0;color:var(--ink-dim);font-size:.87rem}
.form-status{margin:14px 0 0;font-weight:700;min-height:1.5em}
.form-status.ok{color:var(--amber)}
.form-status.err{color:#ff8a6b}

/* honeypot — off-screen, never shown to a human */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- footer ---------- */
.footer{padding:44px 0 56px;background:var(--bg)}
.footer p{margin:0 0 10px;font-size:.9rem;max-width:64ch}
.footer .quiet{font-size:.83rem}

@media (max-width:560px){
  .hero .wrap{padding-top:44px;padding-bottom:56px}
  .section{padding:60px 0}
  .form button{flex:1 1 100%}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}