:root{
  --green:#657165;
  --mint:#b6cfc0;
  --yellow:#f7c948;
  --ink:#171917;
  --paper:#fff;
  --soft:#f5f6f2;
  --line:#dfe4dc;
}
*{box-sizing:border-box}
body{
  margin:0;
  min-height:100vh;
  color:var(--ink);
  background:linear-gradient(145deg,#f4f6f1 0%,#fff 55%,#f7f2df 100%);
  font-family:Inter,Arial,sans-serif;
}
.shell{min-height:100vh;display:grid;place-items:center;padding:28px 16px}
.card{
  width:min(760px,100%);
  background:rgba(255,255,255,.96);
  border:1px solid rgba(101,113,101,.18);
  border-radius:28px;
  padding:clamp(24px,5vw,52px);
  box-shadow:0 22px 70px rgba(52,62,52,.12);
}
.eyebrow{
  display:inline-block;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--green);
  margin-bottom:14px;
}
h1,h2{font-family:"Playfair Display",Georgia,serif;line-height:1.08;margin:0 0 18px}
h1{font-size:clamp(2.2rem,7vw,4.5rem)}
h2{font-size:clamp(1.8rem,5vw,3rem)}
p{line-height:1.65;margin:0 0 18px}
.lead{font-size:1.08rem;max-width:620px}
.highlight{background:linear-gradient(transparent 60%,rgba(247,201,72,.58) 60%)}
.puzzle{
  width:58px;height:58px;border-radius:17px;background:var(--yellow);
  display:grid;place-items:center;font-size:30px;margin-bottom:24px;transform:rotate(-4deg)
}
.btn{
  border:0;border-radius:999px;padding:15px 23px;font:inherit;font-weight:700;
  cursor:pointer;transition:.18s ease;background:var(--green);color:white;
}
.btn:hover{transform:translateY(-1px);filter:brightness(.96)}
.btn.secondary{background:transparent;color:var(--green);border:1px solid var(--line)}
.actions{display:flex;gap:12px;align-items:center;margin-top:26px;flex-wrap:wrap}
.progress-wrap{margin-bottom:28px}
.progress-meta{display:flex;justify-content:space-between;font-size:.82rem;color:#667066;margin-bottom:9px}
.progress{height:8px;background:#edf0eb;border-radius:99px;overflow:hidden}
.progress > span{display:block;height:100%;background:var(--yellow);border-radius:99px;transition:width .25s ease}
.options{display:grid;gap:12px;margin-top:25px}
.option{
  width:100%;text-align:left;border:1px solid var(--line);background:white;color:var(--ink);
  border-radius:18px;padding:17px 18px;font:inherit;line-height:1.45;cursor:pointer;
  transition:.16s ease;
}
.option:hover,.option:focus-visible{
  border-color:var(--green);background:#f7f9f5;transform:translateY(-1px);outline:none
}
.question-number{font-weight:700;color:var(--green);font-size:.84rem;margin-bottom:9px}
.result-title{margin-bottom:8px}
.result-name{
  display:inline-block;background:var(--yellow);padding:6px 12px;border-radius:10px;
  font-weight:800;margin:0 0 22px
}
.scores{display:grid;gap:16px;margin:30px 0}
.score-row{display:grid;grid-template-columns:1fr auto;gap:8px}
.score-label{font-weight:700}
.score-value{font-weight:800}
.score-bar{grid-column:1/-1;height:10px;background:#edf0eb;border-radius:99px;overflow:hidden}
.score-bar span{display:block;height:100%;background:var(--green);border-radius:99px}
.note{
  padding:18px;border-radius:18px;background:#f6f7f3;border-left:5px solid var(--yellow);margin:24px 0
}
.secondary-result{font-size:.95rem;color:#566056;margin-top:20px}
.mailbox{margin-top:28px;padding:20px;border-radius:18px;background:#edf4ef}
.small{font-size:.82rem;color:#707770}
@media(max-width:520px){
  .shell{padding:12px}
  .card{border-radius:20px;padding:25px 20px}
  .btn{width:100%}
}
.mail-status{margin:14px 0 0;font-size:.86rem;line-height:1.45}
.mail-status.saving{color:#657165}
.mail-status.success{font-weight:700;color:#3f5944}
.mail-status.error{color:#7b4a34}

.signup-copy{margin:8px 0 18px}
.field-label{display:block;font-size:.84rem;font-weight:800;margin-bottom:7px;color:var(--green)}
.email-input{width:100%;border:1px solid var(--line);border-radius:14px;padding:14px 15px;font:inherit;background:#fff;color:var(--ink);outline:none}
.email-input:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(101,113,101,.12)}
.consent-row{display:grid;grid-template-columns:20px 1fr;gap:10px;align-items:start;margin:16px 0;font-size:.78rem;line-height:1.5;color:#566056;cursor:pointer}
.consent-row input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--green)}
.result-submit{margin-top:2px}
.result-submit:disabled{opacity:.65;cursor:wait;transform:none}
.success-box{padding:4px 0}
.success-box strong{font-size:1.05rem}
.success-box p{margin:8px 0 0}