:root {
  --primary:#5539CC; --primary-deep:#4429B8; --primary-tint:#EEEAFB; --primary-light:#C8BEF0;
  --surface:#FFFFFF; --border:#ECEAF3; --page-bg:#FAF9FE;
  --text-primary:#100B25; --text-secondary:#5A566B; --text-muted:#8E8AA0;
  --success:#15A572; --success-tint:#E6F7EF; --danger:#DC2626; --danger-tint:#FCE8E8;
}
* { box-sizing:border-box; }
html, body { margin:0; }
body { font-family:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--text-primary); background:var(--page-bg); }
button { font:inherit; }
:focus-visible { outline:2px solid var(--primary); outline-offset:2px; border-radius:4px; }

.bar { border-bottom:1px solid var(--border); background:#fff; }
.bar__in { max-width:1120px; margin:0 auto; padding:16px 24px; display:flex; align-items:center; justify-content:space-between; }
/* Same logo lockup as marketing homepage (.wt-nav__logo in wisetalk.css) */
.wt-nav__logo { display:inline-flex; align-items:center; gap:8px; padding:8px 0; text-decoration:none; }
.wt-nav__logo-mark { display:block; height:20px; width:auto; flex:none; }
.wt-nav__logo-word { display:block; height:16px; width:auto; }
.bar__note { font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--text-muted); }

.page { max-width:760px; margin:0 auto; padding:56px 24px 80px; display:flex; flex-direction:column; gap:36px; }
.eyebrow { margin:0; font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--primary); }
h1 { margin:0; font-size:52px; line-height:58px; font-weight:700; letter-spacing:-.02em; }
.intro { margin:0; max-width:620px; font-size:18px; line-height:28px; color:var(--text-secondary); }
.facts { display:flex; flex-wrap:wrap; gap:12px 28px; }
.hero { display:flex; flex-direction:column; gap:20px; }

