/* ============================================
   SNAP Brain Formula - Main Stylesheet
   Clean, reusable styles for all pages
   ============================================ */

/* ============================================
   CSS RESET & BASE STYLES
   ============================================ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: Rubik, Arial, sans-serif;
  color: #000;
  line-height: 1.6;
  background-color: #fff;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  outline: none;
}

ul {
  list-style-position: inside;
}

/* ============================================
   TYPOGRAPHY
   ============================================ */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
  line-height: 1.2;
}

/* ============================================
   LAYOUT CONTAINERS
   ============================================ */
.section {
  width: 100%;
  position: relative;
  overflow: hidden;
}

.section__wrap {
  max-width: 1160px;
  margin: 0 auto;
  padding: 50px 20px;
  position: relative;
}

.flex-center {
  display: flex;
  justify-content: center;
}

/* ============================================
   SECTION BACKGROUNDS
   ============================================ */
.section--purple {
  background-color: #872886;
}

.section--navy {
  background-color: #292c7d;
}

.section--light-gray {
  background-color: #f6ecec;
}

.section--white {
  background-color: #fff;
}

.section--black {
  background-color: #0c0c0c;
}

/* ============================================
   HEADER
   ============================================ */
.header {
  background-color: #fff;
  padding: 22px 0;
}

.header__content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 20px;
}

.header__logo {
  max-width: 139px;
}

.header__badge {
  max-width: 204px;
}

/* ============================================
   Navbar
   ============================================ */
/* ============================================
   NAVBAR – NAVY
   ============================================ */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 1000;
}

.site-nav--navy {
  background: #292c7d; /* same navy as section--navy */
}

.site-nav__wrap {
  max-width: 1160px;
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

/* Links */
.site-nav__links {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 22px;
}

.site-nav__links a {
  text-decoration: none;
  color: #ffffff;
  font-weight: 500;
  font-size: 15px;
}

.site-nav__links a:hover {
  text-decoration: underline;
}

/* CTA button spacing */
.nav-cta .btn {
  padding: 8px 14px;
  font-size: 14px;
}

/* Hamburger */
.site-nav__toggle {
  display: none;
}

.site-nav__hamburger {
  display: none;
  flex-direction: column;
  cursor: pointer;
  gap: 5px;
}

.site-nav__hamburger span {
  width: 25px;
  height: 3px;
  background: #ffffff;
}

/* Mobile */
@media (max-width: 768px) {
  .site-nav__wrap {
    justify-content: flex-end;
  }
  .site-nav__hamburger {
    display: flex;
  }

  .site-nav__links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #0b1c2d;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    gap: 16px;
    display: none;
  }

  .site-nav__toggle:checked + .site-nav__hamburger + .site-nav__links {
    display: flex;
  }
}

/* ============================================
   HERO 
   ============================================ */
.hero {
  padding: 14px 20px;
}

.hero__text {
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  font-style: italic;
}

/* ============================================
   MAIN HERO SECTION
   ============================================ */
.main-hero {
  background-color: #fff;
  text-align: center;
  padding: 60px 20px;
}

.main-hero__title {
  max-width: 905px;
  font-size: 43px;
  font-weight: 700;
  color: #000;
  line-height: 1.2;
  text-align: center;
  margin: 0 auto 30px auto;
}

.main-hero__title--highlight {
  color: #292c7d;
}

.main-hero__text {
  font-size: 20px;
  line-height: 1.7;
  max-width: 794px;
  margin: 0 auto 30px;
}

.main-hero__image {
  margin: 28px auto;
  max-width: 735px;
}

/* ============================================
   BUTTONS
   ============================================ */
.btn {
  display: inline-block;
  padding: 18px 35px;
  font-size: 22px;
  font-weight: 700;
  font-style: italic;
  text-align: center;
  border-radius: 0;
  transition: all 0.3s ease;
  font-family: Rubik, Arial, sans-serif;
}

.btn--green {
  background-color: #007539;
  color: #fff;
}

.btn--purple {
  background-color: #872886;
  color: #fff;
}

.btn--green:hover {
  background-color: #005a2d;
}

.btn--purple:hover {
  background-color: #6b1f69;
}

.btn--large {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  max-width: 582px;
  width: 100%;
  height: 68px;
}

.btn--medium {
  padding: 22px 45px;
  font-size: 24px;
}

.btn--small {
  padding: 18px 35px;
  font-size: 20px;
}

/* ============================================
   TESTIMONIALS
   ============================================ */
.testimonial {
  padding: 42px 20px;
}

