:root{
  --bg:#f5f7fb;
  --muted:#6b7280;
  --accent:#0b6;
  --card:#ffffff;
  --glass: rgba(255,255,255,0.6);
}

*{box-sizing:border-box;font-family:Inter,Segoe UI,Roboto,Arial,sans-serif}
body{background:var(--bg);color:#0f172a;margin:0;padding:0}
.wrap{max-width:1100px;margin:0 auto;padding:0 20px}

.site-header{background:transparent;padding:18px 0}
.site-header .brand{font-weight:700;color:#0f172a;text-decoration:none;font-size:1.05rem}
.nav{float:right}
.nav a{margin-left:18px;color:var(--muted);text-decoration:none}

.container{max-width:920px;margin:28px auto;padding:0 20px}
.hero{background:linear-gradient(180deg, rgba(11,102,85,0.05), transparent);padding:28px;border-radius:12px}
h1{margin:0 0 8px;font-size:1.6rem}
.lede{margin:0 0 18px;color:var(--muted)}
.cta{display:grid;grid-template-columns:1fr 1fr 220px;gap:12px;align-items:end}
label{display:block;font-size:.9rem;margin:0;color:var(--muted)}
input,select{padding:10px;border-radius:8px;border:1px solid #e6eef0;font-size:1rem;background:var(--card)}
.cta-actions{display:flex;gap:8px}
button{padding:10px 14px;border-radius:10px;border:0;background:var(--accent);color:#fff;cursor:pointer;font-weight:600}
button.secondary{background:#e6eef0;color:#0f172a}
.result{margin-top:18px;padding:14px;background:var(--card);border-radius:10px;border:1px solid #eef2f3}

.panel{margin-top:20px;padding:18px;background:var(--card);border-radius:10px;border:1px solid #eef2f3}
.features{display:flex;gap:14px;list-style:none;padding:0;margin:12px 0 0;flex-wrap:wrap}
.features li{background:var(--glass);padding:10px;border-radius:8px;flex:1;min-width:160px}

.site-footer{margin:28px 0 50px;color:var(--muted)}
.muted{color:var(--muted);font-size:.9rem}

/* medium screens */
@media (max-width:980px){
  .cta{grid-template-columns:1fr 220px}
}

/* small screens */
@media (max-width:720px){
  .cta{grid-template-columns:1fr}
  .nav{float:none;margin-top:8px;text-align:center}
  .features{flex-direction:column}
  .hero{padding:18px}
  input,select{width:100%}
  .cta-actions{flex-direction:column}
}

/* Make sure select can open over neighboring elements on some mobile layouts */
select{min-width:0;position:relative;z-index:2}
.cta-actions{position:relative;z-index:1}