/* @override http://beta.walkstars.app/walkstars.css
	https://beta.walkstars.app/walkstars.css */

/* style.css */

/* --- FONT & GLOBAL STYLES --- */
/* 
  It's best practice to import custom fonts. 
  Since 'TT_Norms_Pro' is a custom font, you would need to add an @import or <link> here.
  For now, we'll fall back to system sans-serif fonts. 
*/

/* Thin (100) Italic only */
@font-face {
  font-family: 'TT Norms Pro';
  font-style: italic;
  font-weight: 100;
  font-display: swap;
  src: url('fonts/TTNormsPro-ThinItalic.woff') format('woff');
}

/* Extra-Light (200) */
@font-face {
  font-family: 'TT Norms Pro';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url('fonts/TTNormsPro-ExtraLight.woff') format('woff');
}
@font-face {
  font-family: 'TT Norms Pro';
  font-style: italic;
  font-weight: 200;
  font-display: swap;
  src: url('fonts/TTNormsPro-ExtraLightItalic.woff') format('woff');
}

/* Light (300) */
@font-face {
  font-family: 'TT Norms Pro';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/TTNormsPro-Light.woff') format('woff');
}
@font-face {
  font-family: 'TT Norms Pro';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/TTNormsPro-LightItalic.woff') format('woff');
}

/* Regular (400) */
@font-face {
  font-family: 'TT Norms Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/TTNormsPro-Regular.woff') format('woff');
}
@font-face {
  font-family: 'TT Norms Pro';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/TTNormsPro-Italic.woff') format('woff');
}

/* Medium (500) */
@font-face {
  font-family: 'TT Norms Pro';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/TTNormsPro-Medium.woff') format('woff');
}
@font-face {
  font-family: 'TT Norms Pro';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/TTNormsPro-MediumItalic.woff') format('woff');
}

/* Bold (700) */
@font-face {
  font-family: 'TT Norms Pro';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/TTNormsPro-Bold.woff') format('woff');
}
@font-face {
  font-family: 'TT Norms Pro';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/TTNormsPro-BoldItalic.woff') format('woff');
}

/* Extra-Bold (800) */
@font-face {
  font-family: 'TT Norms Pro';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('fonts/TTNormsPro-ExtraBold.woff') format('woff');
}
@font-face {
  font-family: 'TT Norms Pro';
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: url('fonts/TTNormsPro-ExtraBoldItalic.woff') format('woff');
}

/* Black (900) */
@font-face {
  font-family: 'TT Norms Pro';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('fonts/TTNormsPro-Black.woff') format('woff');
}
@font-face {
  font-family: 'TT Norms Pro';
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url('fonts/TTNormsPro-BlackItalic.woff') format('woff');
}

/* Extra-Black (950) */
@font-face {
  font-family: 'TT Norms Pro';
  font-style: normal;
  font-weight: 950;
  font-display: swap;
  src: url('fonts/TTNormsPro-ExtraBlack.woff') format('woff');
}
@font-face {
  font-family: 'TT Norms Pro';
  font-style: italic;
  font-weight: 950;
  font-display: swap;
  src: url('fonts/TTNormsPro-ExtraBlackItalic.woff') format('woff');
}

/* USAGE */



body {
    font-family: 'TT Norms Pro', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';

  background: white;
  margin: 0;
  display: flex;
  justify-content: center;
  
}

:root {
  --color-purple-900: #4B177E;
  --color-indigo-600: #4f46e5;
  --color-indigo-800: #3730a3;
  --color-amber-500: #f59e0b;
  --color-amber-200: #fde68a;
  --color-yellow-400: #facc15;
  --color-pink-600: #db2777;
  --color-pink-500: #ec4899;
  --color-black: #000;
  --color-white: #fff;
}

/* --- GENERAL UTILITIES --- */
.font-bold {
  font-weight: 700;
}

