/* =============================================
   MELLO — DESIGN TOKENS
   ============================================= */
:root {
  /* Brand */
  --brand:       #5c4540;
  --brand-50:    rgba(92, 69, 64, 0.50);
  --brand-20:    rgba(92, 69, 64, 0.20);
  --brand-10:    rgba(92, 69, 64, 0.10);
  --brand-06:    rgba(92, 69, 64, 0.06);

  /* Surfaces */

  --surface:     #f2f2f279;

  /* Accents */
  --rose:        #f3e3df;
  --rose-hover:  #e9d2cd;
  --lavender:    #eaebf8;

  /* Radii */
  --r-sm:   10px;
  --r-md:   18px;
  --r-lg:   26px;
  --r-xl:   36px;
  --r-pill: 100px;

  /* Layout */
  --gutter:    36px;
  --max-w:     1360px;
  --section-v: 60px;
}

/* =============================================
   RESET & BASE
   ============================================= */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scrollbar-width: none;
  scroll-behavior: smooth;
}
html::-webkit-scrollbar { display: none; }

body {
  font-family: "Google Sans", sans-serif;
  color: var(--brand);
  background: white;
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--brand); text-decoration: none; }

/* =============================================
   TYPE SCALE
   ============================================= */
h1 {
  font-size: 60px;
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -1.5px;
}
h2 { font-size: 28px; font-weight: 500; line-height: 1.2; }
h3 { font-size: 17px; font-weight: 300; line-height: 1.75; opacity: 0.8; }
p  { font-size: 16px; font-weight: 300; line-height: 1.75; opacity: 0.75; }


/* =============================================
   NAVIGATION
   ============================================= */
.layeredTopNav {
  position: sticky;
  top: 0;
  z-index: 1000;
}

.LongSpacer { display: none; }

.topnav {
  background: white;
  border-bottom: 1px solid var(--brand-10);
  display: flex;
  justify-content: center;
}

.topnavInner {
  width: 100%;
  max-width: var(--max-w);
  height: 68px;
  display: flex;
  align-items: center;
  padding: 0 var(--gutter);
  gap: 2px;
}

.spacerBtBar { flex: 1; }

.topnav a {
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.1px;
  padding: 8px 16px;
  border-radius: var(--r-pill);
  transition: background 0.2s, opacity 0.2s;
  opacity: 0.65;
}

.topnav a.getApp {
  opacity: 1;
  background: var(--rose);
  border: 1px solid var(--brand-20);
  padding: 8px 20px;
  font-weight: 500;
}

.logoGroup {
  display: flex;
  align-items: center;
  gap: 4px;
}

.logoGroup img { height: 28px; width: auto; }
.logoGroup a { padding: 0 4px; opacity: 1; }

.topwingother { transform: scaleX(-1); }

.MelloTopLogo {
  font-family: "Google Sans", sans-serif;
  font-size: 26px;
  font-weight: 400;
  color: var(--brand);
  opacity: 1 !important;
  letter-spacing: 0;
}

.MelloTopLogoWait{
  font-family: "Google Sans", sans-serif;
  font-size: 20px;
  padding-top: 6px;
  font-weight: 400;
  color: #5c45405c;
  opacity: 1 !important;
  letter-spacing: 0;
  kerning: -1px;
  

}


/* =============================================
   MAIN WRAPPER
   ============================================= */
main {
  padding: 0 var(--gutter);
  padding-bottom: 80px;
}

main > section {
  max-width: var(--max-w);
  width: 100%;
  margin: 0 auto;
  padding-top: var(--section-v);
}


/* =============================================
   HERO
   ============================================= */
.toplandingpage {
  display: flex;
  align-items: center;
  gap: 80px;
  padding-top: 100px !important;
  position: relative;
  overflow: visible;
}

/* Signature ambient glow */
.toplandingpage::before {
  content: '';
  position: absolute;
  top: 20px;
  left: -80px;
  width: 680px;
  height: 560px;
 
  pointer-events: none;
  z-index: 0;
}

.leftland {
  flex: 1.4;
  display: flex;
  flex-direction: column;
  gap: 26px;
  position: relative;
  z-index: 1;
}

.hero-label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  opacity: 0.4;
  display: block;
}

.leftland h1 {
  font-size: 68px;
  font-weight: 500;
  line-height: 1.07;
  letter-spacing: -2px;
}

.leftland h3 {
  font-size: 18px;
  max-width: 460px;
  line-height: 1.75;
}

.largelogoGroup {
  display: flex;
  align-items: center;
  gap: 0;
}

.largelogoGroup img { height: 68px; width: auto; }

.highlight {
  background: var(--rose);
  border-radius: 8px;
  padding: 0px 14px;
  transition: background 0.3s ease, border-radius 0.3s ease;
  display: inline-block;
}

.topDownload {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 4px;
}

.topDownload a {
  font-size: 16px;
  font-weight: 500;
  padding: 12px 26px;
  border-radius: var(--r-pill);
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
}

.download {
  background: var(--brand);
  color: #fff !important;
}


.insta {
  background: transparent;
  border: 1.5px solid var(--brand-20);
}


