:root {
  --ink: #073f42;
  --ink-soft: #376468;
  --lime: #c8ff52;
  --lime-soft: #edffc6;
  --paper: #f6f7f1;
  --white: #fff;
  --line: #d9e2dd;
  --coral: #ff8f78;
  --shadow: 0 20px 60px rgba(7,63,66,.11);
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--paper); color: var(--ink); font-family: "DM Sans", sans-serif; }
body { background-image: radial-gradient(circle at 90% 8%, rgba(200,255,82,.25), transparent 28%), linear-gradient(180deg,#fbfcf8 0%,#f3f6f0 100%); }
button, input, textarea { font: inherit; }
button { color: inherit; }
.app-shell { width: min(100%, 860px); min-height: 100vh; margin: auto; padding: 24px 24px 52px; }
.brand-bar { display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:58px; }
.brand-logo { width: 190px; max-height: 48px; object-fit: contain; object-position:left center; }
.tester-label { font: 700 9px/1.2 "Manrope",sans-serif; letter-spacing:.13em; border:1px solid rgba(7,63,66,.24); border-radius:999px; padding:8px 11px; white-space:nowrap; }
.progress-wrap { display:flex; align-items:center; gap:12px; margin:18px 0 28px; min-height:18px; }
.progress-track { flex:1; height:5px; background:#dfe8e2; border-radius:20px; overflow:hidden; }
.progress-bar { height:100%; width:0; background:var(--ink); border-radius:20px; transition:width .35s ease; }
.progress-label { min-width:72px; text-align:right; font-size:12px; color:var(--ink-soft); }
.card { background:rgba(255,255,255,.92); border:1px solid rgba(7,63,66,.09); border-radius:28px; padding:clamp(24px,5vw,52px); box-shadow:var(--shadow); animation:rise .36s ease both; }
@keyframes rise { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }
.eyebrow { margin:0 0 12px; color:var(--ink-soft); font:700 11px/1.2 "Manrope",sans-serif; letter-spacing:.17em; text-transform:uppercase; }
h1,h2,h3 { font-family:"Manrope",sans-serif; letter-spacing:-.035em; }
h1 { margin:0; max-width:650px; font-size:clamp(42px,8vw,74px); line-height:.98; }
h2 { margin:0; font-size:clamp(30px,5vw,46px); line-height:1.05; }
h3 { margin:0 0 8px; font-size:19px; }
.accent { display:inline-block; padding:0 .08em .08em; background:linear-gradient(transparent 62%,var(--lime) 62%); }
.lede { max-width:610px; margin:24px 0 0; color:var(--ink-soft); font-size:17px; line-height:1.65; }
.welcome-meta { display:flex; flex-wrap:wrap; gap:10px; margin:30px 0 0; }
.meta-pill { border-radius:999px; background:var(--lime-soft); padding:9px 13px; font-size:12px; font-weight:700; }
.trust-note { display:flex; align-items:center; gap:14px; margin-top:18px; padding:15px 17px; border:1px solid rgba(7,63,66,.18); border-radius:17px; background:#f7faf6; }
.trust-icon { flex:0 0 auto; display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:#ffd0c6; color:#9e4030; font-size:23px; line-height:1; }
.trust-note p { margin:0; color:var(--ink-soft); font-size:13px; line-height:1.5; }
.trust-note strong { color:var(--ink); font-size:14px; }
.field { margin-top:32px; }
.field label { display:block; margin-bottom:9px; font-weight:700; }
.field-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:9px; }
.field-heading label { flex:1; margin:0; line-height:1.45; }
.optional-badge { flex:0 0 auto; margin-top:1px; padding:5px 9px; border-radius:999px; background:#eef3ef; color:var(--ink-soft); font-size:11px; font-weight:700; letter-spacing:.02em; }
.field-note { margin:8px 2px 0; color:var(--ink-soft); font-size:12px; line-height:1.45; }
.text-input,.textarea { width:100%; border:1.5px solid var(--line); background:#fbfcfa; color:var(--ink); border-radius:15px; padding:15px 16px; outline:none; transition:.2s; }
.text-input:focus,.textarea:focus { border-color:var(--ink); box-shadow:0 0 0 4px rgba(7,63,66,.08); }
.textarea { min-height:110px; resize:vertical; }
.actions { display:flex; justify-content:space-between; gap:12px; margin-top:34px; }
.btn { border:0; border-radius:999px; min-height:50px; padding:0 22px; font-weight:700; cursor:pointer; transition:transform .18s,opacity .18s,background .18s; }
.btn:hover { transform:translateY(-1px); }
.btn-primary { background:var(--ink); color:#fff; margin-left:auto; }
.btn-primary:hover { background:#0a5558; }
.btn-secondary { background:#e7ede9; }
.btn:disabled { opacity:.38; cursor:not-allowed; transform:none; }
.steps { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:28px; }
.step { border:1px solid var(--line); border-radius:18px; padding:18px; background:#fbfcfa; }
.step-num { display:inline-grid; place-items:center; width:29px; height:29px; margin-bottom:17px; border-radius:50%; background:var(--lime); font-weight:700; font-size:13px; }
.step p { margin:0; color:var(--ink-soft); line-height:1.5; font-size:14px; }
.swatch-header { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:28px; }
.fabric-badge { flex:0 0 auto; display:grid; place-items:center; width:66px; height:66px; border-radius:18px; background:var(--ink); color:#fff; font:700 29px/1 "Manrope",sans-serif; box-shadow:8px 8px 0 var(--lime); }
.hint { margin:8px 0 0; color:var(--ink-soft); line-height:1.5; }
.question { padding:24px 0; border-top:1px solid var(--line); }
.question:first-of-type { border-top:0; }
.question-title { margin:0 0 14px; font-size:16px; font-weight:700; line-height:1.45; }
.question-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:14px; }
.question-heading .question-title { flex:1; margin:0; }
.requirement-badge { flex:0 0 auto; padding:5px 9px; border-radius:999px; background:var(--lime-soft); color:var(--ink); font-size:11px; font-weight:700; }
.question-kicker { color:var(--ink-soft); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; margin-bottom:6px; }
.scale { display:grid; grid-template-columns:minmax(0,7fr) minmax(72px,1fr); gap:7px; align-items:start; }
.score-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:7px; }
.scale input,.choices input,.rank-choice input { position:absolute; opacity:0; pointer-events:none; }
.scale label { display:grid; place-items:center; height:43px; border:1.5px solid var(--line); border-radius:12px; background:#fff; font-weight:700; cursor:pointer; transition:.18s; }
.scale label.not-sure-label { padding:0 4px; font-size:10px; line-height:1.05; text-align:center; }
.scale input:checked + label { border-color:var(--ink); background:var(--ink); color:#fff; transform:translateY(-2px); }
.scale-note { display:flex; justify-content:space-between; margin-top:8px; color:var(--ink-soft); font-size:11px; }
.choices { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.choices label,.rank-choice label { display:flex; align-items:center; min-height:46px; padding:11px 14px; border:1.5px solid var(--line); border-radius:13px; background:#fff; cursor:pointer; transition:.18s; }
.choices input:checked + label,.rank-choice input:checked + label { border-color:var(--ink); background:var(--lime-soft); box-shadow:inset 0 0 0 1px var(--ink); }
.followup { margin-top:14px; padding:18px; background:#fff5f2; border-left:4px solid var(--coral); border-radius:6px 15px 15px 6px; animation:rise .25s ease both; }
.followup strong { display:block; margin-bottom:10px; }
.followup-note { margin:-4px 0 12px; color:var(--ink-soft); font-size:12px; }
.followup-other { margin-top:12px; background:#fff; }
.checks { display:flex; flex-wrap:wrap; gap:8px; }
.check-chip { display:inline-flex; align-items:center; gap:7px; padding:9px 11px; border:1px solid #f0c8bf; border-radius:999px; background:#fff; font-size:13px; }
.rank-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.rank-choice label { justify-content:center; font-size:17px; font-weight:700; }
.section-divider { margin:34px 0 24px; border:0; border-top:1px solid var(--line); }
.error { min-height:18px; margin:12px 0 0; color:#b54635; font-size:13px; font-weight:600; }
.submission-alert { display:grid; gap:4px; margin-top:24px; padding:16px 17px; border:1px solid #efb8ab; border-radius:15px; background:#fff5f2; color:#8f392c; font-size:13px; line-height:1.5; }
.submission-alert strong { color:#713026; }
.success-mark { display:grid; place-items:center; width:76px; height:76px; border-radius:24px; margin-bottom:28px; background:var(--lime); font-size:32px; transform:rotate(-4deg); }
.summary { margin-top:25px; padding:18px; border-radius:16px; background:#f1f5f1; color:var(--ink-soft); line-height:1.6; font-size:14px; }
.privacy-note { display:flex; align-items:center; gap:13px; }
.privacy-note > span { flex:0 0 auto; display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--lime-soft); color:var(--ink); font-size:20px; }
.privacy-note p { margin:0; }
.privacy-note strong { color:var(--ink); }
@media(max-width:620px){
  .app-shell{padding:16px 14px 34px}.brand-bar{gap:8px}.brand-logo{width:140px}.tester-label{font-size:7px;letter-spacing:.09em;padding:7px 7px}.card{border-radius:22px;padding:25px 20px}.steps{grid-template-columns:1fr}.scale{grid-template-columns:1fr}.score-grid{gap:5px}.not-sure-option{justify-self:end;width:90px;margin-top:4px}.not-sure-option label{width:100%}.choices{grid-template-columns:1fr}.rank-grid{grid-template-columns:repeat(4,1fr)}.swatch-header{align-items:center}.fabric-badge{width:58px;height:58px}.actions{position:sticky;bottom:8px;padding:8px;background:rgba(246,247,241,.88);backdrop-filter:blur(10px);border-radius:999px;z-index:5}.btn{min-height:48px;padding:0 18px}
}