/* ==========================================================================
   Elevate Method — Funnel
   1:1 recreation of the Base44 build, rewritten as static HTML/CSS/JS.
   Every value transcribed from the original Tailwind classes.

   ⚠️ ONE DELIBERATE FIX
   The original's `globals.css` is never imported into the Base44 build —
   verified: none of Inter, .glow-red, .btn-shimmer or .pulse-glow appear in
   the shipped stylesheet. So the live site renders in the OS system font with
   both effects dead. This file wires them up the way they were written.
   To go back to exactly what's live, set --font to the system stack below.
   ========================================================================== */

/* Fonts load via <link> tags in the HTML — parallel and non-blocking.
   Never reintroduce an @import here: it creates a serial fetch chain
   (page → this css → Google css → font files) that blocked first paint for
   seconds on mobile networks. With display=swap and the system-font fallback
   below, text renders instantly and upgrades to Inter when it arrives. */

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

:root {
  --red: #D32F2F;
  --red-hover: #c62828;
  --red-dark: #b71c1c;
  --orange: #E64A19;
  --green: #388E3C;
  --green-light: #4CAF50;
  --gold: #FFB300;
  --blue: #1D9BF0;
  --bg: #0a0a0a;
  --card-bg: #141414;
  --card-bg-hi: #1a1a1a;
  --muted: #A0A0A0;
  --grad: linear-gradient(135deg, #D32F2F, #E64A19);

  --font: 'Inter', -apple-system, BlinkMacSystemFont, ui-sans-serif, system-ui, sans-serif;
  /* live-site fallback:
     --font: ui-sans-serif, system-ui, sans-serif; */
}

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: #fff;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

button, input, select { font-family: inherit; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, p { margin: 0; }

/* From globals.css */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #0a0a0a; }
::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #1a1a1a inset;
  -webkit-text-fill-color: #ffffff;
  caret-color: #ffffff;
}

/* --- Layout scaffolding -------------------------------------------------- */

.page { min-height: 100vh; background: var(--bg); }

.bg-deco { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
/* Pre-blurred radial gradients instead of filter: blur(100-140px) — same
   soft glow at 5% alpha, but no live GPU blur pass on every frame (an iOS
   Safari battery/smoothness cost the audit flagged). */
.bg-deco i { position: absolute; border-radius: 9999px; display: block; }
.bg-deco .d1 { bottom: -200px; left: -200px;  width: 800px; height: 800px; background: radial-gradient(circle, rgba(211,47,47,0.05) 0%, rgba(211,47,47,0.02) 45%, transparent 70%); }
.bg-deco .d2 { top: 25%; right: -180px; width: 640px; height: 640px; background: radial-gradient(circle, rgba(211,47,47,0.05) 0%, rgba(211,47,47,0.02) 45%, transparent 70%); }
.bg-deco .d3 { top: -220px; left: -220px;    width: 840px; height: 840px; background: radial-gradient(circle, rgba(211,47,47,0.05) 0%, rgba(211,47,47,0.02) 45%, transparent 70%); }
.bg-deco .d4 { bottom: -220px; right: -220px; width: 840px; height: 840px; background: radial-gradient(circle, rgba(56,142,60,0.05) 0%, rgba(56,142,60,0.02) 45%, transparent 70%); }

.shell { position: relative; z-index: 10; max-width: 512px; margin-inline: auto; }
.shell--results { padding-bottom: 96px; }

.grad-text {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

.divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent); }

/* --- Motion (replaces framer-motion) ------------------------------------- */

.anim { opacity: 0; }
.anim--up    { transform: translateY(20px); }
.anim--down  { transform: translateY(-20px); }
.anim--left  { transform: translateX(-20px); }
.anim--scale { transform: scale(0.9); }
.anim--scale95 { transform: scale(0.95); }
.anim--fade  { transform: none; }
.anim.in {
  opacity: 1; transform: none;
  transition: opacity 0.5s cubic-bezier(0.16,1,0.3,1), transform 0.5s cubic-bezier(0.16,1,0.3,1);
}
html:not(.js) .anim { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .anim { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* --- globals.css effects, wired up --------------------------------------- */

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 20px rgba(211,47,47,0.3), 0 0 40px rgba(211,47,47,0.1); }
  50%      { box-shadow: 0 0 30px rgba(211,47,47,0.5), 0 0 60px rgba(211,47,47,0.2); }
}
.glow-red { animation: pulse-glow 3s ease-in-out infinite; }

.btn-shimmer { position: relative; overflow: hidden; }
.btn-shimmer::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
  pointer-events: none;
}
.btn-shimmer:hover::after { transform: translateX(100%); }