/* Screenshots */
.rightland {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  z-index: 1;
}

.todo {
  width: 100%;
  max-width: 100%;
  height: auto;

  /*box-shadow: 0 2px 20px rgba(92, 69, 64, 0.08);*/
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}



/* =============================================
   FEATURES SECTION
   ============================================= */
.sectiontitle {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  opacity: 0.38;
  margin-bottom: 32px;
  line-height: 1;
}

.Features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 45px;
  margin-top: 30px;
}

.featureCard {
  display: flex;
  flex-direction: row;
  background: white;
  padding: 32px;
  border: 1px solid #644d47;
  border-radius: var(--r-xl);
  gap: 28px;
  transition: all 0.25s ease;
  transition: border-color 0.2s, transform 0.25s, box-shadow 0.25s;
  overflow: hidden;
}


.featureCard img {
  height: 460px;
  width: auto;
  padding:5px;
  border-radius: 23px;
  border: 3px solid rgba(0, 0, 0, 0.07);
  transition: transform 0.35s ease;
  flex-shrink: 0;
}

.sideFeatureCardRow {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Number badge */
.feat-num {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 500;
  background: var(--rose);
  border-radius: 50%;
  flex-shrink: 0;
}

/* Feature title */
.feat-title {
  font-size: 24px;
  font-weight: 500;
  opacity: 1;
  line-height: 1.15;
  letter-spacing: -0.3px;
}

/* Feature description */
.feat-desc {
  font-size: 15px;
  font-weight: 300;
  opacity: 0.65;
  line-height: 1.7;
}

/* Checkmark pills */
.featureCheckmarks {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: flex-end;
  gap: 7px;
}

.feat-tag {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 400;
  opacity: 0.65;
  padding: 5px 14px;
  background: var(--brand-06);
  border: 1px solid var(--brand-10);
  border-radius: var(--r-pill);
  width: fit-content;
  letter-spacing: 0.1px;
}


/* =============================================
   FOOTER
   ============================================= */
  .footerarea{
    margin-top: 40px;
    
   }
   
.footer {
  background: var(--surface);
    border: 1px solid #644d47;
  border-radius: var(--r-xl);
  padding: 28px;
  
  
  margin-bottom: 0 !important;
}

.mainStack {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.ftdescrpt { opacity: 0.5; font-size: 15px; }

.aboutstack {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-top: 40px;
  border-top: 1px solid var(--brand-10);
  margin-top: 32px;
  gap: 0;
}

.footer a {
  font-size: 16px;
  opacity: 0.6;
  transition: opacity 0.2s;
}

.social {
  display: flex;
  gap: 28px;
  align-items: center;
}

.social p { font-size: 14px; opacity: 0.38; }

.buisness {
  display: flex;
  gap: 28px;
}

/* =============================================
   CUSTIMZATION
   ============================================= */


.sectionsubtitle{
  font-size: 20px;
  width: 50%;

}

.altsectiontitle{
  display: flex;
  gap: 15px;
}

.altsectiontitle h2{
  font-size: 40px;
}

.sec{
  opacity: 0.4;
}


.exampleScroller{
  display: flex;
  gap:60px;
  margin-top:30px;
  margin: 0 auto;
  overflow-x: auto;
  overflow-y: hidden;
    scrollbar-width: none;
     scroll-behavior: smooth;
}

.examplecard{
  padding: 25px;
  background: var(--surface);
  border-radius: 1px;
  
   display: flex;
   flex-direction: column;
   gap: 10px;
   margin-top: 30px;
   margin-bottom: 30px;
}

.examplecard img{
  height: 600px;
  padding: 10px;
  background-color: white;
  border: 1px solid #644d4759;
  border-radius: 20px;
}

#first{
  margin-left:300px;
}





/* =============================================
   PRIVACY / TERMS / SUPPORT PAGES
   ============================================= */
.largePrivacy {
  max-width: 820px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-top: 80px !important;
  margin-bottom: var(--section-v);
}

.largePrivacy h1 {
  font-size: 50px;
  letter-spacing: -1.5px;
}

.largePrivacy > h3 {
  font-size: 18px;
  max-width: 580px;
}

.sp { height: 8px; }

.privacySection {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-radius: var(--r-xl);
    border: 1px solid #644d47;
  overflow: hidden;
}

.privacySection > * {
  padding: 24px 32px;
}

.privacySection h1 {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.2px;
  line-height: 1.3;
}

.privacySection h3 {
  font-size: 16px;
  line-height: 1.8;
  font-weight: 300;
  opacity: 0.72;
}

.privSpacer {
  height: 1px;
  background: var(--brand-10);
  padding: 0 !important;
}

.ffeatureCheckmarks{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;

}

.backbutton {
  display: none;
  padding: 10px 22px;
  background: var(--surface);
  border-radius: var(--r-pill);
  border: 1px solid var(--brand-10);
  font-size: 15px;
  font-weight: 400;
  width: fit-content;
  transition: background 0.2s, transform 0.2s;
}

/* =============================================
   Waitlist
   ============================================= */

.centerwait{
  min-height: 100vh;
  display: flex;
  justify-content: center; /* horizontal */
  align-items: center;     /* vertical */
  padding-bottom:200px;
}
.Waitlistcontainer{
  display: flex;
  flex-direction: row;
  border: 1.5px solid var(--brand-20);
  gap:60px;

  padding: 50px;
  border-radius: 30px;
  background-color: var(--surface);
  max-width: 1100px;

  margin: 0 auto;
  margin-top:70px;

}

.Waitlistinput{
   width: 100%;
  padding: 19px 16px;
  margin-top: 10px;
  

  background: rgb(239, 239, 239);
  border: 2px solid transparent;
  border-radius: 17px;
  border: 1px solid var(--brand-20);

  font-size: 1.1rem;
  color: var(--text);

  transition: all 0.2s ease;

}

.Waitlistcontainer h1{
  font-size: 50px;
  font-weight: 600;
}
.Waitlistcontainer h3{
  opacity: 0.4;
}

.Waitlistcontainer p{
 font-size: 1.2rem;
}

   
.Waitright{
  flex:1;
   display: flex;
   flex-direction: column;
}
   
.Waitleft{
  flex:1;
   display: flex;
   flex-direction: column;
    gap:20px
  
}

.joinwaitlistButt{
  padding: 19px 16px;
  border-radius: 20px;
  font-size: 1.2rem;
  background-color: var(--brand);
  color: white;
  margin-top: 5px;
   border: 5px solid var(--rose);
   transition: all 0.25s ease;
}



/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 1100px) {
  :root {
    --gutter: 30px;
    --section-v: 90px;
  }



  .Waitlistcontainer{
    flex-direction: column;
  }

  .topnav a:not(.getApp) { display: none; }
  .logoGroup { display: flex !important; }
  .logoGroup img,
  .MelloTopLogo { display: flex !important; opacity: 1 !important; }

  .toplandingpage {
    flex-direction: column;
    gap: 50px;
    padding-top: 60px !important;
  }

  .toplandingpage::before { width: 100%; left: -20px; }

  .leftland h1 { font-size: 46px; letter-spacing: -1px; }
  .leftland h3 { font-size: 17px; }

  .rightland {
    max-width: 500px

    
   }

  /*.todo { max-width: calc(50% - 6px); }*/

  .Features {
  grid-template-columns: 1fr;
  gap: 50px;
  
}
.featuresec{
  max-width: 600px;
 

}

  .featureCard img { height: 320px; }

  .aboutstack { flex-direction: column; align-items: flex-start; gap: 12px; }

  .backbutton { display: inline-flex; }

  .footer {
     padding: 36px; padding-top: 36px !important; 
     max-width: 600px;
    }
    .custumizationSection,
  .footerarea {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
  }

}