.testimonial__stars {
  color: #ffbf00;
  font-size: 31px;
  text-align: center;
  margin-bottom: 10px;
}

.testimonial__text {
  color: #fff;
  font-size: 20px;
  text-align: center;
  max-width: 776px;
  margin: 0 auto;
  line-height: 1.7;
}

.testimonial__author {
  font-weight: 700;
}

/* ============================================
   CONTENT SECTIONS
   ============================================ */
.content-section {
  padding: 60px 20px;
}

.content-section__title {
  font-size: 40px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 30px;
  line-height: 1.2;
}

.content-section__subtitle {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 20px;
}

.content-section__text {
  font-size: 20px;
  line-height: 1.7;
  margin-bottom: 20px;
}

/* ============================================
   TWO COLUMN LAYOUTS
   ============================================ */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}

.two-col--no-gap {
  gap: 0;
}

.two-col__content {
  padding: 20px;
}

.two-col__title {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 20px;
}

.two-col__text {
  font-size: 20px;
  line-height: 1.7;
}

.two-col__image {
  display: flex;
  justify-content: center;
}
.two-col__image img {
  max-width: 90% !important;
}

/* ============================================
   FEATURE BOXES
   ============================================ */
.feature-box {
  background-color: #fff;
  border: 2px solid rgba(0, 0, 0, 0.19);
  box-shadow: 0 1px 6px 2px #dbd6d6;
  border-radius: 4px;
  padding: 30px;
  text-align: center;
  height: 100%;
}

.feature-box__icon {
  width: 169px;
  height: 127px;
  margin: 0 auto 20px;
}

.feature-box__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.feature-box__title {
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 15px;
}

.feature-box__text {
  font-size: 19px;
  line-height: 1.6;
}

/* ============================================
   FEATURE GRID
   ============================================ */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  padding: 50px 0;
}

/* ============================================
   INGREDIENT CARDS
   ============================================ */
.ingredient-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding: 50px 0;
}

.ingredient-cards--three-col {
  grid-template-columns: repeat(3, 1fr);
  padding-top: 0;
}

.ingredient-cards-second {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.ingredient-card {
  background-color: #fff;
  border: 2px solid rgba(0, 0, 0, 0.19);
  box-shadow: 0 1px 6px 2px #dbd6d6;
  border-radius: 4px;
  padding: 30px;
  text-align: center;
}

.ingredient-card__icon {
  width: 200px;
  height: 150px;
  margin: 0 auto 20px;
}

@media (max-width: 480px) {
  .ingredient-card__icon {
  display: flex;
  justify-content: center;
  align-items: center;
}

}



.ingredient-card__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ingredient-card__title {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 10px;
}

.ingredient-card__text {
  font-size: 19px;
  line-height: 1.5;
}

/* ============================================
   PRODUCT CARDS
   ============================================ */
.products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 35px;
  margin: 50px 0;
}

.product-card {
  background-color: #fff;
  border: 2px solid rgba(0, 0, 0, 0.19);
  box-shadow: 0 1px 6px 2px #dbd6d6;
  border-radius: 4px;
  padding: 30px;
  text-align: center;
}

.product-card__image {
  margin: 0 auto 20px;
  max-width: 353px;
  height: 265px;
}

.product-card__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.product-card__label {
  font-size: 24px;
  font-weight: 700;
  color: #872886;
  font-style: italic;
  margin-bottom: 15px;
}

.product-card__price {
  font-size: 29px;
  font-weight: 700;
  margin-bottom: 15px;
}

.product-card__features {
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 20px;
  text-align: left;
}

.product-card__features ul {
  list-style-position: inside;
  padding-left: 0;
}

/* Standalone Product Elements (outside grid) */
.product-price {
  font-size: 29px;
  font-weight: 700;
  margin-bottom: 15px;
}

.product-features {
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 20px;
  text-align: left;
  list-style-position: inside;
}

.product-features li {
  margin-bottom: 10px;
}

/* ============================================
   FAQ SECTION
   ============================================ */
.faq-section {
  padding: 60px 20px;
}

.faq-section__title {
  font-size: 32px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 40px;
}

.faq-section__content {
  max-width: 969px;
  margin: 0 auto;
  font-size: 20px;
  line-height: 1.8;
}

.faq-item {
  margin-bottom: 25px;
}

.faq-item__question {
  font-weight: 700;
  margin-bottom: 8px;
}

.faq-item__answer {
  margin-bottom: 15px;
}

