/* ═══════════════════════════════════════════════════════════════════════════
   LEADLY — THE FUNNEL PAGE  ·  /assets/funnel-page.css

   The shell every Smart Qualifier landing page is built on.

   ── THE ONE RULE: NO PAGE SCROLL ──────────────────────────────────────────
   The page is exactly one viewport tall (100dvh) and the body cannot scroll.
   Every step of the funnel swaps in PLACE, inside a panel of fixed height, so
   the page never grows and the prospect never loses their place. The panel has
   its own internal scroll as a last resort on very short screens — that is the
   only scrollbar allowed anywhere.

   Desktop  image left, funnel right — a split screen.
   Mobile   image is the full-bleed ground; the funnel panel floats on it.

   Colour and type come from brand.css. Load it first.
   ═══════════════════════════════════════════════════════════════════════════ */

/* These pages are dark BY DESIGN — but they still have to opt out of the
   browser's own darkening, or it will re-darken what is already dark and eat
   the contrast. Same rule, different canvas. */
html{ color-scheme: only light; background:var(--panel); }
html, body{ height:100%; }
body{
  margin:0;
  height:100dvh;
  overflow:hidden;                 /* the page itself NEVER scrolls */
  background:var(--panel);
  font-family:var(--font);
  color:var(--text-1);
  -webkit-font-smoothing:antialiased;
}

.lp{
  display:grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  height:100dvh;
}

/* ── LEFT — the photograph, and the promise ───────────────────────────────*/
.lp-art{
  position:relative;
  overflow:hidden;
  display:flex; flex-direction:column;
  padding:clamp(28px,3.4vw,48px);
  color:#fff;
  min-width:0;
}
.lp-art img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:var(--focal, 50% 40%);
  z-index:0;
}
/* THE SCRIM. The headline was losing to the photograph — white type landing on
   the bright end of a sunset or a hard hat and simply vanishing. A single
   top-to-bottom gradient can't fix that, because the copy sits in the MIDDLE
   where such a gradient is at its weakest.

   So there are two layers. A global gradient for depth, and a second one keyed
   to where the type actually is: a soft dark pool anchored bottom-left, exactly
   under .lp-say. Plus a text-shadow on the h1 itself as the last line of
   defence, because no scrim survives every photograph. */
.lp-art::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(6,8,12,.74) 0%, rgba(6,8,12,.30) 30%, rgba(6,8,12,.62) 66%, rgba(6,8,12,.95) 100%),
    radial-gradient(120% 70% at 0% 100%, rgba(6,8,12,.88) 0%, rgba(6,8,12,.42) 42%, transparent 72%),
    radial-gradient(70% 50% at 15% 100%, rgba(0,85,232,.26), transparent 70%);
}
.lp-art > *{ position:relative; z-index:2; }

/* the pool that sits directly behind the words */
.lp-say::before{
  content:""; position:absolute; z-index:-1;
  left:-6%; right:-14%; top:-9%; bottom:-16%;
  background:radial-gradient(80% 90% at 22% 62%, rgba(4,6,10,.72), rgba(4,6,10,.34) 52%, transparent 78%);
  filter:blur(6px);
  pointer-events:none;
}
.lp-say{ position:relative; }

.lp-brand{ display:flex; align-items:center; gap:11px; flex:none; }
.lp-mark{
  width:34px; height:34px; border-radius:9px; flex:none;
  background:rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  display:grid; place-items:center;
}
.lp-mark svg{ width:18px; height:18px; }
.lp-brand-name{ font-size:14px; font-weight:600; letter-spacing:-.01em; line-height:1.3; }
.lp-brand-name small{ display:block; font-weight:400; font-size:11px; color:rgba(255,255,255,.62); letter-spacing:0; }
.lp-secure{
  margin-left:auto; display:flex; align-items:center; gap:6px; flex:none;
  font-size:11px; color:rgba(255,255,255,.72);
}
.lp-secure svg{ width:13px; height:13px; }

