:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #17211b;
  background: #eef1eb;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at top, #f9fbf6 0, #eef1eb 48%, #e5e9e1 100%); }
button, textarea { font: inherit; }
.shell { width: min(1080px, calc(100% - 32px)); margin: 0 auto; padding: 64px 0 96px; }
.hero { max-width: 760px; margin-bottom: 28px; }
.eyebrow { margin: 0 0 10px; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.18em; color: #667265; }
h1 { margin: 0; font-size: clamp(2.6rem, 7vw, 5.8rem); line-height: 0.94; letter-spacing: -0.055em; }
.lede { max-width: 680px; margin: 22px 0 0; font-size: 1.15rem; line-height: 1.65; color: #516055; }
.panel, .recommendation, .next-step, .option-card, .metrics article { background: rgba(255,255,255,0.78); border: 1px solid rgba(32,49,39,0.12); box-shadow: 0 20px 60px rgba(30,45,35,0.08); backdrop-filter: blur(18px); }
.panel { padding: 24px; border-radius: 24px; }
label { display: block; margin-bottom: 10px; font-weight: 800; }
textarea { width: 100%; min-height: 180px; resize: vertical; border: 1px solid #c9d0c6; border-radius: 16px; padding: 18px; background: #fbfcf9; color: #17211b; outline: none; }
textarea:focus { border-color: #70806f; box-shadow: 0 0 0 4px rgba(112,128,111,0.12); }
.actions { display: flex; gap: 14px; align-items: center; margin-top: 16px; flex-wrap: wrap; }
button { border: 0; border-radius: 999px; padding: 14px 22px; background: #17211b; color: white; font-weight: 800; cursor: pointer; }
button:disabled { opacity: 0.55; cursor: wait; }
#status { color: #667265; }
.results { margin-top: 28px; display: grid; gap: 24px; }
.hidden { display: none; }
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.metrics article { padding: 18px; border-radius: 18px; }
.metrics span { display: block; color: #6b756c; font-size: 0.82rem; margin-bottom: 6px; }
.metrics strong { text-transform: capitalize; font-size: 1.25rem; }
.recommendation, .next-step { padding: 28px; border-radius: 24px; }
.recommendation h2 { margin: 0 0 14px; font-size: clamp(1.7rem, 4vw, 3rem); letter-spacing: -0.035em; }
.recommendation p:last-child, .next-step p:last-child { line-height: 1.7; color: #4f5b52; }
h3 { margin: 10px 0 14px; font-size: 1.45rem; }
.option-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.option-card { position: relative; padding: 22px; border-radius: 20px; }
.option-card h4 { margin: 0 46px 10px 0; font-size: 1.15rem; }
.option-card p { line-height: 1.55; color: #526056; }
.option-card small { display: block; margin-top: 10px; line-height: 1.45; color: #566158; }
.score { position: absolute; top: 18px; right: 18px; font-weight: 900; color: #667265; }

@media (max-width: 760px) {
  .shell { padding-top: 38px; }
  .metrics { grid-template-columns: repeat(2, 1fr); }
  .option-grid { grid-template-columns: 1fr; }
}