/* ===========================================================================
   CreatorsBay waitlist — landing page ("v5 boarding pass" design).

   Ported verbatim from the approved mock (cb-waitlist-v5.html). The mock kept
   its CSS in an inline <style> and used inline style="" attributes; both are
   blocked by this site's Content-Security-Policy (style-src 'self'), so every
   rule lives here and every inline style became a class. Same output.

   This file styles ONLY index.php. The admin panel keeps styles.css +
   admin.css — do not merge the two, admin.css depends on styles.css tokens.
   =========================================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --purple: #7654E8;
  --purple-2: #B4A1FF;
  --purple-bg: #F1EEFF;
  --ink: #08080A;
  --ink-2: #131316;
  --grey-1: #F4F3EF;
  --grey-2: #E4E2DC;
  --grey-4: #94929B;
  --green: #34D399;
  --amber: #F6B93B;
  --red: #D93A44;
  --red-bg: #FDF0F0;
}

body {
  font-family: 'Syne', sans-serif;
  background: #EDEBE5;
  color: #0A0A0A;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; }

/* The hero CTA and the skip link both jump to #waitlist-form — glide instead of
   teleporting, and stop short of the viewport edge so the card's top corners and
   the "Join the waitlist" heading are visible on arrival. Also applies to the
   form's own action="#waitlist-form" after a bounced submit. */
html { scroll-behavior: smooth; }
#waitlist-form { scroll-margin-top: 22px; }

/* The [hidden] attribute must win over any class that sets a display value —
   without this, `.otp-panel { display: grid }` beats the UA's [hidden] rule and
   the OTP code box shows before a code has even been sent. */
[hidden] { display: none !important; }

/* Keyboard users get a way past the decorative hero. */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  background: var(--purple); color: #fff; padding: 12px 18px;
  border-radius: 0 0 12px 0; font-family: 'Syne'; font-weight: 700; font-size: 13px;
  text-decoration: none;
}
.skip:focus { left: 0; }

:focus-visible { outline: 3px solid var(--purple); outline-offset: 2px; border-radius: 6px; }

/* ══════════════════════════
   HERO
══════════════════════════ */
.hero { background: var(--ink); position: relative; overflow: hidden; padding-bottom: 0; }
.hero-glow-1 { position: absolute; width: 900px; height: 700px; background: radial-gradient(ellipse, rgba(118,84,232,.26) 0%, transparent 65%); top: -260px; left: 50%; transform: translateX(-50%); pointer-events: none; }
.hero-glow-2 { position: absolute; width: 500px; height: 400px; background: radial-gradient(ellipse, rgba(246,185,59,.08) 0%, transparent 70%); top: 100px; right: -100px; pointer-events: none; }
.hero-noise { position: absolute; inset: 0; opacity: .5; background-image: radial-gradient(rgba(255,255,255,.03) 1px, transparent 1px); background-size: 4px 4px; pointer-events: none; }

header { display: flex; align-items: center; justify-content: space-between; padding: 28px 56px; max-width: 1240px; margin: 0 auto; position: relative; z-index: 3; }
.logo { display: flex; align-items: center; text-decoration: none; }
.logo img { height: 22px; width: auto; }
.launch-pill { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 999px; padding: 8px 16px 8px 12px; }
.launch-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--green); box-shadow: 0 0 0 3px rgba(52,211,153,.2); animation: pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:.35;} }
.launch-text { font-family: 'Syne'; font-size: 11.5px; font-weight: 700; color: rgba(255,255,255,.65); text-transform: uppercase; letter-spacing: .06em; }

.hero-stage { position: relative; max-width: 1100px; margin: 0 auto; padding: 10px 40px 0; min-height: 540px; }

/* Rotated stamp sticker — "Early Access" boarding-pass style */
.stamp {
  position: absolute; top: 8px; left: 50%; margin-left: 190px;
  width: 96px; height: 96px; border-radius: 50%;
  border: 2px dashed rgba(246,185,59,.5);
  display: flex; align-items: center; justify-content: center;
  transform: rotate(-14deg);
  animation: spin-slow 18s linear infinite;
  z-index: 2;
}
@keyframes spin-slow { from{ transform: rotate(-14deg);} to{ transform: rotate(346deg);} }
.stamp-inner { text-align: center; }
.stamp-text { font-family: 'Unbounded'; font-weight: 800; font-size: 9px; color: var(--amber); letter-spacing: .06em; line-height: 1.5; }

