/* co.css — COMISSIONS corrections & polish
   Layered over inline styles in index.html.
   Keep fixes here, not in the monolithic style block. */

/* ── HERO: structural layout fix ────────────────────────────
   .hero-stats is position:absolute, so justify-content:center
   on #hero has no knowledge of it — .hero-content centers in
   the full hero and overlaps the stats at any height where the
   content stack is tall relative to the viewport.

   Fix: pull .hero-stats into the flex flow.
   • #hero switches to flex-start so it no longer tries to
     center the whole stack.
   • .hero-content gets flex:1 so it fills all space above the
     stats and centers its children within that space — same
     visual result as before but with guaranteed clearance.
   • .hero-stats becomes position:static and sits naturally at
     the bottom of the flex column, matching the mobile
     override that already makes it static at ≤768px.           */
#hero {
  justify-content: flex-start;
  padding-top: 72px; /* clear the fixed nav */
}

.hero-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding-bottom: 50px;
}

.hero-stats {
  position: static;
  bottom: auto;
  flex-shrink: 0;
  width: 100%;
  padding-bottom: 48px;
}

/* ── HERO: scroll indicator — now relative to static stats ──
   Was absolute; bottom:28px which sat inside the stats
   footprint. Now that stats are in-flow it can stay absolute
   but referenced from the hero bottom naturally.             */
.scroll-indicator {
  bottom: 12px;
}

/* ── BUTTONS: primary / ghost height parity ──────────────────
   .btn-primary: padding 14px 32px
   .btn-ghost:   padding 13px 32px ← 1px short, shifts baseline
   Matching padding aligns both on the same cap height.        */
.btn-ghost {
  padding-top: 14px;
  padding-bottom: 14px;
}

/* ── MOBILE: already static — just clear the nav padding ─────
   Mobile override already has .hero-stats { position:static }
   and sets its own padding, so we only need to reset the
   padding-top we added above.                                 */
@media (max-width: 768px) {
  #hero {
    padding-top: 0;
  }
  .hero-content {
    flex: none;
  }
}

/* ── POST-SUBMIT SUCCESS CARD ─────────────────────────────── */
#form-success {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.success-confirm {
  font-size: 0.9rem;
  color: var(--cyan);
  letter-spacing: 0.04em;
  text-align: center;
  line-height: 1.5;
}
.success-share {
  display: flex;
  gap: 12px;
}
.success-btn {
  background: transparent;
  border: 1px solid rgba(99,102,241,0.35);
  color: rgba(240,240,255,0.7);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 8px 18px;
  border-radius: 100px;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.success-btn:hover {
  border-color: rgba(99,102,241,0.7);
  color: rgba(240,240,255,1);
}