/* Seller page fixes, loaded after site.css on index.html only.
   The investor page still uses site.css on its own, so nothing here changes it. */

/* ---------- brand fonts: Big Shoulders Display for the wordmark and headlines, DM Sans for text ---------- */
body { font-family: 'DM Sans', system-ui, sans-serif; }

.wm {
  font-family: 'Big Shoulders Display', 'Arial Narrow', sans-serif;
  font-weight: 900;
  letter-spacing: 0.02em;
  transform: none;
}
.logo { width: auto; font-size: 30px; }
.foot .logo { width: auto; font-size: 28px; }

.h1, .h2, .cond-label, .marquee, .payout-amount, .cta-mark {
  font-family: 'Big Shoulders Display', 'Arial Narrow', sans-serif;
  font-weight: 900;
  letter-spacing: 0;
}
.h1 { font-size: 64px; line-height: .95; }
/* the words already have a normal space between them, so the extra gap doubled it */
.h1 .mask { margin-right: 0; }
.h2 { font-size: 48px; line-height: 1; }
.cond-label { font-size: 60px; }
.marquee { font-size: 44px; line-height: 48px; letter-spacing: .01em; }
@media (min-width: 1024px) {
  .h1 { font-size: 96px; }
  .h2 { font-size: 76px; }
}

/* ---------- phones ---------- */
@media (max-width: 767px) {
  .logo { width: auto; font-size: 26px; }

  /* pull the hero up so the Get early access button shows on the first screen */
  .hero { padding-top: 32px; gap: 32px; }
  .hero-copy { gap: 16px; }
  .h1 { font-size: 56px; }
  .lead { font-size: 17px; line-height: 26px; }
  /* email and Instagram side by side in the hero, so the button sits higher on small iPhones */
  .hero .form-row { grid-template-columns: 1fr 1fr; gap: 8px; }
  .hero .label { white-space: nowrap; }
  .hero .field { padding: 12px; }

  /* the card fan is shrunk to about half size on phones, which made the hearts about 22px.
     This widens the tap area to about 45px without changing how the heart looks. */
  .heart::before { content: ''; position: absolute; inset: -22px; border-radius: 9999px; }
}

/* anything the page script hides stays hidden, even blocks site.css sets to flex */
[hidden] { display: none !important; }

/* sign up form states */
.btn[disabled] { opacity: .6; cursor: wait; transform: none; box-shadow: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }