/* ============================================================================
   CoachedByLeoamf - DM Qualification Page · LEOAMF "Mono Green & Ink"
   Brand law: ink-black canvas, white/grey type, ONE green accent (#1DB954).
   No gold / no second hue. Neutral ink surfaces, layered radial mesh + SVG
   film grain, green as a spotlight (<10% coverage), Poppins, premium depth.
   ========================================================================== */

:root {
  /* ════════════════════════════════════════════════════════════════════════
     PIXELATED × PURE FOCUS - canonical design-system tokens
     Shared across all 3 surfaces (Qualification · Low-Ticket · Client OS).
     SSOT: Pixelated-x-Pure-Focus-Design-System.txt §11. Surface/radius values
     here are the production-proven reference for the whole ecosystem.
     ════════════════════════════════════════════════════════════════════════ */
  /* green scale (primary / action / success) - anchored to brand #1DB954 */
  --green-50: #e9f9ef;  --green-100: #c9f0d6; --green-200: #9be3b4; --green-300: #66d189;
  --green-400: #3dc46e; --green-500: #1DB954; --green-600: #19A449; --green-700: #158f3f;
  --green-800: #117536; --green-900: #0d5c2b; --green-950: #07371a;
  /* gold scale REMOVED → neutral white/grey premium chrome (NO gold hue) */
  --gold-300: #ffffff; --gold-400: #f4f4f4; --gold-500: #e6e6e6; --gold-600: #c9c9c9; --gold-700: #9a9a9a;
  /* dark surfaces - neutral ink (no green tint) */
  --bg-base: #0A0A0A;   --bg-surface: #121212; --bg-elevated: #1A1A1A;
  /* text on dark */
  --text-1: #ffffff;    --text-2: rgba(255, 255, 255, 0.82); --text-3: rgba(255, 255, 255, 0.46);
  --text-on-green: #ffffff; --text-on-gold: #0A0A0A;
  /* lines */
  --border-subtle: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.14);
  --border-gold: rgba(255, 255, 255, 0.14);   --hairline-gold: rgba(255, 255, 255, 0.08);
  /* data-viz (green=good / grey=attention / red=intervention) */
  --risk-green: #1DB954; --risk-amber: #9A9A9A; --risk-red: #E5484D;
  /* spacing - 4px grid */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;  --space-5: 20px;
  --space-6: 24px;  --space-8: 32px;  --space-10: 40px; --space-12: 48px; --space-16: 64px;
  --space-20: 80px; --space-24: 96px; --space-32: 128px;

  /* ── Core brand (existing names → now derived FROM the canonical tokens above;
        computed values are identical, so the live page is pixel-unchanged) ── */
  --bg: var(--bg-base); /* neutral ink - the 60% */
  --bg-2: #050505;
  --panel: var(--bg-surface); /* raised surfaces */
  --panel-2: #161616;
  --emerald: var(--green-500); /* primary green - structural 30% */
  --emerald-2: #1DB954; /* brighter - active/hover/glow */
  --green-deep: #117536;
  --gold: var(--gold-500); /* now neutral */
  --gold-2: #ffffff;
  --gold-deep: var(--gold-600);
  --ink: var(--text-1);

  --ink-80: var(--text-2);
  --ink-64: rgba(255, 255, 255, 0.64);
  --ink-46: var(--text-3);
  --line: var(--border-subtle);
  --line-strong: var(--border-strong);

  /* ── Shadows / glow ── */
  --sh-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(0, 0, 0, 0.3);
  --sh-2: 0 2px 4px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.35);
  --sh-3: 0 8px 24px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.4);
  --sh-4: 0 24px 60px rgba(0, 0, 0, 0.55), 0 6px 14px rgba(0, 0, 0, 0.4);
  --glow-emerald: 0 0 0 1px rgba(29, 185, 84, 0.25), 0 10px 34px rgba(29, 185, 84, 0.40);
  --glow-gold: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 10px 32px rgba(0, 0, 0, 0.45);
  /* ── Button depth - neutral ink shadow, NO green halo (premium, not chip) ── */
  --btn-rest: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 1px 2px rgba(0, 0, 0, 0.45), 0 8px 20px rgba(0, 0, 0, 0.4);
  --btn-hover: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 2px 4px rgba(0, 0, 0, 0.45), 0 14px 30px rgba(0, 0, 0, 0.5);

  /* ── Geometry (canonical radius names + existing aliases) ── */
  --r-sm: 8px;
  --r-md: 12px;
  --r-pill: 999px;
  --r-btn: 13px;
  --r-card: 18px;
  --r-lg: 24px;
  --maxw: 600px;

  --font-display: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);

  /* ── Fluid type scale (~1.25) ── */
  --step--1: clamp(0.8rem, 0.77rem + 0.15vw, 0.9rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.1rem);
  --step-1: clamp(1.2rem, 1.12rem + 0.4vw, 1.4rem);
  --step-2: clamp(1.45rem, 1.3rem + 0.7vw, 1.85rem);
  --step-3: clamp(1.75rem, 1.5rem + 1.2vw, 2.4rem);
  --step-4: clamp(2.1rem, 1.7rem + 2vw, 3.2rem);
}

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

html {
  -webkit-text-size-adjust: 100%;
  /* clip (not hidden) stops the full-bleed marquee rails from giving the page a
     horizontal scroll on mobile, WITHOUT turning html into a scroll container,
     so the sticky topbar keeps working (overflow:hidden here would break it). */
  overflow-x: clip;
}

body {
  margin: 0;
  min-height: 100dvh;
  background-color: var(--bg);
  color: var(--ink-80);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

/* ── Cinematic brand backdrop (generated render, top-anchored, faint) ── */
.bg-photo {
  position: fixed;
  inset: 0 0 auto 0;
  height: 78vh;
  z-index: -2;
  pointer-events: none;
  background: url('/assets/hero-bg.webp') center top / cover no-repeat;
  opacity: 0.42;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.6) 45%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.6) 45%, transparent 100%);
}
/* portrait viewports: swap to the vertical brand backdrop */
@media (max-aspect-ratio: 3/4) {
  .bg-photo {
    background-image: url('/assets/hero-bg-mobile.webp');
  }
}

/* ── Layered radial mesh (ambient brand light) ── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -3;
  background-image:
    radial-gradient(60% 50% at 16% -2%, rgba(29, 185, 84, 0.2) 0%, transparent 60%),
    radial-gradient(55% 60% at 100% 22%, rgba(17, 117, 54, 0.32) 0%, transparent 55%),
    radial-gradient(26% 26% at 84% 8%, rgba(255, 255, 255, 0.05) 0%, transparent 70%),
    radial-gradient(120% 90% at 50% 118%, rgba(5, 5, 5, 0.95) 0%, transparent 60%);
  background-color: var(--bg);
}

/* ── Film grain (kills banding, the #1 premium lever) ── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img {
  max-width: 100%;
  display: block;
}

button {
  font-family: inherit;
}

::selection {
  background: rgba(29, 185, 84, 0.3);
  color: #fff;
}

:focus {
  outline: none;
}

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

* {
  scrollbar-width: thin;
  scrollbar-color: rgba(29, 185, 84, 0.5) transparent;
}
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(29, 185, 84, 0.45);
  border-radius: 99px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(29, 185, 84, 0.7);
}

/* ── App shell ─────────────────────────────────────────────────────────── */

.app {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* progress bar - slim, top, emerald→gold, fixed */
.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.07);
  z-index: 50;
  opacity: 0;
  transition: opacity 0.3s;
}
.app[data-view='form'] .progress-bar {
  opacity: 1;
}
.progress-fill {
  height: 100%;
  width: 0%;
  border-radius: 0 99px 99px 0;
  background: linear-gradient(90deg, var(--green-deep), var(--emerald) 60%, var(--emerald-2));
  box-shadow: 0 0 12px rgba(29, 185, 84, 0.5);
  transition: width 0.42s var(--ease-out);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px clamp(16px, 5vw, 28px);
  background: linear-gradient(180deg, rgba(10, 10, 10, 0.86), rgba(10, 10, 10, 0.3));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}
.brand img {
  height: 36px;
  width: auto;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.55));
  transition:
    transform 0.24s var(--ease-out),
    filter 0.24s var(--ease-out);
}
@media (hover: hover) {
  .brand:hover img {
    transform: scale(1.06) rotate(-3deg);
    filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.6));
  }
}
.brand .brand-name {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-64);
  font-weight: 600;
}

.topbar-step {
  margin-left: auto;
  display: none;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  color: var(--ink-64);
  white-space: nowrap;
}
.app[data-view='form'] .topbar-step {
  display: block;
}
.topbar-step b {
  color: var(--emerald-2);
  font-weight: 700;
}

.main {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.view {
  flex: 1;
  display: none;
  flex-direction: column;
}
.view.active {
  display: flex;
}

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(18px, 5vw, 32px) clamp(16px, 5vw, 24px);
}

/* ── Typography helpers ── */
h1,
h2,
h3 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.06;
  letter-spacing: -0.02em;
  font-weight: 800;
  margin: 0;
  text-wrap: balance;
}

.grad-text {
  background: linear-gradient(135deg, #fff 0%, var(--emerald-2) 48%, var(--emerald) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 22px rgba(29, 185, 84, 0.22));
}

/* ── Hero / landing ────────────────────────────────────────────────────── */

.hero {
  text-align: center;
  padding-top: clamp(14px, 4vw, 36px);
  position: relative;
}

/* soft conic rim light behind hero */
.hero::before {
  content: '';
  position: absolute;
  inset: -10% -20% 30%;
  z-index: -1;
  background: conic-gradient(
    from 210deg at 70% 16%,
    transparent 0deg,
    rgba(29, 185, 84, 0.1) 60deg,
    transparent 150deg
  );
  filter: blur(46px);
  animation: meshDrift 20s ease-in-out infinite;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--emerald-2);
  background: rgba(29, 185, 84, 0.07);
  border: 1px solid rgba(29, 185, 84, 0.24);
  padding: 7px 14px;
  border-radius: 999px;
  margin-bottom: 30px;
}
.eyebrow .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--emerald-2);
  box-shadow: 0 0 10px var(--emerald-2);
  animation: glowPulse 2.6s ease-in-out infinite;
}

.hero h1 {
  font-size: var(--step-4);
  margin: 0 auto 22px;
  max-width: 16ch;
}

.hero .sub {
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--ink-64);
  max-width: 46ch;
  margin: 0 auto clamp(16px, 4vw, 24px);
}

/* benefit pills - small rounded reassurance chips that wrap, kept well below the
   CTA so they never out-weigh it and never push the proof past the fold */
.bullets {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0 auto clamp(18px, 5vw, 26px);
  max-width: 540px;
}
@media (min-width: 560px) {
  .bullets {
    gap: 10px;
    max-width: 620px;
  }
}
.bullet {
  --mx: 50%;
  --my: 50%;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-align: left;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--ink-80);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  padding: 6px 12px;
  border-radius: 999px;
  overflow: hidden;
  transition:
    transform 0.24s var(--ease-out),
    border-color 0.24s var(--ease-out),
    background 0.24s var(--ease-out);
}
/* pointer-tracked spotlight (defaults to centre, so the CSS hover stands alone
   even before landing-fx.js wires the cursor) - soft-light keeps it off the text */
.bullet::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(150px 150px at var(--mx) var(--my), rgba(255, 255, 255, 0.16), transparent 62%);
  mix-blend-mode: soft-light;
  opacity: 0;
  transition: opacity 0.28s var(--ease-out);
  pointer-events: none;
}
.bullet svg {
  position: relative;
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  color: var(--emerald-2);
  transition: transform 0.24s var(--ease-out);
}
@media (hover: hover) {
  .bullet:hover {
    transform: translateY(-2px);
    border-color: rgba(29, 185, 84, 0.4);
    background: rgba(255, 255, 255, 0.065);
  }
  .bullet:hover::before {
    opacity: 1;
  }
  .bullet:hover svg {
    transform: scale(1.12);
  }
}

/* ── Buttons ── */
.btn {
  appearance: none;
  border: 0;
  cursor: pointer;
  font-weight: 700;
  font-family: var(--font-display);
  border-radius: var(--r-btn);
  transition:
    transform 0.18s var(--ease-out),
    box-shadow 0.22s var(--ease-out),
    background 0.2s,
    opacity 0.16s;
  touch-action: manipulation;
}
.btn:active {
  transform: translateY(1px) scale(0.99);
}

.btn-primary {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 17.5px;
  color: var(--text-on-green);
  background: linear-gradient(180deg, var(--emerald-2) 0%, var(--emerald) 52%, var(--green-deep) 100%);
  padding: 18px 40px;
  box-shadow: var(--btn-rest);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--btn-hover);
}
.btn-primary .arrow {
  transition: transform 0.2s var(--ease-out);
}
.btn-primary:hover .arrow {
  transform: translateX(4px);
}
/* one-pass sheen */
.btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-130%);
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, 0.5) 50%, transparent 65%);
}
.btn-primary:hover::after {
  transition: transform 0.7s ease;
  transform: translateX(130%);
}

.cta-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
  margin-top: 4px;
}
.cta-note {
  font-size: 12.5px;
  color: var(--ink-46);
  font-family: var(--font-mono);
  letter-spacing: 0.03em;
}
/* ── Proof / transformation carousel ── */
.proof {
  margin-top: clamp(22px, 6vw, 56px);
}
.proof-text {
  text-align: center;
  font-size: 14.5px;
  color: var(--ink-64);
  max-width: 48ch;
  margin: 0 auto 26px;
  line-height: 1.55;
}
.proof-text b {
  color: var(--ink);
  font-weight: 700;
}

/* continuous, infinitely-looping horizontal carousel (single row) */
.proof-strip {
  overflow: hidden;
  padding: 4px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
}
.marquee-track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: marquee 34s linear infinite;
}
/* Pause ONLY while the pointer is actually hovering the strip, then resume the
   moment it leaves. We intentionally do NOT pause on focus-within: a click/tap
   used to focus the tabindex=0 strip and freeze the marquee until the user
   clicked elsewhere, which read as a bug. Keyboard users can still inspect a
   card via :hover on devices with a pointer; prefers-reduced-motion stops the
   animation entirely below (the strip becomes manually scrollable there). */
@media (hover: hover) {
  .proof-strip:hover .marquee-track {
    animation-play-state: paused;
  }
}

.proof-card {
  /* spacing lives on the card (margin-right), NOT flex-gap, so each 4-card
     sequence is exactly 50% of the track and the -50% loop is seamless. */
  flex: 0 0 auto;
  width: clamp(168px, 56vw, 206px);
  margin-right: 14px;
  border-radius: var(--r-card);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--panel);
  position: relative;
  aspect-ratio: 4 / 5;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), var(--sh-3);
  transition:
    transform 0.28s var(--ease-out),
    border-color 0.28s var(--ease-out),
    box-shadow 0.28s var(--ease-out);
}
/* the marquee pauses on hover, so individual cards can be inspected with a lift */
@media (hover: hover) {
  .proof-card:hover {
    transform: translateY(-5px);
    border-color: rgba(29, 185, 84, 0.32);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 18px 42px rgba(0, 0, 0, 0.5);
  }
}
.ba {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.ba-half {
  position: relative;
  overflow: hidden;
}
.ba-before {
  background: linear-gradient(160deg, #1f1f1f 0%, #121212 100%);
}
.ba-after {
  background: linear-gradient(160deg, #14492a 0%, #0d2c1a 100%);
}
.ba-half::before {
  content: '';
  position: absolute;
  bottom: -8%;
  left: 22%;
  width: 56%;
  height: 78%;
  border-radius: 50% 50% 42% 42% / 60% 60% 40% 40%;
  background: radial-gradient(ellipse at 50% 30%, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02));
}
.ba-after::before {
  background: radial-gradient(ellipse at 50% 26%, rgba(29, 185, 84, 0.3), rgba(29, 185, 84, 0.05));
}
.ba-tag {
  position: absolute;
  top: 10px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-64);
  background: rgba(10, 10, 10, 0.65);
  padding: 3px 8px;
  border-radius: 6px;
}
.ba-before .ba-tag {
  left: 10px;
}
.ba-after .ba-tag {
  right: 10px;
  color: var(--emerald-2);
}
.proof-card .caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 16px 14px 14px;
  background: linear-gradient(180deg, transparent, rgba(5, 5, 5, 0.94) 60%);
  z-index: 2;
}
.proof-card .stars {
  color: var(--gold);
  font-size: 12px;
  letter-spacing: 2px;
  margin-bottom: 5px;
}
.proof-card .result {
  font-size: 27px;
  font-weight: 800;
  line-height: 1;
  color: var(--emerald-2);
  font-family: var(--font-display);
  letter-spacing: -0.01em;
}
.proof-card .result .unit {
  font-size: 15px;
  font-weight: 700;
  margin-left: 1px;
  color: var(--ink-80);
}
.proof-card .cap-sub {
  font-size: 11.5px;
  color: var(--ink-64);
  margin-top: 3px;
}

.trust-row {
  display: flex;
  justify-content: center;
  gap: clamp(22px, 7vw, 44px);
  flex-wrap: wrap;
  margin-top: clamp(34px, 8vw, 52px);
  padding-top: clamp(26px, 5vw, 34px);
  padding-bottom: 8px;
  border-top: 1px solid var(--line);
}
.trust-item {
  text-align: center;
}
.trust-item .num {
  font-size: 23px;
  font-weight: 800;
  color: var(--emerald-2);
  font-family: var(--font-display);
}
.trust-item .num.gold {
  color: var(--gold);
}
.trust-item .lbl {
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-64);
}

/* ── Scroll reveal ── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.7s var(--ease-smooth),
    transform 0.7s var(--ease-smooth);
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
.reveal[data-delay='1'] {
  transition-delay: 0.08s;
}
.reveal[data-delay='2'] {
  transition-delay: 0.16s;
}

/* ── Form ───────────────────────────────────────────────────────────────── */

.form-shell {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;          /* was center: vertical re-center on each step caused the visible resize jump */
  padding-top: clamp(16px, 5vh, 48px);
  padding-bottom: clamp(24px, 8vh, 64px);
}

#stepHost {
  position: relative;
}

.step {
  transition:
    transform 0.34s var(--ease-out),
    opacity 0.34s var(--ease-out);
}
.step.enter-fwd {
  opacity: 0;
  transform: translateX(30px);
}
.step.enter-back {
  opacity: 0;
  transform: translateX(-30px);
}

.step-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--emerald-2);
  margin-bottom: 12px;
}

.step h2 {
  font-size: var(--step-3);
  line-height: 1.18;
  font-weight: 800;
  margin: 0 0 10px;
}
/* heading is focused only for screen-reader orientation - no visible ring */
.step h2:focus,
.step h2:focus-visible {
  outline: none;
}
.step .helper {
  font-size: 14px;
  color: var(--ink-64);
  line-height: 1.55;
  margin: 0 0 22px;
}
.step h2 + .options,
.step h2 + .field-group,
.step .helper + .options,
.step .helper + .field-group,
.step .helper + .textarea {
  margin-top: 22px;
}

/* single-select option cards */
.options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  text-align: left;
  background: var(--panel);
  border: 1.5px solid var(--line-strong);
  color: var(--ink);
  padding: 16px 17px;
  border-radius: 14px;
  font-size: 15.5px;
  font-family: var(--font-body);
  line-height: 1.35;
  cursor: pointer;
  overflow: hidden;
  min-height: 56px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition:
    border-color 0.15s var(--ease-out),
    background 0.15s var(--ease-out),
    transform 0.1s var(--ease-out),
    box-shadow 0.18s var(--ease-out);
}
@media (hover: hover) {
  .option:hover {
    border-color: rgba(29, 185, 84, 0.55);
    background: var(--panel-2);
    transform: translateY(-1px);
  }
}
.option:active {
  transform: scale(0.985);
}

.option .tick {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--line-strong);
  display: grid;
  place-items: center;
  transition:
    border-color 0.16s,
    background 0.16s;
}
.option .tick svg {
  opacity: 0;
  transform: scale(0.4);
  color: #ffffff;
}
.option .opt-text {
  flex: 1;
}
.option .num-key {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-46);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 2px 7px;
}
@media (hover: none) {
  .option .num-key {
    display: none;
  }
}

