/* Minimal, accessible styles for PennyLink landing */
:root{
  --bg:#0f172a;         /* deep slate */
  --fg:#ffffff;
  --muted:#cbd5e1;
  --accent:#22c55e;     /* green */
  --card:#111827;
  --stroke:#1f2937;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--fg);
  line-height:1.6;
}

.container{max-width:1120px;margin:0 auto;padding:24px}
.header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--stroke)}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:28px;height:28px}
.brand-name{font-weight:700;letter-spacing:.3px}

.nav a{color:var(--muted);text-decoration:none;margin-left:18px}
.nav a.btn{color:#0b1324}

.btn{
  display:inline-block;
  background: var(--accent);
  color:#0b1324;
  padding:12px 18px;
  border-radius:10px;
  text-decoration:none;
  font-weight:700;
  border:0;
  cursor:pointer;
}
.btn.small{padding:8px 12px;font-size:.9rem}

.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center;padding-top:32px}
.hero h1{font-size:clamp(28px,5vw,48px);line-height:1.1;margin:.2em 0}
.lead{color:var(--muted);max-width:54ch}
.trust{display:grid;gap:8px;margin-top:14px;color:var(--muted)}
.trust-item{display:flex;align-items:center;gap:8px}

.hero-art img{width:100%;height:auto}

.features{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:24px}
.feature{background:var(--card);border:1px solid var(--stroke);padding:18px;border-radius:12px}
.feature h3{margin-top:0}

.waitlist{text-align:center;margin:48px auto}
.waitlist-form{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:12px 0}
.waitlist-form input{
  background:#0b1324;border:1px solid var(--stroke);color:var(--fg);
  padding:12px 14px;border-radius:10px;min-width:260px;max-width:400px;outline:none;
}
.form-note{color:var(--muted);font-size:.9rem}
.thanks{margin-top:10px;color:var(--accent);font-weight:600}

.privacy{margin:48px auto;color:var(--muted)}
.privacy a{color:var(--fg)}

.footer{display:flex;gap:18px;align-items:center;justify-content:space-between;border-top:1px solid var(--stroke);margin-top:40px}
.footer a{color:var(--muted);text-decoration:none}

@media (max-width: 900px){
  .hero{grid-template-columns:1fr}
  .features{grid-template-columns:1fr 1fr}
}
@media (max-width: 560px){
  .features{grid-template-columns:1fr}
}