/* ============================================
   FAQ BOXES (Styled FAQ)
   ============================================ */
.faq-boxes {
  max-width: 774px;
  margin: 0 auto;
}

.faq-box {
  background-color: #f6ecec;
  border: 1px solid rgba(0, 0, 0, 0.23);
  box-shadow: 0 1px 12px 0 rgba(0, 0, 0, 0.18);
  padding: 37px 42px;
  margin-bottom: 15px;
}

.faq-box__question {
  font-size: 31px;
  font-weight: 700;
  margin-bottom: 8px;
}

.faq-box__answer {
  font-size: 20px;
  line-height: 1.7;
}

.faq-box h3 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 10px;
}

.faq-box p {
  font-size: 20px;
  line-height: 1.7;
  margin-bottom: 15px;
}

.faq-box p:last-child {
  margin-bottom: 0;
}

/* ============================================
   CONTACT FORM
   ============================================ */
.contact-form {
  background-color: #292c7d;
  border: 1px solid #000;
  padding: 56px 88px;
  max-width: 700px;
  margin: 0 auto;
}

.contact-form__title {
  font-size: 36px;
  font-weight: 700;
  font-style: italic;
  color: #fff;
  text-align: center;
  margin-bottom: 30px;
}

.contact-form__field {
  margin-bottom: 20px;
}

.contact-form__label {
  display: block;
  font-size: 18px;
  color: #fff;
  margin-bottom: 5px;
}

.contact-form__input,
.contact-form__textarea {
  width: 100%;
  padding: 15px;
  font-size: 18px;
  font-family: Rubik, Arial, sans-serif;
  border: 1px solid #ccc;
  background-color: #fff;
}

.contact-form__textarea {
  min-height: 120px;
  resize: vertical;
}

.contact-form__submit {
  width: 100%;
  padding: 20px;
  font-size: 24px;
  font-weight: 700;
  font-style: italic;
  background-color: #872886;
  color: #fff;
  border: none;
  cursor: pointer;
  font-family: Rubik, Arial, sans-serif;
}

.contact-form__submit:hover {
  background-color: #6b1f69;
}

/* ============================================
   VIDEO CONTAINER
   ============================================ */
.video-container {
  position: relative;
  width: 100%;
  max-width: 678px;
  height: 391px;
  background-color: #000;
  margin: 30px auto;
}

.video-container iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.video-promo {
  max-width: 801px;
  margin: 0 auto;
  padding: 20px 0;
  border: 2px dashed black;
}

.video-promo h2 {
  font-size: 32px;
  margin-bottom: 30px;
}

/* ============================================
   PROMO BOX
   ============================================ */
.promo-box {
  background-color: #f6ecec;
  border: 3px solid #000;
  padding: 33px 66px;
  margin: 40px auto;
  max-width: 950px;
}

.promo-box--navy {
  background-color: #292c7d;
  border-color: #872886;
  border-width: 5px;
}

.promo-box__title {
  font-size: 38px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 25px;
}

.promo-box__text {
  font-size: 20px;
  line-height: 1.7;
  margin-bottom: 20px;
}

.promo-box__list {
  font-size: 23px;
  line-height: 1.7;
  margin-bottom: 30px;
}

/* ============================================
   HERO COMPONENT
   ============================================ */
.hero__title {
  font-size: 43px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 30px;
  line-height: 1.2;
}

.hero__image {
  max-width: 600px;
  margin: 30px auto;
  text-align: center;
}

.hero__image img {
  width: 100%;
  height: auto;
}

.hero__rating {
  font-size: 18px;
  margin: 20px 0;
}

.hero__subtitle {
  font-size: 29px;
  margin: 30px auto;
  max-width: 800px;
}

.hero__benefits {
  max-width: 425px;
  margin: 30px 0;
  text-align: left;
  font-size: 20px;
  line-height: 1.5;
}

.hero__benefits p {
  margin-bottom: 10px;
}

/* ============================================
   SITE FOOTER
   ============================================ */
.site-footer {
  background-color: #0c0c0c;
  color: #ffffff;
  font-size: 16px;
}

.site-footer__top {
  max-width: 1160px;
  margin: 0 auto;
  padding: 60px 20px;
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 40px;
}

.site-footer__logo {
  max-width: 140px;
  margin-bottom: 20px;
}

.site-footer__disclaimer {
  font-size: 14px;
  line-height: 1.6;
  color: #cccccc;
}

.site-footer__heading {
  font-size: 18px;
  margin-bottom: 15px;
  font-weight: 700;
}

