* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 1em;
  
}

.container {
  position: relative;
  width: 482px;
  height: auto;
  padding-top: 320px;
  padding-bottom: 30px;
  border-radius: 0.6em;
  background-color: #FFD200;
}

.base,
#scratch {
  height: 376px;
  width: 482px;
  position: absolute;
  top: 0;
  left: 0;
  transform: none;
  text-align: center;
  cursor: grabbing;
  border-radius: 0.0em;
}

.base {
  font-family: "Poppins", sans-serif;
  display: flex;
  justify-content: center;
  opacity: 0;
}

#scratch {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.feedback {
  text-align: center;
  margin-top: 1em;
  font-family: "Poppins", sans-serif;
  position: relative;
  transform: none;
  top: auto;
  left: auto;
}

#scratch-progress {
  font-size: 1.1em;
  margin-bottom: 0.5em;
  color: #baa6b0;
  position: relative;
  text-align: center;
}

#reveal-btn {
  font-family: rubik; 
  font-size: 1.125rem;
  font-style: normal;
  letter-spacing: 1.9px; 
  line-height: 1.1; 
  text-transform: uppercase; 
  text-align: center;
  padding: 10px 15px; 
  border-radius: 40px;
  border: 1px solid #042E5E;
  min-width: 150px;
  position: relative;
  color: #fffafc; 
  background-color: #042E5E !important; /* Match inline style, override with !important */
  cursor: pointer;
  text-decoration: none !important;
  transition: transform 0.3s ease, background-color 0.3s ease, opacity 0.5s ease;
}

#reveal-btn:hover {
  transform: scale(1.01); /* Slight scale-up for pop effect */
  background-color: #1c4a80 !important; /* Lighter yellow for hover */
  border: 2px solid #1c4a80;
}

/* Disable hover on touch devices */
@media (hover: none) {
  #reveal-btn:hover {
    transform: none;
    background-color: #042E5E !important; /* Keep original yellow on touch */
  }
}

.top-image, .bottom-image {
  max-width: 482px;
  height: auto;
  border-radius: 0.0em;
}

.bottom-image {
  display: none;
  padding-bottom: 15px;
}

@media only screen and (max-width: 480px) {
  .mobile-hidden { display: none !important; }
  .responsive-td { width: 100% !important; display: block !important; padding: 0px !important; }
}

.layout-canvas-g > .section > .columns { width: 100%; }

h1, h2, h3, h4 { font-family: effraLight, Arial, sans-serif; font-weight: 700; }

@media only screen and (max-width: 480px) {
  body, .tb_properties { font-family: Arial !important; font-size: 14px !important; color: #808080 !important; line-height: 1.15 !important; padding: 0px !important; }
  .buttonstyles { font-family: Arial !important; font-size: 16px !important; color: #FFFFFF !important; padding: 0px !important; }
  h1 { font-family: Arial !important; font-size: 22px !important; color: #202020 !important; line-height: 1 !important; }
  h2 { font-family: Arial !important; font-size: 20px !important; color: #202020 !important; line-height: 1 !important; }
  h3 { font-family: Arial !important; font-size: 18px !important; color: #202020 !important; line-height: 1 !important; }
  a:not(.buttonstyles) { line-height: 1 !important; }
  .mobile-hidden { display: none !important; }
  .responsive-td { width: 100% !important; display: block !important; padding: 0px !important; }
}

@media only screen and (max-width: 480px) {
  body, .tb_properties { font-family: Arial !important; font-size: 14px !important; color: #808080 !important; line-height: 1.15 !important; padding: 0px !important; }
  .buttonstyles { font-family: Arial !important; font-size: 16px !important; color: #FFFFFF !important; padding: 0px !important; }
  h1 { font-family: Arial !important; font-size: 2.2rem !important; color: #202020 !important; line-height: 1.15 !important; }
  h2 { font-family: Arial !important; font-size: 2rem !important; color: #202020 !important; line-height: 1 !important; }
  h3 { font-family: Arial !important; font-size: 1.8rem !important; color: #202020 !important; line-height: 1.15 !important; }
  a:not(.buttonstyles) { line-height: 1 !important; }
  .mobile-hidden { display: none !important; }
  .responsive-td { width: 100% !important; display: block !important; padding: 0px !important; }
}

h1 { font-family: effra400, Arial, sans-serif; font-size: 2rem; font-style: normal; letter-spacing: -0.32px; line-height: 1.1; text-transform: capitalize; }

p { font-family: effra700, Arial, sans-serif; font-size: 1rem; font-style: normal; line-height: 1.3; }