/* ============================================================
   Lectual — Funnel (client-facing, System B by default)
   Mobile-first centered flow. Consumes --firm-* tokens.
   ============================================================ */
:root{
  --firm-primary: var(--accent);
  --firm-primary-hover: var(--accent-press);
  --firm-on-primary: var(--on-accent);
  --firm-font-display: var(--font-display);
}
html,body{height:100%}
body{background:var(--paper)}

.funnel{min-height:100vh;display:flex;flex-direction:column;background:
  radial-gradient(120% 80% at 50% -10%, color-mix(in srgb,var(--firm-primary) 7%,var(--paper)) 0%, var(--paper) 55%)}

/* top bar */
.fbar{display:flex;align-items:center;gap:12px;padding:16px 22px;max-width:560px;margin:0 auto;width:100%}
.fbar .echo{font-size:19px}
.fbar .fwm{display:flex;align-items:center;gap:9px;font-family:var(--firm-font-display);font-weight:700;font-size:17px;letter-spacing:-.01em}
.fbar .fwm .lg{width:30px;height:30px;border-radius:8px;background:var(--firm-primary);color:var(--firm-on-primary);display:grid;place-items:center;font-weight:700;font-size:14px;flex:0 0 auto}
.fbar .sp{flex:1}
.fbar .secure{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.04em;color:var(--ink-3)}
.fbar .secure svg{width:13px;height:13px;color:var(--protected)}

/* stage wrapper */
.stage{flex:1;display:flex;flex-direction:column;align-items:center;padding:14px 20px 60px}
.stage-card{width:100%;max-width:520px}
.wide{max-width:660px}

/* progress */
.fprog{display:flex;align-items:center;gap:12px;margin-bottom:26px}
.fprog .bar{flex:1;height:6px;border-radius:5px;background:var(--border-2);overflow:hidden}
.fprog .bar i{display:block;height:100%;background:var(--firm-primary);border-radius:5px;transition:width .45s cubic-bezier(.22,1,.36,1)}
.fprog .lbl{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;color:var(--ink-3);white-space:nowrap}

/* intro */
.fintro{text-align:center;padding-top:24px}
.fintro .badge{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--firm-primary);background:var(--accent-soft);border-radius:30px;padding:7px 15px;margin-bottom:22px}
.fintro h1{font-family:var(--firm-font-display);font-weight:800;font-size:clamp(30px,7vw,44px);letter-spacing:-.03em;line-height:1.02;margin-bottom:14px}
.fintro p{font-size:16.5px;color:var(--ink-2);line-height:1.55;max-width:38ch;margin:0 auto 26px}
.fintro .meta{display:flex;justify-content:center;gap:22px;margin-bottom:30px;flex-wrap:wrap}
.fintro .meta .m{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-2)}
.fintro .meta .m svg{width:16px;height:16px;color:var(--firm-primary)}

/* question */
.qhead{margin-bottom:20px}
.qhead .qn{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--firm-primary);margin-bottom:10px}
.qhead h2{font-family:var(--firm-font-display);font-weight:700;font-size:clamp(23px,4.5vw,29px);letter-spacing:-.02em;line-height:1.12}
.qhead .help{font-size:14px;color:var(--ink-3);margin-top:8px}
.opts{display:flex;flex-direction:column;gap:11px}
.opt{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:var(--surface);border:1.5px solid var(--border-2);border-radius:14px;padding:16px 18px;cursor:pointer;transition:.14s;font-family:var(--font-body);font-size:16px;color:var(--ink)}
.opt:hover{border-color:var(--firm-primary);background:var(--accent-soft)}
.opt.sel{border-color:var(--firm-primary);background:var(--accent-soft);font-weight:600}
.opt .box{width:24px;height:24px;border-radius:7px;border:1.5px solid var(--border-2);display:grid;place-items:center;flex:0 0 auto;transition:.14s}
.opt.multi .box{border-radius:7px}
.opt.single .box,.opt.radio .box{border-radius:50%}
.opt.sel .box{background:var(--firm-primary);border-color:var(--firm-primary);color:var(--firm-on-primary)}
.opt .box svg{width:14px;height:14px;opacity:0;transition:.14s}
.opt.sel .box svg{opacity:1}
.opt .tag{margin-left:auto;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);border:1px solid var(--border-2);border-radius:20px;padding:3px 9px}
.opt.sel .tag{color:var(--firm-primary);border-color:color-mix(in srgb,var(--firm-primary) 40%,transparent)}

.fnav{display:flex;align-items:center;gap:12px;margin-top:26px}
.fnav .back{background:none;border:none;font-family:var(--font-body);font-size:14px;color:var(--ink-3);cursor:pointer;padding:8px 4px}
.fnav .back:hover{color:var(--ink)}
.fnav .sp{flex:1}

