/* ── Motivation Drivers — Design System ────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --ink:      #0F1117;
  --ink2:     #3B3D45;
  --ink3:     #717380;
  --cream:    #F7F6F2;
  --white:    #FFFFFF;
  --rule:     #E4E3DD;
  --rule2:    #CCCBC4;
  --teal:     #1D9E75;
  --teal-l:   #E1F5EE;
  --teal-d:   #0F6E56;
  --serif:    'Playfair Display', Georgia, serif;
  --sans:     'Inter', system-ui, sans-serif;
  --r:        12px;
  --shadow:   0 2px 16px rgba(0,0,0,.08);
}
html{font-size:16px;-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);
  background:var(--cream);
  color:var(--ink);
  min-height:100vh;
  line-height:1.65;
}

/* ── Shell ───────────────────────────────────────────────────────────────── */
.shell{
  max-width:680px;
  margin:0 auto;
  padding:0 1.25rem 5rem;
}

/* ── Header ─────────────────────────────────────────────────────────────── */
.site-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1.5rem 0 1.25rem;
  border-bottom:1px solid var(--rule);
  margin-bottom:0;
}
.logo{
  font-family:var(--serif);
  font-size:1.15rem;
  color:var(--ink);
  letter-spacing:-.01em;
}
.logo em{font-style:italic;color:var(--teal)}

/* ── Progress bar ───────────────────────────────────────────────────────── */
.progress-section{
  padding:1rem 0 1.5rem;
  border-bottom:1px solid var(--rule);
  margin-bottom:2rem;
}
.progress-meta{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  margin-bottom:.5rem;
}
.progress-label{
  font-size:.78rem;
  font-weight:500;
  color:var(--ink2);
}
.progress-count{
  font-size:.72rem;
  color:var(--ink3);
}
.progress-track{
  height:4px;
  background:var(--rule);
  border-radius:99px;
  overflow:hidden;
}
.progress-fill{
  height:100%;
  background:var(--teal);
  border-radius:99px;
  transition:width .4s ease;
}
.part-indicators{
  display:flex;
  gap:.5rem;
  margin-top:.625rem;
}
.part-dot{
  flex:1;
  height:3px;
  border-radius:99px;
  background:var(--rule);
}
.part-dot.active{background:var(--teal)}
.part-dot.complete{background:var(--teal-d)}

/* ── Question card ──────────────────────────────────────────────────────── */
.q-card{
  background:var(--white);
  border:1px solid var(--rule);
  border-radius:var(--r);
  padding:2rem 2rem 1.5rem;
  margin-bottom:1.5rem;
  box-shadow:var(--shadow);
  animation:fadeUp .3s ease both;
}
.q-part{
  font-size:.68rem;
  font-weight:500;
  color:var(--ink3);
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-bottom:.5rem;
}
.q-text{
  font-size:1.05rem;
  color:var(--ink);
  line-height:1.6;
  margin-bottom:1.75rem;
  font-weight:400;
}

/* ── Likert scale ───────────────────────────────────────────────────────── */
.likert-grid{
  display:flex;
  flex-direction:column;
  gap:.5rem;
}
.likert-opt input[type=radio]{display:none}
.likert-opt label{
  display:flex;
  align-items:center;
  gap:.875rem;
  padding:.75rem 1rem;
  border:1.5px solid var(--rule);
  border-radius:8px;
  cursor:pointer;
  transition:all .15s;
  font-size:.925rem;
  color:var(--ink2);
  line-height:1.4;
}
.likert-opt label:hover{
  border-color:var(--teal);
  background:var(--teal-l);
  color:var(--ink);
}
.likert-opt input:checked+label{
  border-color:var(--teal);
  background:var(--teal-l);
  color:var(--ink);
  font-weight:500;
}
.likert-num{
  width:28px;
  height:28px;
  border-radius:50%;
  border:1.5px solid var(--rule2);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.75rem;
  font-weight:600;
  color:var(--ink3);
  flex-shrink:0;
  transition:all .15s;
}
.likert-opt input:checked+label .likert-num{
  background:var(--teal);
  border-color:var(--teal);
  color:var(--white);
}

