/* ============================================================
   Magnetic v3 - VSL funnel

   Built on styles.css + v2.css from v2, minus the site chrome. The difference
   that matters: there is NO NAV. A funnel has one exit and it is the CTA. Every
   link that is not the CTA is a way to leave without converting, so the header
   is a logo and a scarcity line, nothing else.

   Below the fold there is one section and it never ends: the proof wall, which
   keeps appending as long as you keep scrolling.
   ============================================================ */

/* ---------- header: mark only, no navigation ---------- */
.f-head {
  position: relative; z-index: 5;
  display: flex; justify-content: center;
  padding: 30px 24px 0;
}
.f-mark { display: inline-flex; align-items: center; gap: 11px; }
.f-mark .nav-mark { width: 32px; height: 32px; }
.f-mark .nav-wordmark { font-size: 18px; }

/* the hero loses the nav's clearance since there is no nav */
.has-topbar .hero.f-hero { padding-top: 44px; }
@media (max-width: 720px) { .has-topbar .hero.f-hero { padding-top: 32px; } }

/* ---------- the wall ----------
   Column layout rather than a grid: cards are different heights and a grid
   would leave ragged gaps at the foot of every row. */
.wall-sec { position: relative; padding: 10px 0 0; }
.wall-lede {
  text-align: center; max-width: 560px; margin: 0 auto 30px;
  font-size: 13px; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 700; color: var(--faint);
}
.feedwall { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: start; }
.feedcol { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

.pc {
  position: relative; overflow: hidden;
  border-radius: 16px; padding: 13px 13px 11px;
  background: var(--feed-card); border: 1px solid rgba(255,255,255,.075);
  box-shadow: 0 10px 26px rgba(0,0,0,.5);
}
.pc-top { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.pc-av { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex: 0 0 30px; }
.pc-who { min-width: 0; }
.pc-name { font-size: 13.5px; font-weight: 700; letter-spacing: -0.015em; color: var(--accent-lite); display: block; }
.pc-sub { font-size: 10.5px; color: var(--faint); display: block; margin-top: 1px; }
/* the confirmed-posted mark, carried through from the posting record */
.pc-live {
  margin-left: auto; flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 3px;
  padding: 3px 7px 3px 5px; border-radius: 6px;
  background: rgba(75,208,126,.14); border: 1px solid rgba(75,208,126,.3);
  font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: #8FE0AE;
}
.pc-live svg { width: 10px; height: 10px; }
.pc-cap { font-size: 13.5px; line-height: 1.45; color: #D3D7DE; letter-spacing: -0.012em; margin-bottom: 10px; }
.pc-media {
  position: relative; border-radius: 11px; overflow: hidden; background: #0A0D13;
  aspect-ratio: 9 / 16; cursor: pointer;
}
.pc-media video, .pc-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pc-dur {
  position: absolute; bottom: 8px; right: 8px;
  padding: 2px 6px; border-radius: 5px; background: rgba(8,9,12,.72);
  backdrop-filter: blur(6px);
  font-size: 10.5px; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums;
}
.pc-sound {
  position: absolute; top: 8px; right: 8px;
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(8,9,12,.6); backdrop-filter: blur(6px); color: #fff;
  border: 1px solid rgba(255,255,255,.16);
}
.pc-sound svg { width: 14px; height: 14px; }
.pc-foot { display: flex; align-items: center; gap: 7px; margin-top: 10px; }
.pc-rx {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 7px; font-size: 11.5px; font-weight: 600;
  color: #9BA1AC; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.06);
}
.pc-trade { margin-left: auto; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }

/* a CTA card dropped into the stream, so the scroll always has an exit in it */
.pc-cta {
  background:
    radial-gradient(120% 150% at 50% 0%, rgba(47,107,255,.3) 0%, rgba(47,107,255,0) 62%),
    linear-gradient(180deg, var(--panel-2) 0%, var(--panel) 100%);
  border-color: rgba(47,107,255,.4);
  padding: 26px 22px; text-align: center;
}
.pc-cta h3 { font-size: 20px; letter-spacing: -0.035em; margin-bottom: 9px; }
.pc-cta p { font-size: 13.5px; line-height: 1.5; color: var(--dim); margin-bottom: 18px; }
.pc-cta .btn { width: 100%; font-size: 15px; padding: 14px 20px; }

.wall-more { display: grid; place-items: center; padding: 44px 0 20px; }
.wall-spin {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.12); border-top-color: var(--accent-lite);
}
@media (prefers-reduced-motion: no-preference) { .wall-spin { animation: sp 0.9s linear infinite; } }
@keyframes sp { to { transform: rotate(360deg); } }
.wall-count { margin-top: 14px; font-size: 12.5px; color: var(--faint); font-variant-numeric: tabular-nums; }

/* ---------- the persistent CTA ----------
   With no nav there is nothing pinned to the top, so the ask rides the bottom
   once the hero is gone. */
.stickycta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(8,9,12,.6), rgba(8,9,12,.94) 60%);
  backdrop-filter: blur(18px);
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: center; gap: 18px;
  transform: translateY(110%); transition: transform .32s cubic-bezier(.22,.61,.36,1);
}
.stickycta.on { transform: none; }
.stickycta .sc-t { font-size: 14px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink-soft); }
.stickycta .btn { font-size: 15px; padding: 13px 30px; }
@media (max-width: 720px) {
  .stickycta { gap: 0; }
  .stickycta .sc-t { display: none; }
  .stickycta .btn { width: 100%; }
}

