.node__content {
  position: relative;
}
.page__bg {
  background-image: url("../../images/backgrounds/lab-background.png");
  background-repeat: repeat;
  /*background: url('../../images/backgrounds/lab-background.png') lightgray 50% / cover no-repeat;*/
  opacity: 0.5;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

/* Resource Cards - Extension of existing card component */
.section__header {
  text-align: unset;
  margin-bottom: 80px;

  &.section_header_title {
    margin-top: 24px;
  }
}

.section.faq .section__header {
  margin-bottom: 0px;
}

.section.faq .section__header .section__title {
  color: #f16b50;
}

.section__header .section__title {
  color: #ff00b7;
  /* H2 */
  font-family: var(--font-tilt-neon);
  font-size: 40px;
  font-style: normal;
  font-weight: bold;
  line-height: normal;
  margin: 24px 0;
}

.section__header .section__subtitle {
  margin: unset;
  max-width: unset;
  color: var(--color-secondary);

  /* H4 */
  font-family: var(--font-agenda), serif;
  font-size: 26px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.section__header .resource_subtitle {
  font-weight: 700;
}

.resources-cards .tag {
  font-size: 20px;
}
/* Hero*/
.hero {
  min-height: 600px;
  background-color: unset;
}

@media (max-width: 1200px) {
  .hero__background img {
    /*height: auto;*/
  }

  .hero__container {
    grid-template-columns: unset;
  }
}

.section--60px-top {
  padding-top: 5rem;
  padding-bottom: 0px;
}

@media (max-width: 991px) {
  .faq-container {
    margin-top: 40px;
  }
  .section--60px-top-bottom {
    padding-top: 0;
    padding-bottom: 0;
  }

  .section--60px-top {
    padding-top: 0px;
  }

  .card-grid {
  }

  .hero__background img {
    height: 100%;
  }
  /* Hero*/
  .hero {
    min-height: 560px;
  }
}
#resources {
  padding-bottom: 0;

  .resources-cards {
    .tag {
      padding: 5px 12px 3px 12px;
    }
  }
}
/* FAQ Section */
.faq-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0 auto;
}

/* FAQ styles moved to component: project/themes/dawnzera_full/components/faq/faq.css */

.key-terms-container {
  padding-top: 40px;
  /*padding-bottom: 60px;*/
}
/* Key Terms Section */
.key-terms__content {
  /*max-width: 800px;*/
  margin: 0 auto;
  text-align: left;
}

.tool__title {
  color: #c94808;
  font-family: "Tilt Neon";
  font-size: 32px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.tester-tool-card {
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  height: 100%;
  max-width: 572px;
  padding: 3rem;
  margin-top: 1.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tester-tool-grid {
  display: flex;
  flex-direction: row;
  gap: 3rem;
  justify-content: center;
  margin-top: 4rem;
}

@media (max-width: 970px) {
  .tester-tool-grid {
    flex-direction: column;
    align-items: center;
    gap: 0;
  }

  #resources {
    padding-bottom: 60px;
  }
}

@media (max-width: 768px) {
  .tester-tool-card {
    padding: 1rem;
    .btn {
      width: 100%;
    }
  }
}

.key-terms__content p {
  font-size: var(--font-size-lg);
  color: var(--color-text-primary);
  margin-bottom: var(--space-lg);
}

.key-terms__content li {
  margin-bottom: 12px;
}

.key-terms__list {
  list-style: none;
  padding: 0;
}

.key-terms__list li {
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--color-gray-200);
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-secondary);
}

.key-terms__list li:last-child {
  border-bottom: none;
}

.key-terms__list strong {
  color: var(--color-secondary);
  font-weight: var(--font-weight-semibold);
}

/* Section ISI - Important Safety Information */
.section--isi {
  background-color: var(--color-gray-100);
  padding: var(--space-4xl) 0;
}

.section--isi .section__title {
  color: var(--color-secondary);
  font-size: var(--font-size-2xl);
  margin-bottom: var(--space-lg);
}

.section--isi h3 {
  color: var(--color-secondary);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  margin: var(--space-xl) 0 var(--space-md);
}

.section--isi p {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-md);
}

/* Mobile Responsive Adjustments */
@media (max-width: 768px) {
  .card-grid--2 {
    grid-template-columns: 1fr;
  }

  .card--resource {
    padding: var(--space-xl);
  }

  .card--resource .card__icon {
    width: 60px;
    height: 60px;
  }

  .faq-item__question {
    font-size: 22px;
    padding: var(--space-md) 0;
  }

  .key-terms__content p {
    font-size: var(--font-size-base);
  }

  .section--isi {
    padding: var(--space-3xl) 0;
  }
  .key-terms-container .key_title {
    font-size: 26px;
  }
  .key-terms-container .key_subtitle {
    font-size: 22px;
  }
  .section-bg {
    display: none;
  }
}