.font-italic {
	font-style: italic;
} 
.text-highlight {
  
text-shadow: 0 0 20px rgba(255, 168, 0, 0.5);
background: linear-gradient(94.88deg, #FFA000 3.95%, #FFFE7E 95.35%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}



.text-xl-extrabold {
  font-size: 1.25rem; /* 20px */
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.25; /* leading-tight */
}

/* --- MAIN CONTAINER --- */
#main-container {
  width: 100%;
  background-color: var(--color-white);
  display: inline-flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 2.5rem; /* gap-10 */
  overflow: hidden;
}

/* --- HEADER & HERO --- */
.header-section {
  align-self: stretch;
  padding: 2rem; /* p-8 */
  box-shadow: 0px 0px 15px 0px rgba(162, 32, 225, 1.00);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 3rem; /* gap-12 */
  background: url('images/galaxy.webp') no-repeat left center ;
  background-size: cover;
}

.header-section.simple-header {
	gap: 1.5rem; /* gap-12 */
}

.nav-container {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem; /* gap-8 */
}

.logo-img {
  width: 18rem; /* w-72 */
  height: auto;
}

.nav-buttons {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.5rem; /* gap-6 */
  display: none;
}

.nav-button {
  padding: 0.5rem 0.75rem; /* px-3 py-2 */
  background-color: var(--color-white);
  border-radius: 50px;
  outline: 1px solid var(--color-indigo-600);
  outline-offset: -1px;
  color: var(--color-purple-900);
  font-size: 0.875rem; /* text-sm */
  font-weight: 700; /* font-bold */
  text-transform: uppercase;
  line-height: 1; /* leading-none */
  text-decoration: none;
}

.cta-button {
  padding: 0.875rem 1.25rem; /* px-5 py-3.5 */
  background-image: linear-gradient(to bottom right, var(--color-amber-500), var(--color-amber-200));
  border-radius: 1rem; /* rounded-2xl */
  box-shadow: 0px 0px 22px 0px rgba(255, 168, 0, 0.42);
  outline: 1px solid var(--color-yellow-400);
  outline-offset: -1px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 0.625rem; /* gap-2.5 */
  overflow: hidden;
  text-decoration: none;
}
.cta-button span {
  color: var(--color-purple-900);
  font-size: 1.25rem; /* text-xl */
  font-weight: 800; /* font-extrabold */
  text-transform: uppercase;
  line-height: 1.25; /* leading-tight */
  text-shadow:
    -1px -1px 0 #FFE37E,
     1px -1px 0 #FFE37E,
    -1px  1px 0 #FFE37E,
     1px  1px 0 #FFE37E;
}
.cta-icon {
  width: 1rem; /* w-4 */
  height: 1.5rem; /* h-6 */
	background: url('images/cell.png') no-repeat center center;
	background-size: auto 100% ;
}

.hero-content {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 2rem; /* gap-8 */
  overflow: visible;
}

.hero-text {
  width: 100%;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.5rem; /* gap-6 */
  text-align: center;
}

.hero-headline {
  align-self: stretch;
  margin: 0;
  color: var(--color-white);
  font-size: 2.4rem; /* text-5xl */
  font-weight: 800; /* font-extrabold */
  text-transform: uppercase;
  line-height: 1.25; /* leading-tight */
  text-shadow: 0px 0px 22px rgba(255, 168, 0, 0.42);
  /*background: url('images/step.webp') no-repeat center center;*/
  background-size: contain;
 text-shadow:
  0 0 4px rgba(255, 215, 0, 0.65),
  0 0 4px rgba(255, 215, 0, 0.65),
  0 0 4px rgba(255, 215, 0, 0.65),
  0 0 4px rgba(255, 215, 0, 0.65);

}


.hero-headline span {
	/*opacity: 0;*/
}

.hero-subheadline {
  align-self: stretch;
  margin: 0;
  color: var(--color-white);
  font-size: 1.25rem; /* text-xl */
  font-weight: 500; /* font-medium */

}

.hero-subheadline .text-highlight{
	display: block;
}



.store-buttons {
  display: flex;
  flex-wrap: wrap;       /* allow wrapping */
  justify-content: center;
  gap: 1rem;
}

.store-buttons img {
  flex: 0 1 auto;        /* allow each image to shrink if absolutely necessary */
  height: 3rem;
  width: auto;
  min-width: 0;
}



.hero-image {
  flex: 1;
  align-self: stretch;
  display: flex;
  justify-content: center;
  align-items: center;
}
.hero-image div {
  flex: 1;
 
  height: 32rem; /* max-h-96 */
  max-width: 100%;
  max-height: 100%;
  background: url('images/app-prizes.webp') no-repeat center center;
  background-size: contain;
}



.hero-image.sponsored-hero {
  flex: 0 0 100%;       /* full-row on mobile */
  max-width: 28rem;     /* ↑ bigger than 24rem */
  height: 28rem;        /* match aspect ratio */
  margin: 1rem auto;    /* center */
}

/* Keep the inner div's background graphic sized to fill */
.hero-image.sponsored-hero div {
  	background: url('images/sponsored-raffle-phone.webp') no-repeat center center;
  background-size: contain;
  height: 28rem;        /* match parent */
}

/* 1. Allow wrapping so the hero-image can drop to its own row */
.sponsor-wrapper {
  display: flex;
  flex-wrap: wrap;
  margin-top: -5rem;
}


/* 2. Make the sponsored‐hero span 100% and center it */
.hero-image.sponsored-hero {
  flex: 0 0 100%;
  max-width: 24rem;
  align-self: center;
  margin: 1rem auto; /* optional vertical breathing room */
}



/* --- CONTENT SECTIONS --- */
.content-section, .how-it-works-section {
  align-self: stretch;
  padding: 1rem 1rem 0.625rem 1rem; /* p-4 lg:p-2.5 */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 1.25rem; /* gap-5 */
  overflow: hidden;
}

.section-title {
  margin: 0;
  text-align: center;
  color: var(--color-indigo-600);
  font-size: 1.875rem; /* text-3xl */
  font-weight: 800; /* font-extrabold */
  text-transform: uppercase;
  line-height: 2.5rem; /* leading-10 */
  


text-shadow: 0 0 20px rgba(189,0,255,.2);
background: linear-gradient(91deg,#3F23FD -.23%,#A120E1 105.27%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;


}



.content-wrapper {
  align-self: stretch;
  padding: 0.625rem 0; /* py-2.5 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.75rem; /* gap-7 */

}

.content-image {
  width: 18rem; /* w-72 */
  height: 18rem; /* h-72 */
  position: relative;
  border-radius: 1.5rem; /* rounded-3xl */
}

.content-text {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 1.75rem; /* gap-7 */
}

.content-description {
  width: 100%;
  margin: 0;
  text-align: center;
  color: var(--color-black);
  font-size: 1rem; /* text-base */
  font-weight: 500; /* font-medium */
  line-height: 1.625; /* leading-snug */
}

/* --- HOW IT WORKS SECTION --- */
.how-it-works-section {
  padding-left: 1rem;
  padding-right: 1rem;
}

.how-it-works-cards {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
/
}

.how-it-works-card {
  width: 18rem; /* w-72 */
  align-self: stretch;
  padding: 1.25rem 0.5rem; /* px-2 py-5 */
  border-radius: 1.5rem; /* rounded-3xl */

  display: inline-flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 1rem; /* gap-5 */
  overflow: hidden;
}

.card-title-container {
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
  gap: 0.625rem; /* gap-2.5 */
}
.card-title-icon {
  width: 2.5rem; /* w-10 */
  height: 2.5rem; /* h-8 */
  background-size: contain;
}

.card-title-icon.move-icon {
  background: url('images/icon-move.webp') no-repeat center center;
  background-size: contain;
 }
 
.card-title-icon.boost-icon {
	background: url('images/icon-boost.webp') no-repeat center center;
  background-size: contain;
}

.card-title-icon.heart-icon {
	background: url('images/heart-icon.png') no-repeat center center;
  background-size: contain;
}

.card-title-icon.increase-icon {
	background: url('images/increase-icon.png') no-repeat center center;
  background-size: contain;
}

.card-title-icon.win-icon {
	background: url('images/icon-win.webp') no-repeat center center;
  background-size: contain;
}

.card-title-text {
  margin: 0;
  text-align: center;
  color: var(--color-black);
  font-size: 1.875rem; /* text-3xl */
  font-weight: 800; /* font-extrabold */
  text-transform: uppercase;
  line-height: 2; /* leading-loose */
}

.card-image {
  width: 18rem; /* w-72 */
  height: 18rem; /* h-72 */
  padding: 0; /* px-6 py-5 */
  box-sizing: border-box;
  border-radius: 1.5rem; /* rounded-3xl */
  box-shadow: 0px 7px 30px 0px rgba(0, 0, 0, 0.05);
}

.card-image-wrapper {
  /* size matches your old .card-image: */
  width: 18rem;     /* w-72 */
  height: 18rem;    /* h-72 */
  border-radius: 1.5rem;    /* rounded-3xl */
  padding: 2px;             /* thickness of border */
  background: linear-gradient(
    to bottom right,
    #ec4899, 
    #5623FF  
  );
  box-shadow: 0px 7px 30px rgba(0,0,0,0.05);
  box-sizing: border-box;
  overflow: hidden;         /* clip inner corners */
}

.card-image-inner {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;        /* fill & crop */
  border-radius: calc(1.5rem - 2px); /* inner rounding = wrapper radius − padding */
}


.card-description {
  align-self: stretch;
  text-align: center;
  color: var(--color-black);
  font-size: 1rem; /* text-base */
  font-weight: 500; /* font-medium */
  line-height: 1.25; /* leading-snug */
}

/* Special card styles */
.card-image-container {
  width: 18rem; /* w-72 */
  height: 18rem; /* h-72 */

  box-sizing: border-box;
  border-radius: 1.5rem; /* rounded-3xl */
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  align-content: center;
  overflow: hidden;
  
  
  
  
  
  
}

.card-image-container {
  position: relative;    /* establish stacking context */
  overflow: hidden;      /* clip to rounded corners */
  border-radius: 1.5rem; /* same as your other cards */
}

.boost-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;     /* fill the square, cropping if needed */
  /* object-fit: contain;  → if you prefer to see the whole video without cropping */
}
  
/* make sure the button still sits on top */

.boost-image {
  outline: 2px solid transparent; /* Placeholder for offset */
  outline-offset: -2px;
}
.boost-button {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.625rem; /* gap-2.5 */
  overflow: hidden;
  background:  url('images/button-activate-boost.webp') no-repeat center center;
  background-size: contain;
  height: 8rem;
  width: 100%;
position: relative;
  z-index: 1;
}
.boost-button span {
  color: var(--color-purple-900);
  font-size: 1.25rem; /* text-xl */
  font-weight: 800; /* font-extrabold */
  text-transform: uppercase;
  line-height: 1.25; /* leading-tight */
  opacity: 0;
}

.win-image {
  position: relative;
  padding: 1.25rem;                  /* your existing inner padding */
  background: #fff;                  /* card background */
  border-radius: 1.5rem;             /* keep your rounding */

  overflow: hidden;                  /* clip the pseudo-border */
}

.win-image::before {
  content: "";
  position: absolute;
  inset: 0;                          /* fill the entire parent */
  padding: 8px;                      /* thickness of your “stroke” */
  background: linear-gradient(
    to bottom right,
    #5623FF,  /* Indigo-600 */
    #A423DD   /* Indigo-800 */
  );
  /* mask out the center so only the ring remains */
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
          mask-composite: exclude;
  border-radius: inherit;            /* follow the same rounding */
  pointer-events: none;
}

.win-prize-img {
  width: 12rem; /* w-56 */
  height: auto;
}
.dot {
  width: 1rem; /* w-4 */
  height: 1rem; /* h-4 */
  background-color: var(--color-white);
  border-radius: 9999px;
}
.dot-placeholder {
  width: 2.25rem; /* w-9 */
  height: 2.25rem; /* h-9 */
  position: relative;
}
.win-amount {
  color: var(--color-purple-900);
  font-size: 1.5rem; /* text-2xl */
  font-weight: 700; /* font-bold */
  background: url('images/ticket.png') no-repeat left center;
  background-size: contain;
  padding-left: 1.6em;
  line-height: 1.5em;
  margin-top: 0.5rem;
  
}

/* --- PRIZES SECTION --- */
.content-section .content-wrapper {
  gap: 2.5rem; /* gap-10 */
}
.reverse-on-mobile {
  flex-direction: column-reverse;
}

.prize-card-container {
  display: inline-flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0.5rem; /* gap-2 */
  overflow: hidden;
}
.prize-card {
  width: 20rem;
  height: 16rem;
  padding: 16px;                                 /* thickness of your “border” */
  background: linear-gradient(
    130deg,
    #FD2399 29.39%,
    #A120E1 72.53%
  );
  border-radius: 32px;                           /* outer rounding */
  box-shadow: 0px 7.15px 30.64px rgba(0,0,0,0.05);
  box-sizing: border-box;
  display: flex;
  overflow: hidden;
}

.prize-card-inner {
  /* fill the padded area with your actual card styles */
  flex: 1;
  background: white;
  border-radius: calc(32px - 16px);              /* inner rounding = outer − padding */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem;                         /* your original inner padding */
}
.prize-card-title {
  align-self: stretch;
  text-align: center;
  color: var(--color-pink-500);
  font-size: 1.5rem; /* text-3xl */
  font-weight: 800; /* font-extrabold */
  text-transform: uppercase;
  line-height: 1.75rem; /* leading-7 */

/* Pink to purple */
background: linear-gradient(91.56deg, #FD2399 29.39%, #A120E1 72.53%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;

}
.prize-card-body {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.prize-card-body img {
  width: auto; /* w-48 */
  height: 8rem; /* h-28 */
}
.prize-card-subtitle {
  align-self: stretch;
  text-align: center;
  color: var(--color-indigo-800);
  font-size: 1.125rem; /* text-lg */
  font-weight: 800; /* font-extrabold */
  margin-top: -1rem;

  
  /* Pink to purple */
background: linear-gradient(90deg, #27209C 0%, #4000FF 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
}
.prize-card-footer {
  display: inline-flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5rem; /* gap-4 */
}
.winner-text {
  color: var(--color-black);
  font-size: 0.75rem; /* text-xs */
  font-weight: 800; /* font-extrabold */
  text-transform: uppercase;
  line-height: 0.75rem; /* leading-3 */
  letter-spacing: 0.05em; /* tracking-wide */
  text-shadow: 0px 0px 10px white;
}
.winner-date {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 0.25rem; /* gap-1 */
}
.winner-icon {
  width: 1.3rem; /* w-5 */
  height: 1.3rem; /* h-5 */
  /*background-color: var(--color-black);*/

  background: url('images/clock.png') no-repeat center center;
  background-size: auto 100% ;
}
.winner-date span {
  color: var(--color-black);
  font-size: 1.25rem; /* text-xl */
  font-weight: 800; /* font-extrabold */
  line-height: 1.625; /* leading-snug */
  text-shadow: 0px 0px 10px white;
}
.cta-button .large-icon {
  width: 1.5rem; /* w-6 */
  height: 1.5rem; /* h-5 */
  	background: url('images/ministar.png') no-repeat center center;
	background-size: auto 100% ;
}

/* --- FINAL CTA --- */
.final-cta-section {
  align-self: stretch;
  padding: 2rem; /* p-8 */
  
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 3rem; /* gap-12 */
  
    background: url('images/galaxy.webp') no-repeat bottom center;
  background-size: cover ;
}
.final-cta-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem; /* gap-7 */
}
.final-cta-title {
  margin: 0;
  text-align: center;
  color: var(--color-white);
  font-size: 2.25rem; /* text-4xl */
  font-weight: 800; /* font-extrabold */
  text-transform: uppercase;

  text-shadow:
  0 0 4px rgba(255, 215, 0, 0.5),
  0 0 4px rgba(255, 215, 0, 0.5),
  0 0 4px rgba(255, 215, 0, 0.5),
  0 0 4px rgba(255, 215, 0, 0.5);
}
.final-cta-subtitle {
  align-self: stretch;
  margin: 0;
  text-align: center;
  color: var(--color-white);
  font-size: 1.25rem; /* text-xl */
  font-weight: 500; /* font-medium */
margin-bottom: 0.5rem;
}

/* --- FOOTER --- */
.footer-section {
  align-self: stretch;
  padding: 0 6rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 2.5rem; /* gap-10 */
  flex-wrap: wrap;
  align-content: center;
  overflow: hidden;
}

.footer-links, .footer-description {
  width: 100%;
  color: var(--color-black);
}
.footer-links {
  font-size: 0.875rem; /* text-sm */
  font-weight: 800; /* font-extrabold */
  text-transform: uppercase;
  line-height: 1.625; /* leading-snug */
  
}

.footer-links a {
	text-decoration: none;
	color: black;
}

/* 2) Push the first block all the way left */
.footer-links {
  margin-right: auto;
  text-align: left;       /* ensure its text stays left-aligned */
  flex: 0 1 auto;         /* it’ll size to its content */
}

/* 3) Your logo will naturally sit in the middle */
/*    (you don’t need any special styling on .footer-logo for positioning) */

/* 4) Push the description all the way right */
.footer-description {
  margin-left: auto;
  text-align: left;      /* right-align its text */
  flex: 0 1 auto;
}
.footer-logo {
  width: 6rem; /* w-24 */
  height: auto; /* h-24 */
}
.footer-description {
  font-size: 0.875rem; /* text-sm */
  font-weight: 500; /* font-medium */
  line-height: 1.5; /* leading-normal */
}
.footer-copyright {
  font-size: 0.875rem; /* text-sm */
  font-weight: 800; /* font-extrabold */
  text-transform: uppercase;
  line-height: 1.625; /* leading-snug */
	padding-bottom: 1.5rem;
}

.footer-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  width: 100%;
}


.footer-links,
.footer-logo,
.footer-description {
  margin: 0;           /* clear any auto-margins */
  text-align: center;  /* ensure centered text on mobile */
}





/* optional: give your page titles some breathing room */
#subpage-container .page-title {
  margin-top: 0;
  margin-bottom: 1rem;
  font-size: 2rem;
  font-weight: 500;
  text-transform: uppercase;
}


#subpage-container {
  box-sizing: border-box;      /* ← include padding in your width */
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 1rem;               /* mobile gutters */
}