.option[aria-checked='true'] {
  border-color: var(--emerald);
  background: linear-gradient(180deg, rgba(29, 185, 84, 0.16), rgba(29, 185, 84, 0.06));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 4px 16px rgba(0, 0, 0, 0.34);
}
.option[aria-checked='true'] .tick {
  background: var(--emerald-2);
  border-color: var(--emerald-2);
}
.option[aria-checked='true'] .tick svg {
  opacity: 1;
  transform: scale(1);
  transition:
    opacity 0.14s,
    transform 0.26s var(--ease-spring);
}
.option[aria-checked='true'] .num-key {
  color: var(--emerald-2);
  border-color: rgba(29, 185, 84, 0.4);
}

/* tap ripple */
.option .ripple {
  position: absolute;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  background: radial-gradient(circle, rgba(29, 185, 84, 0.35), transparent 70%);
  pointer-events: none;
  animation: ripple 0.55s var(--ease-out) forwards;
}

/* free text */
.textarea {
  width: 100%;
  min-height: 140px;
  resize: none;
  background: var(--panel);
  border: 1.5px solid var(--line-strong);
  border-radius: 14px;
  color: var(--ink);
  font-family: inherit;
  font-size: 16px;
  line-height: 1.5;
  padding: 15px 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition:
    border-color 0.16s,
    box-shadow 0.16s;
}
.textarea:focus {
  border-color: var(--emerald);
  box-shadow: 0 0 0 3px rgba(29, 185, 84, 0.18);
}
.char-hint {
  margin-top: 8px;
  font-size: 12px;
  color: var(--ink-46);
  font-family: var(--font-mono);
}

/* contact fields */
.field-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.field label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-80);
}
.field input {
  width: 100%;
  background: var(--panel);
  border: 1.5px solid var(--line-strong);
  border-radius: 14px;
  color: var(--ink);
  font-family: inherit;
  font-size: 16px;
  padding: 14px 15px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition:
    border-color 0.16s,
    box-shadow 0.16s;
}
.field input::placeholder {
  color: var(--ink-46);
}
.field input:focus {
  border-color: var(--emerald);
  box-shadow: 0 0 0 3px rgba(29, 185, 84, 0.18);
}
.field.invalid input {
  border-color: #E5484D;
}
.field .err {
  font-size: 12px;
  color: #E5484D;
  min-height: 0;
}

.privacy-note {
  margin-top: 14px;
  font-size: 12px;
  color: var(--ink-46);
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.5;
}
.privacy-note svg {
  flex: 0 0 auto;
  margin-top: 1px;
  color: var(--emerald);
}

/* mandatory privacy consent on the contact step */
.consent-field {
  margin-top: 12px;
}
.consent-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.5;
  cursor: pointer;
}
.consent-row input[type='checkbox'] {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  accent-color: var(--emerald);
  cursor: pointer;
}
.consent-row a {
  color: var(--emerald);
  text-decoration: underline;
}
.consent-field.invalid .consent-row {
  color: #E5484D;
}

/* nav */
.step-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 26px;
}
.btn-next {
  flex: 1;
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-size: 16px;
  color: var(--text-on-green);
  background: linear-gradient(180deg, var(--emerald-2) 0%, var(--emerald) 52%, var(--green-deep) 100%);
  padding: 16px 24px;
  min-height: 54px;
  box-shadow: var(--btn-rest);
}
.btn-next:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: var(--btn-hover);
}
.btn-next:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  filter: saturate(0.55);
}
.btn-back {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line-strong);
  color: var(--ink-64);
  padding: 16px 18px;
  min-height: 54px;
  font-size: 14px;
  font-family: var(--font-body);
}
.btn-back:hover {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.09);
}

/* a lonely Back (single-select steps that auto-advance) sits top, subtle */
.back-top {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: 0;
  color: var(--ink-46);
  font-size: 13px;
  font-family: var(--font-body);
  cursor: pointer;
  padding: 6px 0;
  margin-bottom: 14px;
  transition: color 0.15s;
}
.back-top:hover {
  color: var(--ink);
}
.back-top.hidden {
  visibility: hidden;
}

