:root{
  --brand:#4ea3a1; --brand-600:#3a8b89; --brand-700:#2f7a78;
  --accent:#c27652;
  --ink-900:#111827; --ink-700:#4b5563; --ink-500:#6b7280;
  --border:#e5e7eb; --panel:#fff; --bg:#f6f7fb;
  --radius:18px; --shadow:0 12px 28px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.05);
  --focus:0 0 0 3px rgba(78,163,161,.25);
}
*,:before,:after{box-sizing:border-box}
html,body{height:100%}
body{margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial; color:var(--ink-900); background:var(--bg)}

a{color:inherit; text-decoration:none}
button{font:inherit}

.container{max-width:1120px; margin:0 auto; padding:0 20px}

/* Top bar (logo + Sign In) */
.top{height:64px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 14px}
.brand{display:flex; align-items:center; gap:10px}
.brand img{height:22px}
.brand span{font-weight:800}
.signin{appearance:none; border:none; background:var(--accent); color:#fff; border-radius:10px; padding:8px 14px; font-weight:700}

/* Step card centered */
.stage{display:grid; place-items:start center; min-height:calc(100vh - 64px); padding:24px}
.card{width:min(860px, 92vw); background:#fff; border:1px solid var(--border); border-radius:16px; padding:18px 20px; box-shadow:none}
.card h1{font-size:18px; margin:0 0 6px}
.card p.sub{margin:0 0 16px; color:var(--ink-700)}

/* Inputs + CTA */
.input{width:100%; padding:12px 14px; border:1px solid var(--border); border-radius:12px; margin:8px 0}
.input:focus{outline:none; border-color:var(--brand); box-shadow:var(--focus)}
.btn{appearance:none; border:1px solid var(--border); border-radius:12px; padding:12px 14px; font-weight:800; background:var(--brand); color:#fff; cursor:pointer}
.btn:hover{background:var(--brand-600)}
.btn-small{padding:8px 12px; border-radius:10px; font-weight:700}

/* Tile grid */
.tiles{display:grid; grid-template-columns:1fr; gap:14px; margin-top:4px}
@media (min-width:760px){ .tiles{grid-template-columns:repeat(3,1fr)} }
@media (min-width:980px){ .tiles.cols-4{grid-template-columns:repeat(4,1fr)} }

.tile{background:#fff; border:1px solid var(--border); border-radius:14px; padding:14px; display:flex; gap:12px; align-items:flex-start}
.dot{width:24px; height:24px; border-radius:50%; background:linear-gradient(145deg,#e6f3f2,#d6ecea); border:1px solid #cfe2e2}
.tile h3{margin:2px 0 4px; font-size:16px}
.tile p{margin:0; color:var(--ink-700); font-size:14px}
.tile .cta{margin-top:10px}

/* Progress bar */
.progress{width:100%; height:32px; border:1px solid var(--border); border-radius:999px; overflow:hidden; position:relative}
.progress > span{display:block; height:100%; background:linear-gradient(90deg, var(--brand), var(--brand-600));}
.progress .label{position:absolute; right:8px; top:50%; transform:translateY(-50%); color:var(--ink-800); font-weight:700}

/* Flexible modules banner */
.hero{display:flex; align-items:center; justify-content:space-between; gap:10px; background:#fff; border:1px solid var(--border); border-radius:14px; padding:14px 16px}
.hero h1{margin:0; font-size:20px}
.note{background:#fff; border:1px solid var(--border); border-radius:14px; padding:14px; color:var(--ink-700)}