/** Shopify CDN: Minification failed

Line 2524:0 All "@import" rules must come first
Line 6013:0 All "@import" rules must come first
Line 6098:0 All "@import" rules must come first

**/


/* CSS from section stylesheet tags */
.experts-grid {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      grid-template-rows: repeat(4, 120px);
      column-gap: 2rem;
      padding: 0;
      transform: scaleX(1.1);
      max-width: 100%;
      row-gap: 10rem;
  }

  .aboutus-experts-section {
    overflow-x: hidden;
    position: relative;
  }

  .expert-rect {
    background-color: #FF852EB2;
    border-radius: 1.5rem;
    padding: 2rem;
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: relative;
  }

  .expert-img7 {
    width: 35% !important;
    inset-inline-start: 35% !important;
  }
    
  .expert-img5 {
    width: 50% !important;
    inset-inline-start: 20% !important;
  }
  .expert-img6 {
    width: 62% !important;
    inset-inline-start: 20% !important;
  }

  .expert-img1 {
      width: 70% !important;
  }

  .expert-img3 {
      width: 32% !important;
      inset-inline-start: 30% !important;
  }

  .expert-img10 {
      width: 80% !important;
      inset-inline-start: 20% !important;
  }

  .expert-img {
    width: 60%;
    height: 220px;
    object-fit: cover;
    position: absolute;
    inset-inline-start: 10%;
    bottom: 0;
  }

  /* === TEXT === */
  .expert-word {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    color: #111827;
    background-color: #fff;
    border-radius: 0.5rem;
    text-align: center;
    word-break: keep-all;
  }

  /* === FADE STATES === */
  .fade-in, .fade-out {
    opacity: 0;
    transform: translateY(20px);
  }

  .experts-heading-mobile {
    display: none;
  }

  /* === RESPONSIVE === */
  @media (max-width: 767px) {

    /* headline */
    .experts-heading-mobile {
      font-size: 2.4rem;
      font-weight: 700;
      text-align: center;
      margin: 0 0 1.25rem;
      display: block;
    }

    /* hide per-column words from desktop grid */
    .expert-word { display: none !important; }

    /* ── carousel container (still a grid) ───────────────────── */
    .experts-grid {
      display: flex;
      overflow-x: auto;
      gap: .75rem;
      padding: 0 1rem 1.5rem;      /* bottom gap for thumb-ease */
      margin-inline: 0;
      scroll-snap-type: x mandatory;
      scroll-padding-inline: 1rem;
      overscroll-behavior-x: contain;  /* prevents page pull-to-refresh */
      margin: 3rem 3rem 4em;
      overscroll-behavior: none;
      overflow-y: scroll !important;
    }

    /* each card already spans 2 track columns – that’s fine.
      make it snap and fill the grid cell */
    .expert-rect {
      flex: 0 0 clamp(65%, 70vw, 280px); /* width responsive to viewport */
      height: 160px;
      padding: 1rem;
      scroll-snap-align: center;
      display: flex;                     /* keep inner centring */
      align-items: center;
      justify-content: center;
    }

    .expert-rect:nth-of-type(n+5) { display: none; }

    /* image fills the card; show immediately (no FADE css) */
    .expert-img {
      position: static;
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    /* kill the initial 0-opacity from .fade-* classes */
    .fade-in, .fade-out { opacity: 1 !important; transform: none !important; }

    /* optional: hide empty spacing rectangles */
    .expert-rect:empty { display: none !important; }
  }

  @media (min-width: 768px) and (max-width: 1023px) {
    
    /* wrapper stays centred and never wider than 920 px */
    .aboutus-experts-section {
      margin-inline: auto;
      padding-inline: 1rem;
    }

    /* 8-column grid   →   words span all 8; rectangles span 4 */
    .experts-grid {
      grid-template-columns: repeat(8, 1fr);
      column-gap: 1rem;
      row-gap: 4rem;
      transform: none;                 /* drop the old scaleX */
    }

    /* headline words – full width and centred */
    .expert-word {
      grid-column: 1 / -1;             /* span entire row   */
      text-align: center;
      font-size: clamp(2.25rem, 4vw, 3rem);   /* ≈ 36-48 px */
      margin: 0;
    }

    /* rectangles – two across (4-col each) */
    .expert-rect {
      height: 130px;
      padding: 1.25rem;
    }

    /* images fill the trimmed rectangle */
    .expert-img {
      position: sticky;
      width: 100% !important;
      height: 100%;
      object-fit: contain;
    }
  }

  @media (min-width: 1024px) {
    .aboutus-experts-section {
      padding-block: clamp(3rem, 7vh, 6rem); 
      box-sizing: border-box; 
      margin-inline: auto;
    }

    .experts-grid {
      grid-template-rows: repeat(4, clamp(110px, 8.5vh, 120px));
      row-gap: clamp(3rem, 5vh, 8rem);
      column-gap: 2rem; 
      transform: none;  
    }

    .expert-word {
      font-size: clamp(3.25rem, 5vw, 8rem);  /* scales nicely 52-88 px */
    }

    .expert-rect { padding: 1.75rem; }
    .expert-img  { height: auto; }
  }
.mission-bg {
        background-color: #E9F1FB; /* soft beige like the mockup */
      }

      .mission-inner {
        display: flex;
        gap: 2rem; /* Optional: Adds space between left and right sections */
        flex-wrap: wrap; /* Ensure items wrap on smaller screens */
      }

      .mission-content {
        flex: 2; /* Left content takes up 2 parts of the space */
        max-width: 100%;
        padding-right: 2rem; /* Optional: Add space to the right side */
      }

      .mission-visual {
        display: flex;
        flex-direction: column;
        gap: 1rem; /* Optional: Adds space between each image card */
      }

     .mission-grid-item {
    overflow: hidden;
    width: 100%;
    height: auto;
    background: #fff;
    border: 0;
    border-radius: 20px;
    box-shadow: 0 2px 6px #1118270d, 0 14px 30px #11182714;
    padding: 16px;
    display: grid;
    justify-items: center;
    align-items: center;
    position: relative;
    transition: transform .3s ease, box-shadow .3s ease; /* Adjusted transition timing */
  }

  .mission-grid-item img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
    transition: opacity .3s ease; /* Smooth transition for image opacity */
  }

  /* The overlay background that covers the card on hover */
  .mission-grid-item::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    transition: opacity 0.3s ease; /* Smooth transition for the overlay */
    border-radius: 20px;
  }

  .mission-grid-item:hover {
    transform: scale(0.95); /* Shrink the card */
  }

  .mission-grid-item:hover img {
    opacity: 0.3; /* Reduce opacity of the image on hover */
  }

  /* Show the overlay and reveal content on hover */
  .mission-grid-item:hover::after {
    opacity: 1; /* Show the overlay */
  }

  /* Content inside the card that shows on hover */
  .mission-grid-item:hover .mission-content-overlay {
    opacity: 1; /* Show the content overlay */
    transform: translateY(0); /* Reset the vertical position */
  }

  /* Content overlay with text */
  .mission-content-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    color: #fff;
    text-align: center;
    padding: 0;
    font-size: 1rem;
    transition: opacity .3s ease, transform .3s ease;
    pointer-events: none;
  }

   .mission-content-overlay h3 {
    font-size: 3rem;
   }

  .mission-grid-item:hover .mission-content-overlay {
    opacity: 1;
    transform: translate(-50%, -50%);
  }


    /* Content overlay with text */
    .mission-content-overlay {
      position: absolute;
      top: 50%; /* Center vertically */
      left: 50%; /* Center horizontally */
      transform: translate(-50%, -50%); /* Center the content */
      opacity: 0; /* Initially hidden */
      color: #fff; /* White text */
      text-align: center;
      padding: 20px;
      font-size: 1rem;
      transition: opacity .3s ease, transform .3s ease;
      pointer-events: none; /* Prevent interaction with text when hidden */
    }

    /* Ensure content overlays are centered and visible when hovering */
    .mission-grid-item:hover .mission-content-overlay {
      opacity: 1; /* Show overlay */
      transform: translate(-50%, -50%); /* Ensure the content is centered */
    }

    .mission-grid-item img {
      max-width: 100%; /* Let the image scale naturally */
      height: auto;
      object-fit: contain;
    }

    .mission-content {
      max-width: 50%;
      margin-top: 0;
    }

    .mission-label {
      font-size: 0.85rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      font-weight: 600;
      margin-bottom: 0.75rem;
    }

    .mission-title {
      font-size: 3rem;
      font-weight: 700;
      margin-bottom: 1.25rem;
    }

    .mission-text {
      font-size: 1rem;
      line-height: 1.7;
      margin-bottom: 1.75rem;
    }

    .mission-button {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.7rem 1.4rem;
      border-radius: 9999px;
      border: 1px solid #000;
      background: transparent;
      font-size: 0.95rem;
      font-weight: 600;
      cursor: pointer;
    }

    .mission-button-icon img {
      width: 16px;
      height: auto;
      display: block;
    }

    .mission-visual {
      flex: 1;
    }

    .mission-grid {
      display: grid;
      grid-template-columns: 1fr 1fr; /* Adjust the minimum width */
      gap: 20px; /* Reduced space between the cards */
      place-items: center;
    }

    .mission-grid-item {
      overflow: hidden;
      width: 100%;
      height: 100%; /* Let the height be determined by content */
      background: #fff;
      border: 0;
      border-radius: 20px;
      box-shadow: 0 2px 6px #1118270d, 0 14px 30px #11182714;
      padding: 16px; /* Adjust padding to make the cards smaller */
      display: grid;
      justify-items: center;
      align-items: center;
      transition: transform .18s ease, box-shadow .18s ease;
    }

    .mission-grid-item img {
      max-width: 100%; /* Let the image scale naturally */
      height: auto;
      object-fit: contain;
    }

      /* Mobile view adjustments */
      @media (max-width: 767px) {
        .mission-inner {
          flex-direction: column; /* Stack content vertically on small screens */
          gap: 2rem; /* Adds some space between the sections */
        }

        .mission-content {
          padding-right: 0; /* Remove right padding on mobile */
          text-align: center; /* Center align text for mobile */
        }

        .mission-visual {
          flex: 1;
          margin-top: 2rem; /* Adds space above the visual section */
        }

        .mission-title {
          font-size: 2rem; /* Smaller title size on mobile */
        }

        .mission-text {
          font-size: 1rem;
        }

        .mission-grid {
          grid-template-columns: 1fr; /* Stack cards vertically on smaller screens */
          gap: 15px; /* Reduced gap on smaller screens */
        }

        .mission-grid-item {
          padding: 12px; /* Adjust padding for smaller screens */
        }
      }

      /* Tablet view (768px and up) */
      @media (min-width: 768px) {
        .mission-inner {
          flex-direction: row;
          align-items: start;
        }

        .mission-content {
          flex: 2;
        }

        .mission-title {
          font-size: 2.4rem;
        }

        .mission-text {
          font-size: 1.05rem;
        }
      }

      /* Desktop view (1024px and up) */
      @media (min-width: 1024px) {
        .mission-title {
          font-size: 2.8rem;
        }

        .mission-text {
          font-size: 1.1rem;
        }
      }
.partner-carousel-wrapper {
    background-color: #fff;
    padding-inline: 2.5rem 1rem;
    border-radius: 0.5rem;
    max-width: 100%;
    overflow: hidden;
  }

  .partner-carousel {
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    display: flex;
    direction: ltr !important;
  }

  .partner-logos-container {
    display: flex;
    gap: 8rem;
    flex-wrap: nowrap;
    will-change: transform;
    margin-bottom: 4rem;
  }

  .partner-logo {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .partner-logo img {
    max-height: 58px;
    max-width: 58px;
    object-fit: contain;
  }
.value-highlight{color:#f79009;}

  .value-item{
    display:grid;
    grid-template-columns:1fr auto; 
    gap: 0;
  }

  .value-item:last-child {
    height: auto;
  }

  .timeline-line {
    transform: scaleY(0);
    transition: transform 0.3s ease;
  }
      
  .value-left,
  .value-center,
  .value-right {
    width: 100%;
    text-align: start;
  }

  /* Reset text alignment */
  .value-left { text-align: start; }


  /* center column */
  .value-center{
    position:relative;
    width:32px;
    display:flex;
    justify-content:center;
    grid-row: 1 / 3;
    margin-inline-end: 15px;
  }
  .timeline-dot{
    width:20px;
    height:20px;
    border:2px solid #d1d5db;               /* gray-300 */
    border-radius:9999px;
    background:#fff;
    box-sizing:border-box;
    z-index:2;
  }
  .timeline-dot.active{
    background:#f79009;
    border-color:#f79009;
  }
  /* vertical line – rendered only when `.has-line` is on parent */
  .timeline-line{
    position:absolute;
    top:20px;                               /* just under the dot */
    inset-inline-start:50%;transform:translateX(-50%);
    width:2px;
    height:calc(100% - 20px);
    background:#e5e7eb;                     /* gray-200 */
  }
  .timeline-line.active{background:#f79009;}

  /* ----- text styles ----- */
  .value-label{
    background:#fff3db; color:#f79009;
    font-size:1.125rem;   /* text-lg */
    font-weight:500;
    padding:.5rem 1.5rem;
    border-radius:9999px;
    display:inline-block;
    margin-bottom:.5rem;
    min-width: 120px;
    text-align: center;
  }
  .value-title{
    font-size:1rem; font-weight:700; color:#000;
  }
  .value-description{
    font-size:.95rem; line-height:1.6; color:#374151; /* gray-700 */
  }

  /* ---------- sm ≥ 640 px ---------- */
  @media(min-width:640px){
    .aboutus-value-wrapper{padding:3rem 2rem;}
    .value-heading{font-size:2.25rem;}      /* text-4xl */
    .value-item{grid-template-columns:1fr 32px 1fr; height: 50vh; gap: 20px;} /* left | center | right */
    .value-title{font-size:1.25rem;}        /* text-xl */
    .value-description{font-size:1rem;}
    .value-center{ grid-row: auto; margin-inline-start: 0; }
  }

  /* ---------- lg ≥ 1024 px ---------- */
  @media(min-width:1024px){
    .value-heading{font-size:5rem;  margin:0 0 5rem 0;}         /* text-5xl */
    .value-item{height: 40vh;gap: 20px;} /* left | center | right */
    .value-title{font-size:2rem;}
    .value-description{font-size:1.35rem;}
    .value-left { text-align: end; }
    .value-center{ grid-row: auto; margin-inline-start: 0; }
  }
.welbewust-faq-item {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    text-align: start;
  }

  .welbewust-faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 0;
    cursor: pointer;
    list-style: none;
    font-size: 18px;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.61);
  }
  
  .welbewust-faq-question::-webkit-details-marker {
    display: none; /* Hides marker in Safari */
  }

  .welbewust-faq-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    margin-inline-start: 1rem;
    transition: transform 0.3s ease;
    color: rgba(0, 0, 0, 0.61);
  }

  .welbewust-faq-item[open] .welbewust-faq-question .welbewust-faq-icon {
    transform: rotate(180deg);
  }

  .welbewust-faq-answer {
    padding: 0 0 1.5rem 0;
  }