/* ── Loading interstitial (processing theater) ─────────────────────────── */
.loader {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  background: radial-gradient(120% 70% at 50% 30%, rgba(29, 185, 84, 0.22), transparent 60%), var(--bg);
}
.loader.on {
  display: flex;
}
.loader .ring {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  border: 3px solid rgba(29, 185, 84, 0.18);
  border-top-color: var(--emerald-2);
  animation: spin 0.95s linear infinite;
  margin-bottom: 26px;
}
.loader h2 {
  font-size: var(--step-2);
  font-weight: 800;
  margin: 0 0 20px;
}
.loader-progress {
  width: min(320px, 80vw);
  height: 6px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
  margin: 0 0 22px;
}
.loader-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--green-deep), var(--emerald) 60%, var(--emerald-2));
  box-shadow: 0 0 12px rgba(29, 185, 84, 0.5);
  transition: width 0.2s linear;
}
.loader .stages {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(320px, 80vw);
  text-align: left;
}
.loader .stage {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--ink-46);
  opacity: 0.5;
  transition:
    opacity 0.3s,
    color 0.3s;
}
.loader .stage.done {
  opacity: 1;
  color: var(--ink-80);
}
.loader .stage .mark {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--line-strong);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}
.loader .stage.done .mark {
  background: var(--emerald-2);
  border-color: var(--emerald-2);
  color: #ffffff;
}
.loader-note {
  margin: 26px 0 0;
  max-width: min(360px, 84vw);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-46);
}

/* ── Footer ── */
.footer {
  text-align: center;
  padding: 28px 16px calc(34px + env(safe-area-inset-bottom));
  font-size: 11.5px;
  color: var(--ink-46);
  font-family: var(--font-mono);
  letter-spacing: 0.07em;
}

/* ── Placeholder / recommendation page ── */
.placeholder-card {
  max-width: 520px;
  margin: 0 auto;
  text-align: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(28px, 7vw, 48px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), var(--sh-4);
}
.placeholder-card .badge {
  width: 66px;
  height: 66px;
  margin: 0 auto 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(29, 185, 84, 0.14);
  border: 1px solid rgba(29, 185, 84, 0.4);
  color: var(--emerald-2);
  box-shadow: 0 0 30px rgba(29, 185, 84, 0.25);
  animation: float 5s ease-in-out infinite;
}
.placeholder-card h1 {
  font-size: var(--step-3);
  margin: 0 0 12px;
}
.placeholder-card p {
  color: var(--ink-64);
  margin: 0 0 8px;
  line-height: 1.6;
}

/* ── Keyframes ── */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes glowPulse {
  0%,
  100% {
    box-shadow: 0 0 10px var(--emerald-2);
  }
  50% {
    box-shadow: 0 0 18px var(--emerald-2), 0 0 4px var(--emerald-2);
  }
}
@keyframes meshDrift {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(-2%, 1%, 0) scale(1.05);
  }
}
@keyframes ripple {
  to {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }
}
@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}
@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}
@keyframes kineticDrift {
  from {
    transform: scale(1.08) translate3d(-1.6%, 0, 0);
  }
  to {
    transform: scale(1.08) translate3d(1.6%, 0, 0);
  }
}

/* ── Desktop tuning ── */
@media (min-width: 720px) {
  :root {
    --maxw: 640px;
  }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: 0.001ms !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
  .step.enter-fwd,
  .step.enter-back {
    opacity: 1;
    transform: none;
  }
  /* no auto-scroll - let the carousel be swiped manually instead */
  .marquee-track {
    animation: none;
    transform: none;
  }
  .proof-strip {
    overflow-x: auto;
    scrollbar-width: none;
  }
  .proof-strip::-webkit-scrollbar {
    display: none;
  }
}

/* ── Mobile: lift the proof above the fold ──────────────────────────────────
   The leads click from mobile, so the results must be visible without scrolling.
   The seam is a desktop "breath"; on phones it only pushes the proof down, so it
   collapses here, and the hero rhythm tightens so the transformations rise up. */
