:root{
  --fg-red:#DA291C;        /* Fortinet red */
  --fg-red-dk:#B21F14;
  --ink:#1a1f2b;
  --ink-soft:#4a5568;
  --muted:#7a8699;
  --line:#e4e8ef;
  --bg:#f4f6f9;
  --card:#ffffff;
  --ok:#2f9e44;
  --shadow:0 1px 2px rgba(20,30,50,.06),0 8px 24px rgba(20,30,50,.06);
  --radius:14px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ink);background:var(--bg);line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.hidden{display:none !important}

/* Top bar */
.topbar{background:#0d1220;color:#fff;border-bottom:3px solid var(--fg-red)}
.topbar-inner{max-width:820px;margin:0 auto;padding:18px 22px}
.brand{display:flex;align-items:center;gap:14px;font-size:18px;letter-spacing:.2px}
.brand b{font-weight:800}
.brand-text{font-weight:500}
.brand-logo{height:20px;width:auto;display:block}
.brand-div{width:1px;height:24px;background:#3a4256;display:inline-block}
.brand-sub{margin-top:6px;color:#aeb7c9;font-size:13.5px}

/* Layout */
.wrap{max-width:820px;margin:0 auto;padding:26px 22px 60px}

/* Steps / progress */
.steps{display:flex;gap:8px;margin:6px 0 22px;flex-wrap:wrap}
.step{flex:1 1 0;min-width:120px;display:flex;flex-direction:column;gap:7px}
.step .bar{height:5px;border-radius:4px;background:var(--line);transition:background .25s}
.step.active .bar{background:var(--fg-red)}
.step.done .bar{background:var(--ok)}
.step .lbl{font-size:11.5px;color:var(--muted);font-weight:600;letter-spacing:.3px;text-transform:uppercase}
.step.active .lbl{color:var(--ink)}

/* Cards */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:30px}
.intro h1,.done h1{font-size:27px;font-weight:800;margin:0 0 12px;letter-spacing:-.4px}
.lead{color:var(--ink-soft);font-size:16px;margin:0 0 20px}
.facts{list-style:none;display:flex;gap:26px;padding:0;margin:0 0 20px}
.facts li{color:var(--muted);font-size:13px;font-weight:600}
.f-num{display:block;font-size:26px;font-weight:800;color:var(--fg-red);line-height:1}
.fineprint{color:var(--muted);font-size:13px;margin:0 0 22px}

/* Section header inside form */
.section-head{margin-bottom:22px}
.section-kicker{color:var(--fg-red);font-weight:700;font-size:12.5px;letter-spacing:1px;text-transform:uppercase}
.section-head h2{font-size:23px;font-weight:800;margin:5px 0 8px;letter-spacing:-.3px}
.section-head p{color:var(--ink-soft);margin:0;font-size:14.5px}

/* Question blocks */
.q{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px 22px;margin-bottom:14px;box-shadow:var(--shadow);animation:pop .18s ease}
@keyframes pop{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.q.dep{border-left:3px solid var(--fg-red)}
.q-label{font-weight:600;font-size:15.5px;margin-bottom:12px;display:block}
.q-req{color:var(--fg-red);margin-left:3px}
.q-hint{color:var(--muted);font-size:12.5px;margin:-6px 0 12px}

/* Inputs */
input[type=text],input[type=email],input[type=number],textarea,select{
  width:100%;font:inherit;color:var(--ink);background:#fff;
  border:1.5px solid var(--line);border-radius:9px;padding:11px 13px;transition:border-color .15s,box-shadow .15s;
}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--fg-red);box-shadow:0 0 0 3px rgba(218,41,28,.12)}
textarea{min-height:90px;resize:vertical}
.numgroup{display:grid;grid-template-columns:1fr 150px;gap:10px 14px;align-items:center}
.numgroup label{color:var(--ink-soft);font-size:14px}

/* Choice options */
.opt{display:flex;align-items:flex-start;gap:11px;padding:11px 13px;border:1.5px solid var(--line);border-radius:9px;margin-bottom:8px;cursor:pointer;transition:border-color .15s,background .15s}
.opt:hover{border-color:#c7cfdb;background:#fafbfd}
.opt input{margin-top:2px;accent-color:var(--fg-red);width:17px;height:17px;flex:none}
.opt.sel{border-color:var(--fg-red);background:rgba(218,41,28,.04)}
.opt span{font-size:14.5px}
.other-in{margin:2px 0 8px 30px;max-width:calc(100% - 30px)}

/* Scale grid */
.scale-wrap{overflow-x:auto}
.scale{width:100%;border-collapse:collapse;min-width:520px}
.scale th,.scale td{padding:9px 8px;text-align:center;font-size:13px;border-bottom:1px solid var(--line)}
.scale th:first-child,.scale td:first-child{text-align:left;font-weight:500;color:var(--ink);width:40%}
.scale th{color:var(--muted);font-weight:600;font-size:11.5px}
.scale input{accent-color:var(--fg-red)}

/* Ranking */
.rank li{display:flex;align-items:center;gap:12px;background:#fff;border:1.5px solid var(--line);border-radius:9px;padding:11px 14px;margin-bottom:8px;cursor:grab}
.rank li.drag{opacity:.5}
.rank-num{width:26px;height:26px;border-radius:50%;background:var(--fg-red);color:#fff;font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center;flex:none}
.rank-handle{margin-left:auto;color:var(--muted)}
.rank{list-style:none;padding:0;margin:0}

/* Buttons / nav */
.navbar{display:flex;align-items:center;gap:12px;margin-top:20px}
.nav-spacer{flex:1}
.btn{font:inherit;font-weight:700;border:none;border-radius:9px;padding:12px 22px;cursor:pointer;transition:transform .06s,background .15s,box-shadow .15s;font-size:15px}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--fg-red);color:#fff;box-shadow:0 2px 8px rgba(218,41,28,.28)}
.btn-primary:hover{background:var(--fg-red-dk)}
.btn-primary:disabled{opacity:.55;cursor:default;box-shadow:none}
.btn-ghost{background:#fff;color:var(--ink-soft);border:1.5px solid var(--line)}
.btn-ghost:hover{border-color:#c7cfdb;color:var(--ink)}

/* Done */
.done{text-align:center}
.done-check{width:64px;height:64px;border-radius:50%;background:var(--ok);color:#fff;font-size:34px;display:flex;align-items:center;justify-content:center;margin:0 auto 18px}

/* Field error */
.q.invalid{border-color:var(--fg-red)}
.field-err{color:var(--fg-red);font-size:12.5px;margin-top:8px;font-weight:600}
.err-banner{background:#fdecea;border:1px solid var(--fg-red);color:var(--fg-red-dk);padding:13px 16px;border-radius:10px;margin-top:16px;font-size:14px;font-weight:600}

.foot{text-align:center;color:var(--muted);font-size:12px;padding:22px}

@media(max-width:560px){
  .card{padding:22px}
  .facts{gap:18px}
  .numgroup{grid-template-columns:1fr}
  .navbar{position:sticky;bottom:0;background:var(--bg);padding:12px 0}
}