.hero-text { position: relative; z-index: 2; text-align: center; padding-top: 24px; }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 7px; background: rgba(118,84,232,.14); border: 1px solid rgba(118,84,232,.28); border-radius: 999px; padding: 7px 16px; font-family: 'Syne'; font-size: 11px; font-weight: 700; color: var(--purple-2); text-transform: uppercase; letter-spacing: .07em; margin-bottom: 26px; }
.hero-eyebrow svg { width: 12px; height: 12px; }
.hero-title { font-family: 'Unbounded'; font-weight: 900; font-size: clamp(34px, 5vw, 54px); letter-spacing: -.045em; line-height: 1.06; color: #fff; margin-bottom: 18px; }
.hero-title em { color: var(--purple-2); font-style: normal; }
.hero-desc { font-family: 'Syne'; font-size: 15.5px; font-weight: 500; color: rgba(255,255,255,.4); line-height: 1.7; max-width: 460px; margin: 0 auto 32px; }

/* Hero CTA — the "take me to the form" button. Same Volt pill language as the
   form's own submit, one size down so it leads without competing with it. */
.hero-cta {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--purple); color: #fff; text-decoration: none;
  font-family: 'Unbounded'; font-weight: 700; font-size: 13.5px; letter-spacing: -.01em;
  padding: 15px 26px; border-radius: 999px;
  box-shadow: 0 10px 28px rgba(118,84,232,.42);
  transition: background .15s, transform .15s, box-shadow .15s;
}
.hero-cta:hover { background: #6444D4; transform: translateY(-2px); box-shadow: 0 16px 38px rgba(118,84,232,.55); }
.hero-cta:active { transform: translateY(0); box-shadow: 0 8px 20px rgba(118,84,232,.42); }
.hero-cta-chev { display: flex; }
.hero-cta-chev svg { width: 16px; height: 16px; animation: cta-bob 1.8s ease-in-out infinite; }
@keyframes cta-bob { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }

/* Floating cards */
.float-card { position: absolute; background: var(--ink-2); border: 1px solid rgba(255,255,255,.1); border-radius: 18px; box-shadow: 0 20px 50px rgba(0,0,0,.4); z-index: 1; }
.fc-1 { top: 60px; left: -10px; width: 220px; padding: 14px 16px; transform: rotate(-6deg); animation: float1 6s ease-in-out infinite; }
.fc-1-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.fc-1-ico { width: 30px; height: 30px; border-radius: 9px; background: rgba(52,211,153,.15); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.fc-1-ico svg { width: 15px; height: 15px; color: var(--green); }
.fc-1-title { font-family: 'Syne'; font-weight: 700; font-size: 12px; color: #fff; }
.fc-1-sub { font-family: 'Syne'; font-size: 10.5px; color: rgba(255,255,255,.4); }
.fc-1-amt { font-family: 'Unbounded'; font-weight: 800; font-size: 17px; color: var(--green); letter-spacing: -.03em; }

/* Card 2: Boarding pass ticket style — perforated */
.fc-2 { top: 22px; right: -20px; width: 210px; transform: rotate(6deg); animation: float2 7s ease-in-out infinite; padding: 0; overflow: visible; }
.ticket-top { padding: 13px 14px 11px; }
.ticket-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.ticket-label { font-family: 'Syne'; font-size: 8px; font-weight: 700; color: rgba(255,255,255,.35); text-transform: uppercase; letter-spacing: .08em; }
.ticket-name { font-family: 'Unbounded'; font-weight: 800; font-size: 13px; color: #fff; letter-spacing: -.02em; }
.ticket-anchor { width: 16px; height: 16px; color: rgba(255,255,255,.25); }
.ticket-mini { display: flex; gap: 14px; }
.ticket-mini-item .ticket-label { margin-bottom: 3px; }
.ticket-mini-val { font-family: 'Syne'; font-weight: 700; font-size: 11px; color: var(--purple-2); }
/* perforation */
.ticket-perf { position: relative; height: 1px; border-top: 1.5px dashed rgba(255,255,255,.15); margin: 0 0; }
.ticket-perf::before, .ticket-perf::after { content: ''; position: absolute; top: -7px; width: 14px; height: 14px; border-radius: 50%; background: #08080A; }
.ticket-perf::before { left: -7px; }
.ticket-perf::after { right: -7px; }
.ticket-bottom { padding: 10px 14px 12px; display: flex; align-items: center; justify-content: space-between; }
.ticket-status { display: flex; align-items: center; gap: 5px; }
.ticket-status-dot { width: 5px; height: 5px; border-radius: 999px; background: var(--green); }
.ticket-status-text { font-family: 'Syne'; font-size: 9.5px; font-weight: 700; color: var(--green); text-transform: uppercase; letter-spacing: .05em; }
.ticket-num { font-family: 'Syne'; font-size: 9px; color: rgba(255,255,255,.3); letter-spacing: .05em; }

/* Card 3: chat bubble */
.fc-3 { top: 330px; left: -40px; width: 200px; padding: 14px 16px; transform: rotate(4deg); animation: float3 6.5s ease-in-out infinite; }
.fc-3-row { display: flex; align-items: flex-start; gap: 9px; }
.fc-3-av { width: 26px; height: 26px; border-radius: 8px; background: var(--amber); display: flex; align-items: center; justify-content: center; font-family: 'Unbounded'; font-weight: 700; font-size: 9px; color: #08080A; flex-shrink: 0; }
.fc-3-bubble { background: rgba(255,255,255,.06); border-radius: 10px; padding: 8px 10px; }
.fc-3-text { font-family: 'Syne'; font-size: 10.5px; color: rgba(255,255,255,.7); line-height: 1.4; }

/* Card 4: wallet */
.fc-4 { top: 360px; right: -30px; width: 175px; padding: 14px 16px; transform: rotate(-5deg); animation: float4 5.5s ease-in-out infinite; }
.fc-4-label { font-family: 'Syne'; font-size: 9.5px; font-weight: 700; color: rgba(255,255,255,.35); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; }
.fc-4-amt { font-family: 'Unbounded'; font-weight: 900; font-size: 22px; color: #fff; letter-spacing: -.04em; }
.fc-4-amt span { color: var(--purple-2); font-size: 13px; }
.fc-4-bar { height: 4px; background: rgba(255,255,255,.08); border-radius: 999px; margin-top: 10px; overflow: hidden; }
.fc-4-bar-fill { height: 100%; width: 70%; background: var(--purple); border-radius: 999px; }

@keyframes float1 { 0%,100%{transform:rotate(-6deg) translateY(0);} 50%{transform:rotate(-6deg) translateY(-10px);} }
@keyframes float2 { 0%,100%{transform:rotate(6deg) translateY(0);} 50%{transform:rotate(6deg) translateY(-14px);} }
@keyframes float3 { 0%,100%{transform:rotate(4deg) translateY(0);} 50%{transform:rotate(4deg) translateY(-8px);} }
@keyframes float4 { 0%,100%{transform:rotate(-5deg) translateY(0);} 50%{transform:rotate(-5deg) translateY(-12px);} }

/* Animated paper-plane following a dotted curved route */
.plane-icon {
  position: absolute; width: 22px; height: 22px;
  offset-path: path('M 130 200 C 300 120, 500 340, 760 190');
  offset-rotate: auto;
  animation: fly 8s linear infinite;
  color: var(--purple-2);
  opacity: .8;
}
.plane-icon svg { width: 100%; height: 100%; transform: rotate(45deg); }
@keyframes fly { 0%{ offset-distance: 0%; opacity:0; } 8%{opacity:.8;} 92%{opacity:.8;} 100%{ offset-distance: 100%; opacity:0; } }

.proof-wrap { text-align: center; position: relative; z-index: 2; margin-top: 18px; }
.proof-row { display: inline-flex; align-items: center; gap: 14px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); border-radius: 999px; padding: 8px 20px 8px 12px; margin-top: 8px; }
.proof-row > svg { width: 16px; height: 16px; color: var(--purple-2); flex-shrink: 0; }
.proof-text { font-family: 'Syne'; font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.6); }
.proof-text strong { color: #fff; font-weight: 700; }

/* ── Wave divider at hero bottom ── */
.wave-wrap { position: relative; z-index: 2; margin-top: 40px; line-height: 0; }
.wave-wrap svg { width: 100%; height: 60px; display: block; }

/* ── Live ticker strip ── */
.ticker-strip { background: var(--purple); overflow: hidden; padding: 11px 0; position: relative; z-index: 2; }
.ticker-track { display: flex; gap: 44px; white-space: nowrap; animation: ticker 24s linear infinite; }
@keyframes ticker { 0%{transform:translateX(0);} 100%{transform:translateX(-50%);} }
.tick-item { display: inline-flex; align-items: center; gap: 9px; font-family: 'Syne'; font-size: 12px; font-weight: 700; color: rgba(255,255,255,.75); flex-shrink: 0; }
.tick-item svg { width: 13px; height: 13px; color: rgba(255,255,255,.5); }
.tick-item strong { color: #fff; }
.tick-sep { width: 4px; height: 4px; border-radius: 999px; background: rgba(255,255,255,.3); flex-shrink: 0; align-self: center; }

/* ══════════════════════════
   STATS BAND
══════════════════════════ */
.stats-band-wrap { max-width: 880px; margin: 0 auto; padding: 0 40px; position: relative; z-index: 2; margin-top: -26px; }
.stats-band { background: var(--ink-2); border: 1px solid rgba(255,255,255,.08); border-radius: 22px; display: flex; box-shadow: 0 20px 50px rgba(0,0,0,.35); }
.stat-cell { flex: 1; padding: 22px 16px; text-align: center; }
.stat-cell + .stat-cell { border-left: 1px solid rgba(255,255,255,.07); }
.stat-n { font-family: 'Unbounded'; font-weight: 900; font-size: 22px; color: #fff; letter-spacing: -.04em; line-height: 1; }
.stat-n em { color: var(--purple-2); font-style: normal; }
.stat-ico { width: 20px; height: 20px; color: #fff; display: inline-block; vertical-align: middle; }
.stat-l { font-family: 'Syne'; font-size: 10px; font-weight: 700; color: rgba(255,255,255,.3); text-transform: uppercase; letter-spacing: .07em; margin-top: 5px; }

/* ══════════════════════════
   FORM SECTION
══════════════════════════ */
.form-section { padding: 80px 24px 100px; position: relative; overflow: hidden; }
.form-blob-1 { position: absolute; width: 400px; height: 400px; background: radial-gradient(circle, rgba(118,84,232,.08) 0%, transparent 70%); top: 100px; left: -150px; pointer-events: none; }
.form-blob-2 { position: absolute; width: 350px; height: 350px; background: radial-gradient(circle, rgba(246,185,59,.06) 0%, transparent 70%); bottom: 50px; right: -120px; pointer-events: none; }

.form-shell { max-width: 640px; margin: 0 auto; position: relative; z-index: 1; }

/* Ticket-stub header above form card */
.stub-header { background: var(--ink); border-radius: 22px 22px 0 0; padding: 18px 32px; display: flex; align-items: center; justify-content: space-between; position: relative; }
.stub-left { display: flex; align-items: center; gap: 10px; }
.stub-left svg { width: 16px; height: 16px; color: var(--purple-2); }
.stub-left span { font-family: 'Unbounded'; font-weight: 700; font-size: 10.5px; color: #fff; letter-spacing: .04em; text-transform: uppercase; }
.stub-right { font-family: 'Syne'; font-size: 10.5px; font-weight: 700; color: rgba(255,255,255,.4); letter-spacing: .04em; }

.form-card { background: #fff; border-radius: 0 0 28px 28px; padding: 40px 44px 44px; box-shadow: 0 2px 8px rgba(0,0,0,.04), 0 24px 48px rgba(0,0,0,.07); position: relative; overflow: hidden; }

.form-head { text-align: center; margin-bottom: 8px; position: relative; }
.form-title { font-family: 'Unbounded'; font-weight: 900; font-size: 26px; letter-spacing: -.03em; }
.form-sub { font-family: 'Syne'; font-size: 13.5px; color: var(--grey-4); margin-top: 8px; margin-bottom: 36px; text-align: center; }

.group-label { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; }
.group-label-ico { width: 24px; height: 24px; border-radius: 7px; background: var(--purple-bg); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.group-label-ico svg { width: 12px; height: 12px; color: var(--purple); }
.group-label-text { font-family: 'Syne'; font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--grey-4); white-space: nowrap; }
.group-label-line { flex: 1; height: 1px; background: var(--grey-2); }
.group { margin-bottom: 32px; border: 0; }

.field { margin-bottom: 16px; }
.field:last-child { margin-bottom: 0; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; align-items: start; }
.field-row:last-child { margin-bottom: 0; }
/* One field spanning the row — the phone control needs the width for
   "+91 | number | Verify". */
.field-row-solo { grid-template-columns: 1fr; }
/* The row already carries the 16px rhythm — its cells must not add their own,
   or every paired row grows taller than the mock. */
.field-row > .field { margin-bottom: 0; }
.spaced { margin-top: 16px; }
.field-label { display: block; font-family: 'Syne'; font-weight: 700; font-size: 11.5px; color: #0A0A0A; margin-bottom: 8px; }
.field-label .req { color: var(--purple); margin-left: 2px; }
.field-label .opt { color: var(--grey-4); font-weight: 500; margin-left: 6px; }

.field-input, .field-textarea { width: 100%; background: var(--grey-1); border: 1.5px solid var(--grey-2); border-radius: 13px; padding: 13px 15px; font-family: 'Syne'; font-size: 14px; color: #0A0A0A; outline: none; transition: all .15s; }
.field-input:focus, .field-textarea:focus { border-color: var(--purple); background: #fff; box-shadow: 0 0 0 4px var(--purple-bg); }
.field-input::placeholder, .field-textarea::placeholder { color: #ADABAF; }
.field-textarea { resize: vertical; min-height: 84px; display: block; }

.phone-wrap { display: flex; align-items: stretch; background: var(--grey-1); border: 1.5px solid var(--grey-2); border-radius: 13px; overflow: hidden; transition: all .15s; }
.phone-wrap:focus-within { border-color: var(--purple); background: #fff; box-shadow: 0 0 0 4px var(--purple-bg); }
.phone-prefix { display: flex; align-items: center; font-family: 'Syne'; font-weight: 700; font-size: 14px; color: #0A0A0A; padding: 0 13px; background: var(--grey-2); flex-shrink: 0; }
.phone-input { flex: 1; border: none; background: transparent; padding: 13px 15px; font-family: 'Syne'; font-size: 14px; outline: none; color: #0A0A0A; min-width: 0; }
.phone-input::placeholder { color: #ADABAF; }

.select-wrap { position: relative; }
.select-wrap svg.chev { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--grey-4); pointer-events: none; }
.field-select { appearance: none; -webkit-appearance: none; cursor: pointer; width: 100%; padding-right: 38px; }

.handle-wrap { display: flex; align-items: center; background: var(--grey-1); border: 1.5px solid var(--grey-2); border-radius: 13px; overflow: hidden; transition: all .15s; }
.handle-wrap:focus-within { border-color: var(--purple); background: #fff; box-shadow: 0 0 0 4px var(--purple-bg); }
.handle-at { font-family: 'Syne'; font-weight: 700; font-size: 14px; color: var(--grey-4); padding: 13px 0 13px 15px; }
.handle-input { flex: 1; border: none; background: transparent; padding: 13px 15px 13px 3px; font-family: 'Syne'; font-size: 14px; outline: none; color: #0A0A0A; min-width: 0; }
.handle-input::placeholder { color: #ADABAF; }

/* Platform picker. Real <input type=radio> under the card so it works with the
   keyboard and posts without JS; the mock's onclick handler is gone. */
.radio-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; border: 0; padding: 0; margin: 0; }
.radio-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 8px; border-radius: 14px; background: var(--grey-1); border: 1.5px solid var(--grey-2); cursor: pointer; transition: all .15s; }
.radio-card svg { width: 20px; height: 20px; color: var(--grey-4); transition: color .15s; }
.radio-card-label { font-family: 'Syne'; font-weight: 700; font-size: 12px; color: #5A5A5A; transition: color .15s; }
.radio-real { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.radio-card.selected, .radio-card:has(.radio-real:checked) { background: var(--purple-bg); border-color: var(--purple); }
.radio-card.selected svg, .radio-card:has(.radio-real:checked) svg { color: var(--purple); }
.radio-card.selected .radio-card-label, .radio-card:has(.radio-real:checked) .radio-card-label { color: var(--purple); }
.radio-card:has(.radio-real:focus-visible) { outline: 3px solid var(--purple); outline-offset: 2px; }

.char-count { text-align: right; font-family: 'Syne'; font-size: 11px; color: var(--grey-4); margin-top: 6px; }

.consent-row { display: flex; align-items: flex-start; gap: 12px; background: var(--grey-1); border-radius: 13px; padding: 15px; cursor: pointer; }
.consent-check { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--grey-2); background: #fff; flex-shrink: 0; margin-top: 1px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .15s; }
.consent-check svg { width: 12px; height: 12px; color: #fff; opacity: 0; transition: opacity .1s; }
.consent-real { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.consent-real:checked + .consent-check { background: var(--purple); border-color: var(--purple); }
.consent-real:checked + .consent-check svg { opacity: 1; }
.consent-real:focus-visible + .consent-check { outline: 3px solid var(--purple); outline-offset: 2px; }
.consent-text { font-family: 'Syne'; font-size: 12.5px; color: #5A5A5A; line-height: 1.55; }
.consent-text .req { color: var(--purple); }

.submit-btn { width: 100%; background: var(--purple); color: #fff; border: none; border-radius: 15px; padding: 17px; font-family: 'Unbounded'; font-weight: 700; font-size: 14px; cursor: pointer; letter-spacing: -.01em; display: flex; align-items: center; justify-content: center; gap: 9px; box-shadow: 0 10px 28px rgba(118,84,232,.35); transition: all .15s; margin-top: 28px; }
.submit-btn:hover { background: #6444D4; transform: translateY(-1px); box-shadow: 0 14px 36px rgba(118,84,232,.45); }
.submit-btn:disabled { opacity: .65; cursor: default; transform: none; }
.submit-btn svg { width: 16px; height: 16px; }
.submit-note { text-align: center; font-family: 'Syne'; font-size: 11.5px; color: var(--grey-4); line-height: 1.6; margin-top: 16px; }

.trust-strip { display: flex; align-items: center; justify-content: center; gap: 28px; margin-top: 28px; flex-wrap: wrap; }
.trust-item { display: flex; align-items: center; gap: 7px; }
.trust-item svg { width: 14px; height: 14px; color: var(--purple); }
.trust-item span { font-family: 'Syne'; font-size: 12px; font-weight: 600; color: #6b6970; }

footer { background: var(--ink); padding: 26px 56px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.footer-logo { display: flex; align-items: center; gap: 14px; }
.footer-logo img { height: 20px; width: auto; }
.footer-copy { font-family: 'Syne'; font-size: 12.5px; color: rgba(255,255,255,.3); }
.footer-email { font-family: 'Syne'; font-size: 12.5px; font-weight: 700; color: var(--purple-2); text-decoration: none; }

/* ══════════════════════════
   SERVER-RENDERED STATES
   (not in the static mock: validation errors, the spam honeypot and the
   post-signup screen. Same design language.)
══════════════════════════ */

/* Honeypots — off-screen, never announced, irresistible to bots. */
.hp { position: absolute; left: -9999px; top: 0; width: 1px; height: 1px; overflow: hidden; }

.form-alert {
  display: flex; align-items: flex-start; gap: 9px;
  background: var(--red-bg); border: 1.5px solid rgba(217,58,68,.25); border-radius: 13px;
  padding: 12px 14px; margin-bottom: 24px;
  font-family: 'Syne'; font-size: 12.5px; font-weight: 600; color: #A32A33; line-height: 1.5;
}
.form-alert svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 1px; }

.err { font-family: 'Syne'; font-size: 11.5px; font-weight: 600; color: var(--red); margin-top: 6px; }

.has-err .field-input,
.has-err .field-textarea,
.has-err .phone-wrap,
.has-err .handle-wrap { border-color: var(--red); background: #fff; }
.has-err .field-input:focus,
.has-err .field-textarea:focus,
.has-err .phone-wrap:focus-within,
.has-err .handle-wrap:focus-within { box-shadow: 0 0 0 4px var(--red-bg); }
.has-err .consent-row { box-shadow: inset 0 0 0 1.5px var(--red); }
/* Main Platform is a required radio group, and radio cards carry no
   .field-input, so without this a bounced submit turned the error text red and
   left the thing it was pointing at looking perfectly fine. Only the unselected
   cards go red — a chosen card keeps its purple, since the error is "pick one",
   never "that one is wrong". */
.has-err .radio-card:not(.selected):not(:has(.radio-real:checked)) { border-color: var(--red); background: #fff; }

/* Success / already-on-the-list screen, inside the same boarding-pass card. */
.done { text-align: center; padding: 8px 0 4px; }
.done-ico {
  width: 58px; height: 58px; border-radius: 18px; background: var(--purple-bg);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 20px;
}
.done-ico svg { width: 26px; height: 26px; color: var(--purple); }
.done h2 { font-family: 'Unbounded'; font-weight: 900; font-size: 24px; letter-spacing: -.03em; margin-bottom: 10px; }
.done > p { font-family: 'Syne'; font-size: 13.5px; color: #5A5A5A; line-height: 1.65; max-width: 400px; margin: 0 auto; }
.done-next { display: grid; gap: 10px; margin: 28px 0 22px; text-align: left; }
.done-step {
  display: flex; align-items: center; gap: 12px;
  background: var(--grey-1); border-radius: 13px; padding: 13px 15px;
  font-family: 'Syne'; font-size: 12.5px; font-weight: 600; color: #5A5A5A;
}
.done-step b {
  width: 22px; height: 22px; border-radius: 7px; background: var(--purple); color: #fff;
  font-family: 'Unbounded'; font-weight: 700; font-size: 10px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.done-foot { font-family: 'Syne'; font-size: 12px; color: var(--grey-4); }
.done-foot a { color: var(--purple); font-weight: 700; text-decoration: none; }

/* ══════════════════════════
   RESPONSIVE
══════════════════════════ */
@media (max-width: 900px) {
  .float-card, .plane-icon, .stamp { display: none; }
  .hero-stage { min-height: auto; padding-top: 10px; }
  header { padding: 22px 24px; }
  footer { padding: 24px; }
}
@media (max-width: 640px) {
  .hero-stage { padding-left: 22px; padding-right: 22px; }
  /* Text rows stack; the platform picker deliberately does NOT — see the mobile
     density block at the end of this file. */
  .field-row { grid-template-columns: 1fr; }
  .form-card { padding: 28px 22px 32px; }
  .stub-header { padding: 16px 22px; }
  .stats-band { flex-wrap: wrap; }
  .stats-band-wrap { padding: 0 22px; }
  .stat-cell { flex: 1 1 50%; }
  .stat-cell:nth-child(2) { border-left: none; }
  .form-section { padding: 64px 18px 72px; }
  .trust-strip { gap: 18px; }
  footer { justify-content: center; text-align: center; }
  .footer-logo { justify-content: center; flex-wrap: wrap; }
}

/* Respect a reduced-motion preference — every animation here is decorative. */
@media (prefers-reduced-motion: reduce) {
  .stamp, .plane-icon, .ticker-track, .launch-dot,
  .fc-1, .fc-2, .fc-3, .fc-4, .hero-cta-chev svg { animation: none !important; }
  /* Jump straight there rather than gliding the whole page past them. */
  html { scroll-behavior: auto; }
  .hero-cta { transition: none; }
  .hero-cta:hover { transform: none; }
}

/* ══════════════════════════
   MOBILE VERIFICATION (OTP)
   Added 2026-07-28. The button sits inside the phone control; the code panel
   drops in underneath once a code has been sent.
══════════════════════════ */
/* Verify is a filled pill sitting INSIDE the field, not a flat slab of purple
   text divided off by a hairline. Two reasons it had to change: verification is
   now a hard gate, so this is the one control every single visitor must find and
   press — and next to the solid "Confirm" in the panel below, a transparent
   sibling read as a label rather than a button. The 5px margin is what turns it
   into a pill instead of a full-height block, and it keeps the 36px+ pill inside
   a wrap that is ~46px tall, so the whole field is still one tap target row. */
.otp-btn {
  flex-shrink: 0; align-self: center; margin: 5px 5px 5px 0;
  border: 0; border-radius: 9px; cursor: pointer;
  min-height: 36px; padding: 0 15px; white-space: nowrap;
  background: var(--purple); color: #fff;
  font-family: 'Syne'; font-size: 12.5px; font-weight: 700;
  transition: background .15s, color .15s, box-shadow .15s;
}
.otp-btn:hover { background: #6444D4; }
/* Inset ring, not an outset one: .phone-wrap clips to its border-radius with
   overflow:hidden, so anything drawn outside the pill is cut off and a keyboard
   user gets no focus indicator at all. A white ring inside the purple fill is
   unmissable and cannot be clipped. */
.otp-btn:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.otp-btn:disabled { background: var(--grey-2); color: var(--grey-4); cursor: default; }
.otp-btn-solid {
  align-self: auto; margin: 0; border: 0; border-radius: 13px; padding: 13px 20px;
  background: var(--purple); color: #fff; white-space: nowrap;
  box-shadow: 0 6px 16px rgba(118,84,232,.28);
}
.otp-btn-solid:hover { background: #6444D4; }
.otp-btn-solid:disabled { background: var(--grey-2); color: var(--grey-4); box-shadow: none; }

/* The green tick replaces the button once the number is verified. */
.otp-tick { display: none; align-items: center; padding: 0 14px; color: var(--green); }
.otp-tick svg { width: 17px; height: 17px; }
.is-verified .otp-tick { display: flex; }
.is-verified .otp-btn { display: none; }
.is-verified .phone-wrap { border-color: var(--green); background: #fff; }

.otp-panel { margin-top: 10px; display: grid; gap: 8px; }
.otp-label { font-family: 'Syne'; font-size: 11.5px; font-weight: 700; color: #0A0A0A; }
.otp-row { display: flex; gap: 8px; }
.otp-input {
  flex: 1; min-width: 0; background: var(--grey-1);
  border: 1.5px solid var(--grey-2); border-radius: 13px; padding: 13px 15px;
  font-family: 'Syne'; font-size: 16px; font-weight: 700; letter-spacing: .32em;
  color: #0A0A0A; outline: none; transition: all .15s;
}
.otp-input:focus { border-color: var(--purple); background: #fff; box-shadow: 0 0 0 4px var(--purple-bg); }
.otp-input::placeholder { color: #ADABAF; letter-spacing: .32em; }

.otp-foot { display: flex; align-items: center; gap: 8px; }
.otp-link {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: 'Syne'; font-size: 11.5px; font-weight: 700; color: var(--purple);
}
.otp-link:hover { text-decoration: underline; }
.otp-link:disabled { color: var(--grey-4); cursor: default; text-decoration: none; }
.otp-timer { font-family: 'Syne'; font-size: 11.5px; color: var(--grey-4); }

/* Standing "verification is required" note. Deliberately quieter than
   .otp-status — it is a rule being stated up front, not a response to anything
   the visitor just did. `.hint` itself only exists in styles.css, which this
   page does not load, so the noscript line below it borrows these values too. */
.hint,
.otp-req-hint { margin-top: 8px; font-family: 'Syne'; font-size: 11.5px; font-weight: 600; color: var(--grey-4); line-height: 1.5; }

.otp-status { margin-top: 8px; font-family: 'Syne'; font-size: 11.5px; font-weight: 600; color: var(--grey-4); line-height: 1.5; }
.otp-status.is-ok  { color: #0F9D6B; }
.otp-status.is-err { color: var(--red); }

@media (max-width: 420px) {
  .otp-row { flex-wrap: wrap; }
  .otp-btn-solid { width: 100%; }
}

/* The phone control carries three things on one line — "+91", the number, and
   Verify — and it is the only field that does. On a 320px screen the fixed ends
   left ~87px for the number, which fits "98765 43210" with about 7px to spare:
   any font fallback, a longer value, or a slightly wider system font and the
   digits start disappearing under the button. Trimming the horizontal padding
   (and nothing else — the vertical padding is what keeps the 47px tap target)
   buys ~30px, which turns "just barely" into comfortable. */
@media (max-width: 400px) {
  .phone-prefix { padding: 0 10px; }
  .phone-input { padding-left: 12px; padding-right: 8px; }
  .otp-btn { padding: 0 12px; margin-right: 4px; }
  .otp-tick { padding: 0 11px; }
}

/* ══════════════════════════
   MOBILE DENSITY
   Added 2026-07-28. The form is the whole point of the page and on a phone it
   ran to ~1.7 screens: the three platform cards stacked into tall blocks, the
   two short selects each took a full row, and the gaps were still desktop-sized.
   This is spacing and column count only — no control shrinks below a 44px tap
   target, and nothing here touches the desktop layout.
══════════════════════════ */
@media (max-width: 640px) {
  /* Three across, not stacked. Each card is an icon plus one short word, so it
     needs ~110px — three fit inside a 390px screen with room to spare, and this
     alone gives back most of a screen of scrolling. */
  .radio-cards { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .radio-card { padding: 13px 6px; gap: 7px; border-radius: 12px; }
  .radio-card svg { width: 19px; height: 19px; }
  .radio-card-label { font-size: 11px; }

  /* Follower Size + Niche: two `Select…` dropdowns, comfortable side by side. */
  .field-row-duo { grid-template-columns: 1fr 1fr; gap: 10px; }

  /* Tighter vertical rhythm. Field padding is deliberately left alone — that is
     what keeps every input a 47px tap target. */
  .form-section { padding: 44px 16px 52px; }
  .form-card { padding: 24px 18px 28px; }
  .form-head { margin-bottom: 4px; }
  .group { margin-bottom: 22px; }
  .group-label { margin-bottom: 12px; }
  .field, .field-row { margin-bottom: 13px; }
  .spaced { margin-top: 13px; }
  .field-label { margin-bottom: 6px; }
  .field-textarea { min-height: 64px; }
  .consent-row { padding: 13px; }
  .submit-btn { margin-top: 20px; }
}

/* Narrow phones (≤360px): the three platform labels start to crowd, so drop a
   little more type rather than letting them wrap mid-word. */
@media (max-width: 360px) {
  .radio-cards { gap: 6px; }
  .radio-card { padding: 12px 4px; }
  .radio-card-label { font-size: 10.5px; }
  .field-row-duo { gap: 8px; }
}