/* ==========================================================================
   home-polish.css — homepage visual pass (2026-09-28)
   Loaded after the inline styles in index.html, so it only refines them.
   Goals: a hero that says what the campaign is in one glance, clear section
   rhythm down the page, and the five requests presented as the centrepiece.
   ========================================================================== */

/* Full-bleed section backgrounds must never create a sideways scrollbar.
   `clip` rather than `hidden`, which would break the sticky bars. */
html, body { overflow-x: clip; }

/* ---------- hero ---------- */
.hero .frontpage-intro {
  display: block;
  max-width: 560px;
  margin: 22px 0 0;
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.6;
  color: #c4ccd9;
}
.hero .frontpage-intro b { color: #fff; font-weight: 700; }

.hero .frontpage-dispatch {
  max-width: 560px;
  margin-top: 26px;
  border-radius: 0 10px 10px 0;
  background: linear-gradient(90deg, rgba(255,65,72,.10), rgba(255,65,72,.02) 60%, transparent);
}

.hero .cta-row { margin-top: 30px; }
.hero .cta-row .btn-primary {
  box-shadow: 0 10px 34px rgba(255,65,72,.32), inset 0 1px 0 rgba(255,255,255,.22);
}
.hero .cta-row .btn { transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease; }
.hero .cta-row .btn:hover { transform: translateY(-2px); }

.ticker-label {
  margin-top: 30px;
  font: 700 10px 'JetBrains Mono', monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #7f8999;
}
.hero .ticker {
  margin-top: 10px;
  gap: 8px;
  flex-wrap: wrap;
}
.hero .ticker span {
  padding: 7px 12px;
  border: 1px solid rgba(255,65,72,.28);
  border-radius: 999px;
  background: rgba(255,65,72,.06);
  color: #e8ebf1;
  font-size: 10px;
  letter-spacing: .1em;
}
.hero .ticker span::after { display: none !important; }
.hero .ticker span::before {
  content: '';
  width: 9px; height: 9px; margin-right: 8px;
  background:
    linear-gradient(45deg, transparent 42%, #ff4148 42%, #ff4148 58%, transparent 58%),
    linear-gradient(-45deg, transparent 42%, #ff4148 42%, #ff4148 58%, transparent 58%);
}

/* The pledge counter becomes a proper plate under the hero. */
.hero .stats-row {
  margin-top: 44px;
  padding: 20px 26px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  align-items: center;
}
.hero .stats-row .stat-num { font-size: clamp(34px, 3.4vw, 52px); line-height: 1; }

/* ---------- section index bar ---------- */
.home-console { border-radius: 12px; overflow: hidden; margin-top: 8px; }
.console-tab { font-size: 11px; }
.console-tab.is-active { background: linear-gradient(180deg, rgba(255,65,72,.12), rgba(255,65,72,.03)); }

/* ---------- section rhythm ---------- */
#top > section:not(.hero) {
  position: relative;
  padding: clamp(64px, 8vw, 112px) 0;
  border-top: 0;
}
/* A short red rule instead of a full-width hairline between sections. */
#top > section:not(.hero)::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 72px; height: 3px;
  background: linear-gradient(90deg, #ff4148, rgba(255,65,72,0));
  border-radius: 2px;
}
#top > section#status { padding: 40px 0 56px; }
#top > section#status::before { display: none; }

.section-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  letter-spacing: .22em;
}
.section-tag::before {
  content: '';
  width: 7px; height: 7px;
  background: #ff4148;
  box-shadow: 0 0 12px rgba(255,65,72,.8);
  transform: rotate(45deg);
}
h2.section-title {
  font-size: clamp(32px, 4.2vw, 58px);
  line-height: 1.02;
  letter-spacing: -.025em;
  max-width: 18ch;
  text-wrap: balance;
}
.section-sub {
  max-width: 660px;
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.65;
}

/* ---------- status strip ---------- */
#status .status-message { display: none; }
#status .section-tag, #status h2.section-title { display: none; }
#status .cc-status {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01));
  overflow: hidden;
}
#status .cc-status-item {
  padding: 20px 22px;
  border-right: 1px solid rgba(255,255,255,.06);
}
#status .cc-status-item:last-child { border-right: 0; }
#status .status-cta { margin-top: 22px; }
@media (max-width: 760px) {
  #status .cc-status { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #status .cc-status-item:nth-child(2n) { border-right: 0; }
  #status .cc-status-item:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.06); }
}

