/* dev4u funnel — extends dev4u.css design tokens (carbon/charcoal/pulse, Space Grotesk + Inter, Tabler icons) */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500;700&display=swap');

/* ---------- interactive flow shell: bounded, no viewport-height voids ---------- */
.funnel-shell{padding:clamp(64px,9vw,112px) 24px}
.funnel-main{max-width:1160px;margin:0 auto}
.funnel-card{max-width:620px;margin:0 auto;width:100%}
.funnel-card.wide{max-width:1100px}

.funnel-step{display:none}
.funnel-step.active{display:block;animation:funnel-in .4s ease}
@keyframes funnel-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion: reduce){.funnel-step.active{animation:none}}

.funnel-domain-form{display:flex;gap:10px;margin-top:28px}
.funnel-domain-form input{flex:1;background:var(--charcoal);border:1px solid var(--line);color:var(--text);padding:14px 18px;border-radius:10px;font-family:var(--body);font-size:15px;outline:none;transition:.15s}
.funnel-domain-form input::placeholder{color:var(--muted-2)}
.funnel-domain-form input:focus{border-color:var(--pulse);box-shadow:0 0 0 3px var(--pulse-soft)}

.field-check{display:flex;gap:10px;align-items:flex-start;margin:18px 0;font-size:14px;color:var(--muted);line-height:1.5}
.field-check input[type=checkbox]{margin-top:3px;width:18px;height:18px;accent-color:var(--pulse);flex-shrink:0}
.field-check a{color:var(--pulse)}

