/* =================== Base / Background =================== */
:root{
  --bg:#0b0b0d;
  --text:#e8e8ea;
  --muted:#b7bcc1;
  --border:rgba(255,255,255,.12);
  --accent:#f59e0b;
}

/* Desktop fit wrapper */
#fit-root{
  width: 100%;
  display: block;
  position: relative;
  min-height: 100vh; /* reserve viewport height so scaling can set an exact height */
}

/* We’ll apply transform scale() to .fit-scale via JS */
.fit-scale{
  transform-origin: top center;
  will-change: transform;
}

/* When we’re actively scaling to fit, lock scroll for the page (modal still works) */
html.fit-active, body.fit-active{
  overflow: hidden;
}

/* Optional: prevent subtle blur on some GPUs during scale */
.fit-scale {
  image-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*{ box-sizing:border-box }
html,body{
  height:100%;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-optical-sizing:none;
}
html{ background:var(--bg) !important }
body{
  margin:0;
  color:var(--text);
  background:var(--bg) !important;
  overflow:auto; /* normal scrolling when not in fit mode */
}

/* fixed diagonal texture */
body::before{
  content:"";
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:repeating-linear-gradient(-45deg, rgba(255,255,255,.035) 0 2px, transparent 2px 10px);
}

/* =================== Hero (scrolling) =================== */
.hero{
  position:relative;
  height:auto;
  max-width:1200px; margin:0 auto;
  padding:5px 0 36px;
  text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:0;
  padding-top: clamp(2px, 4vh, 12px) !important;
}

/* stacking context for hero UI vs below */
.brand,.hero-title,.sub,.form,.fineprint{ position:relative; z-index:2; }

/* =================== Brand =================== */
.brand{
  display:grid; place-items:center;
  gap:8px;
  margin-top: clamp(0px, 0.8vh, 10px) !important;
  margin-bottom: clamp(10px, 2vh, 22px) !important;
}
.logo{ width:72px;height:72px;border-radius:50% }
.brand-row{ display:flex;align-items:center;gap:6px }
.brand-name{ font-weight:800; font-size: clamp(18px, 1.4vw, 22px); line-height:22px; color:#f5f5f5 }
.verified{ width:18px;height:18px;border-radius:50%; background:#1d9bf0; position:relative; box-shadow:0 0 0 2px rgba(29,155,240,.35) }
.verified::before{ content:"✓"; position:absolute; inset:0; display:grid; place-items:center; color:#fff; font-size:13px; font-weight:800 }
.handle{ font-size:clamp(14px,1vw,16px); line-height:18px; color:#b8c0c7 }

/* =================== Headline =================== */
.hero-title{ max-width:1000px; margin:10px auto 10px !important; }
.money{ color:var(--accent); font-weight:900; letter-spacing:-0.01em; }
.title-line1,.title-line2{
  display:block; font-weight:700;
  font-size:clamp(24px, min(3.6vw, 4.6svh), 38px);
  line-height:clamp(30px, 1.14em, 44px);
  color:#e6ebf0; text-shadow:0 2px 7px rgba(0,0,0,.35); text-wrap:balance;
}
.title-line2{ font-weight:900; color:#f5f5f5 }

/* =================== Subhead (tight like reference) =================== */
.sub{
  max-width:60ch;
  padding-inline:12px;
  margin:12px auto 16px !important;
  font-weight:400;
  font-size:22px;
  line-height:1.25;
  color:#cfd5db;
  text-wrap:balance;
}

/* =================== Form =================== */
.form{
  display:grid; grid-template-columns:1fr;
  gap:14px; width:min(92vw,740px);
  margin:10px auto 24px;
}
.form .field{ display:flex; flex-direction:column; gap:6px }

.form input{
  width:100%; height:46px; padding:12px 14px;
  border-radius:10px; border:1px solid #2a2a2a; background:#111215;
  color:#e8e8ea; outline:none; box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  font-size:16px; line-height:1.2;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease, transform .12s ease;
}
.form input::placeholder{ color:#8e949a }

/* Hover/focus glow */
.form input:hover{
  border-color:rgba(59,130,246,.9);
  background:#121419;
  box-shadow:0 0 0 3px rgba(59,130,246,.18), 0 8px 24px rgba(59,130,246,.12);
}
.form input:focus{
  border-color:rgba(59,130,246,1);
  background:#13161a;
  box-shadow:0 0 0 3px rgba(59,130,246,.25), 0 10px 28px rgba(59,130,246,.15);
}

/* ===== Validation / error UI ===== */
.form input[aria-invalid="true"],
.form input.input-error{
  border-color: rgba(239,68,68,.85) !important;
  background: #141113;
  box-shadow:
    0 0 0 3px rgba(239,68,68,.15) inset,
    0 6px 18px rgba(239,68,68,.12);
}
.form input[aria-invalid="true"]:focus,
.form input.input-error:focus{
  border-color: rgba(248,113,113,1) !important;
  box-shadow:
    0 0 0 3px rgba(248,113,113,.25),
    0 10px 26px rgba(248,113,113,.18);
}
.error-msg{
  display:none; margin-top:6px; padding-left:2px;
  color:#fecaca; font-size:13.5px; line-height:1.35; text-align:left;
}
.error-msg.active{ display:block }
@keyframes tta-shake{
  0%,100%{ transform:translateX(0) }
  20%{ transform:translateX(-4px) }
  40%{ transform:translateX(4px) }
  60%{ transform:translateX(-3px) }
  80%{ transform:translateX(3px) }
}
.form .shake{ animation: tta-shake .28s ease-out }

/* a11y focus */
button:focus-visible, .btn:focus-visible, input:focus-visible{ outline:2px solid #60a5fa; outline-offset:2px }

/* CTA */
.buttons{
  grid-column:1/-1;
  display:flex; gap:12px; justify-content:center; flex-wrap:wrap;
  width:min(92vw,740px);
  margin-top:6px;
}
.btn{
  flex:1 1 auto; height:46px; padding:0 18px; border-radius:8px; border:1px solid transparent;
  color:#fff; cursor:pointer; font-weight:800; font-size:13px; letter-spacing:.02em; text-transform:uppercase;
  display:inline-flex; align-items:center; justify-content:center;
  min-width:260px; max-width:560px;
  transition:filter .15s ease, opacity .15s ease, transform .12s ease, box-shadow .15s ease, background .15s ease;
}
.btn.success{ background:#2E7D32 }
.btn.success:hover{
  background:#329137;
  transform:translateY(-1px);
  box-shadow:0 10px 32px rgba(46,125,50,.6), 0 0 0 2px rgba(255,255,255,.04) inset;
}
.btn.success:active{ transform:none; box-shadow:0 6px 20px rgba(46,125,50,.45) }
.btn[disabled]{ opacity:.55; cursor:not-allowed }

/* Fine print */
.fineprint{
  grid-column:1/-1; width:min(92vw,740px);
  font-weight:500; font-size:11px; line-height:150%;
  color:#aeb3b8; opacity:.9; text-align:center;
  margin:2px auto 18px !important;
}

/* =================== Resources (never pinned) =================== */
.resources{
  position:relative;
  width:100%; max-width:1200px;
  text-align:center; z-index:auto;
  margin-top:8px; padding-top:0;
}
.resources *{ pointer-events:none }
.resources-title{
  font-family:Poppins,system-ui,sans-serif;
  font-weight:800; font-size:34px; line-height:115%;
  margin:0 0 16px; color:#f5f5f5;
  text-shadow:0 2px 7px rgba(0,0,0,.4), 0 0 22px rgba(255,255,255,.03);
}
.promo{
  width:min(100%,960px); display:block; margin:6px auto 0;
  height:auto; filter:drop-shadow(0 18px 65px rgba(0,0,0,.45));
}
.mascot{
  position:absolute; left:max(18px,6%); bottom:-6px;
  width:clamp(220px,22vw,340px); pointer-events:none;
  filter:drop-shadow(0 18px 55px rgba(0,0,0,.4)); transform:translateZ(0);
}

/* =================== Phones (≤768px) =================== */
@media (max-width:768px){
  .hero{ padding:16px 16px 28px !important; gap:12px !important }
  .logo{ width:56px;height:56px }
  .title-line1,.title-line2{
    font-size:clamp(22px,6.2vw,30px) !important;
    line-height:1.15 !important; letter-spacing:-0.2px !important;
  }
  .sub{
    font-size:16px !important; line-height:1.25 !important;
    max-width:95vw !important; margin:6px auto 14px !important
  }
  .buttons{ width:100% !important; max-width:560px !important; flex-direction:column !important; gap:12px !important; margin-top:12px !important }
  .buttons .btn,.btn{
    display:flex !important; align-items:center !important; justify-content:center !important;
    height:66px !important; padding:0 18px !important; min-width:0 !important;
    font-size:15px !important; font-weight:900 !important; letter-spacing:.02em !important;
    border-radius:9999px !important; border:1px solid transparent !important; text-shadow:none !important; box-shadow:none !important;
  }
  .fineprint{ margin:8px auto 14px !important; width:min(92vw,560px) !important }

  .resources{
    position:relative !important; left:auto !important; right:auto !important; bottom:auto !important; transform:none !important;
    width:92vw !important; max-width:700px !important; margin:22px auto !important; text-align:center !important;
    padding-bottom:clamp(92px,18vw,120px) !important; z-index:auto !important;
  }
  .resources-title{ font-size:24px !important; line-height:1.2 !important; margin:0 0 12px !important }
  .promo{ display:block !important; width:100% !important; height:auto !important; margin:0 auto !important }
  .mascot{ left:clamp(12px,4vw,22px); bottom:64px; width:clamp(104px,28vw,150px) }
  @media (max-width:359px){ .mascot{ display:none !important } }
}

/* === Re-enable text selection (Framer disables it) === */
html, body, main, .hero, .brand, .hero-title, .sub, .resources-title,
h1, h2, h3, h4, p, small, span, div {
  -webkit-user-select:text !important;
  -moz-user-select:text !important;
  -ms-user-select:text !important;
  user-select:text !important;
}
button, .btn, input, label {
  -webkit-user-select:none !important;
  -moz-user-select:none !important;
  -ms-user-select:none !important;
  user-select:none !important;
}

/* =================== Modal (popup) =================== */
.modal-overlay{
  position:fixed; inset:0; display:none; place-items:center;
  background:rgba(0,0,0,.55); z-index:9998; padding:16px;
}
.modal-overlay[aria-hidden="false"]{ display:grid; }
.modal{
  position:relative; width:min(92vw,560px); background:rgba(17,17,20,.98);
  border:1px solid var(--border); border-radius:16px;
  padding:28px 22px 20px; box-shadow:0 25px 70px rgba(0,0,0,.5);
}
.modal-header{ display:flex; align-items:center; gap:14px; margin-bottom:10px; }
.modal-dot{
  width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  font-weight:800;color:#fff; font-size:16px;
  background:linear-gradient(180deg,#059669,#10b981);
}
.modal.error .modal-dot{ background:linear-gradient(180deg,#dc2626,#ef4444) }
.modal h3{ margin:0; font-size:24px; font-weight:900; color:#e8e8ea; }
.modal-text{ margin:10px 2px 18px; font-size:18px; color:#cfd5db; line-height:1.6; }
.modal-actions{ display:flex; justify-content:flex-end; gap:8px; }
.modal-actions .btn{ min-width:140px; height:48px; border-radius:10px; font-size:16px; }
.modal-close{
  position:absolute; top:8px; right:8px; width:32px; height:32px;
  border:0; border-radius:8px; background:transparent; color:#cfd5db; font-size:24px; cursor:pointer;
}
.modal-close:hover{ color:#fff }
.modal-bar{ position:relative; height:3px; background:rgba(255,255,255,.08); border-radius:2px; overflow:hidden; margin-top:8px }
.modal-fill{ position:absolute; inset:0 auto 0 0; width:100%; background:#10b981 }
.modal.error .modal-fill{ background:#ef4444 }

/* =================== Spring-in animation =================== */
.spring-in{
  --spring-delay: 0;
  opacity:0;
  transform: translateY(10px) scale(.985);
  animation: springIn 1s cubic-bezier(.2,.8,.2,1) forwards;
  animation-delay: calc(var(--spring-delay) * 90ms);
  will-change: transform, opacity;
}
@keyframes springIn{
  0%   { opacity:0; transform: translateY(16px) scale(.97) }
  60%  { opacity:1; transform: translateY(0)    scale(1.005) }
  100% { opacity:1; transform: translateY(0)    scale(1) }
}