.simple-hero-content .hero-headline {
		font-size: 2.5em;
		text-shadow: none;
		text-align: center;
}

h2.page-title {
	display: none;
}


/* --- FORMS & INPUTS --- */
.form-container {
  background-color: #fdfdff;
  padding: 1.5rem; /* Mobile padding */
  border-radius: 2rem; /* rounded-3xl */
  border: 1px solid #e0e0e0;
  box-shadow: 0px 7px 30px 0px rgba(162, 32, 225, 0.08);
  max-width: 500px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border: none;
}

.form-container h3 {
    text-align: center;
    color: var(--color-indigo-800);
    font-weight: 800;
    text-transform: uppercase;
    margin-top: 0;
    margin-bottom: 0;
}

.form-container p {
    text-align: center;

    color: #333;
    margin-bottom: 1rem;
	font-weight: 500;
}

.form-container form {
    display: flex;
    flex-direction: column;
    gap: 1rem; /* This will space out the form-groups and the button */
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.1rem; /* Increased space between label and input */
}

.form-container label {
  font-weight: 700; /* font-bold */
  color: var(--color-purple-900);
  font-size: 0.875rem; /* text-sm */
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding-left: 0.3rem;
}

.form-container input[type="email"],
.form-container input[type="password"] {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 2px solid #ddd;
  border-radius: 0.75rem; /* rounded-xl */
  font-size: 1rem;
  font-family: 'TT Norms Pro', sans-serif;
  box-sizing: border-box;
  transition: border-color 0.3s, box-shadow 0.3s;
  background-color: #fff;
}

