:root{
  --red:#DD2019;
  --red-dark:#B4140F;
  --blue:#12409E;
  --sky:#7FC9F2;
  --sky-soft:#CFE9FA;
  --yellow:#FBC42C;
  --cream:#FBF3E4;
  --cream-2:#F5E8D2;
  --ink:#122A5C;
  --ink-soft:#3D5480;

  --display:"Alfa Slab One", Georgia, serif;
  --body:"Archivo", system-ui, -apple-system, sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--body);
  color:var(--ink);
  background-color:var(--cream);
  background-image:
    radial-gradient(circle at 50% 8%, rgba(127,201,242,.34), rgba(127,201,242,0) 58%),
    radial-gradient(circle at 12% 88%, rgba(251,196,44,.20), rgba(251,196,44,0) 50%),
    radial-gradient(circle at 88% 78%, rgba(221,32,25,.10), rgba(221,32,25,0) 46%);
  background-attachment:fixed;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  position:relative;
  overflow-x:hidden;
}
body::after{
  content:"";
  position:fixed; inset:0; pointer-events:none; z-index:2;
  opacity:.16; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.stripe-top,.stripe-bottom{
  height:10px; flex:none;
  background:repeating-linear-gradient(
    90deg,
    var(--red) 0 40px,
    var(--cream) 40px 80px
  );
  border-bottom:3px solid var(--blue);
}
.stripe-bottom{border-bottom:0; border-top:3px solid var(--blue)}

.wrap{
  flex:1;
  width:100%;
  max-width:660px;
  margin:0 auto;
  padding:clamp(2.5rem,7vw,4.75rem) 1.5rem clamp(2rem,5vw,3rem);
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  position:relative;
  z-index:1;
}

.logo{
  width:min(320px,72vw);
  height:auto;
  filter:drop-shadow(0 14px 26px rgba(18,42,92,.22));
  animation:drop .9s cubic-bezier(.2,.9,.3,1) both;
}
@keyframes drop{
  from{opacity:0; transform:translateY(-18px) scale(.94)}
  to{opacity:1; transform:none}
}

.tagline{
  font-family:var(--display);
  font-size:clamp(.95rem,3vw,1.15rem);
  letter-spacing:.02em;
  color:var(--red);
  margin:1.4rem 0 0;
  text-shadow:1px 1px 0 var(--cream), 2px 2px 0 rgba(18,64,158,.28);
}

.rule{
  display:flex; align-items:center; gap:.85rem;
  width:min(300px,80%);
  margin:1.5rem 0 1.75rem;
  color:var(--red);
}
.rule span{flex:1; height:2px; background:linear-gradient(90deg,transparent,var(--blue),transparent); opacity:.45}
.rule svg{opacity:.9}

.headline{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(2.1rem,8.5vw,3.4rem);
  line-height:1.06;
  letter-spacing:-.005em;
  margin:0;
  color:var(--blue);
  text-shadow:
    2px 2px 0 var(--sky-soft),
    4px 4px 0 rgba(18,42,92,.14);
}

.blurb{
  max-width:44ch;
  margin:1.5rem 0 0;
  font-size:clamp(1rem,2.4vw,1.075rem);
  line-height:1.65;
  color:var(--ink-soft);
}
.blurb strong{color:var(--blue); font-weight:700; white-space:nowrap}

/* form */
.signup{width:100%; max-width:460px; margin:2.25rem 0 0}
.field{
  display:flex; gap:.55rem;
  background:#fff;
  border:3px solid var(--blue);
  border-radius:14px;
  padding:.4rem;
  box-shadow:0 6px 0 rgba(18,64,158,.20);
}
.field:focus-within{box-shadow:0 6px 0 rgba(18,64,158,.20), 0 0 0 4px rgba(127,201,242,.6)}
.field input{
  flex:1; min-width:0;
  border:0; outline:0; background:transparent;
  font-family:var(--body); font-size:1rem;
  color:var(--ink);
  padding:.72rem .85rem;
}
.field input::placeholder{color:#9AA9C2}
.field button{
  flex:none;
  font-family:var(--display); font-size:.9rem; letter-spacing:.02em;
  color:#fff; background:var(--red);
  border:0; border-radius:9px;
  padding:.78rem 1.25rem;
  cursor:pointer;
  box-shadow:0 3px 0 var(--red-dark);
  transition:transform .12s ease, background .18s ease, box-shadow .12s ease;
}
.field button:hover{background:#C61A14; transform:translateY(-1px); box-shadow:0 4px 0 var(--red-dark)}
.field button:active{transform:translateY(2px); box-shadow:0 1px 0 var(--red-dark)}
.field button[disabled]{opacity:.6; cursor:progress}

.msg{
  min-height:1.35rem;
  margin:.8rem 0 0;
  font-size:.9rem;
  font-weight:600;
}
.msg.ok{color:#17753C}
.msg.err{color:var(--red-dark)}

.foot{margin-top:auto; padding-top:3rem}
.est{
  font-family:var(--display);
  font-size:.72rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--blue); opacity:.75; margin:0;
}
.copy{font-size:.78rem; color:var(--ink-soft); opacity:.7; margin:.5rem 0 0}

.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}

@media (max-width:420px){
  .field{flex-direction:column; padding:.5rem}
  .field button{width:100%}
  .stripe-top,.stripe-bottom{background-size:auto}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
}