body {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  font-family: 'Gill Sans', 'Gill Sans MT', 'Calibri', 'Trebuchet MS', 'sans-serif';
  line-height: 1.6;
  width: 100%;
  overflow-x: hidden;
  padding-top: 0.0625rem;
}

header {
  text-align: left;
  margin-top: 0;
  width: 100%;
}

.mobile-only {
  display: none;
}

footer {
  text-align: left;
  font-family: 'Canadra';
  justify-content: space-around;
  flex-direction: row;
  background-color: #34667D;
  margin-bottom: 0;
  font-size: 1.5625rem;
  padding: 3.125rem 2.5rem 2.5rem 0;
  display: flex;
  width: 100%;
  align-items: center;
}

.hero {
  background-color: #dbeaef;
  padding: 12.5rem 0.3125rem 0.3125rem 0.3125rem;
  width: 100%;
}

nav {
  display: flex;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
  justify-content: space-around;
  color: #34667D;
  border: none;
  border-radius: 0;
  text-decoration: none;
  font-weight: bold;
  flex: 1;
  background-color: white;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  box-shadow: 0 0.1875rem 0.4375rem rgba(0, 0, 0, 0.1);
}

a {
  text-decoration: none;
  color: #34667D;
  font-size: 1.75rem;
  letter-spacing: 0.0625rem; 
}

.container {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  width:100%;
}


.nav-contact {
  background-color: #34667D;
  color: #dbeaef;
  padding: 0.3125rem 0.9375rem; /* 5px 15px */
  text-decoration: none;
  border-radius: 0.3125rem; /* 5px */
  border-color: white;
}

.section-title {
  font-weight: bold;
  color: #34667D;
  font-size: 2.1875rem; /* 35px */
  padding: 1.875rem; /* 30px 30px */
}

.section-subtitle {
  color: #34667D;
  font-size: 3.75rem; /* 60px */
  letter-spacing: 0.125rem; /* 2px */
  padding: 0; /* already 0px */
  font-weight: bold;
  margin-bottom: 0.3125rem; /* 5px */
}

.logo-link {
  padding-top: 1.5625rem; /* 25px */
}

.info-over-downloads {
  display: flex;
  flex-direction: column;
  padding-top: 3.75rem; /* 60px */
}

.header-info {
  display: flex;
  padding: 0 2.375rem; /* 38px */
  max-width: 81.25rem; /* 1300px */
  font-size: 2.1875rem; /* 35px */
  justify-content: space-around;
}

.faq-section {
  display: flex;
  gap: 1.25rem; /* 20px */
  flex-wrap: wrap;
  font-size: 1.25rem; /* 20px */
}

.for-therapists,
.for-clients {
  flex: 1;
  min-width: 18.75rem; /* 300px */
  color: #34667D;
  font-size: 1.25rem; /* 20px */
  padding-left: 0.8125rem; /* 13px */
}

.accordion {
  background-color: #dbeaef;
  color: #34667D;
  cursor: pointer;
  padding: 1.125rem; /* 18px */
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.8s;
  font-size: 0.875rem; /* 14px */
  font-weight: bold;
  border-radius: 0.75rem; /* 12px */
  margin-bottom: 0.625rem; /* 10px */
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.05); /* 2px 4px */
}

.active,
.accordion:hover,
.nav-contact:hover {
  background-color: #ccc;
  color: #34667D;
  cursor: pointer;
}

.answer {
  padding: 0 1.15rem; /* already relative, good */
  background-color: white;
  display: none;
  overflow: hidden;
}

.accordion:after {
  content: '\02795'; /* plus sign */
  font-size: 0.8125rem; /* 13px */
  color: #777;
  float: right;
  margin-left: 0.3125rem; /* 5px */
}

.active:after {
  content: "\2796"; /* minus sign */
}

.center-text {
  text-align: center;
  padding-bottom: 6.25rem; /* 100px */
}

a:hover, .black-link:hover, .footer-links:hover, logo:hover, .badges img:hover {
  color: #ccc;
  cursor: pointer;
  transform: scale(1.05);
  transition: transform 0.4s ease;
  cursor: pointer;
}

.badges {
  display: flex;
  justify-content: left;
  justify-content: space-between;
  max-width: 7rem;
}

.app-store-badge {
  padding: 1.25rem 1rem;
}

.google-play-badge {
  padding: 1.25rem 1.25rem;
}

.curious-text-and-image {
display: flex;
padding: 0 0 0 0;
justify-content: space-around;
font-size: 5.625rem;
font-weight: bold;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.0625rem; 
  transition: transform 0.3s ease;
}

