/* Large desktops (≥1440px) */
@media (max-width: 1440px) {
  .container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
  }

  .nav_container {
    width: 100%;
    max-width: 1200px;
  }

  h1 {
    font-size: 46px;
  }

  h2 {
    font-weight: 600;
    font-style: normal;
    font-size: 38px;
  }

  .research_card h3 {
    font-size: 17px;
    width: 60%;
    text-align: left;
    line-height: 23px;
  }

  .cta_feature h3 {
    margin: 0 0 4px;
    color: #fff;
    font-size: 20px;
    font-weight: 500;
  }

  .cta_desc {
    width: 70%;
  }

  .cta_banner {
    padding: 40px 25px;
  }

  .cta_features {
    display: flex;
    gap: 35px;
  }

  .cp-navbar {
    max-width: 1200px;
  }

  .hero-banner {
    padding: 80px 40px;
  }

  .hero-btn {
    min-height: 55px;
    padding: 0 25px;
  }

  .ai_card h3 {
    font-size: 21px;
    line-height: 28px;
  }

  .ai_card.ai_card_hero h2 {
    font-size: 21px;
    line-height: 30px;
  }

  .ai_card {
    padding: 24px 18px 0 15px;
    min-height: 420px;
  }

  .ai_product_info h4 {
    font-size: 14px;
  }

  .ai_product_price span {
    font-size: 14px;
  }

  .ai_product {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px;
    border-radius: 12px;
    margin-bottom: 24px;
  }

  .best_btn {
    gap: 9px;
  }

  .price {
    font-size: 27px;
    margin-bottom: 24px;
  }

  .price img {
    width: 25px;
  }

  .brand-footer h3 {
    font-size: 28px;
    font-weight: 600;
  }

  .orders_list li {
    display: inline;
    font-size: 18px;
    font-weight: 600;
  }

  .logo-block {
    margin-bottom: 15px;
  }

  .otp-container p {
    font-size: 15px;
    padding: 3px;
  }

  .brand-footer-list li {
    font-size: 24px;
  }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  .container {
    width: 100%;
    max-width: 95%;
    margin: 0 auto;
  }

  .hero-banner {
    padding: 60px 40px;
    min-height: 620px;
  }

  .hero-content h1 {
    font-size: 56px;
  }

  .hero-content h2 {
    font-size: 46px;
  }

}

@media (max-width:991px) {

  .choose_path_heading h2 {
    font-size: 46px;
  }

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

  .choose_path_card {
    min-height: auto;
    /* the desktop layout relies on min-height + margin-top:auto on the
       button to create spacing; removing min-height here collapses that
       gap, so add an explicit gap between icon/heading/text/button */
    gap: 20px;
  }

  .bundle-card {
    gap: 20px;
  }

  .bundle-content h2 {
    font-size: 34px;
  }

  .subtitle {
    font-size: 26px;
  }

  .price {
    font-size: 30px;
  }

  .explore_grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .explore_heading h2 {
    font-size: 42px;
  }

  .explore_heading span {
    font-size: 34px;
  }

  .research_grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .cta_container {
    flex-direction: column;
    align-items: flex-start;
  }

  .cta_features {
    width: 100%;
    gap: 30px;
  }

  .cp-navbar {
    padding: 12px 18px;
  }

  .cp-nav-links {
    display: none;
  }

  .cp-mobile-toggle {
    display: block;
  }

  .cp-icon-btn {
    width: 40px;
    height: 40px;
  }
}

