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

:root {
  --red: #CC1F35;
  --red-hi: #FF2844;
  --navy: #1B2D8E;
  --blue: #4B6FFF;
  --cream: #F0EBE0;
  --cream-dim: #A89F94;
  --black: #080808;
  --black-2: #111111;
  --black-3: #1A1A1A;
  --border: rgba(240,235,224,0.1);
  --border-hard: rgba(240,235,224,0.2);
}

html { scroll-behavior: smooth; }

body {
  background: var(--black);
  color: var(--cream);
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  overflow-x: hidden;
  min-height: 100vh;
}

/* ALERT BAR */
.alert-bar {
  background: var(--red);
  color: #fff;
  text-align: center;
  padding: 0.55em 1em;
  font-size: 0.72em;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* HEADER */
.site-header { background: var(--black); border-bottom: 3px solid var(--red); position: sticky; top: 0; z-index: 100; }
.header-inner { display: flex; align-items: stretch; max-width: 1400px; margin: 0 auto; padding: 0 1.5em; }
.site-logo { font-family: 'Anton', impact, sans-serif; font-size: 1.45em; color: #fff; text-decoration: none; letter-spacing: 0.05em; padding: 0.7em 0; flex-shrink: 0; white-space: nowrap; align-self: center; }
.site-logo em { color: var(--red); font-style: normal; }
.nav-tabs { display: flex; list-style: none; margin-left: 2em; overflow-x: auto; scrollbar-width: none; flex: 1; }
.nav-tabs::-webkit-scrollbar { display: none; }
.nav-tab { display: flex; align-items: center; font-size: 0.7em; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cream-dim); padding: 1.3em 1em; cursor: pointer; border-bottom: 3px solid transparent; transition: color 0.15s, border-color 0.15s; white-space: nowrap; user-select: none; border-top: none; text-decoration: none; }
.nav-tab:hover { color: var(--cream); }
.nav-tab.active { color: #fff; border-bottom-color: var(--red); }

/* PAGES */
.page { display: none; }
.page.active { display: block; }

/* SHARED */
.section { max-width: 1160px; margin: 0 auto; padding: 4em 1.5em; }
.section-label { font-size: 0.68em; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--red); margin-bottom: 0.7em; display: block; }
.section-title { font-family: 'Anton', impact, sans-serif; font-size: clamp(2.2rem, 5vw, 4rem); text-transform: uppercase; line-height: 0.95; color: #fff; margin-bottom: 0.6em; }
.section-rule { height: 3px; background: var(--red); width: 56px; margin-bottom: 2em; }
.section-body { color: var(--cream-dim); line-height: 1.65; max-width: 660px; margin-bottom: 2em; }

/* BUTTONS */
.btn { display: inline-flex; align-items: center; gap: 0.4em; font-family: 'IBM Plex Sans', sans-serif; font-weight: 700; font-size: 0.82em; letter-spacing: 0.1em; text-transform: uppercase; padding: 1em 1.8em; cursor: pointer; text-decoration: none; border: none; transition: transform 0.1s, filter 0.12s; }
.btn:hover { transform: translateY(-2px); filter: brightness(1.12); }
.btn:active { transform: translateY(0); }
.btn-red { background: var(--red); color: #fff; }
.btn-navy { background: var(--navy); color: #fff; }
.btn-outline { background: transparent; color: var(--cream); border: 2px solid var(--cream); }
.btn-outline:hover { background: rgba(240,235,224,0.08); }

/* HERO */
.hero { position: relative; padding: 5em 1.5em 4.5em; text-align: center; overflow: hidden; }
.hero-grid { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(204,31,53,0.05) 0 1px, transparent 1px 48px), repeating-linear-gradient(90deg, rgba(204,31,53,0.05) 0 1px, transparent 1px 48px); }
.hero-eyebrow { display: inline-block; background: var(--red); color: #fff; font-size: 0.72em; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; padding: 0.45em 1.1em; margin-bottom: 1.4em; }
.hero-headline { font-family: 'Anton', impact, sans-serif; font-size: clamp(4rem, 12vw, 10rem); line-height: 0.9; letter-spacing: -0.01em; text-transform: uppercase; color: #fff; margin-bottom: 0.5em; position: relative; }
.hero-headline .red { color: var(--red); }
.hero-headline .blue { color: var(--blue); }
.hero-sub { font-size: clamp(0.95rem, 1.8vw, 1.2em); color: var(--cream-dim); max-width: 580px; margin: 0 auto 2.5em; line-height: 1.6; }
.hero-ctas { display: flex; gap: 0.8em; justify-content: center; flex-wrap: wrap; }

/* MARQUEE */
.marquee-bar { background: var(--red); overflow: hidden; white-space: nowrap; padding: 0.65em 0; border-top: 1px solid rgba(255,255,255,0.1); }
.marquee-inner { display: inline-block; animation: ticker 24s linear infinite; font-size: 0.78em; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; }
@keyframes ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* STATS */
.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.stat-cell { padding: 2.2em 1.5em; text-align: center; border-right: 1px solid var(--border); }
.stat-cell:last-child { border-right: none; }
.stat-num { font-family: 'Anton', impact, sans-serif; font-size: clamp(2rem, 4vw, 3.5rem); color: var(--red); line-height: 1; margin-bottom: 0.25em; }
.stat-lbl { font-size: 0.75em; color: var(--cream-dim); text-transform: uppercase; letter-spacing: 0.07em; line-height: 1.4; }

/* STICKER PROMO */
.sticker-promo { background: var(--black-2); border: 1px solid var(--border-hard); border-left: 5px solid var(--red); padding: 2.5em; display: flex; gap: 3em; align-items: center; flex-wrap: wrap; }
.sticker-promo-img { width: 160px; flex-shrink: 0; }

/* MAP */
.map-wrap { max-width: 1160px; margin: 0 auto; }
.map-legend { display: flex; gap: 2em; flex-wrap: wrap; margin-bottom: 1.5em; }
.legend-item { display: flex; align-items: center; gap: 0.6em; font-size: 0.78em; color: var(--cream-dim); text-transform: uppercase; letter-spacing: 0.07em; }
.legend-swatch { width: 16px; height: 16px; flex-shrink: 0; }
#us-map { width: 100%; background: var(--black-2); border: 1px solid var(--border-hard); display: block; }
.map-tip { position: fixed; background: var(--black-3); border: 1px solid var(--border-hard); border-left: 3px solid var(--red); color: var(--cream); padding: 0.75em 1em; font-size: 0.82em; pointer-events: none; z-index: 300; opacity: 0; transition: opacity 0.12s; max-width: 220px; line-height: 1.5; }
.state-panel { margin-top: 1.5em; background: var(--black-2); border: 1px solid var(--border-hard); padding: 2em; display: none; }
.state-panel.on { display: block; }
.seat-bar { display: flex; height: 12px; margin: 1em 0 0.4em; }
.seat-bar-r { background: var(--red); }
.seat-bar-d { background: var(--blue); }
.state-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1.5em; margin-top: 1.5em; }
.info-lbl { font-size: 0.68em; color: var(--red); text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: 0.4em; }
.info-val { font-size: 0.92em; color: var(--cream); font-weight: 600; line-height: 1.5; }

/* REGISTER */
.reg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); margin-top: 2.5em; }
.reg-card { background: var(--black-2); padding: 2em; text-decoration: none; display: block; transition: background 0.15s; }
.reg-card:hover { background: var(--black-3); }
.reg-num { font-family: 'Anton', impact, sans-serif; font-size: 3.2em; color: var(--red); line-height: 1; margin-bottom: 0.3em; }
.reg-title { font-size: 1em; font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.6em; }
.reg-desc { font-size: 0.88em; color: var(--cream-dim); line-height: 1.55; }
.reg-link { display: inline-block; margin-top: 1em; font-size: 0.78em; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--red); }

/* YOUR REPS */
.zip-row { display: flex; max-width: 480px; margin: 2em 0; }
.zip-in { flex: 1; padding: 0.95em 1.1em; background: var(--black-3); border: 2px solid var(--border-hard); border-right: none; color: var(--cream); font-family: 'IBM Plex Sans', sans-serif; font-size: 1em; outline: none; }
.zip-in:focus { border-color: var(--red); }
.zip-in::placeholder { color: var(--cream-dim); }
.zip-go { background: var(--red); color: #fff; border: none; padding: 0 1.4em; font-family: 'IBM Plex Sans', sans-serif; font-weight: 700; font-size: 0.8em; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; transition: filter 0.12s; }
.zip-go:hover { filter: brightness(1.15); }
#reps-out { margin-top: 2em; display: none; }
#reps-out.on { display: block; }
.rep-card { background: var(--black-2); border: 1px solid var(--border); border-left: 5px solid var(--red); padding: 1.4em 1.6em; margin-bottom: 1em; }
.rep-card.d { border-left-color: var(--blue); }
.rep-name { font-family: 'Anton', impact, sans-serif; font-size: 1.6em; color: #fff; line-height: 1.1; }
.rep-meta { font-size: 0.78em; color: var(--cream-dim); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 0.4em; margin-bottom: 0.9em; }
.rep-r { color: var(--red); font-weight: 700; }
.rep-d { color: var(--blue); font-weight: 700; }
.rep-links a { font-size: 0.8em; color: var(--cream-dim); margin-right: 1.2em; }
.rep-links a:hover { color: var(--cream); }

/* ELECTIONS */
.election-list { margin-top: 2.5em; }
.election-row { display: flex; gap: 2.5em; align-items: flex-start; padding: 2em 0; border-bottom: 1px solid var(--border); }
.election-date-block { min-width: 80px; text-align: center; flex-shrink: 0; }
.e-month { font-family: 'Anton', impact, sans-serif; font-size: 1.1em; color: var(--red); letter-spacing: 0.05em; }
.e-day { font-family: 'Anton', impact, sans-serif; font-size: 2.8em; color: #fff; line-height: 1; }
.e-year { font-size: 0.7em; color: var(--cream-dim); letter-spacing: 0.08em; display: block; margin-top: 0.1em; }
.election-title { font-size: 1.05em; font-weight: 700; color: #fff; margin-bottom: 0.4em; }
.election-desc { font-size: 0.88em; color: var(--cream-dim); line-height: 1.6; }
.e-tags { margin-top: 0.8em; display: flex; gap: 0.5em; flex-wrap: wrap; }
.e-tag { font-size: 0.68em; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.25em 0.7em; }
.tag-fed { background: var(--red); color: #fff; }
.tag-state { background: var(--navy); color: #fff; }
.tag-local { background: var(--black-3); color: var(--cream-dim); border: 1px solid var(--border-hard); }

/* HOW TO VOTE */
.steps { margin-top: 2.5em; }
.step { display: flex; gap: 2em; align-items: flex-start; padding: 2.2em 0; border-bottom: 1px solid var(--border); }
.step-n { font-family: 'Anton', impact, sans-serif; font-size: 4.5em; color: var(--red); line-height: 1; min-width: 72px; flex-shrink: 0; }
.step-title { font-size: 1.1em; font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.5em; }
.step-body { font-size: 0.9em; color: var(--cream-dim); line-height: 1.7; }

/* FAQ */
.faq-list { margin-top: 2.5em; max-width: 820px; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-btn { width: 100%; text-align: left; background: none; border: none; color: var(--cream); font-family: 'IBM Plex Sans', sans-serif; font-size: 1em; font-weight: 700; padding: 1.4em 0; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1em; line-height: 1.4; }
.faq-btn:hover { color: #fff; }
.faq-icon { color: var(--red); font-size: 1.3em; font-weight: 400; flex-shrink: 0; transition: transform 0.2s; }
.faq-item.open .faq-icon { transform: rotate(45deg); }
.faq-body { max-height: 0; overflow: hidden; transition: max-height 0.28s ease; font-size: 0.92em; color: var(--cream-dim); line-height: 1.75; }
.faq-item.open .faq-body { max-height: 400px; padding-bottom: 1.5em; }

/* MODAL */
.modal { position: fixed; inset: 0; z-index: 500; display: flex; align-items: center; justify-content: center; padding: 1.5em; opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0.2s; }
.modal.open { opacity: 1; visibility: visible; }
.modal-bd { position: absolute; inset: 0; background: rgba(0,0,0,0.88); backdrop-filter: blur(10px); }
.modal-box { position: relative; z-index: 1; background: var(--black-2); border: 1px solid var(--border-hard); border-top: 4px solid var(--red); max-width: 580px; width: 100%; max-height: 90vh; overflow-y: auto; padding: 2.5em; }
.modal-x { position: absolute; top: 1em; right: 1em; background: none; border: none; color: var(--cream-dim); font-size: 1.6em; cursor: pointer; line-height: 1; }
.modal-x:hover { color: #fff; }
.sticker-img { width: 100%; max-width: 380px; display: block; margin: 1.5em auto; }
.share-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7em; margin-top: 1.5em; }
.shr { display: block; padding: 0.9em; text-align: center; font-family: 'IBM Plex Sans', sans-serif; font-weight: 700; font-size: 0.8em; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; cursor: pointer; border: none; transition: filter 0.12s; }
.shr:hover { filter: brightness(1.1); }
.shr-fb { background: #3B5998; color: #fff; }
.shr-x  { background: #111; color: #fff; border: 1px solid #333; }
.shr-dl { background: var(--navy); color: #fff; }
.shr-cp { background: var(--black-3); color: var(--cream); border: 1px solid var(--border-hard); }

/* TWEAKS PANEL */
#tweaks-panel { position: fixed; bottom: 1.5em; right: 1.5em; width: 300px; background: #111; border: 1px solid rgba(240,235,224,0.18); border-top: 3px solid #CC1F35; z-index: 9999; font-family: 'IBM Plex Sans', sans-serif; font-size: 0.82em; color: #F0EBE0; box-shadow: 0 20px 60px rgba(0,0,0,0.7); display: none; }
#tweaks-panel.tp-visible { display: block; }
.tp-header { display: flex; justify-content: space-between; align-items: center; padding: 0.9em 1em; border-bottom: 1px solid rgba(240,235,224,0.1); }
.tp-title { font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.85em; }
.tp-close { background: none; border: none; color: #A89F94; font-size: 1.3em; cursor: pointer; line-height: 1; }
.tp-close:hover { color: #F0EBE0; }
.tp-body { padding: 1em; }
.tp-section-label { font-size: 0.68em; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #CC1F35; margin-bottom: 0.7em; margin-top: 1em; display: block; }
.tp-section-label:first-child { margin-top: 0; }
.tp-presets { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5em; }
.tp-preset-btn { background: #1A1A1A; border: 1px solid rgba(240,235,224,0.12); color: #A89F94; padding: 0.55em 0.6em; font-family: 'IBM Plex Sans', sans-serif; font-size: 0.78em; font-weight: 700; letter-spacing: 0.04em; cursor: pointer; text-align: left; line-height: 1.3; transition: background 0.12s, color 0.12s, border-color 0.12s; }
.tp-preset-btn:hover { background: #222; color: #F0EBE0; }
.tp-preset-btn.active { background: #CC1F35; color: #fff; border-color: #CC1F35; }
.tp-sub-options { display: flex; flex-direction: column; gap: 0.4em; }
.tp-sub-btn { background: #1A1A1A; border: 1px solid rgba(240,235,224,0.12); color: #A89F94; padding: 0.55em 0.7em; font-family: 'IBM Plex Sans', sans-serif; font-size: 0.78em; cursor: pointer; text-align: left; line-height: 1.4; transition: background 0.12s, color 0.12s, border-color 0.12s; }
.tp-sub-btn:hover { background: #222; color: #F0EBE0; }
.tp-sub-btn.active { border-color: #CC1F35; color: #F0EBE0; background: rgba(204,31,53,0.12); }

/* RESPONSIVE */
@media (max-width: 700px) {
  .stats-row { grid-template-columns: 1fr 1fr; }
  .stat-cell:nth-child(2) { border-right: none; }
  .stat-cell:nth-child(1), .stat-cell:nth-child(2) { border-bottom: 1px solid var(--border); }
  .election-row { flex-direction: column; gap: 0.8em; }
  .step { flex-direction: column; gap: 0.4em; }
  .sticker-promo { flex-direction: column; }
  .share-grid { grid-template-columns: 1fr; }
  .hero-headline { font-size: 3.5rem; }
}
@media (max-width: 480px) {
  .nav-tabs { margin-left: 0.8em; }
  .hero { padding: 3em 1em 3em; }
  .section { padding: 3em 1em; }
  .stats-row { grid-template-columns: 1fr; }
  .stat-cell { border-right: none !important; border-bottom: 1px solid var(--border); }
}