.supplements-main-title {
    /* Guideline: H1 */
    font-family: Helvetica, sans-serif;
    font-size: 24px;
    color: #0000009c;
    line-height: 1.16;
    font-weight: bold;
    text-align: center;
    margin-bottom: 40px;
  }

  .supplements-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
  }

  .card-content-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 22px;
    color: white;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 10%, rgba(0, 0, 0, 0) 70%);
    box-sizing: border-box;
  }

  .card-text-wrapper {
    flex-grow: 1;
    margin-right: 15px;
  }

  .supplement-title {
    /* Guideline: H3 */
    margin: 0 0 8px 0;
    font-family: Helvetica, sans-serif;
    font-size: 22px;
    font-weight: bold;
    color: #ffffff;
    line-height: 1.2;
  }

  .supplement-description {
    /* Guideline: Paragraph */
    font-family: Helvetica, sans-serif;
    font-size: 16px;
    font-weight: normal;
    display: block;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.5;
    margin: 0;
  }

  .add-button {
    width: 48px;
    height: 48px;
    background-color: #ff852e; /* Guideline: Button Background */
    border: none;
    border-radius: 50%;
    color: #ffffff;
    font-size: 2.2rem;
    font-weight: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: background-color 0.3s ease, transform 0.3s ease;
    flex-shrink: 0;
    align-self: flex-end;
  }

  .supplement-card:hover .add-button {
    background-color: #0e3e77; /* Guideline: Button Hover Background */
    transform: scale(1.1);
  }

  /* --- Placeholder Styles --- */
  .placeholder {
    background-color: #e9e9e9;
  }

  /* --- Responsive Adjustments --- */
  @media (max-width: 1200px) {
    .supplements-grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  @media (max-width: 768px) {
    .supplements-main-title { font-size: 34px; } /* Adjusted H1 for mobile */
    .supplements-grid { grid-template-columns: repeat(2, 1fr); gap: 15px; }
    .supplement-title { font-size: 20px; } /* Adjusted H3 for mobile */
    .supplement-description { font-size: 15px; }
  }
  @media (max-width: 480px) {
    .supplements-grid { grid-template-columns: 1fr; }
  }
.corehr-hero {
    position: relative;
    height: 50vh;
    overflow: hidden;
  }
  .corehr-shell{
    max-width: 1250px;
    margin: 0 auto;
    border-radius: 28px;
    overflow: hidden;
    min-height: 60vh;
    justify-content: center;
    display: flex;
    flex-direction: column;
    padding: 6% 2%;
  }

  /* Avatar orbits – positioned left/right of center */
  .avatar-orbit{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: clamp(220px, 22vw, 320px);
    aspect-ratio: 1 / 1;
    display: grid;
    place-items: center;
    z-index: 1;
    pointer-events: none;
    border-radius: 24px;
  }
  .avatar-orbit.left{  inset-inline-start: 5%;  }
  .avatar-orbit.right{ inset-inline-end: 5%; }

  html[dir="rtl"] .avatar-orbit.left{  inset-inline-start: -5%;  }
  html[dir="rtl"] .avatar-orbit.right{ inset-inline-end: 15%; }

  .orbit-card{
    position: absolute;
    top: 50%;
    inset-inline-start: 50%;
    width: clamp(110px, 11vw, 150px);
    aspect-ratio: 4 / 5;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 14px 30px rgba(0,0,0,.12);
    overflow: hidden;
    transform: translate(-50%,-50%);
    transition: transform 800ms cubic-bezier(.2,.7,.2,1);
    will-change: transform;
  }
  .orbit-img,
  .orbit-card img,
  .avatar-ph{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    border-radius:16px;
  }
  .orbit-card::after{
    content:"";
    position:absolute; inset-inline-start:10px; inset-inline-end:10px; bottom:10px; height:34%;
    border-bottom-left-radius:16px; border-bottom-right-radius:16px;
    background: linear-gradient(0deg, rgba(255,255,255,.88) 0%, rgba(255,255,255,0) 70%);
    pointer-events:none;
  }
  .avatar-ph{ background: linear-gradient(135deg,#e5e7eb,#d1d5db); }


  /* Center column */
  .corehr-center{
    position: relative;
    z-index: 2;
    max-width: 100%;
    margin: 0 auto;
    text-align: center;
  }

  .icon-circle{
    width:64px;height:64px;margin:0 auto 16px;
    display:grid;place-items:center;
    color:#8b5cf6;
    background:#fff;
    border-radius:50%;
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
  }

  .corehr-sub{
    margin: 1.5rem auto;
    max-width: 40vw;
  }


  /* Avatar stacks */
  .avatar-stack{
    position: absolute;
    top: 0;
    width: 150px;
    display: grid;
    align-content: center;
    gap: clamp(14px, 2.4vw, 22px);
    z-index: 1;
    pointer-events: none;
  }

  .avatar-stack.left{ inset-inline-start: 0; }
  .avatar-stack.right{ inset-inline-end: 0; }

  .avatar-card{
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 14px 30px rgba(0,0,0,.12);
    padding: 6px;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    display: grid;
    place-items: center;
  }

  .avatar-card img, .avatar-ph{
    width:100%; height:100%; object-fit: cover; border-radius: 16px; display:block; position:relative;
  }

  .avatar-card::after{
    content:"";
    position:absolute; inset-inline-start:10px; inset-inline-end:10px; bottom:10px; height:35%;
    pointer-events:none;
    border-bottom-left-radius: 16px; border-bottom-right-radius: 16px;
    background: linear-gradient(0deg, rgba(255,255,255,.85) 0%, rgba(255,255,255,0) 70%);
    mix-blend-mode: normal;
  }

  .avatar-ph{
    background: linear-gradient(135deg,#e5e7eb,#d1d5db);
  }

  @media (max-width: 920px){
    .avatar-orbit{ display:none; }
  }

  @media (max-width: 920px){
    .avatar-stack{ display:none; }
  }

  @media (min-width: 576px) and (max-width: 991px) {
    .corehr-shell {
      max-width: 1250px;
      margin: 0 auto;
      border-radius: 28px;
      overflow: hidden;
      min-height: 45vh;
      justify-content: center;
      display: flex;
      flex-direction: column;
      padding: 0;
    }
    .corehr-hero {
      height: 45vh;
    }
  }

  @media (max-width: 576px) {
    .corehr-hero {
      height: 50vh;
    }
    .corehr-shell{
      min-height: auto;
    }
    .corehr-sub{
      max-width: 90%;
    }
  }
.article-health-carousel { overflow-x: clip; background-color:#F6F9FC; margin:0 auto; }

  /* Shell positions the overlay buttons like before (left/right of track) */
  .article-carousel-shell { position: relative; }

  /* Track */
  .article-carousel-track{
    display:flex; overflow-x:auto; gap:1.25rem; scroll-snap-type:x mandatory; scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch; scrollbar-width:none; -ms-overflow-style:none;
    margin:2rem 0; padding:2rem 0; max-width:1250px; overflow-anchor:none;
  }
  .article-carousel-track::-webkit-scrollbar{ display:none; }

  @media (min-width: 1920px) and (max-width: 2559px){
    .article-carousel-track{ max-width:1650px; }
  }
  @media (min-width: 2560px){
    .article-carousel-track{ max-width:2133.3px; }
  }

  /* Cards */
  .article-card{
    flex:0 0 auto; width:560px; max-width:560px; background:#fff; border-radius:20px; overflow:hidden;
    box-shadow:0 8px 6px rgba(0,0,0,.02); display:flex; flex-direction:column; justify-content:flex-start;
    min-height:380px; position:relative; scroll-snap-align:start;
  }
  .article-image{ display:block; width:100%; height:300px; object-fit:cover; }
  .article-content{ display:flex; flex-direction:column; gap:.75rem; }
  .cta-btn{ position:absolute !important; bottom:8%; }

  /* Overlay prev/next (like before) */
  .article-carousel-btn.overlay{
    position:absolute; top:50%; transform:translateY(-50%);
    width:44px; height:44px; border-radius:999px; border:1px solid #e5e7eb; background:#fff;
    display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
    transition:background .2s ease, transform .08s ease, box-shadow .2s ease; z-index:2;
  }
  .article-carousel-btn.overlay:hover{ background:#f3f4f6; transform:translateY(-51%); box-shadow:0 6px 14px rgba(2,6,23,.08); }
  .article-carousel-btn.overlay.left{ left:-5.25rem; }
  .article-carousel-btn.overlay.right{ right:-.25rem; }
  .article-carousel-btn[disabled]{ opacity:.4; pointer-events:none; box-shadow:none; }

  /* Typography + bullets */
  .article-title{ margin:0; font-weight:800; color:#565656; font-size:20px; line-height:1.7; }
  .article-title a{ color:inherit; text-decoration:none; }
  .article-title a:hover{ text-decoration:underline; }
  .article-bullets{ list-style:none; padding:0; display:flex; flex-direction:column; gap:.6rem; text-align:start; }
  .article-bullet{ position:relative; padding-inline-start:2rem; padding-top:.75rem; color:#606060; font-size:14px; line-height:1.6; }
  .article-bullet:before{ content:'✓'; position:absolute; inset-inline-start:0; top:0; line-height:1.2; font-size:1.05em; color:#FF8A3D; }

  /* Responsive */
  @media (max-width:1024px){ .article-card{ width:84vw; max-width:84vw; } }
  @media (max-width:900px){
    .article-carousel-track{ margin-inline-start:1rem; padding-inline-end:1rem; }
    .article-image{ height:220px; }
  }
  @media (max-width:576px){
    .article-carousel-btn.overlay{ display:none; } /* hide overlay buttons on small screens */
  }
.sleep-tabs{
      display:grid;
      grid-template-columns: repeat(2, minmax(0,1fr));
      gap:1rem;
      margin-bottom: 1.5rem;
    }
    @media (min-width: 768px){ .sleep-tabs{ grid-template-columns: repeat(3, 1fr); } }
    @media (min-width: 1024px){ .sleep-tabs{ grid-template-columns: repeat(4, 1fr); } }
    @media (min-width: 1280px){ .sleep-tabs{ grid-template-columns: repeat(4, 1fr);max-width:95%; margin: 1rem auto; gap: 2rem 3rem; } }
    @media (max-width: 576px) { .welbewust-subheading { max-width: 95%;} }
    .sleep-pill{
      margin: 0;
      letter-spacing: .06em;
      text-transform: uppercase;
      font-size: 12px;
      color: #111;
      opacity: .4;
      padding: .4rem .8rem;
      border-radius: 999px;
      background: #fff;
      border: 1px solid rgba(0, 0, 0, .06);
      box-shadow: 0 6px 18px rgba(2, 6, 23, .04);
      text-decoration:none;
      display:flex;
      justify-content: center;
      align-items: center;
      width:100%;
      text-align:center;
      font-weight:600;
      transition: background .15s ease, color .15s ease, transform .06s ease;
    }
    .sleep-pill:hover{ background:#e5e7eb; opacity: 1; transform: scale(1.1) }
    .sleep-pill.is-initial{
      background: #ffffff;
      color:rgb(255, 132, 46);
      border-color: #ffedd5;
      box-shadow: 0 0 10px 5px rgba(255, 132, 46, 0.25);
      opacity:1;
    }

    .sleep-pill.is-active{
      background: #ffffff;
      color:rgb(255, 132, 46);
      border-color: #ffedd5;
      box-shadow: 0 0 10px 5px rgba(255, 132, 46, 0.25);
      opacity:1;
    }

    /* Panels */
    .sleep-panel{ display:none; }
    .sleep-panel.is-active{ display:block; }
    .sleep-panel[hidden]{ display:none !important; }

    .sleep-panel-head{ display:flex; align-items:center; gap:.75rem;}
    .sleep-icon{ width:1.5rem; height:1.5rem; }

    .sleep-panel-body{ color:#475569; font-size:1.0625rem; line-height:1.8; margin-bottom:1.25rem; }
    .sleep-panel-body p{
      display: inline-block;
      text-align: justify;
      font-size: 16px;
      color: rgba(0, 0, 0, 0.61);
      margin: 0;
     }

     /* --- Animation helpers (no external libs) --- */
  .sleep-animate { will-change: transform, opacity; transform-origin: 50% 60%; }

  @media (prefers-reduced-motion: reduce) {
    .sleep-pill,
    .sleep-panel,
    .sleep-animate { animation: none !important; transition: none !important; }
  }
    .sleep-columns{ display:grid; gap:2rem; margin-top: 6rem; }
    @media (min-width: 768px){ .sleep-columns{ grid-template-columns: 1fr 1fr; } }

    .sleep-col-title{
      font-weight: 700;
      gap: 1rem;
      color: rgba(0, 0, 0, 0.61);
      margin: 0 0 12px;
      font-size: 20px;
      display: flex;
      align-items: center;
    }
    .sleep-col-ico{ width:2rem; height:2rem; color:#FF842E; }

    .sleep-list{ list-style:none; padding:0; margin:0; display:grid; gap:.5rem; color:#475569;margin-inline-start:2rem; }
    .sleep-list-item{
      display:flex;
      align-items:center;
      gap:.5rem;
      font-size: 14px;
      color: rgba(0, 0, 0, 0.61);
      text-align: start;
      margin: 0;
    }
    .sleep-check{ width:1.75rem; height:1.75rem; color:#FF842E; flex:0 0 auto;margin-top: 3px;}
    @media (max-width: 576px){ .sleep-columns{ margin-top: 4rem; } }
.cc-custom .collapsible-content-wrapper {
    padding: 6% 2%;
  }

  @media (min-width: 1920px) and (max-width: 2559px) {
    .cc-custom .collapsible-content-wrapper-narrow  {
      max-width: 1650px;
    }
  }

  @media (min-width: 2560px) {
    .cc-custom .collapsible-content-wrapper-narrow {
      max-width: 2133.3px;
    }
  }


  .cc-custom .collapsible-content__heading {
    font-size: 24px !important;
    font-weight: bold !important;
    color: #333 !important;  /* ← fixed */
  }

  .cc-custom .caption-with-letter-spacing {
    font-size: 12px;
    line-height: 1.8;
    font-weight: normal;
    color: #475569;
    text-align: center;
    letter-spacing: normal;
  }

  .cc-custom .accordion__title {
    font-size: 20px !important;
    font-weight: 500 !important;
    color: #333 !important;
  }

  .cc-custom .accordion__content.rte,
  .cc-custom .accordion__content.rte p {
    font-size: 16px;
    font-weight: normal;
    color: rgba(0,0,0,0.61);
    text-align: start;
  }

  .cc-custom .accordion details[open] > summary .icon-caret,
  .cc-custom .accordion summary .icon-caret {
    fill: rgba(0,0,0,0.61);
    color: rgba(0,0,0,0.61);
  }

  .cc-custom .accordion summary .icon-accordion {
    color: #75AEEA;
  }

  .cc-custom hr {
    margin: 0;
    border-color: rgba(0,0,0,0.1);
  }
.luxury-tabs-section {
    background-color: var(--color-bg);
    overflow-x: hidden;
    padding: 5% 0;
  }
  .luxury-tabs-section .page-width {
    max-width: 1250px;
    padding: 0 20px;
    margin: 0 auto;
  }

  .luxury-tabs-nav {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 2rem 6rem;
  }

  .luxury-nav-item {
    margin: 0;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: 12px;
    color: #111;
    opacity: .4;
    padding: .4rem .8rem;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .06);
    box-shadow: 0 6px 18px rgba(2, 6, 23, .04);
    text-decoration: none;
    display: inline-block;
    width: 100%;
    text-align: center;
    font-weight: 600;
    transition: background .15s, ease, color .15s, ease, transform .06s ease;
  }
  .luxury-nav-item:hover {
  background-color: #e4e9f0;
  border-color: #e4e9f0;
  color: var(--color-text);
  }
  .luxury-nav-item.is-active {
    background: #ffffff;
    color: rgb(255, 132, 46);
    border-color: #ffedd5;
    box-shadow: 0 0 10px 5px rgba(255, 132, 46, 0.25);
    opacity: 1;
  }

  .luxury-tabs-content {
  min-height: 300px;
  background-color: #ffffff;
  padding: 12px;
  }
  .luxury-content-description {
  display: inline-block;
  text-indent: 3.5rem;
  text-align: justify;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.61);
  margin: 0;
  }
  .luxury-content-description p { margin: 0 0 1em; }
  .luxury-content-description p:last-child { margin-bottom: 0; }
  .luxury-tabs-header { text-align: center; }
  .luxury-tabs-wrapper { display: flex; flex-direction: column; gap: 30px; }
  .luxury-content-panel { display: none; }
  .luxury-content-panel.is-active { display: block; }
  .luxury-approach-label { font-size: 12px; font-weight: bold; color: #333; margin: 0 0 20px; text-transform: uppercase; letter-spacing: 0.05em; text-align: center; }
  .luxury-approach-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 24px 30px;
    max-width: 1250px;
    margin: 0 auto;
  }
  .luxury-approach-item { display: flex; align-items: center; gap: 16px; }
  .luxury-approach-icon { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; border-radius: 12px; flex-shrink: 0; }
  .luxury-approach-icon img { width: 150px; object-fit: contain; }
  .luxury-approach-text { display: flex; flex-direction: column; }
  .luxury-approach-category {
    font-weight: 700;
    gap: 1rem;
    color: rgba(0, 0, 0, 0.61);
    margin: 0 0 12px;
    font-size: 18px;
    display: flex;
    align-items: center;
    text-align: start;
    margin: 0;
  }
  .luxury-approach-detail {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.61);
    text-align: start;
    margin: 0;
  }

  /* --- SCROLL ANIMATION STYLES --- */
  .luxury-scroll-animate {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  }
  .luxury-scroll-animate.in-view {
    opacity: 1;
    transform: translateY(0);
  }
  .luxury-scroll-delay-1 { transition-delay: 0.1s; }
  .luxury-scroll-delay-2 { transition-delay: 0.2s; }
  .luxury-scroll-delay-3 { transition-delay: 0.3s; }

  /* --- TAB CONTENT ANIMATION STYLES --- */
  .luxury-content-title, .luxury-content-description, .luxury-approach-wrapper {
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
  }
  .luxury-content-panel.is-active .luxury-content-title {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.1s;
  }
  .luxury-content-panel.is-active .luxury-content-description {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.2s;
  }
  .luxury-content-panel.is-active .luxury-approach-wrapper {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.3s;
  margin: 2rem 0;
  }
  @keyframes approachItemFadeUp {
  to { opacity: 1; transform: translateY(0); }
  }
  .luxury-approach-item {
  opacity: 0;
  transform: translateY(10px);
  }
  .luxury-content-panel.is-active .luxury-approach-item {
  animation: approachItemFadeUp 0.5s ease forwards;
  animation-delay: calc(0.4s + var(--item-index) * 0.08s);
  }

  @media (max-width: 992px) {
  .luxury-tabs-nav {
  grid-template-columns: repeat(3, 1fr); /* 3 columns on tablets */
  }
  .luxury-approach-grid {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
  }

  @media (max-width: 768px) {
    .luxury-tabs-section {
    padding: 10% 0;
    }
    .luxury-tabs-content {
    padding: 30px 20px;
    }
    .luxury-nav-item { font-size: 16px; padding: 12px 18px; }
    .luxury-tabs-nav {
    grid-template-columns: repeat(2, 1fr); /* 2 columns on mobile */
    }
    .luxury-approach-grid {
    grid-template-columns: 1fr;
    }
  }
/* --- General Section Layout --- */
  .immersive-wrapper {
    padding: 0; /* Full bleed section */
    
  }
  .immersive-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 70vh; /* Adjust as needed */
  }
  
  /* --- Image Panel --- */
  .immersive-image-panel {
    position: relative;
    overflow: hidden;
  }
  .immersive-image {
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures image covers the panel without distortion */
  }
  .immersive-placeholder {
      height: 100%;
  }

  /* --- Content Panel --- */
  .immersive-content-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6% 8%;
  }
  .immersive-content {
    max-width: 550px;
    width: 100%;
    text-align: start;
  }

  /* --- Discover List Styling --- */

  .immersive-content .discover-item {
    align-items: flex-start;
    margin-bottom: 2rem;
  }
  .immersive-content .discover-item:last-child {
    margin-bottom: 0;
  }
  .immersive-content .discover-icon {
    margin-inline-end: 20px;
    flex-shrink: 0;
    width: 30px;
  }
  .immersive-content .discover-icon i {
    font-size: 24px;
  }
  
  /* --- Responsive Design --- */
  @media (max-width: 992px) {
    .immersive-container {
      grid-template-columns: 1fr; /* Stack the panels on top of each other */
    }
    .immersive-image-panel {
      min-height: 40vh; /* Give the image a fixed height on mobile */
      order: 1;
    }
    .immersive-content-panel {
      order: 2;
      padding: 12% 8%; /* Increase padding for mobile */
    }
    .immersive-content {
        text-align: center;
    }
    .immersive-content .discover-item {
        text-align: start;
    }
  }
.wrapper { position: relative; width: 100%; }
  .wrapper::after {
    position: absolute; top: 0; inset-inline-start: 0; width: 100%; height: 100%;
    content: ""; background: linear-gradient(0deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.05) 50%);
    pointer-events: none;
  }

  .slider {
    display: flex;
    gap: var(--gap, 2rem);
    overflow: hidden;
    width: 100%;
  }

  .slider .item {
    flex-shrink: 0;
    width: var(--width, 30em);
    animation: scrollLoop var(--duration, 30s) linear infinite;
  }

  .welbewust-base { max-width: 60vw; }
  .exp-carousel-track { display: flex; gap: 2rem; padding-bottom: 1rem; overflow: hidden; }
  .carousel-item {
    position: relative; flex: 0 0 clamp(20rem, 60vw, 48em); max-width: clamp(18rem, 30vw, 30em);
    background: #fff; border-radius: 1rem; overflow: hidden;
    box-shadow: 0 .3rem 1rem rgba(0,0,0,.1); cursor: pointer; transition: transform .3s ease;
  }
  .carousel-item:focus-visible { outline: 2px dashed #555; }
  .carousel-item video { width: 100%; height: auto; display: block; }
  .expert-info {
    position: absolute; bottom: 1rem; inset-inline: 1rem auto;
    padding: 1rem; border-radius: .5rem; display: flex; flex-direction: column; align-items: flex-start;
  }
  .expert-info h3 { margin: 0; color: #fff; font-size: clamp(1rem, 1.2vw + .5rem, 1.75rem); font-weight: 400; line-height: 1.4; text-align: start; }
  .expert-info p { margin: .25rem 0 0; font-size: clamp(.875rem, 1vw + .25rem, 1.25rem); font-weight: 400; line-height: 1.5; color: #fff; text-align: start; }

  .video-modal {
    position: fixed; inset: 0; background: rgba(0,0,0,.7);
    display: flex; align-items: center; justify-content: center;
    z-index: 9999; transition: opacity .3s ease; opacity: 1;
  }
  .video-modal.hidden { opacity: 0; pointer-events: none; }
  .close-button {
    position: absolute; top: 1rem; inset-inline-end: 1rem;
    background: rgba(0,0,0,.6); color: #fff; border: 0; font-size: 2rem; line-height: 1;
    padding: .25em .5em; border-radius: .25em; cursor: pointer; z-index: 10000; transition: background .2s ease;
  }
  .close-button:hover { background: rgba(0,0,0,.8); }
  .modal-content { background: transparent; width: 90vw; max-height: none; position: relative; border-radius: 1rem; overflow: hidden; animation: scaleIn .3s ease-out; }
  .modal-content video { width: 100%; height: auto; max-width: 100%; max-height: 90vh; border-radius: 1rem; display: block; margin: 0 auto; }

  @media (max-width: 480px) { .carousel-item { flex: 0 0 85%; max-width: 48em; } }
  @media (min-width: 481px) and (max-width: 768px) { .carousel-item { flex: 0 0 60%; max-width: 48em; } }
  @media (min-width: 769px) and (max-width: 1279px) { .carousel-item { flex: 0 0 45%; max-width: 48em; } }
  @media (min-width: 1280px) { .carousel-item { flex: 0 0 auto; max-width: max-content; } }

  @keyframes scaleIn { from { transform: scale(.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
  @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
  .video-modal.fade-out { animation: fadeOut .3s ease forwards; }

  /* ✅ static keyframes using CSS variables instead of Liquid */
  @keyframes scrollLoop {
    0%   { transform: translateX(0); }
    100% { transform: translateX(calc(-1 * (var(--width, 30em) + var(--gap, 2rem)) * var(--qty, 1))); }
  }

  /* Pause on hover */
  .slider:hover .item { animation-play-state: paused !important; }
.foundation-card {
    margin-top: 4rem;
    background: linear-gradient(to bottom right, #eff6ff, #f5f3ff);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    padding: 5% 2%;
  }
  .wb-cta-link{
    display:inline-flex;
    align-items:center;
    text-decoration:none;
  }
  
  .foundation-icon {
    width:16px;
    height:16px;
    flex:0 0 16px;
  }
  
  /* Respect reduced motion */
  @media (prefers-reduced-motion: reduce){
    .wb-cta-btn{ transition:none }
    .wb-cta-link:hover .wb-cta-btn,
    .wb-cta-link:active .wb-cta-btn{ transform:none }
  }
.foundation-full-header .intro-subheading {
    font-size: 18px;
    font-weight: normal;
    color: #0000009c;
    line-height: 1.6;
  }
  .foundation-full-header .intro-subheading p {
    color: #0000009c;
    text-align: justify;
  }
  .foundation-full-header .eyebrow-text {
    font-size: 14px;
    font-weight: bold;
    color: #0E3E77;
    text-transform: uppercase;
    letter-spacing: 1px;
  }
  .foundation-full-header .feature-number {
    font-size: 24px;
    font-weight: bold;
    color: #0E3E77;
    line-height: 1;
  }
  .node-label {
    font-weight: bold;
    font-size: 16px;
    margin-top: 8px;
  }

  .intro-content-full {
      max-width: 800px;
      margin: 0 auto 5rem auto;
      text-align: center;
  }

  .grid-full-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 5rem;
  }

  .visual-column-full { min-height: 600px; }
  .network-visual-full { position: sticky; top: 150px; height: 500px; display: flex; justify-content: center; align-items: center; }
  .gut-node {
      position: relative; z-index: 10; display: flex; flex-direction: column; align-items: center; justify-content: center;
  }
  .gut-node-image-wrapper {
      width: 150px; height: 150px; border-radius: 50%;
      background: linear-gradient(145deg, #14498B, #0E3E77);
      padding: 10px; box-shadow: 0 20px 50px rgba(14, 62, 119, 0.25), inset 0 2px 4px rgba(255,255,255,0.1);
      display: flex; align-items: center; justify-content: center;
  }
  .gut-node .gut-icon-img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
  .orbit-path { position: absolute; width: 400px; height: 400px; border: 2px dashed #D0DFFF; border-radius: 50%; animation: rotate 60s linear infinite; }
  @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
  .orbit-node {
      position: absolute; display: flex; flex-direction: column; align-items: center;
      justify-content: center; width: 100px; height: 100px; border-radius: 50%;
      background: linear-gradient(145deg, #ffffff, #f0f4fa);
      box-shadow: 0 10px 30px rgba(20, 73, 139, 0.08);
      animation: rotate-reverse 60s linear infinite;
      transition: transform 0.3s ease;
  }
  @keyframes rotate-reverse { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }
  .orbit-node:hover { animation-play-state: paused; }
  .orbit-node .node-label { font-size: 14px; color: rgba(0, 0, 0, 0.61); margin-top: 5px; }
  .brain-node { top: -50px; left: 50%; transform: translateX(-50%); }
  .skin-node { top: 50%; left: -50px; transform: translateY(-50%); }
  .lungs-node { top: 50%; right: -50px; transform: translateY(-50%); }
  .node-icon {
      width: 64px; height: 64px; display: flex; align-items: center; justify-content: center;
      border-radius: 50%; background-color: #14498B; box-shadow: inset 0 3px 6px rgba(0,0,0,0.05);
  }
  .node-icon img, .node-icon svg { width: 36px; height: 36px; object-fit: contain; }
  .node-label.central-label { color: rgba(0, 0, 0, 0.61); }
  .content-column-full { display: flex; flex-direction: column; justify-content: center; }
  .feature-list { display: grid; gap: 2.5rem; }
  .feature-item { display: flex; align-items: flex-start; gap: 1.5rem; }
  .animate-on-scroll { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; }
  .animate-on-scroll.is-visible { opacity: 1; transform: translateY(0); }
  .feature-list .feature-item:nth-child(1) { transition-delay: 0.2s; }
  .feature-list .feature-item:nth-child(2) { transition-delay: 0.4s; }
  .feature-list .feature-item:nth-child(3) { transition-delay: 0.6s; }

  /* === END UPDATED BUTTON STYLES === */

  @media (max-width: 992px) {
      .grid-full-header { grid-template-columns: 1fr; gap: 4rem; }
      .visual-column-full { min-height: auto; }
      .network-visual-full { position: relative; top: auto; height: 450px; }
      .content-column-full { text-align: center; }
      .feature-item { flex-direction: column; align-items: center; gap: 1rem; }
      .foundation-full-header .feature-text p,
      .foundation-full-header .intro-subheading p { text-align: center; }
  }
  @media (max-width: 768px) {
      .foundation-full-header h2 { font-size: 22px; } /* Adjust H2 size for smaller screens */
  }
.welbewust-pv-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
  }

  /* Video Styles (Guideline Compliant Shadow) */
  .welbewust-pv-video-wrapper {
    width: 100%;
    height: 100%;
    min-height: 500px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(2, 6, 23, 0.04); /* Guideline Shadow */
  }

  .welbewust-pv-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .welbewust-pv-video-placeholder {
    width: 100%;
    height: 100%;
    min-height: 450px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #f0f0f0;
    border: 1px dashed #ccc;
    border-radius: 20px;
    color: #888;
  }

  .welbewust-pv-video-placeholder svg {
    width: 50px;
    height: 50px;
    fill: #aaa;
    margin-bottom: 1rem;
  }

  /* Content & Typography (Guideline Compliant) */
  .welbewust-pv-content-wrapper h2 {
    /* Guideline H2 */
    font-size: 24px;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.61);
    margin-top: 0;
    margin-bottom: 2.5rem;
    line-height: 1.3;
  }

  .welbewust-pv-steps-list {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }

  .welbewust-pv-step-item {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
  }

  .welbewust-pv-step-number {
    font-size: 16px;
    font-weight: bold;
    color: #ff852e;
    border: 2px solid #ff852e;
    border-radius: 50%;
    min-width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    margin-top: 4px;
  }

  .welbewust-pv-step-number span {
    display: block;
  }

  .welbewust-pv-step-item h3 {
    /* Guideline H3 */
    font-size: 22px;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.61);
    margin-top: 0;
    margin-bottom: 0.5em;
    line-height: 1.3;
  }

  .welbewust-pv-step-item p {
    /* Guideline Paragraph */
    font-size: 16px;
    font-weight: normal;
    color: rgba(0, 0, 0, 0.61);
    line-height: 1.7;
    margin: 0;
  }

  /* --- Animation Logic (Preserved) --- */
  .animate-on-scroll {
    opacity: 0;
    transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }

  .welbewust-pv-video-wrapper.animate-on-scroll {
    transform: translateX(-50px);
  }

  .welbewust-pv-content-wrapper .animate-on-scroll {
    transform: translateY(30px);
  }

  .welbewust-pv-content-wrapper h2.animate-on-scroll {
    transition-delay: 0.1s;
  }

  .welbewust-pv-step-item.animate-on-scroll:nth-of-type(1) { transition-delay: 0.2s; }
  .welbewust-pv-step-item.animate-on-scroll:nth-of-type(2) { transition-delay: 0.35s; }
  .welbewust-pv-step-item.animate-on-scroll:nth-of-type(3) { transition-delay: 0.5s; }
  .welbewust-pv-step-item.animate-on-scroll:nth-of-type(4) { transition-delay: 0.65s; }
  .welbewust-pv-step-item.animate-on-scroll:nth-of-type(5) { transition-delay: 0.8s; }
  .animate-on-scroll { transition-delay: 0.9s; }

  .welbewust-pv-step-number,
  .welbewust-pv-step-text-content {
    opacity: 0;
    transition: opacity 0.6s ease, transform 0.6s ease;
  }

  .welbewust-pv-step-number {
    transform: scale(0.5) rotate(-30deg);
  }

  .welbewust-pv-step-text-content {
    transform: translateX(-20px);
  }

  .welbewust-pv-step-item.is-visible .welbewust-pv-step-number,
  .welbewust-pv-step-item.is-visible .welbewust-pv-step-text-content {
    opacity: 1;
    transform: scale(1) rotate(0) translateX(0);
  }

  .welbewust-pv-step-item.is-visible .welbewust-pv-step-text-content {
    transition-delay: 0.2s;
  }

  .animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateX(0) translateY(0);
  }

  /* Responsive Adjustments */
  @media (max-width: 992px) {
    .welbewust-pv-grid {
      grid-template-columns: 1fr;
      gap: 3rem;
    }
  }
.clean-container{
    width:100%; max-width:1250px; margin:0 auto;
    color:#222; line-height:1.6;
    display:grid; gap:5rem; position:relative;
    height: auto;
  }
  @media (min-width:992px){
    .clean-container{ grid-template-columns:1.2fr .8fr; align-items:center; }
  }

  .image-content{ position:relative; }
  .image-pane{ position:relative; width:100%; min-height:540px; display:flex; align-items:center; justify-content:center;height: 500px; }
  .image-pane__img{ width:100%; height:100%; object-fit:cover; display:block;border-radius: 24px; }

  .orbit{
    --r: clamp(120px,40vmin,240px);
    --dot: 10px;
    position:absolute; inset:0; pointer-events:none;
    display:grid; place-items:center; animation:orbit-spin 28s linear infinite;
  }

  .orbit-dot{
    position:absolute; width:var(--dot); height:var(--dot); border-radius:3px;
    background:rgb(0 0 0 / 7%); box-shadow:0 1px 2px rgb(0 0 0 / .15);
    transform:
      rotate(calc(var(--i) * 360deg / var(--count)))
      translateX(var(--r))
      rotate(calc(var(--i) * -360deg / var(--count)));
  }

  .content{ position:relative; }
  .connector-svg{ position:absolute; inset:0; overflow:visible; pointer-events:none; z-index:0; }
  .connector-path{
    fill:none; stroke:#89909a; stroke-width:2; stroke-linecap:round;
    stroke-dasharray:4 10; opacity:0.55;transform: scale(-1,-1);
  }
  .connect-label{ z-index:1; position:relative; align-items:center; gap:.5rem; border-radius:999px;
    background:#fff; border:1px solid #89909a; box-shadow:0 6px 18px rgba(2,6,23,.05);
  }

  .what-wrapper__text, .why-wrapper__text{
    display:inline-block;
    padding:1.5rem 0;
    text-align:justify;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.61);
  }

  .tag-container{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.5rem; list-style:none; padding:0; }
  .tag-pill{ background:#f4f4f4; color:#333; padding:.4rem .9rem; border-radius:999px; font-size:12px; font-weight:500; transition:background-color .3s ease; }
  .tag-pill:hover{ background:#e8e8e8; }

  .what-wrapper__heading, .why-wrapper__heading{ display:inline; padding:6px 20px; font-size:20px; font-weight:bold; color:#0000009c; }

  @keyframes orbit-spin{ to{ transform:rotate(360deg); } }
  @media (prefers-reduced-motion: reduce){ .orbit{ animation:none; } }
  @media (max-width:991px){ .image-pane{ min-height:300px; margin-top:.5rem; } }

  .clean-container.wipe-host{ position:relative; isolation:isolate; }
  .wipe-overlay {
    position: relative;
    padding: 5% 2%;
    overflow: hidden;
  }
  .clean-container.wipe-host .wipe-overlay{
    position: absolute;
    inset-inline-start: 0;
    inset-inline-end: 0;
    bottom: -1px;
    width: 100%;
    height: 290px;
    display: block;
    transform: rotateX(180deg);
  }
  .clean-container.wipe-host > *:not(.wipe-overlay){ position:relative; z-index:1; }

  /* The concave wave (sticks to the bottom of the overlay) */
  .wipe-overlay__shape{
    position:absolute;
    inset-inline-start:0; inset-inline-end:0; bottom:-1px;
    width:100%;
    height:220px;
    display:block;
    transform: rotateX(180deg);
  }
  .wipe-overlay__shape path{
    fill:  #eaf1fb; /* set to your light blue page color */
  }
  @media (max-width: 767px){
    /* Layout */
    #inperson-1.clean-container{
      grid-template-columns: 1fr;
      gap: 2rem;
      padding: 0 16px;
    }

    /* Headings & copy */
    #inperson-1 .welbewust-heading2{
      font-size: 20px;
      margin-bottom: 1.25rem;
    }
    #inperson-1 .what-wrapper__heading,
    #inperson-1 .why-wrapper__heading{
      font-size: 16px;
      padding: 0;        /* smaller, no pill padding on mobile */
      display: block;
      margin-bottom: .25rem;
      text-decoration: underline;
    }

    #inperson-1 .connect-label{
      background: transparent !important;
      border: 0 !important;
      box-shadow: none !important;
      padding: 0 !important;
      z-index: auto;
    }
    /* Hide the dotted connector line SVG entirely */
    #inperson-1 .connector-svg{ display: none !important; }

    /* Copy */
    #inperson-1 .what-wrapper__text,
    #inperson-1 .why-wrapper__text{
      text-indent: 0;
      text-align: start;
      font-size: 15px;
      padding: .75rem 0;
    }

    /* Tags */
    #inperson-1 .tag-container{ gap: .4rem; }
    #inperson-1 .tag-pill{ font-size: 11px; padding: .35rem .7rem; }

    /* Button (full-width tap target) */
    #inperson-1 .what-wrapper__btn{
      width: 75%;
      padding: 8px 10px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 14px auto;
    }

    /* Image pane */
    #inperson-1 .image-pane{
      min-height: 220px;
      height: 220px;
      margin-top: 8px;
    }

    /* Remove ORBIT visuals entirely */
    #inperson-1 .orbit{ display: none !important; }

    /* Wave overlay spacing tweaks */
    #inperson-1 .wipe-overlay{ padding: 8% 0; }
    #inperson-1 .wipe-overlay__shape{ height: 120px; }
  }
.proven-benefits-section-final {
    background-color: #F9FAFB;
  }
  .proven-benefits-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }

  .benefit-card {
    background-color: #fff;
    padding: 40px;
    border-radius: 12px;
    position: relative;
    z-index: 1;
    border: 1px solid #0000000F;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
  }

  .benefit-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 0 40px #FF852E20;
  }

  /* Curtain Reveal Animation */
  .benefit-card-content { position: relative; overflow: hidden; }
  .benefit-card-content::after {
    content: ''; position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    background: #fff;
    transform-origin: bottom;
    transition: transform 1s cubic-bezier(0.23, 1, 0.32, 1);
  }
  .proven-benefits-section-final.is-visible .benefit-card.animated-item .benefit-card-content::after {
    transform: scaleY(0);
  }

  .benefit-card .benefit-content-wrapper li {
    font-size: 16px;
    font-weight: normal;
    line-height: 1.7;
    color: rgba(0,0,0,0.61);
    padding-left: 25px;
    position: relative;
    margin-bottom: 15px;
  }
  .benefit-card .benefit-content-wrapper li:last-child {
    margin-bottom: 0;
  }
  .benefit-card .benefit-content-wrapper li::before {
    content: '✓'; position: absolute; left: 0; top: 2px;
    color: #75AEEA;
    font-weight: bold;
  }

    .benefit-card .read-more {
      display: inline-block; position: relative; margin-top: 20px;
      font-size: 14px;
      font-weight: normal;
      color: #FF852E;
      text-decoration: none; padding-bottom: 5px;
    }
    .benefit-card .read-more::after {
      content: ''; position: absolute; width: 0; height: 1.5px;
      display: block; margin-top: 2px; right: 0;
      background: #FF852E;
      transition: width 0.4s ease;
    }
    .benefit-card .read-more:hover::after { width: 100%; left: 0; }

    /* Staggered Animations */
    .reveal-item { opacity: 0; transform: translateY(10px); transition: opacity 0.6s ease 0.4s, transform 0.6s ease 0.4s; }
    .proven-benefits-section-final.is-visible .benefit-card.animated-item .reveal-item { opacity: 1; transform: translateY(0); }
    .animated-item { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; }
    .proven-benefits-section-final.is-visible .animated-item { opacity: 1; transform: translateY(0); }

    /* Responsive */
    @media (max-width: 768px) { .proven-benefits-grid { grid-template-columns: 1fr; } }
/* --- H2 Style --- */
  .health-info-header { text-align: center; }

  .guide-divider {
    position: relative;
    height: 1px;
    width: 100%;
    margin: 60px auto;
    background-color: rgba(0,0,0, .06);
  }
  .guide-divider .icon-wrapper {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 40px; height: 40px;
    border-radius: 50%;
    background-color: #F9FAFB;
    display: flex; align-items: center; justify-content: center;
  }
  .icon-wrapper .icon { width: 24px; height: 24px; color: #75AEEA; }
  .icon-wrapper .icon svg { width: 100%; height: 100%; }

  /* --- H3 Style for Subsections --- */
  .subsection { text-align: center; }

  /* --- Paragraph Style for two-column list --- */
  .subsection-content.two-col-list ul {
    list-style: none; padding: 0; column-count: 2; column-gap: 40px; text-align: left;
    max-width: 600px;
    margin: 0 auto;
  }
  .subsection-content li {
    margin-bottom: 12px;
    font-size: 16px;
    color: rgba(0,0,0,0.61);
    line-height: 1.7;
    -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid;
  }

  .subsection-content.two-col-grid { display: grid; grid-template-columns: 1fr; gap: 40px; text-align: center; }


  /* --- Paragraph Style --- */
  .subsection-content .content-wrapper p,
  .subsection-content .content-wrapper strong {
    font-size: 16px;
    font-weight: normal;
    color: rgba(0,0,0,0.61);
    line-height: 1.7;
    margin: 0;
  }
  .subsection-content .content-wrapper strong { font-weight: bold; }

  /* Responsive */
  @media (max-width: 768px) {
    .subsection-content.two-col-list ul { column-count: 1; text-align: center; }
  }
/* --- Header Styles --- */
  .benefits-list-header {
    text-align: center;
    margin-bottom: 70px; /* Increased spacing between header and list */
  }

  /* --- Grid for Benefit Items --- */
  .benefits-list-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4rem 2rem; /* Vertical and horizontal gap */
  }

  /* --- Individual Benefit Item Styles --- */
  .benefit-item {
    display: grid;
    grid-template-columns: 1fr; /* Mobile-first: single column */
    gap: 1.5rem;
    align-items: center;
  }

  .benefit-item-description {
    text-align: start; /* Default alignment */
  }
  .benefit-item-description p {
    margin: 0;
  }

  /* --- Responsive Desktop Layout --- */
  @media (min-width: 768px) {
    .benefit-item {
      /* 2-column layout for each benefit on desktop */
      grid-template-columns: 0.8fr 2fr; /* Adjust ratio as needed */
      gap: 3rem;
      position: relative;
    }

    /* Vertical Separator Line */
    .benefit-item::before {
      content: '';
      position: absolute;
      top: 5%;
      bottom: 5%;
      left: calc(0.8fr + 1.5rem); /* Position between columns */
      transform: translateX(-50%);
      width: 1px;
      background-color: rgba(0,0,0,0.1);
    }
  }
.ingredients-benefits-card {
    background-color: #fff;
    padding: 50px;
    border-radius: 20px;
    border: 1px solid #EAEAEA;
    box-shadow: 0 10px 40px rgba(0,0,0,0.03);
  }

  .ingredients-benefits-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 50px;
    align-items: start;
  }

  .ingredient-item, .benefits-list li {
    font-size: 16px;
    font-weight: normal;
    color: rgba(0, 0, 0, 0.61);
    line-height: 1.7;
  }

  .ingredient-item {
    display: flex;
    justify-content: space-between;
    padding: 15px 0;
    border-bottom: 1px solid #F0F0F0;
  }
  .ingredient-item:last-child {
    border-bottom: none;
  }


  .ingredient-value {
    font-weight: 500;
  }

  /* Pills / Tags Style */
  .trust-badges-final {
    display: flex;
    justify-content: flex-start; /* Aligned to left */
    gap: 15px;
    margin-top: 30px;
  }
  .badge-item-final {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: normal;
    color: #111111;
    margin: 0;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, .06);
    box-shadow: 0 6px 18px rgba(2, 6, 23, 0.04);
    background: #fff;
  }
  .badge-item-final .badge-icon {
    width: 16px; height: 16px;
  }
  .badge-item-final .badge-icon svg {
    stroke: currentColor;
    width: 100%;
    height: 100%;
  }

  .benefits-list li {
    padding-left: 28px;
    position: relative;
    margin-bottom: 12px;
  }
  .benefits-list li::before {
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='3' stroke='%233B82F6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M5 13l4 4L19 7' /%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    left: 0;
    top: 5px;
    width: 18px;
    height: 18px;
  }

  @media (max-width: 768px) {
    .ingredients-benefits-grid { grid-template-columns: 1fr; }
    .trust-badges-final { flex-wrap: wrap; }
  }
.reviews-header p {
    font-size: 20px;
    font-weight: normal;
    color: #334155;
    line-height: 1.7;
    max-width: 1100px;
    margin: 0 auto 50px;
  }

  /* Marquee */
  .reviews-marquee {
    display: flex;
    width: max-content;
    animation: reviews-marquee-scroll 40s linear infinite;
  }
  .reviews-marquee:hover { animation-play-state: paused; }

  @keyframes reviews-marquee-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }

  /* Review card */
  .review-author-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .review-author .verified {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    font-weight: normal;
    color: #475569;
  }

  .star-rating {
    display: flex;
    gap: 3px;
    color: var(--star, #f5a623);
  }
  .star-rating .icon-star { width: 18px; height: 18px; }
.science-rooted-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 60px;
    align-items: center;
  }

  /* --- Image Column --- */
  .image-column {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 50px -15px rgba(0,0,0,0.15);
    aspect-ratio: 4 / 5;
    background-color: #333;
  }
  .image-column img {
    display: block; width: 100%; height: 100%; object-fit: cover;
  }

  /* Pills / Tags on Image */
  .features-overlay {
    position: absolute; top: 0; inset-inline-start: 0; width: 100%; height: 100%; z-index: 2;
  }
  .mg-feature-item {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    font-size: 12px; font-weight: normal; color: #000;
    background-color: #fff;
    padding: 8px 16px; border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.15);
  }
  /* Positions for the four badges */
  #badge-1 { top: 8%; inset-inline-end: 10%; } /* Lab Tested */
  #badge-2 { top: 15%; inset-inline-start: 20%; } /* High Absorption */
  #badge-3 { top: 38%; inset-inline-end: 12%; } /* No Fillers */
  #badge-4 { bottom: 10%; inset-inline-start: 20%; } /* Gentle on Stomach */


  /* --- Text Column --- */
  .description-item {
    margin-bottom: 25px; /* Added slightly more space */
  }
  .description-item:last-child {
    margin-bottom: 0;
  }

  /* Paragraph Style */
  .description-item p strong {
    font-weight: bold; color: #000000;
    display: block; /* Ensures title is on its own line */
    margin-bottom: 8px;
  }

  @media (max-width: 990px) {
    .science-rooted-grid {
      grid-template-columns: 1fr; /* Stack into a single column */
      gap: 40px;
    }
    .text-column { text-align: start; } /* Changed to left on mobile for readability */
  }
.related-products-section {
    /* pulled from inline style as --color-bg; fallback provided here */
    --color-card-subtext: hsla(0, 0%, 100%, 0.8);
    background-color: var(--color-bg, #F8F9FA);
  }

  .related-products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
  }

  .product-card-wrapper {
    position: relative;
    display: block;
    border-radius: 20px;
    overflow: hidden;
    text-decoration: none;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s ease;
  }

  .product-card-wrapper:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  }

  .product-card {
    background-size: cover;
    background-position: center;
    aspect-ratio: 3 / 4;
    position: relative;
    z-index: 1;
    padding: 25px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: #fff;
  }

  .product-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 60%);
    z-index: -1;
  }

  .product-card-title {
    font-size: 22px;
    font-weight: bold;
    line-height: 1.2;
    margin: 0;
    color: #fff;
  }

  .product-card-description {
    font-size: 14px;
    font-weight: normal;
    color: var(--color-card-subtext);
    line-height: 1.6;
    margin-top: 10px;
  }

  .product-card-button {
    position: absolute;
    bottom: 20px;
    inset-inline-end: 20px;
    width: 48px;
    height: 48px;
    background-color: #ff852e;
    color: #fff;
    font-size: 28px;
    line-height: 1;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.3s ease;
    z-index: 2;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  }

  .product-card-wrapper:hover .product-card-button {
    opacity: 1;
    transform: scale(1);
  }

  .product-card-button:hover {
    background-color: #0e3e77;
    transform: scale(1.1);
  }

  .product-card-button.is-unavailable {
    opacity: 0;
    background-color: #ff852e;
  }

  .product-card-wrapper:hover .product-card-button.is-unavailable {
    opacity: 0.6;
    transform: scale(1);
  }

  .product-card-button.is-unavailable:hover {
    background-color: #ff852e;
    transform: scale(1);
  }

  @media (max-width: 990px) {
    .related-products-grid { grid-template-columns: repeat(2, 1fr); }
  }

  @media (max-width: 768px) {
    .related-products-grid {
      display: flex;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      gap: 20px;
      padding: 0 2% 15px;
      margin: 0 -2%;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }
    .related-products-grid::-webkit-scrollbar { display: none; }
    .product-card-wrapper { flex: 0 0 75%; scroll-snap-align: start; }
    .product-card-wrapper:hover { transform: none; box-shadow: none; }
    .product-card-button { opacity: 1; transform: scale(1); }
    .product-card-button.is-unavailable { opacity: 0.6; }
  }
