/* Mobile layout: 2-1-2 grid for 5 cards (only below 640px) */

@media (max-width: 640px) {
  /* Mobile font size overrides (grouped by section) */
  :root {
    /* Hero section font sizes */
    --font-size-hero-title: clamp(18px, 6.875vw, 44px);
    --font-size-hero-subtitle: clamp(11px, 4.0625vw, 26px);

    /* Feature grid font sizes */
    --font-size-feature-grid-title: clamp(18px, 8.90625vw, 57px);
    --font-size-card-title: clamp(14px, 5vw, 32px);

    /* Secondary section font sizes */
    --font-size-secondary-section-title: clamp(18px, 8.90625vw, 57px);
    --font-size-secondary-section-text-first: clamp(13px, 6.09375vw, 39px);
    --font-size-secondary-section-text-second: clamp(10px, 4.6875vw, 30px);
    --font-size-secondary-card-text: clamp(10px, 4.6875vw, 30px); /* 30px at 640px screen */
    --font-size-secondary-overlay: clamp(20px, 7vw, 44.8px);
    /* 150px at 640px screen width */
    --font-size-secondary-number: clamp(10px, 23.4375vw, 150px);
    --font-size-secondary-number-large: clamp(18px, 6.5vw, 104px);
    --font-size-secondary-number-large-stat: clamp(18px, 6.5vw, 104px);
    /* 140px at 640px screen width */
    --font-size-secondary-unit: clamp(9px, 20vw, 128px); /* 128px at 640px screen */
    --font-size-secondary-stat-unit: clamp(8px, 9.8vw, 62px);

    /* Tertiary section font sizes (60px / 42px at 640px) */
    --font-size-tertiary-title: clamp(18px, 8.90625vw, 57px);
    --font-size-tertiary-subtitle: clamp(13px, 6.09375vw, 39px); /* 39px at 640px screen */
    --font-size-tertiary-grid-title: clamp(10px, 6.09vw, 39px);
    --font-size-tertiary-grid-text: clamp(10px, 6.09vw, 39px);
    --font-size-tertiary-overlay-text: clamp(11px, 3.5vw, 22px);

    /* Fourth section font sizes (mobile, 1440px → 640px scaling) */
    --font-size-fourth-title: clamp(18px, 8.90625vw, 57px);
    --font-size-fourth-subtitle: clamp(12px, 6.09375vw, 39px); /* 39px at 640px screen */
    --font-size-fourth-grid-text: clamp(12px, 6.09375vw, 39px); /* 39px at 640px screen */
    --font-size-fourth-overlay-text: clamp(10px, 3.75vw, 24px);
    --font-size-fourth-overlay-text-chat-box: clamp(9px, 2.8125vw, 18px);

    /* Fifth section font sizes (mobile, 1440px → 640px scaling) */
    --font-size-fifth-title: clamp(18px, 8.90625vw, 57px);
    --font-size-fifth-card-text: clamp(13px, 6.3vw, 34px); /* 34px at 640px screen */

    /* Sixth section font sizes (mobile, 640px base) */
    --font-size-sixth-title: clamp(18px, 8.90625vw, 57px);
    --font-size-sixth-text: clamp(12px, 6.09375vw, 39px); /* 39px at 640px screen */

    /* Seventh section font sizes (mobile, 640px base) */
    --font-size-seventh-title: clamp(18px, 8.90625vw, 57px);
    --font-size-seventh-text: clamp(12px, 6.09375vw, 39px); /* 39px at 640px screen */

    /* Eighth section font sizes (mobile, 640px base) */
    --font-size-eighth-title: clamp(18px, 8.90625vw, 57px);
    --font-size-eighth-card-text: clamp(10px, 4.84375vw, 31px);

    /* Final section font sizes (mobile, 640px base) */
    --font-size-final-text: clamp(9px, 3.59375vw, 23px);
  }

  .page > section {
    /* 80px at 640px screen */
    padding-top: clamp(16px, 12.5vw, 80px);
    /* 92px at 640px screen */
    padding-bottom: clamp(24px, 14.375vw, 92px);
  }

  .page {
    padding-block: clamp(18px, 5vw, 32px) 0px;
  }

  .hero {
    margin-left: clamp(16px, 5.38vw, 31px);
    margin-right: clamp(16px, 5.38vw, 31px);
    width: clamp(220px, 90vw, 576px);
  }

  .feature-grid {
    padding-inline: clamp(18px, 5vw, 32px);;
  }

  /* Hero section */

  .hero {
    background-image: url("../feedImages/mobile_4.png");
    aspect-ratio: 576 / 721;
    background-size: cover;
  }

  .hero__title-group {
    column-gap: clamp(0px, 29.14vw, 186.5px);
    margin-right: clamp(10px, 2.8125vw, 18px);
  }

  .hero__subtitle {
    margin-top: clamp(0px, 0.9375vw, 6px);
  }

  /* Feature grid section */

  .feature-grid__items {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: min-content;
    /* 48px at 640px screen */
    column-gap: clamp(12px, 7.5vw, 48px);
    /* 40px at 640px screen */
    /* 85px at 640px screen */
    margin-top: clamp(16px, 13.28125vw, 85px);
  }

  .feature-card {
    min-height: 0;
    overflow: visible;
  }

  .feature-card--center {
    grid-column: 1 / -1;
  }

  .feature-card__image {
    width: 100%;
  }
  
  .feature-card:nth-child(1) .feature-card__image,
  .feature-card:nth-child(2) .feature-card__image,
  .feature-card:nth-child(4) .feature-card__image,
  .feature-card:nth-child(5) .feature-card__image {
    height: clamp(0px, 52.8125vw, 338px);
  }
  
  .feature-card:nth-child(1) .feature-card__image,
  .feature-card:nth-child(2) .feature-card__image img,
  .feature-card:nth-child(4) .feature-card__image img,
  .feature-card:nth-child(5) .feature-card__image img {
    height: clamp(0px, 52.8125vw, 338px);
    aspect-ratio: 263 / 338;
    object-fit: cover;
    display: block;
  }

  .feature-card:nth-child(1) .feature-card__image, .feature-card:nth-child(1) .feature-card__image img {
    background-color: rgba(232, 253, 223, 1);
    object-fit: unset;
    vertical-align: bottom;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
  }

  .feature-card__image, .feature-card__image img {
    border-radius: 50px;
  }
  
  .feature-card__title {
    margin-top: clamp(12px, 4.219vw, 27px); /* 27px at 640px screen */
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
  }

  /* Secondary section */
  .secondary-section {
    padding-bottom: clamp(23px, 10.9375vw, 70px); /* 70px at 640px */
  }
  .secondary-section__block--first {
    margin-bottom: clamp(0px, 9.375vw, 60px); /* 60px at 640px */
  }

  .secondary-section__block--first .secondary-section__title {
    margin-bottom: clamp(0px, 7.8125vw, 50px); /* 50px at 640px */
  }

  .secondary-section__block--second .secondary-section__title {
    margin-bottom: clamp(0px, 6.25vw, 40px); /* 40px in 640px screen */
  }

  .secondary-section__block--first .secondary-section__image {
    margin-bottom: clamp(0px, 6.25vw, 40px); /* 40px in 640px screen */
  }

  .secondary-section__title {
    width: clamp(280px, 90vw, 576px); /* 90vw of 640px → 576px */
    margin-right: auto;
    margin-left: auto;
  }

  /* Secondary section lead text on mobile */
  .secondary-section__text {
    width: auto;
    max-width: 100%;
    margin: 0 auto;
    padding-inline: max(22px, 6vw);
    font-size: clamp(30px, 6.09375vw, 39px); /* 39px at 640px screen */
  }

  .secondary-section__block--first .secondary-section__text {
    margin-bottom: clamp(0px, 7.813vw, 50px); /* 50px max at 640px screen */
  }

  .secondary-section__cards {
    flex-direction: column;
    align-items: center;
    gap: clamp(20px, 15.625vw, 100px); /* 100px at 640px screen */
  }

  .secondary-section .secondary-section__cards {
    padding-inline: clamp(0px, 5vw, 32px);
  }

  /* First set of cards in second section (mobile) */
  .secondary-section__cards--first {
    gap: 32px;
  }

  .secondary-section__cards--first .secondary-card {
    padding: clamp(12px, 4.6875vw, 32px) clamp(12px, 4.6875vw, 32px) clamp(10px, 9.375vw, 60px);
    min-height: clamp(200px, 65.3125vw, 418px); /* 418px out of 640px screen wide (418/640 = 65.3125vw) */
    border-radius: clamp(0px, 7.8125vw, 50px);
  }
  .secondary-section__cards--first .secondary-card {
    justify-content: center;
  }

  /* Stack and align the second set of 3 cards correctly on mobile */
  .secondary-section__cards--second {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-inline: clamp(0px, 5vw, 32px);
    width: 100%;
  }

  .secondary-section__cards--second .secondary-card__text {
    font-size: clamp(10px, 6.09vw, 39px);
  }

  .secondary-card {
    width: 100%;
    max-width: 100%;
    height: auto;
    padding-top: 0px;
  }

  .secondary-card--no-bg {
    width: 100%;
    max-width: 100%;
  }

  /* Second set of 3 cards: full-width images with rounded corners on mobile */
  .secondary-section__cards--second .secondary-card--no-bg {
    max-width: 100%;
  }
  .secondary-section__cards--second .secondary-card--no-bg .secondary-card__image {
    width: 100%;
    overflow: hidden;
    border-radius: clamp(0px, 7.8125vw, 50px);
    margin-bottom: 0px;
  }

  .secondary-section__cards--second .secondary-card--no-bg .secondary-card__image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: clamp(0px, 7.8125vw, 50px);
    margin-bottom: clamp(16px, 6.875vw, 44px); /* 44px at 640px screen */
  }

  .secondary-card--first .secondary-card__content {
    padding: 0px
  }

  /* Images container for proper positioning */
  .secondary-card__images-container {
    top: 0px;
    position: absolute;
    /* margin-top: 60px at 320px, 25px at 640px */
    margin-top: 0px;
    /* left: 35px at 320px, 165px at 640px */
    left: clamp(35px, calc((165 - 35) * ((100vw - 320px) / (640 - 320)) + 35px), 165px);
  }

  .secondary-card__image--right {
    width: 119px;
    margin-top: 30px;
    margin-left: 95px
  }
  .secondary-card--second {
    justify-content: start;
  }
  .secondary-card--second .secondary-card__text-overlay {
    padding-top: 75px;
  }
  .secondary-card__image--left {
    width: 113px;
  }
  .secondary-card__text-overlay,
  .secondary-card--second .secondary-card__digit,
  .secondary-card__stat-number {
    font-size: var(--font-size-secondary-unit);
  }
  .secondary-card__stat-unit {
    margin-top: clamp(-21px, -3.28vw, 0px);
    border: 4px solid var(--color-text-mint);
    border-radius: 10px;
  }

  /* Tertiary section */

  .tertiary-section {
    padding-top: max(30px, 4.6875vw);
    padding-bottom: max(80px, 20vw);
  }

  .tertiary-section__inner {
    gap: max(28px, 7vw);
    align-items: center;
  }

  /* Center title + subtitle on mobile */
  .tertiary-section__header {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    width: clamp(280px, 90vw, 576px); /* 90vw of 640px → 576px */
  }
  .tertiary-section__image--1 img {
    width: 102%;
  }

  .tertiary-section__title {
    font-size: var(--font-size-tertiary-title);
    font-weight: 500;
    margin-bottom: max(20px, 5vw);
  }

  .tertiary-section__subtitle {
    margin-top: max(12px, 3vw);
    font-size: var(--font-size-tertiary-subtitle);
    font-weight: 500;
    max-width: clamp(0px, 80vw, 511px);
    margin: 0 auto;
    
  }

  .tertiary-section__title-secondary {
    margin-top: max(28px, 7vw);
    text-align: left;
    margin-left: 0;
    margin-right: 0;
    font-size: var(--font-size-tertiary-grid-title);
  }
  .tertiary-section__image:not(.tertiary-section__image--1) img {
    border-radius: 50px
  }

  /* Content after the second image should be inset 32px from the sides */
  .tertiary-section__content {
    /* 32px at 640px screen width */
    margin-inline: max(16px, 5vw);
  }
  
  /* Stack grid items as single-column rows on mobile */
  .tertiary-section__grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(20px, 18.75vw, 120px);
    column-gap: 0;
    margin-top: clamp(20px, 18.906vw, 121px);
  }
  .tertiary-card {
    gap: clamp(12px, 6.875vw, 44px); /* 44px at 640px screen */
  }
  .tertiary-section__grid .tertiary-card:nth-child(2) {
    margin-top: 0px;
  }
  .tertiary-card__text {
    text-align: left;
    font-weight: 500;
  }
  .tertiary-card__image {
    border-radius: clamp(0px, 7.8125vw, 50px);
  }


  .tertiary-card__overlay-text {
    font-size: var(--font-size-tertiary-overlay-text);
    max-width: 95%;
    background-color: rgba(34, 34, 34, 0.9);
    border-radius: 10px;
    padding: 12.5px max(12px, 3vw);
    color: rgba(255, 255, 255, 0.85);
    margin-top: clamp(18px, 7.03125vw, 45px);
  }

  /* Fourth section (mobile layout) */

  .fourth-section {
    padding-top: max(30px, 4.6875vw);
    padding-bottom: max(80px, 20vw);
  }

  .fourth-section__inner {
    padding-inline: clamp(18px, 5vw, 32px);
    gap: max(28px, 7vw);
  }

  /* Center title + subtitle on mobile */
  .fourth-section__header {
    text-align: center;
    margin-left: max(16px, 5vw);
    margin-right: max(16px, 5vw);
  }

  .fourth-section__title {
    font-size: var(--font-size-fourth-title);
    font-weight: 500;
    margin-bottom: max(20px, 5vw);
  }

  .fourth-section__subtitle {
    margin-top: max(12px, 3vw);
    font-size: var(--font-size-fourth-subtitle);
    font-weight: 500;
  }

  .fourth-section__hero {
    margin-top: 0px;
  }

  /* Overlay adjustments for mobile */
  .fourth-section__overlay {
    padding: max(16px, 4vw);
    flex-direction: column;
    align-items: center;
    gap: max(16px, 4vw);
  }

  .fourth-section__label {
    max-width: 375px;
    width: 100%;
    text-align: center;
    font-size: var(--font-size-fourth-overlay-text);
    align-items: center;
  }

  .fourth-section__label--left {
    margin-top: 0;
    margin-left: 0;
  }

  .fourth-section__overlay-right {
    align-items: center;
    max-width: 100%;
    margin-right: 0;
    margin-top: 0;
  }

  .fourth-section__badge-image {
    width: clamp(24px, 7.03vw, 45px);   /* 45px at 640px */
    height: clamp(28px, 7.5vw, 48px);   /* 48px at 640px */
  }

  /* Content after hero image should be inset */
  .fourth-section__body {
    font-size: var(--font-size-fourth-grid-text);
    font-weight: 500;
    text-align: unset;
    margin-top: 0px
  }

  /* Stack grid items as single-column rows on mobile */
  .fourth-section__grid {
    margin-top: clamp(36px, 185vw, 90px);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(24px, 18.9vw, 121px); /* 121px at 640px screen width */
    column-gap: 0;
  }
  .fourth-card {
    gap: clamp(12px, 6.875vw, 44px); /* 44px at 640px screen */
  }

  .fourth-card__text {
    font-size: var(--font-size-fourth-grid-text);
    font-weight: 500;
    text-align: left;
  }

  .fourth-card__image {
    border-radius: clamp(0px, 7.8125vw, 50px);
  }

  /* First card overlay text adjustments for mobile */
  .fourth-card__overlay {
    padding: max(16px, 4vw);
    align-items: start;
    justify-content: center;
  }

  .fourth-card__overlay-text {
    font-size: var(--font-size-fourth-overlay-text-chat-box);
    max-width: clamp(40px, 37.8125vw, 242px);   /* 242px at 640px */
    margin-top: clamp(60px, 50vw, 320px); /* 320px at 640px screen */
    height: clamp(60px, 22.65625vw, 145px)
  }
  .fourth-section__label--left {
    margin-top: clamp(24px, 3.90625vw, 25px);
    margin-left: 0px;
  
  }
  .fourth-section__label--right {
    padding-bottom: clamp(0px, calc((100vw - 320px) * 0.171875), 55px);
    margin-right: 0px
  }
  .fourth-section__image img {
    border-radius: clamp(0px, 7.8125vw, 50px);
  }

  /* Fifth section (mobile layout) */

  .fifth-section {
    padding-top: max(30px, 4.6875vw);
    padding-bottom: max(80px, 20vw);
  }

  .fifth-section__inner {
    padding-inline: clamp(18px, 5vw, 32px);;
  }

  .fifth-section__title {
    font-size: var(--font-size-fifth-title);
    font-weight: 500;
    text-align: center;
    margin-right: clamp(16px, 6vw, 38px);
    margin-left: clamp(16px, 6vw, 38px);
  }

  .fifth-section__cards {
    margin-top: clamp(16px, 12.734375vw, 81.5px); /* 81.5px at 640px screen */
    margin-inline: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(20px, 7.1875vw, 46px); /* 46px at 640px screen */
    column-gap: 0;
  }

  .fifth-card {
    width: 100%;
    height: auto;
    padding: clamp(18px, 7.813vw, 50px); /* 50px max at 640px */
    border-radius: clamp(28px, 7.813vw, 50px); /* 50px at 640px screen width */
    gap: clamp(10px, 3vw, 18px);
  }

  .fifth-card__text {
    font-size: var(--font-size-fifth-card-text);
    text-align: left;
    margin-right: clamp(10px, 9.6875vw, 62px); /* 62px max at 640px */
  }
  .fifth-card__image {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .fifth-card__image img {
    width: unset;
  }

  /* First fifth-card image: 91 by 64px, aligned to the left */
  .fifth-card:first-child .fifth-card__image {
    aspect-ratio: 91 / 64;
    width: 91px;
    height: 64px;
    justify-content: flex-start;
  }

  /* Second fifth-card image: 81 by 83px, aligned to the left */
  .fifth-card:nth-child(2) .fifth-card__image {
    aspect-ratio: 81 / 83;
    width: 81px;
    height: 83px;
    justify-content: flex-start;
  }

  /* Sixth section (mobile layout) */

  .sixth-section__inner {
    margin-inline: clamp(18px, 5vw, 32px);;
  }

  .sixth-section__title {
    font-size: var(--font-size-sixth-title);
    font-weight: 500;
    text-align: center;    
    line-height: 1.1;

  }

  .sixth-section__image {
    /* 576px × 576px container at 640px */
    width: clamp(280px, 90vw, 576px); /* 90vw of 640px → 576px */
    height: clamp(280px, 90vw, 576px); /* 90vw of 640px → 576px */
    /* 97px between title and image at 640px */
    margin-top: clamp(20px, 15.15625vw, 97px); /* 15.15625vw of 640px → 97px */
    border-radius: clamp(0px, 7.8125vw, 50px);
  }

  .sixth-section__image img {
    /* 576px × 576px image at 640px */
    width: clamp(280px, 90vw, 576px); /* 90vw of 640px → 576px */
    height: clamp(280px, 90vw, 576px); /* 90vw of 640px → 576px */
  }

  .sixth-section__text {
    font-size: var(--font-size-sixth-text);
    text-align: center;
    /* 44px between image and text at 640px */
    margin-top: clamp(16px, 6.875vw, 44px); /* 6.875vw of 640px → 44px */
    text-align: unset;
  }

  /* Seventh section (mobile layout) */

  .seventh-section__inner {
    margin-inline: clamp(18px, 5vw, 32px);;
  }

  .seventh-section__title {
    font-size: var(--font-size-seventh-title);
    font-weight: 500;
    text-align: center;
    line-height: 1.1;
  }

  .seventh-section__images {
    display: block;
    /* 97px between title and image at 640px */
    margin-top: clamp(20px, 15.15625vw, 97px); /* 15.15625vw of 640px → 97px */
  }

  .seventh-section__image--second,
  .seventh-section__image--third {
    display: none;
  }

  .seventh-section__image--first {
    /* 576px × 778px at 640px */
    width: clamp(280px, 90vw, 576px); /* 90vw of 640px → 576px */
    height: clamp(350px, 121.5625vw, 778px); /* 121.5625vw of 640px → 778px */
    border-radius: clamp(0px, 7.8125vw, 50px);
    display: block;
  }

  .seventh-section__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .seventh-section__text {
    font-size: var(--font-size-seventh-text);
    text-align: center;
    /* 44px between images and text at 640px */
    margin-top: clamp(16px, 6.875vw, 44px); /* 6.875vw of 640px → 44px */
    text-align: unset;
  }

  /* Eighth section (mobile layout) */

  .eighth-section__inner {
    padding-inline: clamp(18px, 5vw, 32px);;
  }

  .eighth-section__title {
    font-size: var(--font-size-eighth-title);
    font-weight: 500;
    text-align: center;
    line-height: 1.1;
  }

  .eighth-section__cards {
    flex-direction: column;
    width: 100%;
    gap: clamp(16px, 7.03125vw, 45px); /* 45px at 640px screen */
    /* 97px between title and cards at 640px */
    margin-top: clamp(20px, 15.15625vw, 97px); /* 15.15625vw of 640px → 97px */
  }

  .eighth-card {
    width: 100%;
    /* 337px height at 640px */
    min-height: clamp(200px, 52.65625vw, 337px); /* 52.65625vw of 640px → 337px */
    height: auto;
    padding-left: clamp(8px, 2.5vw, 16px);
    padding-right: clamp(8px, 2.5vw, 16px);
    padding-top: clamp(18px, 6vw, 38.5px);
    border-radius: clamp(0px, 7.8125vw, 50px);
  }

  .eighth-card--left .eighth-card__image {
    width: auto;
    height: auto;
    max-width: 100%;
  }

  .eighth-card--right .eighth-card__image {
    /* 298px × 62px at 640px */
    width: clamp(200px, 46.5625vw, 298px); /* 46.5625vw of 640px → 298px */
    height: clamp(40px, 9.6875vw, 62px); /* 9.6875vw of 640px → 62px */
  }
  .eighth-card__image img {
    width: clamp(100px, 46.5625vw, 298px); /* 298px at 640px wide screen */
    margin: 0 auto;
    height: 100%;
    object-fit: contain;
  }

  .eighth-card__text {
    max-width: none;
    /* 19px between image and text at 640px */
    margin-top: clamp(12px, 2.96875vw, 19px); /* 2.96875vw of 640px → 19px */
    font-size: var(--font-size-eighth-card-text);
    text-align: center;
  }

  .eighth-card--right .eighth-card__text {
    max-width: clamp(200px, 83.90625vw, 537px); /* 537px at 640px screen */
  }

  /* Final section (mobile layout) */
  .final-section__inner {
    margin-inline: clamp(18px, 4.0625vw, 26px);
  }
  .final-section__text {
    font-size: var(--font-size-final-text);
    color: #9aa0a6;
    text-align: center;
  }
}