/* ---------- why: four reasons ---------- */
#why .cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 44px;
}
@media (max-width: 760px) { #why .cards { grid-template-columns: 1fr; } }
#why .card {
  padding: 30px 28px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(255,65,72,.10), transparent 46%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.012));
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
#why .card:hover {
  transform: translateY(-4px);
  border-color: rgba(255,65,72,.42);
  box-shadow: 0 22px 50px rgba(0,0,0,.45), 0 0 0 1px rgba(255,65,72,.12);
}
#why .card .icon {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 12px;
  border: 1px solid rgba(255,65,72,.35);
  background: rgba(255,65,72,.10);
  color: #ff5a60;
  margin-bottom: 18px;
}
#why .card h3 { font-size: 20px; letter-spacing: -.01em; }
#why .card p { margin-top: 10px; color: #aeb7c6; line-height: 1.65; font-size: 15px; }

/* ---------- five requests: the centrepiece ---------- */
#demands .cc-panel {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
#demands .cc-demands {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  counter-reset: req;
}
#demands .cc-demand {
  counter-increment: req;
  position: relative;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  column-gap: 8px;
  align-items: center;
  padding: 24px 28px 24px 0;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  background: linear-gradient(90deg, rgba(255,65,72,.09), rgba(255,255,255,.02) 34%, rgba(255,255,255,.012));
  transition: transform .2s ease, border-color .2s ease;
}
#demands .cc-demand:hover { transform: translateX(6px); border-color: rgba(255,65,72,.4); }
#demands .cc-demand::before {
  content: counter(req, decimal-leading-zero);
  grid-row: 1 / span 2;
  text-align: center;
  font: 900 44px/1 'Archivo Black', 'Archivo', system-ui, sans-serif;
  letter-spacing: -.04em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255,65,72,.85);
}
#demands .cc-demand h4 {
  margin: 0;
  font-size: clamp(17px, 1.5vw, 21px);
  letter-spacing: -.01em;
  color: #fff;
}
#demands .cc-demand p { margin: 6px 0 0; color: #aeb7c6; line-height: 1.6; font-size: 15px; grid-column: 2; }
@media (max-width: 640px) {
  #demands .cc-demand { grid-template-columns: 64px minmax(0, 1fr); padding-right: 18px; }
  #demands .cc-demand::before { font-size: 32px; }
}

/* ---------- how it works ---------- */
#how .step {
  padding: 22px 24px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01));
}
#how .step + .step { margin-top: 14px; }
#how .step-num {
  display: grid; place-items: center;
  width: 46px; height: 46px; flex: 0 0 46px;
  border-radius: 50%;
  background: linear-gradient(180deg, #ff4d54, #c2161d);
  box-shadow: 0 8px 22px rgba(255,65,72,.35);
  color: #fff;
  font-weight: 900;
}
#how .how-visual img { border-radius: 16px; }

/* ---------- pledge: make the form the obvious next step ---------- */
#join {
  isolation: isolate;
}
#join::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0 calc(50% - 50vw);
  background:
    radial-gradient(60% 70% at 50% 0%, rgba(255,65,72,.13), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.02), transparent);
  pointer-events: none;
}

/* ---------- faq ---------- */
#faq details {
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  background: rgba(255,255,255,.025);
  padding: 4px 22px;
  transition: border-color .2s ease, background-color .2s ease;
}
#faq details + details { margin-top: 10px; }
#faq details[open] { border-color: rgba(255,65,72,.38); background: rgba(255,65,72,.045); }
#faq summary { padding: 16px 0; font-weight: 700; font-size: 17px; cursor: pointer; }
#faq details p { padding: 0 0 18px; color: #b3bccb; line-height: 1.7; }

/* ---------- closing statement ---------- */
.manifesto-bar {
  background:
    radial-gradient(80% 120% at 50% 100%, rgba(255,65,72,.16), transparent 70%),
    linear-gradient(180deg, #0a0c12, #0d0608);
}

/* Off-screen sections reveal with a short rise; never leave them invisible
   for anyone who prefers reduced motion. */
@media (prefers-reduced-motion: reduce) {
  #why .card, #demands .cc-demand, .hero .cta-row .btn { transition: none; }
}

/* ---------- fixes ---------- */
/* Steps read top to bottom beside the artwork, not as three thin columns. */
#how .steps { grid-template-columns: 1fr; gap: 0; }
#how .step h3 { font-size: 19px; }
#how .step p { margin-top: 6px; color: #aeb7c6; line-height: 1.6; font-size: 15px; }
#how .how-grid { align-items: center; }

/* With reduced motion the power symbol in the wordmark stayed clipped away,
   leaving "BLACK UT". Show it, lit and still. */
@media (prefers-reduced-motion: reduce) {
  .wordmark .power-o svg { clip-path: none !important; }
}