/* ===========================
   KH WELCOME PAGE
=========================== */

.welcomePage{
  min-height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:30px;

  background:
    radial-gradient(circle at top right, rgba(46,125,50,.15), transparent 35%),
    linear-gradient(135deg,#FFFDF5,#F4F8F1);
}

.welcomeCard{
  width:100%;
  max-width:560px;
  background:#ffffff;
  border:1px solid var(--line);
  border-radius:30px;
  padding:40px;
  box-shadow:var(--shadow);
  overflow:hidden;
}

/* NEW HERO BACKGROUND FOR GIFT */

.welcomeHero{
  text-align:center;
  padding:38px 20px 28px;
  margin:-40px -40px 30px;
  border-radius:30px 30px 42px 42px;

  background:
    radial-gradient(circle at top center, rgba(255,255,255,.65), transparent 42%),
    radial-gradient(circle at top right, rgba(139,195,74,.30), transparent 35%),
    linear-gradient(180deg,#F8FDEB,#EAF7D5);
}

.welcomeIcon{
  position:relative;
  width:140px;
  height:140px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;

  background:
    radial-gradient(circle,#EAF7D5 0%,#D8F0B5 55%,#B7DD7A 100%);

  border:6px solid rgba(255,255,255,.95);

  box-shadow:
    0 18px 45px rgba(46,125,50,.20),
    inset 0 0 30px rgba(255,255,255,.45);

  color:#ffffff;
  font-size:60px;
  overflow:hidden;
}

.welcomeIcon::before{
  content:"";
  position:absolute;
  inset:12px;
  border-radius:50%;
  border:2px solid rgba(46,125,50,.35);
  z-index:1;
}

.welcomeIcon::after{
  content:"";
  position:absolute;
  width:180px;
  height:180px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.45), transparent 70%);
  z-index:0;
}

.welcomeIcon i,
.welcomeIcon span,
.welcomeIcon svg{
  position:relative;
  z-index:2;
}

/* TEXT */

.welcomeCard h1{
  text-align:center;
  font-size:38px;
  line-height:1.2;
  margin-bottom:12px;
  color:#1F2937;
}

.welcomeCard span{
  color:var(--primary);
}

.email{
  text-align:center;
  font-size:17px;
  font-weight:700;
  color:var(--primary);
  margin-bottom:18px;
}

.intro{
  text-align:center;
  font-size:16px;
  color:var(--muted);
  line-height:1.6;
  margin-bottom:32px;
}

/* BENEFITS */

.benefits{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.benefit{
  display:flex;
  align-items:center;
  gap:16px;
  padding:18px;
  background:#ffffff;
  border:1px solid var(--line);
  border-radius:18px;
  font-size:17px;
  font-weight:700;
  color:#243324;
  transition:.25s;
  box-shadow:0 8px 20px rgba(46,125,50,.06);
}

.benefit:hover{
  transform:translateY(-2px);
  border-color:rgba(46,125,50,.25);
  box-shadow:0 10px 20px rgba(46,125,50,.10);
}

.benefit input{
  width:22px;
  height:22px;
  accent-color:var(--primary);
}

/* BUTTONS */

/* BUTTONS */

.buttons{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-top:34px;
}

.buttons button,
.buttons a{
  display:flex;
  align-items:center;
  justify-content:center;

  width:100%;
  height:56px;

  border-radius:999px;
  font-size:17px;
  font-weight:900;
  text-decoration:none;
  cursor:pointer;

  transition:.25s;
}

/* MAIN CONTINUE BUTTON */
.buttons #continueBtn,
#continueBtn{
  background:linear-gradient(135deg,#1B5E20,#2E7D32) !important;
  color:#ffffff !important;
  border:none !important;
  box-shadow:0 10px 24px rgba(46,125,50,.25);
}

.buttons #continueBtn:hover,
#continueBtn:hover{
  transform:translateY(-2px);
  background:linear-gradient(135deg,#14491B,#2E7D32) !important;
  color:#ffffff !important;
}

/* SECOND / OUTLINE BUTTON */
.buttons .outline,
.outline{
  background:#ffffff !important;
  border:2px solid #2E7D32 !important;
  color:#2E7D32 !important;
  box-shadow:none;
}

.buttons .outline:hover,
.outline:hover{
  background:#2E7D32 !important;
  color:#ffffff !important;
}
#continueBtn{
  background:linear-gradient(135deg,var(--primary-dark),var(--primary));
  color:white;
  box-shadow:0 10px 24px rgba(46,125,50,.22);
}

#continueBtn:hover{
  transform:translateY(-2px);
  background:linear-gradient(135deg,#14491B,#2E7D32);
}

.outline{
  background:#ffffff;
  border:2px solid var(--primary);
  color:var(--primary);
}

.outline:hover{
  background:var(--primary);
  color:white;
}

/* MOBILE */

@media(max-width:768px){

  .welcomePage{
    padding:20px;
  }

  .welcomeCard{
    padding:28px 22px;
  }

  .welcomeHero{
    margin:-28px -22px 26px;
    padding:34px 18px 24px;
  }

  .welcomeCard h1{
    font-size:30px;
  }

  .welcomeIcon{
    width:118px;
    height:118px;
    font-size:50px;
  }

  .welcomeIcon::after{
    width:150px;
    height:150px;
  }

  .benefit{
    font-size:15px;
    padding:16px;
  }

  .buttons{
    grid-template-columns:1fr;
  }
}