/* Same tokens and page furniture as /fundraising, so the two programs read
   as one family. What is NOT shared: this page runs a real 3-step account
   signup, so it keeps the form styles (steps, strength meter, address
   dropdown, affiliate-link box) the fundraising lead form has no use for. */
:root {
  --blue:#067BFD; --dark:#203B71; --text:#2c3e50; --muted:#6c757d;
  --border:#e2e8f0; --bg:#f8fafc; --navy:#0f1830;
}
* { box-sizing:border-box; }
body { font-family:'Comfortaa',sans-serif; color:var(--text); background:var(--bg); margin:0; }
.navbar { background:#fff; border-bottom:1px solid var(--border); padding:14px 0; }
.navbar .container { display:flex; align-items:center; justify-content:space-between; }
.logo-img { height:32px; width:auto; }
h1,h2,h3 { font-family:'Comfortaa',sans-serif; color:var(--dark); }
.lead-text { font-family:'DM Sans',sans-serif; color:var(--muted); }

/* ── Hero ────────────────────────────────────────────────────────────
   Ian's team photo, KEPT — it is the whole reason this page feels like
   youth sport rather than a generic signup. It moves from a separate strip
   above the hero to being the hero itself, which is how the page picks up
   /fundraising's dark opening without throwing his image away.
   It stays an <img> rather than a CSS background so it can keep
   fetchpriority + intrinsic width/height: it is the LCP element, and a
   background-image would neither preload nor reserve its space.
   The scrim is what makes white text legible over a bright photo; it is
   deliberately heavy at the bottom, where the copy sits. */
/* /fundraising's gradient hero verbatim — this page has no photo. */
.hero { background:radial-gradient(120% 120% at 50% 0%, #1a2a55 0%, var(--navy) 60%); color:#fff; text-align:center; padding:64px 0 72px; }
.hero .eyebrow { font-family:'DM Sans',sans-serif; font-weight:600; letter-spacing:.16em; text-transform:uppercase; font-size:.8rem; color:#8bb6ff; margin-bottom:1rem; }
.hero h1 { color:#fff; font-weight:700; font-size:clamp(2rem,5.5vw,3.2rem); line-height:1.1; margin-bottom:1rem; }
.hero .tagline { font-family:'DM Sans',sans-serif; font-weight:600; font-size:clamp(1.1rem,2.6vw,1.5rem); color:#7ee0c8; margin-bottom:1.25rem; }
.hero p { font-family:'DM Sans',sans-serif; color:#e2e8f0; font-size:1.08rem; max-width:560px; margin:0 auto 2rem; }
.nasdaq { display:inline-flex; align-items:center; gap:.5rem; font-family:'DM Sans',sans-serif; font-size:.8rem; color:#c3d2ea; border:1px solid rgba(255,255,255,.28); border-radius:999px; padding:.3rem .85rem; margin-top:1.75rem; }
.nasdaq strong { color:#fff; letter-spacing:.04em; }

/* Hero CTA only. Kept separate from .btn-primary-pp because the form
   buttons below are full-width and this one must hug its label. */
.btn-hero { background:var(--blue); color:#fff; border:none; border-radius:10px; padding:.85rem 1.75rem;
  font-family:'DM Sans',sans-serif; font-weight:600; font-size:1.02rem; display:inline-block; text-decoration:none; transition:background .2s, transform .1s; }
.btn-hero:hover { background:#0569d6; color:#fff; }
.btn-hero:active { transform:scale(.98); }

/* ── Sections ── */
.section { padding:64px 0; }
.section h2 { font-weight:700; font-size:clamp(1.6rem,3.6vw,2.2rem); margin-bottom:.75rem; }
.section .sub { font-family:'DM Sans',sans-serif; font-size:1.05rem; color:var(--muted); max-width:620px; }
.section--tint { background:#fff; }

.feat { display:flex; gap:1rem; align-items:flex-start; margin-bottom:1.4rem; }
.feat .ic { flex:0 0 44px; width:44px; height:44px; border-radius:12px; background:#eff6ff; color:var(--blue); display:flex; align-items:center; justify-content:center; font-size:1.1rem; }
.feat h3 { font-size:1.05rem; font-weight:700; margin:0 0 .2rem; }
.feat p { font-family:'DM Sans',sans-serif; color:var(--muted); font-size:.95rem; margin:0; }

.hero-devices { width:100%; max-width:480px; height:auto; filter:drop-shadow(0 18px 40px rgba(15,24,48,.18)); }

.why-card { background:#fff; border:1px solid var(--border); border-radius:16px; padding:1.6rem 1.4rem; height:100%; box-shadow:0 4px 24px rgba(32,59,113,.05); }
.why-card .ic { width:48px; height:48px; border-radius:14px; background:linear-gradient(135deg,#067BFD,#3aa0ff); color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.25rem; margin-bottom:1rem; }
.why-card h3 { font-size:1.08rem; font-weight:700; margin-bottom:.4rem; }
.why-card p { font-family:'DM Sans',sans-serif; color:var(--muted); font-size:.95rem; margin:0; }

/* ── Signup section + the account form (unchanged behaviour) ── */
.signup { background:radial-gradient(120% 120% at 50% 0%, #1a2a55 0%, var(--navy) 70%); color:#fff; }
.form-card {
  background:#fff; border-radius:18px; box-shadow:0 18px 60px rgba(0,0,0,.28);
  padding:2.4rem 2rem; max-width:520px; margin:2rem auto 0; color:var(--text); text-align:left;
}

.steps { display:flex; gap:8px; justify-content:center; margin-bottom:2rem; }
.step-dot {
  width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:.75rem; font-weight:700; font-family:'DM Sans',sans-serif;
  background:var(--border); color:var(--muted); transition:all .3s;
}
.step-dot.active { background:var(--blue); color:#fff; }
.step-dot.done   { background:#10b981; color:#fff; }
.step-line { flex:1; height:2px; background:var(--border); align-self:center; max-width:40px; }

.form-label { font-family:'DM Sans',sans-serif; font-weight:600; font-size:.875rem; color:var(--dark); }
.form-control {
  border:1.5px solid var(--border); border-radius:10px;
  font-family:'DM Sans',sans-serif; font-size:.95rem; padding:.65rem .9rem;
  transition:border-color .2s;
}
.form-control:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(6,123,253,.1); }

/* Full width on purpose — these are the in-card step buttons. */
.btn-primary-pp {
  background:var(--blue); color:#fff; border:none; border-radius:10px;
  padding:.75rem 1.5rem; font-family:'DM Sans',sans-serif; font-weight:600;
  font-size:1rem; width:100%; cursor:pointer; transition:background .2s, transform .1s;
}
.btn-primary-pp:hover  { background:#0569d6; color:#fff; }
.btn-primary-pp:active { transform:scale(.98); }
.btn-primary-pp:disabled { opacity:.6; cursor:not-allowed; transform:none; }

.btn-outline-pp {
  background:transparent; color:var(--blue); border:1.5px solid var(--blue);
  border-radius:10px; padding:.65rem 1.5rem; font-family:'DM Sans',sans-serif;
  font-weight:600; font-size:.9rem; cursor:pointer; width:100%; transition:all .2s;
  text-decoration:none; display:inline-block; text-align:center;
}
.btn-outline-pp:hover { background:var(--blue); color:#fff; }

.alert-pp { border-radius:10px; padding:.85rem 1rem; font-family:'DM Sans',sans-serif; font-size:.9rem; display:none; }
.alert-pp.show  { display:block; }
.alert-pp.error { background:#fef2f2; border:1px solid #fecaca; color:#dc2626; }
.alert-pp.info  { background:#eff6ff; border:1px solid #bfdbfe; color:#1d4ed8; }

.pw-strength { height:4px; border-radius:2px; margin-top:6px; background:var(--border); transition:all .3s; }
.pw-strength.weak   { background:#ef4444; width:33%; }
.pw-strength.medium { background:#f59e0b; width:66%; }
.pw-strength.strong { background:#10b981; width:100%; }

.link-box {
  background:linear-gradient(135deg, #eff6ff 0%, #f0f9ff 100%);
  border:1.5px solid #bfdbfe; border-radius:12px; padding:1.25rem; text-align:center;
}
.link-box .label { font-family:'DM Sans',sans-serif; font-size:.8rem; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; margin-bottom:.5rem; }
.link-box .url   { font-family:'DM Sans',sans-serif; font-weight:600; color:var(--blue); font-size:.95rem; word-break:break-all; }
.btn-copy {
  background:var(--blue); color:#fff; border:none; border-radius:8px;
  padding:.4rem .9rem; font-size:.8rem; font-family:'DM Sans',sans-serif;
  cursor:pointer; margin-top:.75rem; transition:background .2s;
}
.btn-copy:hover { background:#0569d6; }

.spinner { display:inline-block; width:16px; height:16px; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite; margin-right:6px; vertical-align:middle; }
@keyframes spin { to { transform:rotate(360deg); } }

#signupAddressDropdown {
  display:none; position:absolute; top:100%; left:0; right:0; z-index:9999;
  background:#fff; border:1.5px solid rgba(6,123,253,.25); border-top:none;
  border-radius:0 0 10px 10px; box-shadow:0 8px 24px rgba(0,0,0,.1);
  list-style:none; margin:0; padding:.25rem 0; max-height:220px; overflow-y:auto;
}
#signupAddressDropdown li {
  display:flex; align-items:center; gap:.6rem;
  padding:.55rem .9rem; cursor:pointer;
  font-family:'DM Sans',sans-serif; font-size:.875rem;
  border-bottom:1px solid #f1f5f9; color:var(--text);
}
#signupAddressDropdown li:last-child { border-bottom:none; }
#signupAddressDropdown li:hover, #signupAddressDropdown li.pac-active { background:#eff6ff; }
#signupAddressDropdown .pac-icon { color:var(--blue); font-size:.8rem; flex-shrink:0; }
#signupAddressDropdown .pac-secondary { color:var(--muted); font-size:.8rem; }

.footer { background:var(--navy); color:#9fb3d8; text-align:center; padding:32px 16px; font-family:'DM Sans',sans-serif; font-size:.82rem; }
.footer img { height:26px; margin-bottom:.75rem; opacity:.95; }
.footer a { color:#c7d2e8; text-decoration:none; }

@media (max-width:576px) {
  .hero { padding:64px 0 56px; }
  .form-card { margin:2rem 12px 0; padding:2rem 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  .btn-hero, .btn-primary-pp { transition:none; }
  .btn-hero:active, .btn-primary-pp:active { transform:none; }
}

/* ── Video block ────────────────────────────────────────────────
   Both clips are 9:16 Shorts. The homepage shows them as tilted,
   overlapping cards; this page is built from neat aligned cards, so
   they are a plain two-up grid here instead. */
.vid-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; max-width:560px; margin:0 auto; }
.vid-card { position:relative; display:block; padding:0; border:0; background:none; cursor:pointer;
            border-radius:16px; overflow:hidden; aspect-ratio:9/16;
            box-shadow:0 10px 30px rgba(15,24,48,.14);
            transition:transform .25s ease, box-shadow .25s ease; }
.vid-card img { width:100%; height:100%; object-fit:cover; display:block; }
.vid-card:hover, .vid-card:focus-visible { transform:translateY(-4px); box-shadow:0 16px 40px rgba(15,24,48,.22); }
.vid-card:focus-visible { outline:3px solid var(--blue); outline-offset:3px; }
.vid-play { position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; }
.vid-play i { width:54px; height:54px; border-radius:50%; background:rgba(255,255,255,.94); color:var(--blue);
              display:grid; place-items:center; font-size:1.05rem; padding-left:4px;
              box-shadow:0 4px 14px rgba(0,0,0,.28); transition:transform .25s ease; }
.vid-card:hover .vid-play i { transform:scale(1.1); }
.yt-link { color:var(--dark); font-family:'DM Sans',sans-serif; font-weight:700; text-decoration:none; transition:color .25s ease; }
.yt-link:hover { color:var(--blue); }
@media (max-width:420px){ .vid-grid{gap:12px} .vid-play i{width:44px;height:44px;font-size:.9rem} }
@media (prefers-reduced-motion:reduce){ .vid-card,.vid-play i{transition:none} .vid-card:hover{transform:none} .vid-card:hover .vid-play i{transform:none} }

/* ── Additions for the affiliate-link page (/go/<link>) ─────────────────
   Everything above is the /brands page verbatim. Below is only what this
   page has that /brands does not: the invited-by ribbon and the app row. */

/* Who sent you. A lockup, not a line of copy: initials in a brand-gradient
   circle, a quiet uppercase label, and the name carrying the weight. It sits in
   the same hairline-on-translucent treatment as the Nasdaq pill further down,
   so it reads as part of this page rather than bolted to it.
   ⚠ The gap under it is larger than the gap inside it, which is what stops
   this and the headline reading as one crowded block. */
.hero .invite { display:inline-flex; align-items:center; gap:.8rem; text-align:left;
  margin:0 0 1.9rem; padding:.5rem 1.25rem .5rem .5rem; border-radius:999px;
  border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.07); }
.hero .invite-avatar { position:relative; flex:0 0 44px; width:44px; height:44px;
  border-radius:50%; overflow:hidden; display:grid; place-items:center;
  background:linear-gradient(135deg,#067BFD,#E94DFF);
  font-family:'DM Sans',sans-serif; font-weight:700; font-size:.95rem; color:#fff;
  letter-spacing:.03em; }
/* Layered OVER the initials, never instead of them: a photo that fails to load
   paints nothing and the initials are already there underneath. The gradient
   doubles as the placeholder while it loads. */
.hero .invite-photo { position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block; }
.hero .invite-who { display:block; }
.hero .invite-label { display:block; font-family:'DM Sans',sans-serif; font-weight:600;
  font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:#8bb6ff;
  margin-bottom:.1rem; }
.hero .invite-name { display:block; font-family:'Comfortaa',sans-serif; font-weight:700;
  font-size:clamp(1.05rem,2.4vw,1.3rem); line-height:1.2; color:#fff; }
@media (max-width:420px) {
  .hero .invite { gap:.65rem; padding-right:1rem; }
  .hero .invite-avatar { flex-basis:38px; width:38px; height:38px; font-size:.85rem; }
}

/* App download row. Real store badges (the white ones, because this section is
   dark), both pointing at the SAME href on purpose: it is the affiliate's own
   link, which logs the click and hands off to the AppsFlyer OneLink, and the
   OneLink is what decides App Store vs Play and carries the credit. */
.store-row { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.app-dl { display:inline-block; transition:transform .15s ease, opacity .2s ease; }
.app-dl:hover { transform:translateY(-2px); opacity:.88; }
.store-badge { height:46px; width:auto; display:block; }
.section--app { background:radial-gradient(120% 120% at 50% 100%, #1a2a55 0%, var(--navy) 65%); color:#fff; }
.section--app h2 { color:#fff; }
.section--app .lead-text { color:#c7d2e8; }

/* The referral field on this page is not an input the visitor fills in — the
   link they followed already answered it. Shown, locked, and explained. */
.ref-locked { background:#f0f7ff !important; color:var(--dark) !important; font-weight:600; cursor:default; }

@media (prefers-reduced-motion: reduce) { .app-dl:hover { transform:none; } }