/* DAWNZERA Results - Efficacy Page Styles */
.hero--cgi .hero__container.header-hero-container {
  justify-content: flex-start;
}

.hero--cgi .hero__content.header-hero-content {
  max-width: 720px;
  margin-top: -360px;
}

.hero--cgi .hero__title.header-hero-title {
  margin-bottom: 75px;

  @media (max-width: 768px) {
      margin-top: 60px;
  }
}

.hero--cgi .hero__title-main.header-hero-title-main {
  color: #1D2D3A;
  font-size: 26px;
  font-family: Agenda;
  font-weight: 400;
  line-height: normal;
  text-shadow: none;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: var(--color-charchol, #1D2D3A);
}

.hero--cgi .hero__title-sub.header-hero-title-sub {
  font-family: Tilt Neon;
  font-size: 48px;
  font-weight: 400;
  line-height: 54px;
  text-shadow: none;
  margin-bottom: 0;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: var(--color-charchol, #1D2D3A);

  .spacial-not {
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: var(--color-charcol);
    opacity: 1;
    animation: blinkThreeTimes 6s ease-in-out forwards;
  }
}

.header-hero-img img {
  object-fit: fill;
  height: 100%;
}

.desktop-img {
  display: block;
}

.mobile-img {
  display: none;
}

@media (max-width: 768px) {
  .hero--cgi .hero__content.header-hero-content {
      margin-top: -228px;
  }

  .hero--cgi .hero__title-main.header-hero-title-main {
      font-size: 20px;
      margin-bottom: 16px;
  }

  .hero--cgi .hero__title-sub.header-hero-title-sub {
      font-size: 36px;
      line-height: normal;
  }

  .hero__title-sub.mobile-hide-br br {
    display: none;
  }

  .desktop-img {
    display: none;
  }

  .mobile-img {
      display: block;
  }
}

.element-d-results {
  background-color: transparent;
  display: grid;
  justify-items: center;
  align-items: start;
  /* width: 100vw; */
}

.element-d-results .element-results-efficacy-wrapper {
  width: 1440px;
}

.element-d-results .element-results-efficacy {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  background-color: #ffffff;
}

/* Top Navigation */
.element-d-results .top-nav {
  display: flex;
  flex-direction: column;
  width: 1440px;
  align-items: center;
  padding: 12px 120px 0px;
  position: relative;
  flex: 0 0 auto;
  background-color: #ffffff;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

.element-d-results .logo-nav-items {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  border-bottom: 1px solid #ededed;
}

.element-d-results .DAWNZERA-US-TM {
  position: relative;
  width: 208px;
  height: 52px;
  object-fit: cover;
}

/* Hero Section */
.element-d-results .hero {
  display: flex;
  align-items: flex-start;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  background-color: #ffffff;
  min-height: auto;
  max-height: 440px;
  padding-top: 0px;
}

.element-d-results .DAWNZERA-website {
  position: relative;
  width: 1440px;
  height: 440px;
  object-fit: cover;
}

.element-d-results .copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: absolute;
  top: 60px;
  left: 120px;
  gap: 8px;

  @media (max-width: 1024px) {
    top: 40px;
    left: 24px;
  }
}

.element-d-results .text-wrapper-4 {
  position: relative;
  width: fit-content;
  margin-bottom: 0px;
  font-family: "Agenda", Helvetica;
  font-weight: 400;
  color: var(--color--charcol, #1d2d3a);
  font-size: 26px;
  line-height: normal;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: var(--color-charchol, #1D2D3A);
}

.element-d-results .AN-ATTACK-FREE-YEAR {
  position: relative;
  width: 700px;
  color: var(--color-charcol, #1d2d3a);
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: var(--color-charchol, #1d2d3a);
  font-family: var(--Font-H2, "Tilt Neon");
  font-size: 48px;
  font-style: normal;
  font-weight: 400;
  line-height: 54px;
}

.left-piping {
  display: none;
}

@media (min-width: 1400px) {
  .left-piping {
    display: block;
    position: absolute;
    left: 0;
    z-index: 5;
  }
}

/* Main Content Sections */
.element-d-results .section {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  background-color: #ffffff;
  padding: 80px 120px 60px 120px;
}

.element-d-results .container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  width: 1200px;
  gap: 40px;
  padding-inline: 0px;
}

.element-d-results .section-headline {
  position: relative;
  width: fit-content;
  font-family: "Tilt Neon", Helvetica;
  font-weight: 400;
  color: #1a1a1a;
  font-size: 28px;
  line-height: 32px;
  letter-spacing: -0.28px;
  margin-bottom: 0;
}

/* Bullet Points */
.element-d-results .bullet-copy {
  display: flex;
  align-items: flex-start;
  position: relative;
  width: 100%;
  gap: 12px;
}

.element-d-results .text-wrapper-7 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: "Tilt Neon", Helvetica;
  font-weight: 400;
  color: #f16b50;
  font-size: 18px;
  line-height: 24px;
}

.element-d-results .p {
  position: relative;
  flex: 1;
  margin-top: -1px;
  font-family: "Tilt Neon", Helvetica;
  font-weight: 400;
  color: #1a1a1a;
  font-size: 18px;
  line-height: 24px;
}

/* Charts and Figures */
.element-d-results .frame-2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  width: 100%;
  flex-wrap: wrap;
}

.element-d-results .CHART-reductions-in {
  position: relative;
  height: auto;
  object-fit: cover;
}

.element-d-results .chart-callout {
  display: flex;
  flex-direction: column;
  align-items: initial;
  position: relative;
  width: 100%;
  gap: 10px;
  padding: 24px;
  background-color: #feeee6;
  border-radius: 24px;
  max-width: 376px;
}

/* Buttons */
.element-d-results .button-2 {
  display: flex;
  align-items: center;
  position: relative;
  gap: 8px;
  padding: 12px 24px;
  background-color: #0066cc;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.element-d-results .button-2:hover {
  background-color: #0052a3;
}

.element-d-results .button-2 .text {
  position: relative;
  width: fit-content;
  font-family: "Tilt Neon", Helvetica;
  font-weight: 600;
  color: #ffffff;
  font-size: 16px;
  line-height: 20px;
}

/* Toggle Navigation */
.element-d-results .toggle-nav {
  display: flex;
  align-items: center;
  position: relative;
  gap: 0px;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid #e0e0e0;
}

.element-d-results .toggle-label {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 12px 24px;
  background-color: #ffffff;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.element-d-results .toggle-label[aria-selected="true"] {
  background-color: #0066cc;
  color: #ffffff;
}

.element-d-results .toggle-label:hover {
  background-color: #f0f0f0;
}

.element-d-results .toggle-label[aria-selected="true"]:hover {
  background-color: #0052a3;
}

/* ISI Section */
.element-d-results .ISI {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  background-color: #f8f9fa;
  padding: 60px 120px;
}

.element-d-results .container-2 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  width: 1200px;
  gap: 32px;
}

.element-d-results .IMPORTANT-SAFETY {
  position: relative;
  width: fit-content;
  font-family: "Tilt Neon", Helvetica;
  font-weight: 700;
  color: #1a1a1a;
  font-size: 24px;
  line-height: 28px;
  letter-spacing: -0.24px;
}

.element-d-results .text-wrapper-23 {
  position: relative;
  width: fit-content;
  font-family: "Tilt Neon", Helvetica;
  font-weight: 600;
  color: #1a1a1a;
  font-size: 18px;
  line-height: 22px;
  letter-spacing: -0.18px;
}

.element-d-results .text-wrapper-24 {
  position: relative;
  width: 100%;
  font-family: "Tilt Neon", Helvetica;
  font-weight: 400;
  color: #1a1a1a;
  font-size: 16px;
  line-height: 20px;
}

/* Footer */
.element-d-results .footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  background-color: #1a1a1a;
  padding: 40px 120px;
}

.element-d-results .navigation {
  display: flex;
  align-items: center;
  position: relative;
  gap: 32px;
  margin-bottom: 24px;
}

.element-d-results .navigation a {
  position: relative;
  width: fit-content;
  font-family: "Tilt Neon", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 14px;
  line-height: 18px;
  text-decoration: none;
  transition: color 0.2s ease;
}

.element-d-results .navigation a:hover {
  color: #cccccc;
}

.element-d-results .text-wrapper-31 {
  position: relative;
  width: 100%;
  text-align: center;
  font-family: "Tilt Neon", Helvetica;
  font-weight: 400;
  color: #cccccc;
  font-size: 12px;
  line-height: 16px;
}

.element-d-results .graph-heading-container {
  max-width: 844px;
  width: 100%;

  .graph-heading {
    color: #1d2d3a;
    text-align: center;
    font-family: Agenda;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-bottom: 0;
  }
}

.element-d-results .graph-section {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;

  .date-container {
    display: flex;
    padding-left: 30px;
    margin-top: 9px;

    .star {
      position: relative;
      top: -3px;
    }

    .footnote {
      color: #1d2d3a;
      font-family: Agenda;
      font-size: 16px;
      font-style: normal;
      font-weight: 400;
      line-height: normal;
      margin-bottom: 0;
    }
  }
}

.study-design-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1250;
  display: none;
}