@media (prefers-reduced-motion: reduce) {
  .glow-red { animation: none; box-shadow: 0 0 24px rgba(211,47,47,0.35); }
  .btn-shimmer::after { display: none; }
}

.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.hide-scrollbar::-webkit-scrollbar { display: none; }

/* ══════════════════════════════════════════════════════ HOME ══════ */

/* Tightened from 40px so step 1 of the quiz lands above the fold on a
   typical phone — the first tap target should never require a scroll. */
.hero { position: relative; text-align: center; padding: 28px 20px 22px; }
.hero__glow {
  position: absolute; top: -120px; left: 50%; transform: translateX(-50%);
  width: 760px; height: 520px; max-width: 100vw;
  background: radial-gradient(ellipse closest-side, rgba(211,47,47,0.10) 0%, rgba(211,47,47,0.04) 55%, transparent 100%);
  border-radius: 9999px; pointer-events: none;
}

.logo { font-size: 24px; font-weight: 900; letter-spacing: 0.1em; line-height: 1.2; }
.logo .a { color: var(--red); }
.logo .bar { color: rgba(255,255,255,0.2); margin-inline: 12px; }
.logo .b { color: #fff; }
.logo-wrap { margin-bottom: 22px; position: relative; }

.badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: 9999px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.04);
  margin-bottom: 24px; position: relative;
}
.badge__dot { width: 6px; height: 6px; border-radius: 9999px; background: var(--red); }
.badge__t { font-size: 12px; letter-spacing: 0.2em; font-weight: 600; color: rgba(255,255,255,0.6); text-transform: uppercase; }

.h1-wrap { margin-bottom: 20px; position: relative; }
h1.hero__h { font-size: 2.6rem; font-weight: 900; line-height: 1.05; letter-spacing: -0.025em; }

.hero__sub { color: var(--muted); font-size: 16px; line-height: 1.6; max-width: 448px; margin: 0 auto 26px; position: relative; }