.funnel-note{font-size:13px;color:var(--muted);margin-top:14px}
.funnel-error{color:#FF6B6B;font-size:14px;margin-top:10px;display:none}
.funnel-error.show{display:block}

/* score reveal */
.score-ring{width:180px;height:180px;margin:0 auto 20px;position:relative;display:grid;place-items:center}
.score-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.score-ring circle{fill:none;stroke-width:10}
.score-ring .track{stroke:var(--line-2)}
.score-ring .fill{stroke:var(--pulse);stroke-linecap:round;transition:stroke-dashoffset 1.2s cubic-bezier(.16,1,.3,1)}
@media (prefers-reduced-motion: reduce){.score-ring .fill{transition:none}}
.score-ring .val{position:absolute;font-family:var(--display);font-weight:700;font-size:40px;letter-spacing:-1px;text-align:center;width:120px}
.score-ring .val small{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:500;color:var(--muted);display:block;margin-top:4px;letter-spacing:.3px;text-transform:uppercase}

.score-pending{text-align:center;padding:32px 24px;background:var(--charcoal);border:1px solid var(--line);border-radius:var(--radius)}
.score-pending .ico{width:52px;height:52px;border-radius:50%;background:var(--pulse-soft);color:var(--pulse);display:grid;place-items:center;margin:0 auto 16px;font-size:24px}

.checklist-item{display:flex;align-items:center;gap:14px;padding:16px 18px;background:var(--charcoal);border:1px solid var(--line);border-radius:12px;margin-bottom:10px}
.checklist-item .status-ico{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;font-size:16px}
.checklist-item.done .status-ico{background:rgba(46,204,113,0.14);color:#2ECC71}
.checklist-item.active .status-ico{background:var(--pulse-soft);color:var(--pulse)}
.checklist-item.pending .status-ico{background:var(--line);color:var(--muted)}
.checklist-item .body{flex:1}
.checklist-item .name{font-family:var(--display);font-weight:500;font-size:15px}
.checklist-item .detail{font-size:13px;color:var(--muted);margin-top:2px}
.checklist-item .badge{font-family:'JetBrains Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:.5px;padding:4px 10px;border-radius:6px}
.checklist-item.done .badge{background:rgba(46,204,113,0.14);color:#2ECC71}
.checklist-item.active .badge{background:var(--pulse-soft);color:var(--pulse)}
.checklist-item.pending .badge{background:var(--line);color:var(--muted)}

.dash-grid{display:grid;grid-template-columns:1fr;gap:20px;max-width:720px;margin:0 auto;padding:60px 24px}
@media (min-width:720px){.dash-grid{grid-template-columns:1.1fr 1fr}}
.dash-card{background:var(--charcoal);border:1px solid var(--line);border-radius:var(--radius);padding:28px}
.dash-card h2{font-family:var(--display);font-weight:500;font-size:18px;margin-bottom:18px}

.upsell-cta{text-align:center;padding:24px}
.upsell-cta p{color:var(--muted);font-size:14px;margin:10px 0 18px}
.upsell-cta .btn:disabled{opacity:.45;cursor:not-allowed}
.upsell-cta .btn-note{font-size:12px;color:var(--muted);margin-top:10px}

/* ---------- hook funnel: hero step (two-column on desktop) ---------- */
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;text-align:left}
@media(max-width:920px){.hero-grid{grid-template-columns:1fr;text-align:center}}
.hook-hero h1{font-family:var(--display);font-weight:700;font-size:clamp(32px,4.2vw,50px);line-height:1.08;letter-spacing:-1.5px}
.hook-hero .hero-sub{max-width:48ch}
@media(max-width:920px){.hook-hero .hero-sub{margin-left:auto;margin-right:auto}.funnel-domain-form{max-width:480px;margin-left:auto;margin-right:auto}}

.hero-visual{position:relative}
.hero-visual-tag{display:inline-flex;align-items:center;gap:6px;font-family:'JetBrains Mono',monospace;font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted-2);background:var(--carbon);border:1px solid var(--line-2);padding:5px 10px;border-radius:6px;margin-bottom:14px}
.chat-mock{background:var(--charcoal);border:1px solid var(--line);border-radius:18px;padding:22px;box-shadow:0 30px 70px rgba(0,0,0,.4)}
.chat-bubble{border-radius:14px;padding:13px 16px;font-size:14px;line-height:1.5;margin-bottom:14px;max-width:88%}
.chat-bubble.q{background:var(--carbon);color:var(--muted);margin-left:auto;border:1px solid var(--line)}
.chat-bubble.a{background:var(--pulse-soft);border:1px solid rgba(255,90,31,.28);display:flex;flex-direction:column;gap:8px}
.chat-bubble.a .who{display:flex;align-items:center;gap:8px;font-family:var(--display);font-weight:500;font-size:12px;color:var(--pulse)}
.chat-bubble.a .who i{font-size:15px}
.chat-bubble.a p{color:var(--text)}
.chat-bubble.a b{color:var(--pulse)}
.chat-slot-empty{display:flex;align-items:center;gap:12px;border:1.5px dashed var(--line-2);border-radius:12px;padding:13px 16px;color:var(--muted-2);font-size:13px}
.chat-slot-empty i{font-size:20px;color:var(--muted-2);flex-shrink:0}
@media (prefers-reduced-motion: no-preference){.chat-slot-empty{animation:slotpulse 2.6s ease-in-out infinite}}
@keyframes slotpulse{0%,100%{border-color:var(--line-2)}50%{border-color:var(--pulse)}}

/* ---------- scan step ---------- */
.scan-list{list-style:none;margin-top:32px;display:flex;flex-direction:column;gap:10px;max-width:340px;margin-left:auto;margin-right:auto}
.scan-list li{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--charcoal);border:1px solid var(--line);border-radius:10px;font-family:var(--display);font-size:15px;color:var(--muted);transition:.3s}
.scan-list li .dot{width:18px;height:18px;border-radius:50%;border:2px solid var(--line-2);flex-shrink:0;position:relative;transition:.3s}
.scan-list li.active{color:var(--text);border-color:var(--pulse)}
.scan-list li.active .dot{border-color:var(--pulse)}
.scan-list li.active .dot::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--pulse);animation:scandot 1s ease-in-out infinite}
.scan-list li.done{color:var(--text)}
.scan-list li.done .dot{border-color:#2ECC71;background:#2ECC71}
.scan-list li.done .dot::after{content:"\2713";position:absolute;inset:0;display:grid;place-items:center;font-size:11px;color:var(--carbon);font-weight:700}
@keyframes scandot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}
@media (prefers-reduced-motion: reduce){.scan-list li.active .dot::after{animation:none}}
.scan-caption{text-align:center;color:var(--muted);font-size:14px;margin-top:24px}

/* ---------- partial reveal: honest, no fake numbers ---------- */
.preview-card{position:relative;background:var(--charcoal);border:1px solid var(--line);border-radius:var(--radius);padding:28px;overflow:hidden}
.preview-card .sample-tag{position:absolute;top:16px;right:16px;font-family:'JetBrains Mono',monospace;font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted-2);background:var(--carbon);border:1px solid var(--line-2);padding:5px 10px;border-radius:6px}
.preview-skel{filter:blur(6px);opacity:.55;pointer-events:none;user-select:none}
.preview-skel .bar{height:14px;border-radius:7px;background:var(--line-2);margin-bottom:12px}
.preview-skel .bar.w60{width:60%}.preview-skel .bar.w80{width:80%}.preview-skel .bar.w40{width:40%}
.preview-lock{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:24px;background:linear-gradient(180deg,rgba(22,24,28,0)0%,rgba(22,24,28,.92)45%)}
.preview-lock .ico{width:48px;height:48px;border-radius:50%;background:var(--pulse-soft);color:var(--pulse);display:grid;place-items:center;font-size:22px}
.preview-lock p{max-width:34ch;color:var(--muted);font-size:14px}
.preview-real-line{background:var(--carbon);border:1px solid var(--line);border-radius:10px;padding:14px 16px;font-size:14px;color:var(--muted);margin-bottom:20px;display:flex;gap:10px;align-items:flex-start}
.preview-real-line i{color:var(--pulse);font-size:18px;margin-top:1px;flex-shrink:0}