.logo:hover {
  transform: scale(1.05);
  cursor: pointer;
}

.email-address {
  color: #34667D;
}

.black-link {
  color: black;
}

.update-message {
  animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}


#curious {
  padding-top: 9.37rem;
  padding-bottom: 0.3rem;
}

.about-section {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7rem;
  padding: 6rem 2rem;
  margin: 0 auto;
}

.about-section.reverse {
  flex-direction: row-reverse;
}

.about-text {
  max-width: 47rem;
  text-align: left;
}

.smaller-text {
  font-size: 2rem;
  color: #34667D;
  max-width: 100rem;
  padding-left: 1rem;
  padding-right: 10rem;
}

/* #try-it {
  padding-top: 35px;
} */

.footer-container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #34667D;
  padding: 3.125rem 2.5rem 2.5rem 0; /* 50px 40px 40px 0px */
  font-family: 'Canadra';
  font-size: 1.5625rem; /* 25px */
  width: 100%;
}

.footer-text {
  font-size: 1.9375rem; /* 31px */
  color: black;
}

.app-store-badge,
.google-play-badge {
  padding-top: 0;
  margin-top: 0;
}

#about-paragraphs {
  font-size: 1.4375rem; /* 23px */
}

.video {
  display: flex;
  justify-content: space-around;
  gap: 8.75rem; /* 140px */
  font-size: 1.5625rem; /* 25px */
  color: #34667D;
  line-height: 2.5;
}

#email-address {
  font-size: 1.0625rem; /* 17px */
}

#lab-link {
  font-size: 1.25rem; /* 20px */
}

.what-and-why {
  display: flex;
  font-size: 1.4375rem; /* 23px */
}

.what,
.why {
  display: flex;
  flex-direction: column;
  padding: 0.625rem 2.5rem 2.5rem 5rem; /* 10px 40px 40px 80px */
  max-width: 37.5rem; /* 600px */
  min-width: 25rem;   /* 400px */
}

.team-section {
  background-color: #eee;
  padding: 3.75rem 0; /* 60px 0px */
}

.team-section h2 {
  text-align: center;
  color: #34667D;
  font-size: 2.5rem; /* 40px */
  margin-bottom: 1.25rem; /* 20px */
}

.team-section .intro {
  max-width: 34.375rem; /* 550px */
  margin: 0 auto 2.5rem;
  text-align: center;
  font-size: 1.25rem; /* 20px */
  color: #555;
}

.team-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 3.125rem; /* 50px */
  justify-content: center;
  max-width: 112.5rem; /* 1800px */
  margin: 0 auto;
}

.team-member {
  background-color: #ffffff;
  border-radius: 0.75rem; /* 12px */
  padding: 1.25rem; /* 20px */
  box-shadow: 0 0.3125rem 0.5625rem rgba(0, 0, 0, 0.1); /* 5px 9px */
  text-align: center;
  width: 18.75rem; /* 300px */
  opacity: 0;
  transform: translateY(1.25rem); /* 20px */
  transition: all 0.6s ease;
}

.team-member.show {
  opacity: 1;
  transform: translateY(0);
}

.team-member img {
  width: 9.375rem; /* 150px */
  height: 9.375rem;
  border-radius: 100%;
  object-fit: cover;
  margin-bottom: 0.9375rem; /* 15px */
  border: 0.125rem solid #9ec2cc; /* 2px */
}

.team-member h3 {
  color: #34667D;
  margin: 0.625rem 0 0.3125rem; /* 10px 0 5px */
}

.team-member p {
  font-size: 0.95em;
  color: #555;
}

.acknowledgements,
.publications {
  max-width: 50rem; /* 800px */
  margin: 2.5rem auto; /* 40px auto */
  background-color: #e6f2f5;
  padding: 1.25rem; /* 20px */
  border-left: 0.375rem solid #34667D; /* 6px */
  border-radius: 0.5rem; /* 8px */
}

.acknowledgements h4,
.publications h4 {
  margin-top: 0;
  color: #34667D;
}

.publications ul {
  list-style: none;
  padding-left: 0;
}

.publications li {
  margin-bottom: 0.625rem; /* 10px */
}

.publications a {
  text-decoration: none;
  color: #34667D;
}

.publications a:hover {
  text-decoration: underline;
}

#team {
  font-size: 2.1875rem; /* 35px */
  color: #34667D;
  letter-spacing: 0.09375rem; /* 1.5px */
  text-align: center;
  padding: 0;
}

.phone-video-wrapper {
  position: relative;
  width: 20rem; 
  height: 50rem; 
  padding: 1.25rem 3.125rem;
}