.lp-say{ margin-top:auto; max-width:20ch; }
.lp-eyebrow{
  display:inline-block; margin-bottom:16px;
  padding:6px 12px; border-radius:999px;
  background:rgba(255,255,255,.13);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
}
.lp-h1{
  /* THE COLOUR IS NOT OPTIONAL AND IT IS NOT INHERITED.
     brand.css carries an ELEMENT rule — `h1,h2,h3,h4 { color: var(--text-1) }`
     — and an element rule beats the white this h1 inherits from .lp-art. So the
     headline was rendering in near-black (#0C111D) on a dark photograph, and
     only the coloured .em span survived. Measured: rgb(12,17,29).
     Set it here, explicitly, and never rely on inheritance across a component
     boundary again. */
  color:#fff;
  font-size:clamp(30px,3.2vw,46px); font-weight:600; line-height:1.13;
  letter-spacing:-.033em; margin:0;
  text-shadow:0 1px 2px rgba(0,0,0,.42), 0 6px 26px rgba(0,0,0,.52);
}
.lp-h1 .em{ color:#9DC0FF; }
.lp-sub{ text-shadow:0 1px 12px rgba(0,0,0,.5); }
.lp-sub{
  margin:18px 0 0; max-width:38ch;
  font-size:clamp(14px,1.05vw,16px); line-height:1.6; color:rgba(255,255,255,.78);
}
.lp-trust{
  display:flex; flex-wrap:wrap; gap:8px; margin-top:22px;
}
.lp-chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 11px; border-radius:999px;
  border:1px solid rgba(255,255,255,.20);
  font-size:11.5px; color:rgba(255,255,255,.86);
}
.lp-chip i{ width:5px; height:5px; border-radius:50%; background:#4D8CF0; flex:none; }

/* ── RIGHT — the funnel ───────────────────────────────────────────────────*/
.lp-panel{
  position:relative;                /* containing block for .lp-scrollfade */
  background:#fff;
  display:flex; flex-direction:column;
  min-width:0; min-height:0;
  padding:clamp(24px,2.4vw,36px) clamp(22px,2.6vw,44px);
}
.lp-progress{ flex:none; display:flex; align-items:center; gap:12px; margin-bottom:20px; }
.lp-track{ flex:1; height:4px; border-radius:999px; background:var(--line); overflow:hidden; }
.lp-track i{ display:block; height:100%; width:0; background:var(--accent); border-radius:999px;
  transition:width .5s cubic-bezier(.4,0,.2,1); }
.lp-count{ flex:none; font-size:12px; font-weight:600; color:var(--text-3-aa); font-variant-numeric:tabular-nums; }

/* The step viewport. The PAGE never scrolls; on a very small phone the
   QUESTION AREA may, because a photo + a five-option question + a button + a
   legal line genuinely do not fit in 568px and pretending otherwise means
   clipping something. The progress bar and the button live OUTSIDE this box,
   so they are always on screen — only the question moves, and it fades at the
   bottom edge so it reads as more-below rather than cut-off. */
.lp-steps{
  position:relative; flex:1; min-height:0;
  overflow-y:auto; overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.lp-steps::-webkit-scrollbar{ display:none; }
.lp-scrollfade{
  position:absolute; left:0; right:0; bottom:0; height:34px; z-index:4;
  pointer-events:none; opacity:0; transition:opacity .2s var(--ease);
  background:linear-gradient(180deg, rgba(255,255,255,0), #fff 82%);
}
.lp-scrollfade.on{ opacity:1; }
.lp-step{ display:none; }
.lp-step.on{ display:block; animation:lp-in .34s cubic-bezier(.16,1,.3,1); }
@keyframes lp-in{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

.lp-q{ font-size:clamp(20px,1.9vw,27px); font-weight:600; line-height:1.25;
  letter-spacing:-.025em; color:var(--text-1); margin:0 0 6px; }
.lp-hint{ font-size:14px; line-height:1.55; color:var(--text-2); margin:0 0 20px; }

.lp-opts{ display:flex; flex-direction:column; gap:9px; }
.lp-opt{
  display:flex; align-items:center; gap:12px;
  padding:15px 16px; border:1.5px solid var(--line); border-radius:12px;
  background:#fff; cursor:pointer; text-align:left; width:100%;
  font-family:inherit; font-size:15.5px; color:var(--text-1);
  transition:border-color .18s var(--ease), background .18s var(--ease), transform .12s var(--ease);
}
.lp-opt:hover{ border-color:var(--accent); background:rgba(0,85,232,.03); }
.lp-opt:active{ transform:translateY(1px); }
.lp-opt:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; }
.lp-opt .rd{ width:19px; height:19px; border-radius:50%; border:1.5px solid #CBD2DA; flex:none; position:relative; }
.lp-opt.multi .rd{ border-radius:5px; }
.lp-opt.on{ border-color:var(--accent); background:rgba(0,85,232,.055); font-weight:600; }
.lp-opt.on .rd{ border-color:var(--accent); background:var(--accent); }
.lp-opt.on .rd::after{
  content:""; position:absolute; inset:0; margin:auto;
  width:5px; height:9px; border:solid #fff; border-width:0 2px 2px 0;
  transform:rotate(45deg) translate(-1px,-1px);
}

/* fields */
.lp-field{ margin-bottom:14px; }
.lp-field label{ display:block; font-size:13px; font-weight:600; color:var(--text-1); margin-bottom:6px; }
.lp-field input{
  width:100%; font-family:inherit; font-size:16px;   /* 16px = iOS won't zoom */
  padding:14px 15px; border:1.5px solid var(--line); border-radius:10px;
  background:var(--surface-2); color:var(--text-1);
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.lp-field input:focus{
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(0,85,232,.14); background:#fff;
}
.lp-field.bad input{ border-color:var(--danger); }
.lp-err{ display:none; margin-top:6px; font-size:12.5px; color:var(--danger); }
.lp-field.bad .lp-err{ display:block; }

/* PDPA consent — this is a legal requirement in Singapore, not a nicety */
.lp-consent{
  display:flex; gap:11px; align-items:flex-start;
  padding:14px; border:1.5px solid var(--line); border-radius:10px;
  background:var(--surface-2); cursor:pointer; margin-bottom:4px;
}
.lp-consent input{ width:18px; height:18px; margin:1px 0 0; flex:none; accent-color:var(--accent); }
.lp-consent span{ font-size:12.5px; line-height:1.5; color:var(--text-2); }
.lp-consent.bad{ border-color:var(--danger); }

/* actions */
.lp-actions{ flex:none; display:flex; align-items:center; gap:12px; padding-top:18px; }
.lp-back{
  background:none; border:0; cursor:pointer; font-family:inherit;
  font-size:14px; font-weight:600; color:var(--text-3-aa); padding:10px 4px;
}
.lp-back:hover{ color:var(--text-1); }
.lp-next{
  margin-left:auto; flex:1;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:inherit; font-size:16px; font-weight:600;
  padding:16px 24px; border:0; border-radius:999px; cursor:pointer;
  background:var(--accent); color:#fff;
  transition:background .18s var(--ease), transform .12s var(--ease), opacity .18s var(--ease);
}
.lp-next:hover{ background:var(--accent-hover); }
.lp-next:active{ transform:translateY(1px); }
.lp-next:disabled{ opacity:.4; cursor:not-allowed; }
.lp-next svg{ width:16px; height:16px; }
.lp-next.busy{ pointer-events:none; opacity:.75; }

.lp-foot{
  flex:none; padding-top:14px; margin-top:4px;
  border-top:1px solid var(--line);
  font-size:11px; line-height:1.55; color:var(--text-3-aa);
}
.lp-foot a{ color:var(--text-2); text-decoration:underline; }

/* ── the done screen ──────────────────────────────────────────────────────*/
.lp-done{ text-align:center; padding:16px 0; }
.lp-tick{
  width:62px; height:62px; margin:0 auto 20px; border-radius:50%;
  background:rgba(0,85,232,.10); display:grid; place-items:center;
}
.lp-tick svg{ width:30px; height:30px; }
.lp-tick path{
  stroke:var(--accent); stroke-width:2.6; fill:none; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:26; stroke-dashoffset:26; animation:lp-draw .55s cubic-bezier(.16,1,.3,1) .12s forwards;
}
@keyframes lp-draw{ to{ stroke-dashoffset:0; } }
.lp-done h2{ font-size:26px; font-weight:600; letter-spacing:-.026em; margin:0 0 10px; }
.lp-done p{ font-size:15px; line-height:1.6; color:var(--text-2); margin:0 auto; max-width:34ch; }
.lp-done p b{ color:var(--text-1); font-weight:600; }
.lp-next-steps{
  margin-top:24px; text-align:left;
  border:1px solid var(--line); border-radius:12px; padding:16px 18px;
  background:var(--surface-2);
}
.lp-next-steps li{ font-size:13.5px; line-height:1.5; color:var(--text-2); margin-bottom:9px; }
.lp-next-steps li:last-child{ margin-bottom:0; }

/* ── MOBILE ───────────────────────────────────────────────────────────────
   Not a squashed version of the desktop split. A different composition.

   The grid split gave the photograph a 223px strip on a 664px screen — a
   portrait image cropped to a letterbox, which read as nothing at all — and
   left the funnel a ~430px panel it could not fit inside. So:

     · the image becomes the FULL-BLEED GROUND, floor to ceiling
     · the brand and the headline sit in the top third, on the photograph
     · the funnel panel FLOATS over the bottom 66% with a rounded lip

   The photo is finally visible, and the panel gets the height it needs.
   ─────────────────────────────────────────────────────────────────────────*/
@media (max-width: 900px){
  .lp{ display:block; position:relative; height:100dvh; }

  .lp-art{
    position:absolute; inset:0; height:100dvh;
    padding:14px 18px 0;
    justify-content:flex-start;
  }
  .lp-art::after{
    background:
      linear-gradient(180deg, rgba(8,10,14,.70) 0%, rgba(8,10,14,.34) 26%, rgba(8,10,14,.55) 48%, rgba(8,10,14,.92) 66%),
      radial-gradient(90% 44% at 25% 30%, rgba(0,85,232,.26), transparent 74%);
  }
  /* THE HEAD MUST FIT ABOVE THE PANEL. The panel takes 74dvh, so everything
     here — brand, eyebrow, headline, chips — has to live inside the remaining
     26dvh. It didn't: on a 727px-tall phone the chips ran 46px UNDER the panel.
     I missed it because a `max-height:720` rule was hiding the chips on the
     shorter test devices, so the collision only existed on taller screens.
     Sized down until it clears with room to spare. Measured, not eyeballed. */
  .lp-say{ margin-top:12px; max-width:none; }   /* NOT auto — it must sit at the TOP */
  .lp-h1{ font-size:clamp(19px,5.2vw,25px); line-height:1.17; }
  .lp-sub{ display:none; }                      /* the panel is the message on a phone */
  .lp-eyebrow{ margin-bottom:8px; font-size:9.5px; padding:4px 9px; letter-spacing:.09em; }
  .lp-trust{ margin-top:9px; gap:5px; }
  .lp-chip{ font-size:9.5px; padding:4px 8px; }
  .lp-brand-name{ font-size:13px; }
  .lp-brand-name small{ font-size:10px; }
  .lp-mark{ width:30px; height:30px; border-radius:8px; }
  .lp-mark svg{ width:16px; height:16px; }
  .lp-secure{ font-size:10px; }

  .lp-panel{
    position:absolute; left:0; right:0; bottom:0;
    height:74dvh;                  /* the funnel gets the lion's share */
    border-radius:24px 24px 0 0;
    padding:16px 18px calc(10px + env(safe-area-inset-bottom));
    box-shadow:0 -14px 44px rgba(0,0,0,.34);
    z-index:3;
  }
  .lp-progress{ margin-bottom:14px; }
  .lp-q{ font-size:19.5px; margin-bottom:4px; }
  .lp-hint{ font-size:13px; margin-bottom:14px; }
  .lp-opts{ gap:7px; }
  .lp-opt{ padding:13px 14px; font-size:14.5px; gap:10px; }
  .lp-actions{ padding-top:12px; }
  .lp-next{ padding:14px 20px; font-size:15px; }
  .lp-field{ margin-bottom:11px; }
  .lp-field input{ padding:12px 14px; }
  .lp-consent{ padding:11px; }
  .lp-consent span{ font-size:11.5px; }
  .lp-foot{ padding-top:10px; font-size:9.5px; line-height:1.45; }
  .lp-done h2{ font-size:22px; }
  .lp-done p{ font-size:14px; }
  .lp-tick{ width:52px; height:52px; margin-bottom:14px; }
  .lp-next-steps{ margin-top:16px; padding:13px 15px; }
  .lp-next-steps li{ font-size:12.5px; margin-bottom:7px; }
}

/* Short phones — the headline yields, the funnel never does. Every pixel the
   photograph gives up goes straight to the question. */
/* Short phones. Every pixel the head gives up goes to the funnel — but the head
   must STILL clear the panel. Both constraints are measured; neither yields. */
@media (max-height: 720px) and (max-width: 900px){
  .lp-trust{ display:none; }        /* genuinely no room on a short phone */
  .lp-eyebrow{ display:none; }
  .lp-h1{ font-size:17.5px; line-height:1.2; }
  .lp-brand-name small{ display:none; }
  .lp-art{ padding-top:12px; }
  .lp-panel{ height:78dvh; }
  .lp-foot{ font-size:9px; }
}
@media (max-height: 620px) and (max-width: 900px){
  /* Trim the HEAD, not the panel — the funnel already has no slack here. */
  .lp-h1{ font-size:15px; }
  .lp-art{ padding-top:10px; }
  .lp-panel{ height:82dvh; padding-top:14px; }
  .lp-q{ font-size:17.5px; }
  .lp-hint{ font-size:12px; margin-bottom:10px; }
  .lp-opt{ padding:10px 12px; font-size:13.5px; }
  .lp-opts{ gap:5px; }
  .lp-next{ padding:12px 18px; font-size:14.5px; }
  .lp-actions{ padding-top:10px; }
  .lp-foot{ font-size:8.5px; padding-top:7px; }
  /* the name + mobile + consent step is the tallest thing in the funnel */
  .lp-field{ margin-bottom:8px; }
  .lp-field label{ font-size:12px; margin-bottom:4px; }
  .lp-field input{ padding:10px 12px; }
  .lp-consent{ padding:9px 10px; gap:9px; }
  .lp-consent span{ font-size:10.5px; line-height:1.45; }
  .lp-progress{ margin-bottom:11px; }
}

@media (prefers-reduced-motion: reduce){
  .lp-step.on{ animation:none; }
  .lp-tick path{ animation:none; stroke-dashoffset:0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   THE FLOURISHES

   The rule I held to: ONE signature moment, and everything else stays quiet.
   The signature is the gap counting up on the income-protection page — that is
   the number the whole funnel exists to show, so it earns the spotlight.
   Everything below is small, fast, and gets out of the way.

   Every single thing here is switched off under prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── the photograph breathes ──────────────────────────────────────────────
   A 24-second drift. Slow enough that you never catch it moving, but the page
   is never quite still — which is the difference between a screenshot and a
   place. Scale sits above 1 so no edge is ever exposed. */
@keyframes lp-drift{
  0%   { transform:scale(1.06) translate3d(0,0,0); }
  50%  { transform:scale(1.12) translate3d(-1.2%,-1.4%,0); }
  100% { transform:scale(1.06) translate3d(0,0,0); }
}
.lp-art img{
  animation:lp-drift 24s ease-in-out infinite;
  will-change:transform;
}

/* ── the page arrives ─────────────────────────────────────────────────────
   A short stagger, not a parade. Brand, eyebrow, headline, chips, then the
   panel rising last — so the eye lands on the promise before the form. */
@keyframes lp-rise{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
@keyframes lp-rise-sm{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
@keyframes lp-panel-in{ from{ opacity:0; transform:translateY(30px); } to{ opacity:1; transform:none; } }

.lp-brand   { animation:lp-rise-sm .5s cubic-bezier(.16,1,.3,1) .05s both; }
.lp-eyebrow { animation:lp-rise-sm .5s cubic-bezier(.16,1,.3,1) .16s both; }
.lp-h1      { animation:lp-rise    .7s cubic-bezier(.16,1,.3,1) .22s both; }
.lp-sub     { animation:lp-rise    .7s cubic-bezier(.16,1,.3,1) .34s both; }
.lp-trust   { animation:lp-rise-sm .6s cubic-bezier(.16,1,.3,1) .44s both; }
.lp-panel   { animation:lp-panel-in .78s cubic-bezier(.16,1,.3,1) .12s both; }

/* the trust chips land one after another, left to right */
.lp-chip{ animation:lp-rise-sm .45s cubic-bezier(.16,1,.3,1) both; }
.lp-chip:nth-child(1){ animation-delay:.50s; }
.lp-chip:nth-child(2){ animation-delay:.58s; }
.lp-chip:nth-child(3){ animation-delay:.66s; }
/* the live dot on each chip has a pulse — the page has a heartbeat */
@keyframes lp-pulse{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.45; transform:scale(.82); } }
.lp-chip i{ animation:lp-pulse 2.4s ease-in-out infinite; }
.lp-chip:nth-child(2) i{ animation-delay:.4s; }
.lp-chip:nth-child(3) i{ animation-delay:.8s; }

/* ── step transitions know which way you're going ─────────────────────────
   Forward slides in from the right. Back slides in from the left. It is a
   small thing and nobody will name it, but going Back FEELS like going back. */
@keyframes lp-fwd { from{ opacity:0; transform:translateX(22px); } to{ opacity:1; transform:none; } }
@keyframes lp-rev { from{ opacity:0; transform:translateX(-22px); } to{ opacity:1; transform:none; } }
.lp-steps.fwd .lp-step.on{ animation:lp-fwd .38s cubic-bezier(.16,1,.3,1); }
.lp-steps.rev .lp-step.on{ animation:lp-rev .38s cubic-bezier(.16,1,.3,1); }

/* the question and its options cascade in behind the step */
.lp-step.on .lp-q    { animation:lp-rise-sm .42s cubic-bezier(.16,1,.3,1) .04s both; }
.lp-step.on .lp-hint { animation:lp-rise-sm .42s cubic-bezier(.16,1,.3,1) .09s both; }
.lp-step.on .lp-opt  { animation:lp-rise-sm .42s cubic-bezier(.16,1,.3,1) both; }
.lp-step.on .lp-opt:nth-child(1){ animation-delay:.12s; }
.lp-step.on .lp-opt:nth-child(2){ animation-delay:.17s; }
.lp-step.on .lp-opt:nth-child(3){ animation-delay:.22s; }
.lp-step.on .lp-opt:nth-child(4){ animation-delay:.27s; }
.lp-step.on .lp-opt:nth-child(5){ animation-delay:.32s; }

/* ── the option itself ────────────────────────────────────────────────────*/
.lp-opt{ position:relative; overflow:hidden; }
/* a wash sweeps across the row the moment you pick it — a beat of confirmation
   before the step moves on */
.lp-opt::after{
  content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(90deg, rgba(0,85,232,.16), rgba(0,85,232,0));
  transform:translateX(-100%);
  pointer-events:none;
}
.lp-opt.on::after{ animation:lp-sweep .5s cubic-bezier(.16,1,.3,1); }
@keyframes lp-sweep{ from{ transform:translateX(-100%); } to{ transform:translateX(100%); } }
.lp-opt > *{ position:relative; z-index:1; }
.lp-opt:hover{ transform:translateX(2px); }
/* the tick springs rather than appears */
.lp-opt.on .rd{ animation:lp-pop .34s cubic-bezier(.34,1.56,.64,1); }
@keyframes lp-pop{ 0%{ transform:scale(.5); } 60%{ transform:scale(1.18); } 100%{ transform:scale(1); } }

/* ── the primary button ───────────────────────────────────────────────────*/
.lp-next{ position:relative; overflow:hidden; }
.lp-next::before{
  content:""; position:absolute; top:0; bottom:0; left:-40%; width:32%;
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.22), rgba(255,255,255,0));
  transform:skewX(-18deg);
  transition:left .55s cubic-bezier(.16,1,.3,1);
}
.lp-next:hover::before{ left:120%; }
.lp-next:not(:disabled){ box-shadow:0 6px 18px rgba(0,85,232,.28); }
.lp-next:not(:disabled):hover{ box-shadow:0 10px 26px rgba(0,85,232,.36); transform:translateY(-1px); }
.lp-next span, .lp-next svg{ position:relative; z-index:1; }
/* the arrow leans forward when you hover */
.lp-next svg{ transition:transform .28s cubic-bezier(.16,1,.3,1); }
.lp-next:hover svg{ transform:translateX(3px); }
/* while it's sending */
.lp-next.busy::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
  animation:lp-shimmer 1.1s linear infinite;
}
@keyframes lp-shimmer{ from{ transform:translateX(-100%); } to{ transform:translateX(100%); } }

/* ── the progress bar ─────────────────────────────────────────────────────*/
.lp-track i{ position:relative; overflow:hidden; }
.lp-track i::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  animation:lp-shimmer 2.2s linear infinite;
}
/* the counter ticks over rather than swapping */
@keyframes lp-tick{ 0%{ opacity:0; transform:translateY(-5px); } 100%{ opacity:1; transform:none; } }
.lp-count{ animation:lp-tick .3s cubic-bezier(.16,1,.3,1); }

/* ── fields ───────────────────────────────────────────────────────────────*/
.lp-field input{ transition:border-color .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease), transform .18s var(--ease); }
.lp-field input:focus{ transform:translateY(-1px); }
.lp-consent{ transition:border-color .18s var(--ease), background .18s var(--ease); }
.lp-consent:hover{ border-color:var(--line-strong); }
.lp-consent:has(input:checked){ border-color:var(--accent); background:rgba(0,85,232,.05); }
/* a bad field shakes once — you cannot miss it, and it doesn't nag */
@keyframes lp-shake{ 0%,100%{transform:translateX(0)} 20%{transform:translateX(-5px)} 40%{transform:translateX(5px)} 60%{transform:translateX(-3px)} 80%{transform:translateX(3px)} }
.lp-field.bad, .lp-consent.bad{ animation:lp-shake .4s cubic-bezier(.36,.07,.19,.97); }

/* ── the finish ───────────────────────────────────────────────────────────*/
.lp-tick{ animation:lp-pop .55s cubic-bezier(.34,1.56,.64,1) both; }
/* a ring pushes out from behind the tick, once */
.lp-tick::after{
  content:""; position:absolute; width:62px; height:62px; border-radius:50%;
  border:2px solid var(--accent);
  animation:lp-ring 1.1s cubic-bezier(.16,1,.3,1) .3s both;
}
@keyframes lp-ring{ 0%{ transform:scale(.8); opacity:.7; } 100%{ transform:scale(1.9); opacity:0; } }
.lp-tick{ position:relative; }
.lp-done h2         { animation:lp-rise-sm .5s cubic-bezier(.16,1,.3,1) .22s both; }
.lp-done > p        { animation:lp-rise-sm .5s cubic-bezier(.16,1,.3,1) .32s both; }
.lp-next-steps      { animation:lp-rise-sm .5s cubic-bezier(.16,1,.3,1) .44s both; }
.lp-next-steps li   { animation:lp-rise-sm .4s cubic-bezier(.16,1,.3,1) both; }
.lp-next-steps li:nth-child(1){ animation-delay:.54s; }
.lp-next-steps li:nth-child(2){ animation-delay:.62s; }
.lp-next-steps li:nth-child(3){ animation-delay:.70s; }

/* ── EVERYTHING ABOVE IS OFF FOR ANYONE WHO ASKED FOR IT TO BE ────────────*/
@media (prefers-reduced-motion: reduce){
  .lp-art img,
  .lp-brand, .lp-eyebrow, .lp-h1, .lp-sub, .lp-trust, .lp-chip, .lp-chip i, .lp-panel,
  .lp-steps.fwd .lp-step.on, .lp-steps.rev .lp-step.on,
  .lp-step.on .lp-q, .lp-step.on .lp-hint, .lp-step.on .lp-opt,
  .lp-opt.on::after, .lp-opt.on .rd, .lp-track i::after, .lp-count,
  .lp-next.busy::after, .lp-field.bad, .lp-consent.bad,
  .lp-tick, .lp-tick::after, .lp-done h2, .lp-done > p, .lp-next-steps, .lp-next-steps li{
    animation:none !important;
  }
  .lp-opt:hover, .lp-next:hover, .lp-field input:focus{ transform:none; }
  .lp-next::before{ display:none; }
}