/* Tablets portrait (≥768px) */
@media (max-width: 768px) {
  * {
    touch-action: manipulation !important;
  }

  .lg-none {
    display: block;
  }

  .sm-none {
    display: none;
  }

  .container {
    width: 100%;
    max-width: 95%;
    margin: 0 auto;
    padding-left: 0;
    padding-right: 0;
  }

  p {
    font-size: 17px;
  }

  /* pull the banner up under the header (like the desktop layout, where
     the nav floats over the hero) instead of leaving it stacked below as
     its own block — this is what was reading as a gap above the hero */
  .hero-slider {
    margin-top: -90px;
  }

  .hero-banner {

    /* Two background layers: the dedicated mobile artwork on top, the
       desktop artwork underneath. A layer whose image fails to load simply
       paints nothing, so when no mobile upload exists (or it 404s) the
       desktop artwork shows through instead of leaving the hero blank.
       The desktop layer is deliberately not shown whole — it is cropped to
       the product group on its right-hand side, which is the part that
       reads on a narrow screen. */
    background-image: var(--mobile-bg), var(--desktop-bg);

    background-size: cover, cover;

    background-position: center top, 92% center;

    background-repeat: no-repeat, no-repeat;

    background-color: #cfe6fd;

    min-height: 720px;

    align-items: flex-start;

    /* extra top padding makes up for the banner being pulled up 90px,
       so the heading still clears the floating header */
    padding: 138px 22px 48px;
  }

  /* on mobile the content stacks full-width over the top of the image,
     so fade top-to-bottom instead of left-to-right. Kept lighter than
     before so the brand-blue background actually shows through. */
  .hero-banner::before {
    background: linear-gradient(180deg, rgba(240, 248, 255, 0.55) 0%, rgba(240, 248, 255, 0.4) 45%, rgba(240, 248, 255, 0.2) 70%, rgba(240, 248, 255, 0.05) 100%);
  }

  .hero-content {
    max-width: 100%;
  }

  .hero-content h1 {
    font-size: 40px;
    line-height: 1.15;
  }

  .hero-content h2 {
    font-size: 34px;
    line-height: 1.15;
  }

  .hero-content p {
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 28px;
  }

  .hero-buttons {
    gap: 14px;
    margin-bottom: 30px;
  }

  .hero-btn {
    width: 100%;
    min-height: 54px;
    font-size: 15px;
    /* mobile has no real hover state, so show the active/brand-blue
       styling by default instead of the pale desktop resting state */
    background: linear-gradient(90deg, #1D4A84 0%, #3E8CCA 100%);
    border: 1px solid transparent;
    color: #fff;
  }

  .hero-btn:active {
    background: linear-gradient(90deg, #163a68 0%, #2f70a3 100%);
  }

  .hero-features {
    flex-direction: column;
    gap: 14px;
  }

  .feature-item {
    font-size: 14px;
  }

  .trust-bar {
    flex-direction: column;
    align-items: stretch;

    gap: 16px;

    padding: 18px;
  }

  .trust-divider {
    /* horizontal rule spanning the item row, flush with the same left/right
       inset as the icon/text above it (i.e. the box's own padding) instead
       of the vertical rule used on desktop; --trust-divider isn't defined
       anywhere so fall back to a visible translucent white */
    width: 100%;
    height: 1px;
    margin: 0;
    background: var(--trust-divider, rgba(255, 255, 255, 0.35));
  }

  .trust-title {
    font-size: 13px;
  }

  .trust-text {
    font-size: 11px;
  }

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

  .ai_hero_title {
    font-size: 32px;
  }

  .ai_step_title {
    font-size: 26px;
  }

  .bundle-card {
    flex-direction: column;
    padding: 16px;
  }

  .bundle-image {
    width: 100%;
    flex: none;
  }

  .bundle-content {
    width: 100%;
  }

  .bundle-content h2 {
    font-size: 30px;
  }

  .subtitle {
    font-size: 24px;
  }

  .price {
    font-size: 28px;
  }

  .bundle-buttons {
    flex-direction: column;
  }

  .btn {
    width: 100%;
  }

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

  .explore_card_img {
    height: 220px;
  }

  .explore_heading h2 {
    font-size: 34px;
  }

  .explore_heading span {
    font-size: 28px;
  }

  .Reviews_heading h2 {
    font-size: 36px;
  }

  .Reviews_heading span {
    font-size: 30px;
  }

  .Reviews_card {
    padding: 20px;
  }

  .research_section {
    padding: 60px 0;
  }

  .research_grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .research_card {
    padding: 14px;
  }

  .research_image {
    width: 52px;
    height: 52px;
  }

  .research_card_title {
    font-size: 15px;
  }

  .cta_banner {
    padding: 40px 24px;
  }

  .cta_title {
    font-size: 42px;
  }

  .cta_title span {
    font-size: 50px;
  }

  .cta_desc {
    font-size: 16px;
  }

  .cta_features {
    flex-direction: column;
    gap: 20px;
  }

  .cta_feature {
    min-width: auto;
  }

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

  .ftr_socials {
    gap: 12px;
  }

  .ftr_socials a {
    width: 60px;
    height: 60px;
  }

  .ftr_socials img {
    width: 20px;
    height: 20px;
  }

  .choose_path_section {
    padding: 56px 16px;
  }

  .choose_path_heading {
    margin-bottom: 36px;
  }

  .choose_path_heading h2 {
    font-size: 38px;
  }



  .choose_path_text {
    font-size: 16px;
  }

  .choose_path_btn {
    min-height: 54px;
    font-size: 18px;
  }

  .health__grid {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 10px;
  }

  .ftr_top {
    flex-direction: column;
  }

  .ftr_accordion_section {
    width: 100%;
    padding-top: 25px;
  }

  .ftr_contact {
    width: 100%;
    padding-top: 5px;
    padding-bottom: 20px;
  }

  .ftr_right {
    grid-template-columns: repeat(3, 1fr)
  }

  .ftr_newsletter_fields {
    grid-template-columns: 1fr 1fr
  }

  .ftr_bottom {
    flex-direction: column;
    align-items: flex-start
  }

  .ftr_right {
    grid-template-columns: 1fr 1fr
  }

  .ftr_newsletter_fields {
    grid-template-columns: 1fr
  }


  .feature-item {
    font-size: 12px;
  }

  .feature-item i {
    font-size: 14px;
  }

  .top-feature-bar {
    display: block;
    overflow: hidden;
    padding: 10px 0;
  }

  .top-feature-track {
    display: flex;
    width: max-content;
    gap: 28px;
    padding: 0 20px;
    animation: feature_marquee_scroll 16s linear infinite;
  }

  .feature-item[aria-hidden="true"] {
    display: flex;
  }

  @keyframes feature_marquee_scroll {
    0% {
      transform: translate(0);
    }

    100% {
      transform: translate(-50%);
    }
  }

  .feature-item {
    font-size: 12px;
  }

  .feature-item i {
    font-size: 14px;
  }

  /* The header bar stays pinned to the top of the viewport while scrolling
     and slides out of the way once the footer comes into view (the
     .cp-nav-hidden class is toggled by an IntersectionObserver in main.js).
     Sticky keeps the bar in normal flow, so the hero's negative top margin
     still tucks under it exactly as before. */
  /* body{overflow-x:hidden} (style.css) turns the body into its own scroll
     container, which silently disables position:sticky for its children.
     html{overflow-x:hidden} is still in force and already clips sideways
     overflow at the viewport, so dropping it from the body here costs
     nothing and lets the header actually stick. */
  body {
    overflow-x: visible;
  }

  .cp-navbar-wrap {
    position: sticky;
    padding: 10px;
    top: 0;
    transition: transform .35s ease, opacity .35s ease;
    will-change: transform;
  }

  .cp-navbar-wrap.cp-nav-hidden {
    transform: translateY(-130%);
    opacity: 0;
    pointer-events: none;
  }

  section.product_detail_section {
    padding-top: 2rem;
  }

  a.ftr_logo {
    width: 80%;
  }

  .cp-navbar {
    min-height: 64px;
    border-radius: 24px;
  }

  .cp-logo img {
    height: 34px;
  }

  .cp-icon-btn {
    font-size: 18px;
  }

  .product_detail_gallery {
    position: static;
    top: 10px;
    align-self: flex-start;
    width: 100%;
  }

  /* ---------- App-style bottom nav ----------
     Not wanted on mobile — the sticky header carries navigation instead. */
  .bottom_nav_bar {
    display: none;
  }

  /* ---------- Shop by Goal section ---------- */
  section.goal-section {
    padding: 40px 0 0 0;
  }

  .goal-slider-section {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  .goal-content {
    width: 100%;
  }

  .goal-content p {
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
  }

  .goal-progress {
    width: 100%;
    max-width: 320px;
  }

  .goalSwiper {
    width: 100%;
  }

  /* The blue card sat the full width of the slide, which reads as a very
     wide box for a ~125px icon and a short label. Narrowed by 30% and
     centred — the icon is positioned from the middle of .goal-item, so it
     stays centred over the card.

     The card keeps that ~215px width; the gap between neighbouring cards is
     trimmed by tightening the slide pitch instead (slidesPerView and
     spaceBetween in goal.html), taking the gap from 104px to ~41px. */
  .goal-card {
    width: 86%;
    margin: 0 auto;
  }

  footer {
    padding-bottom: 1rem;
  }

  /* ---------- Consistent gap before the footer ----------
     main already contributes a uniform 64px, but the whitespace actually
     seen before the footer varied page to page because each last section
     adds its own bottom padding on top (0 on Contact and Products, 40 on
     About, 60 on FAQs). Flattening that leaves every page with the same
     64px gap the home page has.

     .cta_banner is excluded: its padding sits inside a coloured banner, so
     it is not whitespace and removing it would crop the banner. */
  main {
    padding-bottom: 64px;
  }

  main > section:last-child:not(.cta_banner) {
    padding-bottom: 0;
  }

  /* a trailing margin on the last element inside that section counts
     towards the gap as well (the FAQ list's last item carries 16px) */
  main > section:last-child > *:last-child,
  main > section:last-child > * > *:last-child {
    margin-bottom: 0;
  }

  /* ---------- Bestselling Compounds section ---------- */
  .best_tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }

  .best_tabs::-webkit-scrollbar {
    display: none;
  }

  .best_tab,
  .best_tab_link {
    flex-shrink: 0;
  }

  .best_marquee {
    padding: 24px 16px 3rem;
  }

  .best_btn {
    font-size: 13px;
    gap: 6px;
    padding: 13px 6px;
  }

  /* Body copy stays justified on mobile so it matches desktop (style.css
     sets `p { text-align: justify }` globally) and reads as a clean block.
     Hyphenation is what makes that work on a narrow column — without it,
     justifying short lines opens up large word gaps, which is why this was
     previously forced back to left. */
  p {
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
    overflow-wrap: break-word;
  }

  /* short labels and card meta read better ragged-right */
  p.best_desc,
  .ftr_copyright,
  .cta_feature p,
  .trust-text,
  .feature-item span {
    text-align: left;
    hyphens: manual;
  }

  /* ---------- Expert Guidance section ---------- */
  section.Guidance_section {
    padding: 40px 0;
  }

  section.Guidance_section .container {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .Guidance_content {
    max-width: 100%;
    padding: 24px;
  }

  .Guidance_subtitle {
    font-size: 30px;
    margin-bottom: 16px;
  }

  .Guidance_features {
    gap: 12px;
  }

  .Guidance_features .top {
    margin-top: 0;
  }

  .Guidance_item img {
    width: 56px;
    height: 56px;
  }

  .Guidance_item span {
    font-size: 15px;
  }

  /* ---------- Footer ---------- */
  .ftr_top {
    align-items: flex-start;
    gap: 16px;
  }

  a.ftr_logo {
    width: 40%;
    max-width: 160px;
  }

  .ftr_socials {
    justify-content: flex-start;
    gap: 10px;
  }

  .ftr_socials a {
    width: 48px;
    height: 48px;
  }

  .ftr_socials img {
    width: 18px;
    height: 18px;
  }

  .ftr_right {
    gap: 24px 1rem;
  }

  .ftr_nav_col h4 {
    font-size: 18px;
    margin-bottom: 10px;
  }

  .ftr_nav_col a {
    font-size: 15px;
  }

  /* the Legal column ended flush against this heading */
  .ftr_contact h5 {
    font-size: 18px;
    padding-top: 0;
    margin-top: 26px;
    line-height: 1.4;
  }

  /* the credit link ran straight on from the copyright line */
  .ftr_copyright {
    display: block;
    line-height: 1.7;
  }

  .ftr_copyright a {
    display: block;
    margin-top: 10px;
  }

  .ftr_newsletter {
    padding: 18px;
    margin-top: 1rem;
  }

  .ftr_newsletter input {
    font-size: 15px;
    padding: 12px 14px;
  }

  .ftr_subscribe_btn {
    font-size: 16px;
    padding: 12px;
  }

  .ftr_disclaimer {
    font-size: 13px;
  }

  /* ==========================================================
     Mobile-only slider / layout corrections
     ========================================================== */

  /* ---------- Bestselling Compounds: draggable strip ----------
     The desktop version is a CSS marquee, which cannot be dragged. On
     mobile the same track becomes a real horizontally scrollable strip so
     touch gives native flick + momentum, and the auto-scroll is driven in
     JS instead (see best_wrap.html). */
  .best_marquee {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }

  .best_marquee::-webkit-scrollbar {
    display: none;
  }

  .best_marquee_track {
    animation: none;
    gap: 14px;
  }

  /* ---------- Explore Compounds: horizontal slider ----------
     Replaces the stacked one-per-row grid. One card is fully in view and
     the next peeks in by ~15%. */
  .explore_grid {
    display: flex;
    grid-template-columns: none;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    padding-bottom: 4px;
  }

  .explore_grid::-webkit-scrollbar {
    display: none;
  }

  .explore_card {
    flex: 0 0 82%;
    scroll-snap-align: start;
  }

  /* the card art had no object-fit, so a landscape photo was being
     squashed into the fixed-height box — cover crops it instead */
  .explore_card_img {
    height: 260px;
  }

  .explore_card_img img {
    object-fit: cover;
    object-position: center;
  }

  /* ---------- Trusted User Reviews ----------
     The slider sat flush against the viewport edges and hard up against
     the section's bottom edge, so the card's 1px frame and its shadow were
     being clipped. Inset it so the whole box is visible. */
  .Reviews_section {
    padding: 1rem 0 2.5rem;
  }

  .Reviews_slider {
    padding: 6px 14px 12px;
  }

  .Reviews_card {
    padding: 18px;
  }

  /* ---------- Ready To Optimise ----------
     Side-by-side buttons forced the labels onto two lines; stacked, each
     label fits on a single line. */
  .cta_buttons {
    flex-direction: column;
    width: 100%;
    gap: 12px;
  }

  .cta_buttons a {
    width: 100%;
    margin-top: 0;
    white-space: nowrap;
  }

  /* The wave reveal has to be re-derived for mobile. `cover` on a narrow
     370px-wide banner crops cta_bg.webp down to roughly x 885-1253 of its
     2138px width, so only the second wave's arc actually falls inside the
     frame — and the desktop base gradient, which was sampled from the wide
     desktop crop, no longer lines up with it. Both are recomputed here for
     the mobile crop: the gradient from the same sample points over that
     narrower band, and the reveal with a single pause on the one wave that
     is visible, before the rest fills in. */
  .cta_banner {
    background: linear-gradient(163.7deg,
        #0677FF 0%,
        #1C83FE 20%,
        #338FFD 40%,
        #499BFC 60%,
        #60A7FB 80%,
        #76B3FA 100%);
  }

  .cta_banner::before {
    clip-path: ellipse(0% 0% at 0% 92%);
  }

  .cta_banner.cta_active::before {
    animation: ctaWaveMobile 2.2s cubic-bezier(.22, .61, .36, 1) forwards;
  }

  @keyframes ctaWaveMobile {
    0% {
      transform: scale(.96);
      opacity: 0;
      clip-path: ellipse(0% 0% at 0% 92%);
    }

    14% {
      opacity: .95;
    }

    35% {
      opacity: 1;
    }

    /* the visible wave sweeps in */
    38% {
      clip-path: ellipse(36% 150% at 0% 92%);
    }

    55% {
      clip-path: ellipse(36% 150% at 0% 92%);
    }

    /* remaining background fills in */
    100% {
      transform: scale(1);
      opacity: 1;
      clip-path: ellipse(130% 340% at 0% 92%);
    }
  }

  /* ---------- Footer: collapsible link columns ----------
     Navigation / Support / Legal stack vertically, left aligned, and start
     collapsed — the links only appear once the heading is tapped. */
  .ftr_right {
    display: block;
  }

  .ftr_nav_col {
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, .35);
  }

  .ftr_nav_col h4 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    margin: 0;
    padding: 14px 2px;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
  }

  /* plus / minus drawn in CSS so it needs no icon asset */
  .ftr_nav_toggle_icon {
    display: block;
    position: relative;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
  }

  .ftr_nav_toggle_icon::before,
  .ftr_nav_toggle_icon::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    background: currentColor;
    transform: translate(-50%, -50%);
    transition: transform .3s ease, opacity .3s ease;
  }

  .ftr_nav_toggle_icon::before {
    width: 14px;
    height: 2px;
  }

  .ftr_nav_toggle_icon::after {
    width: 2px;
    height: 14px;
  }

  .ftr_nav_col.ftr_col_open .ftr_nav_toggle_icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
    opacity: 0;
  }

  .ftr_nav_links {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .32s ease;
  }

  .ftr_nav_col.ftr_col_open .ftr_nav_links {
    grid-template-rows: 1fr;
  }

  .ftr_nav_links_inner {
    overflow: hidden;
    min-height: 0;
  }

  .ftr_nav_col.ftr_col_open .ftr_nav_links_inner {
    padding-bottom: 12px;
  }

  .ftr_nav_col a {
    display: block;
    text-align: left;
    padding: 5px 2px;
    margin-bottom: 0;
  }

  /* ---------- Footer disclaimer ---------- */
  .ftr_disclaimer {
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
  }

}

/* Small phones */
@media (max-width: 400px) {
  .goal-content h2 {
    font-size: 32px;
  }

  .goal-progress {
    max-width: 100%;
  }
}