/* Homepage email signup (preview, Oct 20). Sits below the title screen; the pane scrolls like Pricing.
   Colours = the Pricing/Overview lettering values (pricing.js --sbFill / --phFill / shadows, precomputed). */
@font-face { font-family: 'MPSRounded'; src: url('assets/fonts/Nunito-VariableFont_wght.ttf') format('truetype'); font-weight: 200 1000; font-display: block; }
html { --rounded: ui-rounded, 'SF Pro Rounded', 'MPSRounded', system-ui, sans-serif; --suPurple: #6629C7; }
html.light { --suHead: rgb(91,35,178); --suHeadShadow: -1.5px 1.5px 0 rgba(255,255,255,0.98), -1px 1px 2px rgba(255,255,255,0.55), 1.5px -1.5px 0 rgba(64,23,130,0.65);
  --suText: rgb(41,12,87); --suTextShadow: 0 1px 0 rgba(255,255,255,0.75), 0 0 6px rgba(255,255,255,0.45);
  --suField: rgba(255,255,255,0.55); --suFieldRim: rgba(102,41,199,0.35); --suPh: rgba(41,12,87,0.55); --suFocus: #6629C7; }
html.dark { --suHead: rgb(178,163,235); --suHeadShadow: -1.5px 1.5px 0 rgba(255,255,255,0.45), -1px 1px 2px rgba(255,255,255,0.18), 1.5px -1.5px 0 rgba(23,5,54,0.9), 0 1px 4px rgba(102,41,199,0.35);
  --suText: rgb(220,215,247); --suTextShadow: 0 1px 3px rgba(12,2,33,0.75);
  --suField: rgba(255,255,255,0.10); --suFieldRim: rgba(255,255,255,0.24); --suPh: rgba(220,215,247,0.6); --suFocus: rgb(178,163,235); }

/* the scroller fills the pane, so the pane's squircle clip-path cuts anything scrolled past its edge */
#homeScroll { position: absolute; inset: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.35) transparent; }
#heroSpace { height: 100%; }
html:not(.started) #signup { visibility: hidden; }
/* bottom padding (--suBottom) keeps the section clear of the pinned badge / social row; set by signup.js */
#signup { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
  width: min(420px, 100% - 48px); margin: 0 auto; padding: 12px 0 var(--suBottom, 112px); }
.suHead { font-family: 'RammettoOne', sans-serif; font-weight: normal; font-size: 20px; line-height: 1.2; letter-spacing: 0.02em;
  text-transform: uppercase; color: var(--suHead); text-shadow: var(--suHeadShadow); }
.suText, .suStatus { font-family: var(--rounded); font-weight: 600; font-size: 16px; line-height: 1.42; color: var(--suText); text-shadow: var(--suTextShadow); }
.suText { margin-top: 8px; text-wrap: balance; }
#signupForm { width: 100%; margin-top: 16px; }
.suRow { display: flex; gap: 8px; width: 100%; }
#suEmail, #suBtn { height: 46px; border-radius: 23px; font-family: var(--rounded); font-size: 16px; }
#suEmail { flex: 1 1 auto; min-width: 0; padding: 0 18px; font-weight: 600; color: var(--suText); background: var(--suField);
  border: 1px solid var(--suFieldRim); outline: none; -webkit-appearance: none; appearance: none; }
#suEmail::placeholder { color: var(--suPh); opacity: 1; }
#suBtn { flex: none; padding: 0 22px; border: 0; font-weight: 800; color: #fff; background: var(--suPurple); cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.22); }
#suBtn:hover { filter: brightness(1.08); }
#suBtn:disabled { opacity: 0.7; cursor: default; filter: none; }
#suEmail:focus-visible, #suBtn:focus-visible { outline: 2px solid var(--suFocus); outline-offset: 2px; }
.suStatus { min-height: 1.42em; margin-top: 10px; font-size: 15px; }
.suSr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Mailchimp honeypot: off-screen inside the scroller (overflow hidden + pane clip), so it never paints */
.suTrap { position: absolute; left: -5000px; top: 0; }
@media (max-width: 359px) { .suRow { flex-direction: column; } }