/* Questionnaire v1 — the site's dark design language (brand/ai-services-site canvas).
   Speed budget: no frameworks, no images, system fallbacks everywhere (spec §8). */

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: #0B0E12;
  background-image: linear-gradient(rgba(255,255,255,0.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.032) 1px, transparent 1px);
  background-size: 44px 44px;
  color: #E8EAEE;
  font-family: 'Instrument Sans', 'Segoe UI', system-ui, sans-serif;
  min-height: 100vh;
}
.wrap { max-width: 620px; margin: 0 auto; padding: 6vh 16px 8vh; }
.card {
  background: #11161C;
  border: 1px solid rgba(94,139,255,0.35);
  border-radius: 16px;
  padding: 28px 30px;
  display: flex; flex-direction: column; gap: 18px;
}
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.kicker {
  font-family: 'IBM Plex Mono', Consolas, monospace;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #5E8BFF;
}
.mono { font-family: 'IBM Plex Mono', Consolas, monospace; font-size: 11px; }
.dim { color: #8A929C; }
.footnote { color: #6B7380; line-height: 1.6; }

.qtext {
  font-family: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  font-size: 21px; font-weight: 600; color: #FFFFFF; margin: 4px 0 14px; line-height: 1.3;
  letter-spacing: -0.01em;
}
.opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.opts.single { grid-template-columns: 1fr; }
@media (max-width: 480px) { .opts { grid-template-columns: 1fr; } }
.opt {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid rgba(255,255,255,0.14); border-radius: 10px;
  background: none; color: #E8EAEE; text-align: left;
  font-family: inherit; font-size: 15px; padding: 15px 16px; cursor: pointer;
  transition: border-color .15s ease, background .15s ease; min-height: 52px;
}
.opt:hover, .opt:focus-visible { border-color: #5E8BFF; background: rgba(46,107,255,0.08); outline: none; }
.opt.picked { border-color: #2E6BFF; background: rgba(46,107,255,0.14); }
.opt .sub { color: #8A929C; font-size: 13px; }

.progress-row { display: flex; align-items: center; gap: 12px; padding-top: 4px; }
.bar { flex-grow: 1; height: 5px; background: rgba(255,255,255,0.1); border-radius: 3px; overflow: hidden; }
.fill { height: 5px; background: #2E6BFF; border-radius: 3px; width: 0; transition: width .25s ease; }
.steps { display: flex; gap: 6px; }
.step {
  width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.18); background: none; color: #8A929C;
  font-family: 'IBM Plex Mono', Consolas, monospace; font-size: 10px;
  cursor: default; padding: 0; line-height: 1;
}
.step.done { border-color: #2E6BFF; color: #E8EAEE; cursor: pointer; }
.step.now { border-color: #5E8BFF; background: rgba(46,107,255,0.14); color: #FFFFFF; }

/* Q6 — one card: fields stacked, one button, the honest "Question 6 of 6" holds (§11.5) */
.fields { display: grid; gap: 10px; margin-bottom: 14px; }
.fields input {
  background: #0B0E12; border: 1px solid rgba(255,255,255,0.14); border-radius: 10px;
  color: #E8EAEE; font-family: inherit; font-size: 15px; padding: 13px 15px;
}
.fields input:focus { border-color: #5E8BFF; outline: none; }
.fields input.bad { border-color: #FF7B81; }
.pref-label { font-size: 14px; color: #AEB5BF; margin: 6px 0 8px; }
.actions { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 16px; }
.btn-primary {
  display: inline-block; background: #2E6BFF; color: #FFFFFF; border: none; cursor: pointer;
  font-family: inherit; font-weight: 600; font-size: 16px; padding: 15px 26px; border-radius: 10px;
  transition: background .18s ease; width: 100%;
}
.btn-primary:hover { background: #1E4FD6; }
.skip {
  background: none; border: none; cursor: pointer; color: #8A929C;
  font-family: 'IBM Plex Mono', Consolas, monospace; font-size: 12px; letter-spacing: 0.05em;
  text-decoration: underline; text-underline-offset: 3px;
}
.skip:hover { color: #E8EAEE; }
.err { color: #FF7B81; font-size: 13px; min-height: 1.2em; }

/* wordmark above the card — the drawn stand-in; the tie hangs below the baseline */
.wm { display:inline-flex; flex-direction:column; gap:2px; color:#fff; padding:0 0 18px 4px; }
.wm-top { font-family:'Montserrat','Segoe UI',system-ui,sans-serif; font-weight:300; letter-spacing:.34em; text-transform:uppercase; font-size:7.5px; }
.wm-row { display:flex; align-items:flex-end; }
.wm-row svg { margin-bottom:1px; overflow:visible; }
.wm-big { font-family:'Montserrat','Segoe UI',system-ui,sans-serif; font-weight:900; line-height:1; font-size:31px; }