/* Drones on the Fly click funnel: mobile-first, matches site theme.
   Uses the same CSS variables as assets/style.css (loaded before this file). */

.funnel{padding:56px 0 80px}
.funnel h1{font-size:clamp(44px,8vw,76px);text-transform:uppercase;letter-spacing:.01em}
.funnel-sub{color:var(--ash);font-size:17px;max-width:34rem}
.funnel-loc{margin:22px 0 0;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ash)}

/* ---------- progress ---------- */
.funnel-progress{margin:30px 0 10px;max-width:34rem}
.funnel-step-label{font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:.12em;text-transform:uppercase;color:var(--orange2);margin:0 0 10px}
.funnel-bar{height:8px;background:#ffffff1c;border-radius:99px;overflow:hidden}
.funnel-fill{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--orange),var(--orange2));border-radius:99px;transition:width .35s ease}

/* ---------- steps ---------- */
.funnel-steps{max-width:44rem}
.fstep{display:none}
.fstep.is-active{display:block;animation:fstepIn .35s ease}
@keyframes fstepIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.fstep h2{font-size:clamp(32px,6vw,52px);text-transform:uppercase;letter-spacing:.01em;margin:0 0 10px}
.fstep-sub{color:var(--ash);font-size:16px;margin:0}

.answer-grid{display:grid;gap:14px;margin-top:26px}
@media(min-width:760px){.answer-grid{grid-template-columns:1fr 1fr}}
.answer-card{position:relative;text-align:left;background:var(--carbon);border:2px solid #ffffff22;color:var(--paper);padding:20px 22px;cursor:pointer;min-height:84px;font-family:var(--body);font-size:16px;border-radius:6px;transition:transform .15s ease,border-color .15s ease,background .15s ease,box-shadow .15s ease;-webkit-tap-highlight-color:transparent}
.answer-card:hover{border-color:var(--orange2);transform:translateY(-2px)}
.answer-card:focus-visible{outline:3px solid var(--orange2);outline-offset:2px}
.answer-card strong{display:block;font-family:var(--display);font-weight:700;font-size:22px;line-height:1.05;letter-spacing:.02em;text-transform:uppercase;margin-bottom:6px;padding-right:28px}
.answer-card span{color:var(--ash);font-size:15px;line-height:1.5}
.answer-card.is-selected{border-color:var(--orange);background:#1c232d;box-shadow:0 0 0 3px #de700955}
.answer-card.is-selected::after{content:"\2713";position:absolute;top:12px;right:14px;color:var(--orange);font-size:24px;font-weight:700}

/* ---------- back / start-over ---------- */
.funnel-back{margin-top:30px;background:transparent;border:1px solid #ffffff2e;color:var(--paper);min-height:48px;padding:0 22px;font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;border-radius:4px;font-family:var(--body)}
.funnel-back:hover{border-color:var(--orange2)}
.funnel-back[hidden]{display:none}
.funnel-crumb{display:inline-block;margin-bottom:18px;color:var(--ash);text-decoration:none;font-size:14px}
.funnel-crumb:hover{color:var(--paper)}

/* ---------- path cards (start.html) ---------- */
.path-grid{display:grid;gap:16px;margin-top:30px}
@media(min-width:860px){.path-grid{grid-template-columns:repeat(3,1fr)}}
.path-card{display:flex;flex-direction:column;gap:10px;text-decoration:none;background:var(--carbon);border:2px solid #ffffff22;padding:30px 26px;color:var(--paper);border-radius:6px;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;-webkit-tap-highlight-color:transparent}
.path-card:hover,.path-card:focus-visible{border-color:var(--orange);transform:translateY(-4px);box-shadow:0 18px 44px #0008}
.path-num{font-family:var(--display);font-weight:800;font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:var(--orange2)}
.path-card h2{font-size:34px;text-transform:uppercase;letter-spacing:.01em}
.path-card p{color:var(--ash);font-size:15px;margin:0;flex:1}
.path-go{font-family:var(--display);font-weight:700;font-size:16px;letter-spacing:.1em;text-transform:uppercase;color:var(--orange);margin-top:8px}

/* ---------- payoff ---------- */
.payoff{animation:fstepIn .45s ease}
.payoff-kicker{font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:var(--orange2);margin:0 0 12px}
.payoff h2{font-size:clamp(34px,6.5vw,56px);text-transform:uppercase;letter-spacing:.01em;margin:0 0 16px}
.payoff-body{max-width:38rem}
.payoff-body p{font-size:17px;margin:0 0 14px}
.payoff-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.payoff-links .btn{text-decoration:none}
.payoff-recap{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.recap-chip{border:1px solid #ffffff2e;padding:7px 14px;font-size:13px;color:var(--ash);border-radius:99px;letter-spacing:.02em}
.recap-chip b{color:var(--paper);font-weight:600}
.payoff-confetti{position:relative;height:0;pointer-events:none}
.payoff-confetti i{position:absolute;top:-6px;width:9px;height:14px;opacity:0;animation:confettiFall 1.7s ease-in forwards}
@keyframes confettiFall{0%{opacity:1;transform:translateY(0) rotate(0deg)}100%{opacity:0;transform:translateY(110px) rotate(560deg)}}

/* ---------- guide picks (learn path) ---------- */
.guide-picks{display:grid;gap:14px;margin-top:24px}
@media(min-width:760px){.guide-picks{grid-template-columns:1fr 1fr}}
.guide-pick{display:block;background:var(--carbon);border:2px solid #ffffff22;padding:22px;color:var(--paper);text-decoration:none;border-radius:6px;transition:transform .15s ease,border-color .15s ease}
.guide-pick:hover{border-color:var(--orange);transform:translateY(-2px)}
.guide-pick h3{font-size:24px;text-transform:uppercase;letter-spacing:.02em;margin:0 0 8px}
.guide-pick p{color:var(--ash);font-size:14px;margin:0}

/* ---------- capture panels inside payoff ---------- */
.payoff-capture{margin-top:36px;background:var(--carbon);border-top:4px solid var(--orange);padding:28px;max-width:38rem;border-radius:0 0 6px 6px}
.payoff-capture h3{font-size:28px;text-transform:uppercase;letter-spacing:.02em;margin:0 0 8px}
.payoff-capture>p{color:var(--ash);font-size:15px;margin:0 0 18px}
.payoff-capture .capture-form{max-width:22rem}
.funnel-note{color:var(--ash);font-size:14px;margin:14px 0 0;max-width:38rem}
.branch-form[hidden]{display:none}

@media(prefers-reduced-motion:reduce){
  .fstep.is-active,.payoff{animation:none}
  .payoff-confetti{display:none}
  .funnel-fill{transition:none}
}