.stats { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; max-width: 384px; margin-inline: auto; position: relative; }
.stat { display: flex; flex-direction: column; align-items: center; }
.stat__v { font-size: 24px; font-weight: 900; color: #fff; line-height: 1.2; }
.stat__l { font-size: 10px; color: var(--muted); letter-spacing: 0.1em; text-transform: uppercase; margin-top: 2px; text-align: center; line-height: 1.25; }

/* --- Form ---------------------------------------------------------------- */

.formwrap { padding: 0 16px 64px; position: relative; z-index: 10; }
.form {
  max-width: 448px; margin-inline: auto;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 16px; padding: 24px;
}
.form > * + * { margin-top: 16px; }

.unitrow { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.unitrow__l { font-size: 12px; color: rgba(255,255,255,0.4); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; }
.unit { display: flex; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; padding: 2px; }
.unit button {
  appearance: none; border: 0; cursor: pointer; background: transparent;
  padding: 6px 16px; border-radius: 6px;
  font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.1em;
  color: rgba(255,255,255,0.4); transition: all 0.2s;
}
.unit button:hover:not(.on) { color: rgba(255,255,255,0.7); }
.unit button.on { background: var(--red); color: #fff; box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); }

.lbl { display: block; font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 8px; }

.inp {
  width: 100%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px; padding: 16px;
  /* 16px minimum — below that iOS Safari auto-zooms the page on focus
     and leaves it zoomed, which reads as a broken layout on iPhones. */
  color: #fff; font-size: 16px; transition: all 0.2s;
}
.inp::placeholder { color: rgba(255,255,255,0.25); }
.inp:focus { outline: none; border-color: rgba(211,47,47,0.7); background: rgba(255,255,255,0.09); }
select.inp { appearance: none; cursor: pointer; }
select.inp option { background: #1a1a1a; color: #fff; }

.pair { display: flex; gap: 8px; }
.pair > div { flex: 1; min-width: 0; }

.err { color: var(--red); font-size: 12px; margin: 4px 0 0; }

.cta {
  width: 100%; border: 0; cursor: pointer;
  background: var(--red); color: #fff;
  font-weight: 900; padding: 20px; border-radius: 12px;
  text-transform: uppercase; letter-spacing: 0.1em;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  font-size: 14px; margin-top: 8px; transition: all 0.2s;
}
.cta:hover { background: var(--red-hover); }
.cta:active { transform: scale(0.98); }
.cta:disabled { opacity: 0.6; cursor: default; }

.spin { width: 20px; height: 20px; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.fineprint { text-align: center; color: rgba(255,255,255,0.25); font-size: 11px; }

/* ══════════════════════════════════════════════════ RESULTS ══════ */

.logobar { position: relative; z-index: 10; text-align: center; padding: 32px 0 8px; }
.logobar .logo { font-size: 20px; }
.logobar .logo .bar { margin-inline: 8px; }

/* --- Height analysis ----------------------------------------------------- */

.analysis { padding: 26px 16px 20px; max-width: 448px; margin-inline: auto; }
.analysis__head { text-align: center; margin-bottom: 24px; }
.acomplete {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(56,142,60,0.15); border: 1px solid rgba(56,142,60,0.3);
  border-radius: 9999px; padding: 8px 16px; margin-bottom: 16px;
}
.acomplete span { color: var(--green-light); font-size: 14px; font-weight: 600; letter-spacing: 0.025em; }
.acomplete svg { width: 16px; height: 16px; color: var(--green-light); }
.analysis__h { font-size: 30px; font-weight: 900; line-height: 1.25; }

.statcard { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; padding: 20px; margin-bottom: 12px; }
.statcard__l { color: rgba(255,255,255,0.4); font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; margin-bottom: 4px; }
.statcard__v { color: #fff; font-size: 30px; font-weight: 900; line-height: 1.2; }
.statcard__s { color: rgba(255,255,255,0.3); font-size: 14px; }

.potential {
  position: relative; overflow: hidden;
  background: rgba(211,47,47,0.10); border: 1px solid rgba(211,47,47,0.4);
  border-radius: 16px; padding: 20px; margin-bottom: 24px;
}
.potential__blob { position: absolute; top: 0; right: 0; width: 160px; height: 160px; background: rgba(211,47,47,0.1); border-radius: 9999px; filter: blur(24px); pointer-events: none; }
.potential__l { color: #ff6b6b; font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; margin-bottom: 4px; position: relative; }
.potential__v { color: #fff; font-size: 36px; font-weight: 900; line-height: 1.15; position: relative; }
.potential__s { color: rgba(255,144,144,0.6); font-size: 14px; position: relative; }
.potential__pill { display: inline-flex; align-items: center; gap: 8px; background: rgba(211,47,47,0.2); border-radius: 9999px; padding: 4px 12px; margin-top: 12px; position: relative; }
.potential__pill span { color: #ff6b6b; font-size: 12px; font-weight: 700; }

.reality { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); border-radius: 16px; padding: 20px; }
.reality p { color: var(--muted); font-size: 14px; line-height: 1.625; }
.reality b { color: #fff; font-weight: 600; }

/* --- Coaching features --------------------------------------------------- */

.coaching { padding: 26px 16px; max-width: 448px; margin-inline: auto; }
.coaching .divider { margin-bottom: 24px; }
.coaching__head { text-align: center; margin-bottom: 24px; }
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 9999px; padding: 8px 16px; margin-bottom: 16px;
}
.pill svg { width: 16px; height: 16px; color: var(--red); }
.pill span { color: rgba(255,255,255,0.6); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; }
.coaching__h { font-size: 24px; font-weight: 900; color: #fff; }

.feats { display: flex; flex-direction: column; gap: 12px; }
.feat {
  display: flex; align-items: center; gap: 16px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px; padding: 16px;
}
.feat__i {
  flex: none; width: 28px; height: 28px; border-radius: 9999px;
  background: rgba(56,142,60,0.2); border: 1px solid rgba(56,142,60,0.4);
  display: flex; align-items: center; justify-content: center;
}
.feat__i svg { width: 14px; height: 14px; color: var(--green-light); }
.feat span { color: rgba(255,255,255,0.85); font-size: 14px; font-weight: 600; }

/* --- Reviews ------------------------------------------------------------- */

.reviews { padding: 28px 0; }
.reviews__head { text-align: center; padding-inline: 16px; margin-bottom: 22px; }
.reviews__head .divider { margin-bottom: 24px; }
.reviews__eyebrow { color: var(--red); font-size: 12px; letter-spacing: 0.25em; text-transform: uppercase; font-weight: 700; margin-bottom: 12px; }
.reviews__h { font-size: 24px; font-weight: 900; color: #fff; }
.reviews__sub { color: rgba(255,255,255,0.35); font-size: 14px; margin-top: 8px; }
.rows { display: flex; flex-direction: column; gap: 12px; }
.row { overflow: hidden; }
.row__track { display: flex; will-change: transform; }

.rev {
  min-width: 280px; width: 280px; flex-shrink: 0;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px; padding: 16px; margin-inline: 8px;
}
.rev__top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 12px; }
.rev__who { display: flex; align-items: center; gap: 10px; }
.rev__av { flex: none; width: 36px; height: 36px; border-radius: 9999px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 900; color: #fff; }
.rev__name { display: flex; align-items: center; gap: 4px; }
.rev__name span { color: #fff; font-size: 12px; font-weight: 700; }
.rev__name svg { width: 14px; height: 14px; color: var(--blue); }
.rev__loc { color: rgba(255,255,255,0.35); font-size: 10px; }
.rev__gain { flex: none; display: inline-flex; align-items: center; gap: 4px; background: rgba(56,142,60,0.15); border: 1px solid rgba(56,142,60,0.3); border-radius: 9999px; padding: 2px 8px; }
.rev__gain span { color: var(--green-light); font-size: 10px; font-weight: 900; }
.rev__stars { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.stars { display: flex; gap: 2px; }
.stars svg { width: 12px; height: 12px; }
.rev__date { color: rgba(255,255,255,0.25); font-size: 10px; }
.rev__t {
  color: rgba(255,255,255,0.6); font-size: 12px; line-height: 1.625;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}

/* --- Pricing ------------------------------------------------------------- */

.pricing { width: 100%; max-width: 100%; overflow: hidden; padding: 34px 0; position: relative; }
.pricing__anchor { margin-top: -60px; padding-top: 60px; display: block; }
.pricing__rule { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100%; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent); }
.pricing__head { text-align: center; margin: 32px 0 24px; padding-inline: 16px; }
.pricing__h { font-size: 30px; font-weight: 900; color: #fff; margin-bottom: 12px; }

.carousel { position: relative; }
.arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 20;
  width: 40px; height: 40px; border-radius: 9999px;
  background: rgba(211,47,47,0.88);
  border: 1px solid rgba(211,47,47,0.6);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.3);
  cursor: pointer; color: #fff;
  transition: transform 0.2s;
  animation: pulse 2s cubic-bezier(0.4,0,0.6,1) infinite;
}
.arrow:hover { transform: translateY(-50%) scale(1.1); }
.arrow[hidden] { display: none; }
.arrow--l { left: 8px; }
.arrow--r { right: 8px; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }
@media (prefers-reduced-motion: reduce) { .arrow { animation: none; } }

.track {
  display: flex; overflow-x: auto; gap: 20px; align-items: stretch;
  padding: 30px calc(50% - 150px);
  scroll-snap-type: x mandatory;
}
.plan {
  position: relative;
  flex-shrink: 0; width: 300px; scroll-snap-align: center;
  border-radius: 24px; border: 1px solid; padding: 24px;
  display: flex; flex-direction: column;
  transition: all 0.4s;
  /* The original blurred and 50%-faded every inactive card, which made the
     other plans literally unreadable — on a phone most people never learn
     they exist. Kept the depth cue, dropped the blur. */
  transform: scale(0.96); opacity: 0.78;
}
.plan.is-active { transform: scale(1.04); opacity: 1; z-index: 10; }

.plan--plain { border-color: rgba(255,255,255,0.1); background: var(--card-bg); }
.plan--white { border-color: rgba(255,255,255,0.2); background: var(--card-bg); }
.plan--red   { border-color: rgba(211,47,47,0.4); background: var(--card-bg-hi); box-shadow: 0 0 30px rgba(211,47,47,0.15); }
.plan--gold  { border-color: rgba(234,179,8,0.3); background: var(--card-bg-hi); box-shadow: 0 0 30px rgba(234,179,8,0.1); }

.plan__badge {
  position: absolute; top: -16px; left: 50%; transform: translateX(-50%);
  white-space: nowrap; background: var(--bg); border: 1px solid;
  padding: 6px 16px; border-radius: 9999px;
  font-size: 10px; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase;
  z-index: 20; box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.3);
}
.badge--white { border-color: rgba(255,255,255,0.3); color: rgba(255,255,255,0.8); }
.badge--red   { border-color: rgba(211,47,47,0.4); color: var(--red); }
.badge--gold  { border-color: rgba(234,179,8,0.4); color: #eab308; }

.plan__head { margin-bottom: 24px; text-align: center; }
.plan__name { font-size: 18px; font-weight: 900; color: #fff; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.025em; }
.plan__price { font-size: 36px; font-weight: 900; color: #fff; margin-bottom: 12px; }
.plan__desc { font-size: 13px; color: rgba(255,255,255,0.6); line-height: 1.625; min-height: 65px; display: flex; align-items: center; justify-content: center; }

.plan__feats { flex: 1; display: flex; flex-direction: column; gap: 16px; margin-bottom: 32px; }
.plan__feat { display: flex; align-items: flex-start; gap: 12px; }
.plan__feat i { font-size: 14px; flex: none; margin-top: 2px; line-height: 1; font-style: normal; }
.plan__feat span { font-size: 13px; color: rgba(255,255,255,0.8); line-height: 1.375; text-align: left; }

.plan__foot { margin-top: auto; padding-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.plan__btn {
  width: 100%; padding: 14px 0; border-radius: 12px;
  font-weight: 900; font-size: 11px; text-align: center;
  text-transform: uppercase; letter-spacing: 0.1em; text-decoration: none;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: all 0.2s;
}
.btn--white { background: rgba(255,255,255,0.9); color: #0a0a0a; }
.btn--white:hover { background: #fff; }
.btn--red { background: var(--red); color: #fff; box-shadow: 0 0 20px rgba(211,47,47,0.4); }
.btn--red:hover { background: var(--red-dark); }
.btn--ghost { background: rgba(255,255,255,0.1); color: #fff; }
.btn--ghost:hover { background: rgba(255,255,255,0.2); }
.btn--gold { background: linear-gradient(90deg, #ca8a04, #eab308); color: #fff; box-shadow: 0 0 20px rgba(234,179,8,0.2); }
.btn--gold:hover { background: linear-gradient(90deg, #eab308, #facc15); }
.plan__note { text-align: center; font-size: 10px; color: rgba(255,255,255,0.4); margin-top: 6px; line-height: 1.375; }

.pricing__note { text-align: center; padding-inline: 24px; margin: 14px 0 44px; }
.pricing__note p {
  color: var(--muted); font-size: 11px; line-height: 1.625;
  max-width: 384px; margin-inline: auto;
  background: rgba(255,255,255,0.05); padding: 16px; border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.05);
}
.pricing__note b { font-weight: 700; color: rgba(255,255,255,0.8); }

.sitefoot { text-align: center; margin-top: 24px; padding-bottom: 36px; }
.sitefoot .logo { font-size: 24px; margin-bottom: 4px; }
.sitefoot .logo .bar { margin-inline: 8px; }
.sitefoot p { color: rgba(255,255,255,0.2); font-size: 12px; }

/* --- Sticky WhatsApp CTA -------------------------------------------------- */

.sticky {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 50; padding: 16px;
  background: linear-gradient(to top, #0a0a0a, transparent);
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
}
.sticky[hidden] { display: none; }
.sticky.is-off { opacity: 0; transform: translateY(8px); pointer-events: none; }
.sticky__in { pointer-events: auto; max-width: 384px; margin-inline: auto; }
.sticky a {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; background: var(--red); color: #fff;
  font-weight: 900; padding: 16px 0; border-radius: 12px;
  font-size: 14px; text-transform: uppercase; letter-spacing: 0.1em;
  text-decoration: none; transition: all 0.2s;
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.6);
}
.sticky a:hover { background: var(--red-dark); }

/* --- Breakpoints (Tailwind sm: 640, md: 768) ------------------------------ */

@media (min-width: 640px) {
  .logo { font-size: 30px; }
  .logobar .logo { font-size: 20px; }
  .sitefoot .logo { font-size: 24px; }
  h1.hero__h { font-size: 60px; }
  .hero__sub { font-size: 18px; }
  .stat__v { font-size: 36px; }
  .stat__l { font-size: 12px; }
  .analysis__h { font-size: 36px; }
  .coaching__h { font-size: 30px; }
  .reviews__h { font-size: 30px; }
}

@media (min-width: 768px) {
  h1.hero__h { font-size: 72px; }
}


/* ══════════════════════════════════════════════════════════════════════════
   V2 UPGRADE
   Design notes inline. This is where the funnel stops being a form and
   starts being a product.
   ══════════════════════════════════════════════════════════════════════════ */

/* --- Type: stop shouting -------------------------------------------------
   The original sets weight 900 on headings, labels, stat values, buttons and
   plan names alike. When everything is heaviest, nothing reads as more
   important than anything else. Display type keeps 900; supporting type steps
   down so hierarchy is visible at a glance. */

.lbl, .unitrow__l, .statcard__l, .potential__l { font-weight: 600; letter-spacing: 0.09em; }
.plan__name { font-weight: 800; }
.reviews__eyebrow { font-weight: 700; }

/* --- QUIZ ----------------------------------------------------------------
   One question per screen. Card height is pinned so the page never jumps
   between steps — a shifting layout is what makes multi-step forms feel
   cheap. */

.qbar { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.qbar__track { flex: 1; height: 3px; background: rgba(255,255,255,0.09); border-radius: 2px; overflow: hidden; }
.qbar__fill {
  height: 100%; width: 20%; border-radius: 2px;
  background: linear-gradient(90deg, var(--red), var(--orange));
  transition: width 0.45s cubic-bezier(0.16,1,0.3,1);
}
.qbar__n { font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.35); letter-spacing: 0.08em; font-variant-numeric: tabular-nums; }
.qback {
  background: none; border: 0; cursor: pointer; padding: 0;
  color: rgba(255,255,255,0.35); font-size: 12px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px; transition: color 0.2s;
}
.qback:hover { color: #fff; }
.qback[hidden] { display: none; }

/* No fixed height — sparse steps (sex, country) showed a dead gap between
   the question and the button. The container now hugs its content and
   home.js animates the height change between steps so nothing jumps. */
.qsteps { position: relative; overflow: hidden; }
.qsteps.h-anim { transition: height 0.32s cubic-bezier(0.16,1,0.3,1); }
.qstep { display: none; }
.qstep.on { display: block; animation: qin 0.34s cubic-bezier(0.16,1,0.3,1); }
@keyframes qin { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .qstep.on { animation: none; } }

.qq { font-size: 21px; font-weight: 800; line-height: 1.25; letter-spacing: -0.02em; margin-bottom: 6px; }
.qhint { font-size: 13px; color: rgba(255,255,255,0.4); line-height: 1.5; margin-bottom: 20px; }

/* Big tap targets. A 2-up card grid converts far better than a <select>:
   one thumb movement, no dropdown, no scrolling a native picker. */
.qpick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.qpick button {
  appearance: none; cursor: pointer;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.11);
  border-radius: 14px; padding: 22px 12px;
  color: #fff; font-size: 15px; font-weight: 700;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  transition: all 0.18s;
}
.qpick button:hover { border-color: rgba(211,47,47,0.55); background: rgba(211,47,47,0.08); }
.qpick button:active { transform: scale(0.97); }
.qpick button.on { border-color: var(--red); background: rgba(211,47,47,0.14); }
.qpick svg { width: 26px; height: 26px; color: rgba(255,255,255,0.55); }
.qpick button.on svg, .qpick button:hover svg { color: var(--red); }

/* Age chips — tapping beats typing */
.qchips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
.qchips button {
  appearance: none; cursor: pointer;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.11);
  border-radius: 11px; padding: 13px 0;
  color: #fff; font-size: 15px; font-weight: 700;
  font-variant-numeric: tabular-nums; transition: all 0.18s;
}
.qchips button:hover { border-color: rgba(211,47,47,0.55); background: rgba(211,47,47,0.08); }
.qchips button:active { transform: scale(0.96); }
.qchips button.on { border-color: var(--red); background: rgba(211,47,47,0.16); }

/* Live growth-window feedback inside the quiz */
.qwin {
  display: flex; align-items: flex-start; gap: 10px;
  border-radius: 12px; padding: 12px 14px; margin-top: 4px;
  font-size: 12.5px; line-height: 1.5; border: 1px solid;
  opacity: 0; transform: translateY(6px);
  transition: opacity 0.3s, transform 0.3s;
}
.qwin.show { opacity: 1; transform: none; }
.qwin[hidden] { display: none; }
.qwin i { width: 7px; height: 7px; border-radius: 50%; flex: none; margin-top: 6px; }

.tone-good { border-color: rgba(76,175,80,0.3);  background: rgba(56,142,60,0.1);  color: #A5D6A7; }
.tone-good > i { background: var(--green-light); }
.tone-warn { border-color: rgba(255,179,0,0.3);  background: rgba(255,179,0,0.08); color: #FFD08A; }
.tone-warn > i { background: var(--gold); }
.tone-bad  { border-color: rgba(211,47,47,0.32); background: rgba(211,47,47,0.09); color: #FFA9A2; }
.tone-bad > i { background: var(--red); }

.qfoot { margin-top: 20px; }
.qnext {
  width: 100%; border: 0; cursor: pointer;
  background: var(--red); color: #fff;
  font-weight: 800; padding: 17px; border-radius: 13px;
  text-transform: uppercase; letter-spacing: 0.09em;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 13.5px; transition: all 0.2s;
}
.qnext:hover { background: var(--red-hover); }
.qnext:active { transform: scale(0.985); }
/* Not-yet-valid: dimmed but still clickable, so tapping it tells you what's
   missing instead of doing nothing. */
.qnext.is-wait { opacity: 0.45; }
.qnext:disabled { opacity: 0.5; cursor: default; }
.qnext:disabled:hover { background: var(--red); }

/* Live echo under each height field — confirms the number was understood,
   and catches centimetres typed into the Feet box. */
.hecho { font-size: 11.5px; line-height: 1.45; margin-top: 7px; min-height: 1px; }
.hecho:empty { display: none; }
.hecho--ok   { color: rgba(255,255,255,0.42); font-variant-numeric: tabular-nums; }
.hecho--warn { color: #FFD08A; }
.hswap {
  appearance: none; border: 0; cursor: pointer;
  background: rgba(255,179,0,0.16); color: #FFD08A;
  border-radius: 7px; padding: 3px 9px; margin-left: 4px;
  font-size: 11px; font-weight: 700; font-family: inherit;
}
.hswap:hover { background: rgba(255,179,0,0.28); }

.qsafe {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin-top: 13px; font-size: 11px; color: rgba(255,255,255,0.28);
}
.qsafe svg { width: 11px; height: 11px; }

/* --- HEIGHT LADDER -------------------------------------------------------
   The payoff visual the original never had. Height is a vertical quantity, so
   it gets vertical bars — the comparison reads pre-attentively, before anyone
   has parsed a single number. */

.ladder {
  border: 1px solid rgba(255,255,255,0.1); border-radius: 20px;
  padding: 26px 20px 18px; margin-bottom: 14px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(211,47,47,0.09), transparent 62%),
    rgba(255,255,255,0.02);
}
.ladder__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; align-items: end; height: 190px; }
.lcol { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; text-align: center; }
.lcol__v { font-size: 15px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 8px; white-space: nowrap; }
/* Slightly inset rather than full-column — chunky edge-to-edge blocks read as
   a placeholder; a little air around each bar reads as a chart. */
.lcol__bar {
  width: 100%; max-width: 68px; margin-inline: auto;
  border-radius: 10px 10px 0 0; height: 0;
  transition: height 0.9s cubic-bezier(0.16,1,0.3,1);
}
.lcol--now  .lcol__bar { background: linear-gradient(180deg, #4a4a4a, #2e2e2e); }
.lcol--base .lcol__bar { background: linear-gradient(180deg, #6b6b6b, #3d3d3d); }
.lcol--pot  .lcol__bar { background: linear-gradient(180deg, #E64A19, #D32F2F); box-shadow: 0 0 26px rgba(211,47,47,0.42); }
.lcol--now .lcol__v  { color: rgba(255,255,255,0.55); }
.lcol--base .lcol__v { color: rgba(255,255,255,0.75); }
.lcol--pot .lcol__v  { color: #fff; }
.ladder__labels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 10px; }
.ladder__labels span {
  font-size: 9.5px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase;
  color: rgba(255,255,255,0.34); text-align: center; line-height: 1.35;
}
.ladder__labels span.hot { color: #ff8a80; }

.gap {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  margin-top: 18px; padding-top: 15px; border-top: 1px solid rgba(255,255,255,0.07);
}
.gap b { font-size: 25px; font-weight: 900; letter-spacing: -0.03em; color: #fff; font-variant-numeric: tabular-nums; }
.gap span { font-size: 12px; color: rgba(255,255,255,0.45); line-height: 1.35; text-align: left; }

/* --- GROWTH WINDOW BAND --------------------------------------------------- */

.window { border: 1px solid; border-radius: 16px; padding: 16px 18px; margin-bottom: 14px; }
.window__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 11px; }
.window__l { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; display: flex; align-items: center; gap: 8px; }
.window__l i { width: 7px; height: 7px; border-radius: 50%; }
.window__age { font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.35); letter-spacing: 0.05em; }
.window__meter { height: 4px; background: rgba(255,255,255,0.08); border-radius: 2px; overflow: hidden; margin-bottom: 11px; }
.window__meter span { display: block; height: 100%; border-radius: 2px; width: 0; transition: width 1s cubic-bezier(0.16,1,0.3,1) 0.25s; }
.tone-good .window__meter span { background: var(--green-light); }
.tone-warn .window__meter span { background: var(--gold); }
.tone-bad  .window__meter span { background: var(--red); }
.window__t { font-size: 13px; line-height: 1.55; color: rgba(255,255,255,0.72); }

/* --- Compact stat row ----------------------------------------------------- */

.srow { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.scell { background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; padding: 14px 15px; }
.scell__l { font-size: 10px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: rgba(255,255,255,0.38); margin-bottom: 6px; }
.scell__v { font-size: 21px; font-weight: 800; letter-spacing: -0.02em; color: #fff; font-variant-numeric: tabular-nums; }
.scell__s { font-size: 11px; color: rgba(255,255,255,0.3); margin-top: 2px; }

/* --- Mechanism strip (replaces the grey reality-check wall) ---------------- */

.mech { border: 1px solid rgba(255,255,255,0.08); border-radius: 18px; overflow: hidden; }
.mech__h {
  padding: 15px 18px; background: rgba(255,255,255,0.03);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}
.mrow { display: flex; gap: 13px; padding: 15px 18px; }
.mrow + .mrow { border-top: 1px solid rgba(255,255,255,0.06); }
.mrow__n {
  flex: none; width: 22px; height: 22px; border-radius: 7px;
  background: rgba(211,47,47,0.15); border: 1px solid rgba(211,47,47,0.3);
  color: #ff8a80; font-size: 10px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.mrow__t { font-size: 13px; line-height: 1.55; color: rgba(255,255,255,0.62); }
.mrow__t b { color: #fff; font-weight: 700; }

.hardtruth {
  margin-top: 14px; padding: 15px 18px;
  border-left: 2px solid var(--red); background: rgba(211,47,47,0.05);
  border-radius: 0 12px 12px 0;
  font-size: 13px; line-height: 1.6; color: rgba(255,255,255,0.78);
}
.hardtruth b { color: #fff; font-weight: 700; }

/* --- Pricing dots --------------------------------------------------------- */

.dots { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 2px; }
.dots button {
  appearance: none; border: 0; cursor: pointer; padding: 0;
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255,255,255,0.2); transition: all 0.25s;
}
.dots button.on { background: var(--red); width: 20px; border-radius: 4px; }

/* --- Proof + next steps --------------------------------------------------- */

.proofbar { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.proofbar span {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
  color: rgba(255,255,255,0.32);
  border: 1px solid rgba(255,255,255,0.08); border-radius: 999px; padding: 5px 11px;
}

.next3 { display: grid; gap: 9px; margin-top: 16px; }
.next3 div { display: flex; align-items: center; gap: 11px; font-size: 12.5px; color: rgba(255,255,255,0.5); }
.next3 i {
  flex: none; width: 19px; height: 19px; border-radius: 50%;
  background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.55);
  font-size: 9.5px; font-weight: 700; font-style: normal;
  display: flex; align-items: center; justify-content: center;
}

@media (max-width: 380px) {
  .qchips { grid-template-columns: repeat(3, 1fr); }
  .ladder { padding: 22px 14px 14px; }
  .gap b { font-size: 22px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   V2.1 POLISH
   ══════════════════════════════════════════════════════════════════════════ */

/* Kill the 300ms tap delay / accidental double-tap zoom on touch */
button, .inp, select, a { touch-action: manipulation; }

/* "Not listed? Enter it" — was styled as the Back button and looked broken */
.qalt {
  appearance: none; background: none; border: 0; cursor: pointer;
  padding: 8px 0 0; color: rgba(255,255,255,0.38);
  font-size: 12px; font-weight: 600; font-family: inherit;
  text-decoration: underline dotted rgba(255,255,255,0.3);
  text-underline-offset: 3px;
  transition: color 0.2s;
}
.qalt:hover { color: #fff; }

/* --- The analyzing moment -------------------------------------------------
   A result that appears instantly reads as worthless. ~2 seconds of visible
   "work" before the reveal makes the exact same output feel earned — every
   serious quiz funnel does this, and it also hides the page navigation. */

.veil {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(10,10,10,0.97);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 30px; padding: 24px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.28s ease;
}
.veil.on { opacity: 1; pointer-events: auto; }
.veil__ring {
  width: 44px; height: 44px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.1); border-top-color: var(--red);
  animation: spin 0.85s linear infinite;
}
.veil__rows { display: grid; gap: 14px; }
.vrow {
  display: flex; align-items: center; gap: 11px;
  font-size: 13.5px; font-weight: 600; color: rgba(255,255,255,0.28);
  transition: color 0.3s;
}
.vrow.on { color: #fff; }
.vrow i {
  flex: none; width: 19px; height: 19px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.18);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-style: normal; font-weight: 800; color: transparent;
  transition: all 0.3s;
}
.vrow.done i { background: var(--green); border-color: var(--green); color: #fff; }
@media (prefers-reduced-motion: reduce) { .veil__ring { animation: none; } }