.form-container input[type="email"]:focus,
.form-container input[type="password"]:focus {
  outline: none;
  border-color: var(--color-indigo-600);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.25);
}

.form-container input[type="text"],
.form-container textarea,
.form-container select {          /* same rounded look for dropdown, too */
  width: 100%;
  padding: 0.85rem 1rem;
  border: 2px solid #ddd;
  border-radius: 0.75rem;        /* rounded-xl */
  font-size: 1rem;
  font-family: 'TT Norms Pro', sans-serif;
  box-sizing: border-box;
  transition: border-color 0.3s, box-shadow 0.3s;
  background-color: #fff;
}

.form-container input[type="text"]:focus,
.form-container textarea:focus,
.form-container select:focus {
  outline: none;
  border-color: var(--color-indigo-600);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.25);
}

.hp-field{
  position:absolute;
  left:-10000px;
  top:auto;
  width:1px;height:1px;
  overflow:hidden;
}

/* Make the existing CTA button full-width and styled correctly in forms */
.form-container .cta-button {
    width: 100%;
    border: none; /* Ensure buttons don't have a default border */
    cursor: pointer; /* Ensure buttons have a pointer cursor */
    transition: transform 0.2s, box-shadow 0.2s;
}

.form-container .cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0px 6px 20px rgba(255, 168, 0, 0.5);
}