@media (max-width: 600px) {
  /* headline: smaller and tighter so it lands in ~3 calm lines, not 4 cramped ones */
  .hero h1 {
    font-size: clamp(1.5rem, 1.06rem + 2vw, 1.85rem);
    line-height: 1.2;
    max-width: 24ch;
    margin-bottom: 10px;
  }
  .hero .sub {
    font-size: 1rem;
    line-height: 1.5;
    max-width: 34ch;
    margin-bottom: 14px;
  }
  /* the four reassurance pills sit as a tidy, centered 2x2 grid (even, aligned rows)
     instead of a ragged flex-wrap that reads as scattered on a phone */
  .bullets {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    max-width: 360px;
    margin: 0 auto 14px;
  }
  .bullet {
    justify-content: center;
    text-align: center;
    white-space: normal;
    font-size: 11px;
    line-height: 1.25;
    padding: 8px 10px;
    border-radius: 12px;
  }
  /* the proof rises right under the CTA so the button AND the first transformation
     are both visible without scrolling */
  .proof { margin-top: 12px; }
  .proof-text { font-size: 13.5px; margin: 0 auto 12px; }
  .proof-strip { margin-top: 2px; }
}

/* ── Desktop landing: a real landing page, not the mobile column stretched ────
   On phones the qualification page is a tight 600px column (correct: leads click
   from mobile and the proof must sit above the fold). On a wide screen that same
   600px column made the headline wrap to four cramped lines and left the whole
   hero feeling boxed in. Here the LANDING view (and only the landing view) opens
   up: the column widens, the headline grows and breathes onto ~2 lines, the hero
   gets real vertical air, and the proof + WhatsApp rails run wider so it reads as
   "lots of results". The FORM view stays pinned to the narrow column below, so
   the assessment steps are unchanged. */
@media (min-width: 860px) {
  /* widen ONLY the landing column; the form column keeps its own narrow cap */
  #view-landing .wrap {
    max-width: 1040px;
    padding-top: clamp(28px, 4vw, 48px);
  }
  #view-form .wrap.form-shell {
    max-width: var(--maxw);
  }

  /* the hero becomes its own centered, generous band */
  .hero {
    padding-top: clamp(28px, 4vw, 52px);
    max-width: 860px;
    margin: 0 auto;
  }
  .hero h1 {
    /* bigger, wider, fewer lines: ~2 clean lines instead of four cramped ones.
       The Greek headline is long, so the line box opens to ~24ch (the wider
       landing column has the room) and the font ceiling stays controlled so it
       does not overflow on the largest screens. */
    font-size: clamp(2.8rem, 1.9rem + 2.2vw, 3.6rem);
    line-height: 1.1;
    max-width: 24ch;
    margin-bottom: clamp(20px, 2.4vw, 30px);
  }
  .hero .sub {
    font-size: clamp(1.2rem, 1rem + 0.5vw, 1.45rem);
    max-width: 54ch;
    margin-bottom: clamp(22px, 2.6vw, 32px);
  }
  .bullets {
    max-width: 720px;
    margin-bottom: clamp(24px, 3vw, 34px);
  }
  .bullet { font-size: 12.5px; padding: 8px 14px; }

  /* proof copy + section get room to match the wider rails */
  .proof { margin-top: clamp(48px, 6vw, 88px); }
  .proof-text { font-size: 16px; max-width: 60ch; }
}

/* very wide screens: cap the line length so text never sprawls edge to edge */
@media (min-width: 1280px) {
  #view-landing .wrap { max-width: 1120px; }
}

/* Critical WhatsApp testimonial carousel layout. Loaded with the first render-blocking
   stylesheet so the rail is horizontal and height-bounded at first paint, preventing the
   vertical "wall of screenshots" flash (FOUC). Mirrors proof.css / lowticket.css values
   exactly; those sheets load later and harmlessly re-assert the same layout. */
.wa-rail{--wa-win:230px;--wa-card-w:74vw;position:relative;overflow:hidden}
.wa-marquee{display:flex;width:max-content}
.wa-card{flex:0 0 var(--wa-card-w);max-width:300px}
.wa-crop{display:block;width:100%;height:var(--wa-win);overflow:hidden;cursor:default;pointer-events:none}
.wa-crop img{width:100%;height:auto;display:block}
.wa-open{display:none}
.wa-lb{display:none!important}