@media (max-width: 1024px) { .feedwall { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) {
  .feedwall { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .feedcol { gap: 10px; }
  .pc { padding: 10px 10px 9px; border-radius: 13px; }
  .pc-cap { font-size: 12px; }
  .pc-name { font-size: 12px; }
  .pc-av { width: 24px; height: 24px; flex-basis: 24px; }
  .pc-sub { font-size: 9.5px; }
  .pc-rx { font-size: 10.5px; padding: 2px 7px; }
  .pc-trade { display: none; }
  /* the wall runs to the bottom of the screen, so it needs to clear the bar */
  body { padding-bottom: 76px; }
}

/* ============================================================
   /qualify - the filter
   ============================================================ */
/* The glow field is scenery for the funnel page. On the filter it lands on the
   question text and the first two options and washes them out, so it drops to a
   faint backdrop and the bright streak is removed entirely. */
.q-page .aura { opacity: .3; }
.q-page .ao-s { display: none; }

.q-wrap { max-width: 720px; margin: 0 auto; padding: 0 24px; }
.q-shell { position: relative; padding: 56px 0 90px; }
.q-prog { display: flex; gap: 5px; margin-bottom: 34px; }
.q-prog i { flex: 1; height: 3px; border-radius: 3px; background: rgba(255,255,255,.1); transition: background .3s ease; }
.q-prog i.done { background: var(--accent); }
.q-prog i.now { background: var(--accent-lite); }

.q-step { animation: qin .26s cubic-bezier(.22,.61,.36,1) both; }
@keyframes qin { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .q-step { animation: none; } }
.q-eyebrow {
  font-size: 11.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent-lite); margin-bottom: 14px; display: block;
}
.q-title { font-size: clamp(26px, 4vw, 40px); letter-spacing: -0.04em; line-height: 1.08; margin-bottom: 12px; }
.q-help { font-size: 15.5px; line-height: 1.55; color: var(--dim); margin-bottom: 28px; max-width: 560px; }
.q-opts { display: flex; flex-direction: column; gap: 10px; }
.q-o {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  padding: 19px 22px; border-radius: 14px;
  background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.1);
  font-size: 16.5px; font-weight: 500; letter-spacing: -0.018em; color: #D8DBE1;
  transition: border-color .15s ease, background .15s ease, transform .1s ease, color .15s ease;
}
.q-o:hover { border-color: rgba(47,107,255,.5); background: rgba(47,107,255,.09); color: #fff; }
.q-o:active { transform: scale(.995); }
.q-o .tick {
  flex: 0 0 20px; width: 20px; height: 20px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.24); display: grid; place-items: center;
  transition: border-color .15s ease;
}
.q-o:hover .tick { border-color: var(--accent-lite); }
.q-o .arw { margin-left: auto; width: 17px; height: 17px; opacity: 0; color: var(--accent-lite); transition: opacity .15s ease, transform .15s ease; }
.q-o:hover .arw { opacity: 1; transform: translateX(3px); }
.q-back { margin-top: 26px; font-size: 14px; color: var(--faint); }
.q-back:hover { color: #fff; }

/* the decline. deliberately not softened: a maybe here costs a sales call. */
.q-out { max-width: 620px; }
.q-badge {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 20px;
  padding: 7px 15px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.q-badge svg { width: 13px; height: 13px; }
.q-badge.no { background: rgba(255,120,120,.1); border: 1px solid rgba(255,120,120,.3); color: #F5A9A9; }
.q-badge.yes { background: rgba(75,208,126,.13); border: 1px solid rgba(75,208,126,.35); color: #8FE0AE; }
.q-out h2 { font-size: clamp(28px, 4.4vw, 44px); letter-spacing: -0.042em; line-height: 1.06; margin-bottom: 16px; }
.q-out p { font-size: 16px; line-height: 1.62; color: var(--dim); margin-bottom: 14px; }
.q-out p b { color: #fff; font-weight: 600; }
.q-out .btn { margin-top: 16px; }
.q-again { display: inline-block; margin-top: 22px; font-size: 13.5px; color: var(--faint); text-decoration: underline; text-underline-offset: 3px; }
.q-again:hover { color: #fff; }

/* the form only exists on the far side of the filter */
.q-form { display: flex; flex-direction: column; gap: 13px; margin-top: 26px; }
.q-form input, .q-form textarea {
  width: 100%; padding: 16px 18px; border-radius: 13px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12);
  color: #fff; font: inherit; font-size: 16px; letter-spacing: -0.015em;
}
.q-form input:focus, .q-form textarea:focus { outline: none; border-color: var(--accent); background: rgba(47,107,255,.07); }
.q-form textarea { min-height: 96px; resize: vertical; }
.q-form .btn { margin-top: 6px; }
.q-note { margin-top: 14px; font-size: 12.5px; color: var(--faint); line-height: 1.55; }

@media (max-width: 720px) {
  .q-shell { padding: 34px 0 70px; }
  .q-o { padding: 17px 18px; font-size: 15.5px; }
}