.timing-trio {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 80px;
  }
  .timing-card {
    background-color: #fff;
    padding: 35px;
    border-radius: 12px;
    text-align: center;
    border: 1px solid rgba(0,0,0, .06);
    box-shadow: 0 6px 18px rgba(2,6,23, 0.04);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
  }
  .timing-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(2,6,23, 0.08);
  }
  .timing-card .icon {
    width: 48px; height: 48px; margin: 0 auto 25px auto;
    color: #75AEEA;
    transition: color 0.4s ease, filter 0.4s ease;
  }
   .timing-card .icon svg {
    width: 100%; height: 100%;
  }
  .timing-card:hover .icon {
    color: #FF9850;
    filter: drop-shadow(0 0 15px #FF985050);
  }

  .methods-showcase {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 60px;
    align-items: center;
    text-align: left;
  }
  .methods-image-col img { width: 100%; height: auto; border-radius: 12px; }
  .methods-list .method-item {
    border-bottom: 1px solid rgba(0,0,0, .06);
  }
  .methods-list .method-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
  .animation-group .animated-item { opacity: 0; transform: translateY(20px) scale(0.98); transition: opacity 0.8s ease-out, transform 0.8s ease-out; }
  .animation-group.is-visible .animated-item { opacity: 1; transform: translateY(0) scale(1); }
  .animated-item--delay1 { transition-delay: 0.1s; }
  .animated-item--delay2 { transition-delay: 0.2s; }
  .animated-item--delay3 { transition-delay: 0.3s; }
  @media (max-width: 990px) {
    .timing-trio { grid-template-columns: 1fr; }
    .methods-showcase { grid-template-columns: 1fr; }
    .methods-image-col { order: -1; }
    .methods-image-col img { max-width: 400px; margin: 0 auto 40px auto; display: block; }
  }
/* --- WELBEWUSTLIFE GUIDELINES APPLIED --- */
  .custom-product-page-final { background-color: var(--color-bg, #FFFFFF); overflow: hidden; position: relative; }
  .custom-product-container-final { max-width: 1250px; margin: 1rem auto; animation: fadeSlideUp 1s ease-out forwards; opacity: 0; position: relative; z-index: 1; }
  .custom-product-main-grid-final { display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; gap: 30px; width: 100%; }
  .description { font-size: 16px; font-weight: 400; color: rgba(0,0,0,0.61); line-height: 1.7; text-align: start; margin-bottom: 30px; }
  .serving-info-final { font-size: 18px; font-weight: 400; color: #334155; padding-bottom: 15px; border-bottom: 1px solid rgba(0,0,0,0.1); }
  .guarantees-final { font-size: 14px; font-weight: 400; line-height: 1.8; color: #475569; text-align: start; margin-top: 25px; }
  .attributes-grid-final span { font-size: 12px; font-weight: 400; color: #111; text-align: center; padding: 10px 12px; margin: 0; border-radius: 999px; border: 1px solid rgba(0, 0, 0, .06); box-shadow: 0 6px 18px rgba(2, 6, 23, 0.04); white-space: normal; line-height: 1.3; display: flex; align-items: center; justify-content: center; min-height: 40px; }
  .benefit-icons-container { display: flex; justify-content: flex-start; gap: 15px }
  .benefit-icon { width: 80px; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 10px; box-sizing: border-box; flex-shrink: 0; }
  .benefit-icon img { max-width: 100%; max-height: 100%; object-fit: contain; }
  .updated-inline-actions { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 15px; }
  .product-form-container-final { margin-top: 25px; }
  .buy-now-btn, .add-to-cart-btn { flex: 1; min-width: 0; }
  .quantity-stepper { display: flex; align-items: center; border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 999px; padding: 0 5px; flex-shrink: 0; }
  .quantity-stepper button { background: none; border: none; font-size: 20px; cursor: pointer; padding: 10px 15px; color: #334155; }
  .quantity-stepper input { width: 30px; text-align: center; border: none; background: none; font-size: 16px; color: #334155; -moz-appearance: textfield; }
  .quantity-stepper input::-webkit-outer-spin-button, .quantity-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
  .custom-product-image-wrapper { text-align: center; display: flex; flex-direction: column; align-items: center; }
  .custom-product-image-wrapper img.main-product-image-final { max-width: 100%; max-height: 420px; object-fit: contain; filter: drop-shadow(0 10px 20px rgba(0,0,0,0.1)); transition: transform 0.4s ease, opacity 0.3s ease; }
  .custom-product-image-wrapper img.main-product-image-final:hover { transform: scale(1.03); }
  .custom-product-info-right { display: flex; flex-direction: column; gap: 20px; justify-content: flex-start; }
  .attributes-grid-final { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .product-variants { margin-bottom: 15px; display: flex; flex-direction: column; gap: 10px; }
  .variant-option select { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 5px; }

  @media (max-width: 1100px) {
    .custom-product-main-grid-final { grid-template-columns: 1fr 1fr; gap: 40px; }
    .custom-product-info-left { grid-column: 1 / 2; }
    .custom-product-image-wrapper { grid-column: 2 / 3; grid-row: 1 / 2; }
    .custom-product-info-right { grid-column: 1 / 3; align-items: center; }
  }
  @media (max-width: 768px) {
    .custom-product-main-grid-final { grid-template-columns: 1fr; }
    .custom-product-info-left, .custom-product-image-wrapper, .custom-product-info-right { grid-column: auto; grid-row: auto; }
    .custom-product-info-left, .custom-product-info-right { align-items: center; }
    .updated-inline-actions, .benefit-icons-container { justify-content: center; }
    .description, .guarantees-final { text-align: center; }
    .updated-inline-actions { flex-direction: column; align-items: stretch; gap: 10px; }
  }
  @keyframes fadeSlideUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;500&display=swap');

.multicolumn {
  background-color: #ffffff !important;
  padding: 50px 0;
}

.multicolumn__title h2 {
  font-weight: bold;
  font-size: 2.6rem;
  color: #204070;
  text-align: center;
  margin-bottom: 2rem;
}

/* horizontal card wrapper */
.multicolumn__wrapper {
  display: flex;
  flex-direction: row;
  gap: 30px;
  overflow-x: auto;
  padding-bottom: 10px;
  scroll-snap-type: x mandatory;
}

.multicolumn-card {
  background-color: #ffffff;
  border-radius: 20px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
  padding: 30px;
  min-width: 320px;
  max-width: 350px;
  flex-shrink: 0;
  scroll-snap-align: start;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.multicolumn-card:hover {
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
  transform: translateY(-4px);
}

.multicolumn-card__image-wrapper {
  width: 100%;
  height: 200px;
  overflow: hidden;
  margin-bottom: 16px;
}

.multicolumn-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
}

.multicolumn-card__info {
  text-align: start;
}

.multicolumn-card__info h3 {
  font-size: 1.8rem;

  font-weight: bold;
  color: #204070;
  margin-bottom: 10px;
}

.multicolumn-card__info .rte {
  font-size: 1.4rem;
  color: #343537;
  font-weight: 300;
  line-height: 1.5;
}

/* Responsive fallback if needed */
@media screen and (max-width: 749px) {
  .multicolumn-card {
    min-width: 260px;
  }
}
.mindfulness-landing{
    --shadow:0 8px 24px rgba(15,15,15,.08);
    background: #fff;
    color: #0f0f0f;
    padding:48px 16px 72px;
    min-height: 80vh;
  }

  .ml-header { position: relative; margin-bottom: 36px; }
  .ml-hero {
    position: relative;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border-radius: 15px;
    background: #fff;
    transition: all 0.5s 
    cubic-bezier(0.25, 0.8, 0.25, 1);
  }


  .ml-hero {
    padding: 2rem;
    margin-bottom: 16rem;
  }

  .ml-hero-left { position: relative; z-index: 2; }
  .ml-hero-right { position: relative; z-index: 2; }

  .ml-title {
    font-weight: 700;
    line-height: 1.16;
    font-size: 72px;
    margin: 0 0 1.25rem;
    color: #000;
    text-align: start;
  }
  .ml-subtitle {
    text-align: start;
    font-size: 30px;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.61);
    margin: 0;
    max-width: 85%;
    line-height: 1.6;
    margin-top: 2rem;
  }

  .ml-video .ml-media,
  .ml-video iframe { display:block; width:100%; height:100%; border-radius:25px; object-fit:cover; }
  .ml-video-fallback { width:100%; height:100%; background: linear-gradient(135deg,#eaeaea,#dcdcdc); }

  .nh-card{
    box-shadow: 0 12px 24px rgba(0, 0, 0, .08);
    min-height: 32vh;
    color: #fff;
    border-radius: 20px;
    padding: clamp(1.25rem, 2.2vw, 2rem);
    box-shadow: 0 12px 24px rgba(0, 0, 0, .08);
    position: relative;
    transition: all 0.35s ease;
    cursor: pointer;
  }

  .nh-card:hover {
    transform: scale(0.95)
  }

  .nh-card__title {
    font-size: 22px;
    line-height: 1.15;
    margin: 0;
    color: #fff;
  }

    .wl-card{
        position:relative;
        min-height:400px;
        border-radius:20px;
        overflow:hidden;
        color:#fff;
        transition:transform .35s ease;
        will-change: transform;
    }
    .wl-card:hover {
      transform: scale(0.9);
      cursor: pointer;
    }
    .wl-card h3 {
      position:absolute;
      z-index:2;
      inset:auto auto auto 20px; /* bottom-left pin via top/left if you prefer */
      top:20px;
      inset-inline-start:20px;
      margin:0;
      padding:0;
      font-size:22px;
      line-height:1.15;
      color:#fff;
      text-shadow:0 1px 1px rgba(0,0,0,.35);
    }

    .wl-mini-card{
      position:absolute;
      inset-inline-start:3%;
      bottom:3%;
      width:min(260px, 42%);
      background:rgba(255,255,255,.16);
      color:#fff;
      border-radius:16px;
      padding:12px 14px;
      box-shadow:0 10px 30px rgba(0,0,0,.18);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
    }
    .wl-mini-card .title{font-weight:500;font-size:14px;opacity:.95;text-align:start;}
    .wl-mini-card .row{display:flex;justify-content:space-between;gap:10px}
    .wl-mini-card .label{opacity:.85}
    .wl-mini-card .value{background:rgba(255,255,255,.22);padding:4px 8px;border-radius:999px}

    .wl-mini-card.left{
      inset-inline-start: 3%;
      bottom: 3%;
    }

    @media (max-width: 1024px){
      .wl-mini-card.left{ inset-inline-start:10px; top:12px }
    }
    .cards-grid{
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2 columns */
      gap: 20px;
      align-items: stretch;
    }

    .cards-grid .card{
      height: 100%;
    }

    @media (max-width: 768px){
      .cards-grid{
        grid-template-columns: 1fr;
      }
    }


    .button{
      display:inline-flex; align-items:center; justify-content:center;
      min-height:40px; padding:0 18px; border-radius:999px; text-decoration:none; font-weight:600;
      border:1px solid #d2d2d7; color:#06c; background:#fff;
    }
    .button-primary{ background:#0071e3; border-color:#0071e3; color:#fff; }
    .button-tertiary{ background:#fff; }

    /* image */
    .unit-image-wrapper{
      position:relative;
      min-height: 360px;
      z-index:1; /* above the circle */
    }
    .unit-image{ margin:0; width:100%; height:100%; }
    .unit-image-img{ width:100%; height:100%; object-fit: contain; display:block; }

    .unit-circle{
      position:absolute;
      width: 520px;
      height: 520px;
      border-radius: 50%;
      background: var(--accent, #ff852e);
      top: -200px;   /* tweak placement as you want */
      inset-inline-end: -200px; /* tweak placement as you want */
      z-index:0;     /* behind product image, behind text */
    }

    /* responsive */
    @media (max-width: 980px){
      .promos-grid{ --columns:1; }
      .unit-wrapper{ grid-template-columns: 1fr; }
      .unit-image-wrapper{ order:-1; } /* image first on mobile like Apple */
      .unit-circle{ width:420px; height:420px; top:-180px; inset-inline-end:-180px; }
    }

    .ml-card__corner{
      content: "";
      position: absolute;
      top: -60px;
      inset-inline-end: -60px;
      width: 200px;
      height: 200px;
      border-radius: 999px;
      background: #ff852e;
      z-index: -1;
      pointer-events: none;
      transition:
        width 0.35s cubic-bezier(.4,0,.2,1),
        height 0.35s cubic-bezier(.4,0,.2,1),
        top 0.35s cubic-bezier(.4,0,.2,1),
        inset-inline-end 0.35s cubic-bezier(.4,0,.2,1),
        border-radius 0.35s cubic-bezier(.4,0,.2,1),
        background 0.35s cubic-bezier(.4,0,.2,1);
    }

  /* New image media */
  .ml-card__media{
    position: absolute;
    bottom: 35%;
    inset-inline-start: 28%;
    width: 52px;
    height: 52px;
    border-radius: 999px;   
    overflow: hidden;       
    transform: scale(3.5);  
    z-index: -1;            
    box-shadow: none;
  }

    .ml-card__media-img{
      width: 100%;
      height: 100%;
      object-fit: cover;  
      display: block;
    }


  .ml-card__desc{
    color: #707070;
    line-height: 1.75;
    font-size: 16px;
    margin: 0 0 8px;
  }

  @media (max-width: 480px){
    .ml-card__title{ font-size: 22px; }
    .ml-card__btn{ min-height: 52px; }
  }

    .ml-feature-chip{
      background: var(--chip-bg);
      color: var(--chip-fg);
      border-radius: 16px;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 12px 14px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-weight: 600;
      font-size: 14px;
      opacity: .9;
    }

    /* Small icon */
    .ml-feature-chip .chip-icon {
      display: inline-flex;
      width: 28px;
      height: 28px;
      align-items: center;
      justify-content: center;
      border-radius: 999px;
      background: rgba(255,255,255,.35);
      font-size: 16px;
    }
    .ml-feature-chip .chip-icon-img { width: 100%; height: 100%; object-fit: cover; border-radius: 999px; }

    .ml-button{
      display:inline-block; padding:14px 28px; border:1px solid #ddd; border-radius:999px;
      background:#fff; text-decoration:none; font-weight:500; transition:transform .2s ease, box-shadow .2s ease;
      box-shadow:0 2px 0 rgba(0,0,0,.04)
    }
    .ml-button:hover{ transform:translateY(-2px); box-shadow:0 10px 20px rgba(0,0,0,.08) }
    /* Rotating text */
    .rt{ display:inline-flex; align-items:center; justify-content:center; overflow:hidden; border-radius:.5rem; }


    /* Grid */
    .ml-grid{display:grid; gap:14px; grid-template-columns:1fr}

    @media (max-width: 1440px) {
      .ml-title { font-size: 52px; }
      .ml-subtitle {
        font-size: 24px;
    }
    }
    @media (max-width: 980px) {
      .ml-hero { grid-template-columns: 1fr; }
    }

    @media (max-width: 576px) {
      .ml-hero {
        margin-bottom: 8rem;
      }
    }


    @media (max-width: 1200px){
      .ml-features-bg { grid-template-columns: repeat(8,1fr); grid-auto-rows: 64px; }
      .ml-features-bg .ml-feature-chip{ grid-column: span 2; }
    }
    @media (max-width: 720px){
      .ml-features-bg { display:none; }
    }
    @media (min-width: 980px){
      .ml-grid{ grid-template-columns: 1fr 1fr; align-items:start }
    }
    @media(max-width: 576px) {
      .ml-header{margin-bottom: 24px }
    }
    .ml-col{ display:flex; flex-direction:column; gap:20px }


     @keyframes animation {
      0%,
      100% {
        top: -10px;
      }
      20% {
        top: -10px;
      }
      25% {
        top: -60px;
      }
      45% {
        top: -60px;
      }
      50% {
        top: -120px;
      }
      70% {
        top: -120px;
      }
      75% {
        top: -180px;
      }
      95% {
        top: -180px;
      }
    }

    .inner-ml-title strong {
      position: relative;
      font-size: 28px;
      animation: animation 10s ease infinite;
    }

    .benefit-text{
      letter-spacing: .06em;
      text-transform: capitalize;
      font-size: 14px;
      color: #111;
      opacity: 1;
      font-weight: bold;
      }
    .benefit-right{ display:flex; align-items:center;}
    .benefit-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

  .inner-ml-title {
      border: 0px solid #ddd;
      height: 50px;
      line-height: 50px;
      font-size: 54px;
      text-transform: uppercase;
      overflow: hidden;
      display: block;
    }
.emdr-online-therapy{
    background: #e9f1fb;
  }


  .emdr__header{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    padding-inline: clamp(12px, 4vw, 32px);
  }

  .emdr-cta{
    position:relative; overflow:hidden;
    margin-top: clamp(14px, 2vw, 20px);
    display:inline-block;
    text-align:center;
    padding: 12px 16px;
    background:#ff852e;
    border-radius:999px;
    color:#fff;
    font-size: 16px;
    text-decoration:none;
    cursor:pointer;
    transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease;
    width: 100%;
  }

  .emdr-cta:hover{ background:#0e3e77; transform:translateY(-2px); }

  .emdr__eyebrow{
    display:flex; flex-wrap:wrap; gap:.5rem .65rem;
    justify-content:center;
  }
  .pill{
    margin:0; letter-spacing:.06em; text-transform:uppercase;
    font-size: 12px;
    color:#333; opacity:.7; padding:.4rem .8rem; border-radius:999px; background:#f4f4f4;
    border:1px solid rgba(0,0,0,.06); box-shadow:0 6px 18px rgba(2,6,23,.04);
  }

  .emdr__player{
    position:relative; display:grid; place-items:center;
    margin: clamp(16px, 4vw, 28px) auto clamp(40px, 10vw, 120px);
    max-width: 900px; z-index:10;
    padding-inline: clamp(12px, 4vw, 32px);
  }
  .emdr__player-inner{
    width: 100%;
    aspect-ratio:16/9;
    border-radius: 14px;
    overflow:hidden;
    box-shadow: 0 24px 60px rgba(0,0,0,.16);
  }
  .emdr__iframe{ width:100%; height:100%; display:block; }

  .emdr__connect{ position:relative; isolation:isolate; }
  .emdr__wires{
    position:absolute; inset:0; width:100%; height:100%;
    z-index:0; pointer-events:none;
    opacity:0; visibility:hidden;
    transition:opacity .25s ease, visibility .25s ease;
  }
  .emdr__wires.is-ready{ opacity:.9; visibility:visible; }

  .wire{
    fill:none;
    stroke:rgba(42,42,42,.65);
    stroke-width:1.5px;
    stroke-linecap:round;
    stroke-linejoin:round;
    vector-effect:non-scaling-stroke;
    filter:drop-shadow(0 2px 1px rgba(17,24,39,.06));
    stroke-dasharray:6 10;
    stroke-dashoffset:0;
    animation:none;
    will-change:stroke-dashoffset;
  }

  .emdr__hero{
    position:relative; display:grid; grid-template-columns:1fr;
    gap: clamp(14px, 3.5vw, 28px);
    align-items:stretch; z-index:1;
    padding-inline: clamp(12px, 4vw, 32px);
  }

  .emdr__card-header{ display:flex; align-items:center; gap:8px; }
  .emdr__icon{ display:flex; align-items:center; }
  .emdr__icon-img{ width: 36px; height: 36px; object-fit:cover; }

  @media (max-width: 600px) {
    .emdr-cta{
      width: 75%;
      padding: 8px 10px;
      border-radius: 999px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 14px auto;
    }
  }

  @media (min-width: 600px){
    .emdr-cta{ width:auto; padding: 12px 18px; }
    .emdr__icon-img{ width: 40px; height: 40px; }
    .emdr__hero{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  }

  @media (min-width: 1024px){
    .emdr__player{ margin: 2rem auto 12rem; }
    .emdr__player-inner{ border-radius:16px; }
    .emdr__hero{ grid-template-columns: repeat(3, minmax(0,1fr)); gap: 2rem; }
  }

  @media (max-width: 1023px){
    .emdr__wires, .w-left, .w-mid, .w-right{ display:none !important; }
  }

  @media (prefers-reduced-motion: reduce){
    .wire{ animation:none !important; }
  }
.online-therapy{
      position: relative;
      isolation: isolate;
      min-height: 80vh;
      padding: 6% 2%;
    }
    .online-therapy::before{
      content:"";
      position:absolute; inset:0; z-index:0;
      background-color: #eaf1fb;
    }

    .spotlight{
      position:absolute; inset:0; z-index:1;
      pointer-events:none; overflow:hidden; display:block;
    }
    .spotlight__video,
    .spotlight__img{
      width: 95%;
      height: 100%;
      object-fit: cover;
      object-position: 30% center;
      transform-origin: left center;

      --center-solid: 42%;
      --center-soft: 70%;
      --v-edge: 12%;
      -webkit-mask-image:
        radial-gradient(circle at 50% 50%, #000 0%, #000 var(--center-solid), transparent var(--center-soft)),
        linear-gradient(to bottom, transparent 0%, #000 calc(var(--v-edge) + 1px), #000 calc(100% - var(--v-edge) - 1px), transparent 100%);
      mask-image:
        radial-gradient(circle at 30% 85%, #000 0%, #000 var(--center-solid), transparent var(--center-soft)),
        linear-gradient(to bottom, transparent 0%, #000 calc(var(--v-edge) + 1px), #000 calc(100% - var(--v-edge) - 1px), transparent 100%);
      -webkit-mask-composite: source-in;
      mask-composite: intersect;
      -webkit-mask-size: 100% 100%;
      mask-size: 100% 100%;
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      mask-mode: alpha;

      will-change: transform;
      animation: floatY 9s ease-in-out infinite alternate;
    }
    @keyframes floatY{ from{ transform:translateY(0)} to{ transform:translateY(-8px)} }

    @media (prefers-reduced-motion: reduce){
      .spotlight__video, .spotlight__img{ animation:none; }
    }

    .ot-wrap{
      position: relative;
      z-index: 2;
      width: 100%;
      max-width: 1250px;
      margin: 0 auto;
      display: grid;
      transform: translateX(7%);
    }

    .ot-head{ display:grid; gap:.5rem; justify-items:start; }
    .ot-eyebrow{
      margin: 0;
      letter-spacing: .06em;
      text-transform: uppercase;
      border: 1px solid rgba(0, 0, 0, .06);
      box-shadow: 0 6px 18px rgba(2, 6, 23, .04);
      background: #f4f4f4;
      color: #333;
      padding: .4rem .9rem;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 500;
      transition: background-color .3s ease;
    }

    /* Glass sheet */
    .ot-sheet{
      position:relative;
      background: rgba(255,255,255,.72);
      border:1px solid rgba(0,0,0,.06);
      border-radius: 20px;
      -webkit-backdrop-filter: blur(12px);
      backdrop-filter: blur(12px);
      box-shadow: 0 20px 50px rgba(0,0,0,.12);
      display:grid;
      gap: 20px;
      padding: clamp(16px, 4vw, 32px);
      transform-style: preserve-3d;
      display: flex;
      flex-direction: column;
    }
    .ot-sheet__col{ max-width: 70ch; }


    /* Fallback when blur is unsupported */
    @supports not ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))){
      .ot-sheet{ background: rgba(255,255,255,.9); }
    }


    @media (max-width: 599px){
      #online-therapy.online-therapy{
        min-height: 64vh;
        padding: 56px 0;
      }
      .ot-sheet{
        grid-template-columns: 1fr;
        gap: 16px;
      }
      .ot-sheet__col:first-child{
        border-bottom: 1px dashed #e9eef5;
        padding-bottom: 12px;
      }
      .ot-cta{
            width: 75%;
            padding: 8px 10px;
            border-radius: 999px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 14px auto;
      }
      .spotlight__video,
      .spotlight__img{
        --center-solid: 56%;
        --center-soft: 78%;
        --v-edge: 6%;
        object-position: 24% center;
      }
      .ot-wrap{
        transform: translate(0);
        padding: 0 2%;
      }
      .spotlight__video, .spotlight__img {
        width: 100%;
      }
    }

    /* Tablet 600–979px */
    @media (min-width: 600px) and (max-width: 979px){
      #online-therapy.online-therapy{
        min-height: 72vh;
        padding: 72px 0;
      }
      .ot-wrap{
        gap: 1.25rem;
        justify-content: right;
        padding-inline: 24px;
        transform: translateX(0);
      }
      .ot-sheet{
        grid-template-columns: 1fr;
        gap: 18px;
      }
      .ot-sheet__col:first-child{
        border-bottom: 1px dashed #e9eef5;
        padding-bottom: 14px;
      }
      .spotlight__video,
      .spotlight__img{
        --center-solid: 48%;
        --center-soft: 72%;
        --v-edge: 10%;
        object-position: 28% center;
      }
    }

    /* Desktop ≥980px */
    @media (min-width: 980px){
      .online-therapy{ padding-top: 6rem; } /* more breathing room */
      .ot-wrap{
        grid-template-columns: min(560px, 46vw);
        justify-content: right;
        gap: 1.25rem;
        padding-inline: 32px;
      }
      .ot-sheet{
        grid-template-columns: 1.1fr .9fr;
        gap: clamp(18px, 2.2vw, 22px);
        align-items: start;
      }
      .ot-sheet__col:first-child{
        padding-bottom: 10px;
        border-bottom: 1px dashed #b3b9c0;
      }
      .ot-cta{ width: auto; }
      .spotlight__video,
      .spotlight__img{
        --center-solid: 22%;
        --center-soft: 50%;
        --v-edge: 14%;
        object-position: left center;
      }
    }
.wbl-product-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 50px;
    align-items: flex-start;
  }

  @media (min-width: 768px) {
    .wbl-product-grid {
      grid-template-columns: 1fr 1fr;
    }
  }

  .wbl-product-image-wrapper img {
    max-width: 70%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.07);
  }

  .wbl-product-section-wrapper h1 {
    font-size: 24px;
    font-weight: bold;
    color: #0000009c;
    line-height: 1.16;
    margin: 0 0 10px 0;
  }

  .wbl-product-description p {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: normal;
    color: rgba(0, 0, 0, 0.61);
    text-align: left;
    line-height: 1.6;
    margin: 0;
  }

  .investment-box {
    background-color: #f9f9f9;
    border: 1px solid #f0f0f0;
    border-radius: 8px;
    padding: 30px;
    margin-top: 40px;
  }

  .investment-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid #e5e5e5;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 16px;
  }

  .investment-row:last-of-type {
    border-bottom: none;
  }

  .investment-row .label {
    color: rgba(0, 0, 0, 0.61);
  }

  .investment-row .value {
    color: #000000;
    font-weight: bold;
  }

  .wbl-button {
    display: block;
    width: 100%;
    background-color: #ff852e;
    color: #ffffff !important;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    padding: 15px 20px;
    border-radius: 20px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.3s ease;
    margin-top: 30px;
  }

  .wbl-button:hover {
    background-color: #0e3e77;
  }
.welbewust-subheading {
    color: #334155;
  }

  /* --- Section Specific Styles --- */
  .personal-plan-wrapper .description {
    max-width: 1250px;
    margin: 0 auto 3rem;
    text-align: justify;
    padding: 0 2%;
  }

  .personal-plan-content {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
  }

  .personal-plan-image {
    border-radius: 20px;
    box-shadow: 0 8px 16px rgba(0,0,0,.08);
    max-width: 240px;
    width: 100%;
    height: auto;
    flex-shrink: 0;
  }

  .personal-plan-card {
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 20px 25px;
    text-align: start; /* RTL/LTR safe */
    width: 100%;
  }

  .personal-plan-card p:last-child { margin-bottom: 0; }

  @media (max-width: 990px) {
    .personal-plan-content {
      flex-direction: column;
      align-items: center;
    }
  }
/* --- Typography (Guideline Compliant) --- */
  .editorial-symptoms-header {
    max-width: 800px;
    margin: 0 auto 4rem auto;
  }

  .editorial-symptoms-header p {
    font-size: 18px;
    font-weight: normal;
    color: #0000009c;
    line-height: 1.6;
    margin: 0;
  }

  /* --- Editorial Card Grid Styling (Guideline Compliant) --- */
  .editorial-symptoms-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    max-width: 1100px;
    margin: 0 auto;
  }

  .symptom-editorial-card {
    background-color: #ffffff;
    border: 1px solid #E0E9F6; /* Guideline Icon Tone */
    border-radius: 12px;
    padding: 40px;
    text-align: start;
    box-shadow: 0 6px 18px rgba(2, 6, 23, 0.04); /* Guideline Shadow */
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }

  .symptom-editorial-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 25px rgba(2, 6, 23, 0.07);
  }


  .symptom-list li {
    padding-inline-start: 28px;
    position: relative;
    margin-bottom: 15px;
    font-size: 16px;
    font-weight: normal;
    color: rgba(0, 0, 0, 0.61);
    line-height: 1.7;
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
  }
  .symptom-list li:last-child {
    margin-bottom: 0;
  }
  .symptom-list li::before {
    content: '✓';
    position: absolute;
    inset-inline-start: 0;
    top: 1px;
    color: #FF9850;
    font-weight: bold;
    font-size: 18px;
  }

  /* --- On-Scroll Animation Logic (Preserved) --- */
  .animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .editorial-symptoms-grid .animate-on-scroll:nth-of-type(2) {
    transition-delay: 0.2s;
  }
  .animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  .symptom-editorial-card.is-visible .symptom-list li {
    opacity: 1;
    transform: translateX(0);
  }
  .symptom-editorial-card.is-visible .symptom-list li:nth-child(1) { transition-delay: 0.3s; }
  .symptom-editorial-card.is-visible .symptom-list li:nth-child(2) { transition-delay: 0.4s; }
  .symptom-editorial-card.is-visible .symptom-list li:nth-child(3) { transition-delay: 0.5s; }
  .symptom-editorial-card.is-visible .symptom-list li:nth-child(4) { transition-delay: 0.6s; }
  .symptom-editorial-card.is-visible .symptom-list li:nth-child(5) { transition-delay: 0.7s; }

  /* --- Responsive Design --- */
  @media (max-width: 768px) {
    .editorial-symptoms-grid {
      grid-template-columns: 1fr;
      gap: 20px;
    }
    .editorial-symptoms-grid .animate-on-scroll:nth-of-type(2) {
      transition-delay: 0s;
    }
  }
.product-feature-heading .subheading {
    font-size: clamp(1rem, 2.5vw, 1.25rem);
    line-height: 1.6;
    color: #1f1f1f;
    margin: 1.5rem 0;
  } 

  .product-feature-heading h2 {
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-style: normal;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.06rem;
    color: var(--Gray-900, #141415);
    margin: auto;
    max-width: 600px;
    margin-bottom: 1rem;
  }

  .product-image img {
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    max-width: 100% !important;
  }


  .product-title {
    font-size: clamp(1.75rem, 3.5vw, 2.25rem);
    margin: 0 0 0.75rem;
    line-height: 1.4;
    color: var(--Gray-25, #FDFDFD);
  }

  .product-description {
    font-size:clamp(1.375rem, 1.8vw, 1.5rem);
    font-weight: 400;
    line-height: 1.6;
    margin: 0;
  }


  @media (max-width: 768px) {
    .product-cards-wrapper {
      place-items: center;
    }

  }
.video-section {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 100svh; /* Ensures full viewport height on mobile */
  overflow: hidden;
}

.video-container {
  transform-origin: center center;
}

.background-video {
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 24px;
}

.overlay-text {
  position: absolute;
  top: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  color: white;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 700;
  max-width: 90%;
  padding: 1rem;
}

.overlay-text h2 {
  font-size: 5.5rem;
  margin: 2rem 0;
  color: #fff;
}

.overlay-text p {
  font-size: 1.5rem;
  line-height: 1.5;
  font-weight: 400;
}

@media (max-width: 768px) {
  .overlay-text {
    font-size: 1rem; /* Reduce font size on smaller screens */
    padding: 0.5rem; /* Reduce padding on smaller screens */
  }

  .overlay-text h2 {
    font-size: 2.5rem; /* Reduce h2 font size */
    margin-bottom: 0.8rem;
  }

  .overlay-text p {
    font-size: 1rem; /* Adjust paragraph font size */
  }
}
.supplement-grid-wrapper {
  padding: 60px 20px;
  background: #fffefb; /* You can change this or make it a setting */
}
.supplement-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

.supplement-text {
  font-size: 20px;
  font-weight: 600;
  color: #111827;
}
.supplement-icon {
  display: flex;
  align-items: center;
  gap: 12px;
}
.supplement-icon img {
  height: 48px;
  width: 48px;
  object-fit: contain;
}
.arrow {
  height: 36px;
  width: 36px;
  border-radius: 9999px;
  background: #000;
  color: #fff;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (min-width: 768px) {
  .supplement-text {
    font-size: 22px;
  }
}
.benefits-section-wrapper .section-title {
    font-size: clamp(2.5rem, 3vw, 3.5rem);
    margin-bottom: clamp(1.5rem, 4vw, 3rem);
    font-style: normal;
    font-weight: 600;
    line-height: 2.375rem;
  }

  .benefits-section-wrapper .benefit-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  @media screen and (min-width: 768px) {
    .benefits-section-wrapper .benefit-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }


  .benefits-section-wrapper .benefit-item:hover {
    border: 2px solid var(--Gray-300, #ABADB0);
  }


  .benefits-section-wrapper [class^="benefit-item-"] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    cursor: pointer;
    border-radius: 1rem;
    border: 0.5px solid var(--Gray-200, #CACBCE);
    padding: clamp(2rem, 4vw, 3rem) clamp(1.25rem, 3vw, 2rem);
    text-decoration: none;
    color: inherit;
    transition: border 0.5s ease;
    width: 95%;
  }


  .benefit-item-0:hover {
     background: linear-gradient(to right,#FFEAD5,#FEB273);
     border: none;
  }

  .benefit-item-1:hover {
    background: linear-gradient(to right,#D1FADF,#6CE9A6);
    border: none;
  }

  .benefit-item-2:hover {
    background: linear-gradient(to right,#FCE7F6,#FAA7E0);
    border: none;
  }

  .benefit-item-3:hover {
    background: linear-gradient(to right,#B0C4E0,#8099D0);
    border: none;
  }

  .benefits-section-wrapper .benefit-text {
    flex: 1 1 auto;
    display: inline;
    min-width: 0;
    text-align: start;
    font-size: clamp(1.5rem, 2vw, 2rem);
    color: var(--Gray-800, #28282A);
    font-weight: 500;
    line-height: 2rem;
  }

  .benefits-section-wrapper .benefit-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  .benefits-section-wrapper .benefit-icon {
    font-size: clamp(1.5rem, 4vw, 2rem);
    display: flex;
    align-items: center;
  }

  .benefits-section-wrapper .benefit-chevron {
    width: 24px;
    height: 24px;
  }
/* open state (JS toggles this) */
  .app-detail.is-open { display:block; }

  /* make .app-bubble buttons look like your old anchors */
  .app-bubble {
    border: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
  }

  /* optional: close button reset */
  .app-detail-close {
    border: 0;
    background: transparent;
    cursor: pointer;
  }
        /* Cloud */
        .apps-cloud{ position:relative; height:18rem; margin-bottom:4rem; }
        .apps-cloud-inner{ position:absolute; inset:0; }

        .app-emoji{ line-height:1; }

        .appFloat1{ animation: floatA 4.2s ease-in-out infinite; }
        .appFloat2{ animation: floatB 5s ease-in-out infinite; }
        .appFloat3{ animation: floatC 3.8s ease-in-out infinite; }
        .appFloat4{ animation: floatA 4.8s ease-in-out infinite; }
        .appFloat5{ animation: floatB 4.4s ease-in-out infinite; }
        .appFloat6{ animation: floatC 5.2s ease-in-out infinite; }

        .apps-grid{ display:none; }

        .app-detail{
          display:none;
          overflow:hidden;
          margin: 1rem 0 0;
        }
        .app-detail:target{ display:block; }
        .app-detail-header{
          display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.25rem 1.25rem 1rem;
          border-bottom:1px solid #e5e7eb;
        }
        .app-h-left{ display:flex; align-items:center; gap:1rem; }
        .app-detail-thumb{ width:3rem; height:3rem; background:#f1f5f9; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.25rem; }
        .app-detail-close{ text-decoration:none; color:#334155; font-size:1.5rem; width:2rem; height:2rem; display:flex; align-items:center; justify-content:center; border-radius:8px; }
        .app-detail-close:hover{ background:#f1f5f9; }

        .app-availability-label{ margin:0; font-size:.85rem; color:#64748b; }


        .app-bubble-icon {
          width: 100%;
          height: 100%;
          object-fit: contain;
          display: block;
          border-radius: 999px;
          transition: all .35s ease;
         }
         .app-bubble-icon:hover {
          border-radius: 12px;
          transform: scale(1.2);
         }

        .apps-close-anchor{ position:absolute; width:0; height:0; overflow:hidden; }

        .app-detail{ display:none; margin:1rem 0 0; animation:fadeUp .35s ease both; }
        .app-detail:target{ display:block; }

        .app-detail-grid{
          display:grid; gap:1.5rem;
          grid-template-columns: 1fr;
        }

        .app-card{
          background:#f8fafc; border:1px solid #e5e7eb; border-radius:16px;
          box-shadow:0 8px 22px rgba(15,23,42,.06);
        }

      /* float wrapper keeps the translateY animation alive */
      .app-float { width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
      .appFloat1{ animation: floatA 4.2s ease-in-out infinite; }
      .appFloat2{ animation: floatB 5s ease-in-out infinite; }
      .appFloat3{ animation: floatC 3.8s ease-in-out infinite; }
      .appFloat4{ animation: floatA 4.8s ease-in-out infinite; }
      .appFloat5{ animation: floatB 4.4s ease-in-out infinite; }
      .appFloat6{ animation: floatC 5.2s ease-in-out infinite; }


      .app-media-placeholder{ width:100%; aspect-ratio: 4 / 3; background:#f1f5f9; border-radius:12px; position:relative; display:flex; align-items:center; justify-content:center; }
      .app-ph{ position:absolute; width:62%; height:auto; opacity:.55; }
      .app-emoji-lg{ position:absolute; inset-inline-end:10px; bottom:10px; font-size:2rem; }

      .app-card-content{ padding:1rem 1.25rem 1.25rem; display:flex; flex-direction:column; }
      .app-detail-header.-inside{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:0 0 .75rem; border-bottom:1px solid #e5e7eb; }

      .app-detail-section{ margin:.9rem 0; }

      .app-feature-list{ list-style:none; padding:0; margin:.25rem 0 0; display:grid; gap:.45rem; color:#FF842E; }

      .app-check{ width:1.75rem; height:1.75rem; color:#FF842E; margin-top:.5rem; flex:0 0 auto; }

      .app-detail-footer{
        margin-top:auto; padding-top:.9rem; border-top:1px solid #e5e7eb; gap:1rem; flex-wrap:wrap;
      }
      .app-pricing-wrap{ display:flex; flex-direction:column; gap:.25rem; }
      .app-detail-pricing{ margin:0; color:#FF842E; font-weight:700; text-align:start; }
      .app-availability{ margin:0; color:#0f172a; text-align:start;font-weight: bold; }

      .app-detail { margin: 1rem auto 0; scroll-margin-top: 96px; }

      .app-card,
      .app-card-media {
        overflow: hidden;
        border-radius: 16px;
      }

      .app-card-media {
        padding: 0;
        min-height: 100%;
        display: block;
        background: transparent;
        max-height: 600px;
      }
      .app-media-img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: scale-down;
        object-position: center;
       }

      @keyframes fadeUp{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:translateY(0);} }
      @keyframes floatA{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
      @keyframes floatB{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
      @keyframes floatC{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

  /* Bubbles use CSS variables randomized via JS */
  .app-bubble{
    position:absolute;
    width: var(--size, 64px);
    height: var(--size, 64px);
    background: transparent;
    border-radius:999px;
    display:flex; align-items:center; justify-content:center;
    text-decoration:none; color:inherit;
    will-change: transform;
    z-index:1;
    transition: transform .25s ease, border-radius .25s ease, box-shadow .2s ease;
  }

  .app-bubble:hover{ transform:scale(1.15); border-radius:20px; }
  .app-emoji{ line-height:1; }

  /* Two-layer animation: container scales on hover, inner spans drift/rock */
  .app-float{
    width:100%; height:100%;
    display:flex; align-items:center; justify-content:center;
    animation:
      drift var(--dur, 7s) ease-in-out var(--delay, 0s) infinite alternate,
      rock var(--rockDur, 5.5s) ease-in-out var(--rockDelay, 0s) infinite alternate;
    will-change: transform;
  }
  .app-float{
    width:100%; height:100%; display:flex; align-items:center; justify-content:center;
    animation: drift var(--dur,7s) ease-in-out var(--delay,0s) infinite alternate;
  }

  .app-rock{  /* rotation + subtle scale */
    width:100%; height:100%; display:flex; align-items:center; justify-content:center;
    animation: rock var(--rockDur,5.5s) ease-in-out var(--rockDelay,0s) infinite alternate;
  }

  @keyframes drift{
    0%   { transform: translate(0,0); }
    33%  { transform: translate(var(--dx1,10px), var(--dy1,-8px)); }
    66%  { transform: translate(var(--dx2,-12px), var(--dy2,6px)); }
    100% { transform: translate(var(--dx3,8px), var(--dy3,8px)); }
  }

  @keyframes rock{
    from { transform: rotate(var(--r0,-2deg)) scale(1); }
    to   { transform: rotate(var(--r1, 2deg)) scale(1.02); }
  }



  /* Tiny parallax nudge applied by JS on desktop */
  .apps-cloud-inner.parallax .app-bubble{
    transition: transform .25s ease, border-radius .25s ease, box-shadow .2s ease, translate .15s ease;
  }

  @media (min-width: 900px){
    .app-detail-grid{ grid-template-columns: 1fr 1.2fr; }
  }

  /* Respect users who prefer reduced motion */
  @media (prefers-reduced-motion: reduce){
    .app-float{ animation: none !important; }
    .app-bubble{ transition: none; }
  }
  @media (max-width: 576px){
    .apps-subtitle {
        max-width: 95%;
    }
  }
  @media (min-width: 1024px){ .apps-cloud{ height:25rem; } }
.evb-wrap{ background:#f6f9fc;direction: ltr; }
  /* Category pills */
  .evb-cats{ display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; margin:1rem 0 1.25rem; }

  /* Carousel shell */
  .evb-carousel{ position:relative; display:flex; align-items:center; gap:.5rem; }
  .evb-viewport{
    overflow:auto; overflow-anchor: none; scroll-snap-type:x mandatory; scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch; width:100%; padding-bottom:.25rem;
  }
  .evb-track{
    display:grid; gap:1.5rem; grid-auto-flow:column; grid-auto-columns:100%; align-items:stretch;
  }
  @media (min-width:1024px){ .evb-track{ grid-auto-columns: calc((100% - 1.25rem) / 2); } }

  .evb-slide{ scroll-snap-align:start; padding:12px;position:relative }
  .evb-card{
    background:#fff; border-radius:20px; box-shadow:0 4px 20px rgba(2,6,23,.10), 0 3px 8px rgba(2,6,23,.06);
    padding:2.75rem 1.75rem 2.25rem; height:100%; overflow:visible; width:100%;
    display:flex; flex-direction:column; justify-content:flex-start;height: 380px;
  }

  @media (max-width: 767px) {
    .evb-card{
      height: 440px;
    }
  }

  .evb-summary{
    display:inline-block; text-align:start;
    font-size:16px; color:rgba(0,0,0,.61); margin:1.25rem 0;
  }

  .evb-points{ list-style:none; padding:0; display:grid; gap:.5rem;margin-bottom: 1rem; }
  .evb-point{
    display:flex; align-items:center; gap:.5rem; font-size:14px; color:rgba(0,0,0,.61); text-align:start; margin:0;
  }
  .evb-star{ color:#FF842E; font-size:1rem; flex:0 0 auto; }

  .evb-nav{
    position: relative; z-index: 2;
    flex:0 0 auto; width:44px; height:44px; border-radius:999px; border:1px solid #e5e7eb; background:#fff; color:#334155;
    display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:background .2s ease, transform .08s ease, box-shadow .2s ease;
  }
  .evb-nav:hover{ background:#f3f4f6; transform:translateY(-1px); box-shadow:0 6px 14px rgba(2,6,23,.08); }
  .evb-chevron{ width:22px; height:22px; }

  .evb-nav[disabled],
  .evb-nav[aria-disabled="true"]{
    opacity:0;
    cursor:not-allowed;
    pointer-events:none;
    box-shadow:none;
    transform:none;
  }

  .evb-viewport { overflow-x: auto; overflow-y: hidden; position: relative; z-index: 1; }

  @media (max-width:576px){
    .evb-subtitle{ max-width:95%; }
    .evb-next, .evb-prev{ display:none; }
  }
.sleep-hero{
    overflow: hidden;
    border-top: 20px;
  }

  .sleep-left {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 4rem;
  }

  
  @media(max-width: 767px) {
    .sleep-left {
      grid-template-columns: 1fr;
    }
  }

  .bg-decor{ position:absolute; inset:0; pointer-events:none; }

  /* Blobby gradient circles */
  .sleep-blob{
    position:absolute; border-radius:999px; filter: blur(40px);
    background: radial-gradient(100% 100% at 30% 30%, rgba(255, 132, 46, 0.35), rgba(255, 132, 46, 0.2));
  }
  .sleep-blob-a{ top:5rem; inset-inline-end:2.5rem; width:16rem; height:16rem; }
  .sleep-blob-b{ bottom:8rem; inset-inline-start:4rem; width:12rem; height:12rem; }
  .sleep-blob-c{ top:50%; inset-inline-end:25%; width:8rem; height:8rem; filter: blur(28px); }

  /* Flowing lines */
  .sleep-flow-lines{ position:absolute; inset:0; opacity:.20; }
  .sleep-pulse{ animation: sleep-pulse 3s ease-in-out infinite; }
  .sleep-delay-1{ animation-delay: 1s; }
  .break-before {
    display: inline-block;
    width: auto;
  }
  /* Floating Z's (base) */
  .sleep-zzz{
    position:absolute;
    color: rgba(255, 132, 46, 0.4); text-shadow: 0 1px 0 rgba(255, 132, 46, 0.05);
    will-change: transform, opacity;
  }


  /* Motion variants */
  @keyframes sleep-float-kf {
    0%,100% { transform: translateY(0) rotate(0deg); opacity:.7; }
    50%     { transform: translateY(-8px) rotate(0deg); opacity:1; }
  }
  @keyframes sleep-drift-kf {
    0%,100% { transform: translateX(0) rotate(0deg); opacity:.7; }
    50%     { transform: translateX(8px) rotate(0deg); opacity:1; }
  }
  @keyframes sleep-bounce {
    0%,100% { transform: translateY(0) rotate(0deg); }
    50%     { transform: translateY(-10px) rotate(0deg); }
  }
  @keyframes sleep-sway-kf {
    0%,100% { transform: rotate(var(--deg, 0deg)); }
    50%     { transform: rotate(calc(var(--deg, 0deg) + 6deg)); }
  }
  @keyframes sleep-twirl-kf {
    0%   { transform: rotate(0deg); opacity:.7; }
    50%  { transform: rotate(12deg); opacity:1; }
    100% { transform: rotate(0deg); opacity:.7; }
  }

  /* Helpers that respect any inline rotate() you set */
  .sleep-float{ animation: sleep-float-kf 3.2s ease-in-out infinite; }
  .sleep-drift{ animation: sleep-drift-kf 3.6s ease-in-out infinite; }
  .sleep-bounce{ animation: sleep-bounce 2.2s ease-in-out infinite; }
  .sleep-sway{ animation: sleep-sway-kf 3.4s ease-in-out infinite; }
  .sleep-twirl{ animation: sleep-twirl-kf 4.2s ease-in-out infinite; }

  /* Layout */
  .sleep-grid{ display:grid; gap: 3rem; align-items: center; }
  @media (min-width:1024px){ .sleep-grid{ grid-template-rows:1fr 1fr; gap:4rem; } }

  .sleep-accent{ color: #FF842E; }
  .sleep-hero-sub{
    font-size: 18px; color:#334155; text-align: start;
   }

  /* Right side */
  .sleep-right{ position: relative; }
  .sleep-img-grid{ display:grid; grid-template-columns:1fr 1fr; gap:2rem; height:500px; }
  .sleep-card{
    position:relative; overflow:hidden; border-radius:16px;
    background: linear-gradient(135deg, #fff, transparent);
  }
  .sleep-card img{ width:100%; height:100%; object-fit:cover; display:block; }
  .sleep-card::after{ content:""; position:absolute; inset:0; background: linear-gradient(0deg,  rgba(0,0,0,0.40), transparent); }
  .sleep-card figcaption{ position:absolute; inset-inline-start:1rem; bottom:1rem; color:#fff; font-weight:600; z-index:1; }

  /* Dots */
  .sleep-dot{ position:absolute; border-radius:999px; opacity:.6; }
  .sleep-dot-a{ width:4rem; height:4rem; inset-inline-end:-1rem; top:-1rem; background:#FF842E; }
  .sleep-dot-b{ width:6rem; height:6rem; inset-inline-start:-1.5rem; bottom:-1.5rem; background:#FF842E; opacity:.4; }

  /* Utilities */
  @keyframes sleep-pulse{ 0%,100%{opacity:.6} 50%{opacity:1} }
.sleep-intake-section {
    margin-top: clamp(2rem, 5vw, 4rem)
  }
  .sleep-intake__header {
    margin-bottom: clamp(2rem, 5vw, 3rem);
    display: flex;
  justify-content: space-between;
  align-items: center;
  }

  .sleep-intake__header h2 {
    font-size: clamp(2.5rem, 5vw, 3.75rem);
    color:  #28282A;
    font-style: normal;
    font-weight: 600;
    line-height: 4.5rem;
    letter-spacing: -0.075rem;
    max-width: 20ch;
    text-align: start;;
  }

  .sleep-intake__header p {
    font-size: clamp(2rem, 3.5vw, 2.25rem);
    color:  #28282A;
  text-align: end;
  font-style: normal;
  font-weight: 500;
  line-height: 2.25rem;
    max-width: 40ch;
  }

  .sleep-intake__grid {
    display: grid;
    gap: clamp(1.5rem, 4vw, 2.5rem);
    grid-template-columns: 1fr;
  }

  .sleep-intake__card,
  .sleep-intake__features,
  .sleep-intake__pricing,
    .sleep-intake__redirect{
    padding: clamp(1rem, 3vw, 2rem);
  border-radius: 1rem;
  background:  #F4F5F5;
  }

  .sleep-intake__image {
    width: 100%;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
  }

  .sleep-intake__features h3 {
    font-size: clamp(1.2rem, 2.5vw, 1.5rem);
    color: #636569;
  text-align: center;
  font-style: normal;
  font-weight: 500;
  line-height: 1.875rem;
    margin-bottom: 1rem;
  }
  .sleep-intake__features {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .sleep-intake__features ul {
    flex: 1; /* stretch to take up remaining vertical space */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* distribute <li>s evenly */
    list-style: none;
    padding: 0
  }

  .sleep-intake__features li {
    display: flex;
    align-items: start;
    color:  #28282A;
    font-size:clamp(1.575rem, 2.3vw, 2rem);
    font-weight: 500;
    line-height: 1.5;
    text-align: start;;
    gap: 1.5rem;
  }

  .sleep-intake__pricing .was-price {
    font-weight: bold;
    color:  #28282A;
  font-size: 2.25rem;
  font-style: normal;
  font-weight: 600;
  line-height: 1.875rem;
  }

  .sleep-intake__pricing .price {
    font-size: clamp(2rem, 5vw, 3rem);
    color:  #F79009;
    font-size: 4.75rem;
    font-style: normal;
    font-weight: 600;
    line-height: 4.5rem;
    letter-spacing: -0.075rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    margin-inline-end: auto;
    margin-inline-start: auto;
    text-align: center;
  }

  .sleep-intake__pricing .now-free {
    color: #F79009;
    font-size: 1.85rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.875rem;
  }
  .sleep-intake__pricing-wrap {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .sleep-intake__pricing .now-free span {

    color: var(--Black, #000);
  }
  .sleep-intake__redirect {
    display: flex;
    align-items: center;
  }

  .sleep-intake__redirect img {
    height: auto;
    width: auto;
    max-height: 6.5rem;
    max-width: 100%;
    object-fit: contain;
  }

  .highlight {
   color: var(--Warning-500, #F79009);

  }
  @media (min-width: 769px) and (max-width: 1024px) {
    .sleep-intake__grid {
      grid-template-columns: 2fr 1fr; /* Emulates desktop layout */
      grid-template-areas:
        "card features"
        "pricing pricing";
    }

    .sleep-intake__card {
      grid-area: card;
    }

    .sleep-intake__features {
      grid-area: features;
    }

   .sleep-intake__pricing-wrap {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 100%;
    }

    .sleep-intake__pricing,
    .sleep-intake__redirect {
      flex: 1;
    }

    .sleep-intake__header {
      flex-direction: column;
      align-items: flex-start;
      gap: 1.5rem;
    }

    .sleep-intake__header h2,
    .sleep-intake__header p {
      text-align: start;;
      max-width: 100%;
    }
  }

  /* Responsive layout */
  @media (min-width: 481px) {
    .sleep-intake__grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (min-width: 769px) {
    .sleep-intake__grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  .sleep-intake__header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
  }

  .sleep-intake__header h2 {
    margin: 0;
  }

  .sleep-intake__header p {
    margin: 0;
  }

  @media (max-width: 768px) {
    .sleep-intake__header {
      flex-direction: column;
      align-items: flex-start;
      text-align: start;;
    }

    .sleep-intake__header h2,
    .sleep-intake__header p {
      width: 100%;
    }

     .sleep-intake__pricing-wrap {
      height:50vh;
       padding-bottom: 16px;
    }
  }
.wb-grid{ display:grid; gap:48px; align-items:self-start; }
  @media (min-width:1024px){ .wb-grid{ grid-template-columns:1fr 1fr; gap:48px; } }
  .web-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .wb-features{ display:grid; gap:16px; margin-bottom:32px; }
  .wb-feature{ display:flex; align-items:flex-start; gap:12px; }
  .wb-ico{
    width:36px; height:36px; border-radius:999px; background:#FFEEE2;
    display:flex; align-items:center; justify-content:center; margin-top:2px; flex-shrink:0;
  }
  .wb-list-row{
    display:flex; align-items:center; justify-content:start;
    padding:10px 0; border-bottom:1px solid rgba(2,6,23,.08);
  }
  .ico{ width:20px; height:20px; }

  .wb-note{
    background:rgba(255,132,46,.08); border:1px solid rgba(255,132,46,.25);
    border-radius:12px; padding:12px 14px;
  }
  .wb-card__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.5rem; }

  .sleep-wb-card{
    background:#fff; border:1px solid #e2e8f0; border-radius:16px; padding:2rem; box-shadow:0 10px 18px rgba(0,0,0,.05);
  }
  .sleep-wb-card-badge{
    width:76px; height:76px; border-radius:999px; background:#FFEEE2;
  }
  @media(max-width: 767px) {
    .sleep-wb-card-badge {
      display: none;
    }
  }
  .sleep-wb-card-header {
        display:flex; align-items:self-end; justify-content:space-between;
  }
  .ico-lg{ width:32px; height:32px; }

  .wb-list{ display:grid; gap:0; }
  .wb-list-row.no-border{ border-bottom:none; }
  .wb-list-text{
    font-size: 14px;
    color: rgba(0, 0, 0, 0.61);
    line-height: 1.6;
  }
  .check{ width:18px; height:18px; }

  .wb-badge-img { width:100%; height:100%; }

  @media (prefers-reduced-motion: no-preference){
    .wb-summary-chev{ transition: transform .28s ease; }
  }
  /* Disclosure (summary) */
  .wb-disclosure{ padding-top:12px; }
  .wb-summary{
    cursor:pointer;
    list-style:none;
    display:flex;
    align-items:center;
    justify-content:start; /* right align the clickable label */
    gap:8px;
    font-size:14px;
    font-weight:600;
    color: #0000009c;
  }
  .wb-summary::-webkit-details-marker{ display:none; }
  .wb-summary-chev{ transition:transform .2s ease; }
  .wb-disclosure[open] .wb-summary-chev{ transform:rotate(180deg); }

  .wb-disclosure-content{ margin-top:12px;overflow: hidden; }
  .wb-phase{ margin-bottom:12px; }
  .wb-phase-title{
    margin:0 0 4px 0;
    font-size:14px;
    line-height:1.4;
    color:#0f172a;
    font-weight:600;
  }
  .wb-phase-text{
    font-size:14px;
    color:rgba(0,0,0,.68);
    line-height:1.6;
  }
  .wb-summary-richtext :where(p, ul, ol){ margin:0 0 10px 0; }
.spa-activities__sub{
    font-weight: 400;
    font-size: 1.125rem;
    color:#E38748;
    margin-top:0.75rem;
  }

  .spa-activities__grid{
    list-style:none;
    margin:0;
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    overflow-x:hidden;
    scroll-behavior:auto;
    padding: 12px;
  }

  /* === Card layout === */
  .spa-activity-card{
    display:flex;
    flex-direction:column;
    border-radius:16px;
    overflow:hidden;
    background:#fff;
    box-shadow:0 14px 28px rgba(32,64, 112,.06);
  }
    .spa-activity-card__body{
    display:flex;
    gap:1.75rem;
    padding:2rem clamp(1.5rem,3vw,2.5rem);
  }
  .spa-activity-card__badge{
    height:84px;
  }
  .spa-activity-card__badge img{
    width:78px;
    height:78px;
    object-fit: contain;
  }
  .spa-activity-card__info{
    flex:1;
  }

  .spa-activity-card__desc{
    display: inline-block;
    text-align: justify;
  }
  .spa-activity-card__columns{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:1.5rem;
  }
    .spa-activity-card__col li{
    position:relative;
    padding-inline-start:1.45rem;
    font-weight: 500;
    display:flex;
    align-items:center;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.61);
    text-align: start;
    margin: 0;
  }
  .spa-activity-card__col li::before{
    content:"";
    position:absolute;
    inset-inline-start:0;
    width:.65rem;
    height:.65rem;
    border-radius:50%;
    background:#FF842E;
    top:10px;
  }


    /* Ensure every card has a fixed width, so scrolling is smooth */
    .spa-activity-card{
      flex:0 0 85%;
      max-width:800px;
    }

    /* Optional: hide the native scrollbar (WebKit‐only, graceful‑degrade) */
    .spa-activities__grid::-webkit-scrollbar{ display:none; }


  /* === Responsive === */
  @media (min-width: 980px){
    .spa-activities__grid{
      gap:3rem;
    }
    .spa-activity-card{
      flex-direction:row;
    }
    .spa-activity-card__body{
      flex:1 1 70%;
    }
    .spa-activity-card__stat{
      flex:0 0 30%;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
    }
  }

  @media(min-width:768px){
      .spa-activity-card{ flex:0 0 40%; }
    }
    @media(min-width:1100px){
      .spa-activity-card{ flex:0 0 50%; }
    }


  @media screen and (min-width:767px) and (max-width: 991px) {
    .spa-activities__grid {
      overflow-x: scroll;
    }
    .spa-activity-card {
      flex: 0 0 85%;
    }
  }

  @media (max-width: 767px){
    .spa-activities__grid{
      flex-direction:column!important;
      gap:1.25rem!important;
      overflow-x:visible!important;
      padding:0 1rem!important;
    }
    /* cards fill full width */
    .spa-activity-card{
      flex:0 0 100%!important;
      max-width:100%!important;
    }
    .spa-activity-card__badge {
      display: none;
    }
    .spa-activity-card__body{ gap:1rem; padding:1.5rem 1rem; }

    /* trim big desktop type sizes so they fit */
    .spa-activity-card__title{ font-size:1.5rem!important; }
    .spa-activity-card__desc{ font-size:.95rem!important; }
    .spa-activity-card__col li{ font-size:.95rem!important; }
  }
.amh-grid {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }

  .amh-icon-wrap {
    width: 3rem;
    height: 3rem;
    margin-bottom: 1rem;
  }
  .amh-icon {
    width: 100%;
    height: auto;
  }

  .amh-list li {
    margin-bottom: 0.75rem;
    position: relative;
    padding-inline-start: 1.5rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.61);
    text-align: start;
  }
  .amh-list li::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    width: 0.75rem;
    height: 0.75rem;
    background: #FF842E;
    border-radius: 9999px;
  }
.impact__intro {
    max-width: 70%;
    margin: 0 auto 2rem;
  }

  /* ---------- grid ---------- */
  .impact__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 2rem;
  }
  @media (min-width: 900px) {
    .impact__grid { grid-template-columns: repeat(2, 1fr); }
  }

  /* ---------- card ---------- */

  .impact-card__header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    text-align: center;
  }


  .impact-card__bullets {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
  }
  .impact-card__bullets li {
    font-size: 14px;
    color: #4a545e;
    margin: .4rem 0;
    text-align: start;
    position: relative;
    padding-inline-start: 2rem;
  }
  .impact-card__bullets li + li { margin-top: 0.7rem; }
  .impact-card__bullets li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 0.8rem;
    width: 1rem;
    height: 1rem;
    border: 2px solid var(--accent);
    border-radius: 50%;
  }

  .impact-card__brain {
    color: #334155;
    margin: auto 0 0;
  }
.rb-divider {
    display:block;
    width:180px;
    height:4px;
    margin:0 auto 1.75rem;
    background:linear-gradient(90deg,#204070,#537CBA);
    border-radius:4px;
  }

  .rb-card-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1.5rem;
    align-items: stretch;
  }

  .rb-card { grid-column: span 12; }

  @media (min-width: 640px) {
    .rb-card { grid-column: span 6; }
  }
  @media (min-width: 1024px) {
    .rb-card { grid-column: span 4; }
  }

  .rb-card{
    display: grid;
    grid-template-rows: auto 1fr auto;
    row-gap: 1rem;
    height: 100%;
    padding: 1.75rem 1.5rem;
    border-radius: .75rem;
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    box-shadow: 0 8px 24px -8px rgba(32, 63, 112, .18);
  }

  .rb-card-copy{
    display: grid;
    text-align: start;
    margin: 1.5rem 0;
  }

  @media (max-width:480px){
    .rb-card { padding:1.25rem; }
    .welbewust-base { font-size:.88rem; }
  }
/* ——— SECTION ——— */
  .neuro-section-wrapper{
    background: radial-gradient(circle at center, #F5F8FA 0%, #F5F8FA 45%, transparent 100%);
    margin: 0 auto;
  }

  /* ——— GRID WRAPPER (unchanged) ——— */
  .neuro-wrapper{ display:grid; gap:2rem; }
  .neuro-card-grid{ display:grid; gap:1.5rem; }
  .grid-two{   grid-template-columns:repeat(2,1fr); }
  .grid-three{ grid-template-columns:repeat(3,1fr);padding-top:20px; }
  @media(max-width:768px){
    .grid-two,.grid-three{ grid-template-columns:1fr; }
  }

  .neuro-card-copy{
    display: grid;
    text-align: justify;
  }

  .neuro-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  /* ——— RESEARCH‑ARTICLE BUTTONS ——— */
  .article-links{ margin-top:3rem; }
  .article-links-heading{
    font-size:1.25rem;
    font-weight:700;
    line-height:1.4;
    color:#f8fafc;
    margin:0 0 1rem;
  }

  .article-links-grid{
    display:grid;
    gap:1rem;
    grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  }

  .article-link{
    display:flex;
    align-items:center;
    gap:.6rem;
    padding:1rem 1.25rem;
    font-size:1rem;
    font-weight:600;
    line-height:1.4;
    color:#0f172a;
    background:#ffffff;
    border:1px solid #e2e8f0;
    border-radius:.75rem;
    text-decoration:none;
    transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease;
  }

  .neuro-card-icon {
    width: 48px;
    height:48px;
  }

  /* outward‑arrow icon via CSS mask */
  .article-link::before{
    content:"";
    width:1rem;
    height:1rem;
    flex:none;
    background:#0f172a;
    mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="black" viewBox="0 0 24 24"><path d="M14 3h7v7h-2V6.414l-9.293 9.293-1.414-1.414L17.586 5H14V3ZM5 5h7v2H5v12h12v-7h2v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2Z"/></svg>') center/contain no-repeat;
  }

  .article-link:hover{
    background:#f0fdfa;
    border-color:#99f6e4;
    box-shadow:0 3px 10px rgba(16,185,129,.15);
  }
.plan-badge{
    position:absolute;
    top:1.25rem;
    inset-inline-start:1.25rem;
    font-size:0.75rem;
    font-weight:600;
    line-height:1;
    color:#c2410c;
    background:#ffedd5;
    padding:0.25rem 0.6rem;
    border-radius:0.5rem;
  }

  .plan-grid{
    display:grid;
    gap:1.5rem;

  }
  @media(min-width:900px){
    .plan-grid{
      grid-template-columns:2fr 1fr;
      gap:3rem;
      padding-top: 1rem;
    }
  }

  .plan-features{
    display:grid;
    gap:1.25rem;
  }
  @media(min-width:700px){
    .plan-features{ grid-template-columns:repeat(2,1fr); }
  }

  .plan-item{
    display: flex;
    align-items: center;
    gap: .5rem;
    text-align: start;
  }

  .plan-item:not(:has(.plan-icon))::before{
    content:"";
    display:inline-block;
    border-radius:50%;
    background: #FF842E;
    mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="white" viewBox="0 0 24 24"><path d="M20.285 6.709a1 1 0 00-1.414-1.414l-9.192 9.191-4.243-4.242a1 1 0 10-1.414 1.414l5 5a1 1 0 001.414 0l9.849-9.949z"/></svg>') center/65% 65% no-repeat;
    flex:none;
    margin: 0.25rem 0;
    width: 1.75rem;
    height: 1.75rem;
    color: #FF842E;
    flex: 0 0 auto;
  }
  .plan-icon{
    width: 22px;
    height: 22px;
    flex:none;
    filter:drop-shadow(0 0 0 #FF842E);
  }

  .plan-price{
    text-align:end;
  }
  .plan-price-now{
    font-size:22px;
    font-weight:700;
    line-height:1.2;
    color:#0f172a;
  }
  .plan-price-old{
    font-size:1rem;
    font-weight:500;
    line-height:1;
    color:#94a3b8;
    text-decoration:line-through;
    margin:0.2rem 0;
  }
  .plan-price-period{
    font-size:0.875rem;
    font-weight:400;
    line-height:1.3;
    color:#94a3b8;
    margin:0;
  }

  .plan-ctas{
    display:flex;
    flex-direction:column;
    gap:1rem;
    align-items:end;
  }

  @media (max-width:600px){
    .plan-price{
      text-align:center;
      justify-self:center;
      margin-bottom:1.25rem;
    }

    .plan-ctas{
      align-items:center;
      flex-direction:row;
      justify-content:center;
    }
    .plan-btn{
      width:100%;
      max-width:260px;
    }
  }

  .plan-btn{
    position: relative;
    overflow: hidden;
    display: inline-block;
    text-align: center;
    padding: 8px 14px 8px 14px;
    background: #ff852e;
    border-radius: 20px;
    color: #fff;
    font-size: 16px;
    text-decoration: none;
    transition: all .3s ease;
    cursor: pointer;
    transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease;
  }
  .plan-btn:hover{
    background: #0e3e77;
    color: #fff;
    transform: translateY(-2px);
  }
.therapy-hero-section {
        position: relative;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        padding: 5% 2%;
        width: 100%;
        margin-inline: auto;
        padding: clamp(2rem, 5vw, 6rem) clamp(1rem, 5vw, 4rem);
        background: linear-gradient(180deg, #6885C8 0%, rgba(193, 220, 237, .9) 100%);
        border-radius: clamp(16px, 2vw, 28px);
        overflow: hidden;
        position: relative;
        max-width: 100%;
      }

      @media (min-width: 1025px) {
        .therapy-hero-section {
          height: auto;
        }
      }

      .therapy-hero-content {
        max-width: 1250px;
        flex-direction: column;
        position: relative;
      }

      .therapy-hero-heading {
        color: rgba(255, 255, 255, 0.7);
        text-align: center;
        text-shadow: 0px 12px 16px rgba(255, 255, 255, 0.08), 0px 4px 6px rgba(10, 13, 18, 0.03);
        font-size: clamp(2rem, 8vw, 9rem);
        font-style: normal;
        font-weight: 600;
        line-height: 1.1;
        letter-spacing: -0.075rem;
        position: relative;
        z-index: 1;
        max-width: 70%;
        margin-inline-start: auto;
        margin-inline-end: auto;
        margin-top: 0;
      }

      .hero-main-image {
        width: auto;
        height: 120vh;
        object-fit: contain;
        position: relative;
        z-index: 1;
      }


      .therapy-card {
        position: absolute;
        padding: 1rem;
        max-width: 34.5rem;
        font-size: clamp(1.375rem, 1.8vw, 1.5rem);
        font-style: normal;
        font-weight: 500;
        display: flex;
        gap: 0.75rem;
        align-items: flex-start;
        text-align: start;
        background: rgba(255, 255, 255, .16);
        color: #fff;
        backdrop-filter: blur(18px);
        border-radius: 16px;
        padding: 12px 14px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
      }


      .step-circle {
        flex-shrink: 0;
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        font-weight: 700;
        color: #fff;
      }

      .therapy-card img {
        width: 8.5rem;
        max-height: 8.5rem;
        height: 100%;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        border-radius: 0.5rem;
        flex-shrink: 0;
      }

      .therapy-card p {
        color: #fff;
      }

      .top-left {
        top: 37%;
        inset-inline-start: 0%;
      }

      .top-right {
        top: 20%;
        inset-inline-end: 5%;
      }

      .bottom-right {
          bottom: 25%;
          inset-inline-end: 5%;
      }

      .bottom-left {
        bottom: 0%;
        inset-inline-start: 0%;
      }
      @media screen and (min-width: 768px) and (max-width: 991px) {
        .hero-main-image {
            height: 100vh;
        }
        .therapy-card {
          z-index: 2;
        }
        .top-right {
          top: 11%;
          inset-inline-end: 5%;
        }
        .top-left {
            top: 33%;
            inset-inline-start: 0%;
        }
        .bottom-left {
          bottom: 0;
          inset-inline-start: 0;
        }
      }


    @media(max-width:767px) {
      .hero-main-image{ display:none!important;        height: 80vh;
        margin-top: -4rem; }

      .therapy-hero-content{
        align-items:stretch;     
        gap:1.25rem;
      }

      .therapy-card{
        position:static!important;   /* lose absolute coords          */
        display:flex;
        flex-direction:row;
        max-width:none!important;
        width:100%;
        padding:1rem 1.25rem;
        background:rgba(62, 62, 62, 0.8);      /* slightly brighter for legibility */
        backdrop-filter:blur(20px);
        border-radius:1rem;
        margin-bottom: 1rem;
        max-width: 40rem;
        flex-direction: row;
        z-index: 2;
      }
      .therapy-card:last-child{ margin-bottom:0; }

      /* 4. tidy step circles & text sizes */
      .step-circle{
        width:2.75rem;height:2.75rem;
        font-size:1.125rem;
        margin-top:.25rem;
      }
      .therapy-card p{ font-size:14px; text-align: justify; line-height:1.45; }

      /* 5. headline & section paddings trimmed */
      .therapy-hero-heading{ font-size:clamp(1.75rem,6.5vw,2.5rem); max-width:100%; }
      .therapy-hero-section{ padding:1.5rem 1rem; height: auto; }
  
      .top-left {
        top: 20%;
        inset-inline-start: 5%;
      }

      .top-right {
        top: 20%;
        inset-inline-end: 5%;
      }

      .bottom-right {
        bottom: 20%;
        inset-inline-start: 5%;
      }
    }
.testimonial-carousel-sport-section {
  box-sizing: border-box;
  display:flex;
}

.video-container {
  margin-bottom: clamp(2rem, 4vw + 1rem, 4rem);
  padding-inline: clamp(1rem, 2vw, 2rem);
  flex: 0 0 100%;
  display: flex; 
  justify-content: center; 
  transform-origin: left center;  
  flex-basis: 65%;
}

.video-carousal-container {
  display: flex;
  align-items: center; 
  overflow:hidden;
  width: 100%;
  justify-content: center;
}
/* Carousel Container with Responsive Margins */
.carousel-container {
  padding-inline: clamp(0.5rem, 1vw, 1rem);
  margin: 0;
  flex: 0 0 0%;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 1;
  height: 100%;
}

.testimonial-carousel-video-wrapper {
  position: relative;
}

.testimonial-carousel-video-wrapper video {
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: auto;
}

.carousel-item {
  border-radius: 1rem;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s ease;
  margin: auto;
  width: 100%;
  position: relative;
}

.carousel-item:focus-visible {
  outline: 2px dashed #555;
}
  
.carousel-item video {
  width: 100%;
  height: auto;
  display: block;
}

.expert-info {
  position: absolute;
  bottom: 1rem;
  inset-inline-start: 1rem;
  inset-inline-end: 1rem;
  padding: 1rem;
  border-radius: 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.expert-info h3 {
  margin: 0;
  color: white;
  font-size: clamp(1rem, 1.2vw + 0.5rem, 1.75rem); 
  font-style: normal;
  font-weight: 400;
  line-height: 1.4;
  text-align: start;
}

.expert-info p {
  margin: 0.25rem 0 0;
  font-size: clamp(0.875rem, 1vw + 0.25rem, 1.25rem); 
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  color: white;
  text-align: start;
}

.carousel-and-controls {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  margin: 0 auto;
  overflow-x: hidden;
  overflow-y: scroll;
  height: 92%;
}

.testimonial-carousel-wrapper {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  position: relative;
}

.testimonial-carousel-track {
  display: flex;
  gap: clamp(1rem, 2vw, 1.5rem);
  transition: transform 0.4s ease;
  will-change: transform;
  scrollbar-width: none;
  height: 100%;
  padding-inline: clamp(1rem, 2vw, 2rem);
  flex-direction: column;
}

.testimonial-carousel-track::-webkit-scrollbar {
  display: none; 
}

.testimonial-carousel-card {
  width: 90vw;
  max-width: 380px;
  flex-shrink: 0;
  background: var(--Gray-50, #F4F5F5);
  padding: clamp(1rem, 2vw, 1.5rem);
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  font-size: 16px;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 60% !important;
  box-sizing: border-box;
  margin-bottom: clamp(0.5rem, 1vw, 1rem);
}

.testimonial-carousel-card span {
  margin-top: auto;
  color: #E38748;
  font-size: clamp(1.375rem, 1.8vw, 1.5rem);
  font-style: normal;
  font-weight: 400;
  line-height: clamp(1.5rem, 3vw, 1.75rem);
}

.testimonial-carousel-card p {
  color: var(--Gray-800, #28282A);
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
  font-size: clamp(1.375rem, 2.15vw, 1.75rem);
  font-weight: 500;
  line-height: 1.5;
  margin: 0;
}

.video-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 0.3s ease;
  opacity: 1;
}

.video-modal.hidden {
  opacity: 0;
  pointer-events: none;
}

.close-button {
  position: absolute;
  top: 1rem;
  inset-inline-end: 1rem;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  border: none;
  font-size: 2rem;
  line-height: 1;
  padding: 0.25em 0.5em;
  border-radius: 0.25em;
  cursor: pointer;
  z-index: 10000;
  transition: background 0.2s ease;
}

.close-button:hover {
  background: rgba(0, 0, 0, 0.8);
}

.modal-content {
  background: transparent;
  width: 90vw;
  max-height: none;
  position: relative;
  border-radius: 1rem;
  overflow: hidden;
  animation: scaleIn 0.3s ease-out;
}

.modal-content video {
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: 90vh;
  border-radius: 1rem;
  display: block;
  margin: 0 auto;
}

.carousel-controls {
  position: absolute;
  bottom: 0.5rem;
  inset-inline-end: 1rem;
  display: flex;
  gap: 0.5rem;
}

.carousel-btn {
  border: none;
  border-radius: 50%;
  width: 2.5rem;
  height: 2.5rem;
  cursor: pointer;
  transition: opacity 0.2s ease;
  background: none;
}

.carousel-btn:hover {
  opacity: 0.8;
}

/* Responsive Breakpoints */
@media (max-width: 480px) {
  .video-container {
    margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
    padding-inline: clamp(0.75rem, 1.5vw, 1.5rem);
    flex: auto;

  }
  
  .carousel-container {
    margin-top: clamp(0.75rem, 1.5vw, 1.5rem);
  }
  
  .testimonial-carousel-card {
    width: 380px;
    max-width: 85vw;
    padding: clamp(0.75rem, 1.5vw, 1rem);
  }
  
  .testimonial-carousel-track {
    gap: clamp(0.75rem, 1.5vw, 1rem);
    padding-inline: clamp(0.75rem, 1.5vw, 1.5rem);
    max-width: 24rem;
  }
}

@media (min-width: 481px) and (max-width: 768px) {
  .video-container {
    margin-bottom: clamp(2rem, 3.5vw, 3rem);
    padding-inline: clamp(1rem, 1.75vw, 1.75rem);
  }
  
  .carousel-container {
    margin-top: clamp(1rem, 1.75vw, 1.75rem);
  }
  
  .testimonial-carousel-card {
    width: 350px;
    max-width: 60vw;
    padding: clamp(1rem, 1.75vw, 1.25rem);
  }
  
  .testimonial-carousel-track {
    gap: clamp(1rem, 1.75vw, 1.25rem);
    padding-inline: clamp(1rem, 1.75vw, 1.75rem);
  }
}

@media (min-width: 769px) and (max-width: 1279px) {
  .video-container {
    margin-bottom: clamp(2.5rem, 4vw, 3.5rem);
    padding-inline: clamp(1.25rem, 2vw, 2rem);
  }
  
  .carousel-container {
    margin-top: clamp(1.25rem, 2vw, 2rem);
  }
  
  .testimonial-carousel-card {
    width: 400px;
    max-width: 45vw;
    padding: clamp(1.25rem, 2vw, 1.5rem);
  }
  
  .testimonial-carousel-track {
    gap: clamp(1.25rem, 2vw, 1.5rem);
    padding-inline: clamp(1.25rem, 2vw, 2rem);
  }
}

@media (max-width: 768px) {
  .testimonial-carousel-wrapper {
    height: 25rem; 
  }
}

@media (max-width: 1024px) {
  .carousel-and-controls {
    overflow: hidden;
  }
}



@media (min-width: 769px) {
  .testimonial-carousel-wrapper {
    height: 42rem; 
  }
}

@media (min-width: 1280px) {
  .video-container {
    margin-bottom: clamp(3rem, 4vw + 1rem, 4rem);
    padding-inline: clamp(1.5rem, 2vw, 2rem);
  }
  
  .carousel-container {
    margin-top: -2%;
  }
  
  .testimonial-carousel-card {
    width: 500px;
    padding: clamp(1.5rem, 2vw, 2rem);
  }
  
  .testimonial-carousel-track {
    gap: clamp(1.5rem, 2vw, 2rem);
    padding-inline: clamp(1.5rem, 2vw, 2rem);
  }
  
  .carousel-controls {
    position: absolute;
    bottom: 1rem;
    inset-inline-end: 1rem;
    justify-content: flex-end;
  }
}

@keyframes scaleIn {
  from {
    transform: scale(0.8);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

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

.video-modal.fade-out {
  animation: fadeOut 0.3s ease forwards;
}

.video-container {
  transform-origin: top left;
}

@media (max-width: 767px){

  .video-carousal-container{
    flex-direction: column;
    gap: 1.5rem;
    align-items: stretch;
  }

  .carousel-and-controls{
    height: auto !important;
    overflow: visible !important;
  }

  .testimonial-carousel-wrapper,
  .testimonial-carousel-track{
    height: auto !important; 
    flex-direction: row;       
    gap: 1rem;
    overflow-x: auto;  
    scrollbar-width: none; 
  }
  .testimonial-carousel-track::-webkit-scrollbar{display:none;}

  .testimonial-carousel-card{
    flex: 0 0 85%;  
    max-width: 18rem;
    height: auto !important; 
  }
}
.track-apps__intro{
    max-width: 70%;
    margin: 0 auto 2rem;
  }

  .track-apps__grid{
    list-style:none;
    padding:0;
    margin:0;
    display:grid;
    gap:2rem;
  }
  @media(min-width:768px){
    .track-apps__grid{
      grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    }
  }
  
  .track-card__icon{
    min-width:42px;
    min-height:42px;
    border-radius:1rem;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:1.25rem;
  }

  .track-card__icon img{
    width:32px;
    height:32px;
  }

  .track-card__list li{
    display: flex;
    gap: .5rem;
    align-items: flex-start;
    font-size: 14px;
    color: #4a545e;
    margin: .4rem 0;
    text-align: start;
  }
.sports-intake__header {
    display: flex;
    flex-direction: row;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
    margin-bottom: clamp(2rem, 5vw, 3rem);
    justify-content: space-between;
    align-items: center;
  }

  .sports-intake__header h2 {
      margin: 0;
      font-size: clamp(3rem, 5vw, 3.5rem);
      font-style: normal;
      font-weight: 600;
      letter-spacing: -0.075rem;
      text-align: start;
      color: #E38748;
  }

  .sports-intake__header p {
    margin: 0;
    font-size: clamp(1rem, 3.5vw, 1.5rem);
    color: #90A0B8;
    text-align: justify;
    font-style: normal;
    font-weight: 500;
    line-height: 2.25rem;
    max-width: 40ch;
  }

  .sports-intake__grid {
    display: grid;
    gap: clamp(1.5rem, 4vw, 2.5rem);
    grid-template-columns: 1fr;
  }
  .sports-intake__pricing {
    margin-bottom: 1.5rem;
  }
  .sports-intake__card,
  .sports-intake__features,
  .sports-intake__pricing,
    .sports-intake__redirect{
    padding: clamp(1rem, 3vw, 2rem);
    border-radius: 1rem;
    background-color: #FCF3ED;
  }

  .sports-intake__image {
    width: 100%;
    border-radius: 0.5rem;
    height: 50%;
  }

  .sports-intake__features h3 {
    font-size: clamp(1.2rem, 2.5vw, 1.5rem);
    color:  #204070;
    text-align: center;
    font-style: normal;
    font-weight: 500;
    line-height: 1.875rem;
  }
  .sports-intake__features {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .sports-intake__features .features-list {
    flex: 1; /* stretch to take up remaining vertical space */
    display: flex;
    flex-direction: column;
    justify-content: space-around; /* distribute <li>s evenly */
    list-style: none;
    padding: 0;
  }

  .feature-item {
    display: flex;
    align-items: center;
    color: #28282A;
    font-size: clamp(1.5rem, 2.3vw, 1.6rem);
    font-weight: 500;
    line-height: 1.5;
    text-align: start;
    gap: 1.5rem;
  }

  .feature-item::before {
    background-image: var(--icon-url);
    content: '';
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 3.5rem;
    min-height: 3.5rem;
    background-color: #fff;
    background-repeat: no-repeat;
    background-size: 1.75rem 1.75rem;
    background-position: center;
  }

  @media (max-width: 767px) {
    .feature-item { flex-direction: row; margin: 10px; gap: 2rem;}
  }

  .sports-intake__pricing .was-price {
    color: #204070;
    font-size: 2.25rem;
    font-weight: 800;
    line-height: normal;
    margin-bottom: .75rem;
  }

  .sports-intake__pricing .price {
    font-size: clamp(2rem, 5vw, 3rem);
    color: #DD2590;
    font-size: 4.75rem;
    font-style: normal;
    font-weight: 600;
    line-height: 4.5rem;
    letter-spacing: -0.075rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    margin-inline-end: auto;
    margin-inline-start: auto;
    text-align: center;
  }

  .sports-intake__pricing .now-free {
    color: #DD2590;
    font-size: 1.85rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.875rem;
  }
  .sports-intake__pricing-wrap {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .sports-intake__pricing .now-free span {
   color: #000
  }
  .sports-intake__redirect {
    display: flex;
    align-items: center;
    transition: all 0.5s ease;
  }

  .sports-intake__redirect:hover {
    background-color: #FF842E;
  }

  .sports-intake__redirect:hover .gym-card__title {
    color: #FFF;
  }


  .sports-intake__redirect:hover .gym-card__subtitle {
    color: #FFF;
  }

  .sports-intake__redirect img {
    height: auto;
    width: auto;
    max-height: 6.5rem;
    max-width: 100%;
    object-fit: contain;
  }



  .gym-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-decoration: none;
    justify-content: space-between;
    color: black;
    width: 100%;
  }

  .gym-card__icon img {
    width: 4.5rem;
    height: 4.5rem;
    object-fit: contain;
    border-radius: 0.5rem;
  }

  .gym-card__text {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0.8rem;
  }

  .gym-card__title {
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.4;
    margin: 0;
  }

  .gym-card__subtitle {
  color: #636569;
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5rem; /* 171.429% */
    margin: 0.25rem 0 0 0;
  }

  .gym-card__arrow svg {
  width: 1.875rem;
  height: 1.875rem;
  }


  .highlight {
   color: #CC7A41;

  }
  @media (min-width: 769px) and (max-width: 1024px) {
    .sports-intake__grid {
      grid-template-columns: 2fr 1fr; /* Emulates desktop layout */
      grid-template-areas:
        "card features"
        "pricing pricing";
    }

    .sports-intake__card {
      grid-area: card;
    }

    .sports-intake__features {
      grid-area: features;
    }

   .sports-intake__pricing-wrap {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 100%;
    }

    .sports-intake__pricing,
    .sports-intake__redirect {
      flex: 1;
    }

    .sports-intake__header {
      flex-direction: column;
      align-items: flex-start;
      gap: 1.5rem;
    }

    .sports-intake__header h2,
    .sports-intake__header p {
      text-align: start;
      max-width: 100%;
      color: #636569;
    }
  }

  /* Responsive layout */
  @media (min-width: 481px) {
    .sports-intake__grid {
      grid-template-columns: repeat(2, 1fr);
    }
    .sports-intake__header {
      flex-direction: row;
      align-items: flex-end;
      text-align: start;
      justify-content: space-between;
    }
    .sports-intake__header p {
      width: 100%;
    }

     .sports-intake__pricing-wrap {
      height:auto;
    }
  }

  @media (min-width: 769px) {
    .sports-intake__grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }


  @media (min-width: 768px) and (max-width: 991px) {
    .sports-intake__header {
      flex-direction: row;
      flex-wrap: nowrap;
    }
  }
.journey-grid{
    display: grid;
    gap: 8rem;
    align-items: center;
    grid-template-columns: minmax(280px, 560px) minmax(300px, 1fr);
  }

  /* ---------- VIDEO ---------- */
  .video-wrap{
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 24px 50px rgba(2,6,23,.18);
  }


  .sport-right{ position:relative;z-index: -1; }
  .sport-canvas{
    --tileW: 40%;
    --ratio: 1;
    position:relative;
    height: clamp(320px, 40vw, 520px);
  }
  @media (min-width:640px){ .sport-canvas{ --tileW: 30%; } }
  @media (min-width:1024px){ .sport-canvas{ --tileW: 28%; } }

  .sport-tile{
    position: absolute;
    width: var(--tileW);
    aspect-ratio: var(--ratio);
    overflow: hidden;
    border-radius: 20px;
    --accent: #E5E7EB;
    box-shadow: 0 15px 20px rgba(2, 6, 23, .18), 8px 8px 0 2px var(--accent);
    transform: translate(var(--x, 0), var(--y, 0)) rotate(var(--rot, 0deg));
    transition: transform .25s ease, box-shadow .25s ease;
    will-change: transform;
  }
  .sport-tile:hover{ transform: translate(var(--x,0), var(--y,0)) rotate(var(--rot,0deg)) translateY(-2px); box-shadow:0 30px 60px rgba(2,6,23,.22), 0 0 0 12px var(--accent); }

  .sport-tile img{
    width:100%; height:100%; object-fit:cover; display:block; border-radius:12px;
  }
  @media(max-width: 576px) {
     .sport-hero-title{ text-align: center; font:700 32px/1.16 "Helvetica","Verdana Pro",sans-serif;}
     .sport-hero-sub {text-align: center;}
  }


  .points-list{
    display:flex;
    flex-direction: column;
    gap: 4rem;
  }

  .sj-point{
    display:flex;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background:#fff;
    border:1px solid #E5E7EB;
    border-radius: 16px;
    box-shadow: 0 8px 24px -8px rgba(32,63,112,.18);
    opacity: 0;
    transform: translateY(20px);
  }

  .sj-icon{
    flex: 0 0 auto;
    width: 32px; height: 32px;
    border-radius: 999px;
    display:grid; place-items:center;
  }
  .sj-icon-svg{ width: 26px; height: 26px; }
  .sj-icon-svg .ring{ fill: #fff; opacity:.96; }
  .sj-icon-svg .check{ fill:none; stroke:#FF842E; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }

  .sj-copy{ flex:1 1 auto; }


  .sport-wipe-overlay__shape{ position:absolute; inset-inline-start:0; inset-inline-end:0; top:0; width:100%; height:220px; display:block; }
  .sport-wipe-overlay__shape path,.sport-wipe-overlay__shape2 path{ fill:#eaf1fb; }

  /* in-view animation (no GSAP required) */
  @keyframes fadeUp{ from{opacity:0; transform:translateY(20px)} to{opacity:1; transform:translateY(0)} }
  .sj-point.in-view{ animation: fadeUp .6s cubic-bezier(.25,.8,.35,1) forwards; }

  /* ---------- Responsive ---------- */
  @media (max-width: 900px){
    .journey-grid{ grid-template-columns: 1fr; }
    .video-wrap{ max-width: 800px; }
  }

  .sport-wipe-overlay__shape2 {
      position:absolute; inset-inline-start:0; inset-inline-end:0; bottom:0; width:100%; height:220px; display:block;
  }
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;500&display=swap');

.ashwagandha-benefits-wrapper {
  background-color: #f5f8fa;
  padding: 10px 20px 40px;
}

.ashwagandha-section-title {
  text-align: center;
  font-size: 2.8rem;
  color: #204070;
  margin: 30px auto;
  font-weight: 600;
  max-width: 800px;
}

.ashwagandha-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
  max-width: 1000px;
  margin: 0 auto;
}

@media screen and (max-width: 768px) {
  .ashwagandha-grid {
    grid-template-columns: 1fr;
  }
}

.ashwagandha-card {
  background: #ffffff;
  padding: 28px;
  border-radius: 16px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease;
  
}

.ashwagandha-card:hover {
  transform: translateY(-6px);
}

.ashwagandha-title {
  font-size: 2.4rem;
  font-weight: 600;
  margin-bottom: 18px;
  color: #204070;
}

.ashwagandha-point {
  font-size: 1.7rem;
  color: #343537;
  margin-bottom: 12px;
  position: relative;
  padding-inline-start: 24px;
  line-height: 1.6;
  font-weight: 400;
}

.ashwagandha-point::before {
  content: "☘";
  position: absolute;
  inset-inline-start: 0;
  color: #e38748;
  font-size: 1.1rem;
  top: 4px;
}

.ashwagandha-article-link {
  margin-top: 18px;
}

.ashwagandha-article-link a {
  font-size: 1.3rem;
  color: #e38748;
  text-decoration: underline;
  font-weight: 500;
  transition: color 0.2s ease;
}

.ashwagandha-article-link a:hover {
  color: #cf703a;
  text-decoration: none;
}
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;500&display=swap');

.usage-guide-wrapper {
  background-color: #f5f8fa;
  padding: 5% 2%;
}

.usage-guide-title {
  font-size: 2.6rem;
  font-weight: bold;
  text-align: center;
  margin-bottom: 30px;
  color: #204070;
}

.usage-guide-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  margin-bottom: 50px;
}

.usage-card {
  background-color: #ffffff;
  border-radius: 14px;
  box-shadow: 0 6px 14px rgba(0,0,0,0.06);
  padding: 20px;
  max-width: 280px;
  flex: 1 1 260px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.usage-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 16px;
}

.usage-title {
  font-size: 1.5rem;
  font-weight: bold;
  color: #204070;
  margin-bottom: 8px;
}

.usage-desc {
  font-size: 1.3rem;
  color: #343537;
  font-weight: 400;
  text-align: justify;
}

.product-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
  align-items: stretch; /* ensures equal height boxes */
}

.product-box {
  background-color: #ffffff;
  border-radius: 16px;
  padding: 30px;
  box-shadow: 0 6px 14px rgba(0,0,0,0.06);
  flex: 1 1 480px; /* allows them to wrap if screen is narrow */
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
  min-height: 260px; /* forces equal height */
}

.product-img {
  width: 180px;
  height: 180px;
  object-fit: cover;
  border-radius: 12px;
  flex-shrink: 0;
}

.product-info {
  flex: 1 1 300px;
  text-align: start;
  background: none !important;
}



.product-title {
  font-size: 1.8rem;
  font-weight: bold;
  color: #204070;
  margin-bottom: 10px;
}

.product-desc {
  font-size: 1.4rem;
  color: #333;
  margin-bottom: 8px;
}

.product-price {
  font-size: 1.6rem;
  font-weight: 600;
  color: #e38748;
  margin-bottom: 6px;
}

.product-note {
  font-size: 1.3rem;
  color: #2c7a7b;
  margin-bottom: 16px;
}
.our-ethos__header{ text-align:center; margin-bottom:70px; }

  .our-ethos__subtext p{
    font-weight:400;
    color:#334155;
    line-height:1.4;
  }

  .our-ethos__grid{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    gap:60px;
  }

  .our-ethos__column{ display:flex; flex-direction:column; gap:50px; }

  .our-ethos__item{
    display:grid;
    grid-template-columns:auto 1fr;
    gap:20px;
    text-align:start;
  }

  .our-ethos__item-icon{
    width:30px; height:30px;
    stroke: var(--ethos-accent);
    margin-top:5px;
    flex-shrink:0;
  }

  .our-ethos__item-title{
    margin:0 0 1rem 0;
    font-size:20px;
    font-weight:700;
    color:rgba(0,0,0,.61);
  }


  .our-ethos__image-column{
    border-radius:20px;
    box-shadow:0 4px 15px rgba(28,29,30,.2);
    line-height:0;
    overflow:hidden;
  }

  .our-ethos__image-column img{
    display:block;
    width:100%;
    max-width:300px;
    height:auto;
    object-fit:cover;
  }

  /* Responsive */
  @media (max-width:990px){
    .our-ethos__subtext{ text-align:start; }
    .our-ethos__grid{ grid-template-columns:1fr; gap:50px; }
    .our-ethos__image-column{ order:2; margin:0 auto; }
    .our-ethos__column:first-of-type{ order:1; }
    .our-ethos__column:last-of-type{ order:3; }
  }

  /* --- Animations --- */
  .ethos-scroll-animate{
    opacity:0;
    transition: opacity .6s ease-out, transform .6s ease-out;
  }
  .our-ethos__header.ethos-scroll-animate{ transform:translateY(30px); }
  .our-ethos__image-column.ethos-scroll-animate{ transform:scale(.95); }
  .our-ethos__column:first-of-type .our-ethos__item.ethos-scroll-animate{ transform:translateX(-30px); }
  .our-ethos__column:last-of-type  .our-ethos__item.ethos-scroll-animate{ transform:translateX(30px); }

  /* Triggered */
  .ethos-scroll-animate.in-view{ opacity:1; transform:none; }

  /* Stagger per item */
  .our-ethos__item.ethos-scroll-animate.in-view{
    transition-delay: calc(var(--animation-order) * 100ms);
  }

  /* On mobile, neutralize horizontal offsets */
  @media (max-width:990px){
    .our-ethos__column:first-of-type .our-ethos__item.ethos-scroll-animate,
    .our-ethos__column:last-of-type  .our-ethos__item.ethos-scroll-animate{
      transform: translateX(0);
    }
  }
/* --- Section Specific Styles --- */
  .why-welbewust__section {
    padding: 6% 0; /* 6% top & bottom for rows */
  }

  /* --- Grid & Column Styles --- */
  .why-welbewust__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .why-welbewust__item {
    background-color: #ffffff;
    border-radius: 20px;
    box-shadow: 0 -1px 7px 15px rgba(150, 170, 180, 0.1);
    padding: 30px 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    text-align: center;
  }

  /* --- Content Styles --- */
  .why-welbewust__item-icon .why-welbewust__item-icon-img {
    width: 60px;
    height: 60px;
    object-fit: contain;
  }

  .why-welbewust__item-content {
    flex-direction: column;
  }

  /* --- Scroll Animation (static classes; JS adds .is-visible) --- */
  .why-animate {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .6s ease-out, transform .6s ease-out;
  }
  .why-animate.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* --- Responsive (Tablet) --- */
  @media (min-width: 750px) {
    .why-welbewust__grid {
      grid-template-columns: repeat(3, 1fr);
      gap: 30px;
    }
    .why-welbewust__item {
      padding: 40px 20px;
    }
  }

  /* --- Responsive (Desktop) --- */
  @media (min-width: 1200px) {
    .why-welbewust__grid {
      grid-template-columns: repeat(5, 1fr);
    }
  }
/* --- Base & Typography --- */
  .welbewust-subheading { color: #334155; }
  .welbewust-paragraph p:not(:last-child) { margin-bottom: 15px; }

  /* --- Main Content Layout --- */
  .how-it-works-journey__main-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 60px;
  }

  /* --- Video Player --- */
  .how-it-works-journey__video-wrapper {
    width: 100%;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background-color: #f0f0f0;
    cursor: pointer;
  }

  .how-it-works-journey__video-wrapper video {
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .how-it-works-journey__video-cover-image {
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity .3s ease;
    z-index: 2;
  }

  .how-it-works-journey__play-button {
    position: absolute;
    top: 50%;
    inset-inline-start: 50%;
    transform: translate(-50%, -50%);
    width: 70px;
    height: 70px;
    background-color: rgba(255,255,255,.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .3s ease, background-color .3s ease;
    z-index: 3;
    pointer-events: none; /* click handled by wrapper */
  }

  .how-it-works-journey__video-wrapper:hover .how-it-works-journey__play-button {
    transform: translate(-50%, -50%) scale(1.1);
  }

  .how-it-works-journey__play-button svg {
    width: 30px;
    height: 30px;
    margin-inline-start: 4px;
  }

  .how-it-works-journey__video-wrapper.video-is-playing .how-it-works-journey__video-cover-image,
  .how-it-works-journey__video-wrapper.video-is-playing .how-it-works-journey__play-button {
    opacity: 0;
    pointer-events: none;
  }

  /* --- Timeline --- */
  .how-it-works-journey__timeline {
    display: flex;
    flex-direction: column;
    gap: 40px;
  }

  .how-it-works-journey__step {
    display: flex;
    gap: 30px;
    position: relative;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .6s ease-out, transform .6s ease-out;
    will-change: opacity, transform;
  }

  .how-it-works-journey__step.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  .how-it-works-journey__step:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 55px;
    inset-inline-start: 27px;
    width: 1px;
    height: calc(100% + 40px);
    background-color: #e0e0e0;
    z-index: 1;
  }

  .how-it-works-journey__step-marker {
    flex-shrink: 0;
    z-index: 2;
    background-color: #fff;
  }

  .how-it-works-journey__step-number {
    font-size: 3rem;
    font-weight: 400;
    color: #333;
    line-height: 1;
    width: 55px;
    text-align: center;
  }

  /* --- Responsive --- */
  @media (min-width: 990px) {
    .how-it-works-journey__main-content {
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: flex-start;
    }
    .how-it-works-journey__video-wrapper {
      position: sticky;
      top: 100px;
      max-height: 400px; /* with aspect-ratio, height will clamp naturally */
    }
  }

  @media (max-width: 749px) {
    .welbewust-subheading { text-align: start; }
    .how-it-works-journey__step { gap: 20px; }
    .how-it-works-journey__step:not(:last-child)::before { inset-inline-start: 20px; }
    .how-it-works-journey__step-number { font-size: 2rem; width: 40px; }
  }
/* Wrapper: add safe edge gutters so fade doesn't cover cards */
  .carousel-track-wrapper{
    --edge-gutter: 56px;                 /* desktop side padding */
    overflow: hidden;
    position: relative;
    padding-inline: var(--edge-gutter);
    -webkit-mask-image: linear-gradient(
      to right,
      rgba(0,0,0,0) 0,
      rgba(0,0,0,1) 56px,
      rgba(0,0,0,1) calc(100% - 56px),
      rgba(0,0,0,0) 100%
    );
    mask-image: linear-gradient(
      to right,
      rgba(0,0,0,0) 0,
      rgba(0,0,0,1) 56px,
      rgba(0,0,0,1) calc(100% - 56px),
      rgba(0,0,0,0) 100%
    );
  }

  /* Track */
  .carousel-track{
    display:flex;
    gap:24px;
    width:100%;
    direction:ltr !important;
    will-change: transform;
  }

  /* Card: responsive width (no more hard 600px) */
  .carousel-card{
    flex:0 0 auto;
    width: clamp(300px, 37vw, 750px);   /* fits nicer across breakpoints */
    min-width: 0;                       /* allow content to shrink inside */
    min-height: 280px;
    display:flex;
    flex-direction:row;
    border-radius:16px;
    overflow:hidden;
    box-shadow:0 4px 12px rgba(0,0,0,0.1);
  }

  /* Image/content split with stable aspect */
  .carousel-image{
    flex:0 0 50%;
    max-width: 50%;
  }
  .carousel-image img{
    width:100%;
    height:100%;
    object-fit:cover;
  }
  .carousel-content{
    flex:1 1 auto;
    min-width:0;
    padding:24px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
  }

  /* Infinite marquee */
  .animate-scroll{ animation: scroll-left var(--marquee-duration, 40s) linear infinite; }
  .carousel-track-wrapper:hover .animate-scroll,
  .carousel-track-wrapper:focus-within .animate-scroll{ animation-play-state: paused; }
  @keyframes scroll-left{ 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

  /* Respect reduced motion */
  @media (prefers-reduced-motion: reduce){ .animate-scroll{ animation:none !important; } }

  /* Mobile: smaller gutters, stacked card */
  @media (max-width: 768px){
    .carousel-track-wrapper{
      --edge-gutter: 16px;
      -webkit-mask-image: none;
      mask-image: none;
      padding-inline: var(--edge-gutter);
    }
    .carousel-card{
      width: 300px;
      flex-direction: column;
    }
    .carousel-image{
      max-width:100%;
    }
    .carousel-image img{
      aspect-ratio: 16 / 9;
    }
  }
/* Base Styles (Mostly Unchanged) */
  .hero-section {
    position: relative;
    width: 100%;
    height: 85vh;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    color: #fff;
    text-align: center;
    overflow: hidden;
    background-image: var(--hero-bg);
    background-size: cover;
    background-position: center;
    background-color: #1a1a1a;
  }
  .video-background {
    position: absolute; top: 0; inset-inline-start: 0; width: 100%; height: 100%; z-index: 1; overflow: hidden; will-change: transform;
  }
  .video-overlay {
    position: absolute; top: 0; inset-inline-start: 0; width: 100%; height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.3));
    z-index: 1;
  }
  .video-background video {
    width: 100%; height: 100%; object-fit: cover;
    animation: kenBurns 30s infinite alternate ease-in-out;
  }
  .hero-content { position: relative; z-index: 1; max-width: 1250px; margin: auto; }
  .text-content { max-width: 800px; }
  .text-content h1 { font-size: 40px; font-weight: bold; margin-bottom: 20px; line-height: 1.2; color: #fff; }
  .text-content p { font-size: 16px; font-weight: normal; line-height: 1.6; color: #f2f2f2; margin-bottom: 32px; max-width: 650px; margin-inline-start: auto; margin-inline-end: auto; }


  @keyframes kenBurns {
    from { transform: scale(1) rotate(0.5deg); }
    to { transform: scale(1.08) rotate(-0.5deg); }
  }

  .hero-heading-animate .word-span,
  .anim-child {
    opacity: 0;
    transform: translateY(25px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  }

  .anim-on-scroll.is-visible .hero-heading-animate .word-span,
  .anim-on-scroll.is-visible .anim-child {
    opacity: 1;
    transform: translateY(0);
  }

  .anim-on-scroll.is-visible .anim-child:nth-of-type(1) { /* The <p> tag */
    transition-delay: 0.5s; /* This delay is based on the heading finishing */
  }
  .anim-on-scroll.is-visible .anim-child:nth-of-type(2) { /* The button's wrapper */
    transition-delay: 0.7s;
  }


  /* Responsive Styles */
  @media (max-width: 768px) {
    .hero-section { min-height: 500px; height: 75vh; }
    .text-content h1 { font-size: 2.8rem; }
    .text-content p { font-size: 1.2rem; }
  }
.rec-section {
     background-color: #ffffff;
     overflow: hidden;
   }

   .rec-section__grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 30px;
   }

   .rec-section__symptoms-text li {
     padding-inline-start: 22px;
     position: relative;
   }

   .rec-section__symptoms-text li:not(:last-child) {
     margin-bottom: 12px;
   }

   .rec-section__symptoms-text li::before {
     content: '✓';
     position: absolute;
     inset-inline-start: 0;
     top: 4px;
     color: #ff852e; /* replaced var(--button-bg-color) */
     font-weight: bold;
     font-size: 1.2rem;
   }

   .rec-section__cta {
     text-align: center;
     margin-top: 60px;
   }

   .rec-section__cta .rec-paragraph {
     max-width: 700px;
     margin: 0 auto 25px auto;
     text-align: center;
   }

   /* --- Animation Logic --- */
   .animate-on-scroll {
     opacity: 0;
     transform: translateY(30px);
     transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                 transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
   }

   .animate-on-scroll.is-visible {
     opacity: 1;
     transform: translateY(0);
   }

   /* Staggered delays for cards */
   .rec-section__card.animate-on-scroll:nth-child(1) { transition-delay: 0.1s; }
   .rec-section__card.animate-on-scroll:nth-child(2) { transition-delay: 0.2s; }
   .rec-section__card.animate-on-scroll:nth-child(3) { transition-delay: 0.3s; }
   .rec-section__card.animate-on-scroll:nth-child(4) { transition-delay: 0.4s; }
   /* Add more if needed */

   /* Micro-animation for list items */
   .rec-section__symptoms-text li {
     opacity: 0;
     transform: translateX(-20px);
     transition: opacity 0.5s ease 0.2s, transform 0.5s ease 0.2s;
   }

   .rec-section__card.is-visible .rec-section__symptoms-text li {
     opacity: 1;
     transform: translateX(0);
   }

   /* Staggered delay for each list item */
   .rec-section__card.is-visible .rec-section__symptoms-text li:nth-child(1) { transition-delay: 0.4s; }
   .rec-section__card.is-visible .rec-section__symptoms-text li:nth-child(2) { transition-delay: 0.5s; }
   .rec-section__card.is-visible .rec-section__symptoms-text li:nth-child(3) { transition-delay: 0.6s; }
   .rec-section__card.is-visible .rec-section__symptoms-text li:nth-child(4) { transition-delay: 0.7s; }
.neuro-hub h3 span {
    font-size: 18px;
    font-weight: normal;
    color: #334155;
  }

  .neuro-hub p, .neuro-hub .richtext-content p, .neuro-hub .richtext-content li {
    font-size: 16px;
    font-weight: normal;
    color: rgba(0, 0, 0, 0.61);
    line-height: 1.7;
    margin: 0;
  }
  .neuro-hub .main-content .richtext-content p {
    text-align: justify; /* Guideline alignment */
  }

  .neuro-hub .richtext-content li { margin-bottom: 0.5rem; position: relative; padding-inline-start: 20px; }
  .neuro-hub .richtext-content li::before {
      content: '•';
      position: absolute;
      left: 0;
      color: #0E3E77;
      font-weight: bold;
  }

  .section-header-hub { text-align: center; margin: 0 auto 4rem auto; max-width: 750px; }
  .hub-layout { display: grid; grid-template-columns: 300px 1fr; gap: 4rem; align-items: flex-start; }

  .hub-nav { display: flex; flex-direction: column; gap: 0.5rem; position: sticky; top: 100px; }
  .hub-nav-item {
      display: flex; align-items: center; gap: 1rem; padding: 1rem 1.5rem;
      border-radius: 12px; cursor: pointer; border: 2px solid transparent;
      transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
  }
  .hub-nav-item:hover { background-color: #ECF1F9; transform: translateX(5px); }
  .hub-nav-item.active {
      background-color: #FFFFFF; border-color: #E0E9F6;
      box-shadow: 0 10px 30px rgba(20, 73, 139, 0.08);
      transform: translateX(10px);
  }
  .nav-number {  font-size: 14px; font-weight: bold; color: rgba(0,0,0,0.3); }
  .hub-nav-item.active .nav-number { color: #0E3E77; }
  .nav-title { font-size: 18px; font-weight: bold; color: rgba(0, 0, 0, 0.61); }
  .hub-nav-item.active .nav-title { color: #000; }

  /* --- Right Content --- */
  .hub-content-pane {
      display: none; background-color: #FFFFFF; border-radius: 24px;
      padding: 3rem; border: 1px solid #E0E9F6; animation: fadeIn 0.5s ease;
  }
  .hub-content-pane.active { display: block; }
  @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

  .pane-header { margin-bottom: 2rem; padding-bottom: 2rem; border-bottom: 1px solid #E0E9F6; }
  .pane-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 2.5rem; }
  .content-block { margin-bottom: 2.5rem; }
  .content-block:last-child { margin-bottom: 0; }
  .sidebar-content .content-block {
      background-color: #F7F9FC; padding: 1.5rem; border-radius: 16px;
  }

  @media (max-width: 992px) {
      .hub-layout { grid-template-columns: 1fr; }
      .hub-nav { position: relative; top: auto; flex-direction: row; overflow-x: auto; padding-bottom: 1rem; -ms-overflow-style: none; scrollbar-width: none; }
      .hub-nav::-webkit-scrollbar { display: none; }
      .hub-nav-item { flex-shrink: 0; }
      .hub-nav-item.active { transform: translateY(-5px) translateX(0); }
      .hub-nav-item:hover { transform: translateY(-2px) translateX(0); }
  }
  @media (max-width: 768px) {
      .pane-grid { grid-template-columns: 1fr; }
      .sidebar-content { grid-row: 1; margin-bottom: 2.5rem; }
  }
.welbewust-wi-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 5rem;
    align-items: start;
  }

  /* Image Position Logic */
  .welbewust-wi-grid--right { 
    grid-template-columns: 1fr auto; 
  }

  .welbewust-wi-grid--right .welbewust-wi-image-wrapper { 
    order: 2; 
  }

  .welbewust-wi-image-wrapper { 
    max-width: 280px; 
    width: 100%; 
  }

  .welbewust-wi-image {
    width: 100%; 
    height: auto; 
    border-radius: 20px;
    box-shadow: 0 6px 18px rgba(2, 6, 23, 0.04); /* Guideline Shadow */
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                box-shadow 0.4s ease;
  }

  .welbewust-wi-image:hover {
    transform: scale(1.03) translateY(-4px);
    box-shadow: 0 10px 25px rgba(2, 6, 23, 0.07); /* Enhanced Guideline Shadow */
  }

  .welbewust-wi-image-placeholder {
    width: 100%; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center;
    background-color: #f0f0f0; 
    border: 1px dashed #ccc; 
    border-radius: 20px;
    color: #888; 
    aspect-ratio: 4 / 5;
  }

  .welbewust-wi-image-placeholder svg { 
    width: 50px; 
    height: 50px; 
    fill: #aaa; 
    margin-bottom: 1rem; 
  }

  .welbewust-wi-list {
    list-style: none; 
    padding: 0; 
    margin: 0;
    display: flex; 
    flex-direction: column; 
    gap: 1.5rem;
  }

  .welbewust-wi-list-item { 
    display: flex; 
    align-items: flex-start; 
    gap: 1rem; 
  }

  .welbewust-wi-list-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: #ff852e;
    margin-top: 4px;
  }

  .welbewust-wi-list-item p { 
    font-size: 16px; 
    font-weight: normal; 
    color: rgba(0, 0, 0, 0.61); 
    line-height: 1.7; 
    margin: 0; 
  }

  /* --- Animation Logic (Preserved) --- */
  .animate-on-scroll { 
    opacity: 0; 
    transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); 
  }

  .animate-on-scroll.slide-from-left { 
    transform: translateX(-40px); 
  }

  .animate-on-scroll.slide-from-right { 
    transform: translateX(40px); 
  }

  .animate-child { 
    opacity: 0; 
    transform: translateY(20px); 
    transition: opacity 0.6s ease, transform 0.6s ease; 
  }

  .animate-on-scroll.is-visible { 
    opacity: 1; 
    transform: translate(0, 0); 
  }

  .animate-on-scroll.is-visible .animate-child { 
    opacity: 1; 
    transform: translateY(0); 
  }

  .welbewust-wi-content-wrapper .animate-child:nth-child(1) { transition-delay: 0.2s; }
  .welbewust-wi-list .animate-child:nth-child(1) { transition-delay: 0.3s; }
  .welbewust-wi-list .animate-child:nth-child(2) { transition-delay: 0.4s; }
  .welbewust-wi-list .animate-child:nth-child(3) { transition-delay: 0.5s; }
  .welbewust-wi-list .animate-child:nth-child(4) { transition-delay: 0.6s; }
  .welbewust-wi-list .animate-child:nth-child(5) { transition-delay: 0.7s; }
  .welbewust-wi-list .animate-child:nth-child(6) { transition-delay: 0.8s; }
  .welbewust-wi-list .animate-child:nth-child(7) { transition-delay: 0.9s; }
  .welbewust-wi-list .animate-child:nth-child(8) { transition-delay: 1.0s; }

  /* Responsive Adjustments */
  @media (max-width: 992px) {
    .welbewust-wi-grid, 
    .welbewust-wi-grid--right { 
      grid-template-columns: 1fr; 
      gap: 3rem; 
    }

    .welbewust-wi-grid--right .welbewust-wi-image-wrapper { 
      order: initial; 
    }

    .welbewust-wi-image-wrapper { 
      margin: 0 auto; 
    }
  }
.dossier { padding: 6% 2%; background-color: #FFFFFF; }
  .container-dossier { max-width: 900px; margin: 1rem auto; }
  .dossier-header { text-align: center; margin: 0 auto 5rem auto; }
  .dossier-part {
      display: flex;
      gap: 3rem;
      padding: 3rem 0;
      border-bottom: 1px solid #ECF1F9;
  }
  .part-content { flex-grow: 1; }

  .analysis-visual { display: flex; align-items: center; gap: 3rem; margin: 2rem 0; }
  .visual-item { text-align: center; }
  .visual-item span { display: block; margin-top: 1rem; font-size: 14px; color: rgba(0,0,0,0.6); }
  .circle-visual { width: 120px; height: 120px; border-radius: 50%; position: relative; background-color: #F7F9FC; }
  .quantity-circle {
      background-image: linear-gradient(45deg, #BBDEFB, #75AEEA);
      box-shadow: 0 10px 30px rgba(117, 174, 234, 0.3);
  }
  .activity-circle { border: 3px solid #FF9850; }
  .activity-circle::before {
      content: ''; position: absolute; top: 50%; inset-inline-start: 50%; transform: translate(-50%, -50%);
      width: 20%; height: 20%; background-color: #FF9850; border-radius: 50%; box-shadow: 0 0 15px #FF9850;
  }

  /* NEW: Button Styles */
  .dossier-button-wrapper {
    text-align: center;
    margin-top: 3rem;
  }

  /* =================================================================== */
  /* 4. ANIMATIONS */
  /* =================================================================== */
  .animate-on-scroll { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; }
  .animate-on-scroll.is-visible { opacity: 1; transform: translateY(0); }
  .dossier .dossier-part.animate-on-scroll:nth-of-type(2) { transition-delay: 0.2s; }
  .dossier .dossier-part.animate-on-scroll:nth-of-type(3) { transition-delay: 0.4s; }
  .dossier .dossier-part.animate-on-scroll:nth-of-type(4) { transition-delay: 0.6s; }
  .dossier .dossier-button-wrapper.animate-on-scroll { transition-delay: 0.8s; }

  /* =================================================================== */
  /* 5. RESPONSIVE */
  /* =================================================================== */
  @media (max-width: 768px) {
      .dossier-part { flex-direction: column; gap: 1.5rem; text-align: center; }
      .part-label { width: auto; }
      .analysis-visual { justify-content: center; }
      .circle-visual { width: 100px; height: 100px; }
  }
.fab-smart-wrapper {
    position: fixed;
    bottom: 2rem;
    inset-inline-end: 2rem;
    z-index: 999;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    pointer-events: none;
  }
  .fab-smart-wrapper.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .fab-smart-button {
    /* Guideline: Button */
    display: flex; align-items: center; gap: 0.75rem; 
    background-color: var(--fab-bg-color); color: var(--fab-text-color);
    padding: 15px 20px; border-radius: 999px; font-size: 18px; font-weight: bold;
    text-decoration: none; border: none; cursor: pointer;
    box-shadow: 0 6px 18px rgba(2, 6, 23, 0.08);
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  }
  .fab-smart-button:hover {
    background-color: var(--fab-hover-bg-color);
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(2, 6, 23, 0.12);
  }
  .fab-icon { width: 20px; height: 20px; }
  @media (max-width: 480px) {
    .fab-smart-button span { display: none; }
    .fab-smart-button { width: 60px; height: 60px; padding: 0; justify-content: center; border-radius: 50%; }
  }
/* --- General Section Layout (Guideline Compliant) --- */
  .philosophy-section-wrapper {
    background-color: #ffffff;
  }

  /* --- Header Typography (Guideline Compliant) --- */
  .philosophy-header {
    max-width: 800px;
    margin: 0 auto 4rem auto;
  }


  /* --- Card Typography (Guideline Compliant) --- */

  .philosophy-card p {
    font-size: 16px;
    font-weight: normal;
    text-align: start;
    color: rgba(0, 0, 0, 0.61);
    line-height: 1.7;
    margin: 0;
  }

  /* --- Grid & Card Styling --- */
  .philosophy-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
  }

  .philosophy-card {
    background-color: #ffffff;
    border: 1px solid #ECF1F9;
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                border-color 0.4s ease;
    position: relative;
    overflow: hidden;
  }

  .philosophy-card-content {
      padding: 40px 30px;
      position: relative;
      z-index: 2;
  }

  /* --- On-Scroll Animation Logic --- */
  .animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition-property: opacity, transform;
    transition-duration: 0.8s;
    transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* --- Luxury Hover Effects (Using CSS Variables) --- */
  .philosophy-card:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.08);
    /* Reads the variable set in the HTML style attribute */
    border-color: var(--hover-border-color, #75AEEA);
  }
  .philosophy-card:hover h4 { color: #000000; }
  .philosophy-card:hover i { transform: scale(1.1); }

  .philosophy-card::before {
    content: '';
    position: absolute;
    top: 0; inset-inline-start: 0;
    width: 100%; height: 100%;
    /* Reads the variable set in the HTML style attribute */
    background: radial-gradient(circle at var(--mouse-x) var(--mouse-y), var(--hover-glow-color, rgba(117, 174, 234, 0.15)) 0%, rgba(255, 255, 255, 0) 40%);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 1;
    pointer-events: none;
  }
  .philosophy-card:hover::before { opacity: 1; }

  /* --- Icon Styling (Guideline Compliant) --- */
  .philosophy-card i {
    font-size: 32px;
    margin-bottom: 2rem;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }

  /* --- Responsive Design --- */
  @media (max-width: 992px) {
    .philosophy-grid { grid-template-columns: 1fr; gap: 30px; max-width: 500px; margin: 0 auto; }
  }
.td-section{
  color:#000;
  background:#fff;
  line-height:1.5;
  letter-spacing:.01em;
}
.td-wrapper{ width:100%; max-width:100%; }

.td-eyebrow{
  text-transform:uppercase;
  font-size:.75rem;
  letter-spacing:.12em;
  color:#666;
  margin:0 0 .75rem 2px;
}
.td-header{ margin:1rem auto; width:100%; }
.td-center{ text-align:center; }
.td-title--bottom{ color:#222; }
.td-subtext{
  margin:.25rem 0 0 0;
  color:#666;
  max-width:62ch;
}

/* ---- Grid of cards (one hero per screen) ---- */
.td-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:0;
}

/* ---- Card container ---- */
.td-card{
  position:relative;
  min-height:100svh;
  height:100vh;
  border:1px solid #eee;
  border-inline-start:none; border-inline-end:none;
  border-radius:0;
  background:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,.08);
  overflow:hidden;
  isolation:isolate;
}

.td-card-inner{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  align-items:center;
  height:100%;
}

.td-content{
  grid-column:1;
  padding:clamp(28px, 6vw, 80px);
  display:flex;
  flex-direction:column;
  justify-content:center;
}

/* Media (right column) */
.td-media{
  grid-column:2;
  height:100%;
  aspect-ratio:auto;
  margin:0;
  overflow:hidden;
  border-inline-start:1px solid #eee;
  border-bottom:0;
  background:#f9f9f9;
}
.td-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.td-badge{
  position:absolute;
  top:14px; inset-inline-start:14px;
  background:#fff;
  color:#000;
  border:1px solid #eee;
  padding:.35rem .6rem;
  font-size:.72rem;
  border-radius:999px;
  box-shadow:0 2px 10px rgba(0,0,0,.08);
}
.td-badge::before{
  content:'';
  display:inline-block;
  width:.5rem; height:.5rem;
  border-radius:999px;
  background:#204070; /* default badge tone */
  margin-inline-end:.45rem;
  vertical-align:middle;
  transform:translateY(-1px);
}

/* ---- Text scale inside the card ---- */
.td-kicker{
  color:#204070;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:.72rem;
  margin:0 0 .25rem 0;
  font-weight:700;
}
.td-card-title{
  margin:.1rem 0;
  font-size:clamp(28px, 3.8vw, 46px);
  line-height:1.12;
  font-weight:700;
}
.td-title-between{
  margin:.5rem 0 .5rem 0;
  color:#666;
  font-size:clamp(15px, 2vw, 20px);
}
.td-details{
  color:#222;
  margin:.6rem 0 1.2rem 0;
}
.td-details p{ margin:.4rem 0; }
.td-details a{ color:#204070; text-decoration:underline; }

/* ---- Chips ---- */
.td-chips{
  list-style:none; padding:0; margin:0 0 1.1rem 0;
  display:flex; flex-wrap:wrap; gap:.5rem;
}
.td-chip{
  border:1px solid #eee;
  border-radius:999px;
  padding:.35rem .6rem;
  font-size:.72rem;
  color:#222;
  background:#fff;
}

/* ---- Actions ---- */
.td-actions{ display:flex; gap:.6rem; flex-wrap:wrap; }
.td-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.72rem 1.05rem;
  border-radius:.75rem; /* calc(1rem - .25rem) */
  font-weight:700; text-decoration:none;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease, border-color .12s ease;
  border:1px solid #222;
}
.td-btn--primary{
  background:#000; color:#fff; border-color:#000;
  box-shadow:0 2px 10px rgba(0,0,0,.08);
}
.td-btn--primary:hover{ transform:translateY(-1px); box-shadow:0 10px 30px rgba(0,0,0,.12); }
.td-btn--ghost{ background:#fff; color:#000; border-color:#222; }
.td-btn--ghost:hover{ background:#eee; }

.td-symbols{
  position:absolute;
  inset:auto auto 0 0;
  width:120px;
  height:100%;
  pointer-events:none;
  opacity:.55;
  filter:grayscale(1);
  mix-blend-mode:multiply;
}
.td-symbols-svg{ width:120px; height:100%; }
.s{ fill:#b8b8b8; stroke:#b8b8b8; }
.s--chev{ fill:none; stroke-width:4; stroke-linecap:round; stroke-linejoin:round; }
.s--pill{ opacity:.45; }

/* ---- Animation helpers (GSAP initial states) ---- */
.td-anim{ will-change: transform, opacity; }
.td-anim--card{ opacity:0; transform:translateY(20px); }

/* ---- Responsive: stack on narrow screens ---- */
@media (max-width: 900px){
  .td-header{ width:calc(100% - 20px); padding-inline:10px; }
  .td-card-inner{ grid-template-columns:1fr; }
  .td-content{
    grid-column:1; grid-row:1;
    padding:clamp(20px, 6vw, 40px);
  }
  .td-media{
    grid-column:1; grid-row:2;
    height:50svh; border-inline-start:0; border-top:1px solid #eee;
  }
  .td-symbols{ display:none; }
}

/* ---- Small refinements ---- */
.td-details strong{ color:#111; }
.td-details em{ color:#444; }
.u-accent-1{ color:#204070; }
.u-accent-2{ color:#F78C5B; }
html[dir="rtl"] .therapy-hero .content {
    direction: rtl;                /* inline flow + form controls */
  }
  html[dir="rtl"] .therapy-hero .copy,
  html[dir="rtl"] .therapy-hero .section-header,
  html[dir="rtl"] .therapy-hero .section-header .sub { text-align: start; }

  /* Tabs rail mirrors in RTL (chips/pills sit on the “start” side) */
  html[dir="rtl"] .therapy-hero .tabs { direction: rtl; }

  /* Indicator uses logical positioning so JS can update x/width the same for both */
  .tabs__indicator{
    position:absolute;
    inset-block-end: 0;
    inset-inline-start: 0;         /* replaces left:0; works LTR+RTL */
    height:calc(100% - 12px);
    width:0;
    border-radius:9999px;
    background:#fff;
    box-shadow:0 10px 24px rgba(2,6,23,.08);
    transition:transform .28s cubic-bezier(.2,.7,.2,1), width .28s cubic-bezier(.2,.7,.2,1);
    z-index:1;
    pointer-events:none;
  }

  /* Absolutely-positioned chips use logical insets so they auto-flip */
  .chip--top    { inset-inline-start:58%; top:27%; animation-delay:.1s; }
  .chip--mid    { inset-inline-start:18%; top:47%; animation-delay:.4s; }
  .chip--bottom { inset-inline-start:44%; bottom:27%; animation-delay:.7s; }

  /* Desktop hero image had a negative translateX that looked wrong in RTL.
     Mirror it in RTL using the opposite sign. */
  @media (min-width: 980px){
    html[dir="rtl"] .hero-img img,
    html[dir="rtl"] .landscape.outside img{
      transform: translateX(clamp(24px, 3vw, 80px)); /* mirror of your LTR: clamp(-24px,-3vw,-80px) */
    }
  }


  .therapy-hero{
    --bg-from:#f8fafc; --bg-to:#eef2ff; --accent:#0f172a;
    background:linear-gradient(135deg,var(--bg-from),var(--bg-to));
    color:#0f172a;
    width:100%;
  }

  .therapy-hero .content{
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:6rem;
    margin:0 auto;
    padding:0;
    text-align:start;
    height:100vh;
    min-height:100svh;
  }

@media (min-width: 1920px) and (max-width: 2559px) {
  .therapy-hero .content {
    max-width: 1650px;
  }
}

@media (min-width: 2560px) {
    .therapy-hero .content {
        max-width: 2133.3px;
    }
}


  .therapy-hero .content.content--swap{
    grid-template-columns:minmax(0,0.48fr) minmax(0,0.52fr);
  }
  .therapy-hero .content.content--swap .therapyMedia{ order:2; }
  .therapy-hero .content.content--swap .section-header{ order:1; }

  /* media side */
  .therapyMedia{ position:relative; display:flex; align-items:center; justify-content:center; height:100%; }
  .therapyMedia .hero-img{ position:relative; inset:auto; opacity:1; pointer-events:auto; will-change:auto; }
  .landscape.outside{ height:100%; display:flex; align-items:center; justify-content:center; }


  .hero-img img,
  .landscape.outside img{
    display:block;
    width: auto;
    max-width: 100%;
    height:80vh;
    max-height:80svh;
    object-fit:contain;
    transform:translateX(clamp(-24px,-3vw,-80px));
  }

  /* circle — default visible for CSS-only fallback; JS fades it in */
  .circle.rotating{
    position:absolute; inset:auto; width:100%; height:100%;
    border-radius:9999px; border:1px dashed rgba(15,23,42,.12);
    animation:rotateCircle 120s linear infinite; z-index:0; opacity:.12;
  }
  .js .circle.rotating{ opacity:0; }
  @keyframes rotateCircle{ to{ transform:rotate(360deg) } }

  /* chips container */
  .chips{ position:absolute; inset:0; z-index:2; }
  .chip{
    position:absolute; display:inline-flex; align-items:center; gap:.5rem;
    padding:.55rem 1rem; border-radius:999px; background:rgba(255,255,255,.6); color:#0f172a;
    box-shadow:0 6px 20px rgba(2,6,23,.08); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
    font-weight:600; font-size:1rem; letter-spacing:.01em; animation:floatY 6s ease-in-out infinite;
  }
  .chip .dot{ width:8px; height:8px; border-radius:999px; background:#10b981; box-shadow:0 0 0 2px rgba(16,185,129,.2); }
  @keyframes floatY{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-10px) } }

  /* copy frames */
  .copy-frames{ position:relative; min-height:6rem; }
  .copy-frame{ position:relative; opacity:0; pointer-events:none; }
  .copy-frame[hidden]{ display:none !important; }
  .copy-frame.is-active{ opacity:1; pointer-events:auto; }

  /* text side */
  .section-header{ max-width:640px; justify-self:start; text-align:start; }
  .section-header .sub{ font-size:18px; color:#334155; margin:0 0 .75rem; text-align:start; }
  .section-header .lead{ font-size:14px; line-height:1.8; color:#475569; text-align:justify; }

  /* tabs */
  .tabs{
    --tabs-bg:#f1f5f9; --tabs-border:#e2e8f0; --tabs-text:#334155;
    position:relative; display:inline-flex; width:100%;
    gap:8px; padding:6px; margin:0 0 1rem;
    border:1px solid var(--tabs-border); background:var(--tabs-bg); border-radius:9999px;
    box-shadow:0 6px 18px rgba(2,6,23,.04) inset;
  }
  .tab{
    -webkit-appearance:none; appearance:none; border:0; background:transparent;
    display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
    padding:10px 14px; border-radius:9999px; cursor:pointer; font-weight:400; font-size:12px; color:var(--tabs-text);
    position:relative; z-index:2; outline:none; flex:1 1 33%;
  }
  .tab svg{ width:16px; height:16px; opacity:.9; }
  .tab[aria-selected="false"]:hover{ background:#fefefe; opacity:.8; }
  .tab:focus-visible{  border-radius:9999px; }
  .tab[aria-selected="true"]{ color:var(--accent); }

  /* panels + lists */
  .tab-panels{ margin-top:.25rem; }
  .tab-panel[hidden]{ display:none !important; }
  .panel-list{ list-style:none; padding:0; margin:0; display:grid; gap:.4rem; }
  .panel-list li{
    display:grid; grid-template-columns:18px 1fr; align-items:start; gap:.5rem;
    font-size:1rem; color:#334155;
  }
  .panel-list li::before{
    content:""; width:10px; height:10px; border-radius:999px; margin-top:.4rem;
    background:linear-gradient(135deg,#10b981,#22c55e);
  }

  /* CTAs */
  .cta-row{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1rem; }
  .button{
    display:inline-flex; align-items:center; gap:.65rem; padding:.9rem 1.25rem; border-radius:10px;
    text-decoration:none; font-weight:700; transition:transform .2s, background-color .2s, color .2s, border-color .2s;
  }
  .button--solid{ background:var(--accent); color:#fff; border:1px solid var(--accent); }
  .button--solid:hover{ transform:translateY(-1px); }
  .button--ghost{ background:transparent; color:var(--accent); border:2px solid #e2e8f0; }
  .button--ghost:hover{ background:#f8fafc; border-color:#cbd5e1; }
  .button__icon{ width:24px; height:24px; display:grid; place-items:center; }

  /* ========= Responsive ========= */
  @media (min-width:601px) and (max-width:979px){
    .therapyMedia .hero-img{ position:relative; }
    .hero-img img,
    .landscape.outside img{
      width:100%; max-width:720px; height:44vh; max-height:56svh; transform:none; margin:0 auto;
    }
    .therapy-hero .content{
      display:flex; flex-direction:column; align-items:center; justify-content:center;
      gap:1.5rem; padding:2rem 1.5rem; text-align:center; height:auto; min-height:auto;
    }
    .section-header{ max-width:760px; justify-self:center; text-align:center; }
    .section-header h1{ font-size:clamp(1.5rem,3.6vw,2rem); margin:0 0 .9rem; }
    .section-header h2{ font-size:clamp(1.75rem,3.8vw,2.4rem); line-height:1.1; margin:.3rem 0 .6rem; text-align:start; }
    .section-header .sub{ font-size:clamp(1rem,2.2vw,1.125rem); line-height:1.55; margin:0 0 .6rem; }
    .section-header .lead{ font-size:1.02rem; line-height:1.7; margin:0 0 1rem; }
    .tabs{ width:auto; max-width:640px; margin:0 auto 1rem; }
    .tab{ font-size:1.05rem; }
    .tabs__indicator{ height:calc(100% - 12px); box-shadow:0 8px 18px rgba(2,6,23,.06); }
    .cta-row{ justify-content:center; gap:.6rem; margin-top:.75rem; }
    .chips{ display:none !important; }
    .js .circle.rotating{ opacity:.12; }
  }

  @media (max-width:600px){
    .therapy-hero .content{
      display:flex; flex-direction:column; align-items:center; justify-content:center;
      gap:1rem; padding:1.25rem 1rem 1.5rem; text-align:center; height:auto; min-height:auto;
    }
    .section-header{ max-width:100%; justify-self:center; text-align:center; }
    .section-header h1{ font-size:clamp(1.25rem,6vw,1.6rem); margin:0 0 .75rem; }
    .section-header h2{ font-size:clamp(1.4rem,6vw,1.75rem); text-align: start; line-height:1.12; margin:.5rem 0; }
    .section-header .sub{ font-size:14px; line-height:1.5; margin:1rem 0 1rem; }
    .section-header .lead{ font-size:12px; line-height:1.6; margin:0 0 .75rem; }
    .therapyMedia{ justify-content:center; align-items:center; }
    .therapyMedia .hero-img{ position:relative; inset:auto; }
    .hero-img img,
    .landscape.outside img{
      width:100%; max-width:500px; height:36vh; max-height:42svh; object-fit:contain; transform:none !important; margin:0 auto;
    }
    .tabs{ gap:6px; padding:4px; margin:0 auto .75rem; }
    .tab{ padding:8px 10px; font-size:.95rem; }
    .tabs__indicator{ height:calc(100% - 8px); box-shadow:0 6px 14px rgba(2,6,23,.06); }
    .copy-frames{ min-height:0; }
    .cta-row{ justify-content:center; gap:.5rem; margin-top:.5rem; }
    .button{ padding:.7rem 1rem; font-size:.95rem; }
    .chips{ display:none !important; }
    .circle.rotating{ opacity:.5; width:80%; inset-inline-start:13%; top:4%; }
  }

  @media (min-width:601px) and (max-width:979px){
    .tabs{ width:100% !important; margin:0 auto 1rem; }
  }
.coverage-cards{
      --blue:#2563eb;  --text:#0f172a; /* titles */ --sub:#64748b; /* body copy */ --card:#ffffff; /* card bg */ --border:#e2e8f0; /* card border */ --shadow:0 10px 18px rgba(0,0,0,.05); }
      .cc-grid{ display:grid; gap:24px; }
    @media (min-width:768px){
       .cc-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
    }
    @media (min-width:1024px){
      .cc-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
    }
       .cc-card{ text-align:center; padding:24px; border-radius:16px; background:var(--card); border:1px solid var(--border); box-shadow:var(--shadow); transition: box-shadow .2s ease, transform .2s ease; } .cc-card:hover{ box-shadow:0 14px 28px rgba(0,0,0,.08); transform: translateY(-2px); } .cc-icon{ width:52px; height:52px; border-radius:999px; margin:0 auto 0; display:flex; align-items:center; justify-content:center; background: #fff; } .cc-svg{ width:32px; height:32px; display:block }
       .insurance-fullscreen {  line-height: 1.6; color: #1a1a1a; background: #ffffff; }
       .coverage-list { width: 80%; }
      .insurance-fullscreen .hero-cta{ gap: .75rem; } /* --- Hero --- */
      .insurance-hero { min-height: 100vh; display: flex; align-items: center; background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); position: relative; overflow: hidden; }
      .hero-container { display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: auto auto;}
      .hero-content { grid-column: 1 / span 6; grid-row: 1; }
      .hero-visual { grid-column: 7 / span 6; grid-row: 1; }
      .process-section { grid-column: 1 / -1; grid-row: 3; }
      .insurance-badge{ display:inline-flex; align-items:center; gap:.5rem; background:#e0f2fe; color:#0369a1; padding:.75rem 1.5rem; border-radius:50px; font-size:.875rem; font-weight:600; margin-bottom:2rem; border:1px solid #bae6fd; } /* Methods vs Features table */
      .wb-matrix{ width:100%; height:auto; grid-column: 1 / -1; grid-row: 2; overflow-x:auto; background: transparent; margin: 24px auto; } .wb-cards{ display:none; } .wb-card{ background:#fff; border:1px solid #e2e8f0; border-radius:16px; padding:1rem; box-shadow:0 10px 18px rgba(0,0,0,.05); } .wb-card__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.5rem; }
      .wb-card__title{ font-weight:700; font-size:16px; color:#0f172a; margin:0; }
      .wb-card__list{ list-style:none; padding:0; margin:.25rem 0 0; display:grid; gap:6px; }
      .wb-pill{ display:inline-flex; align-items:center; gap:.5rem; padding:.4rem .6rem; border-radius:999px; font-size:12.5px; font-weight:600; } .wb-pill__icon{ line-height:1; } .wb-pill--yes{ background:#dcfce7; color:#166534; }
       .wb-pill--no{ background:#f1f5f9; color:#64748b; }
       .wb-pill--na{ background:#f8fafc; color:#94a3b8; }
       .process-container{ padding: 2% 6% !important; }
       @media (max-width: 599px){
        .wb-table-wrap{ display:none;
         }
       .wb-cards{ display:grid; grid-template-columns: 1fr; gap:12px; }
       .wb-legend{ font-size:.8rem; } }
       @media (min-width:600px) and (max-width:1023px){ .wb-table-wrap{ display:none; } .wb-cards{ display:grid; grid-template-columns: 1fr 1fr; gap:14px; } } .cc-clock { border: 2.5px solid #ff842e; border-radius: 999px; } .wb-table{ border-collapse: separate; border-spacing: 0; width: max-content; /* allow wide content; wrapper scrolls */ min-width: 100%; font-size: 14px; line-height: 1.4; color:#0f172a; } .wb-table-wrap caption{ text-align:start; font-weight:700; padding: 12px; color:#0f172a; }
       .wb-table th, .wb-table td{ padding: .65rem .75rem; border: 1px solid #e2e8f0; background:#ffffff; vertical-align: middle; text-align: center; white-space: nowrap; } .wb-table thead th{ position: sticky; top: 0; z-index: 2; background:#f8fafc; color:#334155; font-weight:600; } .wb-table .wb-sticky{ position: sticky; inset-inline-start: 0; z-index: 3; /* sits above other cells when scrolling */ text-align: start; font-weight: 600; background:#ffffff; /* subtle separation when scrolling horizontally */ box-shadow: 1px 0 0 0 #e2e8f0; } .wb-table tbody tr:nth-child(odd) td:not(.wb-sticky){ background:#fafafa; } .wb-yes{ color:#166534; font-weight:700; } .wb-no{ color:#64748b; font-weight:600; } .wb-legend{ padding: 12px; font-size: .875rem; color:#64748b; } /* mobile tweaks */
       @media (max-width: 768px){
        .wb-table{ font-size:13px; }
        .wb-table th,
         .wb-table td{ padding:.55rem .6rem; } }
         .hero-subtitle{ font-size:18px; color:#475569; margin-bottom:1rem; font-weight:400; }
         .hero-description{ font-size:14px; color:#64748b; margin-bottom:2rem; line-height:1.7; }
       .cta-secondary{ background:transparent; color:#0f172a; border:2px solid #e2e8f0; padding:1rem 2rem; border-radius:8px; font-size:1rem; font-weight:600; cursor:pointer; transition:.2s; }
       .cta-secondary:hover{ border-color:#cbd5e1; background:#f8fafc; } /* --- Hero visual card --- */
       .hero-visual{ display:flex; justify-content:end; align-items:center; }
       .coverage-preview{ position:relative;width: 50%; }
       .coverage-card{ background:#fff; border-radius:16px; padding:2rem; box-shadow:0 20px 25px -5px rgba(0,0,0,.1), 0 10px 10px -5px rgba(0,0,0,.04); border:1px solid #f1f5f9; min-width:300px;margin: 12px auto; }
       .card-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:1.5rem; }
       .insurance-logo{ width: 48px; height: 48px; background: #ff842e; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #fff; }
       .card-status{ display:flex; align-items:center; gap:.5rem; color:#059669; font-weight:600; font-size:.875rem; }
       .status-dot{ width:8px; height:8px; background:#10b981; border-radius:50%; }
       .coverage-amount{ font-size:2rem; font-weight:700; color:#0f172a; margin-bottom:.5rem; }
       .coverage-amount span{ font-size:1rem; font-weight:400; color:#64748b; }
       .coverage-note{ color:#059669; font-size:12px; font-weight:500; } /* --- Coverage details --- */
       .coverage-details{ padding:5% 0 5% 0; background:#fff; } .details-container{ max-width:1200px; margin:0 auto; }
      .insurance-fullscreen .wb-coverage-div .wb-wrap{ max-width: 1250%; width: 100%; padding-inline-start: 0; padding-inline-end: 0; }
       /* Ensure the div-based table fills the wrapper */
       .insurance-fullscreen .dv-table{ width: 100%; }
       /* Optional: slightly increase column balance on wide screens */
       @media (min-width: 1024px){ .insurance-fullscreen .dv-head, .insurance-fullscreen .dv-row{ grid-template-columns: 1.1fr 0.9fr 0.7fr 1.8fr; } }
       .coverage-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap:2rem; }
       .coverage-item{ background:#f8fafc; border-radius:16px; padding:2rem; text-align:center; border:1px solid #f1f5f9; transition:.3s; }
       .coverage-item:hover{ transform: translateY(-4px); box-shadow:0 20px 25px -5px rgba(0,0,0,.1); }
       .item-icon{ width:64px; height:64px; background:#e0f2fe; border-radius:16px; display:flex; align-items:center; justify-content:center; margin:0 auto 1.5rem; color:#0369a1; }
       .coverage-status{ display:flex; justify-content:center; } .status-covered{ background:#dcfce7; color:#166534; padding:.5rem 1rem; border-radius:20px; font-size:12px; font-weight:500; } /* --- Process --- */
      .process-header p{  font-size: 16px; color: rgba(0, 0, 0, 0.61); text-align: center; margin: 0; } .process-timeline{ display:flex; flex-direction:row; gap:3rem; }
       .timeline-item{ display:flex; align-items:flex-start; gap:2rem; }
        .timeline-marker{ flex-shrink:0; width:42px; height:42px; background:#ff842e; color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.25rem; font-weight:700; }
       .trust-section{ padding:4rem 2rem; background:#fff; border-top:1px solid #f1f5f9; }
       .trust-container{ max-width:800px; margin:0 auto; text-align:center; }
       .trust-features{ display:flex; justify-content:center; gap:3rem; flex-wrap:wrap; }
       .trust-feature{ display:flex; align-items:center; gap:.75rem; color:#475569; font-weight:500; }
       .trust-feature svg{ color:#059669; }
       .wb-coverage-div{ --green:#16a34a; --line:#E8EEF5; --text:#0B1320; --sub:#5B6470; --white:#fff; display: grid; grid-column: 1 / -1; grid-row: 2; }
       .dv-table{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--white)} .dv-head{display:grid;grid-template-columns:1.2fr 1fr .7fr 1.6fr;background: #F6F9FC}
       .dv-hcell{padding:16px 18px;color:#334155;font-size: 14px;} /* Rows / cells */ .dv-row{display:grid;grid-template-columns:1.2fr 1fr .7fr 1.6fr;border-top:1px solid var(--line);background:#fff}
       .dv-row:first-of-type{border-top:none}
       .dv-row.is-highlight{background: #f6f9fb}
       .dv-cell{padding:14px;font-size:14px;display:flex;align-items:center;gap:.5rem}
       .dv-service{font-weight:800}
      .dv-cost{font-weight:800}
        .dv-details{color:var(--sub)} /* Badges & icons */
      .ins-detail-badge{ border: 1px solid transparent; border-radius: var(--badge-corner-radius); display: flex; font-size: 12px; align-items: center; padding: .5rem 1rem .5rem; background: linear-gradient(135deg, #f4f4f4 0%, #f2f2f2 100%); gap: 8px; width: 80%; justify-content: center; }
       .dot{display:inline-block;width:10px;height:10px;border-radius:999px}
      .dv-legend{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:16px;color:var(--sub);font-size:12px;}
      .legend-title{font-weight:700;color:var(--text)}
       .legend-item{display:inline-flex;align-items:center;gap:.5rem}
       .dv-label{display:none;color:#000;}
       @media (max-width: 768px){
         .insurance-hero{ min-height:auto; padding:4rem 0; }
         .hero-container{ padding:0 1rem;display: flex; flex-direction: column; }
         .hero-cta{ flex-direction:column; }
         .cta-primary, .cta-secondary{ width:100%; justify-content:center; }
         .coverage-details, .process-section{ padding:4rem 1rem; }
         .hero-title{ font-size: clamp(2rem, 7vw, 2.6rem); }
         .hero-subtitle{ font-size:16px; }
         .hero-description{ font-size:1rem; margin-bottom:2rem; }
         .dv-head{display:none}
         .dv-table{border:none}
         .dv-row{ grid-template-columns:1fr;background:#fff;border:1px solid var(--line); border-radius:12px;margin-bottom:12px;overflow:hidden }
         .dv-cell{justify-content:space-between;padding:12px 14px;font-size: 10px;}
       .dv-cell + .dv-cell{border-top:1px solid var(--line)} .dv-label{display:inline-block} .dv-service{font-size:1rem;font-weight:800} }
       @media (max-width: 420px){
        .dv-cell{padding:12px 14px} } @media (max-width: 1024px){ .hero-container{ grid-template-columns:1fr; gap:3rem; text-align:center; }
        .hero-content,
        .hero-visual,
        .process-section{ grid-column:1; }
        .process-timeline{ flex-direction:column; gap:2rem; }
        .timeline-item{ flex-direction:column; text-align:center; align-items:center; } }
        /* --- Mobile (<= 480px) --- */ @media (max-width: 480px){
           .coverage-card{ padding:1.5rem; }
           .details-section-header h2,
            .hero-content { max-width: 90%; margin: 0 auto; }
            .hero-title{ font-size:2.2rem; }
            .item-icon{ width:56px; height:56px; }
        .timeline-marker{ width:38px; height:38px; font-size:1.1rem; }
        .dv-label{ display:inline-block; text-align: start; font-weight: 800; }
        .dv-legend{font-size: 10px;justify-content: center;}
        .hero-visual { width: 100%;justify-content: center; }
        .insurance-logo { width: 38px; height: 38px; }
        .insurance-logo svg { width: 20px; height: 20px; }
        .ins-detail-badge { width: 50%; }
        .dv-table{ background: transparent; } }
        @media (max-width: 767px){
        .insurance-fullscreen .insurance-hero{ min-height: auto; padding: 56px 0; padding: 6% 2%;}
        .insurance-fullscreen .hero-container{ display: flex; flex-direction: column; gap: 6px; } .insurance-fullscreen .hero-title{ font-size: 20px;} .insurance-fullscreen .hero-subtitle{ font-size: 15px; margin-bottom: .875rem; } .insurance-fullscreen .hero-description{ font-size: 14px; margin-bottom: 1.25rem; } .insurance-fullscreen .insurance-badge{ padding: .55rem 1rem; font-size: .8rem; margin-bottom: 1rem; } .insurance-fullscreen .hero-cta{ flex-direction: column; } .insurance-fullscreen .cta-primary{ width: 100%; padding: 8px 12px; border-radius: 999px; } .insurance-fullscreen .wb-table{ font-size: 12.5px; min-width: 720px; } /* ensure scroll zone */ .insurance-fullscreen .wb-table th, .insurance-fullscreen .wb-table td{ padding: .5rem .55rem; } .insurance-fullscreen .wb-table .wb-sticky{ max-width: 180px; }
        .insurance-fullscreen .wb-legend{ font-size: .8rem; display: none; } .insurance-fullscreen .coverage-card{ padding: 1.25rem; min-width: 0; } .insurance-fullscreen .process-section{ padding: 48px 0; }
         .insurance-fullscreen .process-container{ padding: 0; } .insurance-fullscreen .process-header{ margin-bottom: 28px; } .insurance-fullscreen
  .insurance-fullscreen .process-header p{ font-size: 14px; } .insurance-fullscreen .process-timeline{ display: grid; gap: 18px; } .insurance-fullscreen .timeline-item{  text-align: start; align-items: flex-start; flex-direction: row; } .insurance-fullscreen
        .timeline-marker{ width: 36px; height: 36px; font-size: 1rem; } .insurance-fullscreen .coverage-details{ padding: 48px 12px; } .insurance-fullscreen .coverage-grid{ grid-template-columns: 1fr; gap: 18px; } .insurance-fullscreen .coverage-item{ padding: 1.25rem; } .insurance-fullscreen .coverage-item h3{ font-size: 18px; margin: .75rem 0 .5rem; }
        .insurance-fullscreen .coverage-item p{ font-size: 14px; } .insurance-fullscreen .item-icon{ width: 56px; height: 56px; } .insurance-fullscreen .details-section-header{ margin-bottom: 1.25rem; } .insurance-fullscreen .details-section-header h2{ font-size: 20px; margin: .5rem 0; } } /* ========== TABLET (600px–1023px) ========== */
       @media (min-width: 600px) and (max-width: 1023px){ /* Grid simplifies to single column, media centered */ .insurance-fullscreen .hero-container{ display: grid; grid-template-columns: 1fr; gap: 36px; } .insurance-fullscreen .hero-content, .insurance-fullscreen .hero-visual, .insurance-fullscreen .process-section{ grid-column: 1; } .insurance-fullscreen .hero-title{ font-size: 22px; } .insurance-fullscreen .hero-subtitle{ font-size: 16px; } .insurance-fullscreen .hero-description{ font-size: 15px; } .insurance-fullscreen .hero-cta .cta-primary{ width: auto; padding: 12px 18px; border-radius: 999px; } /* Table: keep scroll, tighten padding a bit */ .insurance-fullscreen .wb-table{ font-size: 13px; } .insurance-fullscreen .wb-table th, .insurance-fullscreen .wb-table td{ padding: .6rem .65rem; } /* Process timeline stacks */ .insurance-fullscreen .process-timeline{ flex-direction: column; gap: 22px; } .insurance-fullscreen .timeline-item{ flex-direction: row; text-align: start; } .insurance-fullscreen .timeline-marker{ width: 40px; height: 40px; } /* Coverage grid: 2 columns feel great on tablets */ .insurance-fullscreen .coverage-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px; } } /* ========== SMALL DESKTOP (1024px–1279px) optional polish ========== */ @media (min-width: 1024px) and (max-width: 1279px){ .insurance-fullscreen .hero-container{ gap: 2rem; } .insurance-fullscreen .hero-title{ font-size: 24px; } .insurance-fullscreen .coverage-grid{ gap: 28px; } }
/* ---------- Layout ---------- */
.therapy-movement{ background:#fff; color:#111827; overflow:hidden; }
.therapy-movement .tm-grid{ display:grid; grid-template-columns: 1fr; min-height:min(920px, 100vh); }
@media(min-width:1024px){ .therapy-movement .tm-grid{ grid-template-columns: 1.1fr 0.9fr; } }
.tm-left{ display:flex; align-items:center; padding: clamp(1.5rem, 4vw, 3rem); }
.tm-inner{ max-width: 720px; margin-inline:auto; }

/* ---------- Badge, headings & text ---------- */
.tm-badge{ display:inline-block; background:#fee2e2; color:#b91c1c; border:1px solid #fecaca; padding:.4rem .8rem; border-radius:999px; font-weight:600; margin-bottom:1rem; }
.tm-h2{ font-weight:800; letter-spacing:-.01em; line-height:1.15; font-size: clamp(2rem, 4.5vw, 3.25rem); margin:0 0 1rem; }
.tm-lead,.tm-outro{ font-size:1.0625rem; line-height:1.8; color:#4b5563; }
.tm-lead{ margin:0 0 1rem; } .tm-outro{ margin-top:1rem; }

/* ---------- Failure list (chips) ---------- */
.tm-list{ display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap:.5rem .75rem; margin:.75rem 0 1.25rem; }
@media(max-width:640px){ .tm-list{ grid-template-columns: 1fr; } }
.tm-pill{ display:flex; align-items:center; gap:.5rem; padding:.6rem .9rem; background:#fee2e2; border:1px solid #fecaca; color:#991b1b; border-radius:.75rem; font-size:.9375rem; opacity:0; transform:translateY(12px); transition:opacity .6s ease, transform .6s ease; }
.tm-pill.is-in{ opacity:1; transform:none; }
.tm-dot{ width:10px; height:10px; border-radius:999px; background:#f97316; }

/* ---------- CBT container ---------- */
.tm-cbt{ background:#eef2ff; border:1px solid #e0e7ff; border-radius:1rem; padding:1rem; opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease; }
.tm-cbt.is-in{ opacity:1; transform:none; }
.tm-cbt-head{ display:flex; align-items:center; gap:.75rem; margin-bottom:.75rem; }
.tm-cbt-icon{ width:40px; height:40px; border-radius:.6rem; display:grid; place-items:center; color:#fff; background:#2563eb; }
.tm-cbt-title{ font-weight:800; color:#111827; }
.tm-cbt-sub{ color:#2563eb; font-weight:600; font-size:.9375rem; }

/* Stat cards */
.tm-cards{ display:grid; gap:.6rem; margin:.75rem 0 1rem; }
.tm-card{ display:flex; align-items:center; gap:.75rem; background:#fff; border:1px solid #e5e7eb; border-radius:.75rem; padding:.75rem; opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease; }
.tm-card.is-in{ opacity:1; transform:none; }
.tm-card-icon{ width:40px; height:40px; border-radius:.5rem; background:#f8fafc; display:grid; place-items:center; flex:0 0 40px; }
.tm-card-copy{ flex:1; }
.tm-card-top{ display:flex; gap:.5rem; align-items:baseline; flex-wrap:wrap; }
.tm-num{ font-weight:800; font-size:1.375rem; min-width:3ch; display:inline-block; }
.tm-desc{ color:#475569; font-size:.9375rem; }

/* Progress bars */
.tm-gauge{ display:block; width: 160px; max-width:100%; height: 6px; background:#1118270f; border-radius:999px; margin-top:.4rem; overflow:hidden; }
.tm-gauge-fill{ display:block; width:0; height:100%; background:#111827; opacity:.28; border-radius:inherit; transition:width .9s cubic-bezier(.2,.65,.2,1); }

/* CTA */
.tm-btn{ margin-top:1rem; display:inline-flex; align-items:center; gap:.5rem; padding:.9rem 1.2rem; background:#2563eb; color:#fff; font-weight:700; border-radius:.75rem; text-decoration:none; box-shadow:0 10px 24px rgba(37,99,235,.25); opacity:0; transform:translateY(12px); transition:opacity .6s ease, transform .6s ease, background .2s ease; }
.tm-btn:hover{ background:#1d4ed8; }
.tm-btn.is-in{ opacity:1; transform:none; }

/* ---------- Right side gradient visual ---------- */
.tm-right{ position:relative; overflow:hidden; min-height:520px; }
.tm-grad{ position:absolute; inset:0; background: linear-gradient(135deg, var(--grad-from,#fb923c), var(--grad-via,#f87171), var(--grad-to,#ec4899)); }
.tm-lines{ position:absolute; inset:-10% -10% -10% -10%; opacity:.18; background: repeating-linear-gradient(90deg, #fff 0, #fff 2px, transparent 2px, transparent 60px); animation: linesPulse 3s ease-in-out infinite; }
@keyframes linesPulse{ 0%,100%{opacity:.16; transform:scaleY(1)} 50%{opacity:.26; transform:scaleY(1.05)} }

@keyframes tm-float { 0%{transform:translateY(0)} 50%{transform:translateY(-16px)} 100%{transform:translateY(0)} }
.tm-float{ position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; }
.tm-tile{ width:128px; height:128px; border-radius:1.25rem; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.35); backdrop-filter: blur(6px); display:grid; place-items:center; animation: tm-float 4s ease-in-out infinite; }
.tm-brain{ width:64px; height:64px; color:#fff; }

/* bottom overlay stats */
.tm-stats{ position:absolute; inset-inline-start:1rem; inset-inline-end:1rem; bottom:1rem; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.35); backdrop-filter: blur(8px); border-radius:1rem; padding:1rem; color:#fff; }
.tm-stats-grid{ display:flex; justify-content:space-between; gap:1rem; text-align:center; }
.tm-stats .v{ font-weight:800; font-size:1.15rem; }
.tm-stats .l{ font-size:.9rem; opacity:.95; }

/* optional fallback image (behind everything) */
.tm-image{ position:absolute; inset:0; background-repeat:no-repeat; background-size:cover; background-position:center right; opacity:.15; }

/* Floating particles (created by JS) */
.tm-bubbles{ position:absolute; inset:0; pointer-events:none; }
.tm-bubble{ position:absolute; width:14px; height:14px; border-radius:999px; background:#ffffff; opacity:.18; filter:blur(.2px); animation: bubble 6s ease-in-out infinite; }
@keyframes bubble{ 0%{ transform:translate(0,0); opacity:.15 } 50%{ transform:translate(10px,-20px); opacity:.35 } 100%{ transform:translate(0,0); opacity:.15 } }
.solution-header{margin:0 auto 60px;}
      .solution-grid{display:grid;gap:10px;grid-template-columns:repeat(4,1fr);}
      .icon-wrapper{width:42px;height:42px;margin:1rem auto;color:#b3a595;transition:.35s cubic-bezier(.25,1,.5,1);filter:drop-shadow(0 0 0 rgba(212,175,55,0));}
      .icon-wrapper svg{width:100%;height:100%;}
      .bullet-list{list-style:none;padding:0;margin:0 0 20px;}
      .bullet-list li{display:flex;gap:.5rem;align-items:flex-start;font-size:14px;color:#4a545e;margin:.4rem 0;text-align:start;}
      .bullet-list li::before{
        content:"";
        display:inline-block;
        border-radius:50%;
        background: #FF842E;
        mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="white" viewBox="0 0 24 24"><path d="M20.285 6.709a1 1 0 00-1.414-1.414l-9.192 9.191-4.243-4.242a1 1 0 10-1.414 1.414l5 5a1 1 0 001.414 0l9.849-9.949z"/></svg>') center/65% 65% no-repeat;
        flex:none;
        margin: 0.25rem 0;
        width: 1.75rem;
        height: 1.75rem;
        color: #FF842E;
        flex: 0 0 auto;
      }

      .key-ingredients-heading{
        text-transform:uppercase;
        letter-spacing:1px;
      }


    .solution-card{
      height: 100%;
      position: relative;
      padding: 12px;
      border: 0.8px solid #b3a595;
      border-radius: 12px;
    }

      .solution-card:hover .icon-wrapper{transform:scale(1.15);color:#FF842E;filter:drop-shadow(0 0 20px rgba(212,175,55,.7));}
      .solution-card:hover{transform:translateY(-5px);box-shadow:0 20px 40px rgba(255, 132, 46,.08); border-color:rgb(255, 132, 46);}
      .solution-card.no-link{cursor:default;}
      .solution-card.no-link:hover{transform:none;box-shadow:none;border-color:#e9e9e4;}


    .solution-card .icon-wrapper{ align-self: start; }
    .solution-card .welbewust-heading3{ align-self: start; }
    .solution-card .welbewust-base{ align-self: start; }
    .solution-card .key-ingredients{
      align-self: end;
      padding-top: 20px;
      border-top: 1px solid #f0f0f0;
      margin-top: 20px;
    }
    @media (min-width:578px) and (max-width:990px){.solution-grid{grid-template-columns:repeat(2,1fr);}}
    @media(max-width:578px){.solution-grid{grid-template-columns:1fr;}}

    @media (min-width: 769px){
      .solution-card .welbewust-base{
        height: 35%;
      }
    }

    @media (max-width: 768px){
      .solution-card .welbewust-base{ -webkit-line-clamp: 5;line-clamp: 5; }
      .solution-card {
        min-height: 480px;
        position: relative;
        padding: 12px;
      }
    }
video {
    width: 100%;
  }
  #vr-1.vr-commit{
    --bg-grad: radial-gradient(1200px 420px at 50% -160px,#eef5ff 10%,#f6f9ff 60%,#fff 100%);
    --card:#fff; --border:rgba(10,22,50,.10); --shadow:0 10px 30px rgba(11,15,26,.06);
    --fg:#0b1326;  position:relative; color:var(--fg); background:var(--bg-grad);
  }
  #vr-1 .vr-shape{ position:absolute; inset:0 0 auto 0; height:220px; width:100%; display:block; fill:#e8f0fb; pointer-events:none }
  #vr-1 .vr-container{ max-width:1250px; margin:0 auto; padding:6% 2%; position:relative }

  @media (min-width: 1920px) and (max-width: 2559px) {
    #vr-1 .vr-container{ max-width: 1650px; }
  }

  @media (min-width: 2560px) {
    #vr-1 .vr-container{ max-width: 2133.3px; }
  }

  .vr-video {
    width: 100%;
  }

  .userInput {
    outline: none;
  }
  #vr-1 .vr-grid{ display:grid; gap:40px; grid-template-columns:1fr 1fr 1fr; align-items:start; }

  #vr-1 .vr-features{ list-style:none; margin:0; padding:0; display:grid; gap:26px;height: 100%; }
  #vr-1 .vr-feature{ display:grid; grid-template-columns:36px 1fr; gap:14px; align-items:start }
  #vr-1 .vr-ico{ width:36px; height:36px; border-radius:10px; background:#f0f5ff; display:grid; place-items:center; border:1px solid var(--border) }
  #vr-1 .vr-ico img{ width:22px; height:22px; object-fit:contain; }
  #vr-1 .vr-ico svg{ width:18px; height:18px; fill:#294F9E; }

  /* Center 3D */
  #vr-1 .vr-center{ margin:0; text-align:center;display: flex;align-items: center;justify-content: center; height: 100%;}
  #vr-1 .vr-center__box{  border-radius:20px; overflow:hidden }
  #vr-1 .vr3d{ width:100%; height:clamp(380px,62vh,640px) }
  #vr-1 canvas{ display:block; width:100% !important; height:100% !important }
  #vr-1 .vr-loader{ position:absolute; inset:0; display:grid; place-items:center; pointer-events:none }
  #vr-1 .vr-bar{ width:min(320px,60%); height:3px; background:rgba(0,0,0,.08); border-radius:999px; overflow:hidden }
  #vr-1 .vr-fill{ width:0%; height:100%; background:#2a7fff; box-shadow:0 0 24px rgba(42,127,255,.5) inset }
  #vr-1 .vr-cap{ color:var(--muted); font-size:13px; margin-top:10px }

  @media (max-width:1100px){
    #vr-1 .vr-grid{ grid-template-columns:1fr }
    #vr-1 .vr-center{ order:2 }
    #vr-1 .vr-features--left{ order:1 }
    #vr-1 .vr-features--right{ order:3 }
  }

  #vr-1 .vr-video-embed{ position:relative; width:100%; padding-top:56.25%; }
  #vr-1 .vr-video-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }
  #vr-1 .vr-video{ width:100%; height:auto; display:block; }

  @media (max-width: 599px){
    #vr-1 .vr-container{ padding: clamp(96px, 22vh, 160px) 0 8% 0; }
    #vr-1 .vr-grid{ grid-template-columns: 1fr; gap: 24px; }

    #vr-1 .vr-features--left{ order: 1; }
    #vr-1 .vr-center{ order: 2; }
    #vr-1 .vr-features--right{ order: 3; }

    #vr-1 .vr-heading{ max-width: 92%; margin: 0 auto 10px; }
    #vr-1 .vr-title{ font-size: 20px; margin: 1rem 0 .5rem; }
    #vr-1 .vr-sub{ font-size: 15px; text-align: start; }


    #vr-1 .vr-features{ gap: 18px; padding-inline: 16px; }
    #vr-1 .vr-feature{ grid-template-columns: 32px 1fr; gap: 15px; }
    #vr-1 .vr-ico{ width: 32px; height: 32px; }
    #vr-1 .vr-ico img{ width: 20px; height: 20px; }
    #vr-1 .welbewust-heading4{ margin: 0 0 6px; }

    /* Media */
    #vr-1 .vr-center__box{ border-radius: 16px;padding-inline: 18px; }
  }

  @media (min-width: 600px) and (max-width: 1023px){
    #vr-1 .vr-container{ padding: clamp(96px, 18vh, 200px) 0 6% 0; }
    #vr-1 .vr-grid{
      grid-template-columns: 1fr;
      gap: 32px;
      padding-inline: 20px;
    }

    #vr-1 .vr-center{ grid-column: 1 / -1; order: 2; }
    #vr-1 .vr-features--left{ order: 1; }
    #vr-1 .vr-features--right{ order: 3; }

    #vr-1 .vr-heading{ max-width: 80%; }
    #vr-1 .vr-title{ font-size: 22px; }
    #vr-1 .vr-sub{ font-size: 16px; }
  }
/* --- Container resembles Hims hero band, but keeps your colors --- */
      .wellbeing-section{
        width:100%;margin-inline:auto;
        padding: clamp(2rem, 5vw, 6rem) clamp(1rem, 5vw, 4rem);
        background: linear-gradient(180deg, #6885C8 0%, rgba(193,220,237,.5) 100%);
        border-radius: clamp(16px, 2vw, 28px);
        overflow:hidden;
        position:relative;
      }

      /* HERO — centered like Hims */
      .hero-grid{
        display:grid;grid-template-columns:1fr auto 1fr;gap:2rem;align-items:center;justify-items:end;
        grid-template-areas:"heading image subtext";
        padding-block: clamp(1rem, 2vw, 1.5rem);
      }
      .hero-area-heading{grid-area:heading}
      .hero-area-image{grid-area:image}
      .hero-area-subtext{grid-area:subtext}

      .hero-welbeing-heading{
        font-size: clamp(2.4rem, 5vw, 4.2rem);
        font-weight: 700; line-height:1.6;
        color:#fff; text-align:start; position: absolute; top: 3%;
        inset-inline-start: 5%;
      }
      .hero-image{width: clamp(320px, 40vw, 470px);}

      @media (max-width: 576px) {
        .hero-image {
          width: clamp(200px, 40vw, 470px);
          margin: 0 auto;
        }
      }
      .hero-welbeing-subtext{
        line-height:1.6; color:#fff; max-width:38ch
      }

      /* GRID BELOW — two columns + bottom band */
      .section-container{display:grid; gap:2rem}
      @media (min-width: 769px){
        .section-container{
          grid-template-columns: 1.1fr 0.9fr;
          grid-template-areas:"left right" "bottom bottom";
          align-items:stretch;
        }
      }
      .wellbeing-left{grid-area:left;display:flex}
      .wellbeing-right{grid-area:right;display:flex;flex-direction:column;gap:2rem}
      .wellbeing-bottom{grid-area:bottom;}

      .card{border-radius:18px;padding:clamp(1.25rem, 2.2vw, 2rem);box-shadow:0 12px 24px rgba(0,0,0,.08);position:relative}

      .card.tall{
        flex: 1;
        min-height: 400px;
        color: #fff;
        background-image: url(/cdn/shop/files/guy_smiling.webp?v=1747219257);
        background-size: 70%;
        border-radius: 20px;
        overflow: hidden;
        position: relative;
        background-position: 50% 12%;
        background-repeat: no-repeat;
      }
      .card.tall::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.12));z-index:1}
      .card.tall > *{position:absolute;z-index:2}

    .therapy-tags{
      position: absolute;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center;
      justify-content: flex-start;
      z-index: 3;
      flex-direction: column;
      justify-content: start;
      align-items: start;
      margin-top: 50px;
    }

    .therapy-tags .tag{
      position: static;
      display: inline-flex;
      align-items: center;
      gap: .5em;
      background: rgba(255,255,255,.22);
      color: #fff;
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border-radius: 999px;
      padding: .45em .9em;
      font-size: 12px;
      white-space: nowrap;
    }

      .mini-card{
        position:absolute; width:min(260px, 42%); background:rgba(255,255,255,.16);
        color:#fff; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
        border-radius:16px; padding:12px 14px; box-shadow:0 10px 30px rgba(0,0,0,.18);
      }
      .mini-card .title{font-weight:500;font-size:14px;opacity:.95;text-align:start;}
      .mini-card .row{display:flex;justify-content:space-between;gap:10px}
      .mini-card .label{opacity:.85}
      .mini-card .value{background:rgba(255,255,255,.22);padding:4px 8px;border-radius:999px}

      .mini-card.left{
        inset-inline-start: 3%;
        bottom: 3%;
      }
      .mini-card.right{
        inset-inline-end: 2%;
        bottom: 20%;
      }

      @media (max-width: 1024px){
        .mini-card.left{ inset-inline-start:10px; top:12px }
        .mini-card.right{
          inset-inline-start: 60%;
          top: 8%;
        }
      }

      /* Sport & Supplements (right column) */
      .card.sport{
        background:url('/cdn/shop/files/stretching.jpg?v=1747229860') center/cover no-repeat;
        min-height: 26vh; color:#fff; border-radius:20px;
      }
      .card.supplements{
        flex:1; min-height:300px; color:#fff; border-radius:20px;
        background: rgba(32,64,112,.10);
        backdrop-filter: blur(20px);
        background-image:url("/cdn/shop/files/supplements_container.png?v=1747297535");
        background-repeat:no-repeat;background-position: 60% center;background-size: contain;
      }
      .tag-new{
        position:absolute;top:16px;inset-inline-end:16px;background:#fff;color:#175CD3;border-radius:999px;padding:.5em 1.5em;font-weight:700
      }
      .tag-new:hover {
        background: #0e3e77;
        color: #fff;
        transform: translateY(-2px);
      }

      /* Bottom health card */
      .card.health{
        min-height: auto;
        color: #fff;
        border-radius: 20px;
        background: rgba(32, 64, 112, .10);
        backdrop-filter: blur(20px);
        background-image: url(/cdn/shop/files/test_kit.png?v=1747299308);
        background-repeat: no-repeat;
        background-position: 85% 45%;
        background-size: 13%;
      }
      html[dir="rtl"] .card.health{
        background-position: 15% 45%; /* left-ish in RTL */
      }
      .card.health .card-inner{max-width:45%}

      @media(max-width: 576px) {
        .mini-card.right {
          inset-inline-start: 30%;
          top: 30%;
          display: none;
        }
        .mini-card.left{
          inset-inline-start: 0%;
          top: 3%;
          display: none;
        }
      }
      /* Responsiveness */
      @media (max-width: 768px){
        .hero-grid{grid-template-columns:1fr;grid-template-areas:"heading" "image" "subtext"; text-align:center}
        .hero-welbeing-heading{text-align:center}
        .hero-welbeing-subtext{max-width:55ch}
        .section-container{grid-template-areas:"left" "right" "bottom"}
        .card.health .card-inner{max-width:100%; text-align:center}
        .mini-card{width:70%}
        .mini-card.right{
          inset-inline-start: 0;
          top: 18%;
        }
        .ml-subtitle {
          display: block;
          position: relative;
          max-width: 100%;
          font-size:18px;
          inset-inline-start:0;
        }
      }
      @media (max-width: 576px) {
        .card.health{
          background-repeat: no-repeat;
          background-position: 50% 75%;
          background-size: 0;
        }
      }
.bridge-grid{
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    align-items: center;
    gap: 80px;
  }

  .bridge-content{ text-align: start; }

  .bridge-content .section-subtext{
    line-height: 1.8;
    margin-bottom: 40px;
    max-width: 520px;
    text-align: start;
  }
  .bridge-content .section-subtext p{ margin: 0 0 1em 0; }
  .bridge-content .section-subtext p:last-child{ margin-bottom: 0; }
  .bridge-content .section-subtext strong{
    font-weight: bold;
    color: #333;
  }

  .bridge-image-wrapper{
    padding: 15px;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 8px;
    line-height: 0;
  }
  .bridge-image-wrapper img,
  .bridge-image-wrapper .placeholder-svg{
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 4px;
  }

  /* Scroll animation */
  [data-scroll-animate]{
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .8s cubic-bezier(.25,.46,.45,.94), transform .8s cubic-bezier(.25,.46,.45,.94);
    will-change: opacity, transform;
  }
  [data-scroll-animate].is-visible{
    opacity: 1;
    transform: translateY(0);
  }

  /* Stagger */
  [data-scroll-animate="stagger-1"].is-visible{ transition-delay: .1s; }
  [data-scroll-animate="stagger-2"].is-visible{ transition-delay: .2s; }
  [data-scroll-animate="stagger-3"].is-visible{ transition-delay: .3s; }
  [data-scroll-animate="stagger-4"].is-visible{ transition-delay: .4s; }

  /* Responsive */
  @media (max-width: 990px){
    .bridge-grid{
      grid-template-columns: 1fr;
      gap: 60px;
      text-align: center;
    }
    .bridge-image-wrapper{ order: 1; }
    .bridge-content{
      order: 2;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .bridge-content .section-subtext,
    .bridge-content .welbewust-heading2{
      margin-inline: auto;
      text-align: center;
    }
  }