/* Scappa Coming Soon - front end landing styles. Defaults equal the locked design. */
*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }
.scappa-body{
  font-family:var(--body-font);
  color:var(--txt);
  background:var(--ink);
  overflow-x:hidden;
}

.hero{ position:relative; min-height:100vh; overflow:hidden; isolation:isolate; padding:0 24px; }
.hero::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background:var(--hero-bg);
}

.wrap{ max-width:1000px; margin:0 auto; padding:4px 0 40px; text-align:center; position:relative; }

.logo{
  height:356px; width:auto; max-width:80vw; margin:-76px auto -64px; display:block;
  filter:brightness(1.05) drop-shadow(0 8px 24px rgba(0,0,0,.5));
}

h1{
  font-family:var(--heading-font); font-weight:700; color:var(--txt);
  font-size:5rem; line-height:1em; letter-spacing:-0.2rem;
  margin:0 auto 20px; max-width:14ch;
}
.mark{
  display:inline-block; background:var(--lime); color:var(--lime-tx);
  font-size:4rem; font-weight:600;
  padding:.02em .28em; border-radius:8px 14px 10px 16px; transform:rotate(-2.5deg);
  box-shadow:0 8px 30px rgba(212,248,74,.20);
}

.sub{
  font-size:clamp(15px,1.5vw,17px); color:var(--muted); font-weight:400;
  line-height:1.55; max-width:42ch; margin:0 auto 28px;
}

.scappa-form{ max-width:480px; margin:0 auto 6px; }
.scappa-row{ display:flex; gap:10px; }
.scappa-form input[type=email]{
  flex:1; border:none; outline:none; background:rgba(255,255,255,.07);
  border-radius:999px; padding:15px 22px; font-size:15px; font-family:inherit; color:var(--txt);
  -webkit-appearance:none; appearance:none;
}
.scappa-form input[type=email]::placeholder{ color:#8a9d97; }
.scappa-form input[type=email]:focus{ outline:none; box-shadow:0 0 0 3px rgba(18,113,91,.30); }
/* keep autofill from forcing a white or yellow background */
.scappa-form input:-webkit-autofill,
.scappa-form input:-webkit-autofill:hover,
.scappa-form input:-webkit-autofill:focus,
.scappa-form input:-webkit-autofill:active{
  -webkit-text-fill-color:var(--txt);
  caret-color:var(--txt);
  -webkit-box-shadow:0 0 0 1000px #16201d inset;
  box-shadow:0 0 0 1000px #16201d inset;
  transition:background-color 9999s ease-in-out 0s;
}
.scappa-form button{
  border:none; background:var(--green); color:#fff;
  font-family:var(--body-font);
  font-weight:500; font-size:18px; line-height:48px; letter-spacing:normal;
  font-variant-numeric:lining-nums; text-align:center; vertical-align:middle;
  padding:0 28px; border-radius:999px; cursor:pointer; white-space:nowrap; transition:.15s;
}
.scappa-form button:hover{ background:var(--green-d); transform:translateY(-1px); }
.scappa-form button[disabled]{ opacity:.6; cursor:default; transform:none; }

.scappa-hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0; }

.scappa-msg{ min-height:1.2em; margin:10px auto 0; font-size:14px; font-weight:500; max-width:480px; }
.scappa-msg.is-ok{ color:#7ee0bf; }
.scappa-msg.is-err{ color:#ff9a8f; }

.nospam{ font-size:12px; color:#74867f; margin:14px auto 22px; }

.proof{ display:flex; align-items:center; justify-content:center; gap:13px; }
.proof p{ color:var(--muted); font-size:15px; font-weight:500; }

.show{ margin-top:34px; display:flex; justify-content:center; }
.browser{
  width:820px; max-width:90vw; border-radius:14px 14px 0 0; overflow:hidden; background:#0f1714;
  box-shadow:0 -20px 80px rgba(18,113,91,.28), 0 0 0 1px rgba(255,255,255,.06);
}
.bbar{ height:40px; background:#141d19; display:flex; align-items:center; gap:8px; padding:0 16px; border-bottom:1px solid rgba(255,255,255,.06); }
.bbar i{ width:12px; height:12px; border-radius:50%; display:inline-block; }
.bbar .r{ background:#ec6a5e; } .bbar .y{ background:#f4bf4f; } .bbar .g{ background:#61c454; }
.browser img{ display:block; width:100%; height:auto; }

/* Success / waitlist screen */
.scappa-success{ max-width:640px; margin:0 auto; }
.scappa-success h1{ margin-bottom:18px; }
.scappa-success .sub{ margin-bottom:34px; }

.scappa-copy{
  display:flex; align-items:center; gap:8px; max-width:560px; margin:0 auto;
  background:rgba(255,255,255,.07); border-radius:999px; padding:7px 7px 7px 24px;
}
.scappa-copy-input{
  flex:1; border:none; outline:none; background:transparent; color:var(--txt);
  font-family:var(--body-font); font-size:16px; min-width:0;
}
.scappa-copy-btn{
  flex:0 0 auto; width:48px; height:48px; border:none; border-radius:50%; cursor:pointer;
  background:#0c1116; color:#fff; display:inline-flex; align-items:center; justify-content:center; transition:.15s;
}
.scappa-copy-btn:hover{ background:var(--green); }
.scappa-copy-btn.is-copied{ background:var(--green); }

.scappa-or{ color:var(--muted); font-size:15px; margin:26px 0; }

.scappa-share{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.scappa-sh{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-width:170px; padding:16px 26px; border-radius:999px; text-decoration:none;
  font-family:var(--body-font); font-weight:600; font-size:16px; color:#fff; transition:.15s;
}
.scappa-sh:hover{ transform:translateY(-1px); filter:brightness(1.06); }
.scappa-sh svg{ display:block; }
.scappa-sh-x{ background:#0a0a0a; box-shadow:inset 0 0 0 1px rgba(255,255,255,.22); }
.scappa-sh-wa{ background:#25D366; }
.scappa-sh-fb{ background:#1877F2; }


@media(max-width:760px){
  .logo{ height:auto; width:74vw; margin:-10vw auto -8vw; }
  h1{ font-size:2.5rem; letter-spacing:-0.08rem; }
  .mark{ font-size:2rem; }
  .scappa-row{ flex-direction:column; }
  .scappa-form input[type=email]{ text-align:center; }
  .scappa-form button{ width:100%; line-height:normal; font-size:16px; padding:15px 24px; }
  .scappa-share{ flex-direction:column; }
  .scappa-sh{ width:100%; }
}