:root{
  --bg: #fbfbfa;
  --card: #ffffff;
  --text: #111111;
  --muted: #5f5f5f;
  --stroke: rgba(0,0,0,0.10);
  --brand: #057958;
  --brandSoft: rgba(5,121,88,0.10);
  --shadow: 0 18px 60px rgba(0,0,0,0.10);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(900px 500px at 20% 10%, var(--brandSoft), transparent 55%),
    radial-gradient(700px 500px at 80% 20%, rgba(0,0,0,0.04), transparent 55%),
    var(--bg);
}

.center{
  height:100%;
  display:grid;
  place-items:center;
  padding:18px;
}

.card{
  width:min(720px, 100%);
  border:1px solid var(--stroke);
  border-radius:22px;
  background: var(--card);
  box-shadow: var(--shadow);
  padding: 28px 24px;
  text-align:center;
}

.logo-slot{
  display:flex;
  justify-content:center;
  margin-bottom: 14px;
}

.logo{
  height: 52px;
  width:auto;
  display:block;
}

.fallback{
  font-size: 42px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
}
.fallback-way{ color: var(--text); }
.fallback-marked{
  color: white;
  position: relative;
  padding: 0.06em 0.18em;
  margin-left: 2px;
}
.fallback-marked::before{
  content:"";
  position:absolute;
  inset:-0.16em -0.20em -0.18em -0.20em;
  background: var(--brand);
  border-radius: 14px;
  transform: rotate(-1.5deg);
  z-index:-1;
  box-shadow: 0 10px 24px rgba(5,121,88,0.18);
}

.headline{
  margin: 10px 0 8px 0;
  font-size: clamp(22px, 3.2vw, 30px);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.sub{
  margin: 0 auto 16px auto;
  max-width: 54ch;
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.55;
}
.muted{ color: var(--muted); font-weight: 600; }

.form{
  margin-top: 10px;
  display:flex;
  gap: 10px;
  justify-content:center;
  align-items:center;
}

input[type="email"]{
  width:min(360px, 100%);
  padding: 12px 14px;
  border-radius: 12px;
  border:1px solid rgba(0,0,0,0.14);
  font-size: 15px;
  outline:none;
  background:#fff;
}

input[type="email"]:focus{
  border-color: rgba(5,121,88,0.55);
  box-shadow: 0 0 0 4px rgba(5,121,88,0.14);
}

button{
  padding: 12px 14px;
  border-radius: 12px;
  border:1px solid rgba(5,121,88,0.35);
  background: var(--brand);
  color:#fff;
  font-weight: 700;
  font-size: 15px;
  cursor:pointer;
  box-shadow: 0 10px 20px rgba(5,121,88,0.18);
}

button:hover{ filter: brightness(1.02); }
button:active{ transform: translateY(1px); }

.footer{
  margin-top: 18px;
  font-size: 13px;
  color: var(--muted);
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
}

.footer a{
  color: var(--text);
  text-decoration:none;
  border-bottom: 1px dotted rgba(0,0,0,0.30);
}
.footer a:hover{
  border-bottom-color: rgba(5,121,88,0.60);
}

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* Mobile: stack input + button so it still fits one screen */
@media (max-width: 520px){
  .card{ padding: 24px 18px; }
  .logo{ height: 46px; }
  .form{
    flex-direction