/* ================================================================
   GoConMe — Direction B: Full Patriot Maximalism
   ----------------------------------------------------------------
   Two typographic registers, and the contrast between them IS the joke:
     - DISPLAY (Arial Black, chrome gradient, skew): the sincere,
       shouting, patriotic voice.
     - PLAIN (system sans, muted, small): the honest voice that tells
       you exactly what you are buying and what it does not accomplish.
   The plain register must never be removed or hidden. It is both the
   punchline and the legal disclosure, and it is deliberately always
   adjacent to the loud claim it undercuts.
   ================================================================ */

:root {
  --navy-900:#070f26;
  --navy-800:#0a1633;
  --navy-700:#12224d;
  --crimson:#c8102e;
  --crimson-dk:#8a0b1f;
  --red-btn:#e63946;
  --red-btn-dk:#a4111f;
  --gold:#ffd75e;
  --gold-dk:#b8860b;
  --ink-plain:#c2cee6;   /* honest-copy body — AA on navy */
  --ink-quiet:#8f9dbb;   /* honest-copy secondary */
  --line:rgba(255,255,255,.14);

  --display:"Arial Black","Arial Bold",Impact,system-ui,sans-serif;
  --plain:ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
}

/* 'Merica mode: the palette goes harder, the stripes get louder. */
body.merica {
  --navy-900:#0a0a1f;
  --navy-800:#101033;
  --navy-700:#1b1b5c;
  --gold:#ffe066;
}

*, *::before, *::after { box-sizing:border-box; }

body {
  margin:0;
  font:16px/1.65 var(--plain);
  color:var(--ink-plain);
  background:var(--navy-900);
  -webkit-font-smoothing:antialiased;
}

.wrap { max-width:62rem; margin-inline:auto; padding-inline:1.5rem; }