.phone-frame {
  width: 100%;
  display: block;
  pointer-events: none;
}

.phone-video {
  position: absolute;
  top: 4.91%;
  left: 17.46%;
  width: 65.5%;
  height: 75%;
  object-fit: cover;
  border-radius: 1.5rem;
}

/* Hide mobile-only text by default */
.mobile-only {
  display: none;
}





@media (max-width: 768px) {
  html, body {
    max-width: 100%;
    overflow-x: hidden;
  }
  .badges img,
  .about-section img,
  .about-section.reverse img,
  .hero img {
    width: 60vw;
    height: auto;
    max-width: 70vw;
  }

  .about-section,
  .about-section.reverse {
    flex-direction: column;
    text-align: center;
    gap: 0rem;
    padding: 2rem 2rem;
    margin: 0 auto;
    width: 90vw;;
    font-size: 3rem;
  }
  
  footer {
    flex-direction: row;
    font-size: 0.3rem;
    padding: 0rem 0rem;
    text-align: left;
  }

  .hero {
    padding: 14rem 1rem 1rem;
  }

  nav {
    flex-direction: row;
    text-align: left;
  }

  a {
    font-size: 1.3rem;
    margin: 0.5rem 0;
  }

  .section-subtitle {
    font-size: 2.2rem;
    text-align: center;
  }

  .section-title {
    font-size: 1.6
    rem;
    text-align: center;
  }

  .header-info {
    flex-direction: column;
    padding: 1.5rem;
    font-size: 1.5rem;
    align-items: center;
  }

  .faq-section {
    flex-direction: column;
    font-size: 1.1rem;
  }

  .for-therapists,
  .for-clients {
    min-width: 100%;
    padding-left: 0;
    text-align: center;
  }
  .accordion {
    font-size: 1rem;
    padding: 1.25rem;
    text-align: center;
  }

  .accordion:after {
    font-size: 1rem;
  }

  .answer {
    font-size: 0.95rem;
    text-align: left;
  }

  .center-text {
    padding-bottom: 3rem;
  }

  .footer-container {
    flex-direction: column;
    padding: 1rem;
    font-size: 1.2rem;
    text-align: left;
  }

  .video {
    flex-direction: column;
    gap: 2rem;
    text-align: center;
  }

  .what-and-why {
    flex-direction: column;
    align-items: center;
    font-size: 1.2rem;
  }

  .what,
  .why {
    padding: 1rem;
    text-align: center;
    max-width: 90%;
    min-width: auto;
  }

  .team-grid {
    gap: 2rem;
    padding: 0 1rem;
  }
  .team-member {
    width: 90%;
    padding: 1rem;
  }

  .team-member img {
    width: 7.5rem;
    height: 7.5rem;
    margin-bottom: 0.5rem;
  }

  #team {
    font-size: 1.6rem;
  }

 .phone-video-wrapper {
    margin: 0 auto;
    display: block;
    text-align: center;
  }

  .phone-frame,
  .phone-video {
    display: block;
    margin: 0 auto;
  }

  .smaller-text {
    font-size: 1.7rem;
    color: #34667D;
    max-width: 90rem;
    padding-right: 0rem;
  }
  .badges img {
    max-width: 40vw;
  }
  .curious-text-and-image{
    gap: 5.5vw;
    padding: 0 1rem;
  }

  #Curious {
    font-size: 1rem;
    align-items: center;
  }
  .curious-text-and-image img {
    max-width: auto;
    height: 30vh;
    padding-top: 1rem;
    display: block;
  }
  .info-over-downloads{
    padding: 0 0;
  }
  .home-image {
    display: none;
  }
  .desktop-only {
    display: none;
  }

  nav {
    flex-direction: column;
    align-items: center;
    padding-bottom: 1rem;
  }

  .logo {
    order: 1;
    width: 100%;
    text-align: center;
    margin-bottom: 0rem;
  }

  .logo {
    width: 100%;
    text-align: center;
  }

  .logo img {
    display: block;
    margin: 0 auto;
    width: 320px; /* or any size you want */
    height: auto;
    padding-left: 14vw;
  }

  .nav-pages {
    margin-top: 0;
  }
  .nav-pages {
    order: 2;
    display: flex;
    gap: 1.8rem;
    justify-content: center;
    margin-bottom: 1rem;
  }

  .nav-contact-wrapper {
    order: 3;
    text-align: center;
    width: 100%;
  }

  .nav-contact {
    display: inline-block;
    margin: 0 auto;
  }

  .mobile-only {
    display: inline;
  }
}