@media (max-width: 480px) {
  .hero__content {
    max-width: 327px;
    padding-right: 26px;
  }

  .hero__title {
    font-size: var(--font-size-3xl);
  }

  .hero__subtitle {
    font-size: var(--font-size-xl);
    font-weight: 700;
  }

  .section__title {
    font-size: var(--font-size-2xl);
  }

  .section__subtitle {
    font-size: var(--font-size-base);
  }
}

.hero__container .page_heading_mobile {
  display: none;

  @media (min-width: 768px) {
    display: block;
    color: var(--color-charcol, #1d2d3a);
    font-size: 16px;
    font-family: Agenda;
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 8px;
  }
}

/* Section Background */
.section-bg {
  position: absolute;
  right: 0;
  top: 0;
  max-width: 1440px;
  /*height: 500px;*/
  /*transform: rotate(0);*/
  z-index: 1;
}
.section__container {
  z-index: 2;
  position: relative;
}

.desktop-only {
  display: block;
}

.mobile-only {
  display: none;
}

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

  .mobile-only {
    display: block;
  }
}
.key-terms-container .key_title {
  color: var(--Coral, #f16b50) !important;
  font-family: var(--Font-H3, "Tilt Neon");
  font-size: var(--Size-H3, 32px);
  font-style: normal;
  font-weight: 400;
  line-height: var(--Line-Height-H3, 44px); /* 137.5% */
}
.key-terms-container .key_subtitle {
  color: var(--CHARCOAL, #1d2d3a);
  font-family: var(--Font-H4, Agenda);
  font-size: var(--Size-H4, 26px);
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}
.key-terms__content b {
  color: var(--CHARCOAL, #1d2d3a);
  font-family: var(--Font-Body, Agenda);
  font-size: var(--Size-Body, 20px);
  font-style: normal;
  font-weight: 700;
  line-height: var(--Line-Height-Body, 20px);
}
.key-terms__content li {
  color: var(--CHARCOAL, #1d2d3a);
  font-family: var(--Font-Body, Agenda);
  font-size: var(--Size-Body, 20px);
  font-style: normal;
  font-weight: 400;
  line-height: var(--Line-Height-Body, 20px);
}
ul li::marker {
  color: #f16b50;
}

.hero__title {
  width: 100%;
  max-width: 880px;
  color: var(--color-charcol, #1d2d3a);
  text-shadow: none;
}
.hero__subtitle {
  width: 100%;
  max-width: 980px;
  color: var(--color-charcol, #1d2d3a) !important;
  text-shadow: none;
  font-weight: var(--font-weight-normal);
}

/* Mobile only button font-size adjustment */
@media (max-width: 768px) {
  .btn.btn--primary.btn--sm {
    font-size: 1.25rem;
  }
}

.result_section {
  display: flex;
  flex-direction: row;
  gap: 64px;
  justify-content: center;
  margin-top: 4rem;

  @media (max-width: 426px) {
    flex-direction: column;
    gap: 24px;
  }

  @media (max-width: 991px) {
    margin-bottom: 40px;
  }
}

.result_left_section,
.result_right_section {
  /* flex: 1; */
  display: flex;
}

.result_right_section {
  box-shadow: 0 8px 24px -4px rgba(81, 88, 97, 0.16);
  border-radius: 24px;
  height: fit-content;
  margin-top: 2rem;

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

.result_right {
  display: flex;
  flex-direction: column;
  padding: 40px;
  gap: 32px;
  max-width: 36rem;
  background: #fff;
  border-radius: 24px;
  height: fit-content;

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

.result_right_top {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.result_right_title {
  color: var(--color-coral, #c94808);
  text-align: center;
  font-family: var(--font-tilt-neon);
  font-size: 32px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;

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

.result_right_desc {
  color: var(--color-charcol, #1d2d3a);
  font-family: var(--font-agenda);
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;

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

.result_right_bottom {
  display: flex;
  justify-content: center;

  a {
    text-decoration: none;

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

.section--pipes {
  @media (max-width: 768px) {
    /* display: none; */
  }
}

.result_section_pipes {
  @media (min-width: 991px) {
    display: none;
  }

  img {
    width: 97%;
  }

  .pipes-container {
    position: relative;
    display: flex;
    justify-content: end;
  }
}

@media (max-width: 1024px) {
  .section--60px-top-bottom .section--pipes {
    display: none;
  }
}

.asting-freedom-wrapper {
  z-index: 1;
}

.asting-freedom-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url(../../images/backgrounds/brick-background.png) no-repeat
    center bottom / cover;
  opacity: 0.3;
  z-index: -1;
}
.card--resource .card__body p {
  line-height: normal !important;
}

@media (max-width: 1350px) {
  .pipes-container.left {
    left: -42px;
  }
}