/* ── Forced choice ──────────────────────────────────────────────────────── */
.fc-options{
  display:flex;
  flex-direction:column;
  gap:.75rem;
}
.fc-opt input[type=radio]{display:none}
.fc-opt label{
  display:block;
  padding:1.1rem 1.25rem;
  border:1.5px solid var(--rule);
  border-radius:8px;
  cursor:pointer;
  font-size:.925rem;
  color:var(--ink2);
  line-height:1.6;
  transition:all .15s;
  position:relative;
}
.fc-opt label::before{
  content:'';
  display:inline-block;
  width:18px;
  height:18px;
  border-radius:50%;
  border:1.5px solid var(--rule2);
  margin-right:.75rem;
  vertical-align:middle;
  flex-shrink:0;
  transition:all .15s;
}
.fc-opt label:hover{
  border-color:var(--teal);
  background:var(--teal-l);
  color:var(--ink);
}
.fc-opt input:checked+label{
  border-color:var(--teal);
  background:var(--teal-l);
  color:var(--ink);
  font-weight:500;
}
.fc-opt input:checked+label::before{
  background:var(--teal);
  border-color:var(--teal);
}
.fc-or{
  text-align:center;
  font-size:.78rem;
  color:var(--ink3);
  font-style:italic;
  padding:.1rem 0;
}

/* ── Navigation buttons ─────────────────────────────────────────────────── */
.nav-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
}
.btn-back{
  font-family:var(--sans);
  font-size:.875rem;
  color:var(--ink3);
  background:var(--white);
  border:1px solid var(--rule);
  border-radius:8px;
  padding:.65rem 1.25rem;
  cursor:pointer;
  transition:border-color .15s, color .15s;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:.375rem;
}
.btn-back:hover{border-color:var(--rule2);color:var(--ink2)}
.btn-next{
  font-family:var(--sans);
  font-size:.9rem;
  font-weight:500;
  color:var(--white);
  background:var(--teal);
  border:none;
  border-radius:8px;
  padding:.7rem 1.75rem;
  cursor:pointer;
  transition:background .15s, transform .1s;
  margin-left:auto;
}
.btn-next:hover{background:var(--teal-d)}
.btn-next:active{transform:scale(.98)}
.btn-next:disabled{background:var(--rule2);cursor:not-allowed}

/* ── Intro / transition screens ─────────────────────────────────────────── */
.intro-hero{
  text-align:center;
  padding:2.5rem 0 2rem;
}
.intro-hero h1{
  font-family:var(--serif);
  font-size:2.5rem;
  font-weight:400;
  line-height:1.15;
  margin-bottom:.875rem;
  color:var(--ink);
}
.intro-hero h1 em{font-style:italic;color:var(--teal)}
.intro-hero p{
  font-size:1rem;
  color:var(--ink3);
  max-width:480px;
  margin:0 auto 2rem;
  line-height:1.65;
}
.intro-meta{
  display:flex;
  justify-content:center;
  gap:1.5rem;
  flex-wrap:wrap;
  margin-bottom:2rem;
}
.meta-pill{
  display:flex;
  align-items:center;
  gap:.4rem;
  font-size:.8rem;
  color:var(--ink3);
  background:var(--white);
  border:1px solid var(--rule);
  border-radius:99px;
  padding:.3rem .75rem;
}
.meta-dot{
  width:6px;height:6px;
  border-radius:50%;
  background:var(--teal);
  flex-shrink:0;
}
.intro-form{
  background:var(--white);
  border:1px solid var(--rule);
  border-radius:var(--r);
  padding:1.75rem 2rem;
  box-shadow:var(--shadow);
}
.intro-form h2{
  font-family:var(--serif);
  font-size:1.25rem;
  font-weight:400;
  margin-bottom:1.25rem;
  color:var(--ink);
}
.field-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.875rem;
  margin-bottom:.875rem;
}
.field-row.full{grid-template-columns:1fr}
.field{display:flex;flex-direction:column;gap:.3rem}
.field label{
  font-size:.72rem;
  font-weight:500;
  color:var(--ink2);
  text-transform:uppercase;
  letter-spacing:.05em;
}
.field input{
  font-family:var(--sans);
  font-size:.925rem;
  color:var(--ink);
  background:var(--white);
  border:1px solid var(--rule);
  border-radius:8px;
  padding:.6rem .875rem;
  outline:none;
  transition:border-color .2s;
}
.field input:focus{border-color:var(--teal)}
.field .hint{font-size:.7rem;color:var(--ink3)}