.form-message {
  text-align: center;
  padding: 1rem;
  border-radius: 0.75rem;
  font-weight: 500;
  line-height: 1.5;
  display: none; /* Hidden by default */
}

.form-message.success {

  display: block;
}

.form-success-text {
    text-align: center;
    font-weight: 500; /* font-bold */
    color: #333;

    line-height: 1.6;
}

.form-message.error {
  background-color: #fee2e2; /* A light red */
  color: #991b1b; /* A dark red */
  display: block;
}

.password-requirements {
    font-size: 0.875rem;
    color: #555;
    list-style-type: '✓  ';
    padding-left: 1rem;
    margin: 0;
	font-weight:500;
}

.password-requirements li {
    margin-bottom: 0.25rem;
    padding-left: 0.5rem;
}

/* --- RESPONSIVE STYLES (sm and up) --- */
@media (min-width: 640px) {
  .nav-buttons {
    flex-direction: row;
	display: flex;
  }
  .hero-headline {
    font-size: 4.8rem; /* sm:text-7xl */
    line-height: 80px; /* sm:leading-[80px] */
  }
  
    

  .footer-links, .footer-description {
    width: 18rem; /* sm:w-72 */
  }
  .footer-copyright {
    /*width: 8rem; /* sm:w-32 *!/*/
  }


}