.site-footer__links ul {
  list-style: none;
  padding: 0;
}

.site-footer__links li {
  margin-bottom: 10px;
}

.site-footer__links a {
  color: #ffffff;
  text-decoration: none;
  font-size: 15px;
}

.site-footer__links a:hover {
  text-decoration: underline;
}

.site-footer__icons {
  display: flex;
  gap: 15px;
  margin-top: 10px;
}

.site-footer__icons img {
  width: 22px;
  height: 22px;
  filter: invert(1);
  opacity: 0.85;
  transition: opacity 0.2s ease;
}

.site-footer__icons img:hover {
  opacity: 1;
}

.site-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  text-align: center;
  padding: 20px;
  font-size: 14px;
  color: #cccccc;
}

/* Responsive Footer */
@media (max-width: 768px) {
  .site-footer__top {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .site-footer__icons {
    justify-content: center;
  }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */
.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-white {
  color: #fff;
}

.text-purple {
  color: #872886;
}

.text-navy {
  color: #292c7d;
}

.text-gold {
  color: #ffbf00;
}

.text-bold {
  font-weight: 700;
}

.text-italic {
  font-style: italic;
}

.text-yellow {
  color: #ffbf00;
}

.bg-yellow-highlight {
  background-color: #fff1c6;
  padding: 5px 10px;
  display: inline-block;
}

.mb-20 {
  margin-bottom: 20px;
}

.mb-30 {
  margin-bottom: 30px;
}

.mb-40 {
  margin-bottom: 40px;
}

.mt-20 {
  margin-top: 20px;
}

.mt-30 {
  margin-top: 30px;
}

.mt-40 {
  margin-top: 40px;
}

/* ============================================
   MAX WIDTH UTILITIES
   ============================================ */
.max-w-600 {
  max-width: 600px;
  margin: 0 auto;
}

.max-w-651 {
  max-width: 651px;
  margin: 0 auto;
}

.max-w-800 {
  max-width: 800px;
  margin: 0 auto;
}

/* ============================================
   RESPONSIVE IMAGE UTILITIES
   ============================================ */
.img-w-367 {
  max-width: 367px;
  margin: 0 auto;
}

.img-w-371 {
  width: 371px !important;
  margin: 0 auto;
}

.img-w-431 {
  max-width: 431px;
  margin: 0 auto;
}

.img-w-503 {
  max-width: 503px;
  margin: 0 auto;
}

.img-w-557 {
  max-width: 557px;
  margin: 0 auto;
}

/* ============================================
   ADDITIONAL UTILITIES - Refactor Phase 1
   ============================================ */

/* Font Size Utilities */
.text-17 {
  font-size: 17px;
}

.text-22 {
  font-size: 22px;
}

.text-24 {
  font-size: 24px;
}

.text-26 {
  font-size: 26px;
}

/* Additional Color Utilities */
.text-navy-dark {
  color: #25335c;
}

/* Additional Max-Width Utilities */
.max-w-348 {
  max-width: 348px;
  margin: 0 auto;
}

.max-w-900 {
  max-width: 900px;
  margin: 0 auto;
}

.max-w-950 {
  max-width: 950px;
  margin: 0 auto;
}

/* Image Centering */
.img-center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.img-center-mt-20 {
  display: block;
  margin: 20px auto 0 auto;
}

/* Padding Utilities */
.p-30-20 {
  padding: 30px 20px;
}

.p-42-20 {
  padding: 42px 20px;
}

/* Vertical Margin Utilities */
.my-40 {
  margin-top: 40px;
  margin-bottom: 40px;
}

/* ============================================
   BENEFITS LIST COMPONENT
   ============================================ */
.benefits-list {
  margin: 30px auto 30px auto;
  width: 500px;
  font-size: 20px;
  line-height: 1.7;
}

/* ============================================
   BADGE IMAGE COMPONENT
   ============================================ */
.badge-image {
  max-width: 172px;
  margin: 20px auto;
  display: block;
}

.delivery-badge {
  margin: 40px auto;
  text-align: center;
}

.delivery-badge img {
  max-width: 529px;
  margin: 0 auto;
}

/* ============================================
   IMAGE ROW COMPONENT
   ============================================ */
.image-row {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  margin: 30px 0;
}

.image-row img {
  max-width: 100%;
  height: auto;
}

/* ============================================
   BRAIN SUPPLEMENTS PAGE SPECIFIC
   ============================================ */

/* Content Block */
.content-block {
  max-width: 900px;
  margin: 30px auto;
  line-height: 1.7;
  font-size: 20px;
}

.content-block p {
  margin-bottom: 20px;
}

/* Ingredient Image */
.ingredient-image {
  max-width: 964px;
  margin: 40px auto;
  text-align: center;
}

.ingredient-image img {
  width: 100%;
  height: auto;
}

/* ============================================
   EMOTIONALREGULATION PAGE SPECIFIC
   ============================================ */

/* Hero Bullets */
.hero-bullets {
  text-align: left;
  max-width: 600px;
  margin: 0 auto 30px auto;
  list-style: none;
  font-size: 20px;
}

.hero-bullets li {
  margin-bottom: 10px;
  position: relative;
  padding-left: 30px;
}

.hero-bullets li::before {
  content: "✨";
  position: absolute;
  left: 0;
  top: 0;
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

/* Tablet */
@media (max-width: 768px) {
  .section__wrap {
    padding: 40px 15px;
  }

  .header__content {
    flex-direction: column;
    gap: 15px;
  }

  .two-col {
    grid-template-columns: 1fr;
    gap: 30px;
  }

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

  .ingredient-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .ingredient-cards--three-col {
    grid-template-columns: 1fr;
  }

  .ingredient-cards-second {
    grid-template-columns: 1fr;
  }

  .products-grid {
    grid-template-columns: 1fr;
    gap: 25px;
  }

  .main-hero__title {
    font-size: 32px;
  }

  .content-section__title {
    font-size: 32px;
  }

  .btn {
    font-size: 20px;
    padding: 18px 35px;
  }

  .btn--large {
    font-size: 22px;
    height: auto;
    min-height: 68px;
    padding: 20px 30px;
  }

  .contact-form {
    padding: 40px 30px;
  }

  .testimonial__text {
    font-size: 18px;
  }

  .hero__title {
    font-size: 28px;
  }

  .hero__subtitle {
    font-size: 24px;
  }

  .section-title {
    font-size: 28px;
  }

  .two-column {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .two-column--reverse {
    direction: ltr;
  }

  .ingredients-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .products-grid {
    grid-template-columns: 1fr;
    gap: 25px;
  }

  .benefits-list {
    width: 100%;
    max-width: 426px;
  }

  .img-w-371,
  .img-w-367,
  .img-w-431,
  .img-w-503,
  .img-w-557 {
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* Mobile */
@media (max-width: 480px) {
  .section__wrap {
    padding: 30px 15px;
  }

  .hero__text {
    font-size: 18px;
  }

  .main-hero__title {
    font-size: 26px;
  }

  .content-section__title {
    font-size: 26px;
  }

  .content-section__subtitle {
    font-size: 24px;
  }

  .content-section__text {
    font-size: 18px;
  }

  .two-col__title {
    font-size: 24px;
  }

  .two-col__text {
    font-size: 18px;
  }

  .feature-box__title {
    font-size: 28px;
  }

  .ingredient-cards {
    grid-template-columns: 1fr;
  }

  .ingredient-cards--three-col {
    grid-template-columns: 1fr;
  }

  .ingredient-cards-second {
    grid-template-columns: 1fr;
  }

  .testimonial__text {
    font-size: 16px;
  }

  .testimonial__stars {
    font-size: 24px;
  }

  .btn {
    font-size: 18px;
    padding: 15px 30px;
  }

  .btn--large {
    font-size: 20px;
    min-height: 60px;
  }

  .faq-box__question {
    font-size: 24px;
  }

  .faq-box__answer {
    font-size: 18px;
  }

  .contact-form {
    padding: 30px 20px;
  }

  .contact-form__title {
    font-size: 28px;
  }

  .promo-box {
    padding: 25px 20px;
  }

  .promo-box__title {
    font-size: 28px;
  }

  .promo-box__text {
    font-size: 18px;
  }

  .video-container {
    height: 250px;
  }

  .hero__title {
    font-size: 26px;
  }

  .hero__subtitle {
    font-size: 22px;
  }

  .hero__benefits {
    font-size: 17px;
  }

  .section-title {
    font-size: 24px;
  }

  .content-block {
    font-size: 18px;
  }

  .two-column__text {
    font-size: 18px;
  }

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

  .ingredient-card img {
    max-width: 108px;
  }

  .product-card img {
    height: auto;
  }

  .faq-box {
    padding: 25px 20px;
  }

  .faq-box h3 {
    font-size: 18px;
  }

  .faq-box p {
    font-size: 16px;
  }

  .benefits-list {
    font-size: 20px;
  }
}