:root{
  --ink:#0b0b0d;
  --surface:#151517;
  --border:#2a2a2e;
  --text:#f2ede4;
  --text-dim:#8c8b87;
  --purple:#8b6cf0;
  --teal:#3ecfb0;
}
*{box-sizing:border-box;}
body{
  margin:0; background:var(--ink); color:var(--text);
  font-family:'Inter', sans-serif; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:600px; margin:0 auto; padding:80px 24px 100px;}

header{margin-bottom:56px;}
.logo{
    display:flex;
    justify-content:center;
    margin-bottom:25px;
}

.logo img{
    width:220px;
    max-width:100%;
    height:auto;
}
.eyebrow{
  font-size:13px; color:var(--teal); font-weight:500;
  display:flex; align-items:center; gap:8px; margin-bottom:18px;
}
.eyebrow::before{content:''; width:6px; height:6px; border-radius:50%; background:var(--teal);}
h1{
  font-family:'Space Grotesk', sans-serif; font-weight:700;
  font-size:40px; line-height:1.15; margin:0 0 16px; letter-spacing:-0.5px;
}
h1 em{color:var(--purple); font-style:normal;}
p.lede{font-size:15px; line-height:1.6; color:var(--text-dim); margin:0; max-width:460px;}

/* progress */
.progress{display:flex; align-items:center; gap:8px; margin-bottom:40px;}
.progress .dot{
  width:8px; height:8px; border-radius:50%; background:var(--border);
  transition:background .2s;
}
.progress .dot.active{background:var(--teal);}
.progress .bar{flex:1; height:1px; background:var(--border);}

form{display:flex; flex-direction:column; gap:20px;}

.field label{
  display:block; font-size:13px; font-weight:500; color:var(--text);
  margin-bottom:8px;
}
.field label .req{font-weight:400; color:var(--text-dim); font-size:12px; margin-left:4px;}
.field input, .field textarea{
  width:100%; background:var(--surface); color:var(--text);
  border:1px solid var(--border); border-radius:8px;
  padding:12px 14px; font-family:'Inter', sans-serif; font-size:14.5px; outline:none;
  transition:border-color .15s;
}
.field input::placeholder, .field textarea::placeholder{color:#57565f;}
.field input:focus, .field textarea:focus{border-color:var(--teal);}
.field textarea{resize:vertical; min-height:80px;}
.row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
@media (max-width:520px){ .row{grid-template-columns:1fr;} }

.errmsg{display:none; font-size:13px; color:#f0857c;}

.submit-row{margin-top:8px; display:flex; flex-direction:column; gap:10px;}
button.send{
  font-family:'Inter', sans-serif; font-weight:600; font-size:14.5px; color:var(--ink);
  background:var(--teal); border:none; border-radius:8px; padding:14px 20px; cursor:pointer;
  transition:opacity .15s;
  display:flex; align-items:center; justify-content:center; gap:8px;
}
button.send:hover{opacity:0.88;}
button.send:active{opacity:0.75;}
button.send:disabled{opacity:0.6; cursor:default;}
.send-note{font-size:12.5px; color:var(--text-dim);}

.spinner{
  width:14px; height:14px; border-radius:50%;
  border:2px solid rgba(11,11,13,0.25); border-top-color:var(--ink);
  animation:spin .7s linear infinite; display:none;
}
@keyframes spin{to{transform:rotate(360deg);}}

/* step 2 */
.step2{display:none; flex-direction:column; gap:24px;}
.check{
  width:44px; height:44px; border-radius:50%; background:rgba(62,207,176,0.12);
  display:flex; align-items:center; justify-content:center; color:var(--teal);
  font-size:20px; margin-bottom:4px;
}
.step2 h2{
  font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:24px;
  margin:0 0 8px; letter-spacing:-0.3px;
}
.step2 p{font-size:14.5px; line-height:1.6; color:var(--text-dim); margin:0;}
.step2 p b{color:var(--text); font-weight:500;}

.clipcard{
  border:1px solid var(--border); border-radius:8px; padding:16px;
  background:var(--surface); font-size:13.5px; color:var(--text-dim);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.clipcard b{color:var(--text); font-weight:500;}

a.wa{
  font-family:'Inter', sans-serif; font-weight:600; font-size:14.5px; color:var(--ink);
  background:var(--teal); border:none; border-radius:8px; padding:14px 20px; cursor:pointer;
  transition:opacity .15s; text-decoration:none; text-align:center; display:block;
}
a.wa:hover{opacity:0.88;}
.call-btn{
  font-family:'Inter', sans-serif; font-weight:600; font-size:14px; color:var(--teal);
  border:1px solid var(--teal); border-radius:8px; padding:13px 20px; cursor:pointer;
  transition:background .15s, color .15s; text-decoration:none; text-align:center; display:block;
  background:transparent;
}
.call-btn:hover{background:rgba(62,207,176,0.08);}

.fallback{font-size:12.5px; color:var(--text-dim); text-align:center;}
.fallback a{color:var(--teal);}

.steps{margin-top:64px; padding-top:32px; border-top:1px solid var(--border);}
.steps h2{font-size:13px; font-weight:500; color:var(--text-dim); text-transform:uppercase; letter-spacing:0.5px; margin:0 0 20px;}
.step{display:flex; gap:14px; margin-bottom:16px;}
.step .num{
  flex-shrink:0; width:22px; height:22px; border-radius:50%;
  background:var(--surface); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-size:11.5px; color:var(--text-dim); font-weight:500;
}
.step p{margin:0; font-size:13.5px; line-height:1.6; color:var(--text-dim);}
.step p b{color:var(--text); font-weight:500;}

footer{margin-top:56px; font-size:12px; color:var(--text-dim);}