/* ── Transition screen ──────────────────────────────────────────────────── */
.transition-card{
  background:var(--white);
  border:1px solid var(--rule);
  border-radius:var(--r);
  padding:2.5rem 2rem;
  text-align:center;
  box-shadow:var(--shadow);
  margin:2rem 0;
}
.transition-icon{
  width:56px;height:56px;
  background:var(--teal-l);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 1.25rem;
  font-size:1.5rem;
}
.transition-card h2{
  font-family:var(--serif);
  font-size:1.5rem;
  font-weight:400;
  margin-bottom:.625rem;
  color:var(--ink);
}
.transition-card p{
  font-size:.925rem;
  color:var(--ink3);
  max-width:400px;
  margin:0 auto 1.5rem;
  line-height:1.65;
}
.transition-card .btn-next{margin:0 auto;display:block;width:fit-content}

/* ── Results ────────────────────────────────────────────────────────────── */
.results-hero{text-align:center;padding:2rem 0 1.5rem}
.results-hero h1{
  font-family:var(--serif);
  font-size:2rem;
  font-weight:400;
  margin-bottom:.375rem;
}
.results-hero p{color:var(--ink3);font-size:.875rem}
.top3{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin:1.5rem 0}
.top3-card{
  background:var(--white);border:1px solid var(--rule);
  border-radius:var(--r);padding:1rem;text-align:center;
}
.top3-rank{font-size:.65rem;font-weight:500;color:var(--ink3);margin-bottom:.2rem;text-transform:uppercase;letter-spacing:.04em}
.top3-name{font-family:var(--serif);font-size:1rem;font-weight:400;margin-bottom:.2rem}
.top3-score{font-size:1.875rem;font-weight:300}
.divider{height:1px;background:var(--rule);margin:1.5rem 0}
.bar-row{display:grid;grid-template-columns:148px 1fr 44px;align-items:center;gap:.875rem;margin-bottom:.75rem}
.bar-name{font-size:.85rem;font-weight:500;color:var(--ink2);text-align:right}
.rank-badge{font-size:.6rem;font-weight:500;background:var(--teal-l);color:var(--teal);border-radius:4px;padding:.1rem .375rem;margin-left:.35rem;vertical-align:middle}
.bar-track{height:8px;background:var(--rule);border-radius:99px;overflow:hidden}
.bar-fill{height:100%;border-radius:99px;transition:width 1s ease}
.bar-pct{font-size:.85rem;font-weight:500;color:var(--ink2)}

/* ── Error ───────────────────────────────────────────────────────────────── */
.err-box{
  background:#FEF2F2;
  border:1px solid #FECACA;
  border-radius:var(--r);
  padding:.75rem 1rem;
  margin-bottom:1rem;
  color:#DC2626;
  font-size:.875rem;
}

/* ── Animations ──────────────────────────────────────────────────────────── */
@keyframes fadeUp{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media(max-width:560px){
  .q-card{padding:1.5rem 1.25rem 1.25rem}
  .field-row{grid-template-columns:1fr}
  .top3{grid-template-columns:1fr}
  .bar-row{grid-template-columns:100px 1fr 36px;gap:.5rem}
  .intro-hero h1{font-size:1.875rem}
  .intro-meta{gap:.75rem}
}