@media (max-width: 600px) {
  :root { --gutter: 28px; --section-v: 70px; }

  .leftland h1 { font-size: 36px; letter-spacing: -0.5px; }

  .featureCard { flex-direction: column-reverse; }
  .featureCard img {
    

       width: 50%;
  height: auto;
  flex-shrink: 0;
  display: block;
  margin: 0 auto;
      height: auto;

  flex-shrink: 0;
  
     }

  .footer { padding: 28px; border-radius: var(--r-lg); }

  .topDownload { flex-direction: column; gap: 10px; }
  .topDownload a { text-align: center; }


.Waitlistcontainer h1{
  font-size: 30px;
  font-weight: 600;
}
.Waitlistcontainer h3{
  opacity: 0.4;
  font-size: 0.8rem;
}

.Waitlistcontainer p{
 font-size: 0.8rem;

}
.Waitlistcontainer{
   padding: 20px;
}


.Waitlistinput{
  padding: 15px 16px;
  margin-top: 10px;
  font-size: 0.8rem;

}
.joinwaitlistButt{
  font-size: 0.8rem;

}
.Waitlistcontainer{
  gap: 10px;
 
}
.Waitleft{
  gap: 5px;
}


.MelloTopLogoWait{
 
  font-size: 12px;
  
  

}


}


/* =============================================
   HOVER — pointer devices only
   ============================================= */
@media (hover: hover) {
  .highlight:hover {
    background: var(--lavender);
    border-radius: 14px;
  }

  .topnav a.getApp:hover { transform: scale(1.04); }
  .backbutton:hover {
  background: var(--brand-06);
  transform: translateX(-2px);
  
}

.topnav a:hover { opacity: 1; background: var(--brand-06); }
.topnav a.getApp:hover { background: var(--rose-hover); }
.footer a:hover { opacity: 1; }

.download:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(92, 69, 64, 0.28);
}


.insta:hover {
  background: var(--brand-06);
  transform: translateY(-2px);
}


.todo:hover {
  transform: translateY(-5px) scale(1.01);
  
}


.featureCard:hover {
  border: 1px solid var(--brand-50);
  transform: translateY(-3px) scale(1.001);
  

  /*box-shadow: 0 16px 48px rgba(92, 69, 64, 0.09);*/
}


.featureCard:hover img {
  transform: scale(1.02) rotate(1.5deg);
}






}