/* ---------- static sections below the funnel: unified spacing + alternating bands ---------- */
.hook-section{padding:clamp(64px,9vw,128px) 0}
.hook-section .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.hook-section.alt{background:var(--carbon-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section-head.left{text-align:left;margin-left:0;margin-right:0}
.gap-card{display:flex;align-items:flex-start;gap:14px;background:var(--charcoal);border:1px solid var(--line);border-radius:12px;padding:20px}
.gap-card i{color:var(--pulse);font-size:22px;margin-top:2px;flex-shrink:0}
.gap-card h3{font-family:var(--display);font-weight:500;font-size:16px}
.gap-card p{color:var(--muted);font-size:14px;margin-top:6px}

/* ---------- stat strip (market-shift proof, attributed, no invented numbers) ---------- */
.stat-strip{padding:clamp(48px,6vw,72px) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--carbon-2)}
.stat-strip .lede{text-align:center;color:var(--muted);font-size:14px;max-width:56ch;margin:0 auto 32px}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media(max-width:920px){.stat-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.stat-grid{grid-template-columns:1fr}}
.stat-card{text-align:center}
.stat-card .n{font-family:var(--display);font-weight:700;font-size:clamp(26px,3vw,34px);letter-spacing:-1px;color:var(--pulse)}
.stat-card .d{font-size:13px;color:var(--muted);margin-top:6px;line-height:1.5}
.stat-card .src{display:block;font-family:'JetBrains Mono',monospace;font-size:10px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted-2);margin-top:8px}
.stat-caveat{text-align:center;color:var(--muted-2);font-size:12px;max-width:60ch;margin:24px auto 0}

/* ---------- value-first reveal: real value up front, sample-tagged until keys are live ---------- */
.reveal-value{background:var(--charcoal);border:1px solid var(--line);border-radius:var(--radius);padding:26px;position:relative;margin-bottom:16px}
.reveal-value .sample-tag{position:absolute;top:16px;right:16px}
.reveal-value h4{font-family:var(--display);font-weight:500;font-size:14px;color:var(--muted);margin-bottom:14px}

.compare-bars{display:flex;flex-direction:column;gap:12px;margin-bottom:22px}
.compare-row{display:grid;grid-template-columns:110px 1fr 44px;align-items:center;gap:12px}
.compare-label{font-size:13px;color:var(--muted)}
.compare-track{height:10px;background:var(--line-2);border-radius:6px;overflow:hidden}
.compare-fill{height:100%;border-radius:6px}
.compare-fill.you{background:var(--pulse)}
.compare-fill.competitor{background:var(--muted-2)}
.compare-val{font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:500;text-align:right}

.qa-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.qa-row:first-of-type{border-top:none}
.qa-row .qtext{flex:1;font-size:14px;color:var(--text)}
.qa-badge{font-family:'JetBrains Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:.4px;padding:5px 10px;border-radius:6px;flex-shrink:0;display:inline-flex;align-items:center;gap:5px}
.qa-badge.yes{background:rgba(46,204,113,0.14);color:#2ECC71}
.qa-badge.no{background:rgba(255,107,107,0.12);color:#FF6B6B}

.reveal-locked{position:relative;background:var(--charcoal);border:1px solid var(--line);border-radius:var(--radius);padding:26px;overflow:hidden}
.reveal-locked .preview-skel{margin-bottom:0}
.reveal-locked .preview-lock{position:absolute;inset:0}

/* ---------- gate: WhatsApp-primary capture ---------- */
.gate-reassure{font-size:13px;color:var(--muted);margin:-4px 0 16px;display:flex;align-items:center;gap:6px}
.gate-reassure i{color:#2ECC71}

/* ---------- offer: retainer tiers, placeholder pricing ---------- */
.tier-card{background:var(--charcoal);border:1px solid var(--line);border-radius:var(--radius);padding:28px;display:flex;flex-direction:column}
.tier-card.featured{border-color:var(--pulse);position:relative}
.tier-card.featured::before{content:"Most popular";position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--pulse);color:var(--carbon);font-family:var(--display);font-weight:500;font-size:12px;padding:5px 14px;border-radius:20px;white-space:nowrap}
.tier-card h3{font-family:var(--display);font-weight:500;font-size:19px}
.tier-card .price{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:28px;margin:14px 0 4px;color:var(--pulse)}
.tier-card .price-note{font-size:12px;color:var(--muted-2);margin-bottom:18px}
.tier-card ul{list-style:none;display:flex;flex-direction:column;gap:10px;margin-bottom:22px;flex:1}
.tier-card li{display:flex;gap:10px;font-size:14px;color:var(--muted)}
.tier-card li i{color:var(--pulse);font-size:16px;margin-top:2px;flex-shrink:0}
.offer-secondary{text-align:center;margin-top:28px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}