/* Reset box-sizing so padding doesn't change width calculations */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Outer beige background – centered, max 1920px */
.outer-section {
  width: 100%;
  max-width: 1920px; /* canvas width */
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 64px 0;
  font-family: "Proxima Nova", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Inner white container – fixed 1560px and centered on desktop */
.inner-container {
  width: 1560px;
  max-width: 100%;
  background: #fff;
  border-radius: 8px;
  margin: 0 auto;
  padding: 48px 80px;
  box-shadow: none;
}

/* Header */
.section-header {
  margin: 0 0 24px 0 !important;
  text-align: center;
  color: #2c2c2c;
  font-family: "Proxima Nova Condensed", "Proxima Nova", Arial;
  font-weight: 700;
}

/* Table wrapper forced to exact width to match pixel spec (desktop) */
.table-wrapper {
  width: 780px; /* exact table wrapper width on desktop */
  max-width: 100%;
  margin: 0 auto;
  display: block;
  box-sizing: border-box;
}

/* Table – fixed 780px on desktop */
.custom-table {
  width: 780px;
  max-width: 100%;
  border: 1px solid #dcdcdc;
  border-radius: 6px;
  border-collapse: collapse;
  table-layout: fixed;
  overflow: hidden;
  background: #fff;
  font-size: 14px;
  color: #2c2c2c;
}

/* Head / subhead / cells */
.custom-table thead th,
.custom-table tbody tr.subhead td {
  background-color: #95081a;
  color: #fff;
  font-weight: 700;
  padding: 12px 16px;
  height: 40px;
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
  font-family: "Proxima Nova Condensed", "Proxima Nova", Arial;
}
.custom-table tbody {
  border: 3px solid #ececec;
}

.custom-table tbody td {
  padding: 12px 16px;
  height: 48px;
  background: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: none;
}

/* alternating row color */
.custom-table tbody tr:nth-child(even):not(.subhead) td {
  background-color: rgba(247, 241, 232, 0.5);
}

/* rounded corners */
.custom-table thead tr:first-child th:first-child {
  border-top-left-radius: 4px;
}
.custom-table thead tr:first-child th:last-child {
  border-top-right-radius: 4px;
}
.custom-table tbody tr:last-child td:first-child {
  border-bottom-left-radius: 4px;
}
.custom-table tbody tr:last-child td:last-child {
  border-bottom-right-radius: 4px;
}

/* Column widths for 780px table (exact px) */
.custom-table th:nth-child(1),
.custom-table td:nth-child(1) {
  width: 368px;
} /* 45% of 780 = 351 */
.custom-table th:nth-child(2),
.custom-table td:nth-child(2) {
  width: 200px;
} /* 27.5% */
.custom-table th:nth-child(3),
.custom-table td:nth-child(3) {
  width: 200px;
}

/* Footnote exactly aligned to table width */
.footnote {
  width: 780px;
  max-width: 100%;
  margin: 8px auto 0 !important;
  font-size: 11px;
  color: #5b5b5b;
  text-align: left;
  box-sizing: border-box;
  padding-left: 2px;
}

/* ------------------ RESPONSIVE: Simplified standard breakpoints ------------------ */

/* Tablet and small laptops: <= 1024px
   - inner container scales
   - table fills wrapper (90% of available width) */
@media (max-width: 1024px) {
  .inner-container {
    width: 95%;
    padding: 36px 40px;
  }

  .table-wrapper {
    width: 90%;
    margin: 0 auto;
  }
  .custom-table {
    width: 100%; /* fills wrapper (90% of inner-container) */
  }
  .footnote {
    width: 90%;
  }

  /* make first column more readable on narrower widths */
  .custom-table th:nth-child(1),
  .custom-table td:nth-child(1) {
    width: 50%;
  }
  .custom-table th:nth-child(2),
  .custom-table td:nth-child(2),
  .custom-table th:nth-child(3),
  .custom-table td:nth-child(3) {
    width: 25%;
  }

  /* slightly tighter padding */
  .custom-table thead th,
  .custom-table tbody td {
    padding-left: 10px;
    padding-right: 10px;
  }
}

/* Mobile phones: <= 767px
   - inner container constrained to phone width (max 360px)
   - table fixed narrow width to match your mobile screenshot (320-336px)
   - columns become proportional thirds on narrow phones */
@media (max-width: 767px) {
  .outer-section {
    padding: 18px 12px;
  }
  .inner-container {
    width: 100%;
    max-width: 360px;
    padding: 18px 12px;
  }
  .section-header {
    font-size: 13px;
    margin-bottom: 12px;
  }

  /* use 320px table inside phone viewport for consistent look */
  .table-wrapper {
    width: 320px;
    margin: 0 auto;
  }
  .custom-table {
    width: 320px;
    font-size: 12.5px;
  }
  .custom-table thead th,
  .custom-table tbody tr.subhead td {
    padding: 8px 10px;
    height: 28px;
    font-size: 12px;
  }
  .custom-table tbody td {
    padding: 10px 12px;
    height: 40px;
    font-size: 12px;
  }

  /* column widths: balanced thirds on narrow phones */
  .custom-table th:nth-child(1),
  .custom-table td:nth-child(1) {
    width: 33.333%;
  }
  .custom-table th:nth-child(2),
  .custom-table td:nth-child(2) {
    width: 33.333%;
  }
  .custom-table th:nth-child(3),
  .custom-table td:nth-child(3) {
    width: 33.333%;
  }

  .footnote {
    width: 320px;
    font-size: 10px;
    margin-top: 8px;
    padding-left: 2px;
  }
}

/* Safety: avoid table overflow on extremely narrow screens */
@media (max-width: 320px) {
  .custom-table,
  .table-wrapper,
  .footnote {
    width: 100%;
  }
  .inner-container {
    padding: 12px;
    max-width: 100%;
  }
}
.d-flex {
  display: flex;
}
@media (min-width: 768px) {
  #exacerbation-reduction {
    [parent="content group block"] {
      display: flex;
      align-items: center;
      text-align: left;
      justify-content: left;
      max-width: 720px;
      padding: 16px 36px 16px 7px;
      border: 2px #f7f1e8 solid;
      margin-top: 20px;
      margin-bottom: 20px;
      img {
        @media (min-width: 768px) {
          height: 120px;
        }
      }
    }
  }
}
@media (min-width: 1200px) {
  #real-world-study {
    img {
      max-height: 340px !important;
    }
  }
}
#lung-function-142 {
  [data-component="RTE"]{
    margin-top:-25px;
  }
  img {
    @media (max-width: 767.5px) {
      height: 60px;
    }
    @media (min-width: 768px) {
      height: 120px;
    }
  }
}
#paitent-complexity-57 {
  img {
    height: unset;
    width: unset;
    border-radius: 0;
  }
}
#ocs-independent-patients {
  @media (max-width: 767.5px) {
    picture {
      display: flex;
      justify-content: center;
    }
    img {
      width: 85%;
    }
  }
}
#ocs-reduction-patients {
  @media (max-width: 767.5px) {
    picture {
      display: flex;
      justify-content: center;
    }
    img {
      width:200px;
      height: 80px;
    }
  }
}
#quality-of-life-70 {
 img {
    @media (max-width: 767.5px) {
      height: 70px;
    }
    @media (min-width: 768px) {
      height: 100px;
    }
  }
}
.fifty-img {
  max-width: 456px !important;
}
.article-content {
  margin-top: -70px !important;
   @media (max-width: 767.5px) {
     margin-top: -45px !important;
    }
}
#systemic-steriods {
  @media (max-width: 767.5px) {
    picture {
      display: flex;
      justify-content: center;
    }
  }
  img {
    width:75%;
  }
}
#surgery{ 
  img {
    @media (max-width: 767.5px) {
      width: 100%;
      height: 100%;
     border-radius: 0;
    }
    @media (min-width: 767.6px) {
    width: 100%;
    height: 310px;
    border-radius: 0;
    }
}
}
#reduction-surgery{
   margin: 0 auto;
    width: 100%;
    border: 1px solid;
    padding: 20px;
    margin-bottom: 20px;
    img{
      @media (max-width: 767.5px) {
        min-height: unset;
      }
    }
}
#surgery-subgroup{
  img{
    width: 90%;
    @media (max-width: 767.5px) {
      min-height: unset;
    }
  }
  @media (max-width: 767.5px) {
  picture {
    display: flex;
    justify-content: center;
  }
  }
}