:root{
  --hw-teal:#0E5A64; --hw-teal-2:#13788A; --hw-blue:#006699; --hw-orange:#F07C2B;
  --hw-sand:#F6F3EE; --ink:#112027; --muted:#5B6C73;
  --radius:14px; --shadow:0 8px 24px rgba(17,32,39,.10), 0 2px 6px rgba(17,32,39,.06);
  --focus:0 0 0 3px rgba(240,124,43,.35);
  --font: 'Ubuntu', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}
.hwc-container{max-width:900px;margin:clamp(16px,4vw,48px) auto;padding:clamp(12px,3vw,24px);font-family:var(--font);color:var(--ink)}
.hwc-header{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.hwc-logo{width:44px;height:44px;border-radius:10px;background:radial-gradient(120% 120% at 0% 100%, var(--hw-orange) 0%, var(--hw-teal-2) 60%, var(--hw-teal) 100%);box-shadow:var(--shadow)}
.hwc-headings h2{margin:0;color:var(--hw-teal);font-size:clamp(22px,3.2vw,34px);line-height:1.15}
.hwc-lead{margin:8px 0 22px;color:var(--muted);font-size:clamp(14px,1.8vw,17px)}
.hwc-card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:clamp(16px,3.5vw,28px)}
.hwc-progress{height:8px;border-radius:999px;background:#e9eef0;overflow:hidden;margin-bottom:18px}
.hwc-bar{height:100%;width:0;background:linear-gradient(90deg,var(--hw-orange),var(--hw-teal));transition:width .35s ease}
.hwc-pill{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;background:#eef6f7;color:var(--hw-teal);border-radius:999px;font-size:12.5px;font-weight:700;margin-bottom:8px}
.hwc-q{font-size:clamp(18px,2.4vw,22px);margin:0 0 14px;color:var(--hw-blue)}
.hwc-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.hwc-opt{border:1px solid #e3e8ea;border-radius:12px;padding:14px 16px;background:#fff;cursor:pointer;display:flex;gap:12px;align-items:flex-start;text-align:left}
.hwc-opt:hover{box-shadow:0 6px 16px rgba(17,32,39,.08)}
.hwc-opt:active{transform:translateY(1px)}
.hwc-opt[aria-pressed="true"]{border-color:var(--hw-teal-2);box-shadow:0 0 0 3px rgba(19,120,138,.15);background:linear-gradient(180deg,#fff,#f9fbfc)}
.hwc-emoji{font-size:22px;line-height:1}
.hwc-title{font-weight:700;margin-bottom:4px}
.hwc-desc{color:var(--muted);font-size:14px}
.hwc-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:18px}
.hwc-btn{border:none;border-radius:12px;padding:12px 16px;cursor:pointer;font-weight:700;background:var(--hw-teal);color:#fff;box-shadow:var(--shadow)}
.hwc-btn.secondary{background:#edf3f5;color:var(--hw-teal)}
.hwc-result{background:#0e5a6410;border:1px solid #d9e7ea;border-radius:12px;padding:14px;margin:14px 0}
.hwc-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.hwc-cta a{background:var(--hw-orange);color:#fff;padding:12px 16px;border-radius:12px;font-weight:700;text-decoration:none;box-shadow:var(--shadow)}
.hwc-cta a.alt{background:var(--hw-teal-2)}
.hwc-step{display:none}
.hwc-step.active{display:block}