/* 1) On mobile (column layout), center the prize card */
@media (max-width: 1023px) {
  .sponsor-wrapper .prize-card-container {
    align-self: center;
  }
}

/* --- RESPONSIVE STYLES (lg and up) --- */
@media (min-width: 1024px) {
  #subpage-container {

  /*padding: 0rem;               /* mobile gutters *!/*/
}

.sponsor-wrapper .section-title {
	text-align: left;
}

span.newline {
	display: block;
}
    
  .sponsor-wrapper {
    flex-wrap: nowrap;
    flex-direction: row;  /* you already have this, just ensure no wrapping */
	  margin-top: -2rem;
  }

  /* restore the phone to its normal flex behavior */
  .hero-image.sponsored-hero {
    flex: 1;              /* grow to share space with text */
    max-width: 24rem;     /* keep your desired width */
    margin: 0;            /* kill the auto-centering */
    align-self: stretch;  /* match your desktop hero alignment */
  }
  
  
  .header-section > .nav-container,
.header-section > .hero-content {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;        /* centers each block */
}

   .hero-subheadline .text-highlight{
	display: inline;
}

  .footer-main {
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
  }
    .store-buttons {
    justify-content: flex-start;  
    gap: 1.5rem;             
  }
  .store-buttons img {
    height: 3.25rem;           /* bump up height a bit */
    /* note: no width rule here */
  }
  
  .footer-section {
    flex-direction: row;
    align-items: center;   /* or flex-start if you prefer */
    text-align: left;      /* resets default, children override if needed */
  }

  .footer-links {
    margin-right: auto;    /* pushes next items to the right */
    text-align: left;      /* left-align links */
  }

  .footer-logo {
    margin: 0;             /* no auto margins → stays centered */
  }

  .footer-description {
    margin-left: auto;     /* pushes itself to the right edge */
    text-align: right;     /* right-align description */
  }
  
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;      /* center it in the viewport */
  /* background stays white */
  .header-section {
    padding: 3rem; /* lg:p-12 */
  }
  .nav-container {
    flex-direction: row;
    justify-content: space-between;
  }
  .hero-content {
    flex-direction: row;
    gap: 0.625rem; /* lg:gap-2.5 */

  }
  .hero-text {
    width: 660px;
    align-items: flex-start;
    text-align: left;
  }
  .hero-subheadline {
    font-size: 1.875rem; /* lg:text-3xl */
    text-align: left;
  }
  .content-section, .how-it-works-section {
    padding: 0.625rem; /* lg:p-2.5 */
  }
  .section-title {
    font-size: 2.25rem; /* lg:text-4xl */
  }
  .content-wrapper {
    flex-direction: row;
  }
  .content-text {
    align-items: flex-start;
  }
  .content-description {
    width: 525px;
    text-align: left;
  }
  .how-it-works-section {
    padding-left: 0;
    padding-right: 0;
  }
  .how-it-works-cards {
    flex-direction: row;
    align-items: flex-start;
	  gap: 2.5rem; /* gap-10 */
  }
  .reverse-on-mobile {
    flex-direction: row;
  }
  .final-cta-section {
    padding: 3rem; /* lg:p-12 */
  }
  .final-cta-title {
    font-size: 3rem; /* lg:text-5xl */
  }
  .final-cta-subtitle {
    font-size: 1.5rem; /* lg:text-2xl */
  }
  .footer-section {
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: 4rem; /* lg:gap-16 */
  }
}

/* --- RESPONSIVE STYLES (xl and up) --- */
@media (min-width: 1280px) {
    .footer-section {
        gap: 6rem; /* xl:gap-24 */
    }
}

@media (max-width: 385px) {
  /* styles for any small‐screen device (incl. iPhone Mini) */
  
  .hero-headline {

  font-size: 2rem; /* text-5xl */
  /*display: none;*/

}

.store-buttons img {
	height: 2.8rem;
}

}