:root {
  --bg: #111111;
  --text: #ededed;
  --body: #d6d6d6;
  --muted: #9a9a9a;
  --green: #00d26a;
  --gold: #f5c518;
  --border: #262626;
  --nav-h: 62px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  padding-top: var(--nav-h);
}
a { color: var(--green); text-decoration: none; }
a:hover { text-decoration: underline; }
.display {
  font-family: "Arial Black", "Arial Bold", Arial, system-ui, sans-serif;
  font-weight: 900;
  letter-spacing: -0.01em;
}

/* ---- Shared fixed site nav (drops into every page) ---- */
.sitenav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--nav-h);
  background: rgba(17, 17, 17, 0.92);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--border);
  box-shadow: inset 0 -2px 0 rgba(0, 210, 106, 0.14);
}
.sitenav-inner {
  max-width: 1120px;
  height: 100%;
  margin: 0 auto;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 24px;
  padding: 0 24px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.sitenav-inner::-webkit-scrollbar { display: none; }
.sitenav-logo { display: inline-flex; align-items: center; flex-shrink: 0; }
.sitenav-logo img { height: 34px; width: auto; display: block; }
.sitenav-tabs { display: flex; align-items: center; gap: 22px; flex-shrink: 0; }
.sitenav-tabs a {
  color: var(--muted);
  font-family: "Arial Black", Arial, sans-serif;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
}
.sitenav-tabs a:hover { color: var(--text); border-bottom-color: var(--green); text-decoration: none; }
.sitenav-cta {
  margin-left: auto;
  flex-shrink: 0;
  padding: 9px 20px;
  font-size: 14px;
  border-radius: 10px;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .sitenav-inner { gap: 16px; }
  .sitenav-logo img { height: 28px; }
  .sitenav-tabs { gap: 16px; }
  .sitenav-cta { margin-left: 12px; }
}
/* Two-row nav on phones: row 1 = logo + CTA, row 2 = text tabs (no clip, no hamburger) */
@media (max-width: 600px) {
  .sitenav { height: 92px; }
  body { padding-top: 92px; }
  .sitenav-inner {
    flex-wrap: wrap;
    align-content: center;
    justify-content: flex-start;
    overflow: visible;
    gap: 10px 16px;
    padding: 0 20px;
  }
  .sitenav-logo { order: 1; }
  /* `.sitenav .sitenav-cta` (0,0,2,0) is needed to beat `.btn`'s 15px padding,
     which otherwise makes this ~58px tall — too big for row 1, so it clipped
     at the nav's top edge and pushed the tabs row past the bottom. Compact size
     fits both rows inside the 92px nav and centers the button with the logo. */
  .sitenav .sitenav-cta { order: 2; margin-left: auto; padding: 9px 16px; font-size: 13px; }
  .sitenav-tabs { order: 3; flex-basis: 100%; width: 100%; gap: 20px; }
}

/* ---- Landing (homepage styles live at the bottom of this file) ---- */
.lede { max-width: 540px; color: var(--muted); font-size: 16px; }

/* ---- Hero CTA buttons ---- */
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 30px;
  border-radius: 12px;
  font-family: "Arial Black", Arial, sans-serif;
  font-size: 16px;
  border: 1px solid transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: transform 0.12s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn[disabled] { opacity: 0.6; transform: none; cursor: default; }
.btn-primary { background: var(--green); color: #0a0f0c; }
.btn-primary:hover { background: #00e676; }
/* Bright white outline at rest so it reads as a button (the old #333 border
   was invisible on #111); lights up Win Green on hover. */
.btn-ghost { background: transparent; color: var(--text); border-color: rgba(255, 255, 255, 0.7); }
.btn-ghost:hover { border-color: var(--green); color: var(--green); background: rgba(0, 210, 106, 0.06); }
.btn-block { width: 100%; }
@media (max-width: 480px) {
  /* Capped-width button column must center itself — without the auto margins it
     hugs the left, and the gap grows with screen width (off-center on phones). */
  .cta-row { flex-direction: column; width: 100%; max-width: 320px; margin-left: auto; margin-right: auto; }
  .cta-row .btn { width: 100%; padding: 16px 20px; }
}

/* ---- Content page ---- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 26px 24px;
  border-bottom: 1px solid var(--border);
}
.topbar a { display: inline-flex; }
.topbar img { height: clamp(56px, 9vw, 88px); width: auto; display: block; }
.wrap { max-width: 760px; margin: 0 auto; padding: 40px 24px 72px; }
.content h1.display { font-size: clamp(28px, 6vw, 40px); color: #fff; margin-bottom: 6px; }
.content h2.display { font-size: 21px; color: var(--green); margin: 36px 0 10px; text-transform: uppercase; }
.content p { margin: 14px 0; color: var(--body); }
.content ul { margin: 12px 0 12px 22px; }
.content li { margin: 7px 0; color: var(--body); }
.content strong { color: #fff; }
.updated { color: var(--muted); font-size: 14px; margin: 4px 0 8px; }
.contact-email {
  display: inline-block;
  border: 1px solid var(--green);
  border-radius: 8px;
  padding: 8px 14px;
  color: var(--green);
  font-family: "Arial Black", Arial, sans-serif;
  text-decoration: none;
}
.contact-email:hover { background: rgba(0, 210, 106, 0.08); text-decoration: none; }
hr { border: none; border-top: 1px solid var(--border); margin: 40px 0; }
.fineprint { color: var(--muted); font-size: 14px; font-style: italic; }

/* ---- Footer ---- */
.sitefooter {
  border-top: 1px solid var(--border);
  text-align: center;
  padding: 28px 24px;
  color: var(--muted);
  font-size: 14px;
}
.sitefooter a { color: var(--muted); }

/* ---- Instructions hub + pages ---- */
.content ul ul { margin: 6px 0 6px 18px; }
.content ol { margin: 12px 0 12px 22px; }
.content ol li { margin: 7px 0; color: var(--body); }
.content h3.group { font-size: 15px; color: var(--gold); margin: 26px 0 6px; font-family: "Arial Black", Arial, sans-serif; letter-spacing: 0.02em; text-transform: uppercase; }
.lead { color: var(--body); font-size: 18px; margin: 10px 0 6px; }
.backlink { display: inline-block; color: var(--muted); font-size: 14px; margin-bottom: 10px; }
.backlink:hover { color: var(--green); }

.hub-section { margin: 40px 0; }
.hub-section .sec-title {
  position: relative;
  font-size: 22px;
  color: var(--green);
  font-family: "Arial Black", Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 6px;
  padding-bottom: 8px;
}
.hub-section .sec-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 44px;
  height: 3px;
  border-radius: 2px;
  background: var(--green);
}
.hub-section .sec-note { color: var(--muted); font-size: 14px; margin-bottom: 16px; }

.hub-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(244px, 1fr));
  gap: 14px;
}
.hub-link {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 18px 20px;
  background: #161616;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.12s ease;
}
.hub-link:hover { border-color: var(--green); background: #191919; text-decoration: none; transform: translateY(-2px); }
.hub-link .hl-icon {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(0, 210, 106, 0.10);
  border: 1px solid rgba(0, 210, 106, 0.22);
}
.hub-link .hl-icon svg { width: 26px; height: 26px; display: block; stroke: var(--green); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hub-link .hl-body { display: block; }
.hub-link .hl-title { color: #fff; font-family: "Arial Black", Arial, sans-serif; font-size: 16px; }
.hub-link .hl-sub { color: var(--muted); font-size: 13px; margin-top: 5px; line-height: 1.5; }
.hub-link .hl-arrow { position: absolute; top: 18px; right: 18px; color: var(--green); font-size: 20px; flex-shrink: 0; line-height: 1; }
.hub-sub { color: var(--muted); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; margin: 22px 0 10px; }

.callout {
  border: 1px solid var(--border); border-left: 3px solid var(--green);
  border-radius: 8px; background: #161616; padding: 12px 16px; margin: 6px 0 26px;
  font-size: 15px; color: var(--body);
}
.callout a { font-family: "Arial Black", Arial, sans-serif; }

/* ---- Responsive header ---- */
@media (max-width: 600px) {
  .topbar { padding: 20px 20px; }
}

/* ---- Signup form ---- */
.wrap.signup { max-width: 520px; }
.signup h1.display { font-size: clamp(26px, 6vw, 38px); color: #fff; margin-bottom: 8px; }
.signup-intro { color: var(--body); margin-bottom: 26px; }
.form { display: flex; flex-direction: column; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field label, .field-label {
  font-family: "Arial Black", Arial, sans-serif;
  font-size: 14px; color: #fff;
}
.field .opt { color: var(--muted); font-family: inherit; font-weight: normal; }
.form input[type="text"], .form input[type="email"], .form textarea {
  width: 100%;
  background: #1a1a1a;
  border: 1px solid #2e2e2e;
  border-radius: 10px;
  padding: 14px;
  color: var(--text);
  font-family: inherit;
  font-size: 16px; /* >=16px avoids iOS zoom-on-focus */
  line-height: 1.4;
}
.form textarea { resize: vertical; min-height: 88px; }
.form input::placeholder, .form textarea::placeholder { color: #6a6a6a; }
.form input:focus, .form textarea:focus { outline: none; border-color: var(--green); }
.hint { color: var(--muted); font-size: 13px; margin: 2px 0 0; }
.form-error { color: #ff6b6b; font-size: 14px; margin: 4px 0 0; }

.segmented { display: flex; gap: 10px; }
.seg { flex: 1; position: relative; }
.seg input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.seg span {
  display: flex; align-items: center; justify-content: center;
  padding: 13px 10px;
  border: 1px solid #2e2e2e; border-radius: 10px;
  background: #1a1a1a; color: var(--text);
  font-family: "Arial Black", Arial, sans-serif; font-size: 15px;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.seg input:checked + span { border-color: var(--green); color: var(--green); background: rgba(0, 210, 106, 0.08); }
.seg input:focus-visible + span { border-color: var(--green); }

.thanks { text-align: center; padding: 14px 0; }
.thanks-check {
  width: 56px; height: 56px; margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px; background: rgba(0, 210, 106, 0.12);
  color: var(--green); font-size: 30px; line-height: 1;
}
.thanks h2.display { font-size: 22px; color: #fff; margin-bottom: 10px; }
.thanks p { color: var(--body); margin: 8px 0; }

/* ---- Homepage "How It Works" 3-card section ---- */
.hiw { max-width: 1060px; margin: 0 auto; padding: 8px 24px 80px; }
.hiw-head {
  font-family: "Arial Black", Arial, sans-serif; font-weight: 900;
  color: var(--green); font-size: clamp(20px, 4vw, 24px);
  text-transform: uppercase; letter-spacing: 0.02em; text-align: center;
}
.hiw-head::after {
  content: ""; display: block; width: 42px; height: 3px; border-radius: 2px;
  background: var(--green); margin: 12px auto 30px;
}
.hiw-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.hiw-card {
  background: #161616; border: 1px solid var(--border); border-radius: 14px;
  overflow: hidden; display: flex; flex-direction: column;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.hiw-card:hover { border-color: var(--green); transform: translateY(-2px); }
.hiw-title { color: var(--green); font-family: "Arial Black", Arial, sans-serif; font-weight: 900; font-size: 15px; text-transform: uppercase; letter-spacing: 0.05em; padding: 15px 18px 12px; }
.hiw-shot {
  aspect-ratio: 1 / 1; background: #0d0d0d; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.hiw-shot img { width: 100%; height: 100%; object-fit: contain; display: block; }
.hiw-copy { padding: 15px 18px 18px; color: var(--body); font-size: 14px; line-height: 1.5; }
.hiw-link {
  display: block; text-align: center; margin-top: 28px;
  color: var(--green); font-family: "Arial Black", Arial, sans-serif; font-size: 15px;
}
.hiw-link:hover { text-decoration: underline; }
@media (max-width: 760px) {
  .hiw-grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; gap: 16px; }
}

/* ================================================================
   Homepage (index.html) — full marketing page
   ================================================================ */
.hwrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.grn { color: var(--green); }
.eyebrow {
  font-family: "Arial Black", Arial, sans-serif;
  font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--green);
}
.eyebrow::after { content: ""; display: block; width: 42px; height: 3px; border-radius: 2px; background: var(--green); margin-top: 10px; }
.sec-h2 {
  font-family: "Arial Black", Arial, sans-serif; text-transform: uppercase; color: #fff;
  font-size: clamp(26px, 3.8vw, 40px); line-height: 1.05; letter-spacing: -0.01em; margin-top: 18px; text-wrap: balance;
}

/* ---- 1. Hero ---- */
.home-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--border); }
.home-hero-inner {
  max-width: 1120px; margin: 0 auto; padding: 64px 24px 84px;
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 40px; align-items: center;
}
.home-hero-badge {
  display: inline-block; border: 1px solid var(--border); border-radius: 999px;
  padding: 6px 16px; color: var(--muted); font-size: 13px; letter-spacing: 0.06em;
  text-transform: uppercase; font-family: "Arial Black", Arial, sans-serif; margin-bottom: 26px;
}
.home-hero-badge b { color: var(--green); font-weight: inherit; }
.home-hero h1 {
  font-family: "Arial Black", Arial, sans-serif; font-weight: 900; text-transform: uppercase;
  font-size: clamp(40px, 5.4vw, 68px); line-height: 0.98; letter-spacing: -0.015em; color: #fff; text-wrap: balance;
}
.home-hero h1 .grn { display: block; }
.home-hero-sub { color: var(--body); font-size: 18px; max-width: 480px; margin: 24px 0 32px; }
.home-hero .cta-row { justify-content: flex-start; }
.home-hero-visual { position: relative; display: flex; justify-content: center; }
.home-hero-glow {
  position: absolute; inset: -12% -18%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(0, 210, 106, 0.14), rgba(0, 210, 106, 0.05) 55%, transparent 75%);
}
.phone {
  position: relative; width: min(320px, 78vw); border-radius: 42px; padding: 12px;
  background: #0a0a0a; border: 1px solid #2e2e2e;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 210, 106, 0.10), 0 0 60px rgba(0, 210, 106, 0.10);
  transform: rotate(-3.5deg);
}
.phone-screen { border-radius: 32px; overflow: hidden; background: #0d0d0d; }
.phone-head {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 12px 10px; font-family: "Arial Black", Arial, sans-serif;
  font-size: 13px; letter-spacing: 0.08em; color: var(--text);
}
.live-dot {
  width: 8px; height: 8px; border-radius: 999px; background: var(--green);
  box-shadow: 0 0 8px rgba(0, 210, 106, 0.9); animation: hm-pulse 1.6s ease-in-out infinite;
}
@keyframes hm-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.phone-screen img { display: block; width: 100%; height: auto; }
.phone-foot {
  padding: 10px 12px 14px; text-align: center; letter-spacing: 0.04em;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12px; color: var(--muted);
}
.phone-foot b { color: var(--green); font-weight: 700; }
.win-chip {
  position: absolute; right: -6px; top: 12%;
  background: #101c14; border: 1px solid rgba(0, 210, 106, 0.55); border-radius: 12px;
  padding: 10px 16px; font-family: "Arial Black", Arial, sans-serif; font-size: 13px; color: #fff; letter-spacing: 0.03em;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55), 0 0 24px rgba(0, 210, 106, 0.18);
  transform: rotate(2deg); animation: hm-chip-float 4.5s ease-in-out infinite;
}
.win-chip b { color: var(--green); }
@keyframes hm-chip-float { 0%, 100% { transform: rotate(2deg) translateY(0); } 50% { transform: rotate(2deg) translateY(-7px); } }

/* ---- 2. Pain strip ---- */
.pain { border-bottom: 1px solid var(--border); background: #131313; }
.pain .hwrap { padding-top: 64px; padding-bottom: 68px; }
.pain-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 34px; }
.pain-card { background: #161616; border: 1px solid var(--border); border-radius: 14px; padding: 22px 20px; }
.pain-card h3 {
  font-family: "Arial Black", Arial, sans-serif; font-size: 14px; text-transform: uppercase;
  letter-spacing: 0.05em; color: #fff; margin-bottom: 10px;
}
.pain-card p { color: var(--muted); font-size: 14.5px; line-height: 1.55; }

/* ---- 3. The live moment ---- */
.livewin { border-bottom: 1px solid var(--border); }
.livewin .hwrap { padding-top: 88px; padding-bottom: 92px; text-align: center; }
.livewin h2 {
  font-family: "Arial Black", Arial, sans-serif; text-transform: uppercase; color: #fff;
  font-size: clamp(28px, 4.4vw, 48px); line-height: 1.02; letter-spacing: -0.01em; text-wrap: balance;
}
.livewin-sub { color: var(--muted); font-size: 17px; margin: 18px auto 40px; max-width: 520px; }
.feed {
  max-width: 660px; margin: 0 auto; background: #161616; border: 1px solid var(--border);
  border-radius: 16px; overflow: hidden; text-align: left;
}
.feed-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 20px; border-bottom: 1px solid var(--border); background: #1d1d1d;
}
.feed-game { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 13px; color: var(--text); letter-spacing: 0.04em; }
.feed-game .live-dot { display: inline-block; margin-right: 8px; vertical-align: 1px; }
.feed-tag {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 10px;
  letter-spacing: 0.12em; color: #6a6a6a; text-transform: uppercase;
}
.feed-rows { padding: 8px 0 10px; }
.frow {
  display: grid; grid-template-columns: 84px 1fr auto auto; align-items: center; gap: 14px;
  padding: 13px 20px; opacity: 0; animation: 16s linear infinite; animation-name: hm-frow1;
}
.frow:nth-child(2) { animation-name: hm-frow2; }
.frow:nth-child(3) { animation-name: hm-frow3; }
.frow:nth-child(4) { animation-name: hm-frow4; }
.frow:nth-child(5) { animation-name: hm-frow5; }
.frow + .frow { border-top: 1px solid #1f1f1f; }
.ftag {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; text-align: center; color: var(--green);
  border: 1px solid rgba(0, 210, 106, 0.45); border-radius: 6px; padding: 3px 0;
}
.fscore { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 14px; color: var(--body); font-variant-numeric: tabular-nums; }
.fbox { font-family: "Arial Black", Arial, sans-serif; font-size: 14px; color: #fff; letter-spacing: 0.03em; white-space: nowrap; }
.fpts { font-family: "Arial Black", Arial, sans-serif; font-size: 14px; color: var(--green); white-space: nowrap; }
/* Rows share one 16s clock: appear one by one, hold together, reset together. */
@keyframes hm-frow1 { 0%, 2% { opacity: 0; transform: translateY(10px); } 5% { opacity: 1; transform: none; background: rgba(0,210,106,0.16); box-shadow: inset 3px 0 0 var(--green); } 13% { background: transparent; box-shadow: inset 3px 0 0 transparent; } 92% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes hm-frow2 { 0%, 16% { opacity: 0; transform: translateY(10px); } 19% { opacity: 1; transform: none; background: rgba(0,210,106,0.16); box-shadow: inset 3px 0 0 var(--green); } 27% { background: transparent; box-shadow: inset 3px 0 0 transparent; } 92% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes hm-frow3 { 0%, 30% { opacity: 0; transform: translateY(10px); } 33% { opacity: 1; transform: none; background: rgba(0,210,106,0.16); box-shadow: inset 3px 0 0 var(--green); } 41% { background: transparent; box-shadow: inset 3px 0 0 transparent; } 92% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes hm-frow4 { 0%, 44% { opacity: 0; transform: translateY(10px); } 47% { opacity: 1; transform: none; background: rgba(0,210,106,0.16); box-shadow: inset 3px 0 0 var(--green); } 55% { background: transparent; box-shadow: inset 3px 0 0 transparent; } 92% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes hm-frow5 { 0%, 58% { opacity: 0; transform: translateY(10px); } 61% { opacity: 1; transform: none; background: rgba(0,210,106,0.16); box-shadow: inset 3px 0 0 var(--green); } 69% { background: transparent; box-shadow: inset 3px 0 0 transparent; } 92% { opacity: 1; } 97%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .frow, .win-chip, .live-dot { animation: none !important; }
  .frow { opacity: 1; transform: none; }
}
.livewin-note {
  color: #fff; font-size: clamp(17px, 1.9vw, 20px); line-height: 1.55;
  margin: 34px auto 0; max-width: 700px; text-wrap: balance;
}
.livewin-note b {
  color: #fff; font-family: "Arial Black", Arial, sans-serif; font-weight: 900;
  font-size: 0.85em; text-transform: uppercase; letter-spacing: 0.05em;
}
.livewin-note .play {
  font-family: "Arial Black", Arial, sans-serif; font-weight: 900;
  color: var(--green); text-transform: uppercase; font-size: 0.9em; letter-spacing: 0.03em;
}

/* ---- 5. For the commish ---- */
.cm { border-top: 1px solid var(--border); background: #131313; }
.cm .hwrap { padding-top: 80px; padding-bottom: 84px; }
.cm-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 40px; }
.cm-step { background: #161616; border: 1px solid var(--border); border-radius: 14px; padding: 24px 20px; }
.cm-step-n {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12px; font-weight: 700;
  color: var(--green); letter-spacing: 0.1em; display: block; margin-bottom: 14px;
}
.cm-step h3 {
  font-family: "Arial Black", Arial, sans-serif; font-size: 15px; text-transform: uppercase;
  letter-spacing: 0.04em; color: #fff; margin-bottom: 10px;
}
.cm-step p { color: var(--muted); font-size: 14.5px; line-height: 1.55; }
.cm-banner {
  margin-top: 20px; background: linear-gradient(90deg, rgba(0, 210, 106, 0.10), rgba(0, 210, 106, 0.02) 55%), #161616;
  border: 1px solid rgba(0, 210, 106, 0.30); border-left: 3px solid var(--green); border-radius: 14px;
  padding: 22px 24px; display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap;
}
.cm-banner-k {
  font-family: "Arial Black", Arial, sans-serif; font-size: 13px; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--green); white-space: nowrap;
}
.cm-banner p { color: var(--body); font-size: 15.5px; }

/* ---- 6. For the players ---- */
.players { border-top: 1px solid var(--border); }
.players-inner { padding-top: 80px; padding-bottom: 84px; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; }
.players-big { color: var(--body); font-size: 17px; max-width: 460px; margin-top: 22px; }
.players-small { color: var(--muted); font-size: 14.5px; max-width: 460px; margin-top: 14px; }
.sms-demo { display: flex; flex-direction: column; gap: 10px; max-width: 360px; margin-left: auto; }
.bubble { border-radius: 20px; padding: 12px 16px; font-size: 15px; line-height: 1.45; max-width: 88%; }
.bubble.them { background: #262626; color: var(--text); border-bottom-left-radius: 6px; align-self: flex-start; }
.bubble.them a { color: var(--green); word-break: break-all; }
.bubble.me { background: var(--green); color: #0a0f0c; border-bottom-right-radius: 6px; align-self: flex-end; font-weight: 600; }
.sms-meta { font-size: 11px; color: #6a6a6a; letter-spacing: 0.06em; text-transform: uppercase; align-self: flex-start; margin-left: 6px; }

/* ---- 7. Every pool, every season ---- */
.fmts { border-top: 1px solid var(--border); }
.fmts .hwrap { padding-top: 64px; padding-bottom: 68px; }
.fmts-group { margin-top: 34px; }
.fmts-group + .fmts-group { margin-top: 34px; padding-top: 30px; border-top: 1px solid #1f1f1f; }
.fmts-glabel {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: "Arial Black", Arial, sans-serif; font-size: 15px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px;
}
.fmts-glabel.live { color: var(--green); }
.fmts-glabel.deck { color: var(--gold); }
.tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(164px, 1fr)); gap: 12px; }
.tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px;
  min-height: 96px; padding: 18px 14px;
  background: linear-gradient(180deg, rgba(0, 210, 106, 0.10), rgba(0, 210, 106, 0.02) 60%), #161616;
  border: 1px solid rgba(0, 210, 106, 0.30); border-radius: 12px;
  font-family: "Arial Black", Arial, sans-serif; font-size: 13px; color: #fff;
  letter-spacing: 0.03em; text-transform: uppercase; line-height: 1.3;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.tile:hover { border-color: var(--green); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 18px rgba(0, 210, 106, 0.14); }
.tile svg {
  width: 27px; height: 27px; display: block; flex-shrink: 0;
  stroke: var(--green); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.tile.deck {
  background: linear-gradient(180deg, rgba(245, 197, 24, 0.07), rgba(245, 197, 24, 0.015) 60%), transparent;
  border: 1px dashed rgba(245, 197, 24, 0.45); color: var(--body);
}
.tile.deck:hover { border-color: var(--gold); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 18px rgba(245, 197, 24, 0.12); }
.tile.deck svg { stroke: var(--gold); }
.fmts-caption { color: var(--muted); font-size: 14.5px; margin-top: 16px; }

/* ---- 8. The old way vs BoxD ---- */
.vsx { border-top: 1px solid var(--border); background: #131313; }
.vsx .hwrap { padding-top: 80px; padding-bottom: 88px; }
.vsx-table { margin-top: 40px; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; }
.vsx-row { display: grid; grid-template-columns: 1fr 1fr; }
.vsx-row + .vsx-row { border-top: 1px solid #1f1f1f; }
.vsx-cell { padding: 18px 24px; font-size: 15.5px; display: flex; align-items: center; gap: 12px; }
.vsx-cell.old { color: var(--muted); background: #161616; border-right: 1px solid #1f1f1f; }
.vsx-cell.new { color: var(--text); background: rgba(0, 210, 106, 0.045); }
.vsx-row.head .vsx-cell {
  font-family: "Arial Black", Arial, sans-serif; font-size: 13px; text-transform: uppercase;
  letter-spacing: 0.1em; padding: 15px 24px;
}
.vsx-row.head .old { color: #7a7a7a; background: #1d1d1d; }
.vsx-row.head .new { color: var(--green); background: rgba(0, 210, 106, 0.09); }
.mark { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-weight: 700; font-size: 14px; flex-shrink: 0; width: 20px; text-align: center; }
.mark.x { color: #ff5c5c; }
.mark.c { color: var(--green); }

/* ---- 9. The close ---- */
.closer { border-top: 1px solid var(--border); position: relative; overflow: hidden; }
.closer::before {
  content: ""; position: absolute; left: 50%; bottom: -260px; width: 720px; height: 480px;
  transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(closest-side, rgba(0, 210, 106, 0.12), transparent 70%);
}
.closer .hwrap { padding-top: 96px; padding-bottom: 104px; text-align: center; position: relative; }
.closer h2 {
  font-family: "Arial Black", Arial, sans-serif; text-transform: uppercase; color: #fff;
  font-size: clamp(34px, 5.4vw, 62px); line-height: 1; letter-spacing: -0.015em;
}
.closer p { color: var(--body); font-size: 17px; max-width: 520px; margin: 20px auto 34px; }
.closer .cta-row { justify-content: center; }

/* ---- Homepage responsive ---- */
@media (max-width: 940px) {
  .home-hero-inner { grid-template-columns: 1fr; text-align: center; padding-top: 48px; padding-bottom: 64px; }
  .home-hero h1 { margin: 0 auto; }
  .home-hero-sub { margin-left: auto; margin-right: auto; }
  .home-hero .cta-row { justify-content: center; }
  .home-hero-visual { margin-top: 28px; }
  .win-chip { right: 2%; }
  .pain-grid, .cm-steps { grid-template-columns: repeat(2, 1fr); }
  .players-inner { grid-template-columns: 1fr; gap: 36px; }
  .sms-demo { margin: 0 auto; }
}
@media (max-width: 560px) {
  .pain-grid, .cm-steps { grid-template-columns: 1fr; }
  .home-hero .cta-row, .closer .cta-row { flex-direction: column; align-items: stretch; }
  .home-hero .cta-row .btn, .closer .cta-row .btn { width: 100%; }
  .feed-head { padding: 12px 16px; }
  .feed-game { font-size: 11.5px; white-space: nowrap; }
  .feed-tag { font-size: 9px; white-space: nowrap; }
  .frow { grid-template-columns: 64px 1fr; grid-template-rows: auto auto; row-gap: 4px; }
  .fbox { grid-column: 1 / 2; grid-row: 2; font-size: 13px; }
  .fpts { grid-column: 2 / 3; grid-row: 2; justify-self: end; }
  .tile-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .tile { min-height: 88px; padding: 14px 10px; font-size: 12px; }
  .vsx-row { grid-template-columns: 1fr; }
  .vsx-cell.old { border-right: none; }
  .vsx-row.head { display: none; }
}

/* ---- How It Works: lightbox zoom + in-card overlay accents ---- */
.hiw-shot { position: relative; }
.hiw-zoom {
  display: block; width: 100%; height: 100%; padding: 0; margin: 0;
  border: 0; background: none; cursor: zoom-in; -webkit-appearance: none; appearance: none;
}
.hiw-zoom img { width: 100%; height: 100%; object-fit: contain; display: block; }
.hiw-zoom:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; border-radius: 4px; }

.fx { position: absolute; pointer-events: none; opacity: 0; border-radius: 5px; }

/* Boxes card: winners lighting up across the board (cells on the 10x10 grid) */
.fx-pulse {
  width: 7.5%; height: 7.5%;
  background: rgba(0, 210, 106, 0.62);
  box-shadow: 0 0 22px 6px rgba(0, 210, 106, 0.55), inset 0 0 0 2px rgba(0, 230, 118, 0.9);
  animation: hm-fxpulse 8.1s ease-in-out infinite;
}
.fx-p1 { left: 40.2%; top: 32.8%; }
.fx-p2 { left: 73.4%; top: 57.7%; animation-delay: 2.7s; }
.fx-p3 { left: 23.6%; top: 74.3%; animation-delay: 5.4s; }
@keyframes hm-fxpulse {
  0%, 1% { opacity: 0; transform: scale(0.6); }
  6% { opacity: 1; transform: scale(1.3); }
  10%, 20% { opacity: 1; transform: scale(1); }
  30%, 100% { opacity: 0; transform: scale(0.85); }
}
.fx-chip {
  transform: translateX(-50%);
  padding: 3px 8px; border-radius: 7px;
  background: #0e1f15; border: 1px solid rgba(0, 210, 106, 0.75);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6), 0 0 12px rgba(0, 210, 106, 0.3);
  font-family: "Arial Black", Arial, sans-serif; font-size: 10.5px; letter-spacing: 0.04em;
  color: var(--green); white-space: nowrap; line-height: 1.2;
  animation: hm-fxchip 8.1s ease-in-out infinite;
}
.fx-c1 { left: 43.95%; top: 24.6%; }
.fx-c2 { left: 77.15%; top: 49.5%; animation-delay: 2.7s; }
.fx-c3 { left: 27.35%; top: 66.1%; animation-delay: 5.4s; }
@keyframes hm-fxchip {
  0%, 3% { opacity: 0; transform: translateX(-50%) translateY(8px); }
  8% { opacity: 1; transform: translateX(-50%) translateY(0); }
  22% { opacity: 1; transform: translateX(-50%) translateY(-2px); }
  32%, 100% { opacity: 0; transform: translateX(-50%) translateY(-8px); }
}

/* Survivor card: two entries bust red, then the champion row glows gold (one 8.5s clock) */
.fx-elim {
  left: 8%; width: 84%;
  background: rgba(255, 60, 60, 0.30);
  box-shadow: inset 0 0 0 2px rgba(255, 90, 90, 0.65), 0 0 14px rgba(255, 60, 60, 0.25);
  -webkit-backdrop-filter: saturate(0.45) brightness(0.8);
  backdrop-filter: saturate(0.45) brightness(0.8);
  animation: 8.5s ease-in-out infinite;
}
.fx-e1 { top: 15.7%; height: 8.3%; animation-name: hm-fxe1; }
.fx-e2 { top: 24.7%; height: 8.4%; animation-name: hm-fxe2; }
@keyframes hm-fxe1 {
  0%, 4% { opacity: 0; }
  9%, 78% { opacity: 1; }
  87%, 100% { opacity: 0; }
}
@keyframes hm-fxe2 {
  0%, 16% { opacity: 0; }
  21%, 78% { opacity: 1; }
  87%, 100% { opacity: 0; }
}
.fx-champ {
  left: 8%; width: 84%; top: 6.1%; height: 8.7%;
  background: rgba(245, 197, 24, 0.30);
  box-shadow: 0 0 26px 8px rgba(245, 197, 24, 0.45), inset 0 0 0 2px rgba(245, 197, 24, 0.8);
  animation: hm-fxchamp 8.5s ease-in-out infinite;
}
@keyframes hm-fxchamp {
  0%, 34% { opacity: 0; }
  41% { opacity: 1; }
  54% { opacity: 0.75; }
  66%, 80% { opacity: 1; }
  90%, 100% { opacity: 0; }
}

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0, 0, 0, 0.88);
  display: flex; align-items: center; justify-content: center;
  padding: 20px; cursor: zoom-out;
  animation: hm-lbfade 0.18s ease;
}
.lightbox[hidden] { display: none; }
.lightbox img {
  max-width: min(1000px, 94vw); max-height: 88vh; width: auto; height: auto;
  border-radius: 12px; border: 1px solid #2e2e2e;
  animation: hm-lbzoom 0.18s ease;
}
.lb-close {
  position: absolute; top: 14px; right: 14px; width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.08); color: #fff; font-size: 26px; line-height: 1;
  border: 1px solid #3a3a3a; border-radius: 999px; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.lb-close:hover { border-color: var(--green); color: var(--green); }
body.lb-lock { overflow: hidden; }
@keyframes hm-lbfade { from { opacity: 0; } }
@keyframes hm-lbzoom { from { transform: scale(0.96); } }
@media (prefers-reduced-motion: reduce) {
  .fx { animation: none !important; opacity: 0 !important; }
  .lightbox, .lightbox img { animation: none !important; }
}

/* ================================================================
   Founding Commish Charter — homepage teaser band + /founders page
   (visual overhaul; copy frozen)
   ================================================================ */

/* Larger primary CTA — the one dominant action on the hero + offer page */
.btn-lg { padding: 18px 40px; font-size: 18px; border-radius: 14px; }

/* ---- Homepage teaser band (slim; below hero, above the pain strip) ---- */
.charter-band {
  border-bottom: 1px solid var(--border);
  border-left: 3px solid var(--green);
  background: linear-gradient(90deg, rgba(0, 210, 106, 0.16), rgba(0, 210, 106, 0.03) 62%), #131313;
  box-shadow: inset 0 0 60px rgba(0, 210, 106, 0.06);
}
.charter-band-inner {
  max-width: 1120px; margin: 0 auto; padding: 28px 24px;
  display: grid; grid-template-columns: 1fr auto; gap: 18px 40px; align-items: center;
}
.charter-band .eyebrow { margin-bottom: 6px; }
.charter-band-h {
  font-family: "Arial Black", Arial, sans-serif; font-weight: 900; text-transform: uppercase;
  color: #fff; font-size: clamp(19px, 2.5vw, 26px); line-height: 1.08; letter-spacing: -0.01em; text-wrap: balance;
}
.charter-band-sub { color: var(--body); font-size: 15px; margin-top: 8px; max-width: 620px; }
.charter-band-cta { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }

/* Homepage counter line — number louder than the body around it */
.founding-counter {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 13px; letter-spacing: 0.04em; color: var(--muted); text-transform: uppercase; white-space: nowrap;
}
.founding-counter b { color: var(--green); font-weight: 700; font-size: 19px; }
@media (max-width: 760px) {
  .charter-band-inner { grid-template-columns: 1fr; }
  .charter-band-cta { align-items: stretch; }
  .charter-band-cta .btn { width: 100%; }
  .founding-counter { text-align: center; white-space: normal; }
}

/* ================= /founders — the offer page ================= */
.founders { max-width: 760px; margin: 0 auto; padding: 44px 24px 84px; }

/* HERO */
.fdr-hero { text-align: center; }
.fdr-hero .eyebrow { display: inline-block; margin-bottom: 14px; }
.fdr-hero .eyebrow::after { margin-left: auto; margin-right: auto; }
.fdr-hero h1 {
  font-family: "Arial Black", Arial, sans-serif; font-weight: 900; text-transform: uppercase;
  color: #fff; font-size: clamp(32px, 6vw, 56px); line-height: 0.98; letter-spacing: -0.015em; text-wrap: balance;
}
.fdr-hero h1 .grn { color: var(--green); }
.fdr-intro { color: var(--body); font-size: 18px; line-height: 1.6; margin: 20px auto 26px; max-width: 600px; }
.fdr-hero .btn-lg { display: inline-flex; }

/* PROGRESS BAR (top + bottom; JS reveals only on a real count) */
.charter-progress { max-width: 520px; margin: 30px auto 0; }
.charter-progress-top {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 13px; letter-spacing: 0.04em; color: var(--muted); text-transform: uppercase;
  margin-bottom: 10px; text-align: center;
}
.charter-progress-top b { color: var(--green); font-weight: 700; font-size: 26px; letter-spacing: 0; }
.charter-progress-track {
  height: 14px; border-radius: 999px; background: #1b1b1b;
  border: 1px solid var(--border); overflow: hidden;
}
.charter-progress-fill {
  display: block; height: 100%; min-width: 8px; width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #00b85c, var(--green));
  box-shadow: 0 0 14px rgba(0, 210, 106, 0.55);
  transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (prefers-reduced-motion: reduce) { .charter-progress-fill { transition: none; } }

/* VALUE STACK */
.stack-group {
  font-family: "Arial Black", Arial, sans-serif; font-size: 15px; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--green); margin: 48px 0 14px;
}
.stack { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.stack-row {
  display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: 14px;
  padding: 16px 18px; margin: 0;
  background: #161616; border: 1px solid var(--border); border-radius: 12px;
  transition: border-color 0.15s ease, transform 0.12s ease;
}
.stack-row:hover { border-color: rgba(0, 210, 106, 0.4); transform: translateY(-1px); }
.stack-check {
  width: 26px; height: 26px; flex-shrink: 0; margin-top: 1px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px; background: rgba(0, 210, 106, 0.12); border: 1px solid rgba(0, 210, 106, 0.30);
}
.stack-check svg { width: 16px; height: 16px; stroke: var(--green); fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.stack-check.gold { background: rgba(245, 197, 24, 0.12); border-color: rgba(245, 197, 24, 0.30); }
.stack-check.gold svg { stroke: var(--gold); }
.stack-text { font-size: 15px; line-height: 1.55; color: var(--body); }
.stack-text b {
  color: #fff; font-family: "Arial Black", Arial, sans-serif; font-weight: 900;
  font-size: 16.5px; letter-spacing: -0.01em;
}
.stack-val {
  align-self: center; flex-shrink: 0;
  font-family: "Arial Black", Arial, sans-serif; font-weight: 900; font-size: 14px;
  color: var(--green); white-space: nowrap;
  border: 1px solid rgba(0, 210, 106, 0.35); border-radius: 8px; padding: 6px 12px;
  background: rgba(0, 210, 106, 0.06);
}
.stack-val.gold { color: var(--gold); border-color: rgba(245, 197, 24, 0.4); background: rgba(245, 197, 24, 0.06); }

/* FOUNDING EXCLUSIVES — distinct glowing panel */
.fdr-excl {
  margin-top: 44px; padding: 24px; border-radius: 18px;
  border: 1px solid rgba(0, 210, 106, 0.35);
  background: linear-gradient(180deg, rgba(0, 210, 106, 0.08), rgba(0, 210, 106, 0.015) 55%), #131313;
  box-shadow: 0 0 50px rgba(0, 210, 106, 0.10), inset 0 0 0 1px rgba(0, 210, 106, 0.05);
}
.fdr-excl-h {
  font-family: "Arial Black", Arial, sans-serif; font-weight: 900; text-transform: uppercase;
  color: var(--green); font-size: clamp(18px, 2.6vw, 22px); letter-spacing: 0.02em; margin-bottom: 16px;
}
.excl-stack .stack-row { background: #161616; }
.stack-row.scarce {
  border-color: rgba(245, 197, 24, 0.55);
  box-shadow: 0 0 22px rgba(245, 197, 24, 0.14);
}

/* TOTAL -> FREE reveal — the money moment */
.fdr-reveal {
  margin: 52px 0; padding: 40px 24px; text-align: center;
  border: 1px solid rgba(0, 210, 106, 0.30); border-radius: 20px;
  background: radial-gradient(120% 140% at 50% 0%, rgba(0, 210, 106, 0.14), rgba(0, 210, 106, 0.02) 60%), #141414;
}
.fdr-reveal .tv-label { color: var(--muted); font-size: 14px; text-transform: uppercase; letter-spacing: 0.1em; }
.fdr-reveal .tv-value {
  color: var(--body); font-size: 26px; margin: 6px 0 18px;
  text-decoration: line-through; text-decoration-color: rgba(255, 92, 92, 0.8); text-decoration-thickness: 2px;
  font-family: "Arial Black", Arial, sans-serif;
}
.fdr-reveal .tv-free {
  font-family: "Arial Black", Arial, sans-serif; font-weight: 900; text-transform: uppercase;
  color: var(--green); font-size: clamp(64px, 15vw, 128px); line-height: 0.9; letter-spacing: -0.02em;
  text-shadow: 0 0 44px rgba(0, 210, 106, 0.4);
}
.fdr-reveal .tv-sub {
  color: var(--muted); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; margin: 12px 0 26px;
}
.fdr-reveal .btn-lg { display: inline-flex; }

/* FIRST-POOL PROMISE — seal / certificate */
.fdr-seal {
  margin: 44px auto 0; max-width: 620px; text-align: center;
  padding: 28px 28px 30px; border-radius: 16px;
  border: 2px solid var(--gold); background: #161616;
  box-shadow: 0 0 34px rgba(245, 197, 24, 0.10);
}
.fdr-seal h3 {
  font-family: "Arial Black", Arial, sans-serif; font-weight: 900; text-transform: uppercase;
  color: var(--gold); font-size: clamp(18px, 2.6vw, 22px); letter-spacing: 0.03em; margin-bottom: 10px;
}
.fdr-seal p { color: var(--body); font-size: 16px; line-height: 1.6; margin: 0; }

/* DEADLINE strip — hard line, full width */
.fdr-deadline {
  margin: 44px 0 0; padding: 20px 24px; text-align: center;
  color: #fff; font-size: clamp(15px, 2.2vw, 18px); line-height: 1.55; text-wrap: balance;
  font-family: "Arial Black", Arial, sans-serif; font-weight: 900;
  border-top: 2px solid var(--green); border-bottom: 2px solid var(--green);
  background: rgba(0, 210, 106, 0.05);
}

/* FINAL block */
.fdr-final { margin-top: 44px; text-align: center; }
.fdr-final .charter-progress { margin-top: 0; margin-bottom: 26px; }
.fdr-final .btn-lg { display: inline-flex; }

/* /founders mobile: full-width taps, clean row collapse, no overflow */
@media (max-width: 560px) {
  .founders .btn-lg { display: flex; width: 100%; max-width: 420px; margin-left: auto; margin-right: auto; }
  .stack-row { grid-template-columns: auto 1fr; row-gap: 12px; }
  .stack-val { grid-column: 2; justify-self: start; }
  .fdr-reveal { padding: 32px 18px; }
}

/* /signup — Founding Commish emphasis line under the h1 */
.signup-charter {
  color: var(--green); font-size: 15px; line-height: 1.55; margin: 0 0 14px;
  font-family: "Arial Black", Arial, sans-serif; font-weight: 900; text-wrap: balance;
}