.study-design-modal.open {
  display: block;
}

.study-design-modal {
  background: white;
  display: none;
  position: fixed;
  z-index: 1260;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 4px;

  sup {
    font-size: 60%;
    top: -0.46em;
  }
}

.modal-wrapper {
  line-height: normal;
  font-family: var(--font-agenda);

  .modal-close-wrapper {
    width: 86px;

    @media (max-width: 768px) {
      width: 12px;
    }
  }

  ul {
    li::marker {
      color: var(--color-coral, #f16b50);
    }
  }

  .modal-header {
    display: flex;
    justify-content: space-between;

    .modal-title {
      h2 {
        color: var(--color-charcol);
        font-size: 40px;
        font-family: var(--font-family-secondary);
        font-weight: 400;
        line-height: normal;
        word-wrap: break-word;
        margin-bottom: 2.5rem;

        @media (max-width: 768px) {
          font-size: 28px;
          margin-bottom: 3.56rem;
          margin-top: 0.625rem;
        }
      }
    }
  }

  .modal-content {
    p {
      color: var(--color-charcol);
      font-size: 20px;
      font-family: var(--font-agenda);
      font-weight: 400;
      word-wrap: break-word;
      line-height: normal;
      padding-left: 0.35rem;
    }

    ul {
      line-height: normal;

      li {
        font-size: 20px;
        line-height: normal;
      }
    }

    &.upper-content {
      ul {
        margin-bottom: 1.5rem;
      }
    }

    &.lower-content {
      ul {
        li::marker {
          color: var(--color-coral, #f16b50);
        }
      }

      @media (max-width: 768px) {
        margin-top: 1.5rem;
      }
    }
  }

  .font-bold {
    font-weight: 700;
    font-size: 20px;
  }

  .chart-inner-text {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    line-height: normal;
    text-align: center;

    @media (max-width: 768px) {
      font-size: 1.25rem;
    }
  }

  .margin-none {
    margin: 0;
  }
}

.lower-content {
  ul {
    li::marker {
      color: var(--color-coral, #f16b50);
    }
  }

  @media (max-width: 768px) {
    margin-top: 1.25rem;
  }
}

.study-design-backdrop.open {
  display: block;
}

/* Study Design Modal Two-Column Block Styles */

/* Two Columns Block */
.study-design-2-cols-block {
  align-self: stretch;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 2.5rem;
  display: inline-flex;
  width: 100%;
  padding-top: 1rem;

  .chart-wrapper {
    padding-inline: 2.5rem;

    .margin-none {
      margin: 0;
    }

    @media (max-width: 768px) {
      padding-inline: 0;
      padding-top: 0.68rem;
    }
  }

  @media (max-width: 768px) {
    padding-top: 0;
  }
}

.study-design-2-cols-wrapper {
  align-self: stretch;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 2.5rem;
  display: flex;

  &.inner-2-cols-wrapper {
    gap: 1.5rem;
  }

  @media (max-width: 768px) {
    gap: 1.5rem;
  }
}

.study-design-2-column {
  align-self: stretch;
  justify-content: flex-start;
  align-items: flex-start;
  display: inline-flex;
  flex-direction: column;
  gap: 2.5rem;
}
@media (min-width: 769px) {
  .study-design-2-column {
    flex-direction: row;
    gap: 0px;
  }
}

/* Columns */
.study-design-first-column,
.study-design-second-column {
  flex: 1 1 0;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 1.5rem;
  display: flex;
  width: 100%;

  &.oasis-hae-column {
    gap: 2.5rem;
  }

  &.oasisplus-column {
    gap: 2.5rem;
  }

  .chart-inner-text {
    p {
      padding: 0;
      margin: 0;
      line-height: normal;
    }
  }
}

/* Column Title */
.study-design-column-title-wrapper {
  align-self: stretch;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0.5rem;
  display: flex;
  line-height: normal;
}
.study-design-column-title {
  align-self: stretch;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-coral, #f16b50);
  font-size: 1.5rem;
  font-family: Tilt Neon;
  font-weight: 400;
  word-wrap: break-word;

  @media (min-width: 769px) and (max-width: 1200px) {
    height: 100px;
  }
}

@media (min-width: 769px) {
  .study-design-column-title {
    font-size: 2rem;
  }
}

/* Bars */
.study-design-column-left-bar {
  align-self: stretch;
  height: 0.5rem;
  background: #d9d9d9;
}
.study-design-column-right-bar {
  align-self: stretch;
  height: 0.5rem;
  background: var(--color-charcol, #1d2d3a);
}

/* Bullets */
.study-design-column-bullet {
  align-self: stretch;
  padding-left: 16px;
  padding-right: 16px;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 12px;
  display: inline-flex;
}
.study-design-column-bullet-text {
  flex: 1 1 0;
  color: var(--color-charcol, #1d2d3a);
  font-size: 1.25rem;
  font-family: var(--font-agenda);
  font-weight: 400;
  word-wrap: break-word;
  line-height: normal;
}
.study-design-column-bullet-icon {
  width: 7px;
  height: 1.125rem;
  color: var(--color-coral, #f16b50);
  font-size: 1.25rem;
  font-family: var(--font-agenda);
  font-weight: 400;
  word-wrap: break-word;
}

/* Flow Chart Blocks */
.study-design-flow-chart-first-block,
.study-design-flow-chart-third-block {
  width: 400px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 1.5rem;
  display: inline-flex;

  .study-design-flow-chart-first-block-title {
    margin-bottom: 30px;

    @media (max-width: 768px) {
      margin-bottom: 0;
    }
  }

  &.mobile-design {
    @media (max-width: 768px) {
      display: flex;
    }
  }

  @media (max-width: 768px) {
    width: auto;
  }
}

.study-design-flow-chart-first-block-1,
.study-design-flow-chart-first-block-2,
.study-design-flow-chart-first-block-3 {
  align-self: stretch;
  padding: 2px;
  background: var(--color-white, white);
  box-shadow: 0px 0px 8px #e08a67;
  overflow: hidden;
  border-radius: 1.5rem;
  outline-offset: -2px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}
.study-design-flow-chart-first-block-1 {
  outline: 2px #e2422d solid;
}
.study-design-flow-chart-first-block-2 {
  outline: 2px #1d2d3a solid;
  box-shadow: 0px 0px 8px #797573;
}
.study-design-flow-chart-first-block-3 {
  padding: 2rem;
  background: #eeeeee;
  border-radius: 1.125rem;
  outline: 4px var(--color-steel, #515861) solid;
  outline-offset: -4px;
  gap: 1.5rem;
  box-shadow: none;
}
@media (max-width: 374px) {
  .study-design-flow-chart-first-block-3 {
    padding-inline: 25px;
  }
}
.study-design-flow-chart-first-block-11 {
  flex: 1 1 0;
  padding-left: 2rem;
  padding-right: 2rem;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  background: var(--Dark-Coral, #c94808);
  box-shadow: 0px 0px 8px #e08a67 inset;
  overflow: hidden;
  border-radius: 1.125rem;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 1.5rem;
  display: inline-flex;
}
.study-design-flow-chart-first-block-31 {
  align-self: stretch;
  text-align: center;
  justify-content: center;
  display: flex;
  flex-direction: column;
  color: var(--color-charcol, #1d2d3a);
  font-size: 1.25rem;
  font-family: var(--font-agenda);
  font-weight: 400;
  word-wrap: break-word;
}
.study-design-flow-chart-first-block-4 {
  align-self: stretch;
  position: relative;
  justify-content: flex-start;
  align-items: flex-start;
  display: inline-flex;
  margin-bottom: 1.375rem;

  @media (max-width: 768px) {
    margin-bottom: 0;
  }
}
.study-design-flow-chart-first-block-41 {
  flex: 1 1 0;
  color: var(--color-charcol, #1d2d3a);
  font-size: 14px;
  font-family: var(--font-agenda);
  font-weight: 400;
  word-wrap: break-word;
}
.study-design-flow-chart-first-block-42 {
  left: -6px;
  top: 0px;
  position: absolute;
  color: var(--color-charcol, #1d2d3a);
  font-size: 14px;
  font-family: var(--font-agenda);
  font-weight: 400;
  word-wrap: break-word;
}

/* Flow Chart Second Block */
.study-design-flow-chart-second-block {
  flex: 1 1 0;
  padding-top: 123px;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}
.study-design-flow-chart-second-block-1 {
  width: 56px;
  height: 245px;
  transform: rotate(-180deg);
  border-top-left-radius: 2.5rem;
  border-bottom-left-radius: 2.5rem;
  border-left: 2px var(--color-charcol, #1d2d3a) solid;
  border-top: 2px var(--color-charcol, #1d2d3a) solid;
  border-bottom: 2px var(--color-charcol, #1d2d3a) solid;
  margin-top: -10px;

  @media (min-width: 768px) and (max-width: 850px) {
    height: 300px;
  }
}
.study-design-flow-chart-second-block-2 {
  flex: 1 1 0;
  padding-top: 4rem;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 10px;
  display: inline-flex;
}
@media (min-width: 769px) {
  .study-design-flow-chart-second-block-2 {
    min-width: 30%;
  }
}
.study-design-flow-chart-second-block-3 {
  align-self: stretch;
  height: 2px;
  background: var(--color-charcol, #1d2d3a);
}

/* Flow Chart Third Block */
.study-design-flow-chart-third-block {
  width: 400px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-end;
  gap: 2.5rem;
  display: inline-flex;

  @media (max-width: 768px) {
    width: auto;
  }
}

/* Common Chart Blocks */
.common-chart-1 {
  align-self: stretch;
  padding: 2px;
  background: var(--color-white, white);
  overflow: hidden;
  border-radius: 22px;
  outline: 2px #f59785 solid;
  outline-offset: -2px;
  justify-content: flex-start;
  align-items: flex-start;
  display: inline-flex;
}
.common-chart-2 {
  flex: 1 1 0;
  padding: 2px;
  background: var(--color-white, white);
  overflow: hidden;
  border-radius: 1.25rem;
  outline: 2px #fde5e0 solid;
  outline-offset: -2px;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}
.common-chart-3 {
  align-self: stretch;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 1.5rem;
  display: flex;
}
.common-chart-4 {
  align-self: stretch;
  text-align: center;
  justify-content: center;
  display: flex;
  flex-direction: column;
  color: var(--color-white, white);
  font-size: 1.25rem;
  font-family: var(--font-agenda);
  font-weight: 700;
  word-wrap: break-word;
  line-height: normal;
}
.common-chart-5 {
  align-self: stretch;
  padding: 2px;
  background: var(--color-white, white);
  overflow: hidden;
  border-radius: 22px;
  outline: 2px #515861 solid;
  outline-offset: -2px;
  justify-content: flex-start;
  align-items: flex-start;
  display: inline-flex;
}
.common-chart-6 {
  flex: 1 1 0;
  padding: 2px;
  background: var(--color-white, white);
  overflow: hidden;
  border-radius: 1.25rem;
  outline: 2px #797573 solid;
  outline-offset: -2px;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}
.common-chart-7 {
  flex: 1 1 0;
  padding-left: 2rem;
  padding-right: 2rem;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  background: var(--color-charcol, #1d2d3a);
  box-shadow: 0px 0px 8px #797573 inset;
  overflow: hidden;
  border-radius: 1.125rem;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 1.5rem;
  display: inline-flex;
}
.common-chart-8 {
  align-self: stretch;
  height: auto;
  text-align: center;
  justify-content: center;
  display: flex;
  flex-direction: column;
  color: var(--color-steel, #515861);
  font-size: 1.25rem;
  font-family: var(--font-agenda);
  font-weight: 700;
  word-wrap: break-word;
  line-height: normal;
}
.common-chart-9 {
  align-self: stretch;
  justify-content: center;
  display: flex;
  flex-direction: column;
  color: var(--color-charcol, #1d2d3a);
  font-size: 1.25rem;
  font-family: var(--font-agenda);
  font-weight: 400;
  word-wrap: break-word;
  line-height: normal;
}

/* Independent Blocks */
.independent-1 {
  align-self: stretch;
  padding: 2rem;
  background: #eeeeee;
  overflow: hidden;
  border-radius: 1.125rem;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0.5rem;
  display: flex;
}
.independent-2 {
  align-self: stretch;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 17px;
  display: flex;
  margin-top: 40px;
}
.independent-3 {
  align-self: stretch;
  padding: 2px;
  background: var(--color-white, white);
  box-shadow: 0px 0px 8px #797573;
  overflow: hidden;
  border-radius: 1.5rem;
  outline: 2px #1d2d3a solid;
  outline-offset: -2px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}
.independent-4 {
  flex: 1 1 0;
  padding-left: 2rem;
  padding-right: 2rem;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  background: var(--color-coral, #f16b50);
  box-shadow: 0px 0px 8px #e08a67 inset;
  overflow: hidden;
  border-radius: 1.125rem;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 1.5rem;
  display: inline-flex;
}
.independent-5 {
  width: 56px;
  height: 130px;
  border-top-left-radius: 2.5rem;
  border-bottom-left-radius: 2.5rem;
  border-left: 2px var(--color-charcol, #1d2d3a) solid;
  border-top: 2px var(--color-charcol, #1d2d3a) solid;
  border-bottom: 2px var(--color-charcol, #1d2d3a) solid;

  @media (min-width: 768px) and (max-width: 850px) {
    height: 163px;
  }
}

/* Utility */
.column {
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: flex-start;
  justify-content: flex-start;
  flex: 1;
  position: relative;
}
.bar {
  background-image: url(../../images/backgrounds/bar-vertical.png);
  width: 23px;
  height: 220px;
  background-size: 100%;
  background-repeat: no-repeat;
}
@media (max-width: 769px) {
  .bar {
    background-image: url(../../images/backgrounds/bar-horizontal.png);
    width: 100%;
    height: 23px;
    background-size: 100%;
    background-repeat: no-repeat;
  }
}

/* Modal Enhancements */
.study-design-modal {
  width: 90%;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #ffffff;
  padding: 32px;
  z-index: 9999;
  max-width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 1.5rem;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  display: none;

  ul > li {
    font-size: 20px;
    line-height: normal;
  }

  @media (max-width: 768px) {
    padding-inline: 24px;
  }
}

.study-design-modal.open {
  display: block;
}

.study-design-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(81, 88, 97, 0.5);
  z-index: 9998;
  display: none;
  backdrop-filter: blur(16px);
}

.study-design-backdrop.open {
  display: block;
  pointer-events: auto;
}

body.modal-open {
  overflow: hidden;
}

.modal-close-btn {
  background: transparent;
  border: none;
  font-size: 86px;
  font-weight: 500;
  color: #1d2d3a;
  cursor: pointer;
  transition: color 0.3s ease;
  margin-top: -25px;

  @media (max-width: 768px) {
    font-size: 42px;
    margin-top: -32px;
  }
}

.modal-close-btn:hover {
  color: var(--color-primary);
}

.desktop-design {
  display: none;
}

.mobile-design {
  display: block;
}

.study-design-flow-chart {
  width: 100%;
}

@media (min-width: 769px) {
  .desktop-design {
    display: inline-flex;
  }

  .mobile-design {
    display: none;
  }

  .study-design-modal {
    padding: 40px;
    max-width: 1200px;
  }
}

/* Responsive Design */
@media (max-width: 1440px) {
  .element-d-results .element-results-efficacy-wrapper {
    width: 100%;
    max-width: 1440px;
  }

  .element-d-results .top-nav {
    width: 100%;
    padding: 12px 60px 0px;
  }

  .element-d-results .DAWNZERA-website {
    width: 100%;
  }

  .element-d-results .section {
    padding: 60px 60px;
    padding-left: 120px;
  }

  .element-d-results .container,
  .element-d-results .container-2 {
    width: 100%;
    max-width: 1200px;
  }

  .element-d-results .footer {
    padding: 40px 60px;
  }
}

@media (max-width: 768px) {
  .element-d-results .top-nav {
    padding: 12px 20px 0px;
  }

  .element-d-results .copy {
    left: 24px;
    right: 20px;
    top: 40px;
    width: calc(100% - 40px);
    gap: 16px;
  }

  .element-d-results .text-wrapper-4 {
    font-size: 20px;
    line-height: normal;
  }

  .element-d-results .AN-ATTACK-FREE-YEAR {
    width: 95%;
    font-size: 36px;
    line-height: normal;
  }

  .element-d-results .section {
    padding: 40px 24px;
  }

  .element-d-results .ISI {
    padding: 40px 20px;
  }

  .element-d-results .footer {
    padding: 30px 20px;
  }

  .element-d-results .navigation {
    flex-direction: column;
    gap: 16px;
  }

  .element-d-results .CHART-reductions-in {
    width: 100%;
  }

  .element-d-results .frame-2 {
    flex-direction: column;
    gap: 20px;
  }

  .element-d-results .chart-callout {
    width: 100%;
  }

  .element-d-results .graph-heading-container {
    .graph-heading {
      text-align: left;
    }
  }

  .element-d-results .graph-section {
    .date-container {
      padding-left: unset;
      margin-top: 0;
    }
  }
}

.button-design {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px 10px 24px;
  border: 3px solid #f16b50;
  background-color: #ffffff;
  color: #f16b50;
  font-family: Agenda, sans-serif;
  font-size: 20px;
  font-weight: 700;
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.3s ease;
  height: 48px;

  @media (max-width: 768px) {
    width: 100%;
  }
}

#attack-reduction .container .attack-study-design-button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;

  @media (max-width: 768px) {
    justify-content: center;

    .button-design {
      width: 100%;
    }
  }
}

.button-design .drh-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.study-title {
  font-family: var(--Font-Body, Agenda);
  font-size: 20px;
  font-weight: 400;
  line-height: normal;
  color: var(--CHARCOAL, #1d2d3a);
  margin-bottom: 16px;
}

.study-list {
  list-style-type: disc;
  padding-left: 20px;
  margin: 0;
}

.study-point {
  font-family: var(--Font-Body, Agenda);
  font-size: 20px;
  font-weight: 400;
  color: var(--CHARCOAL, #1d2d3a);
  margin-bottom: 8px;
  line-height: 1.5;
}

.study-footer-text {
  font-size: 16px;
  line-height: normal;
  font-weight: 400;
  margin-bottom: 0;

  sup {
    font-size: 60%;
    top: -0.46em;
  }
}

.study-list .study-point.drh-text {
  margin-bottom: 0;
}

.study-point::marker {
  color: var(--Coral, #f16b50);
}

.study-point em {
  font-style: italic;
}

.study-point sup {
  font-size: 12px;
  top: -0.46em;
}

.attack-label .text-wrapper-3 {
  width: fit-content;
  padding: 5px 12px 3px 12px;
  background: var(--Coral, #f16b50);
  color: var(--White, #fff);
  font-size: var(--Size-Body, 20px);
  line-height: normal;
  border-radius: 4px;
  font-weight: 700;
}

.attack-reduction__item::marker {
  color: var(--Coral, #f16b50);
}

.dawnzera-results-attack__sup {
  font-size: 0.65rem;
}

.text-wrapper-6__sup {
  font-size: 1rem;
  font-weight: 300;
  vertical-align: baseline;
  position: relative;
  top: -0.85rem;
  line-height: 1;
}

.desktop-only {
  display: block !important;
}

.mobile-only {
  display: none !important;
}

@media (max-width: 768px) {
  .desktop-only {
    display: none !important;
  }

  .mobile-only {
    display: block !important;
  }
}

.attack-reduction-by-dose-graph-percent-wrapper.attack-reduction-graph {
  display: flex;
  padding: 24px;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  border-radius: 24px;
  background: #feeee6;
  margin: 0 auto;

  .attack-reduction-by-dose-graph-percent {
    width: 100%;
  }

  .attack-reduction-by-dose-graph-percent-title-desc-wrapper {
    font-family: var(--font-agenda);
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 24px;
    line-height: normal;
    font-weight: 400;
  }

  .attack-reduction-by-dose-graph-percent-title {
    font-family: var(--font-tilt-neon);
    color: #c94808;
  }

  @media (max-width: 425px) {
    .attack-reduction-by-dose-graph-percent-image img {
      margin: 0;
    }
  }
}

.section-attack-reduction-by-dose {
  width: 100%;
  background-color: var(--color-coral, #f16b50);

  .section-attack-reduction-by-dose-outer-wrapper {
    padding: 60px 0;

    @media (min-width: 426px) {
      background-image: url("../../images/pages/dawnzera-results/Orb Margin Graphic_Desktop.svg");
      background-repeat: no-repeat;
      background-position: right center;
    }

    @media (max-width: 768px) {
      padding: 40px 0 0 0;
    }

    .attack-reduction-by-dose-wrapper {
      margin: 0 auto;
      display: flex;
      gap: 40px;
      flex-direction: column;
      padding: 0 1.5rem;

      @media (min-width: 992px) {
        max-width: 95%;
        padding: 0;
      }

      @media (min-width: 1201px) {
        max-width: 1200px;
      }

      .attack-reduction-by-dose-header {
        display: flex;
        flex-direction: row;
        gap: 24px;

        @media (max-width: 768px) {
          flex-direction: column;
        }

        .attack-header-left {
          display: flex;
          flex-direction: column;
          gap: 24px;
          max-width: 715px;

          .attack-header-tag {
            display: flex;
            padding: 5px 12px 3px 12px;
            justify-content: center;
            align-items: center;
            gap: 10px;
            border-radius: 4px;
            background: var(--color-white, #fff);
            width: fit-content;
            color: var(--color-coral);
            font-weight: 700;

            @media (max-width: 768px) {
              font-size: 20px;
            }
          }

          .attack-header-title {
            color: var(--color-white, #fff);
            font-family: var(--font-tilt-neon);
            font-size: 40px;
            font-style: normal;
            font-weight: 400;
            line-height: normal;

            @media (max-width: 768px) {
              font-size: 28px;
            }
          }

          .attack-header-desc {
            color: var(--color-white, #fff);
            font-family: var(--font-agenda);
            font-size: 26px;
            font-style: normal;
            font-weight: 400;
            line-height: normal;

            @media (max-width: 768px) {
              font-size: 20px;
            }
          }
        }

        .attack-header-right {
          display: flex;
        }
      }

      .attack-reduction-by-dose-graph-tab-outer-wrapper {
        border-radius: 24px;
        padding: 8px; /* border thickness */
        background: linear-gradient(
          90deg,
          #dee1e3 0%,
          #fffbe6 25.48%,
          #d4cbbf 59.62%,
          #edecec 79.81%,
          #d6d4ba 100%
        );

        .attack-reduction-by-dose-graph-tab {
          padding: 32px;
          display: flex;
          gap: 40px;
          justify-content: center;
          flex-direction: column;
          border-radius: 24px;
          background: var(--color-white, #fff);

          @media (max-width: 425px) {
            padding: 16px;
          }

          .attack-reduction-by-dose-tab {
            display: flex;
            justify-content: center;

            .attack-reduction-by-dose-tab-wrapper {
              display: flex;
              justify-content: center;
              border-radius: 999px;
              border: 2px solid var(--color-coral, #f16b50);
              background: var(--color-white, #fff);
              width: fit-content;
              flex-direction: row;

              @media (max-width: 677px) {
                flex-direction: column;
                border-radius: 28px;
              }

              .attack-reduction-tab {
                display: flex;
                padding: 13px 24px 11px 24px;
                justify-content: center;
                align-items: center;
                gap: 10px;
                font-family: var(--font-agenda);
                font-size: 20px;
                font-style: normal;
                font-weight: 700;
                line-height: normal;
                color: var(--color-coral);

                &:hover {
                  background-color: rgb(252, 238, 231);
                  text-decoration: none;
                  color: var(--color-primary);
                  border-radius: 999px; 
                }

                &:not(.active):hover {
                  background-color: #fceee7;
                  color: var(--color-primary, #e6492d);
                  border-radius: 999px;
                }

                &.active {  
                  color: var(--color-white);
                  background-color: var(--color-primary, #f16b50);
                
                  &:hover {
                    color: #ffe7dc;
                  }
                }

                @media (max-width: 425px) {
                  padding: 13px 24px 11px 24px;
                }
              }
            }
          }

          .attack-reduction-by-dose-graph-wrapper {
            display: flex;
            gap: 40px;
            flex-direction: column;

            .attack-reduction-by-dose-graph-inner-wrapper {
              display: flex;
              gap: 24px;
              flex-direction: column;

              @media (max-width: 768px) {
                gap: 16px;
              }

              .attack-reduction-by-dose-graph-title {
                color: var(--color-charcol, #1d2d3a);
                font-family: var(--font-agenda);
                font-size: 20px;
                font-style: normal;
                font-weight: 700;
                line-height: normal;
                display: flex;
                align-items: center;
                justify-content: center;

                p {
                  width: 83%;
                  text-align: start;
                  margin: 0;

                  @media (max-width: 768px) {
                    text-align: center;
                  }
                }

                /* @media (max-width: 425px) {
                  text-align: center;
                } */
              }

              .attack-reduction-by-dose-graph {
                display: flex;
                gap: 24px;
                justify-content: center;

                @media (max-width: 768px) {
                  flex-direction: column;
                }

                .attack-reduction-by-dose-graph-image {
                  .tab-desktop-image {
                    display: block;
                    @media (max-width: 480px) {
                      display: none;
                    }
                  }

                  .tab-mobile-image {
                    display: none;
                    @media (max-width: 480px) {
                      display: block;
                    }
                  }
                }

                .attack-reduction-by-dose-graph-percent-wrapper {
                  display: flex;
                  margin: auto 0 auto auto;

                  /* @media (max-width: 991px) {
                    display: none;
                  } */

                  .attack-reduction-by-dose-graph-percent {
                    display: flex;
                    width: 296px;
                    padding: 24px;
                    flex-direction: column;
                    align-items: flex-start;
                    border-radius: 24px;
                    background: #feeee6;
                    margin: auto 0;

                    @media (max-width: 768px) {
                      width: 100%;
                    }

                    .attack-reduction-by-dose-graph-percent-image {
                      display: flex;
                      width: 100%;
                      justify-content: left;
                    }

                    .attack-reduction-by-dose-graph-percent-title-desc-wrapper {
                      display: flex;
                      gap: 4px;
                      flex-direction: column;

                      @media (max-width: 768px) {
                        gap: 0px;
                      }

                      .attack-reduction-by-dose-graph-percent-title {
                        color: var(--color-dark-coral, #c94808);
                        font-family: var(--font-tilt-neon);
                        font-size: 32px;
                        font-style: normal;
                        font-weight: 400;
                        line-height: normal;

                        @media (max-width: 768px) {
                          font-size: 24px;
                        }
                      }
                      .attack-reduction-by-dose-graph-percent-desc {
                        color: var(--color-charcol, #1d2d3a);
                        font-family: var(--font-agenda);
                        font-size: 24px;
                        font-style: normal;
                        font-weight: 400;
                        line-height: normal;
                        text-align: left;

                        @media (max-width: 768px) {
                          font-size: 22px;
                        }
                      }
                    }
                  }
                }
              }
            }

            .attack-study-design-button {
              display: flex;
              align-items: center;
              justify-content: flex-start;

              a {
                display: flex;
                height: 48px;
                padding: 12px 16px 12px 24px;
                justify-content: center;
                align-items: center;
                gap: 8px;
                border-radius: 999px;
                border: 3px solid var(--color-coral, #f16b50);
                background: var(--color-white, #fff);
                width: fit-content;

                @media (max-width: 425px) {
                  width: 100%;
                }

                span {
                  color: var(--color-coral, #f16b50);
                  font-family: var(--font-agenda);
                  font-size: 20px;
                  font-style: normal;
                  font-weight: 700;
                  line-height: normal;
                }
              }

              @media (max-width: 768px) {
                justify-content: center;
              }
            }
          }
        }
      }
    }
  }
}

.footnotes {
  display: flex;
  flex-direction: row;
  gap: 0px;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
  flex-direction: column;
  max-width: 1010px;

  .secondary-footnote {
    margin-left: -6px;

    sup {
      top: -0.2em;
    }
  }

  .exploratory-footnote {
    margin-left: -7px;

    sup {
      top: -0.5em;
      font-size: 60%;
    }
  }

  @media (min-width: 426px) and (max-width: 768px) {
    padding-bottom: 40px;
  }
}

.footnote {
  color: var(--color-charcol, #515861);
  text-align: left;
  font-size: 16px;
  font-weight: 400;
  position: relative;
  flex: 1;
  line-height: normal;
}

.tab.active {
  border-radius: 999px;
  border: 2px solid var(--color-coral, #f16b50);
  color: var(--color-white, #fff);
  background: var(--color-coral, #f16b50);
}

.tab-content {
  display: none !important;
}

.tab-content.active {
  display: flex !important;
}

.section-headline-4 {
  font-size: 32px;
  font-weight: 400;
  font-family: var(--font-tilt-neon);
  color: var(--color-primary-dark);
  margin-bottom: 0;
}

.section-headline-5 {
  color: var(--color-charcol);
  font-family: var(--font-agenda);
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.small-sup {
  font-size: 14px;
}

.chart-container.mobile {
  display: none;
}

@media (max-width: 1200px) {
  .element-d-results .chart-callout {
    gap: 0;
    margin: 0 auto;
  }

  .section-headline-4 {
    font-size: 24px;
  }

  .section-headline-5 {
    font-size: 20px;
  }

  .chart-container {
    max-width: calc(100vw - 48px);
    overflow-x: auto;
    padding-bottom: 48px;

    .CHART-reductions-in {
      max-width: none;
      width: auto;
    }

    &::after {
      content: "";
      position: absolute;
      top: 0;
      right: -1px;
      width: 30px;
      height: 60%;
      background: linear-gradient(
        to left,
        rgb(255 255 255 / 78%),
        rgb(255 255 255 / 68%)
      );
      pointer-events: none;
    }
  }

  .chart-container.no-gradient::after {
    background: none;
  }

  .chart-container.mobile {
    display: block;
  }

  .desktop {
    display: none;
  }
}

.chart-container::-webkit-scrollbar-track {
  width: 10px;
  border-radius: 999px;
}

.chart-container::-webkit-scrollbar-track {
  background: #f0f0f0;
}

.chart-container::-webkit-scrollbar-thumb {
  background: #1d2d3a;
}

.attack-reduction__list {
  margin-bottom: 0;
  font-size: 20px;
}

.efficacy-sup {
  top: -0.46em;
  font-size: 60%;
}

.section-attack-reduction-by-dose-outer-wrapper {
  .mobile-bg {
    @media (min-width: 426px) {
      display: none;
    }
  }
}

.attack-reduction__item {
  margin-bottom: 8px;
  line-height: normal;
}

.attack-reduction__item-text {
  font-size: 20px;
  line-height: normal;
}

.graph-section .date-container.footnote-mobile {
  display: none;
}

.graph-section .date-container.footnote-desktop {
  display: flex;
}

@media (max-width: 768px) {
  .graph-section .date-container.footnote-mobile {
    display: flex;
  }

  .graph-section .date-container.footnote-desktop {
    display: none;
  }
}

.attack-study-design-button .button-design:hover,
.attack-study-design-button .button-design:focus {
  background-color: var(--color-coral);
  color: var(--color-white);
}