.fb-card { background: #FFFFFF; border: 1px solid #ECEAF3; border-radius: 24px; box-shadow: 0 1px 3px rgba(16, 11, 37, 0.04); }
.fb-seg { flex: 1 1 0; height: 6px; border-radius: 999px; background: #ECEAF3; transition: background-color 220ms ease-out; }
.fb-seg--on { background: #5539CC; }
.fb-q { margin: 0; font-weight: 600; color: #100B25; }
.fb-help { margin: 0; color: #5A566B; }
.req { color: #DC2626; font-weight: 700; }

/* the big pick-one cards, same shape as the session brief so the two forms
   feel like one product */
.fb-opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 14px; border-radius: 12px; border: 1.5px solid #ECEAF3; background: #FFFFFF; font: inherit; text-align: left; cursor: pointer; transition: border-color 180ms ease-out, background-color 180ms ease-out; }
.fb-opt:hover { border-color: #C8BEF0; background: #FAF9FE; }
.fb-opt--on, .fb-opt--on:hover { border-color: #5539CC; background: #EEEAFB; }
.fb-dot { flex: none; width: 18px; height: 18px; border-radius: 999px; border: 2px solid #C8BEF0; background: #FFFFFF; display: flex; align-items: center; justify-content: center; }
.fb-opt--on .fb-dot { border-color: #5539CC; }
.fb-dot i { display: block; width: 8px; height: 8px; border-radius: 999px; background: transparent; }
.fb-opt--on .fb-dot i { background: #5539CC; }
.fb-opt__ic { flex: none; color: #8E8AA0; display: flex; align-items: center; }
.fb-opt--on .fb-opt__ic { color: #5539CC; }
.fb-opt__t { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; min-width: 0; }
.fb-opt__k { font-weight: 600; color: #100B25; }
.fb-opt__s { color: #8E8AA0; }

.fb-chip { display: inline-flex; align-items: center; padding: 9px 16px; border-radius: 999px; border: 1.5px solid #ECEAF3; background: #FFFFFF; font: inherit; font-weight: 500; color: #5A566B; cursor: pointer; transition: border-color 180ms ease-out, background-color 180ms ease-out, color 180ms ease-out; }
.fb-chip:hover { border-color: #C8BEF0; color: #5539CC; }
.fb-chip--on, .fb-chip--on:hover { border-color: #5539CC; background: #EEEAFB; color: #4429B8; font-weight: 700; }

/* Numbered squares for the 1 to 5 scales and the 0 to 10 score. A grid, not
   a wrapping flex row: eleven squares do not fit on one line at 390px, and
   wrapping flex stretched the leftover "10" across its own row. A grid
   keeps every square the same width and leaves the gap at the end. */
.fb-nums { display: grid; gap: 8px; }
.fb-num { min-width: 0; display: inline-flex; align-items: center; justify-content: center; height: 44px; border-radius: 12px; border: 1.5px solid #ECEAF3; background: #FFFFFF; font: inherit; font-weight: 600; color: #5A566B; cursor: pointer; font-variant-numeric: tabular-nums; transition: border-color 180ms ease-out, background-color 180ms ease-out, color 180ms ease-out; }
.fb-num:hover { border-color: #C8BEF0; color: #5539CC; }
.fb-num--on, .fb-num--on:hover { border-color: #5539CC; background: #5539CC; color: #FFFFFF; }
.fb-ends { display: flex; justify-content: space-between; color: #8E8AA0; }

.fb-fld { width: 100%; box-sizing: border-box; border-radius: 12px; border: 1.5px solid #ECEAF3; background: #FFFFFF; font: inherit; color: #100B25; padding: 13px 16px; transition: border-color 180ms ease-out; }
.fb-fld::placeholder { color: #8E8AA0; }
.fb-fld:hover { border-color: #C8BEF0; }
.fb-fld:focus { border-color: #5539CC; outline: none; box-shadow: 0 0 0 3px rgba(85, 57, 204, 0.14); }
.fb-fld--area { min-height: 104px; resize: vertical; line-height: 24px; }
.fb-fld--bad, .fb-fld--bad:hover { border-color: #DC2626; background: #FEF6F6; }

.fb-fact { display: flex; align-items: center; gap: 8px; color: #5A566B; }
.fb-fact__ic { color: #5539CC; display: flex; }
.errline { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; background: #FCE8E8; color: #DC2626; font-weight: 600; }
.fb-ring { width: 72px; height: 72px; border-radius: 999px; background: #E6F7EF; color: #15A572; display: flex; align-items: center; justify-content: center; }
.fb-opt:focus-visible, .fb-chip:focus-visible, .fb-num:focus-visible { outline: 2px solid #5539CC; outline-offset: 2px; }
@keyframes fb-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.fb-in { animation: fb-in 260ms ease-out both; }
@media (prefers-reduced-motion: reduce) { .fb-in { animation: none; } }


.fb-step h2 { margin:0; font-size:24px; line-height:32px; font-weight:700; letter-spacing:-.01em; }
.fb-step { display:flex; flex-direction:column; gap:28px; }
.fb-qs { display:flex; flex-direction:column; gap:28px; }
.fb-qwrap { display:flex; flex-direction:column; gap:12px; }
.fb-pair { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px;
  padding:0 28px; border:0; border-radius:999px; background:var(--primary); color:#fff;
  font-size:16px; font-weight:600; cursor:pointer; transition:background-color 180ms ease-out; }
.btn:hover { background:var(--primary-deep); }
.btn--ghost { background:#fff; color:var(--primary); box-shadow:inset 0 0 0 1.5px var(--primary-light); }
.btn--ghost:hover { background:var(--primary-tint); }
.nav-row { display:flex; align-items:center; gap:12px; }
.nav-row .spacer { margin-left:auto; }
.note { margin:0; font-size:12px; line-height:18px; color:var(--text-muted); }
.hide { display:none !important; }
.done { display:flex; flex-direction:column; align-items:center; text-align:center; gap:18px; padding:56px 48px 48px; }
.done h2 { margin:0; font-size:32px; line-height:40px; font-weight:700; letter-spacing:-.01em; }
.done p { margin:0; max-width:480px; font-size:17px; line-height:26px; color:var(--text-secondary); }

@media (min-width:720px) {
  .wt-nav__logo-mark { height:22px; }
  .wt-nav__logo-word { height:18px; }
}

@media (max-width:719px) {
  .page { padding:36px 20px 56px; gap:28px; }
  h1 { font-size:34px; line-height:40px; }
  .intro { font-size:16px; line-height:26px; }
  .fb-step h2 { font-size:20px; line-height:28px; }
  .fb-pair { grid-template-columns:1fr; }
  .nav-row { flex-direction:column-reverse; align-items:stretch; }
  .nav-row .spacer { margin-left:0; }
  .btn { width:100%; }
  .done { padding:36px 20px 32px; }
  .done h2 { font-size:24px; line-height:32px; }
}