/* ---------------- shared display type ---------------- */
.display {
  font-family:var(--display);
  text-transform:uppercase;
  letter-spacing:-.02em;
  line-height:.95;
  background:linear-gradient(180deg,#fff 28%,var(--gold) 62%,var(--gold-dk) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 3px 0 rgba(0,0,0,.5));
}

.kicker {
  display:inline-block; background:var(--crimson); color:#fff;
  padding:.32rem 1rem; font-size:.7rem; font-weight:800;
  letter-spacing:.18em; transform:skewX(-8deg); font-family:var(--plain);
}
.kicker > span { display:inline-block; transform:skewX(8deg); }

/* honest register */
.honest { font-family:var(--plain); font-weight:400; color:var(--ink-quiet);
          font-size:.82rem; line-height:1.65; }

/* ---------------- header ---------------- */
.site-head {
  background:var(--navy-900); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:20;
}
.site-head .wrap { display:flex; align-items:center; gap:1rem;
                   justify-content:space-between; padding-block:.85rem; }
.brand { font-family:var(--display); font-size:1.35rem; text-transform:uppercase;
         color:#fff; letter-spacing:-.02em; text-decoration:none; }
.brand em { font-style:normal; color:var(--crimson); }

/* 'Merica toggle */
.merica-toggle { display:flex; align-items:center; gap:.6rem; cursor:pointer;
                 font-size:.7rem; letter-spacing:.12em; font-weight:700;
                 color:var(--ink-quiet); text-transform:uppercase; }
.merica-toggle input { position:absolute; opacity:0; width:0; height:0; }
.switch { width:46px; height:25px; border-radius:99px; background:#26304d;
          border:1px solid var(--line); position:relative; transition:background .18s; flex:none; }
.switch::after { content:""; position:absolute; top:2px; left:2px; width:19px; height:19px;
                 border-radius:50%; background:#fff; transition:transform .18s; }
.merica-toggle input:checked + .switch { background:var(--crimson); }
.merica-toggle input:checked + .switch::after { transform:translateX(21px); }
.merica-toggle input:focus-visible + .switch { outline:2px solid var(--gold); outline-offset:2px; }

/* ---------------- hero ---------------- */
.hero {
  position:relative; overflow:hidden; text-align:center;
  padding:3.5rem 0 3rem;
  background:linear-gradient(178deg,var(--navy-800) 0%,var(--navy-700) 45%,#3b0d12 100%);
}
.hero::before {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(90deg,transparent 0 38px,rgba(255,255,255,.03) 38px 76px);
}
body.merica .hero::before {
  background:repeating-linear-gradient(96deg,transparent 0 26px,rgba(255,255,255,.05) 26px 52px);
}
.hero > .wrap { position:relative; }
.hero h1 { margin:1rem 0 .4rem; font-size:clamp(2.6rem,8vw,4.6rem); }
.hero .lede { margin:0 auto 2rem; font-size:.85rem; letter-spacing:.08em;
              color:var(--ink-plain); font-weight:600; text-transform:uppercase; }

/* counter */
.counter { margin:0 0 .2rem; font-family:var(--display); font-size:clamp(3.4rem,12vw,6rem);
           line-height:1; color:var(--gold); font-variant-numeric:tabular-nums;
           text-shadow:0 0 34px rgba(255,215,94,.45); }
.counter-label { font-size:.7rem; letter-spacing:.22em; font-weight:700;
                 color:var(--ink-plain); text-transform:uppercase; }
#honest-line { max-width:34rem; margin:1.1rem auto 0; }

/* ---------------- buttons ---------------- */
.btn {
  display:inline-block; padding:.95rem 2.1rem; border:0; cursor:pointer;
  font-family:var(--display); font-size:1.02rem; text-transform:uppercase;
  letter-spacing:.03em; color:#fff; border-radius:5px;
  background:linear-gradient(180deg,var(--red-btn),var(--red-btn-dk));
  box-shadow:0 4px 0 #6d0b15, 0 10px 24px rgba(0,0,0,.5);
  transition:transform .08s, box-shadow .08s;
}
.btn:hover { transform:translateY(1px); box-shadow:0 3px 0 #6d0b15, 0 8px 18px rgba(0,0,0,.5); }
.btn:active { transform:translateY(4px); box-shadow:0 0 0 #6d0b15, 0 4px 10px rgba(0,0,0,.5); }
.btn:disabled { opacity:.55; cursor:default; transform:none; }
.btn:focus-visible { outline:3px solid var(--gold); outline-offset:3px; }
.btn.small { padding:.7rem 1.3rem; font-size:.85rem; }

/* ---------------- sections ---------------- */
section { padding-block:3.5rem; border-top:1px solid var(--line); }
.sec-head { text-align:center; margin-bottom:2rem; }
.sec-head h2 { margin:.7rem 0 .3rem; font-size:clamp(1.7rem,5vw,2.6rem); }
.sec-head p { margin:0 auto; max-width:38rem; }

/* tiers */
.tiers { display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(13rem,1fr)); }
.tier { background:var(--navy-800); border:1px solid var(--line); border-radius:9px;
        padding:1.4rem 1.2rem; text-align:center; display:flex; flex-direction:column; gap:.55rem; }
.tier.featured { border-color:var(--gold); box-shadow:0 0 0 1px var(--gold), 0 12px 30px rgba(0,0,0,.45); }
.tier .price { font-family:var(--display); font-size:2.1rem; color:var(--gold); line-height:1; }
.tier .price small { font-size:.7rem; color:var(--ink-quiet); font-family:var(--plain);
                     display:block; margin-top:.25rem; letter-spacing:.06em; }
.tier .name { font-family:var(--display); font-size:.92rem; text-transform:uppercase;
              color:#fff; line-height:1.2; }
.tier .libs { font-size:.75rem; color:var(--ink-quiet); letter-spacing:.04em; }
.tier .btn { margin-top:auto; width:100%; }

/* waitlist form */
.form-card { background:var(--navy-800); border:1px solid var(--line); border-radius:9px;
             padding:1.75rem; max-width:34rem; margin-inline:auto; }
form { display:grid; gap:1.15rem; }
label { display:block; font-weight:600; font-size:.88rem; color:#fff; }
input[type=email], input[type=text] {
  display:block; width:100%; margin-top:.4rem; padding:.7rem .8rem;
  font:inherit; color:#fff; background:var(--navy-900);
  border:1px solid var(--line); border-radius:6px;
}
input[type=email]:focus, input[type=text]:focus {
  outline:2px solid var(--gold); outline-offset:1px; border-color:transparent;
}
fieldset { border:1px solid var(--line); border-radius:6px; padding:1rem 1.1rem; margin:0; }
legend { font-weight:600; font-size:.88rem; color:#fff; padding-inline:.4rem; }
fieldset label { font-weight:400; display:flex; gap:.55rem; align-items:flex-start;
                 margin:.45rem 0; color:var(--ink-plain); }
.consent { font-weight:400; display:flex; gap:.65rem; align-items:flex-start;
           background:var(--navy-900); border:1px solid var(--line);
           padding:.95rem; border-radius:6px; color:var(--ink-plain); font-size:.85rem; }
.hint, .optional { display:block; font-weight:400; font-size:.78rem; color:var(--ink-quiet); }
.form-status { margin:0; font-size:.87rem; min-height:1.4em; font-weight:600; }
.form-status.error { color:#ff8a95; }
.form-status.success { color:#7ee2a8; }
.waitlist-count { text-align:center; margin:1.25rem 0 0; font-size:.9rem; }
.waitlist-count strong { color:var(--gold); font-family:var(--display); font-size:1.15rem; }

/* ticker */
.ticker-box { background:var(--navy-800); border:1px solid var(--line); border-radius:9px;
              padding:1.25rem 1.4rem; max-width:38rem; margin-inline:auto; }
.ticker-empty { text-align:center; margin:0; }

/* footer */
footer { border-top:1px solid var(--line); padding-block:2.5rem; background:var(--navy-900); }
footer nav { display:flex; gap:1.1rem; flex-wrap:wrap; justify-content:center;
             margin-bottom:1.2rem; }
footer a { color:var(--ink-plain); font-size:.87rem; }
.fine-print { max-width:44rem; margin-inline:auto; text-align:center; }

a { color:var(--gold); }
a:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }

@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { transition:none !important; animation:none !important; }
}

/* ---------------- buy dialog ---------------- */
#buy-dialog { border:1px solid var(--line); border-radius:10px; padding:0;
              background:var(--navy-800); color:var(--ink-plain); max-width:26rem; width:calc(100% - 2rem); }
#buy-dialog::backdrop { background:rgba(3,7,18,.75); }
#buy-form { display:grid; gap:.85rem; padding:1.6rem; }
#buy-form h3 { margin:0; font-family:var(--display); font-size:1.15rem;
               text-transform:uppercase; color:#fff; }
#buy-form label { font-size:.85rem; }
.dialog-actions { display:flex; gap:.6rem; justify-content:flex-end; flex-wrap:wrap; margin-top:.3rem; }
.btn.ghost { background:none; border:1px solid var(--line); box-shadow:none; color:var(--ink-plain); }
.btn.ghost:hover { transform:none; box-shadow:none; border-color:var(--ink-quiet); }