/* computing */
.computing{text-align:center;padding-top:60px}
.computing .ring{width:64px;height:64px;margin:0 auto 22px;border:4px solid var(--border-2);border-top-color:var(--firm-primary);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.computing .ph{font-family:var(--firm-font-display);font-weight:700;font-size:22px;letter-spacing:-.01em;margin-bottom:8px}
.computing .ps{font-size:14.5px;color:var(--ink-2);min-height:22px;transition:.2s}

/* ============================ RESULTS ============================ */
.res-hero{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:28px;box-shadow:var(--shadow);text-align:center;margin-bottom:18px}
.res-hero .k{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:16px}
.res-gauge{display:flex;justify-content:center;margin-bottom:12px}
.gauge{position:relative}
.gauge svg{transform:rotate(-90deg);display:block}
.gauge .gv{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.gauge .gv b{font-family:var(--firm-font-display);font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--ink)}
.gauge .gv span{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.res-hero h1{font-family:var(--firm-font-display);font-weight:800;font-size:clamp(26px,5vw,34px);letter-spacing:-.02em;line-height:1.05;margin-bottom:10px}
.res-hero p{font-size:15.5px;color:var(--ink-2);line-height:1.55;max-width:42ch;margin:0 auto}
.res-pills{display:flex;justify-content:center;gap:9px;flex-wrap:wrap;margin-top:18px}
.rpill{font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;padding:7px 13px;border-radius:30px;border:1px solid var(--border-2);color:var(--ink-2);display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.rpill.hot{background:var(--warning-bg);color:var(--warning);border-color:transparent;font-weight:700}
.rpill svg{width:13px;height:13px}

.res-sec{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:24px;margin-bottom:16px;box-shadow:var(--shadow-sm)}
.res-sec .sh{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.res-sec .sh svg{width:19px;height:19px}
.res-sec .sh .t{font-family:var(--firm-font-display);font-weight:700;font-size:19px;letter-spacing:-.01em;white-space:nowrap}
.res-sec .sh .ct{margin-left:auto;font-family:var(--font-mono);font-size:11px;color:var(--ink-3)}

.flags{display:flex;flex-direction:column;gap:11px}
.rflag{display:flex;gap:12px;align-items:flex-start;padding:13px 15px;border-radius:12px;font-size:14px;line-height:1.45}
.rflag.high{background:color-mix(in srgb,var(--danger) 9%,var(--surface))}
.rflag.med{background:var(--warning-bg)}
.rflag .fi{width:20px;height:20px;flex:0 0 auto;margin-top:1px}
.rflag.high .fi{color:var(--danger)}.rflag.med .fi{color:var(--warning)}
.rflag .ft b{color:var(--ink)}
.rflag .ft{color:var(--ink-2)}

.roadmap{display:flex;flex-direction:column;gap:0}
.rmstep{display:grid;grid-template-columns:auto 1fr auto;gap:15px;padding:16px 0;border-bottom:1px solid var(--border);align-items:start}
.rmstep:last-child{border-bottom:none}
.rmstep .num{width:30px;height:30px;border-radius:9px;background:var(--accent-soft);color:var(--firm-primary);display:grid;place-items:center;font-family:var(--font-mono);font-weight:700;font-size:13px;flex:0 0 auto}
.rmstep .rt{font-family:var(--firm-font-display);font-weight:700;font-size:16px;letter-spacing:-.01em;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.rmstep .rtag{font-family:var(--font-mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;padding:2px 7px;border-radius:20px;background:var(--paper-2);color:var(--ink-3);border:1px solid var(--border)}
.rmstep .rw{font-size:13.5px;color:var(--ink-2);margin-top:4px;line-height:1.45}
.rmstep .cost{font-family:var(--font-mono);font-size:12.5px;font-weight:700;color:var(--ink);white-space:nowrap;text-align:right}
.rmstep .cost span{display:block;font-weight:400;font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}

.skip{background:var(--protected-bg);border:1px solid color-mix(in srgb,var(--protected) 20%,transparent);border-radius:18px;padding:22px 24px;margin-bottom:16px}
.skip .sh{display:flex;align-items:center;gap:10px;margin-bottom:14px;color:var(--protected)}
.skip .sh svg{width:19px;height:19px}
.skip .sh .t{font-family:var(--firm-font-display);font-weight:700;font-size:18px;letter-spacing:-.01em;color:var(--ink);white-space:nowrap}
.skip .si{display:flex;gap:11px;padding:9px 0;font-size:14px;color:var(--ink-2);line-height:1.45}
.skip .si svg{width:17px;height:17px;color:var(--protected);flex:0 0 auto;margin-top:2px}
.skip .si b{color:var(--ink)}

.res-cta{background:var(--ink);border-radius:20px;padding:26px 28px;color:var(--paper);text-align:center;box-shadow:var(--shadow)}
.res-cta .av{width:54px;height:54px;border-radius:14px;background:var(--firm-primary);color:var(--firm-on-primary);display:grid;place-items:center;font-family:var(--firm-font-display);font-weight:800;font-size:21px;margin:0 auto 14px}
.res-cta h3{font-family:var(--firm-font-display);font-weight:700;font-size:21px;letter-spacing:-.01em;color:#fff;margin-bottom:6px}
.res-cta p{font-size:14px;color:color-mix(in srgb,var(--paper) 72%,transparent);margin-bottom:18px;line-height:1.5}
.res-cta .rate{font-family:var(--font-mono);font-size:11px;color:color-mix(in srgb,var(--paper) 60%,transparent);margin-top:12px}

/* ============================ BOOKING ============================ */
.book-steps{display:flex;align-items:center;gap:8px;justify-content:center;margin-bottom:24px}
.book-steps .bs{display:flex;align-items:center;gap:8px}
.book-steps .bdot{width:26px;height:26px;border-radius:50%;border:2px solid var(--border-2);display:grid;place-items:center;font-family:var(--font-mono);font-size:11px;font-weight:700;color:var(--ink-3)}
.book-steps .bs.done .bdot,.book-steps .bs.cur .bdot{border-color:var(--firm-primary);color:var(--firm-primary)}
.book-steps .bs.done .bdot{background:var(--firm-primary);color:var(--firm-on-primary)}
.book-steps .bl{width:30px;height:2px;background:var(--border-2)}
.book-steps .bl.done{background:var(--firm-primary)}

.field{margin-bottom:15px}
.field label{display:block;font-size:13.5px;font-weight:600;color:var(--ink-2);margin-bottom:7px}
.input{width:100%;font-family:var(--font-body);font-size:16px;padding:13px 15px;border-radius:12px;border:1.5px solid var(--border-2);background:var(--surface);color:var(--ink);transition:.14s}
.input:focus{outline:none;border-color:var(--firm-primary);box-shadow:0 0 0 3px var(--accent-soft)}

.daypick{display:grid;grid-template-columns:repeat(5,1fr);gap:9px;margin-bottom:20px}
.day{padding:12px 4px;border-radius:12px;border:1.5px solid var(--border-2);background:var(--surface);cursor:pointer;text-align:center;transition:.14s}
.day:hover{border-color:var(--firm-primary)}
.day.sel{border-color:var(--firm-primary);background:var(--accent-soft)}
.day .dn{font-family:var(--font-mono);font-size:11px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em}
.day .dd{font-family:var(--firm-font-display);font-weight:700;font-size:15px;margin-top:3px}
.day .dc{font-size:10px;color:var(--firm-primary);margin-top:3px;font-weight:700}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:9px}
.slot{padding:12px;border-radius:11px;border:1.5px solid var(--border-2);background:var(--surface);cursor:pointer;text-align:center;font-family:var(--font-mono);font-size:14px;font-weight:700;color:var(--ink);transition:.14s}
.slot:hover{border-color:var(--firm-primary)}
.slot.sel{border-color:var(--firm-primary);background:var(--firm-primary);color:var(--firm-on-primary)}

/* confirmation */
.confirm{text-align:center;padding-top:18px}
.confirm .seal{width:72px;height:72px;border-radius:50%;background:var(--protected-bg);color:var(--protected);display:grid;place-items:center;margin:0 auto 18px}
.confirm .seal svg{width:36px;height:36px}
.confirm h1{font-family:var(--firm-font-display);font-weight:800;font-size:30px;letter-spacing:-.02em;margin-bottom:10px}
.confirm p{font-size:15.5px;color:var(--ink-2);line-height:1.55;max-width:40ch;margin:0 auto 22px}
.confirm-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:20px 22px;text-align:left;box-shadow:var(--shadow-sm);margin-bottom:18px}
.crow2{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--border)}
.crow2:last-child{border-bottom:none}
.crow2 .ci{width:34px;height:34px;border-radius:9px;background:var(--accent-soft);color:var(--firm-primary);display:grid;place-items:center;flex:0 0 auto}
.crow2 .ci svg{width:17px;height:17px}
.crow2 .ck{font-size:12px;color:var(--ink-3);font-family:var(--font-mono);letter-spacing:.04em}
.crow2 .cvv{font-size:14.5px;font-weight:600;color:var(--ink)}
.expect{text-align:left;background:var(--paper-2);border:1px solid var(--border);border-radius:16px;padding:20px 22px}
.expect .t{font-family:var(--firm-font-display);font-weight:700;font-size:16px;margin-bottom:12px}
.expect li{display:flex;gap:10px;font-size:14px;color:var(--ink-2);line-height:1.45;margin-bottom:9px;list-style:none}
.expect li svg{width:16px;height:16px;color:var(--protected);flex:0 0 auto;margin-top:2px}

/* confetti */
.confetti{position:fixed;inset:0;pointer-events:none;z-index:300;overflow:hidden}
.confetti i{position:absolute;top:-12px;width:9px;height:14px;border-radius:2px;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(105vh) rotate(720deg);opacity:.9}}
@media(prefers-reduced-motion:reduce){.confetti{display:none}.computing .ring{animation:none}}

@media(min-width:560px){.stage{padding-top:24px}}