# CSS is for the Landing page and Privacy Policy Slide panel
/* ================================================================
   Imo Styles (v3.1)
   Landing page aligned with
   updated privacy policy panel
   Deep dark charcoal
   No borders, no transparency,
   no shadow, responsive layout
   ========================= */

:root{
  --charcoal:#111111;
  --charcoal-2:#1A1A1A;
  --charcoal-3:#222222;
  --white:#ffffff;
  --green:#16c172;
  --green2:#12a85f;
}

*{
  box-sizing:border-box;
}

html,
body{
  height:100%;
  margin:0;
  padding:0;
}

body{
  font-family:system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  background:var(--charcoal);
  color:var(--white);
  line-height:1.4;
  overflow-x:hidden;
}

img{
  max-width:100%;
  display:block;
}

.wrap{
  min-height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px 16px;
  background:var(--charcoal);
}

.card{
  width:100%;
  max-width:520px;
  background:var(--charcoal);
  border:none;
  border-radius:18px;
  padding:26px 22px;
  box-shadow:none;
}

.hero{
  margin:0 0 18px;
}

.hero-top{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  margin:0 0 6px;
  flex-wrap:nowrap;
  min-width:0;
}

.hero-top h1{
  margin:0;
  font-size:32px;
  line-height:1.1;
  letter-spacing:.2px;
  font-weight:800;
  white-space:nowrap;
  color:var(--white);
}

.logo{
  height:65px;
  width:auto;
  object-fit:contain;
  flex-shrink:0;
}

.subtitle{
  margin:0;
  font-size:18px;
  line-height:1.3;
  color:var(--white);
  opacity:.95;
}

.note{
  background:var(--charcoal-2);
  border:none;
  border-radius:14px;
  padding:16px;
  margin-bottom:18px;
}

.note p{
  margin:10px 0;
  font-size:18px;
  line-height:1.45;
}

.note p:first-child{
  margin-top:0;
}

.note p:last-child{
  margin-bottom:0;
}

.note pre,
#out{
  margin:0;
  white-space:pre-wrap;
  word-break:break-word;
  font-family:inherit;
  font-size:18px;
  line-height:1.5;
  color:var(--white);
  background:transparent;
}

.pay-form{
  display:flex;
  flex-direction:column;
  gap:14px;
  width:100%;
}

.label{
  display:block;
  font-size:15px;
  font-weight:700;
  margin:0;
  color:var(--white);
}

.field{
  width:100%;
  height:56px;
  padding:0 16px;
  border:none;
  border-radius:14px;
  outline:none;
  background:var(--charcoal-3);
  color:var(--white);
  font-size:17px;
  font-family:inherit;
  appearance:none;
  -webkit-appearance:none;
}

.field::placeholder{
  color:rgba(255,255,255,.72);
}

.field:focus{
  background:#2A2A2A;
}

.btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:56px;
  padding:0 16px;
  border:none;
  border-radius:14px;
  text-decoration:none;
  font-weight:900;
  font-size:18px;
  letter-spacing:.4px;
  color:var(--white);
  background:linear-gradient(180deg, var(--green), var(--green2));
  box-shadow:none;
  cursor:pointer;
  transition:transform .08s ease, filter .08s ease, opacity .08s ease;
}

.btn:hover{
  filter:brightness(1.03);
}

.btn:active{
  transform:translateY(1px);
}

.btn:disabled{
  opacity:.75;
  cursor:not-allowed;
}

.tiny{
  margin:14px 0 0;
  font-size:13px;
  line-height:1.5;
  text-align:center;
  color:rgba(255,255,255,.92);
}

.tiny a{
  color:var(--white);
  text-decoration:underline;
  font-weight:700;
}

/* TABLET */
@media (max-width:768px){
  .wrap{
    padding:20px 14px;
  }

  .card{
    padding:24px 20px;
    border-radius:16px;
  }

  .hero-top h1{
    font-size:30px;
  }

  .logo{
    height:62px;
  }

  .subtitle{
    font-size:17px;
  }

  .note{
    padding:15px;
  }

  .note p,
  .note pre,
  #out{
    font-size:17px;
  }

  .field{
    height:54px;
    font-size:16px;
  }

  .btn{
    min-height:54px;
    font-size:17px;
  }
}

/* MOBILE */
@media (max-width:600px){
  .wrap{
    padding:18px 16px;
    align-items:flex-start;
  }

  .card{
    max-width:100%;
    padding:22px 18px;
    border-radius:16px;
  }

  .hero{
    margin-bottom:16px;
  }

  .hero-top{
    gap:8px;
    margin-bottom:6px;
  }

  .hero-top h1{
    font-size:28px;
  }

  .logo{
    height:60px;
  }

  .subtitle{
    font-size:16px;
  }

  .note{
    padding:14px;
    margin-bottom:16px;
    border-radius:12px;
  }

  .note p,
  .note pre,
  #out{
    font-size:16px;
    margin:8px 0;
  }

  .pay-form{
    gap:12px;
  }

  .label{
    font-size:14px;
  }

  .field{
    height:52px;
    padding:0 14px;
    font-size:16px;
    border-radius:12px;
  }

  .btn{
    min-height:52px;
    font-size:16px;
    border-radius:12px;
  }

  .tiny{
    font-size:12px;
    margin-top:12px;
  }
}

/* VERY SMALL SCREENS */
@media (max-width:380px){
  .wrap{
    padding:14px 12px;
  }

  .card{
    padding:18px 14px;
  }

  .hero-top{
    gap:6px;
  }

  .hero-top h1{
    font-size:24px;
  }

  .logo{
    height:56px;
  }

  .subtitle{
    font-size:15px;
  }

  .note p,
  .note pre,
  #out{
    font-size:15px;
  }

  .field{
    font-size:15px;
  }

  .btn{
    font-size:15px;
  }
}
}