/* css here */
.to-italize {
  font-style: italic;
}

#diagnosing-attr .banner-content {
  max-width: 1191px;
}

.border-diagnose {
  border-bottom: 2px inset; 
}

.diagnosis-banner {
  background-image: url(/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop/diagnosis-banner.png);
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: rgba(0, 0, 0, 0.90) 0px -50px 36px -15px inset;
  position: relative;
  top: 0px;
  height:397px;
}

#diagnosing-attr .subheading-banner, .subheading-banner {
  font-family: "Kanit-Medium";
  font-size: 18px;
  color: #FFFFFF;
  margin-bottom: 18px;
  margin-top: 50px;
  padding-left: 20px !important;
}

h1 {
  font-family: "Kanit-Bold";
  font-size: 45px;
  color: #FFFFFF;
}

.banner-content {
  padding-top: 102px;
  margin: auto;
  max-width: 1153px;
}

#diagnosing-attr .banner-content h1 {
  font-size: 40px;
  width: 96%;    /*width: 75%;*/
  padding-left: 20px !important;
  line-height: inherit;
}

.arrow-image {
  width: 100%;
    /* height: 90px; */
    /* text-align: center; */
    /* padding-right: 140px; */
    /* padding-left: 117px; */
  ;
}

.banner-content .arrow-image {
  padding-right: 141px;
  height: 98px;
}

/*#diagnosing-attr .top-menu ul.us-healthcare li {
    margin-left: 68px;
  margin-right: 16px;
}*/

.paths-container {
  margin-top: 40px;
  margin-bottom: 26px;
  /* justify-items: center; */
  display: none;
}

.paths-container .arrow-image {
  /* background-color: red; */
  width: 50%;
}

.green-text-card {
  color: #00A206;
}

.paths-text {
  font-family: "Kanit-Bold";
  color: #00A206;
  font-size: 30px;
  text-align: center;
  padding-left: 30px;
  padding-right: 0px;
  margin-top: 55px;
  margin-bottom: 17px;
}

.paths-container .arrow-image {
  width: 27%;
  /* position: relative; */
  /* left: 35%; */
  justify-content: center;
  /* justify-items: center; */
  /* text-align: center; */
  margin-left: 38%;
  margin-right: 30%;
}

.diagnosing-types-text {
    font-family: "Kanit-Regular";
    font-size: 30px;
    text-align: center;
    color: #00A206;
    margin: 36px 10px 31px 10px;
    line-height: 26px;
}

.blue-text {
  color: #00215F;
}

.diagnosing-types-container {
  max-width: 1458px;
  margin-right: auto;
  margin-left: auto;
}

.hereditary-cards-container {
  margin-top: 30px;
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
  align-content: center;
  justify-items: center;
}

.hereditary-cards-items {
  display: flex;
  height: 100%;
  align-content: center;
  justify-content: center;
  width: 100%;
}

.clinical-card-icon {
  text-align: center;
}

.cards-title {
  font-family: "Kanit-Medium";
  font-size: 20px;
  color: #00215F;
}

.arrow-card {
  display: flex;
  width: 5%;
  align-items: center;
  justify-items: center;
  padding-left: 15px;
}

.dna-card::before {
  content: '';
  position: absolute;
  top: -3px;
  left: 0;
  right: -3px;
  bottom: -3px;
  border-radius: 30px 30px 30px 0;
  background: transparent linear-gradient(136deg, #F599FC 0%, #7D76FE 30%, #556AFF 49%, #619EFD 79%, #75F2FB 100%) 0% 0% no-repeat padding-box;
  z-index: -1;
  filter: blur(7px);
}
.three-phys{
    width: 60%;
}

.dna-card {
  /*background-color: red;*/
  /* border: 10px solid; */
  border-radius: 30px 30px 30px 0px;
  display: flex;
  text-align: center;
  margin-bottom: 50px;
  position: relative;
  /* max-width: 274px; */
  /* height: 142px; */
  background-color: white;
  border-radius: 30px 30px 30px 0;
  /* height: 50%; */
  ;
}

.dna-card-icon {
      width: 100%;
    max-width: 173px;
  text-align: center;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 11px;
  padding-right: 12px;
}

.dna-card-text {
    margin-top: 40px;
  text-align: center;
  align-items: center;
font-family: "Kanit-Medium";
  font-size: 20px;
  padding: 0 20px;
}

.uldiv {
  display: flex;
  text-align: left;
  color: #00215F;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
}

.uldiv ul li::before {
  content: url(/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop/list-bullet-icon.svg);
  height: 0.4em;
  width: 0.4em;
  display: block;
  position: relative;
  top: 6px;
  right: 13px;
}

.amyloid-card::before {
  content: '';
  position: absolute;
  top: -3px;
  left: 0;
  right: -3px;
  bottom: -3px;
  border-radius: 30px 30px 30px 0;
  background: transparent linear-gradient(136deg, #F599FC 0%, #7D76FE 30%, #556AFF 49%, #619EFD 79%, #75F2FB 100%) 0% 0% no-repeat padding-box;
  z-index: -1;
  filter: blur(7px);
}

.amyloid-card {
  /*background-color: red;*/
  /* border: 10px solid; */
  border-radius: 30px 30px 30px 0px;
  display: flex;
  text-align: center;
  position: relative;
  /* max-width: 274px; */
  /* height: 142px; */
  background-color: white;
  border-radius: 30px 30px 30px 0;
}

.amyloid-card-icon {
  text-align: center;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 10px;
    width: 100%;
    max-width: 173px;
}

.amiloid-card-text {
  display: flex;
  text-align: center;
  align-items: center;
font-family: "Kanit-Medium";
  font-size: 20px;
  padding: 0 40px;
  flex-direction: column;
  justify-content: center;
}

.jump-line-desktop::before {
  content: "\A";
}

.diagnosing-cardio-text {
    font-family: "Kanit-Regular";
  font-size: 22px;
  text-align: center;
  color: #00215F;
  margin-top: 68px;
  margin-bottom: 33px;
  padding-left: 4%;
  
}

.cardio-cards-container {
  /* margin-right: 70px; */
  /* margin-left: 70px; */
  margin-top: 40px;
  display: flex;
  height: 100%;
  justify-content: center;
}

.cardio-cards-items {
  display: flex;
  height: 100%;
  justify-items: center;
  justify-content: center;
  width: 76%;
}

.clinical-card {
  /* width: 30%; */
  /* border: 10px solid; */
  border-radius: 30px 30px 30px 0px;
  text-align: center;
    padding: 0 10px 35px 10px;
  position: relative;
  max-width: 39%;
  background-color: white;
  border-radius: 30px 30px 30px 0;
}

.clinical-card::before {
  content: '';
  position: absolute;
  top: -3px;
  left: 0;
  right: -3px;
  bottom: -3px;
  border-radius: 30px 30px 30px 0;
  background: transparent linear-gradient(136deg, #F599FC 0%, #7D76FE 30%, #556AFF 49%, #619EFD 79%, #75F2FB 100%) 0% 0% no-repeat padding-box;
  z-index: -1;
  filter: blur(7px);
}

.clinical-card .gradient-line {
    width: 95%;
    margin: 25px auto 0 auto;
}

.clinical-card-right-arrow {
  width: 37px;
}

.cardio-cards-container .clinical-card {
  width: 26%;
}

.list-container {
  width: 30%;
  margin: auto 0px;
}

.clinical-card-icon {
  text-align: center;
  padding-top: 32px;
  /* padding-bottom: 10px; */
  ;
}

.cards-title {
  font-family: "Kanit-Medium";
  font-size: 18px;
  color: #00215F;
  /* width: 80%; */
  ;
}
.img3-sup{
    position: relative;
    top: -10px;
}
#diagnosing-attr .cards-title {
  margin: auto;
  max-width: 246px;
  padding-left: 10px;
  padding-right: 10px;
  font-size: 20px;
  line-height: 22px;
}

#there-timely-container {
  background: #FAFAFA 0% 0% no-repeat padding-box;
  position: relative;
   /* z-index: -2*/
  z-index: 0;
  padding-bottom: 5px;
}

.clinical-card-text {
  text-align: center;
  font-family: "Kanit-Regular";
  color: #000000;
  padding-left: 11%;
  padding-right: 11%;
  margin-top: 24px;
  font-size: 18px;
}

.clinical-card-text span {
  font-family: "Kanit";
}


.arrow-card {
  display: flex;
  width: 5%;
  align-items: center;
  justify-items: center;
  padding-left: 15px;
}

.plasma-card::before {
  content: '';
  position: absolute;
  top: -3px;
  left: 0;
  right: -3px;
  bottom: -3px;
  border-radius: 30px 30px 30px 0;
  background: transparent linear-gradient(136deg, #F599FC 0%, #7D76FE 30%, #556AFF 49%, #619EFD 79%, #75F2FB 100%) 0% 0% no-repeat padding-box;
  z-index: -1;
  filter: blur(7px);
}

.plasma-card {
  width: 30%;
  border-radius: 30px 30px 30px 0px;
  position: relative;
  background-color: white;
  border-radius: 30px 30px 30px 0;
  text-align: left;
  padding-bottom: 15px;
  position: relative;
  max-width: 42%;
  background-color: white;
  border-radius: 30px 30px 30px 0;
}

.plasma-card-icon {
  text-align: center;
}

.plasma-card-text {
  text-align: center;
  font-family: "Kanit-Medium";
  color: #00215F;
  padding-left: 12%;
  padding-right: 12%;
  margin-top: 12px;
  font-size: 18px;
}
#diagnosing-attr .hhtr-span sup {
    font-family: "Kanit-Medium";
    font-size: 60%;
}
#diagnosing-attr .genetic-testing-heading .blue-text sup {
    font-family: 'Kanit-SemiBold';
    font-size: 60%;
}
#diagnosing-attr .diagnosing-types-container .footnote sup {
    font-family: 'Kanit-Medium';
    font-size: 60%;
}
#diagnosing-attr #diagnosing-types-container-2 .diagnosing-cardio-text span sup {
    font-size: 60%;
    font-family: 'Kanit-Medium';
}
#diagnosing-attr.basicpage #diagnosing-types-container-2 ul.sub-list li sup {
    font-size: 60%;
    font-family: 'Kanit-Regular';
}
#diagnosing-attr li.genetic-bullet sup {
    font-size: 60%;
    font-family: 'Kanit-Regular';
}
#diagnosing-attr .mis-text sup {
    font-family: 'Kanit-Regular';
    font-size: 60%;
}
.bone-card::before {
  content: '';
  position: absolute;
  top: -3px;
  left: 0;
  right: -3px;
  bottom: -3px;
  border-radius: 30px 30px 30px 0;
  background: transparent linear-gradient(136deg, #F599FC 0%, #7D76FE 30%, #556AFF 49%, #619EFD 79%, #75F2FB 100%) 0% 0% no-repeat padding-box;
  z-index: -1;
  filter: blur(7px);
}

.bone-card {
  width: 30%;
  /* border: 10px solid; */
  /* border-radius: 30px 30px 30px 0px; */
  text-align: center;
  /* padding-bottom: 15px; */
  position: relative;
  /* max-width: 274px; */
  /* height: 142px; */
  background-color: white;
  border-radius: 30px 30px 30px 0;
}

.bone-card-icon {
  /* text-align: center; */
  display: flex;
}

.bone-card-text {
  text-align: left;
  font-family: "Kanit";
  color: #000000;
}

.gradient-text {
  font-family: "Kanit-Bold";
  font-size: 58px;
  font-weight: 900;
  background: -webkit-linear-gradient(116deg, #F599FC 0%, #7D76FE 30%, #556AFF 49%, #619EFD 79%, #75F2FB 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
  margin-top: 23px;
  margin-bottom: 10px;
}

.cardio-disclaimer {
  /* margin-right: 70px; */
  margin-left: 179px;
  margin-top: 55px;
  font-family: "Kanit-Regular";
  color: #262626;
}

.callout-main-container {
  background-image: url(/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop/callout-background.png);
  width: 100%;
  height: 300px;
  padding-top: 40px;
}

.callout-text-container {
  width: 75%;
  height: 190px;
  background: #FFFFFF 0% 0%;
  border-radius: 30px 30px 30px 0px;
  backdrop-filter: blur(5px);
  opacity: .9;
  -webkit-backdrop-filter: blur(5px);
  margin-right: 15%;
  margin-left: 13%;
  position: relative;
  top: 7%;
  padding-top: 40px;
}

.callout-text-container h2 {
  font-family: "Kanit-Bold";
  color: #00215F;
  font-size: 30px;
  padding-left: 10%;
}

.callout-text {
  font-family: "Kanit-Medium";
  font-size: 20px;
  padding-left: 10%;
  margin-top: 12px;
  padding-right: 9%;
}

.genetic-testing-container {
  margin-top: 5%;
  margin-bottom: 5%;
}

.genetic-testing-heading {
  font-family: "Kanit-Bold";
    font-size: 30px;
    text-align: center;
    color: #00A206;
    margin-left: auto;
    margin-right: auto;
    padding: 76px 120px 0 120px;
}

.genetic-testing-container .arrow-image {
  width: 29.5%;
  margin-top: 20px;
  margin-bottom: 20px;
}

li.genetic-bullet {
  font-family: "Kanit-Medium";
  color: #000000;
  font-size: 20px;
  background: url(/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop/ionic-md-checkmark-circle-outline.svg) no-repeat left top;
  padding: 3px 0px 16px 40px;
  list-style: none;
}

.bullet-image {
  max-width: 100%;
  height: auto;
  position: relative;
  top: 6px;
  margin-right: 12px;
}

.text-spacing {
  margin-left: 40px;
}

.misdiagnosis-container {
  width: 80%;
  margin-left: 10%;
  margin-right: 10%;
  padding-top: 60px;
  /* background-color: aliceblue; */
  ;
}

.misdiagnosis-heading {
  font-family: "Kanit-Bold";
  text-align: center;
  font-size: 20px;
  margin-bottom: 2%;
}

.mis-text {
  font-family: "Kanit-Regular";
  font-size: 18px;
  color: #151515;
  text-align: center;
  padding-right: 17%;
  padding-left: 17%;
}

.misdiagnosis-container .arrow-image {
  width: 50%;
  margin-top: 15px;
}

.three-cards-container {
  margin-top: 40px;
  display: flex;
  height: 100%;
  width: 100%;
  justify-content: center;
  align-items: center;
  justify-items: center;
  align-items: center;
  padding-bottom: 18px;
}

.three-cards-items {
  display: flex;
  height: 100%;
  padding-bottom: 20px;
}

.three-card {
  width: 50%;
}

.three-card-icon {
  text-align: center;
  margin-bottom: 4%;
  margin-top: 4%;
}

.three-title {
  font-family: "Kanit-Medium";
  font-size: 20px;
  color: #00215F;
  text-align: center;
  font-weight: 600;
}

.three-card-text {
  text-align: center;
  font-family: "Kanit-Medium";
  color: #000000;
}

.diagnosing-importance-container {
  width: 80%;
  background-color: #FFFFFF;
  /*z-index: 1;*/
  /* position: relative; */
  top: 60%;
  left: 10%;
  border-radius: 30px 30px 30px 0px;
  /* margin-bottom: -578px; */
  /* display: flex; */
  /* position: absolute; */
  position: relative;
  height: auto;
}

.diagnosis-cards-container::before {
  content: '';
  position: absolute;
  top: -3px;
  left: 0;
  right: -3px;
  bottom: -3px;
  border-radius: 30px 30px 30px 0;
  background: transparent linear-gradient(136deg, #F599FC 0%, #7D76FE 30%, #556AFF 49%, #619EFD 79%, #75F2FB 100%) 0% 0% no-repeat padding-box;
  z-index: -1;
  filter: blur(7px);
  width: 70%;
  margin-left: 15%;
}

.diagnosis-cards-container {
  background-color: #FFFFFF;
  height: 100%;
  border-radius: 30px 30px 30px 0px;
  /* display: flex; */
  /* margin-top: 35px; */
  /* padding-top: -19px; */
  width: 70%;
  margin-left: 15%;
  margin-bottom: 25px;
}

.diagnosis-cards-container h3 {
  text-align: center;
  font-family: "Kanit-Medium";
  font-size: 22px;
  color: #00215F;
  margin-top: 2%;
  margin-bottom: 2%;
  padding-top: 30px;
}

.diagnosis-cards-items {
  display: flex;
  height: 100%;
  margin-bottom: 4%;
  align-items: center;
  justify-content: center;
  justify-items: center;
  padding-bottom: 44px;
  align-content: center;
  flex-wrap: wrap;
}

.diagnosing-importance-container::before {
  content: '';
  position: absolute;
  top: -3px;
  left: 0;
  right: -3px;
  bottom: -3px;
  border-radius: 30px 30px 30px 0;
  background: transparent linear-gradient(136deg, #F599FC 0%, #7D76FE 30%, #556AFF 49%, #619EFD 79%, #75F2FB 100%) 0% 0% no-repeat padding-box;
  z-index: -1;
  filter: blur(7px);
}

.steps-card {
  width: 20%;
}

.steps-card-icon {
  text-align: left;
}

.steps-title {
  font-family: "Kanit-Bold";
  font-size: 18px;
  color: #00215F;
  margin-left: 2%;
  margin-right: 2%;
}

.arrow-card {
  display: flex;
  width: 5%;
  align-items: center;
  justify-items: center;
  padding-left: 15px;
}

.steps-card-icon .steps-icon {
  height: 80px;
  margin-top: 5%;
  margin-bottom: 5%;
}

#text-timely-main-container {
  max-width: 1558px;
  margin-right: auto;
  margin-left: auto;
}

#main-attr-diag-container {
  background-color: #FAFAFA;
   /* z-index: -2;*/
  z-index: 0;
  position: relative;
}

#main-attr-diag-container #container-5f62c234e1 {
  background: #FFFFFF;
  padding-bottom: 5px;
 /* padding-top: 1px;*/
  ;
}

.footer-main-container {
  background-image: url(/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop/attr-global-background.jpg);
  background-repeat: no-repeat;
  background-position: 100% 75%;
  background-size: cover;
  width: 100%;
  height: 535px;
  padding-top: 40px;
  box-shadow: rgba(0, 0, 0, 0.90) 0px 70px 40px -20px inset;
}

.footer-text-container {
  width: 70%;
  padding: 33px 0;
  background: linear-gradient(to right, #FEFEFE 0%, #FCF6FE 18%, #EBF1FE 50%, #DFF5FE 87%, #E2FEFE 90%, #FEFEFE) padding-box, linear-gradient(to right, #F599FC 0%, #556AFF 50%, #75F2FB 100%) border-box;
  border-radius: 30px 30px 30px 0;
  border: 3px solid transparent;
  opacity: 1;
  position: relative;
  left: 0;
  max-width: 1304px;
  margin-right: auto;
  margin-left: auto;
}

.footer-text-container h2 {
  font-family: "Kanit-Bold";
  color: #00215F;
  font-size: 30px;
  line-height: 34px;
    width: 65%;
    margin: 0 auto;
  text-align: center;
}

.footer-subheading {
  text-align: center;
  color: #FFFFFF;
  font-family: "Kanit-Bold";
  font-size: 40px;
  width: 100%;
  position: relative;
  top: 6%;
  left: 0;
  max-width: 1304px;
  margin-right: auto;
  margin-left: auto;
  line-height: 35px;
  /*text-shadow: 2px 2px 100px black, 0.5em 0.2em 1em black, 1em 1em 2em black;*/
  ;
}

.footer-small-text {
 text-align: center;
    color: #FFFFFF;
    font-family: "Kanit-Regular";
    width: 59%;
    margin: auto;
    font-size: 28px;
    margin-top: 25px;
    display: none;
}

.footer-button {
  position: relative;
  top: 20%;
  left: 42%;
  padding: 10px 50px 10px 50px;
  border-radius: 21px;
  background-color: #FFFFFF;
  color: #00215F;
  font-family: "Kanit-SemiBold";
  font-size: 16px;
}

.gradiant-backgorund {
  height: 244px;
  background: transparent linear-gradient(106deg, #F599FC 0%, #7D76FE 30%, #556AFF 49%, #619EFD 79%, #75F2FB 100%) 0% 0% no-repeat padding-box;
  margin-left: 10%;
  margin-right: 10%;
  padding-top: 1px;
  /* padding-bottom: 5px; */
  padding-right: 7px;
  padding-left: 7px;
  border-radius: 30px 30px 30px 0px;
  filter: blur(7px);
  z-index: 0;
  /* display: flex; */
  width: 80%;
  position: absolute;
  /* top: 0%; */
  /* left: 0%; */
  transform: -50%;
}

#text-dbea910ea5 {
  /* background-color: red; */
  /* max-height: 366px; */
  position: relative;
}

.background-timely-container {
  /* background-color: pink; */
  /* max-height: 339px; */
  /* display: flex; */
  width: 100%;
  /* max-height: 305px; */
  justify-content: center;
  align-items: center;
  position: relative;
  /* max-height: 90%; */
  ;
}

/*#timely-background-container {
  height: 345px;
}*/

#banner-padding-container {
  padding: 0;
  margin-top: 0px;
  z-index: -1;
}

.arrow-cardio {
  margin-right: 7px;
  margin-left: 12px;
  width: 30px;
  position: relative;
    bottom: 114px;
    height: auto;
}

.clinical-icon-img {
    height: 77px;
    margin-bottom: 0;
    margin-right: 9px;
}

.dna-icon-img {
    height: 55px;
    margin-bottom: -3px;
    margin-right: 15px;
}

.vertical-lines {
  padding-top: 10px;
  padding-bottom: 10px;
  /*margin-left: 34px;*/
  /* height: 70px; */
  ;
}

.amyloid-icon-img {
  height: 55px;
  margin-bottom: 10px;
}

.amyloid-card .vertical-lines {
  /* background-color: red; */
  /*margin-left: 30px;*/
  ;
}

.second-clinical-icon {
  height: 65px;
  margin-bottom: 15px;
}

.cardio-cards-items .clinical-card-icon {
  padding-top: 15px;
}

.gradient-line-diagnosing {
     width: 95%;
    margin: 15px auto 0 auto;
}

.cardio-cards-items .plasma-card-icon {
  padding-top: 15px;
}

.plasma-icon-img {
      height: 65px;
    margin-bottom: 15px;
}

.bone-icon-img {
  margin-left: 35px;
  margin-top: 35px;
  margin-right: 23px;
}

.heart-icon-img {
  margin-left: 35px;
  margin-top: 35px;
  margin-right: 20px;
}

.bone-card-icon .cards-title {
  /* background-color: red; */
  margin-top: 35px;
  /* margin-right: 16px; */
  justify-content: center;
  /* justify-items: center; */
  align-items: center;
  text-align: left;
  padding-top: 4%;
}

.cmp-text ul.genetic-list {
 /* margin-right: auto;
  margin-left: auto;
  max-width: 1241px;
  */
  list-style-position: outside;
  /*padding-left: 11.5%;*/
  max-width: 940px;
  margin: auto;
}

#text-14d04da57b .clinical-card-text {
    padding-left: 6px;
    padding-right: 30px;
}
.basicpage .italic{
  font-style: italic;
}

div#container-ffd3f679e6 {
  background-color: #FAFAFA;
}

/*.arrow-down-card {
    display: none;
}*/

/*callout container*/
div#container-bb90e32b58 {
  display: none;
}

/*#there-timely-container {
    background-color: #FAFAFA;
}*/

.cta-bottom-treatment {
  height: 40px;
  position: relative;
  /*background: linear-gradient(white, white) padding-box, linear-gradient(to right, #F599FC 0%, #556AFF 50%, #75F2FB 100%) border-box;*/
  /*background: linear-gradient(to right, #FEFEFE 0%, #FCF6FE 18%, #EBF1FE 50%, #DFF5FE 87%, #E2FEFE 90%, #FEFEFE) padding-box, linear-gradient(to right, #F599FC 0%, #556AFF 50%, #75F2FB 100%) border-box;*/
  background:#E2FCFD;
  border-radius: 50em;
  border: 1px solid #E34AEE;
  width: 28%;
  top: 15%;
  left: 0;
  max-width: 222px;
  margin-right: auto;
  margin-left: auto;
}

.treatment-cta {
  text-align: center;
  position: relative;
  align-items: center;
  display: flex;
  align-content: center;
  justify-content: center;
  margin-top: 11px;
  color: #00215F;
  font-family: "Kanit-SemiBold";
  font-size: 16px;
}

.steps-icon.align-text {
  margin-top: 10%;
  margin-bottom: 9%;
}

#main-attr-diag-container {
  margin-left: auto;
  margin-right: auto;
  /*max-width: 2560px;*/
}

.diagnosis-footer {
  background-color: black;
  color: white;
  font-size: 13px;
  font-family: 'Kanit-Regular';
    /*padding-left: 6%;
    padding-right: 6%;*/
  margin: auto;
  max-width: 1160px;
  padding-top: 50px;
  line-height: 16px;
}

#text-c262ea43aa {
  background-color: black;
}

.horizontal-lines {
  display: none;
}

/* MEDIA QUERIES */

@media only screen and (min-width: 1440px) {
    
  .bone-card-icon {
    margin: auto;
    margin-top: -17px;
  }

  .bone-icon-img {
    width: 4vw;
  }
}

@media only screen and (max-width: 991px) {
  #treatment-approaches .treatment-cards-items {
    padding-bottom: 22px;
  }
    #diagnosing-attr #diagnosing-types-container-2 .diagnosing-cardio-text span,#diagnosing-attr span.hhtr-span {
        display: block;
    }
  #treatment-approaches .arrow-down-card img {
    margin-bottom: -32px;
  }
   .basicpage .footer-main-container .footer-small-text {
      width: 90%
} 

  .diagnosis-footer {
    margin-left: 15px;
    margin-right: 15px;
    margin-top: -1px;
  }

  li.genetic-bullet {
    font-family: "Kanit-Medium";
    color: #000000;
    font-size: 20px;
    background: url(/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop/ionic-md-checkmark-circle-outline.svg) no-repeat left top;
    padding: 3px 0px 3px 40px;
    list-style: none;
    margin: 0;
  }

  .banner-content {
    margin-left: 12px;
    margin-right: 30px;
    padding-top: 35px;
    padding-bottom: 10px;
    margin-top: 135px;
    /* width: 100%; */
    ;
  }

  #attr-inform .banner-content {
    margin-left: 23px;
    margin-right: 23px;
  }

  #attr-inform .arrow-line-icon {
    margin-right: 26px;
  }

  .banner-content h1 {
    font-size: 30px;
    margin-right: 40px;
    margin-bottom: 10px;
    margin-left: 0;
  }

  .arrow-image {
    width: 100%;
  }

  .banner-content .arrow-image {
    padding-right: 0px;
  }

  #diagnosing-attr .subheading-banner, .subheading-banner {
    font-size: 12px;
    margin-right: 10px;
    padding-left: 20px !important;
  }

  #text-9048142c5b {
    width: calc(100% - 60px);
    height: calc(100% - 60px);
  }

  .diagnosing-types-container .bone-card-icon {
    /*flex-flow: wrap;*/
    display: flex;
    padding-bottom: 22px;
    align-items: center;
  }

  .heart-icon-img {
    margin-top: 0px;
  }

  .bone-icon-img {
    width: 10vw;
    margin-left: 27px;
    margin-right: -48px;
  }

  .bone-card-icon .cards-title {
    margin-top: 0px;
  }

  .hereditary-cards-items {
    flex-direction: column;
    align-items: center;
  }

  .clinical-card {
    max-width: 50%;
  }

  .list-container {
    display: flex;
    width: 90%;
    column-gap: 30px;
  }

  .dna-card {
    flex-direction: column;
    width: 50%;
    height: 284px;
  }
  .dna-card .vertical-lines {
    display: none;
  }

  .amyloid-card {
    flex-direction: column;
    width: 50%;
    height: 284px;
  }

  .amyloid-card .vertical-lines {
    display: none;
  }

  .cardio-cards-items {
    flex-direction: column;
    align-items: center;
    width: 100%;
    row-gap: 12px;
  }

  .cardio-cards-items .arrow-cardio {
    display: none;
  }

  .arrow-card {
    display: none;
  }

  .arrow-down-card img {
    width: 22%;
    margin-top: 10px;
    margin-bottom: 15px;
    margin-left: 30px;/*margin-left: 33px;*/
  }
  #about-attr-page .arrow-down-card{
      width: 100%;
  }
  #about-attr-page .arrow-down-card img {
    margin: 18px auto 0;
    width: 20px;
    display: block;
  }

  .dna-card-icon {
    padding-left: 0px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
        max-width: 100%;
        padding-right: 0;
  }

  .dna-card-text {
    font-size: 16px;
    padding: 10px;
    margin-right: 0px;
    margin-left: 0px;
    line-height: 20px;
  }

  .amiloid-card-text {
    font-size: 16px;
    padding: 10px;
    line-height: 20px;
  }

  .amyloid-card-icon {
    padding-left: 0px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
        max-width: 100%;
  }

  .cardio-cards-container .clinical-card {
    max-width: 60%;
    width: 60%;
  }

  .cardio-cards-container .plasma-card {
    max-width: 60%;
    width: 60%;
  }

  .cardio-cards-container .bone-card {
    max-width: 60%;
    width: 60%;
  }

  .cardio-disclaimer {
    margin-left: 20%;
  }

  .genetic-testing-container .arrow-image {
    width: 50%;
  }

  /*.misdiagnosis-heading h2 {
    padding-top: 10%;
  }*/

  .misdiagnosis-container .arrow-image {
    width: 100%;
  }

  .three-cards-items {
    column-gap: 20px;
  }

  .three-cards-container {
    margin-bottom: 35px;
  }

  .three-title {
    font-size: 16px;
    margin-bottom: 20px;
        min-height: 48px;
  }

  .line-break-mobile::before {
    content: "\A";
    /*white-space: pre;*/
  }

  #timely-background-container {
    height: 100%;
  }

  .diagnosing-importance-container {
    width: 100%;
    top: 0%;
    left: 0%;
  }

  .diagnosis-cards-container {
    width: 80%;
    margin-left: 10%;
    position: relative;
  }

  .steps-card {
    width: 68%;
  }

  .alt-right-arrow {
      /*display:block;*/display: none;
    -webkit-transform: rotate(90deg);     /* Chrome and other webkit browsers */
      -moz-transform: rotate(90deg);        /* FF */
      -o-transform: rotate(90deg);          /* Opera */
      -ms-transform: rotate(90deg);         /* IE9 */
      transform: rotate(90deg);             /* W3C compliant browsers */
  }
  #about-attr-page .alt-right-arrow{
      display: none;
  }

  .footer-text-container {
    padding-top: 30px;
  }

  .footer-text-container h2 {
    font-size: 22px;
    line-height: 24px;
    width: 80%;
  }

  .footer-text-container {
    font-size: 22px;
  }

  .footer-text-container {
    font-size: 16px;
  }

  .footer-text-container {
    left: 0;
    padding: 20px 0;
    max-width: 1304px;
    width: 90%;
  }

  .diagnosis-cards-container::before {
    width: 100%;
    margin-left: 0;
  }

  .footer-subheading {
    font-size: 30px;
    width: 90%;
    top: 3%;
  }

  .footer-button {
    left: 38%;
  }

  .cmp-text ul.genetic-list {
    margin-right: 2%;
    margin-left: 5%;
    padding-left: 0;
  }

  

  .horizontal-lines {
    display: inline-block;
    margin-top: 0px;
    padding-right: 10px;
    padding-left: 10px;
  }
}

@media only screen and (min-width: 991px) {

  .arrow-down-card {
    display: none;
  }
}

@media only screen and (max-width: 480px) {

  .paths-text {
    font-size: 25px;
    text-align: center;
    padding-left: 6%;
    padding-right: 6%;
  }

  .paths-container {
    text-align: center;
  }

  .footer-subheading {
    font-size: 22px;
  }

  .footer-small-text {
    font-size: 16px;
  }

  .footer-button {
    left: 23%;
  }

  /*.footer-text-container {
    left: 17%;
  }*/

  .clinical-card {
    max-width: 80%;
  }

  .list-container {
    width: 90%;
  }

  .diagnosing-types-container .bone-card-icon {
    justify-content: center;
  }

  .bone-card-icon .cards-title {
    text-align: left;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
    
  /*#banner-padding-container {
    margin-top: -108px;
    max-width: 100%;
    
    
  }*/
  
  
  #diagnosing-attr .footer-main-container {
    margin-top: 43px;
  }

  .banner-content {
    padding-top: 70px;
    /*width: 99%;*/
    ;
  }

  .arrow-image {
    width: 95%;
  }

  .footer-main-container {
    background-position: 8%;
  }

  /*.footer-text-container {
    left: 15%;
  }*/

  .footer-button {
    left: 33%;
  }

  .footer-subheading {
    width: 85%;
    /*left: 8%;*/
    ;
  }

  .footer-small-text {
    width: 60%;
  }

  .cta-bottom-treatment {
    width: 30%;
    /*left: 38%;*/
    top: 10%;
    
  }
}

@media only screen and (min-width: 992px) and (max-width: 1439px) {
    
  .heart-icon-img {
    margin-left: 6%;
    margin-right: 3%;
    width: 4vw;
  }

  .bone-icon-img {
    margin-left: 6%;
    margin-top: 35px;
    margin-right: 4%;
    width: 4vw;
  }

  .amyloid-card-icon {
    width: 61%;
    margin:auto;
  }

  .diagnosis-footer {
    padding-right: 27px;
    padding-left: 20px;
  }

  .suptxt-da.suptxt-fix {
    font-size: 14px;
  }
  .footer-subheading{
      font-size: 35px;
    width: 85%;
    position: relative;
    top: 8%;
  }
  .cta-bottom-treatment{
      top: 12%;
  }
}

@media screen and (max-width: 991px) {
    .diagnosis-banner
    {
        background-position:right;
    }
  #banner-padding-container {
    margin-top: -114px;
    max-width: 100%;
  }

  .uldiv {
    display: block;
  }

  #diagnosing-attr .subheading-banner, .subheading-banner {
    font-size: 18px;
    margin-top: 35px;
  }

  .suptxt-da.suptxt-fix {
    font-size: 14px;
  }

  .diagnosing-cardio-text {
    padding: 0px 8px !important;
    font-size: 20px;
    line-height: 22px;
    width: 93%;
    margin: 0 auto;
  }

  .bone-icon-img {
    width: 74px;
    height: 72px;
  }

  .heart-icon-img {
    margin-left: 26px;
    width: 60px;
    height: 91px;
  }
  
}

@media screen and (min-width: 600px) and (max-width: 760px) {
  #diagnosing-attr .arrow-line-icon {
    width: 104%;
  }
}

@media only screen and (min-width: 492px) and (max-width: 752px) {
    
  .cta-bottom-treatment {
    width: 38%;
    /*left: 33%;*/
    ;
  }

  .clinical-card .gradient-line {
    width: 270px;
  }
}

@media only screen and (min-width: 2560px) {

  .heart-icon-img {
    margin-top: -5px;
  }
}
@media only screen and (min-width: 320px) and (max-width: 374px) {
 .footer-subheading {
   font-size: 17px !important;
    top: 5%;
  }
}
@media only screen and (min-width: 320px) and (max-width: 480px) {
    
  #banner-padding-container {
    margin-top: -132px;
  }

  .banner-content {
    padding-top: 70px;
    max-width: 100%;
    margin-left: 24px;
  }

  .three-title {
    font-size: 16px;
    width: 166px;
  }

  .three-years-icon-img {
    width: 60%;
  }

  .footer-text-container h2 {
    font-size: 24px;
  }

  .footer-subheading {
    width: 92%;
    /*left: 10%;*/
    ;
  }

  .footer-small-text {
    width: 75%;
  }

  .cta-bottom-treatment {
    width: 55%;
    top: 10%;
  }

  .treatment-cta {
    font-size: 14px;
  }

  .footer-main-container {
    background-position: -35px 0px;
    padding-top: 20px;
  }

  .diagnosing-types-text {
    font-size: 25px;
    margin: 30px 0px !important;/*margin: 30px 25px !important;*/
    line-height:29px;
  }
  #diagnosing-attr .hereditary-cards-container .uldiv {
    padding-left: 0px !important;
  }

  .cardio-cards-container .clinical-card {
    max-width: 90%;
    width: 100%;
  }

  #text-14d04da57b .clinical-card-text {
    padding-left: 8%;
    padding-right: 8%;
  }

  .cardio-cards-container .plasma-card {
    max-width: 90%;
    width: 100%;
  }

  .cardio-cards-container .bone-card {
    max-width: 82%;
    width: 82%;
  }

  .bone-icon-img {
    margin-left: 18px;
    margin-top: 20px;
    width: 50px;
    height: 50px;
    margin-right: 2px;
  }

  .gradient-text {
    margin-top: 9px;
  }

  .heart-icon-img {
    margin-left: 26px;
    width: 50px;
    height: 80px;
  }

  #diagnosing-attr .banner-content h1 {
        font-size: 28px;
    padding-right: 0;
    padding-left: 0 !important;
    line-height: inherit;
    margin-right: 0px;
    width: 100%;
  }

  #diagnosing-attr .subheading-banner, .subheading-banner {
    padding-left: 0px !important;
    font-size: 13px;
    margin-top: 30px;
  }

  .banner-content .arrow-image {
    height: 100%;
  }

  

  .misdiagnosis-heading {
    font-size: 18px;
    /*margin-left: -10%;
    margin-right: -10%;*/
  }

  .mis-text {
    padding-right: 4%;
    padding-left: 4%;
    padding-top: 2%;
    margin-right: -10%;
    margin-left: -10%;
    line-height: 19px;
  }

  .misdiagnosis-container .arrow-image {
    width: 80%;
    margin-top: 2%;
  }

  .clinical-card {
    max-width: 90%;
    width: 100%;
  }

  .clinical-card-text {
    font-size: 16px;
    padding-left: 18px;
    padding-right: 18px;
    line-height: 20px;
  }

  .plasma-card-text {
    font-size: 16px;
    padding-left: 8%;
    padding-right: 8%;
    line-height: 20px;
    text-align: left;
  }

  .three-cards-items {
    column-gap: 10px;
  }

  .arrow-down-card img {
   margin-top: 18px;
    margin-bottom: 0;
    width: 25%;
    /*margin-left: 13px;*/
  }

  #text-ae0fb55197 .suptxt-da {
    font-size: 10px;
  }

  .cardio-disclaimer {
    margin-left: 10%;
    margin-top: 30px;
  }

  li.genetic-bullet {
    padding: 2px 0px 25px 40px;
    line-height: 22px;
  }

  .mis-text .suptxt-d {
    font-size: 10px;
  }

  .diagnosis-cards-items {
    margin-bottom: 12%;
  }

  .footer-main-container {
    height: 710px;
  }

  .footer-subheading {
  font-size: 30px;
  }

  .footer-small-text {
    top: 16px;
    font-size: 16px;
  }
}

@media only screen and (min-width: 991px) {
  .hero-banner-text-home {
    top: 15% !important;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1230px) {
  .steps-card-icon .steps-icon {
    height: 95px;
  }

  img.steps-icon.align-desktop {
    margin-top: 15%;
  }

  .steps-icon.align-text {
    margin-top: 22%;
    margin-bottom: 11%;
  }

  img.steps-icon.align-text.margin-desktop {
    margin-top: 12%;
  }
}

@media only screen and (min-width: 1300px) {

  .clinical-card-text {
      padding-left: 27px;
    padding-right: 10px;
  }

  .cards-title.margin-title {
    width: 50%;
  }

  .plasma-card-text {
    padding: 0 9px;/*padding: 0 16px;*/
    text-align: left;
  }
  #diagnosing-attr .cardio-cards-items .plasma-card-text { 
        margin-top: 0;
        text-align: center;
        color: #00215F;}
}

@media only screen and (min-width: 1900px) and (max-width: 2000px) {
  .footer-text-container {
    width: 60%;
  }

  .footer-main-container {
    box-shadow: rgba(0, 0, 0, 0.90) 0px 140px 60px -20px inset;
  }

  .footer-subheading {
    width: 50%;
  }
}

@media only screen and (min-width: 1024px) and (max-width: 1253px) {
  #diagnosing-attr .banner-content {
    padding-left: 15px;
  }
}



@media only screen and (min-width: 600px) and (max-width: 650px) {
 
  #attr-home .footer-container {
    padding-top: 210px;
  }
}

.basicpage .diagnosing-types-container .cardio-cards-container .cardio-cards-items ul li::before {
    content: url(/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop/list-bullet-icon.svg);
    height: 0.4em;
    width: 0.4em;
    display: block;
    position: relative;
    top: 6px;
    right: 17px;
    text-align: left;
}

.basicpage .diagnosing-types-container .cardio-cards-container .cardio-cards-items ul li{
    padding-left: 17px;
    color: #00215F;
}

.basicpage .diagnosing-types-container .cardio-cards-container .cardio-cards-items ul{
    text-align: left;
    font-family: 'Kanit-Medium';
    font-size: 18px;
    line-height: 21px;
}

.basicpage .diagnosing-types-container .hereditary-cards-container .clinical-card .clinical-card-text h4{
    font-size: 20px;
    line-height: 24px;
    font-family: "Kanit-Regular";
    margin-bottom: 23px;
}
.basicpage .diagnosing-types-container .hereditary-cards-container .clinical-card .clinical-card-text ul li{
    font-size: 18px;
    line-height: 21px;
    width: 95%;
    font-family: 'Kanit-Medium';
}
.basicpage .diagnosing-types-container .cardio-cards-container .dna-card .text-image {
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
}
.basicpage .diagnosing-types-container .cardio-cards-container .dna-card .text-image .card-content{
text-align: left;
padding-left: 14px;
}

.basicpage .diagnosing-types-container .cardio-cards-container .dna-card .text-image .card-content h4{
  font-size: 20px;
  line-height: 22px;
  font-family: 'Kanit-SemiBold';/*font-family: "Kanit-Medium";*/
  color: #00215F;
  font-weight: 500;
}

.basicpage .diagnosing-types-container .cardio-cards-container .dna-card  p{
    font-family: 'Kanit-SemiBold';
    font-size: 18px;
    padding: 0 10px;
  /*font-size: 20px;
  line-height: 24px;
  font-family: "Kanit-Medium";*/
}
#diagnosing-attr .plasma-card-text{
    font-family: 'Kanit-SemiBold';
    font-size: 18px;
    line-height:21px;
}

.basicpage .diagnosing-types-container .cardio-cards-container .dna-card .text-image img.gradient-line-diagnosing {
  width: 95%;
  margin: 23px auto 12px auto;
}

.basicpage .diagnosing-types-container .cardio-cards-container .amyloid-card .text-image {
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
    align-items: center;
}
.basicpage .diagnosing-types-container .cardio-cards-container .amyloid-card .text-image .card-content{
text-align: left;
padding-left: 20px;
}

.basicpage .diagnosing-types-container .cardio-cards-container .amyloid-card .text-image .card-content h4{
  font-size: 20px;
  line-height: 22px;
  font-family: 'Kanit-SemiBold';/*font-family: "Kanit-Medium";*/
  color: #00215F;
  font-weight: 500;
}
.basicpage .diagnosing-types-container ul.sub-list{
  font-size: 16px;
  line-height: 19px;
  max-width: 1160px;
  margin: 34px auto 0 auto;
  color: #262626;
  font-family: "Kanit-Regular";
}

.basicpage .diagnosing-types-container .cardio-cards-container .amyloid-card p{
    font-family: 'Kanit-SemiBold';
    font-size: 18px;
  /*font-size: 20px;
  line-height: 24px;
  font-family: "Kanit-Medium";*/
}

.basicpage .diagnosing-types-container .cardio-cards-container .amyloid-card .text-image img.gradient-line-diagnosing {
  width: 95%;
  margin: 23px auto 12px auto;
}
.basicpage .diagnosing-types-container .cardio-cards-container .dna-card, .basicpage .diagnosing-types-container .cardio-cards-container .amyloid-card {
 flex-direction: column;
     padding: 22px 18px 18px 22px;
     margin-bottom: 0;
}
.basicpage .cardio-cards-items {
  justify-items: center;
  justify-content: space-evenly;
  width: 100%;
  max-width: 1160px;
}

.basicpage .cardio-cards-items .arrow-down{
  width: 20px;
  margin: 0 auto;
  padding: 10px 0;
}
.basicpage .cardio-cards-items img.gradient-line-diagnosing {
  width: 95%;
  margin: 11px auto 18px auto;
}

.basicpage .cardio-cards-items .dna-card img.gradient-line-diagnosing{
  width: 100%;
}
.basicpage .diagnosing-types-container .cardio-cards-container .amyloid-card p.animated-text{
  margin: 5px 0;
}
.basicpage .diagnosing-types-container .cardio-cards-container .amyloid-card p.animated-text img{
 width: 40px;
}
.basicpage .diagnosing-types-container .hereditary-cards-container .clinical-card .clinical-card-text ul.second-list li{
  width: 100%;
}
.basicpage .cardio-cards-items .list-container{
  width: 33%;
}   


/************** Updated css 10-07-24 *********************/

/*********************** Common Header *******************/
/*#header {
    background: #001234;
}*/ 
.top-menu ul.us-healthcare {
    max-width: 1180px;
}
.top-menu ul.us-healthcare li.bg-stay {
    background: #E2FCFD;
    border: 1px solid #E34AEE;
    width: 146px;
    height: 29px;
    padding-top: 3px;
    border-radius: 0 0 8px 8px;
}
.top-menu ul.us-healthcare li.bg-stay a {
    text-transform: uppercase;
    font-family: 'Kanit-SemiBold';
    font-size: 12px;
    line-height: 22px;
}
.top-menu ul li.language-wrap a {
    font-family: 'Kanit-Regular';
    font-size: 12px;
    line-height: 26px;
    color: #EC99FD;
}
.top-menu ul li.language-wrap a+a {
    padding-left: 10px;
    border-left: 1px solid #fff;
    margin-left: 10px;
    color: #fff;
}
.footer-logos ul li.footer-bar:after{visibility: hidden;}

/*********************** Header and Footer Ends *******************/


/*********************** Home page Start *******************/
#attr-home .hero-banner-home-main { 
    background: url(/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/Hero%20mask%202%201.jpg);
    background-size:100% 100%;/*background-size: cover;*/
    background-position: center;
}
/*********************** Home page Ends *******************/


/*********************** Diagnosing attr page *******************/
#diagnosing-attr .hereditary-cards-container .diagnosing-types-text {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
} 
#diagnosing-attr .hereditary-cards-container .dna-card {
    display: block;
    padding: 0px 10px 24px;
} 
#diagnosing-attr .hereditary-cards-container .dna-card .gradient-line {
    width: 95%;margin: 0px auto 18px; 
}
#diagnosing-attr .hereditary-cards-container .amyloid-card {
    display: block;
    padding: 0px 10px 35px;
} 
#diagnosing-attr .hereditary-cards-container .dna-card-icon {
    max-width: 100%;
} 
#diagnosing-attr .hereditary-cards-container .amyloid-card-icon {
    max-width: 100%;
    padding-bottom: 19px;
    padding-top: 32px;
} 
#diagnosing-attr .hereditary-cards-container .clinical-card-text {
    margin-top: 0;
    padding: 0px;
} 
#diagnosing-attr .hereditary-cards-container .clinical-card .gradient-line {
    margin: 18px auto 20px;
    transform: rotate(180deg);
} 
#diagnosing-attr .hereditary-cards-container .clinical-card, 
#diagnosing-attr .hereditary-cards-container .dna-card, 
#diagnosing-attr .hereditary-cards-container .amyloid-card {
    border: 1px solid #E34AEE;
    box-shadow: 0px 3px 6px 0px rgb(0 0 0 / 19%);
    padding: 0 10px 35px 10px;width: 100%;max-width: 619px;
} 
#diagnosing-attr .hereditary-cards-container .clinical-card:before,  
#diagnosing-attr .hereditary-cards-container .dna-card:before, 
#diagnosing-attr .hereditary-cards-container .amyloid-card:before{
    visibility: hidden;
}
#diagnosing-attr .hereditary-cards-container .clinical-card-or, 
#diagnosing-attr.basicpage #diagnosing-types-container-2 .cardio-cards-container .amyloid-card p.clinical-card-or {
    font-family: 'Kanit-Bold';
    color: #7FECF8;
    font-weight: 900;
    font-size: 26px;
    line-height: 21px;
    margin: 0px auto 5px;
}
#diagnosing-attr.basicpage #diagnosing-types-container-2 .cardio-cards-container .amyloid-card p.clinical-card-or{ 
    margin: 5px auto 10px;
} 
#diagnosing-attr .hereditary-cards-container .clinical-card-or + .clinical-card-text {
    margin: 0px;
    color: #00215F;
    font-family: 'Kanit-SemiBold';/*font-family: "Kanit-Medium";*/
    line-height: 21px;
} 
#diagnosing-attr  img.cardiac-icon {
    margin-bottom: 10px;
}
#diagnosing-attr.basicpage .diagnosing-types-container .cardio-cards-container .dna-card .text-image, 
#diagnosing-attr.basicpage .diagnosing-types-container .cardio-cards-container .amyloid-card .text-image {
    justify-content: center;
    margin-top: 15px;
        align-items: center;
}
#diagnosing-attr.basicpage .diagnosing-types-container .hereditary-cards-container .clinical-card .clinical-card-text h4 {font-family: 'Kanit-Medium';font-weight: normal;padding: 0px 20px;font-size:18px;}
#diagnosing-attr .cards-title {
    max-width: 100%;
}
#diagnosing-attr.basicpage .diagnosing-types-container .hereditary-cards-container .clinical-card .clinical-card-text ul li,
#diagnosing-attr.basicpage .diagnosing-types-container .hereditary-cards-container .dna-card ul li, 
#diagnosing-attr.basicpage .diagnosing-types-container .hereditary-cards-container .amyloid-card ul li {
    color: #00215f;
    font-family: 'Kanit-SemiBold' !important;
    font-size: 18px !important;
    line-height: 21px !important;
}
#diagnosing-attr .hereditary-cards-container .uldiv {
    margin-bottom: 6px;
    padding-left: 25px;
    gap: 2%;
} 
#diagnosing-attr .hereditary-cards-container .clinical-card-text .clinical-ul {
    padding-left: 18px;
}
#diagnosing-attr .hereditary-cards-container .clinical-card-icon {
    padding-top: 22px;
} 
#diagnosing-attr .hereditary-cards-container .clinical-icon-img {
    margin-right: 0;
} 
#diagnosing-attr .hereditary-cards-container .dna-icon-img {
    margin: 0px;
}  
#diagnosing-attr .hereditary-cards-container .dna-card-icon {
    padding-bottom: 19px;
} 
#diagnosing-attr .hereditary-cards-container .dna-card .clinical-card-text {
    padding-right: 0px;
} 
#diagnosing-attr .hereditary-cards-container .amyloid-card .gradient-line {
    width: 95%;margin: 0px auto 17px;height: 3px;
} 
#diagnosing-attr .hereditary-cards-container .hereditary-cards-items {
    align-items: self-start;
} 
#diagnosing-attr .hereditary-cards-container .clinical-card-right-arrow {
    margin-top: 380px;/*margin-top: 345px;*/
}
#diagnosing-attr .hereditary-cards-container .clinical-card .uldiv ul.second-list {
    margin-left: 5px;
    width: 50%;
} 
#diagnosing-attr .hereditary-cards-container .clinical-card .uldiv ul {
    width: 48%;
    margin-left: 10px;
} 
#diagnosing-attr .hereditary-cards-container .dna-card {
    padding: 0 10px 20px 10px;
} 
#diagnosing-attr .hereditary-cards-container .amyloid-card {
    padding: 0 10px 20px 10px;
} 
#diagnosing-attr .hereditary-cards-container .amyloid-card h4 {
    font-size: 20px;
    line-height: 21px;
    font-family: 'Kanit-Medium';/*font-family: "Kanit-Regular";*/
    font-weight: normal;
    max-width: 395px;
    margin: 0 auto 10px;
} 
#diagnosing-attr .hereditary-cards-container .amyloid-card .clinical-card-text + .clinical-card-text {
    max-width: 390px;
    /*margin: 20px auto 0px;*/
        margin: 20px auto 0px 15px;
    line-height: 21px;
    color: #00215F;
    font-family: 'Kanit-Medium';
}
#diagnosing-attr .hereditary-cards-container .clinical-card-text b{
    font-family: "Kanit-Bold";
    font-weight: normal;
}
#diagnosing-attr .diagnosing-types-container .diagnosing-types-text {
    max-width: 1140px;/*max-width: 800px;*/
    margin: 36px auto 31px;
    font-family: 'Kanit-SemiBold';
}
#diagnosing-attr .diagnosing-types-container .footnote {
    max-width: 1160px;
    margin: 23px auto 0;
    padding: 0px 10px 29px;
}
#diagnosing-attr .diagnosing-types-container .hereditary-cards-container {
    max-width: 1160px;
    margin: auto;
}
#diagnosing-attr .hereditary-cards-container .list-container {
    width: 100%;
    max-width: 474px;
}
#diagnosing-attr .diagnosing-types-container {
    background: #FAFAFA;
}
#diagnosing-attr .cardio-cards-items .plasma-card-icon {
    display: flex;
    max-width: 261px;
    margin: auto;
}
#diagnosing-attr .cards-title{
    font-family: 'Kanit-SemiBold';
    font-size: 20px;
}
#diagnosing-attr.plasma-card .plasma-card-text, 
#diagnosing-attr.basicpage #diagnosing-types-container-2 .cardio-cards-container .dna-card .gradient-line-diagnosing + p, 
#diagnosing-attr.basicpage #diagnosing-types-container-2 .cardio-cards-container .amyloid-card p {
    line-height: 21px;
    text-align: center;
    color: #00215F;
    margin-top: 0px;
}
#diagnosing-attr #diagnosing-types-container-2 .clinical-card-text {
    font-family: 'Kanit-SemiBold';/*font-family: "Kanit-Medium";*/
    font-size: 18px;
    line-height: 21px;
    text-align: center;
    color: #00215F;
    padding: 0px 15px;
    margin: 0px;
}
#diagnosing-attr #diagnosing-types-container-2, #diagnosing-types-container-2 .diagnosing-types-container {
    background: #fff;
    padding: 10px 0px;
}
#diagnosing-attr #diagnosing-types-container-2 .diagnosing-cardio-text {
    font-family: 'Kanit-SemiBold';/*font-family: "Kanit-Medium";*/
    font-size: 30px;
    line-height: 34px;
    max-width: 1150px;
    margin: 53px auto 33px;
    padding: 0px;
}
#diagnosing-attr .cardio-cards-container .clinical-card, 
#diagnosing-attr .cardio-cards-container .plasma-card, 
#diagnosing-attr .cardio-cards-container .dna-card, 
#diagnosing-attr .cardio-cards-container .amyloid-card {
    width: 100%;
    max-width: 290px;
    border: 1px solid #E34AEE;
    box-shadow: 0px 3px 11px 1px rgb(0 0 0 / 19%);
    padding: 0 10px 35px 10px;
}
#diagnosing-attr #diagnosing-types-container-2 .clinical-card-icon,
#diagnosing-attr #diagnosing-types-container-2 .clinical-card-icon .second-clinical-icon{
    margin-bottom: 5px;
}
#diagnosing-attr #cardio-cards-container .plasma-card {
    max-width: 367px;
} 
#diagnosing-attr.basicpage #diagnosing-types-container-2 .cardio-cards-items  .plasma-card, 
#diagnosing-attr.basicpage #diagnosing-types-container-2 .cardio-cards-items .list-container .dna-card, 
#diagnosing-attr.basicpage #diagnosing-types-container-2 .cardio-cards-items .list-container .amyloid-card {
    width: 100%;
    max-width: 367px;
}
#diagnosing-attr.basicpage .cardio-cards-items {
    justify-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 1160px;
    position: relative;
    align-items: flex-start;
}
#diagnosing-attr .cardio-cards-items .arrow-cardio {position: absolute;top: 100px;left: calc(290px + 3px);}
#diagnosing-attr .cardio-cards-items .plasma-card + .arrow-cardio {
    left: calc(290px + 367px + 63px);
}
#diagnosing-attr.basicpage #diagnosing-types-container-2 .cardio-cards-items .plasma-card {
    padding: 0 10px 20px 10px;
}
#diagnosing-attr.basicpage #diagnosing-types-container-2 ul.sub-list {
    font-size: 14px;
    line-height: 16px;
    margin: 34px auto 35px;
    color: #151515;
    padding-right: 45px;
}
#diagnosing-attr.basicpage #diagnosing-types-container-2 ul.sub-list span {
    display: inline-block;
    width: 10px;
}
#diagnosing-attr.basicpage #diagnosing-types-container-2 .cardio-cards-items img.gradient-line-diagnosing {
    transform: rotate(180deg);
    height: 2px;
}
.suptxt-md {
    vertical-align: baseline;
    position: relative;
    top: -0.6em;
    font-size: 60%;
}
#diagnosing-attr .misdiagnosis-heading h2 {
    font-family: "Kanit-SemiBold";
    font-size: 30px;
    line-height: 34px;
    font-weight:normal;
}
#diagnosing-attr .steps-sub-title {font-family: "Kanit-Regular";font-size: 20px;line-height: 24px;color: #000;max-width: 225px;margin: auto;min-height: 75px;}
#diagnosing-attr .diagnosis-cards-container .misdiagnosis-heading {
    margin-bottom: 25px;
}
#diagnosing-attr .genetic-testing-container .mis-text .arrow-image {
    width: 40%;
    margin: 0px auto 20px;
}
#diagnosing-attr .genetic-testing-container .mis-text {
    margin-bottom: 28px;
}
.footnote {
    font-family: "Kanit-Regular";
    font-size: 14px;
    line-height: 16px;
    color: #151515;
}
#diagnosing-attr .footer-text-container {
  width: 100%;
  padding: 28px 48px 36px 60px;
  background: #E2FCFD;
  border-radius: 30px 30px 30px 0;
  border: 1px solid #E34AEE;
  opacity: 1;
  position: relative;
  left: 0;
  max-width: 501px;
  margin-right: auto;
  margin-left: auto;
}
#diagnosing-attr .footer-text-container h2 {
  font-family: "Kanit-SemiBold";
  width: 100%;
}
#diagnosing-attr .footer-subheading {
  font-family: "Kanit-Regular";
  font-size: 26px;
  line-height: 28px;
  width: 100%;
  max-width: 627px;
  margin: 24px auto 28px;
  position: static;
}
#diagnosing-attr .cta-bottom-treatment {
    max-width: 205px;
    margin: auto;
    background: #E2FCFD;
    border-radius: 19px;
    border: 1px solid #E34AEE;
    position: static;
}
#diagnosing-attr .footer-main-container {
    height:550px;/*height: 440px;*/
    background-position: 100% 95%;
    
}
#diagnosis-footer {
    background: #000;
} 
#diagnosis-footer .diagnosis-footer {
    font-size: 14px;
    padding: 0 7px 0px 0px;
    padding-top: 20px;
    margin: 0px auto;
    max-width: 1158px;
    /*line-height: 19px;
    padding: 100px 20px 86px 0px;*/
}   
#diagnosing-attr .genetic-testing-container {
    margin:  25px auto;
}
#diagnosing-attr .genetic-testing-heading {
    padding: 32px 0px 0;
    line-height: 34px;
    max-width: 1160px;
    font-family: 'Kanit-SemiBold';
}
#diagnosing-attr .genetic-testing-container .arrow-image {
    margin-top: 9px;
    margin-bottom: 9px;
}
#diagnosing-attr li.genetic-bullet {
    font-family: "Kanit-regular";
    line-height: 24px;
}
#diagnosing-attr .misdiagnosis-container {
    padding-top: 50px;
}
#diagnosing-attr .mis-text {
    line-height: 20px;
    max-width: 950px;
    margin: auto;
    padding: 0px;
}
#diagnosing-attr .misdiagnosis-container .arrow-image {
    max-width: 342px;
    width: 100%;
}
#diagnosing-attr .three-cards-container {
    margin-top: 30px;
}
#diagnosing-attr .three-cards-items {
    width: 800px;
}
#diagnosing-attr .three-title {
    font-family: "Kanit-Semibold";
    line-height: 22px;
    max-width: 300px;
    margin: auto;
}
#diagnosing-attr .three-card-text {
    font-family: "Kanit-SemiBold";
    color: #00215F;
    font-size: 20px;
    line-height: 22px;
    max-width: 300px;
    margin: -10px auto 0;
    text-transform: uppercase;
}  
#diagnosing-attr .yrs-sup {
    color: #00215F;
    top: -1.01em;
    font-size: 16px;
        font-family: 'Kanit-SemiBold';
}
#diagnosing-attr #there-timely-container {
    padding-bottom: 20px;
}
#text-timely-main-container .diagnosis-cards-container .misdiagnosis-heading {
    margin-bottom: 5px;
}
#diagnosing-attr .diagnosis-cards-container {
    height: 100%;
    width: 100%;
    max-width: 1120px;
    margin: auto;
    background: transparent;
}
#diagnosing-attr .diagnosis-cards-container::before {
    visibility: hidden;
} 
#diagnosing-attr .diagnosis-cards-items {
    margin-bottom: 25px;
    padding: 24px 32px 18px;
    align-content: center;
    border: 1px solid #E34AEE;
    box-shadow: 0px 3px 11px 1px rgb(0 0 0 / 19%);
    border-radius: 30px 30px 30px 0px;
}
#diagnosing-attr .steps-card {
    width: calc(25% - 2px);
}
#diagnosing-attr .steps-title {
    font-family: "Kanit-Bold";
    font-size: 58px;
    line-height: 58px;
    padding-top: 15px;
    margin: 0;
}

#diagnosing-attr .three-card-icon p{
    font-size: 58px;
    font-family: 'Kanit-Bold';
    color: #0A215F;
  }
 #diagnosing-attr .three-card-icon p sup{
    font-family: 'Kanit';
    font-size: 50%;
  }
  
#diagnosing-attr .three-card-icon p span{
      font-size:28px;
      display: block;
  }
#diagnosing-attr .mob-three-block{
      display:none;
  }
/*******************************************************************/



@media (max-width: 991px) {
    
    #diagnosing-attr span.no-breaking {
    white-space: nowrap;
}
  .basicpage .cardio-cards-container .list-container {
    flex-direction: column;
        max-width: 60%;
    width: 60%;
  }
  .basicpage .diagnosing-types-container ul.sub-list{
    font-size: 14px;
    line-height: 16px;
    padding: 0 20px;
  }

  .basicpage .cardio-cards-container .list-container .dna-card, .basicpage .cardio-cards-container .list-container .amyloid-card {
    width: 100%;
    height: auto;
  }
  .basicpage .dna-icon-img {
    height: 55px;
    margin-bottom: 10px;
    margin-right: 0;
}
.basicpage .dna-card-text {
    margin-top: 0;
}
#diagnosing-attr .diagnosis-cards-items {
    flex-direction: unset;/*flex-direction: column;*/
    row-gap: 0px;/*row-gap: 20px;*/
  }
  /*#diagnosing-attr .alt-right-arrow{
    position: relative;
    top: 70px;
    right: 150px;
  }*/
}

@media (max-width: 767px) {
 .genetic-testing-heading{
  padding: 0 10px;
  font-size: 25px;
  line-height: 30px;
    padding-top: 45px;
 }
 .basicpage .cardio-cards-items .arrow-down {
    width: 18px;
}
.basicpage .cardio-cards-container .list-container {
        max-width: 90%;
    width: 100%;
}
.basicpage .diagnosing-types-container .hereditary-cards-container .clinical-card .clinical-card-text h4 {
    font-size: 18px;
        line-height: 20px;
        font-family: 'Kanit-Medium';
        text-align: left;
        padding:0px 17px;
}
}
@media (min-width: 992px) and (max-width: 1200px) {
  .basicpage .list-container {
    width: 37%;
    margin: auto 0px;
}
 .basicpage .cardio-cards-container, .basicpage .diagnosing-types-container ul.sub-list {
  padding: 0 15px;
} 
 .basicpage .footer-main-container {
  height: 616px;
}
#diagnosing-attr .hereditary-cards-container .hereditary-cards-items {
    align-items: self-start;
    padding: 0 14px;
}
#diagnosing-attr .diagnosis-cards-container{
    padding: 0 14px;
}
#diagnosis-footer {
    padding: 0 14px !important;
}
}

@media screen and (max-width: 991px) {
    #diagnosing-attr .hereditary-cards-container .clinical-card, #diagnosing-attr .hereditary-cards-container .dna-card, #diagnosing-attr .hereditary-cards-container .amyloid-card {
        max-width: 90%;
        width: 100%;
    }
    #diagnosing-attr .hereditary-cards-container .hereditary-cards-items {
        align-items: center;
    }
    .basicpage .diagnosing-types-container .hereditary-cards-container .clinical-card .clinical-card-text ul li {
        font-size: 14px !important;
        line-height: 21px !important;
        width: 100%;
        font-family: "Kanit-SemiBold";
    }
    #diagnosing-attr.basicpage .diagnosing-types-container .hereditary-cards-container .clinical-card .clinical-card-text ul li, #diagnosing-attr.basicpage .diagnosing-types-container .hereditary-cards-container .dna-card ul li, #diagnosing-attr.basicpage .diagnosing-types-container .hereditary-cards-container .amyloid-card ul li{
        font-size: 14px !important;
        line-height: 21px !important;
        width: 100%;
        font-family: "Kanit-SemiBold";
    }
    #diagnosing-attr .hereditary-cards-container .clinical-card .uldiv ul{
        width: 77%;
        margin-left: 25px;
    }
    #diagnosing-attr .hereditary-cards-container .clinical-card .uldiv ul.second-list{
        width: 77%;
        margin-left: 25px;
    }
    #diagnosing-attr .hereditary-cards-container .list-container {
        /*width: 100%;
        max-width: 95%;
        column-gap: 5px;*/
        width: 100%;
        max-width: 100%;
        column-gap: 10px;
        padding: 0 24px;
    }
    /*#diagnosing-attr .hereditary-cards-container .amyloid-card{
        height:604px;
        max-width: 161.65px;
        padding: 0 10px 20px 14px;
    }
    #diagnosing-attr .hereditary-cards-container .dna-card{
        height:604px;
        max-width: 167.65px;
        padding: 0 10px 20px 14px;
    }*/
    #diagnosing-attr .hereditary-cards-container .amyloid-card{
        height: fit-content;
        max-width: 100%;
        padding: 0 10px 20px 14px;
    }
    #diagnosing-attr .hereditary-cards-container .dna-card{
        height: 389.52px;
        max-width: 100%;
        padding: 0 10px 20px 14px;
        margin-bottom: 36px;
    }
    #diagnosing-attr .hereditary-cards-container .amyloid-card h4{
        font-size: 16px;
        line-height: 18px;
        font-family: "Kanit-Medium";
    }
    #diagnosing-attr .clinical-card-text{
        font-size:14px;
    }
    #diagnosing-attr .cards-title{
        font-size: 18px;
        padding: 0;
    }
    #diagnosing-attr .hereditary-cards-container .amyloid-card .clinical-card-text + .clinical-card-text{
            margin: 20px auto 0px 0px;
    }
    #diagnosing-attr.basicpage .diagnosing-types-container .hereditary-cards-container .dna-card ul li, #diagnosing-attr.basicpage .diagnosing-types-container .hereditary-cards-container .amyloid-card ul li{
        font-family: "Kanit-SemiBold";
        padding: 0 5px;
    }
    #diagnosing-attr .cardio-cards-container .clinical-card, #diagnosing-attr .cardio-cards-container .plasma-card, #diagnosing-attr .cardio-cards-container .dna-card, #diagnosing-attr .cardio-cards-container .amyloid-card{
        max-width: 90%;
    }
    #diagnosing-attr.basicpage #diagnosing-types-container-2 .cardio-cards-items .list-container .dna-card, #diagnosing-attr.basicpage #diagnosing-types-container-2 .cardio-cards-items .list-container .amyloid-card{
        max-width: 100% !important;
    }
    #diagnosing-attr.basicpage .cardio-cards-items{
        align-items: center;
    }
    #diagnosing-attr .genetic-testing-container {
        margin: 25px 24px;
    }
    #diagnosing-attr .cmp-text ul.genetic-list {
        margin-right: 0;
        margin-left: 0;
    }
    .misdiagnosis-container {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        padding: 0 24px !important;
    }
    #diagnosing-attr .misdiagnosis-heading h2 {
        font-size: 25px;
        line-height: 29px;
    }
    #diagnosing-attr .three-cards-items {
         width: 100%;
        display: block;
    }
    .three-card {
        width: 100%;
    }
    #diagnosing-attr .three-title{
        font-size:20px;
        max-width: 370px;
        width: 350px;
    }
    .three-years-icon-img {
        width: 25%;
    }
    .three-phys {
        width: 50%;
    }
    .misdiagnosis-heading h2 {
        padding-top: 0;
    }
    #diagnosing-attr .steps-card {
        width: calc(100% - 2px);
    }
    #diagnosing-attr .steps-sub-title{
      border-image: linear-gradient(to right, #75F2FB 0%, #556AFF 50%, #F599FC 100%) 1;
      border-width: 1.5px;
      border-style: solid;
      padding: 5px;
      border-top: 0;
      border-left: 0;
      border-right: 0;
    }
    #diagnosing-attr .diagnosis-cards-items{
        margin: 25px 24px;
    }
    #diagnosing-attr .footnote{
        padding:0 24px !important;
        font-size:16px;
        margin: 0px 0px 23px 0 !important;
    }
    #diagnosing-attr .footer-main-container{
        padding: 20px 24px;
        background-position: center left;
    }
    #diagnosing-attr .footer-text-container{
        padding: 28px 25px;
    }
    #diagnosing-attr .diagnosis-footer{
        margin-left: 24px;
    }
    #diagnosing-attr #diagnosing-types-container-2 .diagnosing-cardio-text{
        font-size: 25px;
        line-height: 29px;
        max-width: 367px;
            margin: 24px auto 33px;
    }
    #diagnosing-attr .mob-three-non{
        display:none;
    }
    #diagnosing-attr .mob-three-block{
        display: block;
        font-size: 20px !important;
        margin-top: 2em;
        margin-bottom: -1.5em;
    }
}

@media (min-width: 481px) and (max-width: 767px){
 .basicpage #diagnosing-attr .subheading-banner, .subheading-banner{
  margin-top: 40px;
 }
 
}
@media (min-width: 481px) and (max-width: 600px){
  .basicpage .footer-main-container {
    height: 650px;
}
.basicpage .cta-bottom-treatment {
  width: 43%;
}
}
@media screen and (max-width: 767px){
    #diagnosing-attr .hereditary-cards-container .dna-card{
        height: 524px;
    }
    #diagnosing-attr .hereditary-cards-container .amyloid-card{
        height: 524px;
    }
}
@media screen and (max-width: 420px) {
        #diagnosing-attr .hereditary-cards-container .dna-card {
        height: 604px;
        /*max-width: 167.65px;*/
        padding: 0 10px 20px 14px;
    }
    #diagnosing-attr .hereditary-cards-container .amyloid-card {
        height: 604px;
        /*max-width: 161.65px;*/
        padding: 0 10px 20px 14px;
    }
}
@media (max-width: 374px){
.basicpage .three-title{
  width: 135px;
  min-height: 80px;
}
}

/*Diagnosing CM */


/* Outer wrapper: full-width white background */
#diagnosing-attr #diagnosing-cm {
  background: #ffffff;
  width: 100%;
}

/* Inner content: same left offset as #diagnosing-pn's flowchart column, no grid needed */
#diagnosing-attr #diagnosing-cm .attr-flowchart {
  max-width: 1265px;
  margin: 0 auto;
  padding-left: 248px;  /* 224px sidebar width + 24px gap, matches #diagnosing-pn */
  padding-right: 16px;  /* matches the inset used on #diagnosing-pn's flowchart column */
  padding-top: 30px;
  padding-bottom: 47px;
  width: 100%;
  background: transparent;
  border: none;
  box-sizing: border-box;
  font-family: 'Segoe UI', Arial, sans-serif;
}

#diagnosing-attr .attr-flowchart * {
  box-sizing: border-box;
}

#diagnosing-attr .attr-flowchart .flowchart-header {
  text-align: center;
  margin-bottom: 20px;
}

/* Heading */
#diagnosing-attr .attr-flowchart .flowchart-title {
  color: #00215F;
  font-family: 'Kanit', sans-serif;
  font-size: 30px;
  font-weight: 600;
  margin: 0 0 6px;
}

/* Subheading */
#diagnosing-attr .attr-flowchart .flowchart-subtitle {
  color: #00215F;
  font-family: 'Kanit', sans-serif;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.3px;
  margin: 0;
}

/* Base flow-step styling shared by all blocks */
#diagnosing-attr .attr-flowchart .flow-step {
  background: #E2FCFD99;
  border: 1px solid #94A0CE;
  border-radius: 20px 20px 20px 0px;
  overflow: hidden;
  margin-bottom: 20px;
}

/* Narrower/inset blocks: the 3 middle process steps + outcome row */
#diagnosing-attr .attr-flowchart .flow-step:not(.flow-step-primary),
#diagnosing-attr .attr-flowchart .outcome-row {
  margin-left: 20px;
  margin-right: 20px;
  margin-bottom:-2px;
}

#diagnosing-attr .attr-flowchart .step-single {
  padding: 14px 20px;
  text-align: center;
}

#diagnosing-attr .attr-flowchart .step-title {
  color: #00215F;
  font-family: 'Kanit', sans-serif;
  font-weight: 600;
  font-size: 20px;
  margin-bottom: 4px;
}

#diagnosing-attr .attr-flowchart .step-text {
  color: #00215F;
  font-family: 'Kanit', sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.4;
  text-align: center;
}

#diagnosing-attr .attr-flowchart .step-double .step-top {
  padding: 14px 20px;
  text-align: center;
}

#diagnosing-attr .attr-flowchart .step-double .step-bottom {
  background: #ffffff;
  border-top: 1px solid #94A0CE;
  padding: 8px 20px;
  text-align: center;
}

#diagnosing-attr .attr-flowchart .step-result {
  color: #00215F;
  font-family: 'Kanit', sans-serif;
  font-weight: 400;
  font-size: 20px;
  font-style: italic;
  text-align: center;
}

#diagnosing-attr .attr-flowchart .arrow-down {
  width: 0;
  height: 0;
  margin: -12px auto 8px;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 12px solid #4a90a4;
}

#diagnosing-attr .attr-flowchart .step-genetic {
  padding: 0;
}

#diagnosing-attr .attr-flowchart .genetic-title {
  text-align: center;
  padding: 14px 20px 10px;
  margin-bottom: 0;
}

#diagnosing-attr .attr-flowchart .genetic-split {
  display: flex;
  border-top: 1px solid #94A0CE;
}

#diagnosing-attr .attr-flowchart .genetic-col {
  flex: 1;
  padding: 10px 16px;
  text-align: center;
}

#diagnosing-attr .attr-flowchart .genetic-col-left {
  border-right: 1px solid #94A0CE;
}

/* First block ("Clinical suspicion") — full width, no inset */
#diagnosing-attr .attr-flowchart .flow-step-primary .step-single {
  padding: 20px 30px;
}

#diagnosing-attr .attr-flowchart .flow-step-primary .step-title,
#diagnosing-attr .attr-flowchart .flow-step-primary .step-text {
  font-size: 22px;
}

/* 3 middle blocks — uniform, smaller than first block */
#diagnosing-attr .attr-flowchart .flow-step:not(.flow-step-primary) .step-single,
#diagnosing-attr .attr-flowchart .flow-step:not(.flow-step-primary) .step-top,
#diagnosing-attr .attr-flowchart .flow-step:not(.flow-step-primary) .genetic-title {
  padding: 14px 20px;
  min-height: 60px;
}

#diagnosing-attr .attr-flowchart .flow-step:not(.flow-step-primary) .step-title,
#diagnosing-attr .attr-flowchart .flow-step:not(.flow-step-primary) .step-text,
#diagnosing-attr .attr-flowchart .flow-step:not(.flow-step-primary) .step-result,
#diagnosing-attr .attr-flowchart .flow-step:not(.flow-step-primary) .genetic-col {
  font-size: 18px;
}

/* Last 2 outcome boxes: split the inset width equally */
#diagnosing-attr .attr-flowchart .outcome-arrows {
  display: flex;
  justify-content: space-around;
  padding: 0 15%;
  margin-left: 20px;
  margin-right: 20px;
}

#diagnosing-attr .attr-flowchart .outcome-arrows .arrow-down {
  margin: 4px 0;
}

#diagnosing-attr .attr-flowchart .outcome-row {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

#diagnosing-attr .attr-flowchart .outcome-box {
  flex: 1;
  background: #E2FCFD99;
  border: 1px solid #94A0CE;
  border-radius: 20px 20px 20px 0px;
  text-align: center;
  padding: 12px;
  color: #00215F;
  font-family: 'Kanit', sans-serif;
  font-weight: 600;
  font-size: 18px;
}

/* Footnotes — full width, no inset */
#diagnosing-attr .attr-flowchart .footnotes {
  font-size: 14px;
  color: #151515;
  line-height: 1.5;
  margin-bottom: 18px;
}

#diagnosing-attr .attr-flowchart .footnotes p {
  margin: 3px 0;
}

/* Callout box — full width, no inset */
#diagnosing-attr .attr-flowchart .callout-box {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #DDE0EE99;
  border: 1px solid #656EFA;
  border-radius: 20px 20px 20px 0px;
  padding: 14px 18px;
}

#diagnosing-attr .attr-flowchart .callout-icon {
  font-size: 18px;
  line-height: 1.4;
  flex-shrink: 0;
}

#diagnosing-attr .attr-flowchart .callout-text {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #00215F;
  line-height: 1.5;
}

#diagnosing-attr .attr-flowchart .callout-link {
  color: #12276b;
  text-decoration: underline;
}

@media (max-width: 600px) {
  #diagnosing-attr #diagnosing-cm .attr-flowchart {
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
  }
  #diagnosing-attr .attr-flowchart .flowchart-title {
    font-size: 20px;
  }
  #diagnosing-attr .attr-flowchart .flow-step:not(.flow-step-primary),
  #diagnosing-attr .attr-flowchart .outcome-row,
  #diagnosing-attr .attr-flowchart .outcome-arrows {
    margin-left: 10px;
    margin-right: 10px;
  }
  #diagnosing-attr .attr-flowchart .genetic-split,
  #diagnosing-attr .attr-flowchart .outcome-row {
    flex-direction: column;
  }
  #diagnosing-attr .attr-flowchart .genetic-col-left {
    border-right: none;
    border-bottom: 1px solid #94A0CE;
  }
  #diagnosing-attr .attr-flowchart .outcome-arrows {
    flex-direction: row;
    padding: 0 10%;
  }
}

/* diagnosing-pn */


/* Grid parent: #diagnosing-pn directly */
#diagnosing-attr #diagnosing-pn {
  display: grid;
  grid-template-columns: 224px 1fr;
  column-gap: 24px;
  align-items: start;
  max-width: 1265px;
  margin: 0 auto;
  width: 100%;
  padding-bottom:50px;
}

/* Child 1: flowchart's text wrapper → column 2 */
#diagnosing-attr #diagnosing-pn > div.text:has(#hattrpn-flowchart) {
  grid-column: 2;
  order: 2;
  width: 100%;
  min-width: 0;
  padding-right: 16px;
  box-sizing: border-box;
}

/* Child 2: sidebar's text wrapper → column 1 */
#diagnosing-attr #diagnosing-pn > div.text:has(.aboutattr-cards-container) {
  grid-column: 1;
  order: 1;
  width: 224px;
  background: transparent;
  border: none;
  padding: 0;
}

@media (max-width: 900px) {
  #diagnosing-attr #diagnosing-pn {
    grid-template-columns: 1fr;
  }
  #diagnosing-attr #diagnosing-pn > div.text:has(#hattrpn-flowchart),
  #diagnosing-attr #diagnosing-pn > div.text:has(.aboutattr-cards-container) {
    grid-column: 1;
    width: 100%;
    padding-right: 0;
  }
}

/* ===== SIDEBAR: "On this page" card ===== */
#diagnosing-attr #diagnosing-pn .aboutattr-cards-container {
  width: 224px !important;
  max-width: 224px;
}

#diagnosing-attr #diagnosing-pn .diagnosis-cards-items {
  width: 100%;
}

#diagnosing-attr #diagnosing-pn .steps-card {
  display: flex;
  flex-direction: column;
  background: #E9EBF2;
  border: none;
  border-radius: 0px 0px 25px 0px;
  height: 352px;
  padding: 24px 20px;
  width: 100%;
  box-sizing: border-box;
  position: sticky;
  top: 20px;
 
}

#diagnosing-attr #diagnosing-pn .steps-card-icon {
  font-family: 'Kanit', sans-serif;
  color: #00215F;
  width: 100%;
}

/* Header row: "ON THIS PAGE" */
#diagnosing-attr #diagnosing-pn .steps-card-icon:first-child {
  font-weight: 700;
  font-size: 21px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 16px;
  white-space: normal;
}

/* Hide the empty spacer divs — spacing comes from nav item margins */
#diagnosing-attr #diagnosing-pn .steps-card-icon:nth-child(even) {
  display: none;
}

/* Nav item rows */
#diagnosing-attr #diagnosing-pn .steps-card-icon:nth-child(odd):not(:first-child) {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
  margin-bottom: 14px;
  cursor: pointer;
  white-space: normal;
}

#diagnosing-attr #diagnosing-pn .steps-card-icon:last-child {
  margin-bottom: 0;
}

/* ===== FLOWCHART ===== */
#diagnosing-attr #diagnosing-pn .sheet {
  background: transparent;
  font-family: 'Segoe UI', Arial, sans-serif;
  box-sizing: border-box;
}

#diagnosing-attr #diagnosing-pn .sheet * {
  box-sizing: border-box;
}

#diagnosing-attr #diagnosing-pn .hattrpn-h1 {
  color: #00215F;
  font-family: 'Kanit', sans-serif;
  font-size: 30px;
  font-weight: 600;
  text-align: center;
  margin: 0 0 6px;
  padding-top:42px;
}

#diagnosing-attr #diagnosing-pn .subtitle {
  color: #00215F;
  font-family: 'Kanit', sans-serif;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.3px;
  text-align: center;
  margin: 0 0 20px;
}

/* Screening box (top, full-width block) */
#diagnosing-attr #diagnosing-pn .box {
  background: #E2FCFD99;
  border: 1px solid #94A0CE;
  border-radius: 20px 20px 20px 0px;
  padding: 16px 24px;
  text-align: center;
  margin-bottom: 4px;
}

#diagnosing-attr #diagnosing-pn .box-title {
  color: #00215F;
  font-family: 'Kanit', sans-serif;
  font-weight: 600;
  font-size: 20px;
  margin-bottom: 4px;
}

#diagnosing-attr #diagnosing-pn .box-sub {
  color: #00215F;
  font-family: 'Kanit', sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.4;
}

/* Down arrows between blocks */
#diagnosing-attr #diagnosing-pn .arrow-row {
  text-align: center;
  line-height: 1;
}

#diagnosing-attr #diagnosing-pn .arrow-row .arrow {
  color: #6B7FB5;
  font-size: 20px;
  display: inline-block;
}

/* Flags grid: 9-column red-flag row */
#diagnosing-attr #diagnosing-pn .flags-grid {
  display: flex;
  background: #E2FCFD99;
  border: 1px solid #94A0CE;
  border-radius: 20px 20px 20px 0px;
  overflow: hidden;
  margin-bottom: 0;
}

#diagnosing-attr #diagnosing-pn .flag-card {
  flex: 1;
  padding: 14px 10px;
  text-align: center;
  color: #00215F;
  font-family: 'Kanit', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.35;
  border-right: 1px solid #94A0CE;
  display: flex;
  align-items: center;
  justify-content: center;
}

#diagnosing-attr #diagnosing-pn .flag-card:last-child {
  border-right: none;
}

/* Row of small arrows under each flag card */
#diagnosing-attr #diagnosing-pn .flags-arrows {
  text-align: center;
  color: #6B7FB5;
  font-size: 16px;
  letter-spacing: 6.5%;
  margin: 2px 0 4px;
  word-spacing: 22px;
}

/* Diagnostic workup - single wide box */
#diagnosing-attr #diagnosing-pn .wide-box {
  background: #E2FCFD99;
  border: 1px solid #94A0CE;
  border-radius: 20px 20px 20px 0px;
  text-align: center;
  padding: 14px 20px;
  color: #00215F;
  font-family: 'Kanit', sans-serif;
  font-weight: 600;
  font-size: 20px;
}

/* Confirmatory testing box */
#diagnosing-attr #diagnosing-pn .confirm-box {
  background: #E2FCFD99;
  border: 1px solid #94A0CE;
  border-radius: 20px 20px 20px 0px;
  overflow: hidden;
}

#diagnosing-attr #diagnosing-pn .confirm-title {
  text-align: center;
  color: #00215F;
  font-family: 'Kanit', sans-serif;
  font-weight: 600;
  font-size: 20px;
  padding: 14px 20px 8px;
}

#diagnosing-attr #diagnosing-pn .confirm-items {
  display: flex;
  align-items: center;
  padding: 0 20px 16px;
}

#diagnosing-attr #diagnosing-pn .confirm-items .item {
  flex: 1;
  text-align: center;
  color: #00215F;
  font-family: 'Kanit', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
  padding: 0 12px;
}

#diagnosing-attr #diagnosing-pn .confirm-items .plus {
  color: #B45DD6;
  font-size: 16px;
  flex: 0 0 auto;
  padding: 0 6px;
}

/* Genetic testing / hATTR-PN result boxes */
#diagnosing-attr #diagnosing-pn .narrow-box {
  background: #E2FCFD99;
  border: 1px solid #94A0CE;
  border-radius: 20px 20px 20px 0px;
  text-align: center;
  padding: 12px 20px;
  color: #00215F;
  font-family: 'Kanit', sans-serif;
  font-weight: 600;
  font-size: 20px;
}

/* Footnotes */
#diagnosing-attr #diagnosing-pn .footnotes {
  font-size: 14px;
  color: #151515;
  line-height: 1.5;
  margin: 16px 0;
}

#diagnosing-attr #diagnosing-pn .footnotes .src {
  font-weight: 600;
}

/* Callout box */
#diagnosing-attr #diagnosing-pn .callout {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #DDE0EE99;
  border: 1px solid #656EFA;
  border-radius: 20px 20px 20px 0px;
  padding: 14px 18px;
}

#diagnosing-attr #diagnosing-pn .callout .bulb {
  font-size: 18px;
  line-height: 1.4;
  flex-shrink: 0;
}

#diagnosing-attr #diagnosing-pn .callout p {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #00215F;
  line-height: 1.5;
}

#diagnosing-attr #diagnosing-pn .callout u {
  text-decoration: underline;
}

/* Add spacing between the stacked blocks in the flow */
#diagnosing-attr #diagnosing-pn .flags-grid,
#diagnosing-attr #diagnosing-pn .wide-box,
#diagnosing-attr #diagnosing-pn .confirm-box,
#diagnosing-attr #diagnosing-pn .narrow-box {
  margin-bottom: 2px;
}

@media (max-width: 700px) {
  #diagnosing-attr #diagnosing-pn .flags-grid {
    flex-direction: column;
  }
  #diagnosing-attr #diagnosing-pn .flag-card {
    border-right: none;
    border-bottom: 1px solid #94A0CE;
  }
  #diagnosing-attr #diagnosing-pn .flag-card:last-child {
    border-bottom: none;
  }
  #diagnosing-attr #diagnosing-pn .confirm-items {
    flex-direction: column;
    gap: 8px;
  }
}


/* Kill the wrapper's inherited background/border/padding directly by its real class */
#diagnosing-attr #diagnosing-pn .this-page {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* Also target its parent div.text in case the border/bg is one level up */
#diagnosing-attr #diagnosing-pn > div.text:has(.this-page) {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  grid-column: 1;
  order: 1;
  width: 224px;
}

/* Keep the flowchart's wrapper rule as before */
#diagnosing-attr #diagnosing-pn > div.text:has(#hattrpn-flowchart) {
  grid-column: 2;
  order: 2;
  width: 100%;
  min-width: 0;
  padding-right: 16px;
  box-sizing: border-box;
}


/* Mixed Phenotype */

/* Outer wrapper: full-width white background */
#diagnosing-attr #mixed-phenotype {
  background: #FAFAFA;
  width: 100%;
}

/* Inner content: same left offset as the other flowchart sections */
#diagnosing-attr #mixed-phenotype .mp-flowchart {
  max-width: 1265px;
  margin: 0 auto;
  padding-left: 248px;  /* matches #diagnosing-pn / #diagnosing-cm offset */
  padding-right: 16px;
  padding-top: 30px;
  padding-bottom: 55px;
  width: 100%;
  background: transparent;
  border: none;
  box-sizing: border-box;
  font-family: 'Segoe UI', Arial, sans-serif;
}

#diagnosing-attr #mixed-phenotype .mp-flowchart * {
  box-sizing: border-box;
}

#diagnosing-attr #mixed-phenotype .mp-header {
  text-align: center;
  margin-bottom: 20px;
}

#diagnosing-attr #mixed-phenotype .mp-title {
  color: #00215F;
  font-family: 'Kanit', sans-serif;
  font-size: 30px;
  font-weight: 600;
  margin: 0 0 6px;
}

#diagnosing-attr #mixed-phenotype .mp-subtitle {
  color: #00215F;
  font-family: 'Kanit', sans-serif;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.3px;
  margin: 0;
}

/* Base step box styling — shared look across all boxes */
#diagnosing-attr #mixed-phenotype .mp-step,
#diagnosing-attr #mixed-phenotype .mp-col-box {
  background: #E2FCFD99;
  border: 1px solid #94A0CE;
  border-radius: 20px 20px 20px 0px;
  margin-bottom: -2px;
  overflow: hidden;
}

#diagnosing-attr #mixed-phenotype .mp-step-single {
  padding: 16px 24px;
}

#diagnosing-attr #mixed-phenotype .mp-step-title {
  color: #00215F;
  font-family: 'Kanit', sans-serif;
  font-weight: 600;
  font-size: 20px;
  margin-bottom: 4px;
}

#diagnosing-attr #mixed-phenotype .mp-step-text {
  color: #00215F;
  font-family: 'Kanit', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
}

#diagnosing-attr #mixed-phenotype .mp-center {
  text-align: center;
}

/* Down arrows */
#diagnosing-attr #mixed-phenotype .mp-arrow-down {
  text-align: center;
  color: #6B7FB5;
  font-size: 0;
  line-height: 1;
  margin-bottom: 4px;
  position: relative;
  height: 16px;
}

#diagnosing-attr #mixed-phenotype .mp-arrow-down::before {
  content: '';
  display: block;
  width: 0;
  height: 0;
  margin: 0 auto;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 12px solid #4a90a4;
}

/* Two arrows side by side (splitting into 2 columns) */
#diagnosing-attr #mixed-phenotype .mp-split-arrows {
  display: flex;
  justify-content: space-around;
  padding: 0 15%;
  margin-bottom: 4px;
}

#diagnosing-attr #mixed-phenotype .mp-split-arrows .mp-arrow-down {
  margin-bottom: 0;
  flex: 0 0 auto;
  width: 16px;
}

/* Two-column layout: Cardiovascular / Neurologic assessments */
#diagnosing-attr #mixed-phenotype .mp-two-col {
  display: flex;
  gap: 20px;
  margin-bottom: 4px;
}

#diagnosing-attr #mixed-phenotype .mp-col-box {
  flex: 1;
  padding: 16px 20px;
  margin-bottom: 0;
}

#diagnosing-attr #mixed-phenotype .mp-col-box .mp-step-title {
  text-align: left;
  margin-bottom: 8px;
}

#diagnosing-attr #mixed-phenotype .mp-list {
  margin: 0;
  padding-left: 18px;
  color: #00215F;
  font-family: 'Kanit', sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.6;
}

#diagnosing-attr #mixed-phenotype .mp-list li {
  margin-bottom: 2px;
}

/* Double-decker step: top summary + bottom flat detail row */
#diagnosing-attr #mixed-phenotype .mp-step-double .mp-step-top {
  padding: 16px 24px;
}

#diagnosing-attr #mixed-phenotype .mp-step-bottom {
  background: #E2FCFD99;
  border-top: 1px solid #94A0CE;
  padding: 14px 24px;
}

#diagnosing-attr #mixed-phenotype .mp-two-col-flat {
  display: flex;
  gap: 24px;
}

#diagnosing-attr #mixed-phenotype .mp-col-flat {
  flex: 1;
  color: #00215F;
  font-family: 'Kanit', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
}

#diagnosing-attr #mixed-phenotype .mp-bold {
  font-weight: 600;
}

/* Footnotes */
#diagnosing-attr #mixed-phenotype .mp-footnotes {
  font-size: 14px;
  color: #151515;
  line-height: 1.5;
  margin-bottom: 18px;
}

#diagnosing-attr #mixed-phenotype .mp-footnotes p {
  margin: 3px 0;
}

/* Callout box */
#diagnosing-attr #mixed-phenotype .mp-callout-box {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #DDE0EE99;
  border: 1px solid #656EFA;
  border-radius: 20px 20px 20px 0px; 
  padding: 14px 18px;
}

#diagnosing-attr #mixed-phenotype .mp-callout-icon {
  font-size: 18px;
  line-height: 1.4;
  flex-shrink: 0;
}

#diagnosing-attr #mixed-phenotype .mp-callout-text {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #00215F;
  line-height: 1.5;
}

#diagnosing-attr #mixed-phenotype .mp-callout-link {
  color: #12276b;
  text-decoration: underline;
}

@media (max-width: 700px) {
  #diagnosing-attr #mixed-phenotype .mp-flowchart {
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
  }
  #diagnosing-attr #mixed-phenotype .mp-title {
    font-size: 20px;
  }
  #diagnosing-attr #mixed-phenotype .mp-two-col,
  #diagnosing-attr #mixed-phenotype .mp-two-col-flat {
    flex-direction: column;
    gap: 12px;
  }
  #diagnosing-attr #mixed-phenotype .mp-split-arrows {
    padding: 0 30%;
  }
}


/*common*/

/* Outer wrapper: full-width background, centered content up to 1265px */
#diagnosing-attr #there-timely-container {
  background: #ffffff;
  width: 100%;
}

#diagnosing-attr #there-timely-container .misdiagnosis-container {
  max-width: 1265px !important;
  margin: 0 auto !important;
  padding: 30px 16px 30px 238px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  font-family: 'Segoe UI', Arial, sans-serif;
  position: relative;
}





#diagnosing-attr #there-timely-container .misdiagnosis-container * {
  box-sizing: border-box;
}

/* Heading block */
#diagnosing-attr #there-timely-container .misdiagnosis-heading {
  text-align: center;
  margin-bottom: 12px;
}

#diagnosing-attr #there-timely-container .misdiagnosis-heading h2 {
  margin: 0;
  line-height: 1.4;
}

#diagnosing-attr #there-timely-container .misdiagnosis-heading .blue-text {
  color: #00215F;
  font-family: 'Kanit', sans-serif;
}

/* First line ("Common misdiagnoses") acts as the main title */
#diagnosing-attr #there-timely-container .misdiagnosis-heading h2 {
  font-size: 30px;
  font-weight: 600;
}

/* Body paragraph */
#diagnosing-attr #there-timely-container .mis-text {
  text-align: center;
  color: #151515;
  font-family: 'Kanit', sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  max-width: 1001px;
  margin: 0 auto 8px;
}

#diagnosing-attr #there-timely-container .mis-text .suptxt-d {
  font-size: 10px;
}

/* Gradient divider line image */
#diagnosing-attr #there-timely-container .arrow-image {
  display: block;
  margin: 12px auto 24px;
  max-width: 500px;
  width: 100%;
  height: auto;
  margin-top:-80px;
}

/* Stat cards row */
#diagnosing-attr #there-timely-container .three-cards-items {
  display: flex;
  justify-content: center;
  gap: 80px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

#diagnosing-attr #there-timely-container .three-card {
  text-align: center;
  max-width: 260px;
}

#diagnosing-attr #there-timely-container .three-title {
  color: #00215F;
  font-family: 'Kanit', sans-serif;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  margin-bottom: 6px;
}

#diagnosing-attr #there-timely-container .three-card-icon p {
  color: #00215F;
  font-family: 'Kanit', sans-serif;
  font-weight: 700;
  font-size: 40px;
  margin: 0;
  line-height: 1.1;
}

#diagnosing-attr #there-timely-container .three-card-icon p span {
  display: block;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

#diagnosing-attr #there-timely-container .three-card-icon .suptxt-d,
#diagnosing-attr #there-timely-container .three-card-icon sup {
  font-size: 11px;
}

#diagnosing-attr #there-timely-container .three-card-text {
  color: #00215F;
  font-family: 'Kanit', sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.4;
  margin-top: 6px;
  text-transform: uppercase;
}

/* Section label above the two dark cards */
#diagnosing-attr #there-timely-container p {
  color: #151515;
  font-family: 'Kanit', sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.3px;
  margin: 0 0 14px;
}

/* Neurologic / Cardiac dark cards — fixed proportions */
#diagnosing-attr #there-timely-container .dd-panel {
  margin-bottom: 16px;
}

#diagnosing-attr #there-timely-container .dd-cards {
  display: flex;
  gap: 24px;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
}

#diagnosing-attr #there-timely-container .dd-card {
  flex: 1 1 480px;
  max-width: 518px;
  min-width: 320px;
  height: 456px;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(135deg, #0B1440 0%, #1A2B6B 55%, #2B1B4E 100%);
  box-sizing: border-box;
}

#diagnosing-attr #there-timely-container .dd-card-content {
  padding: 32px 36px;
  height: 100%;
  box-sizing: border-box;
}

#diagnosing-attr #there-timely-container .dd-card-title {
  color: #ffffff;
  font-family: 'Kanit', sans-serif;
  font-weight: 700;
  font-size: 26px;
  margin: 0 0 20px;
}

/* List: custom "+" bullets, more breathing room per line */
#diagnosing-attr #there-timely-container .dd-list {
  margin: 0;
  padding: 0;
  list-style: none;
  color: #E8ECFF;
  font-family: 'Kanit', sans-serif;
  font-weight: 400;
  font-size: 14px;
}

#diagnosing-attr #there-timely-container .dd-list li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 10px;
  line-height: 1.4;
}

#diagnosing-attr #there-timely-container .dd-list li::before {
  content: '+';
  position: absolute;
  left: 0;
  top: 0;
  color: #B8C4FF;
  font-weight: 700;
}

/* Hide stray Figma annotation badge accidentally left in markup */
#diagnosing-attr #there-timely-container .dd-badge {
  display: none;
}

/* Footnote */
#diagnosing-attr #there-timely-container .dd-footnote {
  font-size: 14px;
  color: #151515;
  line-height: 1.5;
  margin-bottom: 18px;
}

#diagnosing-attr #there-timely-container .dd-footnote p {
  margin: 0;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: #333;
}

/* Callout box */
#diagnosing-attr #there-timely-container .dd-callout-box {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #DDE0EE99;
  border: 1px solid #656EFA;
  border-radius: 20px 20px 20px 0px;
  padding: 14px 18px;
}

#diagnosing-attr #there-timely-container .dd-callout-icon {
  font-size: 18px;
  line-height: 1.4;
  flex-shrink: 0;
}

#diagnosing-attr #there-timely-container .dd-callout-text {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #00215F;
  line-height: 1.5;
}

@media (max-width: 1100px) {
  #diagnosing-attr #there-timely-container .dd-cards {
    flex-wrap: wrap;
  }
  #diagnosing-attr #there-timely-container .dd-card {
    flex: 1 1 100%;
    width: 100%;
    height: auto;
    min-height: 380px;
  }
}

@media (max-width: 700px) {
  #diagnosing-attr #there-timely-container .misdiagnosis-container {
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
  }
  #diagnosing-attr #there-timely-container .three-cards-items {
    gap: 30px;
  }
}


/* =========================================================
   DIAGNOSING ATTR — FINAL REFERENCE-MATCH OVERRIDES
   Page scope: #diagnosing-attr
   Keep this section at the VERY END of the stylesheet.
   ========================================================= */

/* ---------------------------------------------------------
   1. SHARED DAM ASSET PLACEHOLDERS

   Replace only the URLs below after the assets are in DAM:
   down-arrow.svg
   plus-sign.svg
   bulb-icon.svg
   neurologic-card-bg.png
   cardiac-card-bg.png
   footer-background.jpg
   footer-person-icon.png
   footer-liver-icon.png
   --------------------------------------------------------- */


/* =========================================================
   FLOWCHART DOWN ARROWS
   ========================================================= */

/*
 * Replace generated CSS triangles/text arrows with one
 * consistent DAM image so the arrows do not appear crumbled.
 */
#diagnosing-attr .attr-flowchart .arrow-down,
#diagnosing-attr #diagnosing-pn .arrow-row .arrow,
#diagnosing-attr #diagnosing-pn .flags-arrows .arrow,
#diagnosing-attr #mixed-phenotype .mp-arrow-down {
  display: block !important;
  position: relative !important;

  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;

  margin: 4px auto 8px !important;
  padding: 0 !important;

  border: 0 !important;
  background:
    url("/content/dam/YOUR-DAM-PATH/down-arrow.svg")
    center center / contain no-repeat !important;

  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  overflow: hidden !important;
}

/* Disable old generated triangle layers */
#diagnosing-attr .attr-flowchart .arrow-down::before,
#diagnosing-attr .attr-flowchart .arrow-down::after,
#diagnosing-attr #diagnosing-pn .arrow-row .arrow::before,
#diagnosing-attr #diagnosing-pn .arrow-row .arrow::after,
#diagnosing-attr #diagnosing-pn .flags-arrows .arrow::before,
#diagnosing-attr #diagnosing-pn .flags-arrows .arrow::after,
#diagnosing-attr #mixed-phenotype .mp-arrow-down::before,
#diagnosing-attr #mixed-phenotype .mp-arrow-down::after {
  content: none !important;
  display: none !important;
}

/* Keep split arrows aligned to the centres of both columns */
#diagnosing-attr .attr-flowchart .outcome-arrows,
#diagnosing-attr #mixed-phenotype .mp-split-arrows {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  align-items: center !important;
  justify-items: center !important;

  width: 100% !important;
  margin: 0 0 4px !important;
  padding: 0 !important;
}

#diagnosing-attr .attr-flowchart .outcome-arrows .arrow-down,
#diagnosing-attr #mixed-phenotype .mp-split-arrows .mp-arrow-down {
  margin: 4px auto !important;
}


/* =========================================================
   PLUS SIGNS
   ========================================================= */

#diagnosing-attr #diagnosing-pn .confirm-items .plus {
  display: block !important;
  flex: 0 0 24px !important;

  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;

  margin: 0 10px !important;
  padding: 0 !important;

  background:
    url("/content/dam/YOUR-DAM-PATH/plus-sign.svg")
    center center / contain no-repeat !important;

  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  overflow: hidden !important;
}


/* =========================================================
   BULB ICONS IN CALLOUTS
   ========================================================= */

#diagnosing-attr .attr-flowchart .callout-icon,
#diagnosing-attr #diagnosing-pn .callout .bulb,
#diagnosing-attr #mixed-phenotype .mp-callout-icon,
#diagnosing-attr #there-timely-container .dd-callout-icon {
  display: block !important;
  flex: 0 0 28px !important;

  width: 28px !important;
  height: 32px !important;
  min-width: 28px !important;
  min-height: 32px !important;

  margin: 0 8px 0 0 !important;
  padding: 0 !important;

  background:
    url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/lightbulb%20icon%20gradient_1.png")
    center center / contain no-repeat !important;

  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  overflow: hidden !important;
}


/* =========================================================
   CALLOUT BOX CONSISTENCY
   ========================================================= */

#diagnosing-attr .attr-flowchart .callout-box,
#diagnosing-attr #diagnosing-pn .callout,
#diagnosing-attr #mixed-phenotype .mp-callout-box,
#diagnosing-attr #there-timely-container .dd-callout-box {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;

  width: 100% !important;
  min-height: 64px !important;

  padding: 13px 18px !important;
  box-sizing: border-box !important;

  background: #F0F1F7 !important;
  border: 1px solid #656EFA !important;
  border-radius: 16px 16px 16px 0 !important;
}


/* =========================================================
   COMMON MISDIAGNOSES — DARK CARD BACKGROUNDS
   ========================================================= */

#diagnosing-attr #there-timely-container .dd-card {
  position: relative !important;
  isolation: isolate;

  height: auto !important;
  min-height: 410px !important;

  border-radius: 20px !important;
  border: 0 !important;
  overflow: hidden !important;

  background-color: #101A4D !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

/* Neurologic card */
#diagnosing-attr #there-timely-container .dd-card:first-child {
  background-image:
    linear-gradient(rgba(6, 17, 57, 0.72), rgba(17, 28, 91, 0.72)),
    url("/content/dam/YOUR-DAM-PATH/neurologic-card-bg.png") !important;
}

/* Cardiac card */
#diagnosing-attr #there-timely-container .dd-card:nth-child(2) {
  background-image:
    linear-gradient(rgba(6, 17, 57, 0.72), rgba(17, 28, 91, 0.72)),
    url("/content/dam/YOUR-DAM-PATH/cardiac-card-bg.png") !important;
}

/*
 * Colour remains visible until a DAM image is supplied.
 * Once the URL is replaced, the image sits over the fallback colour.
 */
#diagnosing-attr #there-timely-container .dd-card-content {
  position: relative !important;
  z-index: 2 !important;
  height: 100% !important;
  padding: 28px 30px !important;
}

#diagnosing-attr #there-timely-container .dd-card-title {
  margin: 0 0 16px !important;
  color: #FFFFFF !important;
  font-family: "Kanit-SemiBold", "Kanit", Arial, sans-serif !important;
  font-size: 24px !important;
  line-height: 28px !important;
}

#diagnosing-attr #there-timely-container .dd-list {
  color: #FFFFFF !important;
  font-family: "Kanit-Regular", "Kanit", Arial, sans-serif !important;
  font-size: 14px !important;
  line-height: 19px !important;
}

/* Keep list bullets neat until a separate bullet asset is supplied */
#diagnosing-attr #there-timely-container .dd-list li::before {
  content: "+" !important;
  top: 0 !important;
  color: #75F2FB !important;
  font-size: 14px !important;
  line-height: inherit !important;
}


/* =========================================================
   COMMON MISDIAGNOSES — LAYOUT AND ALIGNMENT
   ========================================================= */

#diagnosing-attr #there-timely-container .misdiagnosis-container {
  max-width: 1265px !important;
  padding: 30px 16px 42px 248px !important;
}

#diagnosing-attr #there-timely-container .arrow-image {
  display: block !important;
  width: 300px !important;
  max-width: 100% !important;
  height: auto !important;

  margin: 18px auto 26px !important;
  padding: 0 !important;
}

#diagnosing-attr #there-timely-container .dd-cards {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 22px !important;
  align-items: stretch !important;
}

#diagnosing-attr #there-timely-container .dd-card {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
}


/* =========================================================
   DIAGNOSING FOOTER PROMO AREA
   ========================================================= */

#diagnosing-attr .footer-main-container {
  position: relative !important;

  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 18px !important;

  width: 100% !important;
  height: 455px !important;
  min-height: 455px !important;

  padding: 42px 24px 0 !important;
  box-sizing: border-box !important;

  background-color: #08091D !important;
  background-image:
    url("/content/dam/YOUR-DAM-PATH/footer-background.jpg") !important;
  background-repeat: no-repeat !important;
  background-position: center bottom !important;
  background-size: cover !important;

  box-shadow: none !important;
  overflow: hidden !important;
}

/*
 * Supports one or more AEM promo wrappers placed directly
 * inside the footer background container.
 */
#diagnosing-attr .footer-main-container > div:not(.diagnosis-footer),
#diagnosing-attr .footer-main-container .footer-text-container {
  flex: 0 1 360px !important;

  width: 360px !important;
  max-width: 360px !important;
  min-width: 0 !important;

  margin: 0 !important;
  box-sizing: border-box !important;
}

/* Promo card */
#diagnosing-attr .footer-text-container {
  position: relative !important;

  display: flex !important;
  align-items: center !important;

  min-height: 112px !important;
  height: 112px !important;

  padding: 16px 18px 22px 62px !important;

  background: #E2FCFD !important;
  border: 1px solid #E34AEE !important;
  border-radius: 18px 18px 18px 0 !important;

  box-shadow: 0 2px 8px rgba(0, 33, 95, 0.16) !important;
  overflow: visible !important;
}

/* First card icon */
#diagnosing-attr .footer-main-container > div:first-child .footer-text-container::before,
#diagnosing-attr .footer-main-container > .footer-text-container:first-child::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 50%;

  width: 36px;
  height: 48px;

  transform: translateY(-50%);

  background:
    url("/content/dam/YOUR-DAM-PATH/footer-person-icon.png")
    center center / contain no-repeat;
}

/* Second card icon */
#diagnosing-attr .footer-main-container > div:nth-child(2) .footer-text-container::before,
#diagnosing-attr .footer-main-container > .footer-text-container:nth-child(2)::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 50%;

  width: 38px;
  height: 46px;

  transform: translateY(-50%);

  background:
    url("/content/dam/YOUR-DAM-PATH/footer-liver-icon.png")
    center center / contain no-repeat;
}

#diagnosing-attr .footer-text-container h2 {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;

  color: #151515 !important;
  font-family: "Kanit-Regular", "Kanit", Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 17px !important;

  text-align: left !important;
}

/* Footer CTA pill */
#diagnosing-attr .footer-main-container .cta-bottom-treatment {
  position: absolute !important;
  left: 50% !important;
  bottom: -14px !important;
  top: auto !important;

  width: auto !important;
  min-width: 176px !important;
  max-width: 225px !important;
  height: auto !important;

  margin: 0 !important;
  padding: 0 !important;

  transform: translateX(-50%) !important;

  background: transparent !important;
  border: 0 !important;
}

#diagnosing-attr .footer-main-container .treatment-cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-width: 176px !important;
  min-height: 29px !important;

  margin: 0 !important;
  padding: 6px 18px !important;

  color: #FFFFFF !important;
  background: #637BFF !important;
  border-radius: 18px !important;

  font-family: "Kanit-Medium", "Kanit", Arial, sans-serif !important;
  font-size: 12px !important;
  line-height: 15px !important;

  text-align: center !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
}

/* Hide old large footer heading/subheading layout */
#diagnosing-attr .footer-main-container > .footer-subheading,
#diagnosing-attr .footer-main-container > .footer-small-text {
  display: none !important;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media screen and (max-width: 991px) {
  #diagnosing-attr #there-timely-container .misdiagnosis-container {
    padding: 28px 20px 36px !important;
  }

  #diagnosing-attr #there-timely-container .dd-cards {
    grid-template-columns: 1fr !important;
  }

  #diagnosing-attr #there-timely-container .dd-card {
    min-height: 360px !important;
  }

  #diagnosing-attr .footer-main-container {
    gap: 16px !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  #diagnosing-attr .footer-main-container > div:not(.diagnosis-footer),
  #diagnosing-attr .footer-main-container .footer-text-container {
    flex-basis: 330px !important;
    width: 330px !important;
    max-width: 330px !important;
  }
}

@media screen and (max-width: 700px) {
  #diagnosing-attr .footer-main-container {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;

    gap: 36px !important;

    height: auto !important;
    min-height: 620px !important;

    padding: 30px 16px 180px !important;
  }

  #diagnosing-attr .footer-main-container > div:not(.diagnosis-footer),
  #diagnosing-attr .footer-main-container .footer-text-container {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 360px !important;
  }

  #diagnosing-attr .footer-text-container {
    width: 100% !important;
    max-width: 360px !important;
    height: auto !important;
    min-height: 126px !important;
    padding: 18px 16px 26px 64px !important;
  }

  #diagnosing-attr #diagnosing-pn .confirm-items {
    gap: 8px !important;
  }

  #diagnosing-attr #diagnosing-pn .confirm-items .plus {
    margin: 6px auto !important;
  }
}


/* =========================================================
   DIAGNOSING ATTR — FINAL V2 FIXES
   Keep this section at the VERY END of the stylesheet.
   ========================================================= */


/* =========================================================
   1. PN FLOWCHART — SHOW ONLY ONE ARROW
   ========================================================= */

/*
 * The authored flags-arrows element currently contains several
 * arrow characters. Hide that text and show one DAM arrow.
 */
#diagnosing-attr #diagnosing-pn .flags-arrows {
  display: block !important;
  position: relative !important;

  width: 20px !important;
  height: 20px !important;
  min-height: 20px !important;

  margin: 4px auto 6px !important;
  padding: 0 !important;

  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  letter-spacing: 0 !important;
  word-spacing: 0 !important;

  background:
    url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/Icon%20algo%20arrow%20down.png")
    center center / 18px 18px no-repeat !important;

  overflow: hidden !important;
}

/* Hide any authored child arrows so only the container image remains */
#diagnosing-attr #diagnosing-pn .flags-arrows > * {
  display: none !important;
}

/*
 * Other single arrows throughout PN, CM and mixed phenotype.
 * Replace only the DAM URL.
 */
#diagnosing-attr .attr-flowchart .arrow-down,
#diagnosing-attr #diagnosing-pn .arrow-row .arrow,
#diagnosing-attr #mixed-phenotype .mp-arrow-down {
  background:
    url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/Icon%20algo%20arrow%20down.png")
    center center / contain no-repeat !important;
}


/* =========================================================
   2. PLUS SIGN
   ========================================================= */

#diagnosing-attr #diagnosing-pn .confirm-items .plus {
  background:
    url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/Multiple%20Layers%20(2).png")
    center center / contain no-repeat !important;
}


/* =========================================================
   3. BULB SIGN
   ========================================================= */

#diagnosing-attr .attr-flowchart .callout-icon,
#diagnosing-attr #diagnosing-pn .callout .bulb,
#diagnosing-attr #mixed-phenotype .mp-callout-icon,
#diagnosing-attr #there-timely-container .dd-callout-icon {
  background:
    url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/lightbulb%20icon%20gradient_1.png")
    center center / contain no-repeat !important;
}


/* =========================================================
   4. COMMON MISDIAGNOSES — MATCH REFERENCE SPACING
   ========================================================= */

#diagnosing-attr #there-timely-container .misdiagnosis-container {
  width: 100% !important;
  max-width: 1265px !important;

  margin: 0 auto !important;
  padding: 26px 16px 34px 238px !important;

  box-sizing: border-box !important;
}

/* Centre the complete heading area */
#diagnosing-attr #there-timely-container .misdiagnosis-heading,
#diagnosing-attr #there-timely-container .misdiagnosis-heading h2,
#diagnosing-attr #there-timely-container .misdiagnosis-heading .blue-text {
  width: 100% !important;
  max-width: 100% !important;

  margin-left: auto !important;
  margin-right: auto !important;

  text-align: center !important;
}

/* Main "Common misdiagnoses" heading */
#diagnosing-attr #there-timely-container .misdiagnosis-heading h2:first-child {
  margin: 0 0 20px !important;

  color: #00215F !important;
  font-family: "Kanit-SemiBold", "Kanit", Arial, sans-serif !important;
  font-size: 30px !important;
  line-height: 36px !important;
  font-weight: 600 !important;
}

/* Journey heading below it */
#diagnosing-attr #there-timely-container .misdiagnosis-heading h2:not(:first-child),
#diagnosing-attr #there-timely-container .misdiagnosis-heading .blue-text {
  margin: 0 0 12px !important;

  color: #00215F !important;
  font-family: "Kanit-SemiBold", "Kanit", Arial, sans-serif !important;
  font-size: 25px !important;
  line-height: 31px !important;
  font-weight: 600 !important;
}

/* Supporting paragraph */
#diagnosing-attr #there-timely-container .mis-text {
  width: 100% !important;
  max-width: 900px !important;

  margin: 0 auto 22px !important;
  padding: 0 !important;

  text-align: center !important;
}

/* Stats row — remove inherited oversized height */
#diagnosing-attr #there-timely-container .three-cards-container {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;

  margin: 0 auto !important;
  padding: 0 !important;
}

#diagnosing-attr #there-timely-container .three-cards-items {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;

  width: 100% !important;
  max-width: 660px !important;
  height: auto !important;
  min-height: 0 !important;

  gap: 105px !important;

  margin: 0 auto 14px !important;
  padding: 0 !important;
}

#diagnosing-attr #there-timely-container .three-card {
  flex: 0 1 260px !important;

  width: 260px !important;
  max-width: 260px !important;
  height: auto !important;
  min-height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;
}

/* Keep all statistic content compact */
#diagnosing-attr #there-timely-container .three-card-icon {
  height: auto !important;
  min-height: 0 !important;

  margin: 4px 0 0 !important;
  padding: 0 !important;
}

#diagnosing-attr #there-timely-container .three-card-icon p {
  margin: 0 !important;
  padding: 0 !important;
}

#diagnosing-attr #there-timely-container .three-card-text {
  margin: 4px auto 0 !important;
  padding: 0 !important;
}

/*
 * Gradient line directly below the statistics.
 * Removes the large blank gap visible in the current page.
 */
#diagnosing-attr #there-timely-container .arrow-image {
  display: block !important;

  width: 300px !important;
  max-width: 100% !important;
  height: auto !important;

  margin: 6px auto 22px !important;
  padding: 0 !important;
}

/* Label over the dark cards */
#diagnosing-attr #there-timely-container .dd-panel > p,
#diagnosing-attr #there-timely-container p.dd-panel-title {
  margin: 0 0 10px !important;
  text-align: left !important;
}


/* =========================================================
   5. NEUROLOGIC AND CARDIAC BACKGROUNDS
   ========================================================= */

#diagnosing-attr #there-timely-container .dd-card:first-child {
  background-color: #101A4D !important;
  background-image:
    linear-gradient(rgba(5, 14, 49, 0.32), rgba(5, 14, 49, 0.32)),
    url("/content/dam/YOUR-DAM-PATH/neurologic-card-bg.png") !important;
}

#diagnosing-attr #there-timely-container .dd-card:nth-child(2) {
  background-color: #101A4D !important;
  background-image:
    linear-gradient(rgba(5, 14, 49, 0.32), rgba(5, 14, 49, 0.32)),
    url("/content/dam/YOUR-DAM-PATH/cardiac-card-bg.png") !important;
}


/* =========================================================
   6. FOOTER — TWO CARDS SIDE BY SIDE
   ========================================================= */

#diagnosing-attr .footer-main-container {
  position: relative !important;

  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 360px)) !important;
  align-content: start !important;
  justify-content: center !important;
  align-items: start !important;

  column-gap: 18px !important;
  row-gap: 0 !important;

  width: 100% !important;
  height: 455px !important;
  min-height: 455px !important;

  margin: 0 !important;
  padding: 42px 24px 0 !important;
  box-sizing: border-box !important;

  background-color: #08091D !important;
  background-image:
    url("/content/dam/YOUR-DAM-PATH/footer-background.jpg") !important;
  background-repeat: no-repeat !important;
  background-position: center bottom !important;
  background-size: cover !important;

  box-shadow: none !important;
  overflow: hidden !important;
}

/*
 * Normalise direct AEM wrappers. Each direct wrapper becomes
 * one grid column instead of being absolutely or broadly placed.
 */
#diagnosing-attr .footer-main-container > div:not(.diagnosis-footer) {
  position: relative !important;

  display: block !important;

  width: 100% !important;
  max-width: 360px !important;
  min-width: 0 !important;

  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* Card itself */
#diagnosing-attr .footer-main-container .footer-text-container {
  position: relative !important;
  left: auto !important;
  top: auto !important;

  display: flex !important;
  align-items: center !important;

  width: 100% !important;
  max-width: 360px !important;
  height: 112px !important;
  min-height: 112px !important;

  margin: 0 !important;
  padding: 16px 18px 22px 62px !important;
  box-sizing: border-box !important;

  background: #E2FCFD !important;
  border: 1px solid #BFC8E6 !important;
  border-radius: 18px 18px 18px 0 !important;

  opacity: 1 !important;
  overflow: visible !important;
  box-shadow: 0 2px 8px rgba(0, 33, 95, 0.16) !important;
}

/* Remove broad inherited widths */
#diagnosing-attr .footer-main-container .footer-text-container h2 {
  width: 100% !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;

  color: #151515 !important;
  font-family: "Kanit-Regular", "Kanit", Arial, sans-serif !important;
  font-size: 14px !important;
  line-height: 17px !important;
  font-weight: 400 !important;

  text-align: left !important;
}

/* Icon on first card */
#diagnosing-attr .footer-main-container > div:nth-child(1) .footer-text-container::before {
  content: "";
  position: absolute;

  left: 16px;
  top: 50%;

  width: 36px;
  height: 48px;

  transform: translateY(-50%);

  background:
    url("/content/dam/YOUR-DAM-PATH/footer-person-icon.png")
    center center / contain no-repeat;
}

/* Icon on second card */
#diagnosing-attr .footer-main-container > div:nth-child(2) .footer-text-container::before {
  content: "";
  position: absolute;

  left: 16px;
  top: 50%;

  width: 38px;
  height: 46px;

  transform: translateY(-50%);

  background:
    url("/content/dam/YOUR-DAM-PATH/footer-liver-icon.png")
    center center / contain no-repeat;
}

/* CTA wrapper */
#diagnosing-attr .footer-main-container .cta-bottom-treatment {
  position: absolute !important;

  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: -14px !important;

  width: auto !important;
  max-width: none !important;
  height: auto !important;

  margin: 0 !important;
  padding: 0 !important;

  transform: translateX(-50%) !important;

  background: transparent !important;
  border: 0 !important;
}

/* CTA pill */
#diagnosing-attr .footer-main-container .treatment-cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-width: 176px !important;
  min-height: 29px !important;

  margin: 0 !important;
  padding: 6px 18px !important;

  color: #FFFFFF !important;
  background: #637BFF !important;
  border-radius: 18px !important;

  font-family: "Kanit-Medium", "Kanit", Arial, sans-serif !important;
  font-size: 12px !important;
  line-height: 15px !important;

  text-align: center !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

/* Hide old standalone footer heading content */
#diagnosing-attr .footer-main-container > .footer-subheading,
#diagnosing-attr .footer-main-container > .footer-small-text,
#diagnosing-attr .footer-main-container > .footer-button {
  display: none !important;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media screen and (max-width: 991px) {
  #diagnosing-attr #there-timely-container .misdiagnosis-container {
    padding: 28px 20px 36px !important;
  }

  #diagnosing-attr #there-timely-container .three-cards-items {
    gap: 55px !important;
  }

  #diagnosing-attr .footer-main-container {
    grid-template-columns: repeat(2, minmax(0, 330px)) !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  #diagnosing-attr .footer-main-container > div:not(.diagnosis-footer),
  #diagnosing-attr .footer-main-container .footer-text-container {
    max-width: 330px !important;
  }
}

@media screen and (max-width: 700px) {
  #diagnosing-attr #there-timely-container .three-cards-items {
    flex-direction: column !important;
    align-items: center !important;
    gap: 24px !important;
  }

  #diagnosing-attr .footer-main-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;

    gap: 36px !important;

    height: auto !important;
    min-height: 620px !important;

    padding: 30px 16px 180px !important;
  }

  #diagnosing-attr .footer-main-container > div:not(.diagnosis-footer),
  #diagnosing-attr .footer-main-container .footer-text-container {
    width: 100% !important;
    max-width: 360px !important;
  }

  #diagnosing-attr .footer-main-container .footer-text-container {
    height: auto !important;
    min-height: 126px !important;
    padding: 18px 16px 26px 64px !important;
  }

  #diagnosing-attr .footer-main-container .treatment-cta {
    white-space: normal !important;
  }
}


/* =========================================================
   DIAGNOSING ATTR — FINAL V3 FIXES
   1) Reduce gap above divider
   2) Center Common misdiagnoses heading
   3) Fix footer promo boxes using the supplied outer HTML
   Keep this block at the VERY END of the stylesheet.
   ========================================================= */


/* =========================================================
   COMMON MISDIAGNOSES — FINAL SPACING
   ========================================================= */

#diagnosing-attr #there-timely-container .misdiagnosis-container {
  padding-top: 22px !important;
}

/* Centre both headings */
#diagnosing-attr #there-timely-container .misdiagnosis-heading,
#diagnosing-attr #there-timely-container .misdiagnosis-heading h2,
#diagnosing-attr #there-timely-container .misdiagnosis-heading p,
#diagnosing-attr #there-timely-container .misdiagnosis-heading .blue-text {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

/* Main Common misdiagnoses title */
#diagnosing-attr #there-timely-container .misdiagnosis-heading h2:first-child {
  margin-top: 0 !important;
  margin-bottom: 16px !important;
  text-align: center !important;
}

/* Journey heading */
#diagnosing-attr #there-timely-container .misdiagnosis-heading h2:not(:first-child),
#diagnosing-attr #there-timely-container .misdiagnosis-heading .blue-text {
  margin-top: 0 !important;
  margin-bottom: 10px !important;
  text-align: center !important;
}

/* Supporting paragraph */
#diagnosing-attr #there-timely-container .mis-text {
  margin-bottom: 16px !important;
  text-align: center !important;
}

/* Statistics row */
#diagnosing-attr #there-timely-container .three-cards-container {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

#diagnosing-attr #there-timely-container .three-cards-items {
  margin-bottom: 4px !important;
  padding-bottom: 0 !important;
}

/* Reduce space between final statistic and divider line */
#diagnosing-attr #there-timely-container .arrow-image {
  margin-top: 0 !important;
  margin-bottom: 16px !important;
}

/* Panel label under divider */
#diagnosing-attr #there-timely-container .dd-panel > p,
#diagnosing-attr #there-timely-container p.dd-panel-title {
  margin-top: 0 !important;
  margin-bottom: 10px !important;
}


/* =========================================================
   FOOTER PROMO BOXES
   HTML STRUCTURE:
   .sec3-mainbg
     .patient-box > .image-shadow > .border-box
     div > .border-box
   ========================================================= */

#diagnosing-attr .sec3-mainbg {
  position: relative !important;

  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 18px !important;

  width: 100% !important;
  height: 455px !important;
  min-height: 455px !important;

  margin: 0 !important;
  padding: 38px 24px 0 !important;
  box-sizing: border-box !important;

  background-color: #08091D !important;
  background-image:
    url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/Internal%20Footer%20image_desktop.jpg") !important;
  background-repeat: no-repeat !important;
  background-position: center bottom !important;
  background-size: cover !important;

  overflow: hidden !important;
}

/* Two outer card wrappers */
#diagnosing-attr .sec3-mainbg > .patient-box,
#diagnosing-attr .sec3-mainbg > div:not(.patient-box) {
  flex: 0 1 360px !important;

  width: 360px !important;
  max-width: 360px !important;
  min-width: 0 !important;

  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* Reset old patient-box and shadow positioning */
#diagnosing-attr .sec3-mainbg .patient-box {
  position: static !important;
  z-index: auto !important;
}

#diagnosing-attr .sec3-mainbg .image-shadow {
  display: block !important;

  width: 100% !important;
  height: auto !important;

  margin: 0 !important;
  padding: 0 !important;

  position: static !important;
  z-index: auto !important;

  background: none !important;
}

/* Individual footer card */
#diagnosing-attr .sec3-mainbg .border-box {
  position: relative !important;
  left: auto !important;
  top: auto !important;

  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;

  width: 100% !important;
  max-width: 360px !important;
  height: 112px !important;
  min-height: 112px !important;

  margin: 0 !important;
  padding: 15px 18px 22px 62px !important;
  box-sizing: border-box !important;

  background: #E2FCFD !important;
  border: 1px solid #BFC8E6 !important;
  border-radius: 18px 18px 18px 0 !important;

  text-align: left !important;
  overflow: visible !important;

  box-shadow: 0 2px 8px rgba(0, 33, 95, 0.16) !important;
}

/* Remove old pseudo-border */
#diagnosing-attr .sec3-mainbg .border-box::before {
  content: none !important;
  display: none !important;
  visibility: hidden !important;
}

/* Main visible text */
#diagnosing-attr .sec3-mainbg .smallbox-title {
  display: block !important;

  width: 100% !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;

  color: #151515 !important;
  font-family: "Kanit-Regular", "Kanit", Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 17px !important;

  text-align: left !important;
  overflow-wrap: break-word !important;
}

/* Hide duplicate paragraph */
#diagnosing-attr .sec3-mainbg .smallbox-txt {
  display: none !important;
}

/* Superscript */
#diagnosing-attr .sec3-mainbg .smallbox-title sup {
  position: relative !important;
  top: -0.35em !important;
  font-size: 60% !important;
  line-height: 0 !important;
}

/* First card icon */
#diagnosing-attr .sec3-mainbg > .patient-box .smallbox-title::before {
  content: "";
  position: absolute;

  left: 16px;
  top: 50%;

  width: 36px;
  height: 50px;

  transform: translateY(-50%);

  background:
    url("/content/dam/YOUR-DAM-PATH/footer-person-icon.png")
    center center / contain no-repeat;
}

/* Second card icon */
#diagnosing-attr .sec3-mainbg > div:not(.patient-box) .smallbox-title::before {
  content: "";
  position: absolute;

  left: 16px;
  top: 50%;

  width: 38px;
  height: 46px;

  transform: translateY(-50%);

  background:
    url("/content/dam/YOUR-DAM-PATH/footer-liver-icon.png")
    center center / contain no-repeat;
}

/*
 * Position the icon relative to the card instead of the paragraph.
 * The paragraph receives left padding through the card.
 */
#diagnosing-attr .sec3-mainbg .smallbox-title {
  position: static !important;
}

/* CTA wrapper */
#diagnosing-attr .sec3-mainbg .cta-bottom-home {
  position: absolute !important;

  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: -14px !important;

  width: auto !important;
  max-width: none !important;
  height: auto !important;

  margin: 0 !important;
  padding: 0 !important;

  transform: translateX(-50%) !important;
  z-index: 3 !important;
}

/* CTA pill */
#diagnosing-attr .sec3-mainbg .middle-bottom-cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-width: 190px !important;
  min-height: 29px !important;

  margin: 0 !important;
  padding: 6px 18px !important;
  box-sizing: border-box !important;

  color: #FFFFFF !important;
  background: #637BFF !important;
  border: 0 !important;
  border-radius: 18px !important;

  font-family: "Kanit-Medium", "Kanit", Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 15px !important;

  text-align: center !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

/* First CTA is longer */
#diagnosing-attr .sec3-mainbg .home-cta-1 .middle-bottom-cta {
  min-width: 245px !important;
}

/* Second CTA */
#diagnosing-attr .sec3-mainbg .home-cta-2 .middle-bottom-cta {
  min-width: 175px !important;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media screen and (max-width: 991px) {
  #diagnosing-attr .sec3-mainbg {
    gap: 16px !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  #diagnosing-attr .sec3-mainbg > .patient-box,
  #diagnosing-attr .sec3-mainbg > div:not(.patient-box) {
    flex-basis: 330px !important;
    width: 330px !important;
    max-width: 330px !important;
  }

  #diagnosing-attr .sec3-mainbg .border-box {
    max-width: 330px !important;
  }
}

@media screen and (max-width: 700px) {
  #diagnosing-attr #there-timely-container .arrow-image {
    margin-top: 4px !important;
    margin-bottom: 14px !important;
  }

  #diagnosing-attr .sec3-mainbg {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;

    gap: 36px !important;

    height: auto !important;
    min-height: 620px !important;

    padding: 30px 16px 180px !important;
  }

  #diagnosing-attr .sec3-mainbg > .patient-box,
  #diagnosing-attr .sec3-mainbg > div:not(.patient-box) {
    flex: 0 0 auto !important;

    width: 100% !important;
    max-width: 360px !important;
  }

  #diagnosing-attr .sec3-mainbg .border-box {
    width: 100% !important;
    max-width: 360px !important;

    height: auto !important;
    min-height: 126px !important;

    padding: 18px 16px 26px 64px !important;
  }

  #diagnosing-attr .sec3-mainbg .middle-bottom-cta {
    white-space: normal !important;
  }
}


/* =========================================================
   DIAGNOSING ATTR — FINAL FOOTER CARD STYLE UPDATE
   Keep this block at the VERY END of the stylesheet.
   ========================================================= */

/* Footer promo cards */
#diagnosing-attr .sec3-mainbg .border-box {
  background: #DDE0EE !important;
  border: 1px solid #656EFA !important;
  border-radius: 18px 18px 18px 0 !important;
}

/* Footer card text */
#diagnosing-attr .sec3-mainbg .smallbox-title {
  color: #151515 !important;
  font-family: "Kanit-Regular", "Kanit", Arial, sans-serif !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 24px !important;
  text-align: left !important;
}

/* Footer buttons */
#diagnosing-attr .sec3-mainbg .middle-bottom-cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-height: 42px !important;
  padding: 0 22px !important;

  background: #656EFA !important;
  color: #FFFFFF !important;

  border: 0 !important;
  border-radius: 21px !important;

  font-family: "Kanit-SemiBold", "Kanit", Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 20px !important;

  text-align: center !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
}

/* Button widths */
#diagnosing-attr .sec3-mainbg .home-cta-1 .middle-bottom-cta {
  min-width: 290px !important;
}

#diagnosing-attr .sec3-mainbg .home-cta-2 .middle-bottom-cta {
  min-width: 220px !important;
}

/* Place button halfway over the card edge */
#diagnosing-attr .sec3-mainbg .cta-bottom-home {
  bottom: -21px !important;
}

@media screen and (max-width: 700px) {
  #diagnosing-attr .sec3-mainbg .smallbox-title {
    font-size: 17px !important;
    line-height: 22px !important;
  }

  #diagnosing-attr .sec3-mainbg .middle-bottom-cta {
    min-width: 0 !important;
    width: auto !important;
    max-width: 95% !important;
    padding: 0 18px !important;
    white-space: normal !important;
  }
}


/* =========================================================
   FOOTER PROMO CARDS — OVERFLOW AND BUTTON SIZE FIX
   Keep this block at the VERY END of the stylesheet.
   ========================================================= */

#diagnosing-attr .sec3-mainbg {
  align-items: flex-start !important;
  padding-top: 38px !important;
}

/* Give the 18px text enough vertical room */
#diagnosing-attr .sec3-mainbg .border-box {
  height: 150px !important;
  min-height: 150px !important;
  padding: 18px 22px 34px 62px !important;
  overflow: visible !important;
}

/* Keep text inside the card */
#diagnosing-attr .sec3-mainbg .smallbox-title {
  display: block !important;
  width: 100% !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;

  font-size: 18px !important;
  line-height: 24px !important;

  overflow: visible !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
}

/* Keep the CTA centred below the card */
#diagnosing-attr .sec3-mainbg .cta-bottom-home {
  left: 50% !important;
  bottom: -21px !important;
  transform: translateX(-50%) !important;
}

/* Prevent CTA from becoming wider than its card */
#diagnosing-attr .sec3-mainbg .middle-bottom-cta {
  width: auto !important;
  max-width: calc(100% - 24px) !important;
  min-height: 42px !important;

  padding: 0 18px !important;

  font-size: 16px !important;
  line-height: 20px !important;

  white-space: nowrap !important;
}

/* Long first CTA */
#diagnosing-attr .sec3-mainbg .home-cta-1 .middle-bottom-cta {
  min-width: 0 !important;
  width: 320px !important;
}

/* Short second CTA */
#diagnosing-attr .sec3-mainbg .home-cta-2 .middle-bottom-cta {
  min-width: 0 !important;
  width: 240px !important;
}

/* Slightly more breathing room between both cards */
#diagnosing-attr .sec3-mainbg {
  gap: 24px !important;
}

@media screen and (max-width: 991px) {
  #diagnosing-attr .sec3-mainbg .border-box {
    height: 160px !important;
    min-height: 160px !important;
    padding-right: 18px !important;
  }

  #diagnosing-attr .sec3-mainbg .home-cta-1 .middle-bottom-cta {
    width: 290px !important;
  }

  #diagnosing-attr .sec3-mainbg .home-cta-2 .middle-bottom-cta {
    width: 220px !important;
  }
}

@media screen and (max-width: 700px) {
  #diagnosing-attr .sec3-mainbg .border-box {
    height: auto !important;
    min-height: 165px !important;
    padding: 20px 18px 38px 64px !important;
  }

  #diagnosing-attr .sec3-mainbg .smallbox-title {
    font-size: 17px !important;
    line-height: 22px !important;
  }

  #diagnosing-attr .sec3-mainbg .middle-bottom-cta,
  #diagnosing-attr .sec3-mainbg .home-cta-1 .middle-bottom-cta,
  #diagnosing-attr .sec3-mainbg .home-cta-2 .middle-bottom-cta {
    width: auto !important;
    max-width: calc(100% - 20px) !important;
    padding: 0 16px !important;
    white-space: normal !important;
  }
}


/* =========================================================
   FOOTER PROMO CARDS — EXACT REFERENCE PROPORTIONS
   This block intentionally overrides the later 18px/16px sizing.
   Keep this block at the VERY END of the stylesheet.
   ========================================================= */

#diagnosing-attr .sec3-mainbg {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 18px !important;

  height: 457px !important;
  min-height: 457px !important;

  padding: 38px 24px 0 !important;
  box-sizing: border-box !important;
}

/* Two equal card wrappers */
#diagnosing-attr .sec3-mainbg > .patient-box,
#diagnosing-attr .sec3-mainbg > div:not(.patient-box) {
  flex: 0 0 360px !important;
  width: 360px !important;
  max-width: 360px !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Reference-sized card */
#diagnosing-attr .sec3-mainbg .border-box {
  position: relative !important;

  width: 360px !important;
  max-width: 360px !important;
  height: 112px !important;
  min-height: 112px !important;

  margin: 0 !important;
  padding: 14px 18px 20px 62px !important;
  box-sizing: border-box !important;

  display: flex !important;
  align-items: center !important;

  background: #DDE0EE !important;
  border: 1px solid #656EFA !important;
  border-radius: 18px 18px 18px 0 !important;

  overflow: visible !important;
}

/* Reference typography — 18px cannot fit in the reference card height */
#diagnosing-attr .sec3-mainbg .smallbox-title {
  width: 100% !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;

  color: #151515 !important;
  font-family: "Kanit-Regular", "Kanit", Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 17px !important;

  text-align: left !important;
  overflow: visible !important;
}

/* Hide duplicate text */
#diagnosing-attr .sec3-mainbg .smallbox-txt {
  display: none !important;
}

/* CTA wrapper exactly under the card */
#diagnosing-attr .sec3-mainbg .cta-bottom-home {
  position: absolute !important;
  left: 50% !important;
  bottom: -14px !important;
  transform: translateX(-50%) !important;

  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Reference-sized pill */
#diagnosing-attr .sec3-mainbg .middle-bottom-cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: auto !important;
  min-height: 29px !important;
  height: 29px !important;

  margin: 0 !important;
  padding: 0 16px !important;
  box-sizing: border-box !important;

  background: #656EFA !important;
  color: #FFFFFF !important;
  border: 0 !important;
  border-radius: 21px !important;

  font-family: "Kanit-SemiBold", "Kanit", Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 15px !important;

  white-space: nowrap !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
}

/* Button widths matching the reference */
#diagnosing-attr .sec3-mainbg .home-cta-1 .middle-bottom-cta {
  min-width: 230px !important;
}

#diagnosing-attr .sec3-mainbg .home-cta-2 .middle-bottom-cta {
  min-width: 170px !important;
}

@media screen and (max-width: 991px) {
  #diagnosing-attr .sec3-mainbg {
    gap: 16px !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  #diagnosing-attr .sec3-mainbg > .patient-box,
  #diagnosing-attr .sec3-mainbg > div:not(.patient-box),
  #diagnosing-attr .sec3-mainbg .border-box {
    flex-basis: 330px !important;
    width: 330px !important;
    max-width: 330px !important;
  }

  #diagnosing-attr .sec3-mainbg .smallbox-title {
    font-size: 13px !important;
    line-height: 16px !important;
  }
}

@media screen and (max-width: 700px) {
  #diagnosing-attr .sec3-mainbg {
    flex-direction: column !important;
    align-items: center !important;
    gap: 36px !important;

    height: auto !important;
    min-height: 620px !important;

    padding: 30px 16px 180px !important;
  }

  #diagnosing-attr .sec3-mainbg > .patient-box,
  #diagnosing-attr .sec3-mainbg > div:not(.patient-box),
  #diagnosing-attr .sec3-mainbg .border-box {
    width: 100% !important;
    max-width: 360px !important;
  }

  #diagnosing-attr .sec3-mainbg .border-box {
    height: auto !important;
    min-height: 126px !important;
  }

  #diagnosing-attr .sec3-mainbg .smallbox-title {
    font-size: 14px !important;
    line-height: 18px !important;
  }

  #diagnosing-attr .sec3-mainbg .middle-bottom-cta {
    height: auto !important;
    min-height: 32px !important;
    white-space: normal !important;
  }
}


@media only screen and (min-width: 992px) {

  #diagnosing-attr #text-8691be1b74 .sec3-mainbg {
    position: relative;
  }

  #diagnosing-attr #text-8691be1b74 .sec3-mainbg > .patient-box,
  #diagnosing-attr #text-8691be1b74 .sec3-mainbg > div:nth-child(2) {
    transform: translateY(-25px);
  }

  #diagnosing-attr #text-8691be1b74 .cta-bottom-home {
    position: relative;
    left: 18px;
  }
}


/* ==========================================================
   SECTION 3 CTA ALIGNMENT — FINAL UPDATE
   Keep this block at the VERY END of the stylesheet.
   ========================================================== */

#text-8691be1b74 .border-box {
  position: relative !important;
  overflow: visible !important;
  padding-bottom: 38px !important;
}

#text-8691be1b74 .cta-bottom-home {
  position: absolute !important;
  left: 50% !important;
  bottom: -20px !important;
  transform: translateX(-50%) !important;

  display: flex !important;
  justify-content: center !important;
  align-items: center !important;

  width: auto !important;
  margin: 0 !important;
}

#text-8691be1b74 .middle-bottom-cta {
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;

  margin: 0 !important;
  padding: 0 26px !important;

  min-width: 260px !important;
  height: 42px !important;

  background: #656EFA !important;
  border: 1px solid #656EFA !important;
  border-radius: 21px !important;

  color: #FFFFFF !important;
  font-family: "Kanit-SemiBold", "Kanit", Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1 !important;

  text-align: center !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

#text-8691be1b74 .home-cta-2 .middle-bottom-cta {
  min-width: 210px !important;
}

@media screen and (max-width: 700px) {
  #text-8691be1b74 .middle-bottom-cta {
    min-width: 0 !important;
    width: auto !important;
    max-width: calc(100% - 20px) !important;
    padding: 0 18px !important;
    white-space: normal !important;
  }

  #text-8691be1b74 .home-cta-2 .middle-bottom-cta {
    min-width: 0 !important;
  }
}

#diagnosing-attr #there-timely-container p.section-title{
    text-align: center;
}


/* =========================================================
   DIAGNOSING ATTR
   RESPONSIVE SIDEBAR / MOBILE "ON THIS PAGE" DROPDOWN

   Mobile and tablet: 0–991px
   Desktop and iPad Pro landscape: 992px+
   Keep this section at the VERY END of the stylesheet.
   ========================================================= */


/* =========================================================
   SHARED
   ========================================================= */

#diagnosing-attr #diagnosing-pn,
#diagnosing-attr #diagnosing-pn * {
  box-sizing: border-box;
}

#diagnosing-attr #diagnosing-pn
.diagnosis-sidebar-placeholder {
  display: none;
  flex: 0 0 auto;
}


/* =========================================================
   DESKTOP / LAPTOP / IPAD PRO: 992PX AND ABOVE
   ========================================================= */

@media screen and (min-width: 992px) {

  /* Two-column layout: sidebar + flowchart */
  #diagnosing-attr #diagnosing-pn {
    display: grid !important;
    grid-template-columns: 224px minmax(0, 1fr) !important;
    column-gap: 24px !important;
    align-items: start !important;

    width: 100% !important;
    max-width: 1265px !important;

    margin-right: auto !important;
    margin-left: auto !important;
    padding-bottom: 50px !important;
  }

  /* Sidebar AEM text wrapper */
  #diagnosing-attr #diagnosing-pn
  > div.text:has(.aboutattr-cards-container) {
    grid-column: 1 !important;
    grid-row: 1 !important;

    width: 224px !important;
    min-width: 224px !important;
    max-width: 224px !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    border: 0 !important;
  }

  /* Main flowchart AEM text wrapper */
  #diagnosing-attr #diagnosing-pn
  > div.text:has(#hattrpn-flowchart) {
    grid-column: 2 !important;
    grid-row: 1 !important;

    width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding-right: 16px !important;
  }

  #diagnosing-attr #diagnosing-pn
  .aboutattr-cards-container {
    width: 224px !important;
    min-width: 224px !important;
    max-width: 224px !important;

    margin: 0 !important;
  }

  /* Desktop sidebar */
  #diagnosing-attr #diagnosing-pn
  .steps-card {
    display: flex !important;
    flex-direction: column !important;

    width: 224px !important;
    min-width: 224px !important;
    max-width: 224px !important;

    height: 390px !important;

    margin: 0 !important;
    padding: 24px 20px !important;

    background: #E9EBF2 !important;
    border: 0 !important;
    border-radius: 0 0 25px 0 !important;

    /*
     * JS controls fixed positioning.
     * Do not use CSS position: sticky here.
     */
    position: relative;
    top: auto;
    left: auto;

    overflow-x: hidden;
    scrollbar-width: thin;
  }

  #diagnosing-attr #diagnosing-pn
  .steps-card-icon {
    display: block !important;
    width: 100% !important;
  }

  /* Desktop heading */
  #diagnosing-attr #diagnosing-pn
  .steps-card-icon:first-child {
    position: relative;

    margin: 0 0 16px !important;
    padding: 0 !important;

    font-family: "Kanit-Bold",
      "Kanit",
      Arial,
      sans-serif !important;

    font-size: 21px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    letter-spacing: 0.5px !important;

    text-transform: uppercase;
    cursor: default;
  }

  /* No dropdown arrow on desktop */
  #diagnosing-attr #diagnosing-pn
  .steps-card-icon:first-child::after {
    display: none !important;
  }

  /* Hide authored spacer items */
  #diagnosing-attr #diagnosing-pn
  .steps-card-icon:nth-child(even) {
    display: none !important;
  }

  /* Desktop navigation items */
  #diagnosing-attr #diagnosing-pn
  .steps-card-icon:nth-child(odd):not(:first-child) {
    display: block !important;

    margin: 0 0 14px !important;
    padding: 0 !important;

    font-size: 18px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;

    text-align: left !important;
    white-space: normal !important;
    cursor: pointer;
  }

  #diagnosing-attr #diagnosing-pn
  .steps-card-icon:last-child {
    margin-bottom: 0 !important;
  }
}


/* =========================================================
   MOBILE + TABLET: UP TO 991PX
   ========================================================= */

@media screen and (max-width: 991px) {

  /*
   * Convert the desktop grid to one column.
   * Dropdown comes first, page content comes second.
   */
  #diagnosing-attr #diagnosing-pn {
    display: flex !important;
    flex-direction: column !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 16px 40px !important;

    gap: 0 !important;
  }

  /* Sidebar wrapper comes first */
  #diagnosing-attr #diagnosing-pn
  > div.text:has(.aboutattr-cards-container) {
    order: 1 !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 0 24px !important;
    padding: 0 !important;

    background: transparent !important;
    border: 0 !important;
  }

  /* Flowchart comes below dropdown */
  #diagnosing-attr #diagnosing-pn
  > div.text:has(#hattrpn-flowchart) {
    order: 2 !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  #diagnosing-attr #diagnosing-pn
  .aboutattr-cards-container,
  #diagnosing-attr #diagnosing-pn
  .diagnosis-cards-items {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  /*
   * Remove all desktop sticky/fixed behaviour.
   * Important because the JavaScript adds inline styles on desktop.
   */
  #diagnosing-attr #diagnosing-pn
  .steps-card {
    position: static !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;

    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;

    z-index: auto !important;
  }

  #diagnosing-attr #diagnosing-pn
  .diagnosis-sidebar-placeholder {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  /*
   * Mobile "ON THIS PAGE" bar
   */
  #diagnosing-attr #diagnosing-pn
  .steps-card-icon:first-child {
    position: relative;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    width: 100% !important;
    min-height: 52px !important;

    margin: 0 !important;
    padding: 13px 48px 13px 16px !important;

    background: #E9EBF2 !important;
    border: 0 !important;
    border-radius: 12px !important;

    color: #00215F !important;

    font-family: "Kanit-Bold",
      "Kanit",
      Arial,
      sans-serif !important;

    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 24px !important;
    letter-spacing: 0 !important;

    text-align: left !important;
    text-transform: uppercase !important;

    white-space: normal !important;
    cursor: pointer !important;

    -webkit-tap-highlight-color: transparent;
  }

  /*
   * Dropdown chevron.
   * No additional HTML or image is required.
   */
  #diagnosing-attr #diagnosing-pn
  .steps-card-icon:first-child::after {
    content: "";

    position: absolute;
    top: 50%;
    right: 20px;

    width: 11px;
    height: 11px;

    border-right: 3px solid #00215F;
    border-bottom: 3px solid #00215F;

    transform:
      translateY(-65%)
      rotate(45deg);

    transform-origin: center;
    transition: transform 0.25s ease;
  }

  /*
   * Rotate arrow when dropdown is open.
   */
  #diagnosing-attr #diagnosing-pn
  .steps-card.mobile-nav-open
  .steps-card-icon:first-child::after {
    transform:
      translateY(-35%)
      rotate(225deg);
  }

  /*
   * Hide all authored spacer divs.
   */
  #diagnosing-attr #diagnosing-pn
  .steps-card-icon:nth-child(even) {
    display: none !important;
  }

  /*
   * Hide dropdown options by default.
   */
  #diagnosing-attr #diagnosing-pn
  .steps-card-icon:nth-child(odd):not(:first-child) {
    display: none !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 13px 16px !important;

    background: #FFFFFF !important;
    border-bottom: 1px solid #D6D9E4 !important;

    color: #00215F !important;

    font-family: "Kanit-Medium",
      "Kanit",
      Arial,
      sans-serif !important;

    font-size: 17px !important;
    font-weight: 500 !important;
    line-height: 23px !important;

    text-align: left !important;
    white-space: normal !important;
    cursor: pointer !important;
  }

  /*
   * Show options when the header is clicked.
   */
  #diagnosing-attr #diagnosing-pn
  .steps-card.mobile-nav-open
  .steps-card-icon:nth-child(odd):not(:first-child) {
    display: block !important;
  }

  /*
   * Dropdown panel styling.
   */
  #diagnosing-attr #diagnosing-pn
  .steps-card.mobile-nav-open {
    background: #FFFFFF !important;
    border-radius: 12px !important;

    box-shadow:
      0 8px 18px
      rgba(0, 33, 95, 0.12) !important;

    overflow: hidden !important;
  }

  #diagnosing-attr #diagnosing-pn
  .steps-card.mobile-nav-open
  .steps-card-icon:first-child {
    border-radius: 12px 12px 0 0 !important;
  }

  #diagnosing-attr #diagnosing-pn
  .steps-card.mobile-nav-open
  .steps-card-icon:last-child {
    border-bottom: 0 !important;
  }

  /*
   * Flowchart title and content width.
   */
  #diagnosing-attr #diagnosing-pn
  #hattrpn-flowchart,
  #diagnosing-attr #diagnosing-pn
  .sheet {
    width: 100% !important;
    max-width: 100% !important;

    margin-right: auto !important;
    margin-left: auto !important;
  }
}


/* =========================================================
   SMALL MOBILE REFINEMENT
   ========================================================= */

@media screen and (max-width: 480px) {

  #diagnosing-attr #diagnosing-pn {
    padding-right: 16px !important;
    padding-left: 16px !important;
  }

  #diagnosing-attr #diagnosing-pn
  .steps-card-icon:first-child {
    min-height: 48px !important;

    padding-top: 11px !important;
    padding-bottom: 11px !important;

    font-size: 17px !important;
  }

  #diagnosing-attr #diagnosing-pn
  .steps-card-icon:nth-child(odd):not(:first-child) {
    padding: 12px 14px !important;
    font-size: 16px !important;
    line-height: 22px !important;
  }
}

/* =========================================================
   FINAL MOBILE/TABLET "ON THIS PAGE" WIDTH FIX
   Keep this block as the LAST CSS in the stylesheet.
   The older .diagnosis-cards-container width:80% and
   .steps-card width:68% rules are both overridden here.
   ========================================================= */

@media screen and (max-width: 991px) {

  /* Full mobile/tablet section width */
  #diagnosing-attr #diagnosing-pn {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 clamp(12px, 3vw, 28px) 40px !important;
    box-sizing: border-box !important;
  }

  /* AEM text wrapper containing the navigation */
  #diagnosing-attr #diagnosing-pn
  > div.text:has(.aboutattr-cards-container) {
    order: 1 !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 0 24px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  /*
   * Reset every wrapper that was reducing the width:
   * .aboutattr-cards-container
   * .diagnosing-importance-container
   * .diagnosis-cards-container
   * .diagnosis-cards-items
   */
  #diagnosing-attr #diagnosing-pn .aboutattr-cards-container,
  #diagnosing-attr #diagnosing-pn .diagnosing-importance-container,
  #diagnosing-attr #diagnosing-pn .diagnosis-cards-container,
  #diagnosing-attr #diagnosing-pn .diagnosis-cards-items {
    position: static !important;
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    height: auto !important;
    min-height: 0 !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;

    box-sizing: border-box !important;
  }

  /* Remove old gradient pseudo-border from this mobile nav wrapper */
  #diagnosing-attr #diagnosing-pn
  .diagnosing-importance-container::before,
  #diagnosing-attr #diagnosing-pn
  .diagnosis-cards-container::before {
    display: none !important;
    content: none !important;
  }

  /* Full responsive dropdown container */
  #diagnosing-attr #diagnosing-pn .steps-card {
    position: static !important;
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;
    z-index: auto !important;

    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;

    box-sizing: border-box !important;
  }

  /* Visible ON THIS PAGE bar */
  #diagnosing-attr #diagnosing-pn
  .steps-card > .steps-card-icon:first-child {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    min-height: 64px !important;

    margin: 0 !important;
    padding: 16px 64px 16px 24px !important;

    background: #E9EBF2 !important;
    border: 0 !important;
    border-radius: 18px !important;

    box-sizing: border-box !important;
  }

  #diagnosing-attr #diagnosing-pn
  .steps-card > .steps-card-icon:first-child::after {
    right: 24px !important;
  }

  /* Open dropdown should remain full width */
  #diagnosing-attr #diagnosing-pn
  .steps-card.mobile-nav-open {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    border-radius: 18px !important;
  }

  #diagnosing-attr #diagnosing-pn
  .steps-card.mobile-nav-open
  > .steps-card-icon:nth-child(odd):not(:first-child) {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

@media screen and (max-width: 480px) {

  #diagnosing-attr #diagnosing-pn {
    padding-right: 12px !important;
    padding-left: 12px !important;
  }

  #diagnosing-attr #diagnosing-pn
  .steps-card > .steps-card-icon:first-child {
    min-height: 56px !important;
    padding: 13px 54px 13px 20px !important;
  }

  #diagnosing-attr #diagnosing-pn
  .steps-card > .steps-card-icon:first-child::after {
    right: 20px !important;
  }
}

/* =========================================================
   FINAL VIEWPORT-WIDTH FIX — ON THIS PAGE
   ========================================================= */

@media screen and (max-width: 991px) {

  /* Break the navigation wrapper out of any narrow parent */
  #diagnosing-attr #diagnosing-pn
  > div.text:has(.aboutattr-cards-container) {
    width: calc(100vw - 32px) !important;
    max-width: calc(100vw - 32px) !important;
    min-width: 0 !important;

    margin-left: calc(50% - 50vw + 16px) !important;
    margin-right: 16px !important;
    padding: 0 !important;
  }

  #diagnosing-attr #diagnosing-pn .aboutattr-cards-container,
  #diagnosing-attr #diagnosing-pn .diagnosing-importance-container,
  #diagnosing-attr #diagnosing-pn .diagnosis-cards-container,
  #diagnosing-attr #diagnosing-pn .diagnosis-cards-items,
  #diagnosing-attr #diagnosing-pn .steps-card {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    left: auto !important;
    right: auto !important;

    box-sizing: border-box !important;
  }

  /* Actual visible dropdown */
  #diagnosing-attr #diagnosing-pn
  .steps-card .steps-card-icon:first-child {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;

    min-height: 64px !important;
    margin: 0 !important;
    padding: 16px 64px 16px 24px !important;

    box-sizing: border-box !important;
    border-radius: 18px !important;
  }

  #diagnosing-attr #diagnosing-pn
  .steps-card .steps-card-icon:first-child::after {
    right: 24px !important;
  }
}


@media screen and (max-width: 991px) {
  #diagnosing-attr #diagnosing-pn
  .steps-card > .steps-card-icon:first-child {
    min-height: 64px !important;
    padding: 16px 64px 16px 24px !important;
    border-radius: 18px !important;
  }

  #diagnosing-attr #diagnosing-pn
  .steps-card > .steps-card-icon:first-child::after {
    right: 24px !important;
  }
}

/* =========================================================
   DIAGNOSING ATTR — MOBILE/TABLET FLOWCHART FIXES
   Breakpoint: 0–991px
   Keep this entire block at the VERY END of the stylesheet.
   ========================================================= */

@media screen and (max-width: 991px) {

  /* =======================================================
     1. SECTION HEADINGS — 25PX ON MOBILE/TABLET
     ======================================================= */

  /* Diagnosing hATTR-PN */
  #diagnosing-attr #diagnosing-pn .flowchart-title,

  /* Diagnosing ATTR-CM */
  #diagnosing-attr #diagnosing-cm .flowchart-title,

  /* Mixed-phenotype diagnosis */
  #diagnosing-attr #mixed-phenotype .mp-title,

  /* Common diagnoses / common misdiagnoses */
  #diagnosing-attr #there-timely-container .misdiagnosis-heading h2,
  #diagnosing-attr #there-timely-container p.section-title {
    font-size: 25px !important;
    line-height: 1.15 !important;
  }

  /* More breathing room between the main title and subtitle */
  #diagnosing-attr #diagnosing-pn .flowchart-subtitle,
  #diagnosing-attr #diagnosing-cm .flowchart-subtitle,
  #diagnosing-attr #mixed-phenotype .mp-subtitle {
    margin-top: 10px !important;
    padding-top: 0 !important;
    line-height: 1.2 !important;
  }

  /* Space above section heading groups */
  #diagnosing-attr #diagnosing-pn .flowchart-header,
  #diagnosing-attr #diagnosing-cm .flowchart-header,
  #diagnosing-attr #mixed-phenotype .mp-header,
  #diagnosing-attr #there-timely-container .misdiagnosis-heading {
    padding-top: 18px !important;
    margin-bottom: 22px !important;
  }


  /* =======================================================
     2. ALL CALLOUTS — BULB ABOVE, TEXT BELOW
     ======================================================= */

  #diagnosing-attr .attr-flowchart .callout-box,
  #diagnosing-attr #diagnosing-pn .callout,
  #diagnosing-attr #mixed-phenotype .mp-callout-box,
  #diagnosing-attr #there-timely-container .dd-callout-box {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    min-height: 0 !important;

    gap: 8px !important;
    padding: 18px 18px 20px !important;

    text-align: center !important;

    background: #F0F1F7 !important;
    border: 1px solid #656EFA !important;
    border-radius: 20px 20px 20px 0 !important;

    box-sizing: border-box !important;
  }

  /* Bulb icon centred above text */
  #diagnosing-attr .attr-flowchart .callout-icon,
  #diagnosing-attr #diagnosing-pn .callout .bulb,
  #diagnosing-attr #mixed-phenotype .mp-callout-icon,
  #diagnosing-attr #there-timely-container .dd-callout-icon {
    display: block !important;
    flex: 0 0 auto !important;

    width: 30px !important;
    height: 34px !important;
    min-width: 30px !important;
    min-height: 34px !important;

    margin: 0 auto 4px !important;
    padding: 0 !important;

    background-position: center !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
  }

  /* Callout text centred below bulb */
  #diagnosing-attr .attr-flowchart .callout-text,
  #diagnosing-attr #diagnosing-pn .callout p,
  #diagnosing-attr #mixed-phenotype .mp-callout-text,
  #diagnosing-attr #there-timely-container .dd-callout-text {
    display: block !important;
    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    font-size: 16px !important;
    line-height: 1.3 !important;
    text-align: center !important;
  }


  /* =======================================================
     3. ATTR-CM — KEEP POSITIVE/NEGATIVE SIDE BY SIDE
        AND USE THE SAME BACKGROUND COLOUR
     ======================================================= */

  #diagnosing-attr #diagnosing-cm
  .attr-flowchart .genetic-split {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

    width: 100% !important;
    gap: 0 !important;

    border-top: 1px solid #94A0CE !important;
  }

  #diagnosing-attr #diagnosing-cm
  .attr-flowchart .genetic-col {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-width: 0 !important;
    min-height: 58px !important;

    padding: 9px 8px !important;

    background: #E2FCFD99 !important;

    font-size: 14px !important;
    line-height: 1.15 !important;
    text-align: center !important;

    box-sizing: border-box !important;
  }

  #diagnosing-attr #diagnosing-cm
  .attr-flowchart .genetic-col-left {
    border-right: 1px solid #94A0CE !important;
    border-bottom: 0 !important;
  }

  /*
   * Keep the two arrows and the final hATTR-CM / ATTRwt-CM
   * results in two columns, matching the reference.
   */
  #diagnosing-attr #diagnosing-cm
  .attr-flowchart .outcome-arrows {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    justify-items: center !important;

    width: 100% !important;

    margin: 0 0 4px !important;
    padding: 0 12% !important;
  }

  #diagnosing-attr #diagnosing-cm
  .attr-flowchart .outcome-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

    width: 100% !important;
    gap: 12px !important;

    margin: 0 0 20px !important;
  }

  #diagnosing-attr #diagnosing-cm
  .attr-flowchart .outcome-box {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-width: 0 !important;
    min-height: 48px !important;

    padding: 10px 8px !important;

    background: #E2FCFD99 !important;

    font-size: 15px !important;
    line-height: 1.15 !important;
    text-align: center !important;

    box-sizing: border-box !important;
  }


  /* =======================================================
     4. MIXED-PHENOTYPE — KEEP BOTH ASSESSMENTS SIDE BY SIDE
     ======================================================= */

  #diagnosing-attr #mixed-phenotype .mp-two-col {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

    width: 100% !important;
    gap: 8px !important;

    margin-bottom: 4px !important;
  }

  #diagnosing-attr #mixed-phenotype .mp-col-box {
    min-width: 0 !important;
    width: 100% !important;

    margin: 0 !important;
    padding: 12px 8px !important;

    box-sizing: border-box !important;
  }

  #diagnosing-attr #mixed-phenotype
  .mp-col-box .mp-step-title {
    margin-bottom: 6px !important;

    font-size: 15px !important;
    line-height: 1.15 !important;
    text-align: left !important;
  }

  #diagnosing-attr #mixed-phenotype .mp-list {
    margin: 0 !important;
    padding-left: 15px !important;

    font-size: 12px !important;
    line-height: 1.3 !important;
  }

  #diagnosing-attr #mixed-phenotype .mp-list li {
    margin-bottom: 4px !important;
  }

  /* Keep two downward arrows aligned above both columns */
  #diagnosing-attr #mixed-phenotype .mp-split-arrows {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    justify-items: center !important;

    width: 100% !important;

    margin: 0 0 4px !important;
    padding: 0 !important;
  }

  /* Other paired flat information should also stay two-column */
  #diagnosing-attr #mixed-phenotype .mp-two-col-flat {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

    width: 100% !important;
    gap: 10px !important;
  }

  #diagnosing-attr #mixed-phenotype .mp-col-flat {
    min-width: 0 !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
  }
}


/* =========================================================
   SMALL PHONE REFINEMENTS
   ========================================================= */

@media screen and (max-width: 480px) {

  #diagnosing-attr #diagnosing-pn .flowchart-title,
  #diagnosing-attr #diagnosing-cm .flowchart-title,
  #diagnosing-attr #mixed-phenotype .mp-title,
  #diagnosing-attr #there-timely-container .misdiagnosis-heading h2,
  #diagnosing-attr #there-timely-container p.section-title {
    font-size: 25px !important;
  }

  #diagnosing-attr #diagnosing-cm
  .attr-flowchart .genetic-col {
    padding-right: 5px !important;
    padding-left: 5px !important;
    font-size: 12px !important;
  }

  #diagnosing-attr #diagnosing-cm
  .attr-flowchart .outcome-box {
    font-size: 14px !important;
  }

  #diagnosing-attr #mixed-phenotype
  .mp-col-box .mp-step-title {
    font-size: 14px !important;
  }

  #diagnosing-attr #mixed-phenotype .mp-list {
    padding-left: 13px !important;
    font-size: 11px !important;
    line-height: 1.25 !important;
  }
}

/* =========================================================
   MOBILE/TABLET — HEADING SPACING + COMMON MISDIAGNOSES FIX
   Breakpoint: 0–991px
   Keep this block at the ABSOLUTE END of the stylesheet.
   ========================================================= */

@media screen and (max-width: 991px) {

  /* =======================================================
     1. ADD SPACE BETWEEN SECTION HEADING AND SUBHEADING
     ======================================================= */

  #diagnosing-attr #diagnosing-pn .flowchart-title,
  #diagnosing-attr #diagnosing-cm .flowchart-title,
  #diagnosing-attr #mixed-phenotype .mp-title {
    margin-top: 0 !important;
    margin-bottom: 12px !important;
    padding-bottom: 0 !important;
  }

  #diagnosing-attr #diagnosing-pn .flowchart-subtitle,
  #diagnosing-attr #diagnosing-cm .flowchart-subtitle,
  #diagnosing-attr #mixed-phenotype .mp-subtitle {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }


  /* =======================================================
     2. COMMON MISDIAGNOSES — CENTRE AND REDUCE PADDING
     ======================================================= */

  /*
   * The desktop rule adds 238px left padding.
   * Reset it completely on mobile/tablet so the section
   * no longer shifts towards the right.
   */
  #diagnosing-attr #there-timely-container
  .misdiagnosis-container {
    position: relative !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 auto !important;
    padding: 18px 16px 26px !important;

    left: auto !important;
    right: auto !important;

    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  #diagnosing-attr #there-timely-container
  .misdiagnosis-heading {
    width: 100% !important;
    max-width: 100% !important;

    margin: 0 auto 12px !important;
    padding: 0 !important;

    text-align: center !important;
  }

  /* Common misdiagnoses */
  #diagnosing-attr #there-timely-container
  .misdiagnosis-heading h2:first-child {
    margin: 0 0 14px !important;
    padding: 0 !important;

    font-size: 25px !important;
    line-height: 1.15 !important;
    text-align: center !important;
  }

  /* The journey toward diagnosis has its challenges */
  #diagnosing-attr #there-timely-container
  .misdiagnosis-heading h2:not(:first-child),
  #diagnosing-attr #there-timely-container
  .misdiagnosis-heading .blue-text {
    margin: 0 0 12px !important;
    padding: 0 !important;

    font-size: 20px !important;
    line-height: 1.2 !important;
    text-align: center !important;
  }

  /* Supporting paragraph — compact like reference */
  #diagnosing-attr #there-timely-container
  .mis-text {
    width: 100% !important;
    max-width: 360px !important;

    margin: 0 auto 24px !important;
    padding: 0 !important;

    font-size: 16px !important;
    line-height: 1.25 !important;
    text-align: center !important;
  }


  /* =======================================================
     3. STATISTICS — STACK COMPACTLY LIKE THE REFERENCE
     ======================================================= */

  #diagnosing-attr #there-timely-container
  .three-cards-container {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;

    margin: 0 auto !important;
    padding: 0 !important;

    overflow: visible !important;
  }

  #diagnosing-attr #there-timely-container
  .three-cards-items {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;

    width: 100% !important;
    max-width: 360px !important;
    height: auto !important;
    min-height: 0 !important;

    gap: 24px !important;

    margin: 0 auto 18px !important;
    padding: 0 !important;
  }

  #diagnosing-attr #there-timely-container
  .three-card {
    flex: 0 0 auto !important;

    width: 100% !important;
    max-width: 320px !important;
    height: auto !important;
    min-height: 0 !important;

    margin: 0 auto !important;
    padding: 0 !important;

    text-align: center !important;
  }

  #diagnosing-attr #there-timely-container
  .three-title {
    width: 100% !important;
    min-height: 0 !important;

    margin: 0 0 5px !important;
    padding: 0 !important;

    font-size: 17px !important;
    line-height: 1.15 !important;
    text-align: center !important;
  }

  #diagnosing-attr #there-timely-container
  .three-card-icon {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  #diagnosing-attr #there-timely-container
  .three-card-icon p {
    margin: 0 !important;
    padding: 0 !important;

    font-size: 42px !important;
    line-height: 0.95 !important;
    text-align: center !important;
  }

  #diagnosing-attr #there-timely-container
  .three-card-icon p span {
    margin-top: 3px !important;

    font-size: 18px !important;
    line-height: 1 !important;
  }

  #diagnosing-attr #there-timely-container
  .three-card-text {
    width: 100% !important;

    margin: 5px auto 0 !important;
    padding: 0 !important;

    font-size: 16px !important;
    line-height: 1.15 !important;
    text-align: center !important;
  }

  /*
   * Remove the negative margin that was pulling the divider
   * upward and causing layout overlap.
   */
  #diagnosing-attr #there-timely-container
  .arrow-image {
    display: block !important;

    width: 100% !important;
    max-width: 320px !important;
    height: auto !important;

    margin: 18px auto 18px !important;
    padding: 0 !important;
  }

  /* Heading below statistics */
  #diagnosing-attr #there-timely-container
  .dd-panel > p,
  #diagnosing-attr #there-timely-container
  p.dd-panel-title,
  #diagnosing-attr #there-timely-container
  p.section-title {
    width: 100% !important;

    margin: 0 auto 14px !important;
    padding: 0 !important;

    font-size: 18px !important;
    line-height: 1.15 !important;
    text-align: center !important;
  }
}


/* =========================================================
   SMALL MOBILE REFINEMENT
   ========================================================= */

@media screen and (max-width: 480px) {

  #diagnosing-attr #there-timely-container
  .misdiagnosis-container {
    padding: 16px 12px 22px !important;
  }

  #diagnosing-attr #there-timely-container
  .mis-text {
    max-width: 330px !important;
    font-size: 15px !important;
  }

  #diagnosing-attr #there-timely-container
  .three-cards-items {
    max-width: 330px !important;
    gap: 22px !important;
  }

  #diagnosing-attr #there-timely-container
  .three-card {
    max-width: 300px !important;
  }
}

/* =========================================================
   DIAGNOSING ATTR — FINAL MOBILE FONT / FOOTER / BG FIXES
   Breakpoint: 0–991px
   Keep this block at the ABSOLUTE END of the stylesheet.
   ========================================================= */

@media screen and (max-width: 991px) {

  /* =======================================================
     1. COMMON MISDIAGNOSES STATISTICS — MATCH REFERENCE SIZE
     ======================================================= */

  #diagnosing-attr #there-timely-container
  .three-cards-items {
    gap: 18px !important;
  }

  #diagnosing-attr #there-timely-container
  .three-card {
    max-width: 290px !important;
  }

  #diagnosing-attr #there-timely-container
  .three-title {
    margin: 0 0 4px !important;

    font-size: 16px !important;
    line-height: 1.12 !important;
  }

  /*
   * Main statistic values such as >3 and 3+
   */
  #diagnosing-attr #there-timely-container
  .three-card-icon,
  #diagnosing-attr #there-timely-container
  .three-card-icon p,
  #diagnosing-attr #there-timely-container
  .three-card-icon span {
    height: auto !important;
    min-height: 0 !important;
  }

  #diagnosing-attr #there-timely-container
  .three-card-icon p {
    margin: 0 !important;

    font-size: 46px !important;
    line-height: 0.9 !important;
  }

  /*
   * Labels such as YEARS and PHYSICIANS
   */
  #diagnosing-attr #there-timely-container
  .three-card-icon p span,
  #diagnosing-attr #there-timely-container
  .three-card-icon span {
    display: block !important;

    margin-top: 4px !important;

    font-size: 17px !important;
    line-height: 1 !important;
  }

  /*
   * Supporting text below the number.
   */
  #diagnosing-attr #there-timely-container
  .three-card-text {
    margin: 5px auto 0 !important;

    font-size: 15px !important;
    line-height: 1.12 !important;
  }

  /*
   * Prevent any inherited large typography from affecting
   * the second statistic block.
   */
  #diagnosing-attr #there-timely-container
  .three-card:nth-child(2) .three-title,
  #diagnosing-attr #there-timely-container
  .three-card:nth-child(2) .three-card-text {
    font-size: 15px !important;
    line-height: 1.12 !important;
  }

  #diagnosing-attr #there-timely-container
  .three-card:nth-child(2) .three-card-icon p {
    font-size: 46px !important;
    line-height: 0.9 !important;
  }


  /* =======================================================
     2. MOBILE FOOTER CARDS — REMOVE LARGE GAP
        + MOBILE BACKGROUND IMAGE PLACEHOLDER
     ======================================================= */

  #diagnosing-attr .footer-main-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;

    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;

    gap: 30px !important;

    margin: 0 !important;
    padding: 24px 16px 180px !important;

    /*
     * Replace this URL with the final mobile DAM asset.
     */
    background-image:
      url("/content/dam/YOUR-DAM-PATH/mobile/footer-background-mobile.jpg") !important;

    background-position: center bottom !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;

    box-sizing: border-box !important;
  }

  /*
   * Remove large margins/heights inherited from desktop.
   */
  #diagnosing-attr .footer-main-container
  > div:not(.diagnosis-footer),
  #diagnosing-attr .footer-main-container
  .footer-text-container {
    flex: 0 0 auto !important;

    width: 100% !important;
    max-width: 360px !important;
    height: auto !important;
    min-height: 0 !important;

    margin: 0 auto !important;
  }

  #diagnosing-attr .footer-main-container
  .footer-text-container {
    min-height: 126px !important;
  }

  /*
   * Remove position offsets that create the large vertical gap.
   */
  #diagnosing-attr .footer-main-container
  .footer-text-container,
  #diagnosing-attr .footer-main-container
  .cta-bottom-home {
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
  }

  /*
   * Keep CTA attached directly below its own card.
   */
  #diagnosing-attr .footer-main-container
  .cta-bottom-home {
    position: relative !important;

    display: flex !important;
    justify-content: center !important;

    width: 100% !important;

    margin: -16px auto 0 !important;
    padding: 0 12px !important;

    box-sizing: border-box !important;
    z-index: 2 !important;
  }

  #diagnosing-attr .footer-main-container
  .middle-bottom-cta {
    width: auto !important;
    max-width: 100% !important;

    min-height: 38px !important;

    margin: 0 auto !important;
    padding: 8px 22px !important;

    font-size: 12px !important;
    line-height: 1.15 !important;
    text-align: center !important;
  }


  /* =======================================================
     3. COMMON MISDIAGNOSES — MOBILE CARD BG PLACEHOLDERS
     ======================================================= */

  #diagnosing-attr #there-timely-container
  .dd-card {
    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
  }

  /* Neurologic mobile background */
  #diagnosing-attr #there-timely-container
  .dd-card:first-child {
    background-image:
      linear-gradient(
        rgba(6, 17, 57, 0.72),
        rgba(17, 28, 91, 0.72)
      ),
      url("/content/dam/YOUR-DAM-PATH/mobile/neurologic-card-bg-mobile.png") !important;
  }

  /* Cardiac mobile background */
  #diagnosing-attr #there-timely-container
  .dd-card:nth-child(2) {
    background-image:
      linear-gradient(
        rgba(6, 17, 57, 0.72),
        rgba(17, 28, 91, 0.72)
      ),
      url("/content/dam/YOUR-DAM-PATH/mobile/cardiac-card-bg-mobile.png") !important;
  }
}


/* =========================================================
   SMALL PHONE REFINEMENT
   ========================================================= */

@media screen and (max-width: 480px) {

  #diagnosing-attr #there-timely-container
  .three-card {
    max-width: 270px !important;
  }

  #diagnosing-attr #there-timely-container
  .three-title {
    font-size: 15px !important;
  }

  #diagnosing-attr #there-timely-container
  .three-card-icon p,
  #diagnosing-attr #there-timely-container
  .three-card:nth-child(2) .three-card-icon p {
    font-size: 42px !important;
  }

  #diagnosing-attr #there-timely-container
  .three-card-icon p span,
  #diagnosing-attr #there-timely-container
  .three-card-icon span {
    font-size: 16px !important;
  }

  #diagnosing-attr #there-timely-container
  .three-card-text,
  #diagnosing-attr #there-timely-container
  .three-card:nth-child(2) .three-title,
  #diagnosing-attr #there-timely-container
  .three-card:nth-child(2) .three-card-text {
    font-size: 14px !important;
  }

  #diagnosing-attr .footer-main-container {
    gap: 26px !important;
    padding: 22px 12px 170px !important;
  }
}

/* =========================================================
   ACTUAL FINAL MOBILE FIX
   Statistics markup + sec3-mainbg footer cards
   Keep this block at the ABSOLUTE END of the stylesheet.
   ========================================================= */

@media screen and (max-width: 991px) {

  /* =======================================================
     1. COMMON MISDIAGNOSES STATISTICS
     The second statistic is authored inside one <p>, so the
     whole paragraph must be small and only 3+ must be large.
     ======================================================= */

  #diagnosing-attr #there-timely-container
  .three-cards-items {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;

    width: 100% !important;
    max-width: 320px !important;

    gap: 24px !important;

    margin: 0 auto 22px !important;
    padding: 0 !important;
  }

  #diagnosing-attr #there-timely-container
  .three-card {
    width: 100% !important;
    max-width: 290px !important;

    margin: 0 auto !important;
    padding: 0 !important;

    text-align: center !important;
  }

  /* First statistic: >3 / YEARS */
  #diagnosing-attr #there-timely-container
  .three-card:first-child .three-title {
    margin: 0 0 4px !important;

    font-size: 15px !important;
    line-height: 1.15 !important;
  }

  #diagnosing-attr #there-timely-container
  .three-card:first-child .three-card-icon p {
    margin: 0 !important;

    font-size: 44px !important;
    line-height: 0.9 !important;
  }

  #diagnosing-attr #there-timely-container
  .three-card:first-child .three-card-icon p span {
    display: block !important;

    margin-top: 4px !important;

    font-size: 17px !important;
    line-height: 1 !important;
  }

  /*
   * Second statistic:
   * "~60% OF PATIENTS SAW" + "PHYSICIANS..." are in the
   * same paragraph as the 3+ span.
   */
  #diagnosing-attr #there-timely-container
  .three-card:nth-child(2) .three-card-icon p {
    margin: 0 !important;
    padding: 0 !important;

    font-size: 15px !important;
    line-height: 1.15 !important;
    letter-spacing: 0 !important;

    text-align: center !important;
  }

  /* Only the 3+ value remains large */
  #diagnosing-attr #there-timely-container
  .three-card:nth-child(2) .three-card-icon p span {
    display: block !important;

    margin: 7px 0 5px !important;

    font-size: 44px !important;
    line-height: 0.9 !important;
  }

  #diagnosing-attr #there-timely-container
  .three-card:nth-child(2) .three-title,
  #diagnosing-attr #there-timely-container
  .three-card:nth-child(2) .three-card-text {
    margin: 0 !important;
    padding: 0 !important;

    font-size: 15px !important;
    line-height: 1.15 !important;
  }

  #diagnosing-attr #there-timely-container
  .three-card-icon sup,
  #diagnosing-attr #there-timely-container
  .three-card-icon .suptxt-d {
    font-size: 9px !important;
    line-height: 0 !important;
  }


  /* =======================================================
     2. ACTUAL TWO FOOTER CARDS
     These cards are inside .sec3-mainbg, not
     .footer-main-container.
     ======================================================= */

  #diagnosing-attr .sec3-mainbg {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;

    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;

    gap: 34px !important;

    margin: 0 !important;
    padding: 28px 14px 190px !important;

    /*
     * Replace this URL with the final mobile background.
     */
    background-image:
      url("/content/dam/YOUR-DAM-PATH/mobile/diagnosis-footer-bg-mobile.jpg") !important;

    background-position: center bottom !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;

    box-sizing: border-box !important;
  }

  /* Both card wrappers */
  #diagnosing-attr .sec3-mainbg > .patient-box,
  #diagnosing-attr .sec3-mainbg > div:not(.patient-box) {
    position: relative !important;
    flex: 0 0 auto !important;

    width: 100% !important;
    max-width: 360px !important;
    height: auto !important;
    min-height: 0 !important;

    margin: 0 auto !important;
    padding: 0 !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    transform: none !important;
    box-sizing: border-box !important;
  }

  #diagnosing-attr .sec3-mainbg .image-shadow {
    width: 100% !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  #diagnosing-attr .sec3-mainbg .border-box {
    position: relative !important;

    width: 100% !important;
    max-width: 360px !important;
    height: auto !important;
    min-height: 132px !important;

    margin: 0 auto !important;
    padding: 18px 18px 28px 64px !important;

    box-sizing: border-box !important;
  }

  #diagnosing-attr .sec3-mainbg .smallbox-title {
    margin: 0 !important;

    font-size: 14px !important;
    line-height: 18px !important;
  }

  /* Attach each CTA directly to its own card */
  #diagnosing-attr .sec3-mainbg .cta-bottom-home {
    position: relative !important;

    display: flex !important;
    justify-content: center !important;

    width: 100% !important;
    height: auto !important;

    margin: -18px auto 0 !important;
    padding: 0 10px !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    transform: none !important;
    box-sizing: border-box !important;
    z-index: 3 !important;
  }

  #diagnosing-attr .sec3-mainbg .middle-bottom-cta,
  #diagnosing-attr .sec3-mainbg
  .home-cta-1 .middle-bottom-cta,
  #diagnosing-attr .sec3-mainbg
  .home-cta-2 .middle-bottom-cta {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    max-width: 100% !important;
    min-width: 210px !important;
    min-height: 34px !important;
    height: auto !important;

    margin: 0 auto !important;
    padding: 7px 18px !important;

    font-size: 12px !important;
    line-height: 15px !important;
    text-align: center !important;

    transform: none !important;
  }
}


/* =========================================================
   SMALL PHONE REFINEMENTS
   ========================================================= */

@media screen and (max-width: 480px) {

  #diagnosing-attr #there-timely-container
  .three-cards-items {
    max-width: 290px !important;
    gap: 22px !important;
  }

  #diagnosing-attr #there-timely-container
  .three-card:first-child .three-card-icon p,
  #diagnosing-attr #there-timely-container
  .three-card:nth-child(2) .three-card-icon p span {
    font-size: 40px !important;
  }

  #diagnosing-attr #there-timely-container
  .three-card:first-child .three-title,
  #diagnosing-attr #there-timely-container
  .three-card:nth-child(2) .three-card-icon p,
  #diagnosing-attr #there-timely-container
  .three-card:nth-child(2) .three-title,
  #diagnosing-attr #there-timely-container
  .three-card:nth-child(2) .three-card-text {
    font-size: 14px !important;
  }

  #diagnosing-attr .sec3-mainbg {
    gap: 28px !important;
    padding: 24px 12px 170px !important;
  }

  #diagnosing-attr .sec3-mainbg .border-box {
    min-height: 126px !important;
    padding: 16px 14px 26px 58px !important;
  }
}

/* =========================================================
   FINAL MOBILE OVERRIDE — STATISTICS + PROMO CARDS
   Keep this block as the LAST CSS in the file.
   ========================================================= */

@media screen and (max-width: 991px) {

  /* =======================================================
     1. COMMON MISDIAGNOSES STATISTICS
     ======================================================= */

  #diagnosing-attr #there-timely-container .three-cards-items {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;

    width: 100% !important;
    max-width: 300px !important;

    gap: 22px !important;

    margin: 0 auto 22px !important;
    padding: 0 !important;
  }

  #diagnosing-attr #there-timely-container .three-card {
    width: 100% !important;
    max-width: 280px !important;

    margin: 0 auto !important;
    padding: 0 !important;

    text-align: center !important;
  }

  /* Heading above >3 */
  #diagnosing-attr #there-timely-container
  .three-card:first-child .three-title {
    margin: 0 0 5px !important;
    padding: 0 !important;

    font-size: 15px !important;
    line-height: 1.12 !important;
  }

  /* >3 */
  #diagnosing-attr #there-timely-container
  .three-card:first-child .three-card-icon p {
    margin: 0 !important;
    padding: 0 !important;

    font-size: 42px !important;
    line-height: 0.9 !important;
  }

  /* YEARS */
  #diagnosing-attr #there-timely-container
  .three-card:first-child .three-card-icon p span {
    display: block !important;

    margin-top: 5px !important;

    font-size: 17px !important;
    line-height: 1 !important;
  }

  /* ~60% OF PATIENTS SAW */
  #diagnosing-attr #there-timely-container
  .three-card:nth-child(2) .three-title {
    margin: 0 0 5px !important;
    padding: 0 !important;

    font-size: 15px !important;
    line-height: 1.12 !important;
  }

  /* 3+ */
  #diagnosing-attr #there-timely-container
  .three-card:nth-child(2) .three-card-icon p {
    margin: 0 !important;
    padding: 0 !important;

    font-size: 42px !important;
    line-height: 0.9 !important;
  }

  /*
   * PHYSICIANS and its supporting line.
   * Reset nested gradient/span styling as well.
   */
  #diagnosing-attr #there-timely-container
  .three-card:nth-child(2) .three-card-text,
  #diagnosing-attr #there-timely-container
  .three-card:nth-child(2) .three-card-text *,
  #diagnosing-attr #there-timely-container
  .three-card:nth-child(2) .gradient-text,
  #diagnosing-attr #there-timely-container
  .three-card:nth-child(2) .gradient-text * {
    margin: 0 !important;
    padding: 0 !important;

    font-size: 15px !important;
    line-height: 1.12 !important;
    letter-spacing: 0 !important;

    text-align: center !important;
    text-transform: uppercase !important;

    background: none !important;
    -webkit-background-clip: initial !important;
    -webkit-text-fill-color: #00215F !important;
    color: #00215F !important;
  }

  #diagnosing-attr #there-timely-container
  .three-card:nth-child(2) .three-card-text {
    margin-top: 5px !important;
  }

  #diagnosing-attr #there-timely-container
  .three-card-icon sup,
  #diagnosing-attr #there-timely-container
  .three-card-icon .suptxt-d,
  #diagnosing-attr #there-timely-container
  .three-card-text sup {
    font-size: 8px !important;
    line-height: 0 !important;
  }


  /* =======================================================
     2. MOBILE PROMO CARDS — MATCH REFERENCE
     ======================================================= */

  #diagnosing-attr .sec3-mainbg {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;

    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;

    gap: 52px !important;

    margin: 0 !important;
    padding: 28px 14px 190px !important;

    background-image:
      url("/content/dam/YOUR-DAM-PATH/mobile/diagnosis-footer-bg-mobile.jpg") !important;
    background-position: center bottom !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;

    box-sizing: border-box !important;
  }

  #diagnosing-attr .sec3-mainbg > .patient-box,
  #diagnosing-attr .sec3-mainbg > div:not(.patient-box),
  #diagnosing-attr .sec3-mainbg .image-shadow {
    position: relative !important;

    display: block !important;

    width: 100% !important;
    max-width: 360px !important;
    height: auto !important;

    margin: 0 auto !important;
    padding: 0 !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    transform: none !important;
    box-sizing: border-box !important;
  }

  #diagnosing-attr .sec3-mainbg .border-box {
    position: relative !important;

    display: block !important;

    width: 100% !important;
    max-width: 360px !important;
    height: auto !important;
    min-height: 138px !important;

    margin: 0 auto !important;
    padding: 22px 22px 32px 82px !important;

    overflow: visible !important;
    box-sizing: border-box !important;
  }

  #diagnosing-attr .sec3-mainbg .smallbox-title {
    display: block !important;

    width: 100% !important;
    max-width: 235px !important;

    margin: 0 !important;
    padding: 0 !important;

    font-size: 14px !important;
    line-height: 17px !important;
    font-weight: 400 !important;

    text-align: left !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }

  #diagnosing-attr .sec3-mainbg .smallbox-txt {
    display: none !important;
  }

  /*
   * The button must overlap the bottom centre of the card.
   * It must not participate in the text layout.
   */
  #diagnosing-attr .sec3-mainbg .cta-bottom-home,
  #diagnosing-attr .sec3-mainbg .home-cta-1,
  #diagnosing-attr .sec3-mainbg .home-cta-2 {
    position: absolute !important;

    display: block !important;

    width: auto !important;
    height: auto !important;

    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: -17px !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: translateX(-50%) !important;
    z-index: 5 !important;
  }

  #diagnosing-attr .sec3-mainbg .middle-bottom-cta,
  #diagnosing-attr .sec3-mainbg
  .home-cta-1 .middle-bottom-cta,
  #diagnosing-attr .sec3-mainbg
  .home-cta-2 .middle-bottom-cta {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    max-width: 290px !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 34px !important;

    margin: 0 !important;
    padding: 7px 20px !important;

    font-size: 12px !important;
    line-height: 14px !important;
    text-align: center !important;
    white-space: normal !important;

    box-sizing: border-box !important;
  }

  #diagnosing-attr .sec3-mainbg
  .home-cta-1 .middle-bottom-cta {
    width: 230px !important;
  }

  #diagnosing-attr .sec3-mainbg
  .home-cta-2 .middle-bottom-cta {
    width: 190px !important;
  }
}


@media screen and (max-width: 480px) {

  #diagnosing-attr #there-timely-container
  .three-card:first-child .three-card-icon p,
  #diagnosing-attr #there-timely-container
  .three-card:nth-child(2) .three-card-icon p {
    font-size: 39px !important;
  }

  #diagnosing-attr #there-timely-container
  .three-card:first-child .three-title,
  #diagnosing-attr #there-timely-container
  .three-card:nth-child(2) .three-title,
  #diagnosing-attr #there-timely-container
  .three-card:nth-child(2) .three-card-text,
  #diagnosing-attr #there-timely-container
  .three-card:nth-child(2) .three-card-text *,
  #diagnosing-attr #there-timely-container
  .three-card:nth-child(2) .gradient-text,
  #diagnosing-attr #there-timely-container
  .three-card:nth-child(2) .gradient-text * {
    font-size: 14px !important;
  }

  #diagnosing-attr .sec3-mainbg {
    gap: 48px !important;
    padding: 24px 12px 170px !important;
  }

  #diagnosing-attr .sec3-mainbg .border-box {
    min-height: 132px !important;
    padding: 20px 18px 30px 72px !important;
  }

  #diagnosing-attr .sec3-mainbg .smallbox-title {
    max-width: 225px !important;
    font-size: 13px !important;
    line-height: 16px !important;
  }
}

/* =========================================================
   DIAGNOSING ATTR — RESPONSIVE FINAL V2
   Fixes:
   1. Statistics image sizes
   2. ATTR-CM and mixed-phenotype fluid tablet layout
   3. Compact 1024px desktop/sidebar layout
   Keep this block at the ABSOLUTE END of the stylesheet.
   ========================================================= */


/* =========================================================
   1. MOBILE/TABLET: 0–991PX
   ========================================================= */

@media screen and (max-width: 991px) {

  /* -------------------------------------------------------
     COMMON MISDIAGNOSES STATISTICS

     These number groups are image assets, so control the
     actual image widths instead of enlarging shared text.
     ------------------------------------------------------- */

  #diagnosing-attr #there-timely-container
  .three-cards-items {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;

    width: 100% !important;
    max-width: 320px !important;

    gap: 24px !important;

    margin: 0 auto 22px !important;
    padding: 0 !important;
  }

  #diagnosing-attr #there-timely-container
  .three-card {
    width: 100% !important;
    max-width: 300px !important;

    margin: 0 auto !important;
    padding: 0 !important;

    text-align: center !important;
  }

  #diagnosing-attr #there-timely-container
  .three-card-icon {
    width: 100% !important;
    height: auto !important;

    margin: 4px auto !important;
    padding: 0 !important;

    text-align: center !important;
  }

  /* >3 YEARS image */
  #diagnosing-attr #there-timely-container
  img.three-years-icon-img,
  #diagnosing-attr #there-timely-container
  .three-years-icon-img {
    display: block !important;

    width: clamp(72px, 24vw, 105px) !important;
    max-width: 105px !important;
    height: auto !important;

    margin: 0 auto !important;
  }

  /* 3+ PHYSICIANS image */
  #diagnosing-attr #there-timely-container
  img.three-phys,
  #diagnosing-attr #there-timely-container
  .three-phys {
    display: block !important;

    width: clamp(120px, 40vw, 175px) !important;
    max-width: 175px !important;
    height: auto !important;

    margin: 0 auto !important;
  }

  /* Keep surrounding labels compact */
  #diagnosing-attr #there-timely-container
  .three-title {
    width: 100% !important;
    max-width: 285px !important;
    min-height: 0 !important;

    margin: 0 auto 6px !important;
    padding: 0 !important;

    font-size: 15px !important;
    line-height: 1.15 !important;
    text-align: center !important;
  }

  #diagnosing-attr #there-timely-container
  .three-card-text,
  #diagnosing-attr #there-timely-container
  .three-card-text *,
  #diagnosing-attr #there-timely-container
  .gradient-text,
  #diagnosing-attr #there-timely-container
  .gradient-text * {
    margin: 5px auto 0 !important;
    padding: 0 !important;

    font-size: 14px !important;
    line-height: 1.15 !important;
    letter-spacing: 0 !important;

    color: #00215F !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    -webkit-text-fill-color: #00215F !important;

    text-align: center !important;
  }


  /* -------------------------------------------------------
     ATTR-CM — FLUID TABLET/MOBILE LAYOUT
     ------------------------------------------------------- */

  #diagnosing-attr #diagnosing-cm {
    width: 100% !important;
    max-width: 100% !important;

    margin: 0 auto !important;
    padding: 0 clamp(12px, 3vw, 28px) 40px !important;

    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  #diagnosing-attr #diagnosing-cm
  .attr-flowchart,
  #diagnosing-attr #diagnosing-cm
  .sheet, #hattrpn-flowchart, #diagnosing-pn {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin: 0 auto !important;
    padding: clamp(14px, 3vw, 24px) !important;

    box-sizing: border-box !important;
  }

  #diagnosing-attr #diagnosing-cm
  .flow-step,
  #diagnosing-attr #diagnosing-cm
  .step-single,
  #diagnosing-attr #diagnosing-cm
  .step-top,
  #diagnosing-attr #diagnosing-cm
  .step-genetic,
  #diagnosing-attr #diagnosing-cm
  .genetic-split,
  #diagnosing-attr #diagnosing-cm
  .outcome-row {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    box-sizing: border-box !important;
  }

  #diagnosing-attr #diagnosing-cm
  .step-title,
  #diagnosing-attr #diagnosing-cm
  .step-text {
    font-size: clamp(15px, 2.3vw, 18px) !important;
    line-height: 1.22 !important;
  }

  #diagnosing-attr #diagnosing-cm
  .genetic-col {
    min-width: 0 !important;
    padding: clamp(8px, 1.8vw, 12px) !important;

    font-size: clamp(12px, 1.9vw, 15px) !important;
    line-height: 1.18 !important;

    overflow-wrap: anywhere !important;
  }

  #diagnosing-attr #diagnosing-cm
  .outcome-row {
    gap: clamp(8px, 2vw, 16px) !important;
  }

  #diagnosing-attr #diagnosing-cm
  .outcome-box {
    min-width: 0 !important;
    padding: clamp(9px, 2vw, 13px) 6px !important;

    font-size: clamp(13px, 2vw, 16px) !important;
    line-height: 1.15 !important;
  }


  /* -------------------------------------------------------
     MIXED-PHENOTYPE — FLUID TABLET/MOBILE LAYOUT
     ------------------------------------------------------- */

  #diagnosing-attr #mixed-phenotype {
    width: 100% !important;
    max-width: 100% !important;

    margin: 0 auto !important;
    padding: 0 clamp(12px, 3vw, 28px) 40px !important;

    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  #diagnosing-attr #mixed-phenotype
  .mp-flowchart {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin: 0 auto !important;
    padding: clamp(14px, 3vw, 24px) !important;

    box-sizing: border-box !important;
  }

  #diagnosing-attr #mixed-phenotype
  .mp-step,
  #diagnosing-attr #mixed-phenotype
  .mp-step-single,
  #diagnosing-attr #mixed-phenotype
  .mp-step-top,
  #diagnosing-attr #mixed-phenotype
  .mp-step-bottom,
  #diagnosing-attr #mixed-phenotype
  .mp-two-col,
  #diagnosing-attr #mixed-phenotype
  .mp-two-col-flat {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    box-sizing: border-box !important;
  }

  #diagnosing-attr #mixed-phenotype
  .mp-step-title {
    font-size: clamp(15px, 2.3vw, 18px) !important;
    line-height: 1.18 !important;
  }

  #diagnosing-attr #mixed-phenotype
  .mp-step-text {
    font-size: clamp(13px, 2vw, 16px) !important;
    line-height: 1.25 !important;
  }

  #diagnosing-attr #mixed-phenotype
  .mp-two-col {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: clamp(6px, 1.8vw, 12px) !important;
  }

  #diagnosing-attr #mixed-phenotype
  .mp-col-box {
    min-width: 0 !important;
    padding: clamp(9px, 2vw, 14px) !important;
  }

  #diagnosing-attr #mixed-phenotype
  .mp-col-box .mp-step-title {
    font-size: clamp(13px, 1.9vw, 16px) !important;
  }

  #diagnosing-attr #mixed-phenotype
  .mp-list {
    padding-left: clamp(13px, 2vw, 18px) !important;

    font-size: clamp(10px, 1.55vw, 13px) !important;
    line-height: 1.3 !important;

    overflow-wrap: anywhere !important;
  }

  #diagnosing-attr #mixed-phenotype
  .mp-two-col-flat {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: clamp(8px, 2vw, 14px) !important;
  }

  #diagnosing-attr #mixed-phenotype
  .mp-col-flat {
    min-width: 0 !important;

    font-size: clamp(10px, 1.55vw, 13px) !important;
    line-height: 1.3 !important;

    overflow-wrap: anywhere !important;
  }
}


/* =========================================================
   2. IPAD PRO / SMALL DESKTOP: 992–1100PX
   Keep sidebar layout, but make it more compact.
   ========================================================= */

@media screen and (min-width: 992px) and (max-width: 1100px) {

  #diagnosing-attr #diagnosing-pn {
    grid-template-columns: 190px minmax(0, 1fr) !important;
    column-gap: 16px !important;

    max-width: calc(100% - 24px) !important;
  }

  #diagnosing-attr #diagnosing-pn
  > div.text:has(.aboutattr-cards-container),
  #diagnosing-attr #diagnosing-pn
  .aboutattr-cards-container,
  #diagnosing-attr #diagnosing-pn
  .steps-card {
    width: 190px !important;
    min-width: 190px !important;
    max-width: 190px !important;
  }

  #diagnosing-attr #diagnosing-pn
  .steps-card {
    height: 310px !important;
    padding: 18px 14px !important;
  }

  #diagnosing-attr #diagnosing-pn
  .steps-card-icon:first-child {
    margin-bottom: 12px !important;

    font-size: 18px !important;
    line-height: 1.2 !important;
  }

  #diagnosing-attr #diagnosing-pn
  .steps-card-icon:nth-child(odd):not(:first-child) {
    margin-bottom: 10px !important;

    font-size: 15px !important;
    line-height: 1.25 !important;
  }

  #diagnosing-attr #diagnosing-pn
  > div.text:has(#hattrpn-flowchart) {
    padding-right: 0 !important;
  }

  #diagnosing-attr #diagnosing-pn
  .sheet,
  #diagnosing-attr #diagnosing-cm
  .attr-flowchart,
  #diagnosing-attr #mixed-phenotype
  .mp-flowchart {
    padding: 18px !important;
  }

  #diagnosing-attr #diagnosing-pn
  .flowchart-title,
  #diagnosing-attr #diagnosing-cm
  .flowchart-title,
  #diagnosing-attr #mixed-phenotype
  .mp-title {
    font-size: 24px !important;
    line-height: 1.15 !important;
  }

  #diagnosing-attr #diagnosing-pn
  .flowchart-subtitle,
  #diagnosing-attr #diagnosing-cm
  .flowchart-subtitle,
  #diagnosing-attr #mixed-phenotype
  .mp-subtitle {
    font-size: 17px !important;
    line-height: 1.2 !important;
  }

  #diagnosing-attr #diagnosing-pn
  .flag-card,
  #diagnosing-attr #diagnosing-cm
  .step-title,
  #diagnosing-attr #diagnosing-cm
  .step-text,
  #diagnosing-attr #mixed-phenotype
  .mp-step-title,
  #diagnosing-attr #mixed-phenotype
  .mp-step-text {
    font-size: 15px !important;
    line-height: 1.25 !important;
  }
}

/* =========================================================
   DIAGNOSING ATTR — RESPONSIVE FINAL V3
   Fixes:
   1. Common-misdiagnoses statistic typography
   2. ATTR-CM and mixed-phenotype width at 1024px
   Keep this block at the ABSOLUTE END of the stylesheet.
   ========================================================= */


/* =========================================================
   1. COMMON MISDIAGNOSES — MOBILE/TABLET STATISTICS
   ========================================================= */

@media screen and (max-width: 991px) {

  /*
   * The second statistic uses the shared .gradient-text class.
   * Keep the sentence and PHYSICIANS small, then enlarge only
   * the authored span containing 3+.
   */
  #diagnosing-attr .misdiagnosis-container
  .three-card:nth-child(2) .gradient-text {
    display: block !important;

    width: 100% !important;
    max-width: 285px !important;

    margin: 0 auto !important;
    padding: 0 !important;

    font-family: "Kanit-Bold", "Kanit", Arial, sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.12 !important;
    letter-spacing: 0 !important;

    color: #00215F !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    -webkit-text-fill-color: #00215F !important;

    text-align: center !important;
  }

  /* Only 3+ should remain large */
  #diagnosing-attr .misdiagnosis-container
  .three-card:nth-child(2) .gradient-text > span,
  #diagnosing-attr .misdiagnosis-container
  .three-card:nth-child(2) .gradient-text .stat-number,
  #diagnosing-attr .misdiagnosis-container
  .three-card:nth-child(2) .gradient-text .number {
    display: block !important;

    margin: 6px auto 5px !important;
    padding: 0 !important;

    font-size: 42px !important;
    line-height: 0.9 !important;

    color: #00215F !important;
    -webkit-text-fill-color: #00215F !important;
  }

  /* First statistic remains compact */
  #diagnosing-attr .misdiagnosis-container
  .three-card:first-child .gradient-text {
    margin: 0 auto !important;

    font-size: 42px !important;
    line-height: 0.9 !important;

    color: #00215F !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    -webkit-text-fill-color: #00215F !important;
  }

  #diagnosing-attr .misdiagnosis-container
  .three-card:first-child .three-title,
  #diagnosing-attr .misdiagnosis-container
  .three-card:nth-child(2) .three-title,
  #diagnosing-attr .misdiagnosis-container
  .three-card:nth-child(2) .three-card-text {
    font-size: 15px !important;
    line-height: 1.12 !important;
  }
}


@media screen and (max-width: 480px) {

  #diagnosing-attr .misdiagnosis-container
  .three-card:nth-child(2) .gradient-text {
    max-width: 260px !important;
    font-size: 14px !important;
  }

  #diagnosing-attr .misdiagnosis-container
  .three-card:nth-child(2) .gradient-text > span,
  #diagnosing-attr .misdiagnosis-container
  .three-card:nth-child(2) .gradient-text .stat-number,
  #diagnosing-attr .misdiagnosis-container
  .three-card:nth-child(2) .gradient-text .number,
  #diagnosing-attr .misdiagnosis-container
  .three-card:first-child .gradient-text {
    font-size: 38px !important;
  }
}


/* =========================================================
   2. IPAD PRO / SMALL DESKTOP — ALIGN CM AND MIXED CONTENT
   WITH THE PN MAIN-CONTENT COLUMN
   ========================================================= */

@media screen and (min-width: 992px) and (max-width: 1100px) {

  /*
   * PN uses a 190px sidebar + 16px gap.
   * Give CM and mixed phenotype the same left content offset
   * instead of allowing them to span the whole 1024px screen.
   */
  #diagnosing-attr #diagnosing-cm,
  #diagnosing-attr #mixed-phenotype {
    width: 100% !important;
    max-width: 1265px !important;

    margin-right: auto !important;
    margin-left: auto !important;

    padding-right: 12px !important;
    padding-left: 218px !important;

    box-sizing: border-box !important;
  }

  #diagnosing-attr #diagnosing-cm
  > div.text,
  #diagnosing-attr #mixed-phenotype
  > div.text {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;
  }

  #diagnosing-attr #diagnosing-cm
  .attr-flowchart,
  #diagnosing-attr #diagnosing-cm
  .sheet,
  #diagnosing-attr #mixed-phenotype
  .mp-flowchart {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 16px !important;

    box-sizing: border-box !important;
  }

  /* Keep the inner typography compact at 1024px */
  #diagnosing-attr #diagnosing-cm
  .step-title,
  #diagnosing-attr #diagnosing-cm
  .step-text,
  #diagnosing-attr #mixed-phenotype
  .mp-step-title,
  #diagnosing-attr #mixed-phenotype
  .mp-step-text {
    font-size: 14px !important;
    line-height: 1.22 !important;
  }

  #diagnosing-attr #mixed-phenotype
  .mp-list {
    font-size: 12px !important;
    line-height: 1.28 !important;
  }
}

/* =========================================================
   COMMON MISDIAGNOSES — FINAL ALIGNMENT FIX
   Works with the rebuilt .cm-* HTML.
   Keep this block at the ABSOLUTE END of the stylesheet.
   ========================================================= */

/* Shared reset */
#diagnosing-attr .cm-section,
#diagnosing-attr .cm-section * {
  box-sizing: border-box !important;
}


/* =========================================================
   DESKTOP / LAPTOP: 1101PX AND ABOVE
   Align with the main content column beside the 224px sidebar.
   ========================================================= */

@media screen and (min-width: 1101px) {

  #diagnosing-attr .cm-section {
    width: 100% !important;
    max-width: 1265px !important;

    margin: 0 auto !important;

    /* 224px sidebar + 24px gap */
    padding: 38px 0 42px 248px !important;
  }

  #diagnosing-attr .cm-intro,
  #diagnosing-attr .cm-statistics,
  #diagnosing-attr .cm-divider,
  #diagnosing-attr .cm-conditions-heading,
  #diagnosing-attr .cm-condition-grid,
  #diagnosing-attr .cm-footnote,
  #diagnosing-attr .cm-callout {
    width: 100% !important;
    max-width: none !important;
  }

  #diagnosing-attr .cm-intro {
    margin: 0 0 34px !important;
  }

  #diagnosing-attr .cm-description {
    max-width: 760px !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  #diagnosing-attr .cm-statistics {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 48px !important;

    max-width: 760px !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  #diagnosing-attr .cm-divider {
    max-width: 760px !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  #diagnosing-attr .cm-conditions-heading {
    max-width: 760px !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  #diagnosing-attr .cm-condition-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px !important;
  }

  #diagnosing-attr .cm-callout {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
}


/* =========================================================
   IPAD PRO / SMALL LAPTOP: 992PX–1100PX
   Align with compact 190px sidebar + 16px gap.
   ========================================================= */

@media screen and (min-width: 992px) and (max-width: 1100px) {

  #diagnosing-attr .cm-section {
    width: 100% !important;
    max-width: calc(100% - 24px) !important;

    margin: 0 auto !important;

    /* 190px sidebar + 16px gap */
    padding: 28px 0 36px 206px !important;
  }

  #diagnosing-attr .cm-intro,
  #diagnosing-attr .cm-statistics,
  #diagnosing-attr .cm-divider,
  #diagnosing-attr .cm-conditions-heading,
  #diagnosing-attr .cm-condition-grid,
  #diagnosing-attr .cm-footnote,
  #diagnosing-attr .cm-callout {
    width: 100% !important;
    max-width: none !important;
  }

  #diagnosing-attr .cm-description {
    max-width: 620px !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  #diagnosing-attr .cm-statistics {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px !important;

    max-width: 620px !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  #diagnosing-attr .cm-divider,
  #diagnosing-attr .cm-conditions-heading {
    max-width: 620px !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  #diagnosing-attr .cm-condition-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  #diagnosing-attr .cm-condition-card {
    min-width: 0 !important;
    padding: 18px !important;
  }
}


/* =========================================================
   TABLET: 768PX–991PX
   Full-width section, no sidebar offset.
   ========================================================= */

@media screen and (min-width: 768px) and (max-width: 991px) {

  #diagnosing-attr .cm-section {
    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 28px 28px 38px !important;
  }

  #diagnosing-attr .cm-intro,
  #diagnosing-attr .cm-statistics,
  #diagnosing-attr .cm-divider,
  #diagnosing-attr .cm-conditions-heading,
  #diagnosing-attr .cm-condition-grid,
  #diagnosing-attr .cm-footnote,
  #diagnosing-attr .cm-callout {
    width: 100% !important;
    max-width: none !important;
  }

  #diagnosing-attr .cm-description {
    max-width: 650px !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  #diagnosing-attr .cm-statistics {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 28px !important;

    max-width: 650px !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  #diagnosing-attr .cm-divider,
  #diagnosing-attr .cm-conditions-heading {
    max-width: 650px !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  #diagnosing-attr .cm-condition-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }

  #diagnosing-attr .cm-condition-card {
    min-width: 0 !important;
    padding: 18px !important;
  }
}


/* =========================================================
   MOBILE: UP TO 767PX
   ========================================================= */

@media screen and (max-width: 767px) {

  #diagnosing-attr .cm-section {
    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 22px 16px 34px !important;
  }

  #diagnosing-attr .cm-intro,
  #diagnosing-attr .cm-statistics,
  #diagnosing-attr .cm-divider,
  #diagnosing-attr .cm-conditions-heading,
  #diagnosing-attr .cm-condition-grid,
  #diagnosing-attr .cm-footnote,
  #diagnosing-attr .cm-callout {
    width: 100% !important;
    max-width: none !important;
  }

  #diagnosing-attr .cm-statistics {
    grid-template-columns: 1fr !important;
    gap: 26px !important;
  }

  #diagnosing-attr .cm-condition-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  #diagnosing-attr .cm-condition-card {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* =========================================================
   COMMON MISDIAGNOSES — COMPLETE REBUILD FOR .cm-* HTML
   IMPORTANT:
   This block contains ALL base + responsive styles.
   Keep it at the absolute end of the stylesheet.
   ========================================================= */

#diagnosing-attr .cm-section,
#diagnosing-attr .cm-section * {
  box-sizing: border-box !important;
}

#diagnosing-attr .cm-section {
  width: 100% !important;
  max-width: 1265px !important;
  margin: 0 auto !important;
  padding: 38px 24px 42px 272px !important;
  color: #00215F !important;
}

#diagnosing-attr .cm-intro {
  width: 100% !important;
  max-width: 760px !important;
  margin: 0 auto 34px !important;
  text-align: center !important;
}

#diagnosing-attr .cm-main-heading {
  margin: 0 0 24px !important;
  color: #00215F !important;
  font-family: "Kanit-Bold", "Kanit", Arial, sans-serif !important;
  font-size: 30px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  text-align: center !important;
}

#diagnosing-attr .cm-subheading {
  margin: 0 0 18px !important;
  color: #00215F !important;
  font-family: "Kanit-Bold", "Kanit", Arial, sans-serif !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  text-align: center !important;
}

#diagnosing-attr .cm-description {
  width: 100% !important;
  max-width: 700px !important;
  margin: 0 auto !important;
  color: #151515 !important;
  font-family: "Kanit-Regular", "Kanit", Arial, sans-serif !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  text-align: center !important;
}

#diagnosing-attr .cm-description sup,
#diagnosing-attr .cm-stat-label sup,
#diagnosing-attr .cm-stat-description sup,
#diagnosing-attr .cm-conditions-heading sup,
#diagnosing-attr .cm-callout-text sup {
  font-size: 60% !important;
}

/* Statistics */
#diagnosing-attr .cm-statistics {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 56px !important;
  width: 100% !important;
  max-width: 760px !important;
  margin: 0 auto 34px !important;
}

#diagnosing-attr .cm-stat {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  min-width: 0 !important;
  text-align: center !important;
}

#diagnosing-attr .cm-stat-heading {
  max-width: 320px !important;
  margin: 0 0 8px !important;
  color: #00215F !important;
  font-family: "Kanit-Bold", "Kanit", Arial, sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-align: center !important;
  text-transform: uppercase !important;
}

#diagnosing-attr .cm-stat-number {
  margin: 0 !important;
  color: #00215F !important;
  font-family: "Kanit-Bold", "Kanit", Arial, sans-serif !important;
  font-size: 64px !important;
  font-weight: 700 !important;
  line-height: 0.9 !important;
  text-align: center !important;
}

#diagnosing-attr .cm-stat-label {
  margin: 8px 0 0 !important;
  color: #00215F !important;
  font-family: "Kanit-Bold", "Kanit", Arial, sans-serif !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-transform: uppercase !important;
}

#diagnosing-attr .cm-stat-description {
  max-width: 320px !important;
  margin: 10px auto 0 !important;
  color: #00215F !important;
  font-family: "Kanit-Bold", "Kanit", Arial, sans-serif !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-align: center !important;
  text-transform: uppercase !important;
}

/* Divider and heading */
#diagnosing-attr .cm-divider {
  display: block !important;
  width: 100% !important;
  max-width: 760px !important;
  height: auto !important;
  margin: 0 auto 26px !important;
}

#diagnosing-attr .cm-conditions-heading {
  max-width: 760px !important;
  margin: 0 auto 20px !important;
  color: #00215F !important;
  font-family: "Kanit-Bold", "Kanit", Arial, sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-align: center !important;
  text-transform: uppercase !important;
}

/* Condition cards */
#diagnosing-attr .cm-condition-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 24px !important;
  width: 100% !important;
  margin: 0 auto 18px !important;
}

#diagnosing-attr .cm-condition-card {
  position: relative !important;
  min-width: 0 !important;
  min-height: 380px !important;
  padding: 24px !important;
  overflow: hidden !important;
  background-color: #101A4D !important;
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  border-radius: 20px !important;
}

#diagnosing-attr .cm-condition-card--neurologic {
  background-image:
    linear-gradient(rgba(6,17,57,.76), rgba(17,28,91,.76)),
    url("/content/dam/YOUR-DAM-PATH/desktop/neurologic-card-bg.png") !important;
}

#diagnosing-attr .cm-condition-card--cardiac {
  background-image:
    linear-gradient(rgba(6,17,57,.76), rgba(17,28,91,.76)),
    url("/content/dam/YOUR-DAM-PATH/desktop/cardiac-card-bg.png") !important;
}

#diagnosing-attr .cm-condition-content {
  position: relative !important;
  z-index: 1 !important;
}

#diagnosing-attr .cm-condition-title {
  margin: 0 0 14px !important;
  color: #FFFFFF !important;
  font-family: "Kanit-Bold", "Kanit", Arial, sans-serif !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-align: left !important;
}

#diagnosing-attr .cm-condition-list {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

#diagnosing-attr .cm-condition-list li {
  position: relative !important;
  margin: 0 0 9px !important;
  padding-left: 18px !important;
  color: #FFFFFF !important;
  font-family: "Kanit-Regular", "Kanit", Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
}

#diagnosing-attr .cm-condition-list li::before {
  content: "+" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  color: #75F2FB !important;
  font-weight: 700 !important;
}

/* Footnote */
#diagnosing-attr .cm-footnote {
  margin: 0 0 14px !important;
  color: #151515 !important;
  font-family: "Kanit-Regular", "Kanit", Arial, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  text-align: center !important;
}

#diagnosing-attr .cm-footnote p {
  margin: 0 !important;
}

/* Callout */
#diagnosing-attr .cm-callout {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 15px 20px !important;
  background: #F0F1F7 !important;
  border: 1px solid #656EFA !important;
  border-radius: 18px 18px 18px 0 !important;
}

#diagnosing-attr .cm-callout-icon {
  flex: 0 0 auto !important;
  font-size: 26px !important;
  line-height: 1 !important;
}

#diagnosing-attr .cm-callout-text {
  margin: 0 !important;
  color: #00215F !important;
  font-family: "Kanit-Medium", "Kanit", Arial, sans-serif !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  text-align: center !important;
}

/* Small desktop / iPad Pro */
@media screen and (min-width: 992px) and (max-width: 1100px) {
  #diagnosing-attr .cm-section {
    max-width: calc(100% - 24px) !important;
    padding: 28px 0 36px 206px !important;
  }

  #diagnosing-attr .cm-main-heading { font-size: 25px !important; }
  #diagnosing-attr .cm-subheading { font-size: 20px !important; }
  #diagnosing-attr .cm-description { font-size: 16px !important; }

  #diagnosing-attr .cm-statistics {
    max-width: 620px !important;
    gap: 24px !important;
  }

  #diagnosing-attr .cm-stat-heading { font-size: 15px !important; }
  #diagnosing-attr .cm-stat-number { font-size: 52px !important; }
  #diagnosing-attr .cm-stat-label { font-size: 21px !important; }
  #diagnosing-attr .cm-stat-description { font-size: 14px !important; }

  #diagnosing-attr .cm-divider,
  #diagnosing-attr .cm-conditions-heading {
    max-width: 620px !important;
  }

  #diagnosing-attr .cm-condition-grid { gap: 14px !important; }
  #diagnosing-attr .cm-condition-card {
    min-height: 340px !important;
    padding: 18px !important;
  }
  #diagnosing-attr .cm-condition-title { font-size: 20px !important; }
  #diagnosing-attr .cm-condition-list li { font-size: 13px !important; }
}

/* Tablet */
@media screen and (min-width: 768px) and (max-width: 991px) {
  #diagnosing-attr .cm-section {
    max-width: 100% !important;
    padding: 28px !important;
  }

  #diagnosing-attr .cm-main-heading { font-size: 25px !important; }
  #diagnosing-attr .cm-subheading { font-size: 20px !important; }
  #diagnosing-attr .cm-description {
    max-width: 650px !important;
    font-size: 16px !important;
  }

  #diagnosing-attr .cm-statistics {
    max-width: 650px !important;
    gap: 28px !important;
  }

  #diagnosing-attr .cm-stat-heading { font-size: 15px !important; }
  #diagnosing-attr .cm-stat-number { font-size: 48px !important; }
  #diagnosing-attr .cm-stat-label { font-size: 20px !important; }
  #diagnosing-attr .cm-stat-description { font-size: 14px !important; }

  #diagnosing-attr .cm-divider,
  #diagnosing-attr .cm-conditions-heading {
    max-width: 650px !important;
  }

  #diagnosing-attr .cm-condition-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }

  #diagnosing-attr .cm-condition-card {
    min-height: 0 !important;
    padding: 18px !important;
  }

  #diagnosing-attr .cm-condition-title { font-size: 20px !important; }
  #diagnosing-attr .cm-condition-list li { font-size: 13px !important; }
}

/* Mobile */
@media screen and (max-width: 767px) {
  #diagnosing-attr .cm-section {
    max-width: 100% !important;
    padding: 22px 16px 34px !important;
  }

  #diagnosing-attr .cm-intro { margin-bottom: 28px !important; }
  #diagnosing-attr .cm-main-heading {
    margin-bottom: 18px !important;
    font-size: 25px !important;
  }
  #diagnosing-attr .cm-subheading {
    margin-bottom: 16px !important;
    font-size: 20px !important;
  }
  #diagnosing-attr .cm-description {
    max-width: 520px !important;
    font-size: 15px !important;
    line-height: 1.35 !important;
  }

  #diagnosing-attr .cm-statistics {
    grid-template-columns: 1fr !important;
    max-width: 340px !important;
    gap: 26px !important;
    margin-bottom: 28px !important;
  }

  #diagnosing-attr .cm-stat-heading {
    max-width: 300px !important;
    font-size: 14px !important;
  }

  #diagnosing-attr .cm-stat-number { font-size: 42px !important; }
  #diagnosing-attr .cm-stat-label {
    margin-top: 6px !important;
    font-size: 18px !important;
  }
  #diagnosing-attr .cm-stat-description {
    max-width: 290px !important;
    margin-top: 7px !important;
    font-size: 13px !important;
  }

  #diagnosing-attr .cm-divider {
    max-width: 340px !important;
    margin-bottom: 22px !important;
  }

  #diagnosing-attr .cm-conditions-heading {
    max-width: 340px !important;
    margin-bottom: 18px !important;
    font-size: 18px !important;
  }

  #diagnosing-attr .cm-condition-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  #diagnosing-attr .cm-condition-card {
    min-height: 0 !important;
    padding: 20px 16px !important;
    border-radius: 16px !important;
  }

  #diagnosing-attr .cm-condition-card--neurologic {
    background-image:
      linear-gradient(rgba(6,17,57,.76), rgba(17,28,91,.76)),
      url("/content/dam/YOUR-DAM-PATH/mobile/neurologic-card-bg-mobile.png") !important;
  }

  #diagnosing-attr .cm-condition-card--cardiac {
    background-image:
      linear-gradient(rgba(6,17,57,.76), rgba(17,28,91,.76)),
      url("/content/dam/YOUR-DAM-PATH/mobile/cardiac-card-bg-mobile.png") !important;
  }

  #diagnosing-attr .cm-condition-title { font-size: 20px !important; }
  #diagnosing-attr .cm-condition-list li {
    padding-left: 16px !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
  }

  #diagnosing-attr .cm-callout {
    flex-direction: column !important;
    gap: 8px !important;
    padding: 18px !important;
  }

  #diagnosing-attr .cm-callout-icon { font-size: 28px !important; }
  #diagnosing-attr .cm-callout-text { font-size: 15px !important; }
}

/* =========================================================
   DIAGNOSING hATTR-PN — FINAL FLOWCHART FIX
   Keep this at the absolute end of the stylesheet
   ========================================================= */


/* ---------------------------------------------------------
   1. NINE ARROWS BELOW THE NINE RED-FLAG BLOCKS
   --------------------------------------------------------- */

#diagnosing-attr #diagnosing-pn .flags-arrows {
  display: block !important;
  position: relative !important;

  width: 100% !important;
  max-width: none !important;
  height: 22px !important;
  min-height: 22px !important;

  margin: 0 0 2px !important;
  padding: 0 !important;

  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  letter-spacing: 0 !important;
  word-spacing: 0 !important;

  background-image:
    url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/Icon%20algo%20arrow%20down.png"),
    url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/Icon%20algo%20arrow%20down.png"),
    url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/Icon%20algo%20arrow%20down.png"),
    url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/Icon%20algo%20arrow%20down.png"),
    url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/Icon%20algo%20arrow%20down.png"),
    url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/Icon%20algo%20arrow%20down.png"),
    url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/Icon%20algo%20arrow%20down.png"),
    url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/Icon%20algo%20arrow%20down.png"),
    url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/Icon%20algo%20arrow%20down.png") !important;

  background-position:
    5.555% center,
    16.666% center,
    27.777% center,
    38.888% center,
    50% center,
    61.111% center,
    72.222% center,
    83.333% center,
    94.444% center !important;

  background-size:
    18px 18px,
    18px 18px,
    18px 18px,
    18px 18px,
    18px 18px,
    18px 18px,
    18px 18px,
    18px 18px,
    18px 18px !important;

  background-repeat:
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat !important;

  overflow: visible !important;
}


/* Hide the original single arrow/text inside the container */
#diagnosing-attr #diagnosing-pn .flags-arrows > * {
  display: none !important;
}


/* Remove generated arrow layers, if present */
#diagnosing-attr #diagnosing-pn .flags-arrows::before,
#diagnosing-attr #diagnosing-pn .flags-arrows::after,
#diagnosing-attr #diagnosing-pn .flags-arrows > *::before,
#diagnosing-attr #diagnosing-pn .flags-arrows > *::after {
  content: none !important;
  display: none !important;
}


/* ---------------------------------------------------------
   2. GENETIC TESTING AND hATTR-PN BOXES — 460PX
   --------------------------------------------------------- */

#diagnosing-attr #diagnosing-pn .narrow-box {
  display: block !important;
  width: 460px !important;
  max-width: calc(100% - 30px) !important;
  box-sizing: border-box !important;

  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 2px !important;
}


/* Keep the arrows above and between the narrow boxes centred */
#diagnosing-attr #diagnosing-pn .confirm-box + .arrow-row,
#diagnosing-attr #diagnosing-pn .narrow-box + .arrow-row {
  display: block !important;
  width: 460px !important;
  max-width: calc(100% - 30px) !important;

  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}


/* ---------------------------------------------------------
   3. MOBILE
   --------------------------------------------------------- */

@media screen and (max-width: 700px) {

  #diagnosing-attr #diagnosing-pn .flags-arrows {
    display: none !important;
  }

  #diagnosing-attr #diagnosing-pn .narrow-box,
  #diagnosing-attr #diagnosing-pn .confirm-box + .arrow-row,
  #diagnosing-attr #diagnosing-pn .narrow-box + .arrow-row {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* =========================================================
   DIAGNOSING ATTR-CM — FINAL REFERENCE-MATCH FIX
   Keep this section at the ABSOLUTE END of the stylesheet.
   ========================================================= */


/* ---------------------------------------------------------
   DESKTOP WIDTHS
   Row 1: 961px
   Rows 2, 3 and 4: 786px
   Final two outcome boxes: 961px
   --------------------------------------------------------- */

@media screen and (min-width: 901px) {

  /* Row 1 — Clinical suspicion: keep at 961px */
  #diagnosing-attr #diagnosing-cm
  .attr-flowchart .flow-step-primary,
  #diagnosing-attr #diagnosing-cm
  .attr-flowchart .flow-step:has(> .step-single) {
    width: 961px !important;
    max-width: calc(100% - 40px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 0 !important;
  }


  /* Rows 2 and 3 — the two step-double blocks: 786px */
  #diagnosing-attr #diagnosing-cm
  .attr-flowchart .flow-step:has(> .step-double),
  #diagnosing-attr #diagnosing-cm
  .attr-flowchart .step-double {
    width: 786px !important;
    max-width: calc(100% - 40px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #diagnosing-attr #diagnosing-cm
  .attr-flowchart .flow-step:has(> .step-double) {
    margin-bottom: 0 !important;
  }


  /* Row 4 — Genetic testing: 786px */
  #diagnosing-attr #diagnosing-cm
  .attr-flowchart .flow-step:has(> .step-genetic),
  #diagnosing-attr #diagnosing-cm
  .attr-flowchart .step-genetic {
    width: 786px !important;
    max-width: calc(100% - 40px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #diagnosing-attr #diagnosing-cm
  .attr-flowchart .flow-step:has(> .step-genetic) {
    margin-bottom: 0 !important;
  }


  /* Final two arrows and final two blocks remain at 961px */
  #diagnosing-attr #diagnosing-cm
  .attr-flowchart .outcome-arrows,
  #diagnosing-attr #diagnosing-cm
  .attr-flowchart .outcome-row {
    width: 961px !important;
    max-width: calc(100% - 40px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #diagnosing-attr #diagnosing-cm
  .attr-flowchart .outcome-arrows {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    justify-items: center !important;
    align-items: center !important;
    height: 18px !important;
    min-height: 18px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
  }

  #diagnosing-attr #diagnosing-cm
  .attr-flowchart .outcome-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px !important;
    margin-top: 0 !important;
    margin-bottom: 20px !important;
  }

  #diagnosing-attr #diagnosing-cm
  .attr-flowchart .outcome-box {
    min-width: 0 !important;
    width: 100% !important;
  }


  /* Keep the callout at the same 961px level */
  #diagnosing-attr #diagnosing-cm
  .attr-flowchart .callout-box {
    width: 961px !important;
    max-width: calc(100% - 40px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}


/* ---------------------------------------------------------
   ROW 2 AND ROW 3 LOWER SECTIONS — SAME BLUE BACKGROUND
   --------------------------------------------------------- */

#diagnosing-attr #diagnosing-cm
.attr-flowchart .step-double .step-bottom {
  background: #E2FCFD99 !important;
  border-top: 1px solid #94A0CE !important;
}

#diagnosing-attr #diagnosing-cm
.attr-flowchart .step-double .step-result {
  color: #00215F !important;
}


/* ---------------------------------------------------------
   REMOVE EXTRA SPACE ABOVE AND BELOW ALL CM ARROWS
   This also fixes the first arrow between rows 1 and 2.
   --------------------------------------------------------- */

#diagnosing-attr #diagnosing-cm
.attr-flowchart > .arrow-down,
#diagnosing-attr #diagnosing-cm
.attr-flowchart .outcome-arrows .arrow-down {
  display: block !important;

  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;

  margin: 0 auto !important;
  padding: 0 !important;

  line-height: 0 !important;
  vertical-align: top !important;
}


/* Ensure the first arrow does not retain inherited spacing */
#diagnosing-attr #diagnosing-cm
.attr-flowchart .flow-step-primary + .arrow-down,
#diagnosing-attr #diagnosing-cm
.attr-flowchart .flow-step:has(> .step-single) + .arrow-down {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}


/* Remove spacing from all blocks immediately around arrows */
#diagnosing-attr #diagnosing-cm
.attr-flowchart .arrow-down + .flow-step,
#diagnosing-attr #diagnosing-cm
.attr-flowchart .flow-step + .arrow-down {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}


/* If the arrow contains an image, remove its own inline spacing */
#diagnosing-attr #diagnosing-cm
.attr-flowchart .arrow-down img,
#diagnosing-attr #diagnosing-cm
.attr-flowchart .outcome-arrows .arrow-down img {
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
}


/* ---------------------------------------------------------
   CALLOUT — LEFT-ALIGNED TEXT
   --------------------------------------------------------- */

#diagnosing-attr #diagnosing-cm
.attr-flowchart .callout-box {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;

  padding: 16px 20px !important;
  text-align: left !important;
}

#diagnosing-attr #diagnosing-cm
.attr-flowchart .callout-icon {
  flex: 0 0 auto !important;
  margin: 0 10px 0 0 !important;
}

#diagnosing-attr #diagnosing-cm
.attr-flowchart .callout-text {
  flex: 1 1 auto !important;
  width: auto !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;

  text-align: left !important;
}

#diagnosing-attr #diagnosing-cm
.attr-flowchart .callout-text,
#diagnosing-attr #diagnosing-cm
.attr-flowchart .callout-text p,
#diagnosing-attr #diagnosing-cm
.attr-flowchart .callout-text span,
#diagnosing-attr #diagnosing-cm
.attr-flowchart .callout-text strong,
#diagnosing-attr #diagnosing-cm
.attr-flowchart .callout-text a {
  text-align: left !important;
}


/* ---------------------------------------------------------
   TABLET AND MOBILE
   --------------------------------------------------------- */

@media screen and (max-width: 900px) {

  #diagnosing-attr #diagnosing-cm
  .attr-flowchart .flow-step-primary,
  #diagnosing-attr #diagnosing-cm
  .attr-flowchart .flow-step,
  #diagnosing-attr #diagnosing-cm
  .attr-flowchart .step-double,
  #diagnosing-attr #diagnosing-cm
  .attr-flowchart .step-genetic,
  #diagnosing-attr #diagnosing-cm
  .attr-flowchart .outcome-arrows,
  #diagnosing-attr #diagnosing-cm
  .attr-flowchart .outcome-row,
  #diagnosing-attr #diagnosing-cm
  .attr-flowchart .callout-box {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* =========================================================
   MIXED-PHENOTYPE — MULTIDISCIPLINARY WIDTH AND ARROW FIX
   Keep this at the absolute end of the stylesheet
   ========================================================= */


/* ---------------------------------------------------------
   1. CHANGE ONLY THE MULTIDISCIPLINARY CONSULTATION ROW
   Reference width: 790px
   --------------------------------------------------------- */

@media screen and (min-width: 901px) {

  /*
   * Structure:
   * assessment columns
   * → split arrows
   * → multidisciplinary consultation box
   *
   * This selector targets only that consultation box.
   */
  #diagnosing-attr #mixed-phenotype
  .mp-two-col + .mp-split-arrows + .mp-step {
    width: 790px !important;
    max-width: calc(100% - 40px) !important;

    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 0 !important;
  }
}


/* ---------------------------------------------------------
   2. REMOVE TOP/BOTTOM SPACE AROUND STANDARD ARROWS
   --------------------------------------------------------- */

#diagnosing-attr #mixed-phenotype .mp-arrow-down {
  display: block !important;
  position: relative !important;

  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;

  margin: 0 auto !important;
  padding: 0 !important;

  line-height: 0 !important;
  vertical-align: top !important;
}


/* Remove any spacing inherited from surrounding flowchart blocks */
#diagnosing-attr #mixed-phenotype
.mp-step + .mp-arrow-down,
#diagnosing-attr #mixed-phenotype
.mp-arrow-down + .mp-step,
#diagnosing-attr #mixed-phenotype
.mp-two-col + .mp-arrow-down,
#diagnosing-attr #mixed-phenotype
.mp-arrow-down + .mp-two-col {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}


/* If an arrow contains an image, remove the image's own spacing */
#diagnosing-attr #mixed-phenotype .mp-arrow-down img {
  display: block !important;

  width: 18px !important;
  height: 18px !important;

  margin: 0 !important;
  padding: 0 !important;
}


/* ---------------------------------------------------------
   3. REMOVE SPACE AROUND THE TWO SPLIT-ARROW ROWS
   --------------------------------------------------------- */

#diagnosing-attr #mixed-phenotype .mp-split-arrows {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: center !important;
  justify-items: center !important;

  width: 100% !important;
  height: 18px !important;
  min-height: 18px !important;

  margin: 0 !important;
  padding: 0 !important;

  line-height: 0 !important;
}

#diagnosing-attr #mixed-phenotype
.mp-split-arrows .mp-arrow-down {
  margin: 0 auto !important;
}


/* Prevent the assessment row from adding space below it */
#diagnosing-attr #mixed-phenotype .mp-two-col {
  margin-bottom: 0 !important;
}


/* Prevent the consultation box from adding space before its next arrow */
#diagnosing-attr #mixed-phenotype
.mp-two-col + .mp-split-arrows + .mp-step {
  margin-top: 0 !important;
}


/* ---------------------------------------------------------
   4. MOBILE
   --------------------------------------------------------- */

@media screen and (max-width: 900px) {

  #diagnosing-attr #mixed-phenotype
  .mp-two-col + .mp-split-arrows + .mp-step {
    width: 100% !important;
    max-width: 100% !important;

    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}


#diagnosing-attr span.about-attr-header {
    color: #FFFFFF !important;
}

/* Bottom monitoring section - vertical divider */

#diagnosing-attr #mixed-phenotype .mp-monitor-bottom,
#diagnosing-attr #mixed-phenotype .mp-monitor-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

#diagnosing-attr #mixed-phenotype .mp-monitor-bottom > :first-child,
#diagnosing-attr #mixed-phenotype .mp-monitor-grid > :first-child {
    border-right: 1px solid #9BB3E5 !important;
    padding-right: 18px;
}

#diagnosing-attr #mixed-phenotype .mp-monitor-bottom > :last-child,
#diagnosing-attr #mixed-phenotype .mp-monitor-grid > :last-child {
    padding-left: 18px;
}

/* =========================================================
   MIXED-PHENOTYPE — MONITORING DIVIDER RESPONSIVE FIX
   Keep this at the absolute end of the stylesheet
   ========================================================= */


/* Keep the monitoring lower section as two equal columns
   on desktop, tablet and mobile */
#diagnosing-attr #mixed-phenotype
.mp-step-bottom.mp-two-col-flat {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: stretch !important;

  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;

  border-top: 1px solid #94A0CE !important;
  box-sizing: border-box !important;
}


/* Both lower assessment columns */
#diagnosing-attr #mixed-phenotype
.mp-step-bottom.mp-two-col-flat > .mp-col-flat {
  display: block !important;
  min-width: 0 !important;
  width: auto !important;

  margin: 0 !important;
  padding: 14px 18px !important;

  border: 0 !important;
  box-sizing: border-box !important;
}


/* Vertical dividing line between cardiology and neurology */
#diagnosing-attr #mixed-phenotype
.mp-step-bottom.mp-two-col-flat > .mp-col-flat:first-child {
  border-right: 1px solid #94A0CE !important;
}


/* Ensure no competing border appears on the second column */
#diagnosing-attr #mixed-phenotype
.mp-step-bottom.mp-two-col-flat > .mp-col-flat:last-child {
  border-left: 0 !important;
}


/* ---------------------------------------------------------
   TABLET
   Keep the same two-column structure as the reference
   --------------------------------------------------------- */

@media screen and (max-width: 900px) {

  #diagnosing-attr #mixed-phenotype
  .mp-step-bottom.mp-two-col-flat {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #diagnosing-attr #mixed-phenotype
  .mp-step-bottom.mp-two-col-flat > .mp-col-flat {
    padding: 12px 14px !important;
    text-align: center !important;
  }

  #diagnosing-attr #mixed-phenotype
  .mp-step-bottom.mp-two-col-flat > .mp-col-flat:first-child {
    border-right: 1px solid #94A0CE !important;
    border-bottom: 0 !important;
  }
}


/* ---------------------------------------------------------
   MOBILE
   Still keep two side-by-side columns
   --------------------------------------------------------- */

@media screen and (max-width: 480px) {

  #diagnosing-attr #mixed-phenotype
  .mp-step-bottom.mp-two-col-flat {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #diagnosing-attr #mixed-phenotype
  .mp-step-bottom.mp-two-col-flat > .mp-col-flat {
    min-width: 0 !important;
    padding: 10px 8px !important;

    font-size: 13px !important;
    line-height: 1.25 !important;
    text-align: center !important;

    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

  #diagnosing-attr #mixed-phenotype
  .mp-step-bottom.mp-two-col-flat > .mp-col-flat:first-child {
    border-right: 1px solid #94A0CE !important;
    border-bottom: 0 !important;
  }

  #diagnosing-attr #mixed-phenotype
  .mp-step-bottom.mp-two-col-flat .mp-bold {
    display: inline !important;
  }
}

/* =========================================================
   COMMON MISDIAGNOSES — FINAL CORRECTION
   Keep this at the absolute end of the stylesheet
   ========================================================= */


/* ---------------------------------------------------------
   1. REMOVE THE EXTRA ARROW ABOVE THE MAIN HEADING
   --------------------------------------------------------- */

#diagnosing-attr .cm-section::before {
  content: none !important;
  display: none !important;
}


/* ---------------------------------------------------------
   2. RESTORE THE ORIGINAL SECTION WIDTH / LAYOUT
   --------------------------------------------------------- */

#diagnosing-attr .cm-section {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}


/* Keep only the intro text centred without narrowing the
   whole section or affecting cards/callout */
#diagnosing-attr .cm-intro {
  width: 100% !important;
  max-width: 1001px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

#diagnosing-attr .cm-main-heading {
  width: 100% !important;
  max-width: 1001px !important;
  margin-left: auto !important;
  margin-right: auto !important;

  font-size: 30px !important;
  line-height: 1.2 !important;
  text-align: center !important;
}

#diagnosing-attr .cm-subheading {
  width: 100% !important;
  max-width: 1001px !important;
  margin-left: auto !important;
  margin-right: auto !important;

  font-size: 20px !important;
  line-height: 1.3 !important;
  text-align: center !important;
}

#diagnosing-attr .cm-description {
  width: 100% !important;
  max-width: 1001px !important;
  margin-left: auto !important;
  margin-right: auto !important;

  padding-left: 20px !important;
  padding-right: 20px !important;
  box-sizing: border-box !important;

  font-size: 18px !important;
  line-height: 1.45 !important;
  text-align: center !important;
}


/* ---------------------------------------------------------
   3. REPLACE THE GRADIENT IMAGE WITH A SIMPLE BLUE LINE
   --------------------------------------------------------- */

#diagnosing-attr .cm-divider {
  display: none !important;
}

#diagnosing-attr .cm-conditions-heading {
  position: relative !important;

  width: 100% !important;
  max-width: none !important;

  margin: 42px auto 18px !important;
  padding: 0 !important;

  text-align: center !important;
}

#diagnosing-attr .cm-conditions-heading::before {
  content: "" !important;
  position: absolute !important;

  left: 50% !important;
  top: -22px !important;
  transform: translateX(-50%) !important;

  width: 820px !important;
  max-width: calc(100% - 40px) !important;
  height: 2px !important;

  background: #C9D8F4 !important;
}


/* ---------------------------------------------------------
   4. RESTORE THE TWO DARK BLOCKS TO THEIR ORIGINAL WIDTH
   --------------------------------------------------------- */

#diagnosing-attr .cm-condition-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 20px !important;

  width: 100% !important;
  max-width: none !important;

  margin-left: 0 !important;
  margin-right: 0 !important;
}

#diagnosing-attr .cm-condition-card {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;

  overflow: hidden !important;
  box-sizing: border-box !important;

  border-radius: 20px !important;
}

#diagnosing-attr .cm-condition-card--neurologic,
#diagnosing-attr .cm-condition-card--cardiac {
  border-radius: 20px !important;
}


/* ---------------------------------------------------------
   5. RESTORE FOOTNOTE WIDTH AND ALIGNMENT
   --------------------------------------------------------- */

#diagnosing-attr .cm-footnote {
  width: 100% !important;
  max-width: none !important;

  margin: 14px 0 24px !important;
  padding: 0 !important;

  text-align: left !important;
}

#diagnosing-attr .cm-footnote p {
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}


/* ---------------------------------------------------------
   6. RESTORE CALLOUT TO FULL ORIGINAL WIDTH
   --------------------------------------------------------- */

#diagnosing-attr .cm-callout {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 14px !important;

  width: 100% !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 16px 20px !important;
  box-sizing: border-box !important;

  text-align: left !important;
}


/* Keep the authored callout icon and do not add another one */
#diagnosing-attr .cm-callout-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  flex: 0 0 auto !important;
  width: auto !important;
  height: auto !important;

  font-size: 24px !important;
  line-height: 1 !important;
}

#diagnosing-attr .cm-callout-icon::before,
#diagnosing-attr .cm-callout-icon::after {
  content: none !important;
  display: none !important;
}

#diagnosing-attr .cm-callout-text {
  flex: 1 1 auto !important;
  width: auto !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;

  text-align: left !important;
}


/* ---------------------------------------------------------
   7. TABLET / MOBILE
   --------------------------------------------------------- */

@media screen and (max-width: 700px) {

  #diagnosing-attr .cm-condition-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  #diagnosing-attr .cm-condition-card,
  #diagnosing-attr .cm-condition-card--neurologic,
  #diagnosing-attr .cm-condition-card--cardiac {
    border-radius: 20px !important;
  }

  #diagnosing-attr .cm-main-heading {
    font-size: 26px !important;
  }

  #diagnosing-attr .cm-subheading {
    font-size: 18px !important;
  }

  #diagnosing-attr .cm-description {
    font-size: 16px !important;
  }
}

/* =========================================================
   COMMON MISDIAGNOSES — FINAL WIDTH RESTORE
   Keep this at the absolute end of the stylesheet
   ========================================================= */

/* Remove any generated arrow above the section */
#diagnosing-attr .cm-section::before {
  content: none !important;
  display: none !important;
}

/* Keep the complete section centred at the intended width */
#diagnosing-attr .cm-section {
  width: calc(100% - 40px) !important;
  max-width: 1001px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  background: transparent !important;
}

/* Intro */
#diagnosing-attr .cm-intro {
  width: 100% !important;
  max-width: 1001px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

#diagnosing-attr .cm-main-heading {
  font-size: 30px !important;
  line-height: 1.2 !important;
  text-align: center !important;
}

#diagnosing-attr .cm-subheading {
  font-size: 20px !important;
  line-height: 1.3 !important;
  text-align: center !important;
}

#diagnosing-attr .cm-description {
  max-width: 1001px !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  font-size: 18px !important;
  line-height: 1.45 !important;
  text-align: center !important;
}

/* Statistics stay centred */
#diagnosing-attr .cm-statistics {
  width: 100% !important;
  max-width: 820px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Hide authored gradient image */
#diagnosing-attr .cm-divider {
  display: none !important;
}

/* Straight separator line above conditions heading */
#diagnosing-attr .cm-conditions-heading {
  position: relative !important;
  width: 100% !important;
  max-width: 820px !important;
  margin: 42px auto 18px !important;
  padding: 0 !important;
  text-align: center !important;
}

#diagnosing-attr .cm-conditions-heading::before {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: -22px !important;
  transform: translateX(-50%) !important;
  width: 820px !important;
  max-width: 100% !important;
  height: 2px !important;
  background: #C9D8F4 !important;
}

/* Restore the two cards to the reference width */
#diagnosing-attr .cm-condition-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: 820px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

#diagnosing-attr .cm-condition-card {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

#diagnosing-attr .cm-condition-card--neurologic {
  border-radius: 20px 0 0 20px !important;
}

#diagnosing-attr .cm-condition-card--cardiac {
  border-radius: 0 20px 20px 0 !important;
}

/* Footnote stays aligned with the cards */
#diagnosing-attr .cm-footnote {
  width: 100% !important;
  max-width: 820px !important;
  margin: 14px auto 24px !important;
  padding: 0 !important;
  text-align: left !important;
}

#diagnosing-attr .cm-footnote p {
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}

/* Restore callout width */
#diagnosing-attr .cm-callout {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 14px !important;
  width: 100% !important;
  max-width: 820px !important;
  margin: 0 auto !important;
  padding: 16px 20px !important;
  box-sizing: border-box !important;
  text-align: left !important;
}

/* Keep only the authored icon */
#diagnosing-attr .cm-callout-icon {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  width: auto !important;
  height: auto !important;
  font-size: 24px !important;
  line-height: 1 !important;
}

#diagnosing-attr .cm-callout-icon::before,
#diagnosing-attr .cm-callout-icon::after {
  content: none !important;
  display: none !important;
}

#diagnosing-attr .cm-callout-text {
  flex: 1 1 auto !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}

/* Tablet */
@media screen and (max-width: 900px) {
  #diagnosing-attr .cm-section {
    width: calc(100% - 30px) !important;
  }
}

/* Mobile */
@media screen and (max-width: 600px) {
  #diagnosing-attr .cm-section {
    width: calc(100% - 24px) !important;
  }

  #diagnosing-attr .cm-condition-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  #diagnosing-attr .cm-condition-card--neurologic,
  #diagnosing-attr .cm-condition-card--cardiac {
    border-radius: 20px !important;
  }

  #diagnosing-attr .cm-main-heading {
    font-size: 26px !important;
  }

  #diagnosing-attr .cm-subheading {
    font-size: 18px !important;
  }

  #diagnosing-attr .cm-description {
    font-size: 16px !important;
  }
}

/* =========================================================
   COMMON MISDIAGNOSES — WIDTH CORRECTION
   Keep this at the absolute end of the stylesheet
   ========================================================= */

#diagnosing-attr .cm-section::before {
  content: none !important;
  display: none !important;
}

#diagnosing-attr .cm-section {
  width: calc(100% - 40px) !important;
  max-width: 1001px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

#diagnosing-attr .cm-intro,
#diagnosing-attr .cm-statistics,
#diagnosing-attr .cm-conditions-heading,
#diagnosing-attr .cm-condition-grid,
#diagnosing-attr .cm-footnote,
#diagnosing-attr .cm-callout {
  width: 100% !important;
  max-width: 1001px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

#diagnosing-attr .cm-main-heading {
  font-size: 30px !important;
  text-align: center !important;
}

#diagnosing-attr .cm-subheading {
  font-size: 20px !important;
  text-align: center !important;
}

#diagnosing-attr .cm-description {
  width: 100% !important;
  max-width: 1001px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 20px !important;
  box-sizing: border-box !important;
  font-size: 18px !important;
  line-height: 1.45 !important;
  text-align: center !important;
}

#diagnosing-attr .cm-divider {
  display: none !important;
}

#diagnosing-attr .cm-conditions-heading {
  position: relative !important;
  margin-top: 42px !important;
  margin-bottom: 18px !important;
  text-align: center !important;
}

#diagnosing-attr .cm-conditions-heading::before {
  content: "" !important;
  position: absolute !important;
  top: -22px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 820px !important;
  max-width: calc(100% - 40px) !important;
  height: 2px !important;
  background: #C9D8F4 !important;
}

#diagnosing-attr .cm-condition-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 20px !important;
}

#diagnosing-attr .cm-condition-card {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  border-radius: 20px !important;
}

#diagnosing-attr .cm-condition-card--neurologic,
#diagnosing-attr .cm-condition-card--cardiac {
  border-radius: 20px !important;
}

#diagnosing-attr .cm-footnote {
  margin-top: 14px !important;
  margin-bottom: 24px !important;
  text-align: left !important;
}

#diagnosing-attr .cm-footnote p {
  margin: 0 !important;
  text-align: left !important;
}

#diagnosing-attr .cm-callout {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 14px !important;
  padding: 16px 20px !important;
  text-align: left !important;
}

#diagnosing-attr .cm-callout-icon {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 28px !important;
  width: 28px !important;
  height: 28px !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

#diagnosing-attr .cm-callout-icon::before {
  content: "💡" !important;
  display: block !important;
  font-size: 24px !important;
  line-height: 1 !important;
}

#diagnosing-attr .cm-callout-icon::after {
  content: none !important;
  display: none !important;
}

#diagnosing-attr .cm-callout-text {
  flex: 1 1 auto !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}

@media screen and (max-width: 900px) {
  #diagnosing-attr .cm-section {
    width: calc(100% - 30px) !important;
  }
}

@media screen and (max-width: 600px) {
  #diagnosing-attr .cm-section {
    width: calc(100% - 24px) !important;
  }

  #diagnosing-attr .cm-condition-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  #diagnosing-attr .cm-main-heading {
    font-size: 26px !important;
  }

  #diagnosing-attr .cm-subheading {
    font-size: 18px !important;
  }

  #diagnosing-attr .cm-description {
    font-size: 16px !important;
  }
}


/* Restore original wrapper alignment */
#diagnosing-attr .cm-section {
    position: relative !important;
    width: 100% !important;
    max-width: 1265px !important;
    margin: 0 auto !important;
    padding: 38px 0 42px 248px !important;
    left: auto !important;
    right: auto !important;
    box-sizing: border-box !important;
}
/* =========================================================
   COMMON MISDIAGNOSES — FINAL DAM ASSET OVERRIDES
   Keep this section at the absolute end of the stylesheet.
   ========================================================= */

/* Use the separator image authored in HTML; do not generate one in CSS. */
#diagnosing-attr .cm-divider {
  display: block !important;
  width: 100% !important;
  max-width: 820px !important;
  height: auto !important;
  margin: 0 auto 18px !important;
}

#diagnosing-attr .cm-conditions-heading::before {
  content: none !important;
  display: none !important;
  background: none !important;
}

#diagnosing-attr .cm-conditions-heading {
  margin-top: 0 !important;
}

/* Neurologic block background. */
#diagnosing-attr .cm-condition-card--neurologic,
#diagnosing-attr #there-timely-container .dd-card:first-child {
  background-color: #101A4D !important;
  background-image: url('/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/Group%2011505.jpg') !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

/* Cardiac block background. */
#diagnosing-attr .cm-condition-card--cardiac,
#diagnosing-attr #there-timely-container .dd-card:nth-child(2) {
  background-color: #101A4D !important;
  background-image: url('/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/container%20(1).jpg') !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

/* DAM lightbulb icon for the callout. */
#diagnosing-attr .cm-callout-icon,
#diagnosing-attr .attr-flowchart .callout-icon,
#diagnosing-attr #diagnosing-pn .callout .bulb,
#diagnosing-attr #mixed-phenotype .mp-callout-icon,
#diagnosing-attr #there-timely-container .dd-callout-icon {
  display: block !important;
  flex: 0 0 32px !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  margin: 0 10px 0 0 !important;
  padding: 0 !important;
  background: url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/lightbulb%20icon%20gradient_1.png") center center / contain no-repeat !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  overflow: hidden !important;
}

#diagnosing-attr .cm-callout-icon::before,
#diagnosing-attr .cm-callout-icon::after,
#diagnosing-attr .attr-flowchart .callout-icon::before,
#diagnosing-attr .attr-flowchart .callout-icon::after,
#diagnosing-attr #diagnosing-pn .callout .bulb::before,
#diagnosing-attr #diagnosing-pn .callout .bulb::after,
#diagnosing-attr #mixed-phenotype .mp-callout-icon::before,
#diagnosing-attr #mixed-phenotype .mp-callout-icon::after,
#diagnosing-attr #there-timely-container .dd-callout-icon::before,
#diagnosing-attr #there-timely-container .dd-callout-icon::after {
  content: none !important;
  display: none !important;
}

/* =========================================================
   FINAL FOOTER PROMO ALIGNMENT OVERRIDES
   Keep this block at the absolute end of the stylesheet.
   ========================================================= */

@media screen and (min-width: 992px) {
  #diagnosing-attr .sec3-mainbg {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 20px !important;

    width: 100% !important;
    max-width: none !important;
    padding: 38px 0 0 !important;
	padding-left: calc((100% - 500px) / 2) !important;
    padding-right: calc((100% - 1001px) / 2) !important;
  }

  #diagnosing-attr .sec3-mainbg > .patient-box,
  #diagnosing-attr .sec3-mainbg > div:not(.patient-box) {
    flex: 0 0 490px !important;
    width: 490px !important;
    min-width: 490px !important;
    max-width: 490px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #diagnosing-attr .sec3-mainbg .image-shadow,
  #diagnosing-attr .sec3-mainbg .border-box {
    width: 490px !important;
    min-width: 490px !important;
    max-width: 490px !important;
  }
}

/* First promo image */
#diagnosing-attr .sec3-mainbg > .patient-box .smallbox-title::before {
  background-image: url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/Deposit%20throughout%20b.png") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
}

/* Second promo image */
#diagnosing-attr .sec3-mainbg > div:not(.patient-box) .smallbox-title::before {
  background-image: url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/Group%2046677.png") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
}

@media screen and (max-width: 991px) {
  #diagnosing-attr .sec3-mainbg > .patient-box,
  #diagnosing-attr .sec3-mainbg > div:not(.patient-box),
  #diagnosing-attr .sec3-mainbg .image-shadow,
  #diagnosing-attr .sec3-mainbg .border-box {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 490px !important;
  }
}

/* =========================================================
   FINAL FIX — COMMON MISDIAGNOSES CALLOUT ICON
   Uses a pseudo-element so the DAM PNG renders reliably.
   Keep this at the absolute end of the stylesheet.
   ========================================================= */
#diagnosing-attr .cm-callout {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

#diagnosing-attr .cm-callout-icon {
  position: relative !important;
  display: block !important;
  flex: 0 0 32px !important;
  width: 32px !important;
  height: 36px !important;
  min-width: 32px !important;
  min-height: 36px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  overflow: visible !important;
}

#diagnosing-attr .cm-callout-icon::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  background-image: url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/lightbulb%20icon%20gradient_1.png") !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: contain !important;
  opacity: 1 !important;
  visibility: visible !important;
}

#diagnosing-attr .cm-callout-text {
  flex: 1 1 auto !important;
  margin: 0 !important;
}


/* =========================================================
   COMMON MISDIAGNOSES — TABLET AND MOBILE FIX
   Keep this at the absolute end of the stylesheet
   ========================================================= */

@media screen and (max-width: 1024px) {

  /* Reset the complete section */
  #diagnosing-attr .cm-section {
    display: block !important;
    position: relative !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin: 0 auto !important;
    padding: 30px 20px !important;

    left: auto !important;
    right: auto !important;
    transform: none !important;

    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  #diagnosing-attr .cm-section *,
  #diagnosing-attr .cm-section *::before,
  #diagnosing-attr .cm-section *::after {
    box-sizing: border-box !important;
  }

  /* Intro content */
  #diagnosing-attr .cm-intro {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin: 0 auto !important;
    padding: 0 !important;

    text-align: center !important;
    left: auto !important;
    transform: none !important;
  }

  #diagnosing-attr .cm-main-heading {
    width: 100% !important;
    max-width: 100% !important;

    margin: 0 0 18px !important;
    padding: 0 !important;

    font-size: 28px !important;
    line-height: 1.15 !important;
    text-align: center !important;

    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  #diagnosing-attr .cm-subheading {
    width: 100% !important;
    max-width: 100% !important;

    margin: 0 0 18px !important;
    padding: 0 !important;

    font-size: 20px !important;
    line-height: 1.25 !important;
    text-align: center !important;

    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  #diagnosing-attr .cm-description {
    width: 100% !important;
    max-width: 720px !important;

    margin: 0 auto 28px !important;
    padding: 0 !important;

    font-size: 17px !important;
    line-height: 1.45 !important;
    text-align: center !important;

    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
  }

  /* Statistics */
  #diagnosing-attr .cm-statistics {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 30px !important;

    width: 100% !important;
    max-width: 760px !important;

    margin: 0 auto 28px !important;
    padding: 0 !important;

    left: auto !important;
    transform: none !important;
  }

  #diagnosing-attr .cm-stat {
    flex: 1 1 280px !important;

    width: auto !important;
    max-width: 340px !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 10px !important;

    text-align: center !important;
  }

  #diagnosing-attr .cm-stat-heading,
  #diagnosing-attr .cm-stat-number,
  #diagnosing-attr .cm-stat-label,
  #diagnosing-attr .cm-stat-description {
    width: 100% !important;
    max-width: 100% !important;

    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;

    text-align: center !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
  }

  /* Authored divider image */
  #diagnosing-attr .cm-divider {
    display: block !important;

    width: 100% !important;
    max-width: 760px !important;
    height: auto !important;

    margin: 0 auto 20px !important;
    padding: 0 !important;
  }

  /* Do not generate another separator from CSS */
  #diagnosing-attr .cm-conditions-heading::before,
  #diagnosing-attr .cm-conditions-heading::after {
    content: none !important;
    display: none !important;
  }

  #diagnosing-attr .cm-conditions-heading {
    position: static !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 auto 20px !important;
    padding: 0 !important;

    font-size: 18px !important;
    line-height: 1.25 !important;
    text-align: center !important;

    white-space: normal !important;
    overflow-wrap: break-word !important;
  }

  /* Neurologic and Cardiac cards */
  #diagnosing-attr .cm-condition-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;

    width: 100% !important;
    max-width: 760px !important;
    min-width: 0 !important;

    margin: 0 auto 20px !important;
    padding: 0 !important;

    left: auto !important;
    transform: none !important;
  }

  #diagnosing-attr .cm-condition-card,
  #diagnosing-attr .cm-condition-card--neurologic,
  #diagnosing-attr .cm-condition-card--cardiac {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;

    margin: 0 !important;
    padding: 24px 20px !important;

    left: auto !important;
    right: auto !important;
    transform: none !important;

    background-position: center !important;
    background-size: cover !important;
    border-radius: 18px !important;
  }

  #diagnosing-attr .cm-condition-content {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  #diagnosing-attr .cm-condition-title {
    width: 100% !important;
    margin: 0 0 15px !important;
    padding: 0 !important;

    font-size: 22px !important;
    line-height: 1.2 !important;
    text-align: left !important;
  }

  #diagnosing-attr .cm-condition-list {
    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  #diagnosing-attr .cm-condition-list li {
    width: 100% !important;
    max-width: 100% !important;

    padding-left: 18px !important;

    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
  }

  /* Footnote */
  #diagnosing-attr .cm-footnote {
    width: 100% !important;
    max-width: 760px !important;

    margin: 0 auto 18px !important;
    padding: 0 !important;

    text-align: left !important;
  }

  /* Callout */
  #diagnosing-attr .cm-callout {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;

    width: 100% !important;
    max-width: 760px !important;
    min-width: 0 !important;

    margin: 0 auto !important;
    padding: 14px 16px !important;

    left: auto !important;
    transform: none !important;
  }

  #diagnosing-attr .cm-callout-text {
    flex: 1 1 auto !important;

    width: auto !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
  }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media screen and (max-width: 600px) {

  #diagnosing-attr .cm-section {
    padding: 24px 16px !important;
  }

  #diagnosing-attr .cm-main-heading {
    font-size: 26px !important;
  }

  #diagnosing-attr .cm-subheading {
    font-size: 19px !important;
  }

  #diagnosing-attr .cm-description {
    font-size: 16px !important;
  }

  #diagnosing-attr .cm-statistics {
    display: block !important;
  }

  #diagnosing-attr .cm-stat {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 auto 30px !important;
    padding: 0 !important;
  }

  #diagnosing-attr .cm-condition-card,
  #diagnosing-attr .cm-condition-card--neurologic,
  #diagnosing-attr .cm-condition-card--cardiac {
    padding: 22px 18px !important;
  }

  #diagnosing-attr .cm-callout {
    align-items: flex-start !important;
    padding: 13px 14px !important;
  }
}

/* =========================================================
   FINAL MOBILE VIEWPORT WIDTH FIX — "SUR CETTE PAGE"
   Keep this block at the absolute end of the stylesheet.
   ========================================================= */

@media screen and (max-width: 991px) {

  /* Main first-section container must not restrict the mobile nav. */
  #diagnosing-attr #diagnosing-pn {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  /*
   * Support the current AEM structure:
   * div.text > #this-page > .this-page > .this-page-items > .steps-card
   */
  #diagnosing-attr #diagnosing-pn > div.text:has(#this-page),
  #diagnosing-attr #diagnosing-pn > div.text:has(.this-page),
  #diagnosing-attr #diagnosing-pn #this-page,
  #diagnosing-attr #diagnosing-pn .this-page,
  #diagnosing-attr #diagnosing-pn .this-page-items {
    position: static !important;
    display: block !important;

    width: calc(100vw - 48px) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 48px) !important;

    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;

    overflow: visible !important;
    box-sizing: border-box !important;
  }

  /* Place the dropdown 24px from both viewport edges. */
  #diagnosing-attr #diagnosing-pn > div.text:has(#this-page),
  #diagnosing-attr #diagnosing-pn > div.text:has(.this-page) {
    margin-right: 24px !important;
    margin-left: 24px !important;
  }

  /* Remove old percentage widths from all possible sidebar wrappers. */
  #diagnosing-attr #diagnosing-pn .aboutattr-cards-container,
  #diagnosing-attr #diagnosing-pn .diagnosing-importance-container,
  #diagnosing-attr #diagnosing-pn .diagnosis-cards-container,
  #diagnosing-attr #diagnosing-pn .diagnosis-cards-items,
  #diagnosing-attr #diagnosing-pn .steps-card {
    position: static !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;
    box-sizing: border-box !important;
  }

  /* Full-width visible dropdown header. */
  #diagnosing-attr #diagnosing-pn
  .steps-card > .steps-card-icon:first-child {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    min-height: 64px !important;

    margin: 0 !important;
    padding: 16px 64px 16px 24px !important;

    background: #E9EBF2 !important;
    border: 0 !important;
    border-radius: 18px !important;

    box-sizing: border-box !important;
  }

  #diagnosing-attr #diagnosing-pn
  .steps-card > .steps-card-icon:first-child::after {
    right: 24px !important;
  }

  /* The expanded dropdown must retain the same viewport width. */
  #diagnosing-attr #diagnosing-pn .steps-card.mobile-nav-open {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    overflow: hidden !important;
    border-radius: 18px !important;
    box-sizing: border-box !important;
  }

  #diagnosing-attr #diagnosing-pn
  .steps-card.mobile-nav-open
  > .steps-card-icon:nth-child(odd):not(:first-child) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

@media screen and (max-width: 480px) {

  #diagnosing-attr #diagnosing-pn > div.text:has(#this-page),
  #diagnosing-attr #diagnosing-pn > div.text:has(.this-page),
  #diagnosing-attr #diagnosing-pn #this-page,
  #diagnosing-attr #diagnosing-pn .this-page,
  #diagnosing-attr #diagnosing-pn .this-page-items {
    width: calc(100vw - 32px) !important;
    max-width: calc(100vw - 32px) !important;
  }

  #diagnosing-attr #diagnosing-pn > div.text:has(#this-page),
  #diagnosing-attr #diagnosing-pn > div.text:has(.this-page) {
    margin-right: 16px !important;
    margin-left: 16px !important;
  }

  #diagnosing-attr #diagnosing-pn
  .steps-card > .steps-card-icon:first-child {
    min-height: 60px !important;
    padding: 14px 56px 14px 20px !important;
    border-radius: 17px !important;
  }

  #diagnosing-attr #diagnosing-pn
  .steps-card > .steps-card-icon:first-child::after {
    right: 20px !important;
  }
}


/* ===== Updated Callout Alignment Fix ===== */

.cm-callout{
    display:flex !important;
    align-items:center !important;
    gap:16px;
    padding:18px 22px;
}

.cm-callout-icon{
    flex:0 0 34px;
    width:34px;
    height:34px;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    align-self:center !important;
    font-size:28px;
    line-height:1;
    margin:0 !important;
}

.cm-callout-text{
    flex:1;
    margin:0 !important;
}

/* =========================================================
   FINAL DIAGNOSING PAGE TYPOGRAPHY OVERRIDES
   Keep this block at the ABSOLUTE END of the stylesheet.
   ========================================================= */


/* =========================================================
   1. hATTR-PN FLOWCHART
   ========================================================= */

/* "Adapted from the 2021..." must remain normal/regular. */
#diagnosing-attr #diagnosing-pn #hattrpn-flowchart .footnotes,
#diagnosing-attr #diagnosing-pn #hattrpn-flowchart .footnotes div,
#diagnosing-attr #diagnosing-pn #hattrpn-flowchart .footnotes .src {
  font-family: "Kanit-Regular", "Kanit", Arial, sans-serif !important;
  font-style: normal !important;
  font-weight: 400 !important;
}

/* Keep the source-line superscript regular as well. */
#diagnosing-attr #diagnosing-pn #hattrpn-flowchart .footnotes sup {
  font-family: "Kanit-Regular", "Kanit", Arial, sans-serif !important;
  font-style: normal !important;
  font-weight: 400 !important;
}

/* Post-diagnosis callout: Kanit SemiBold. */
#diagnosing-attr #diagnosing-pn #hattrpn-flowchart .callout p,
#diagnosing-attr #diagnosing-pn #hattrpn-flowchart .callout p b,
#diagnosing-attr #diagnosing-pn #hattrpn-flowchart .callout p strong,
#diagnosing-attr #diagnosing-pn #hattrpn-flowchart .callout p u {
  font-family: "Kanit-SemiBold", "Kanit", Arial, sans-serif !important;
  font-style: normal !important;
  font-weight: 600 !important;
}

/* Preserve underlines inside the callout. */
#diagnosing-attr #diagnosing-pn #hattrpn-flowchart .callout p u {
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}

/* Callout reference stays regular and properly superscripted. */
#diagnosing-attr #diagnosing-pn #hattrpn-flowchart .callout p sup {
  position: relative !important;
  top: -0.38em !important;
  vertical-align: baseline !important;

  font-family: "Kanit-Regular", "Kanit", Arial, sans-serif !important;
  font-size: 60% !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 0 !important;
}


/* =========================================================
   2. ATTR-CM FLOWCHART CALLOUT
   ========================================================= */

#diagnosing-attr .attr-flowchart .callout-box .callout-text,
#diagnosing-attr .attr-flowchart .callout-box .callout-text p,
#diagnosing-attr .attr-flowchart .callout-box .callout-text span,
#diagnosing-attr .attr-flowchart .callout-box .callout-text strong,
#diagnosing-attr .attr-flowchart .callout-box .callout-text b,
#diagnosing-attr .attr-flowchart .callout-box .callout-text a {
  font-family: "Kanit-SemiBold", "Kanit", Arial, sans-serif !important;
  font-style: normal !important;
  font-weight: 600 !important;
}

/* Preserve authored link underlines. */
#diagnosing-attr .attr-flowchart .callout-box .callout-link {
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}

/* Reference number must not become bold. */
#diagnosing-attr .attr-flowchart .callout-box .callout-text sup {
  position: relative !important;
  top: -0.38em !important;
  vertical-align: baseline !important;

  font-family: "Kanit-Regular", "Kanit", Arial, sans-serif !important;
  font-size: 60% !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 0 !important;
}


/* =========================================================
   3. MIXED-PHENOTYPE FLOWCHART CALLOUT
   ========================================================= */

#diagnosing-attr #mixed-phenotype .mp-callout-box .mp-callout-text,
#diagnosing-attr #mixed-phenotype .mp-callout-box .mp-callout-text p,
#diagnosing-attr #mixed-phenotype .mp-callout-box .mp-callout-text span,
#diagnosing-attr #mixed-phenotype .mp-callout-box .mp-callout-text strong,
#diagnosing-attr #mixed-phenotype .mp-callout-box .mp-callout-text b,
#diagnosing-attr #mixed-phenotype .mp-callout-box .mp-callout-text a {
  font-family: "Kanit-SemiBold", "Kanit", Arial, sans-serif !important;
  font-style: normal !important;
  font-weight: 600 !important;
}

/* Preserve authored link underline. */
#diagnosing-attr #mixed-phenotype .mp-callout-box .mp-callout-link {
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}

/* References 3,4 remain regular. */
#diagnosing-attr #mixed-phenotype .mp-callout-box .mp-callout-text sup {
  position: relative !important;
  top: -0.38em !important;
  vertical-align: baseline !important;

  font-family: "Kanit-Regular", "Kanit", Arial, sans-serif !important;
  font-size: 60% !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 0 !important;
}


/* =========================================================
   4. COMMON MISDIAGNOSES SUBHEADING
   "The journey toward diagnosis has its challenges"
   H3 Headlines: Kanit Regular, 20px
   ========================================================= */

#diagnosing-attr .cm-section .cm-intro .cm-subheading {
  display: block !important;

  margin-left: auto !important;
  margin-right: auto !important;

  font-family: "Kanit-Regular", "Kanit", Arial, sans-serif !important;
  font-size: 20px !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 24px !important;

  letter-spacing: 0 !important;
  text-transform: none !important;
}


/* =========================================================
   5. COMMON MISDIAGNOSES AND OVERLAPPING CONDITIONS
   H3 Headlines: Kanit Regular, 20px
   ========================================================= */

#diagnosing-attr .cm-section .cm-conditions-heading {
  display: block !important;

  font-family: "Kanit-Regular", "Kanit", Arial, sans-serif !important;
  font-size: 20px !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 24px !important;

  letter-spacing: 0 !important;
}

/* Its reference 5 must also remain regular. */
#diagnosing-attr .cm-section .cm-conditions-heading sup {
  position: relative !important;
  top: -0.38em !important;
  vertical-align: baseline !important;

  font-family: "Kanit-Regular", "Kanit", Arial, sans-serif !important;
  font-size: 60% !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 0 !important;
}


/* =========================================================
   RESPONSIVE TYPOGRAPHY
   Keep the requested 20px H3 size on tablet and mobile.
   ========================================================= */

@media screen and (max-width: 992px) {
  #diagnosing-attr .cm-section .cm-intro .cm-subheading,
  #diagnosing-attr .cm-section .cm-conditions-heading {
    font-size: 20px !important;
    line-height: 24px !important;
  }
}

@media screen and (max-width: 480px) {
  #diagnosing-attr .cm-section .cm-intro .cm-subheading,
  #diagnosing-attr .cm-section .cm-conditions-heading {
    font-size: 20px !important;
    line-height: 24px !important;
  }
}

/* =========================================================
   hATTR-PN FLOWCHART — FINAL RED-FLAG ARROW FIX
   Only affects the nine arrows below the nine red-flag cards.
   Keep this block at the absolute end of the stylesheet.
   ========================================================= */

@media screen and (min-width: 701px) {

  #diagnosing-attr #diagnosing-pn #hattrpn-flowchart .flags-arrows {
    display: block !important;
    position: relative !important;

    width: 100% !important;
    max-width: none !important;

    height: 30px !important;
    min-height: 30px !important;

    margin: 0 0 2px !important;
    padding: 0 !important;

    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    letter-spacing: 0 !important;
    word-spacing: 0 !important;

    background-image:
      url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/Icon%20algo%20arrow%20down.png"),
      url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/Icon%20algo%20arrow%20down.png"),
      url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/Icon%20algo%20arrow%20down.png"),
      url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/Icon%20algo%20arrow%20down.png"),
      url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/Icon%20algo%20arrow%20down.png"),
      url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/Icon%20algo%20arrow%20down.png"),
      url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/Icon%20algo%20arrow%20down.png"),
      url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/Icon%20algo%20arrow%20down.png"),
      url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/Icon%20algo%20arrow%20down.png") !important;

    background-position:
      5.555% center,
      16.666% center,
      27.777% center,
      38.888% center,
      50% center,
      61.111% center,
      72.222% center,
      83.333% center,
      94.444% center !important;

    background-size:
      24px 24px,
      24px 24px,
      24px 24px,
      24px 24px,
      24px 24px,
      24px 24px,
      24px 24px,
      24px 24px,
      24px 24px !important;

    background-repeat:
      no-repeat,
      no-repeat,
      no-repeat,
      no-repeat,
      no-repeat,
      no-repeat,
      no-repeat,
      no-repeat,
      no-repeat !important;

    overflow: visible !important;
  }

  /* Hide the authored ↓↓↓↓↓↓↓↓↓ text */
  #diagnosing-attr #diagnosing-pn #hattrpn-flowchart .flags-arrows > span {
    display: none !important;
  }

  /* Ensure no pseudo-element arrow is added */
  #diagnosing-attr #diagnosing-pn #hattrpn-flowchart .flags-arrows::before,
  #diagnosing-attr #diagnosing-pn #hattrpn-flowchart .flags-arrows::after {
    content: none !important;
    display: none !important;
  }
}




/* =========================================================
   FINAL FIX - 9 RED FLAG ARROWS
   Same rendering as other flowchart arrows
   ========================================================= */

#diagnosing-attr #diagnosing-pn .flags-arrows{
    position:relative !important;
    display:block !important;
    width:100% !important;
    height:26px !important;
    margin:0 0 4px !important;
    padding:0 !important;
    color:transparent !important;
    font-size:0 !important;
    line-height:0 !important;
}

#diagnosing-attr #diagnosing-pn .flags-arrows > span{
    display:none !important;
}

#diagnosing-attr #diagnosing-pn .flags-arrows::before{
    content:"";
    position:absolute;
    inset:0;

    background-image:
      url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/Icon%20algo%20arrow%20down.png"),
      url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/Icon%20algo%20arrow%20down.png"),
      url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/Icon%20algo%20arrow%20down.png"),
      url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/Icon%20algo%20arrow%20down.png"),
      url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/Icon%20algo%20arrow%20down.png"),
      url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/Icon%20algo%20arrow%20down.png"),
      url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/Icon%20algo%20arrow%20down.png"),
      url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/Icon%20algo%20arrow%20down.png"),
      url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/Icon%20algo%20arrow%20down.png");
    background-repeat:no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat;
    background-size:18px 18px,18px 18px,18px 18px,18px 18px,18px 18px,18px 18px,18px 18px,18px 18px,18px 18px;
    background-position:
      5.55% center,
      16.66% center,
      27.77% center,
      38.88% center,
      50% center,
      61.11% center,
      72.22% center,
      83.33% center,
      94.44% center;
}

/* =========================================================
   FINAL hATTR-PN NINE-ARROW SIZE CORRECTION
   Makes the nine arrows slim and normal like the other
   small flowchart arrows. Keep at the absolute end.
   ========================================================= */

@media screen and (min-width: 701px) {

  #diagnosing-attr #diagnosing-pn #hattrpn-flowchart .flags-arrows {
    display: block !important;
    position: relative !important;

    width: 100% !important;
    height: 20px !important;
    min-height: 20px !important;

    margin: 0 0 2px !important;
    padding: 0 !important;

    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    letter-spacing: 0 !important;
    word-spacing: 0 !important;

    background-image:
      url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/Icon%20algo%20arrow%20down.png"),
      url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/Icon%20algo%20arrow%20down.png"),
      url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/Icon%20algo%20arrow%20down.png"),
      url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/Icon%20algo%20arrow%20down.png"),
      url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/Icon%20algo%20arrow%20down.png"),
      url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/Icon%20algo%20arrow%20down.png"),
      url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/Icon%20algo%20arrow%20down.png"),
      url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/Icon%20algo%20arrow%20down.png"),
      url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/Icon%20algo%20arrow%20down.png") !important;

    background-position:
      5.555% center,
      16.666% center,
      27.777% center,
      38.888% center,
      50% center,
      61.111% center,
      72.222% center,
      83.333% center,
      94.444% center !important;

    background-size:
      11px 14px,
      11px 14px,
      11px 14px,
      11px 14px,
      11px 14px,
      11px 14px,
      11px 14px,
      11px 14px,
      11px 14px !important;

    background-repeat:
      no-repeat,
      no-repeat,
      no-repeat,
      no-repeat,
      no-repeat,
      no-repeat,
      no-repeat,
      no-repeat,
      no-repeat !important;

    overflow: visible !important;
  }

  #diagnosing-attr #diagnosing-pn #hattrpn-flowchart .flags-arrows > span {
    display: none !important;
  }

  /* Remove the previous large pseudo-element arrows */
  #diagnosing-attr #diagnosing-pn #hattrpn-flowchart .flags-arrows::before,
  #diagnosing-attr #diagnosing-pn #hattrpn-flowchart .flags-arrows::after {
    content: none !important;
    display: none !important;
    background: none !important;
  }
}

/* =========================================================
   FINAL hATTR-PN ARROW ALIGNMENT + CALLOUT LINK COLOR
   Keep this block at the absolute end of the stylesheet.
   ========================================================= */

/* ---------------------------------------------------------
   1. Nine arrows: centre each arrow under its flag card
   Uses the authored ↓↓↓↓↓↓↓↓↓ text instead of background images.
   --------------------------------------------------------- */

@media screen and (min-width: 701px) {

  #diagnosing-attr #diagnosing-pn #hattrpn-flowchart .flags-arrows {
    display: block !important;
    position: relative !important;

    width: 100% !important;
    height: 22px !important;
    min-height: 22px !important;

    margin: 0 0 2px !important;
    padding: 0 calc(100% / 18) !important;
    box-sizing: border-box !important;

    background: none !important;
    overflow: visible !important;
  }

  #diagnosing-attr #diagnosing-pn #hattrpn-flowchart .flags-arrows > span {
    display: block !important;
    width: 100% !important;

    color: #6B7FB5 !important;
    font-family: Arial, sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 20px !important;

    letter-spacing: 0 !important;
    word-spacing: 0 !important;

    text-align: justify !important;
    text-align-last: justify !important;
    text-justify: inter-character !important;

    white-space: nowrap !important;
  }

  /* Remove all previous image/pseudo-element arrow rendering */
  #diagnosing-attr #diagnosing-pn #hattrpn-flowchart .flags-arrows::before,
  #diagnosing-attr #diagnosing-pn #hattrpn-flowchart .flags-arrows::after {
    content: none !important;
    display: none !important;
    background: none !important;
  }
}


/* ---------------------------------------------------------
   2. Underlined/clickable text in the post-diagnosis callout
   Keep the same navy colour as the surrounding sentence.
   --------------------------------------------------------- */

#diagnosing-attr #diagnosing-pn #hattrpn-flowchart .callout p u,
#diagnosing-attr #diagnosing-pn #hattrpn-flowchart .callout p a,
#diagnosing-attr #diagnosing-pn #hattrpn-flowchart .callout p a:link,
#diagnosing-attr #diagnosing-pn #hattrpn-flowchart .callout p a:visited,
#diagnosing-attr #diagnosing-pn #hattrpn-flowchart .callout p a:hover,
#diagnosing-attr #diagnosing-pn #hattrpn-flowchart .callout p a:active,
#diagnosing-attr #diagnosing-pn #hattrpn-flowchart .callout p a:focus {
  color: #00215F !important;
  -webkit-text-fill-color: #00215F !important;

  text-decoration-line: underline !important;
  text-decoration-color: #00215F !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 2px !important;

  outline: none !important;
}

/* =========================================================
   FINAL DIAGNOSING PAGE CORRECTIONS
   1. Nine arrows centred under nine red-flag cards
   2. Linked/underlined intro text keeps navy colour
   3. Assessment lists show bullets
   4. Misdiagnosis bullet text uses regular weight
   Keep this block at the ABSOLUTE END of the stylesheet.
   ========================================================= */


/* ---------------------------------------------------------
   1. hATTR-PN: nine arrows centred under the nine equal cards
   --------------------------------------------------------- */

@media screen and (min-width: 701px) {

  #diagnosing-attr #diagnosing-pn #hattrpn-flowchart .flags-arrows {
    display: block !important;
    position: relative !important;

    width: 100% !important;
    max-width: 100% !important;
    height: 26px !important;
    min-height: 26px !important;

    margin: 0 0 2px !important;
    padding: 0 !important;
    box-sizing: border-box !important;

    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    letter-spacing: 0 !important;
    word-spacing: 0 !important;

    background-color: transparent !important;
    background-image:
      url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/Icon%20algo%20arrow%20down.png"),
      url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/Icon%20algo%20arrow%20down.png"),
      url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/Icon%20algo%20arrow%20down.png"),
      url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/Icon%20algo%20arrow%20down.png"),
      url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/Icon%20algo%20arrow%20down.png"),
      url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/Icon%20algo%20arrow%20down.png"),
      url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/Icon%20algo%20arrow%20down.png"),
      url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/Icon%20algo%20arrow%20down.png"),
      url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/Icon%20algo%20arrow%20down.png") !important;

    /* Centres of nine equal-width columns */
    background-position:
      calc((100% / 9) * 0.5) center,
      calc((100% / 9) * 1.5) center,
      calc((100% / 9) * 2.5) center,
      calc((100% / 9) * 3.5) center,
      calc((100% / 9) * 4.5) center,
      calc((100% / 9) * 5.5) center,
      calc((100% / 9) * 6.5) center,
      calc((100% / 9) * 7.5) center,
      calc((100% / 9) * 8.5) center !important;

    /* Restore the normal/full arrow size */
    background-size:
      18px 18px,
      18px 18px,
      18px 18px,
      18px 18px,
      18px 18px,
      18px 18px,
      18px 18px,
      18px 18px,
      18px 18px !important;

    background-repeat:
      no-repeat,
      no-repeat,
      no-repeat,
      no-repeat,
      no-repeat,
      no-repeat,
      no-repeat,
      no-repeat,
      no-repeat !important;

    background-origin: border-box !important;
    background-clip: border-box !important;
    overflow: visible !important;
  }

  /* Hide authored ↓↓↓↓↓↓↓↓↓ characters */
  #diagnosing-attr #diagnosing-pn #hattrpn-flowchart .flags-arrows > span {
    display: none !important;
  }

  /* Prevent older pseudo-element implementations from appearing */
  #diagnosing-attr #diagnosing-pn #hattrpn-flowchart .flags-arrows::before,
  #diagnosing-attr #diagnosing-pn #hattrpn-flowchart .flags-arrows::after {
    content: none !important;
    display: none !important;
    background: none !important;
  }
}


/* ---------------------------------------------------------
   2. Common misdiagnoses intro:
      linked/underlined text remains the same navy colour
   --------------------------------------------------------- */

#diagnosing-attr .cm-section .cm-description u,
#diagnosing-attr .cm-section .cm-description a,
#diagnosing-attr .cm-section .cm-description a:link,
#diagnosing-attr .cm-section .cm-description a:visited,
#diagnosing-attr .cm-section .cm-description a:hover,
#diagnosing-attr .cm-section .cm-description a:active,
#diagnosing-attr .cm-section .cm-description a:focus {
  color: #00215F !important;
  -webkit-text-fill-color: #00215F !important;

  text-decoration-line: underline !important;
  text-decoration-color: #00215F !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 2px !important;

  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;

  outline: none !important;
}


/* ---------------------------------------------------------
   3. Mixed-phenotype cardiovascular/neurologic assessments:
      show standard bullet points
   --------------------------------------------------------- */

#diagnosing-attr #mixed-phenotype .mp-col-box .mp-list {
  display: block !important;

  margin: 0 !important;
  padding-left: 24px !important;

  list-style-type: disc !important;
  list-style-position: outside !important;

  color: #00215F !important;
  font-family: "Kanit-Regular", "Kanit", Arial, sans-serif !important;
  font-weight: 400 !important;
}

#diagnosing-attr #mixed-phenotype .mp-col-box .mp-list li {
  display: list-item !important;

  margin: 0 0 4px !important;
  padding: 0 !important;

  color: #00215F !important;
  font-family: "Kanit-Regular", "Kanit", Arial, sans-serif !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
}

#diagnosing-attr #mixed-phenotype .mp-col-box .mp-list li::marker {
  color: #00215F !important;
  font-size: 0.8em !important;
}


/* ---------------------------------------------------------
   4. Common misdiagnoses dark-card bullets:
      remove boldness from all bullet text
   --------------------------------------------------------- */

#diagnosing-attr .cm-section .cm-condition-list li,
#diagnosing-attr .cm-section .cm-condition-list li span,
#diagnosing-attr .cm-section .cm-condition-list li b,
#diagnosing-attr .cm-section .cm-condition-list li strong,
#diagnosing-attr .cm-section .cm-condition-list li a {
  font-family: "Kanit-Regular", "Kanit", Arial, sans-serif !important;
  font-style: normal !important;
  font-weight: 400 !important;
}

#diagnosing-attr .cm-section .cm-condition-list li::before {
  font-family: "Kanit-Regular", "Kanit", Arial, sans-serif !important;
  font-weight: 400 !important;
}


/* =========================================================
   FINAL DIAGNOSING PAGE FIXES — V6
   1. Common-misdiagnoses underlined text stays black
   2. Nine hATTR-PN arrows match the normal arrow design
      and sit clearly below the red-flag blocks
   Applies to EN and FR.
   Keep this block at the ABSOLUTE END of the stylesheet.
   ========================================================= */

#diagnosing-attr .cm-section .cm-description u,
#diagnosing-attr .cm-section .cm-description a,
#diagnosing-attr .cm-section .cm-description a:link,
#diagnosing-attr .cm-section .cm-description a:visited,
#diagnosing-attr .cm-section .cm-description a:hover,
#diagnosing-attr .cm-section .cm-description a:active,
#diagnosing-attr .cm-section .cm-description a:focus,
html[lang="fr"] #diagnosing-attr .cm-section .cm-description u,
html[lang="fr"] #diagnosing-attr .cm-section .cm-description a,
html[lang="fr"] #diagnosing-attr .cm-section .cm-description a:link,
html[lang="fr"] #diagnosing-attr .cm-section .cm-description a:visited,
html[lang="fr"] #diagnosing-attr .cm-section .cm-description a:hover,
html[lang="fr"] #diagnosing-attr .cm-section .cm-description a:active,
html[lang="fr"] #diagnosing-attr .cm-section .cm-description a:focus {
  color: #151515 !important;
  -webkit-text-fill-color: #151515 !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  text-decoration-line: underline !important;
  text-decoration-color: #151515 !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 2px !important;
  outline: none !important;
}

@media screen and (min-width: 701px) {
  #diagnosing-attr #diagnosing-pn #hattrpn-flowchart .flags-arrows {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 28px !important;
    min-height: 28px !important;
    margin: 6px 0 2px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    letter-spacing: 0 !important;
    word-spacing: 0 !important;
    background-color: transparent !important;
    background-image:
      url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/Icon%20algo%20arrow%20down.png"),
      url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/Icon%20algo%20arrow%20down.png"),
      url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/Icon%20algo%20arrow%20down.png"),
      url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/Icon%20algo%20arrow%20down.png"),
      url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/Icon%20algo%20arrow%20down.png"),
      url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/Icon%20algo%20arrow%20down.png"),
      url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/Icon%20algo%20arrow%20down.png"),
      url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/Icon%20algo%20arrow%20down.png"),
      url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/Icon%20algo%20arrow%20down.png") !important;
    background-position:
      calc((100% / 9) * 0.5) center,
      calc((100% / 9) * 1.5) center,
      calc((100% / 9) * 2.5) center,
      calc((100% / 9) * 3.5) center,
      calc((100% / 9) * 4.5) center,
      calc((100% / 9) * 5.5) center,
      calc((100% / 9) * 6.5) center,
      calc((100% / 9) * 7.5) center,
      calc((100% / 9) * 8.5) center !important;
    background-size:
      14px 18px,
      14px 18px,
      14px 18px,
      14px 18px,
      14px 18px,
      14px 18px,
      14px 18px,
      14px 18px,
      14px 18px !important;
    background-repeat:
      no-repeat,
      no-repeat,
      no-repeat,
      no-repeat,
      no-repeat,
      no-repeat,
      no-repeat,
      no-repeat,
      no-repeat !important;
    overflow: visible !important;
  }

  #diagnosing-attr #diagnosing-pn #hattrpn-flowchart .flags-arrows > span {
    display: none !important;
  }

  #diagnosing-attr #diagnosing-pn #hattrpn-flowchart .flags-arrows::before,
  #diagnosing-attr #diagnosing-pn #hattrpn-flowchart .flags-arrows::after {
    content: none !important;
    display: none !important;
    background: none !important;
  }

  #diagnosing-attr #diagnosing-pn #hattrpn-flowchart .flags-arrows + .wide-box {
    margin-top: 0 !important;
  }
}

/* =========================================================
   FINAL hATTR-PN FLAG-CARD + ARROW ALIGNMENT — V7
   The old flex: 1 cards used content-based flex-basis, so the
   nine card widths were not guaranteed to be identical.
   This makes the cards and arrow centres use the same 9-column
   grid. Applies to EN and FR.
   Keep this at the ABSOLUTE END of the stylesheet.
   ========================================================= */

@media screen and (min-width: 701px) {

  /* Nine red-flag blocks: one exact grid column per block */
  #diagnosing-attr #diagnosing-pn #hattrpn-flowchart .flags-grid {
    display: grid !important;
    grid-template-columns: repeat(9, minmax(0, 1fr)) !important;
    align-items: stretch !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    background: #E2FCFD99 !important;
    border: 1px solid #94A0CE !important;
    border-radius: 20px 20px 20px 0 !important;

    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  #diagnosing-attr #diagnosing-pn #hattrpn-flowchart .flag-card {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    flex: none !important;

    margin: 0 !important;
    padding: 14px 8px !important;

    box-sizing: border-box !important;
    text-align: center !important;
  }

  /* Nine arrows use the exact centres of the same nine columns */
  #diagnosing-attr #diagnosing-pn #hattrpn-flowchart .flags-arrows {
    display: block !important;
    position: relative !important;

    width: 100% !important;
    max-width: 100% !important;
    height: 28px !important;
    min-height: 28px !important;

    margin: 4px 0 2px !important;
    padding: 0 !important;

    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    letter-spacing: 0 !important;
    word-spacing: 0 !important;

    background-color: transparent !important;
    background-image:
      url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/Icon%20algo%20arrow%20down.png"),
      url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/Icon%20algo%20arrow%20down.png"),
      url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/Icon%20algo%20arrow%20down.png"),
      url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/Icon%20algo%20arrow%20down.png"),
      url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/Icon%20algo%20arrow%20down.png"),
      url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/Icon%20algo%20arrow%20down.png"),
      url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/Icon%20algo%20arrow%20down.png"),
      url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/Icon%20algo%20arrow%20down.png"),
      url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/Icon%20algo%20arrow%20down.png") !important;

    background-position:
      5.555555% center,
      16.666667% center,
      27.777778% center,
      38.888889% center,
      50% center,
      61.111111% center,
      72.222222% center,
      83.333333% center,
      94.444444% center !important;

    background-size:
      18px 18px,
      18px 18px,
      18px 18px,
      18px 18px,
      18px 18px,
      18px 18px,
      18px 18px,
      18px 18px,
      18px 18px !important;

    background-repeat:
      no-repeat,
      no-repeat,
      no-repeat,
      no-repeat,
      no-repeat,
      no-repeat,
      no-repeat,
      no-repeat,
      no-repeat !important;

    box-sizing: border-box !important;
    overflow: visible !important;
  }

  #diagnosing-attr #diagnosing-pn #hattrpn-flowchart .flags-arrows > span {
    display: none !important;
  }

  #diagnosing-attr #diagnosing-pn #hattrpn-flowchart .flags-arrows::before,
  #diagnosing-attr #diagnosing-pn #hattrpn-flowchart .flags-arrows::after {
    content: none !important;
    display: none !important;
    background: none !important;
  }
}

/* =========================================================
   FINAL hATTR-PN ARROW SHAPE FIX — V8
   Keep the arrows 18px high, but preserve the DAM image's
   natural aspect ratio so they match the other single arrows.
   Keep this block at the ABSOLUTE END of the stylesheet.
   ========================================================= */

@media screen and (min-width: 701px) {

  #diagnosing-attr #diagnosing-pn #hattrpn-flowchart .flags-arrows {
    height: 26px !important;
    min-height: 26px !important;
    margin: 4px 0 2px !important;

    background-position:
      5.555555% center,
      16.666667% center,
      27.777778% center,
      38.888889% center,
      50% center,
      61.111111% center,
      72.222222% center,
      83.333333% center,
      94.444444% center !important;

    /*
     * 18px height, automatic width.
     * This is the important change: the previous 18px × 18px
     * rule stretched the naturally narrow arrow into a square,
     * making it look wide/fluffy.
     */
    background-size:
      auto 18px,
      auto 18px,
      auto 18px,
      auto 18px,
      auto 18px,
      auto 18px,
      auto 18px,
      auto 18px,
      auto 18px !important;

    background-repeat:
      no-repeat,
      no-repeat,
      no-repeat,
      no-repeat,
      no-repeat,
      no-repeat,
      no-repeat,
      no-repeat,
      no-repeat !important;
  }
}



/* ==========================================================================
   FINAL UNIFIED LIGHTBULB IMAGE
   Uses the same DAM image for every diagnosing-page callout.
   Existing emoji text and older pseudo-element bulbs are suppressed.
   ========================================================================== */

#diagnosing-attr #diagnosing-pn .callout .bulb,
#diagnosing-attr .attr-flowchart .callout-icon,
#diagnosing-attr #mixed-phenotype .mp-callout-icon,
#diagnosing-attr #there-timely-container .dd-callout-icon,
#diagnosing-attr .cm-callout-icon {
  display: block !important;
  flex: 0 0 auto !important;
  width: 46px !important;
  min-width: 46px !important;
  max-width: 46px !important;
  height: 46px !important;
  min-height: 46px !important;
  max-height: 46px !important;
  margin: 0 auto 14px !important;
  padding: 0 !important;
  border: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
  text-indent: -9999px !important;
  overflow: hidden !important;
  background-color: transparent !important;
  background-image: url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/lightbulb%20icon%20gradient_1.png") !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: contain !important;
  box-sizing: border-box !important;
}

#diagnosing-attr #diagnosing-pn .callout .bulb::before,
#diagnosing-attr #diagnosing-pn .callout .bulb::after,
#diagnosing-attr .attr-flowchart .callout-icon::before,
#diagnosing-attr .attr-flowchart .callout-icon::after,
#diagnosing-attr #mixed-phenotype .mp-callout-icon::before,
#diagnosing-attr #mixed-phenotype .mp-callout-icon::after,
#diagnosing-attr #there-timely-container .dd-callout-icon::before,
#diagnosing-attr #there-timely-container .dd-callout-icon::after,
#diagnosing-attr .cm-callout-icon::before,
#diagnosing-attr .cm-callout-icon::after {
  content: none !important;
  display: none !important;
  background: none !important;
}

/* Keep the callout layout vertical so the bulb remains above the text. */
#diagnosing-attr #diagnosing-pn .callout,
#diagnosing-attr .attr-flowchart .callout-box,
#diagnosing-attr #mixed-phenotype .mp-callout-box,
#diagnosing-attr #there-timely-container .dd-callout,
#diagnosing-attr .cm-callout {
  flex-direction: column !important;
  align-items: center !important;
}

/* Responsive bulb sizing. */
@media screen and (max-width: 991px) {
  #diagnosing-attr #diagnosing-pn .callout .bulb,
  #diagnosing-attr .attr-flowchart .callout-icon,
  #diagnosing-attr #mixed-phenotype .mp-callout-icon,
  #diagnosing-attr #there-timely-container .dd-callout-icon,
  #diagnosing-attr .cm-callout-icon {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    margin-bottom: 12px !important;
  }
}

/* ==========================================================================
   DESKTOP CALLOUT FIX — ICON LEFT, TEXT RIGHT
   Applies only above the mobile/tablet layout.
   Keep this block at the absolute end of the stylesheet.
   ========================================================================== */

@media screen and (min-width: 901px) {

  /* All four diagnosing-page callout containers */
  #diagnosing-attr #diagnosing-pn .callout,
  #diagnosing-attr .attr-flowchart .callout-box,
  #diagnosing-attr #mixed-phenotype .mp-callout-box,
  #diagnosing-attr #there-timely-container .dd-callout-box,
  #diagnosing-attr .cm-callout {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;

    width: 100% !important;
    min-height: 56px !important;
    height: auto !important;

    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 10px 18px !important;
    box-sizing: border-box !important;

    text-align: left !important;
  }

  /* Keep the bulb compact and aligned on the left */
  #diagnosing-attr #diagnosing-pn .callout .bulb,
  #diagnosing-attr .attr-flowchart .callout-icon,
  #diagnosing-attr #mixed-phenotype .mp-callout-icon,
  #diagnosing-attr #there-timely-container .dd-callout-icon,
  #diagnosing-attr .cm-callout-icon {
    display: block !important;
    flex: 0 0 32px !important;

    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;

    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;

    margin: 0 !important;
    padding: 0 !important;

    background-position: center !important;
    background-size: contain !important;
  }

  /* Callout copy */
  #diagnosing-attr #diagnosing-pn .callout .callout-text,
  #diagnosing-attr #diagnosing-pn .callout p,
  #diagnosing-attr .attr-flowchart .callout-text,
  #diagnosing-attr .attr-flowchart .callout-text p,
  #diagnosing-attr #mixed-phenotype .mp-callout-text,
  #diagnosing-attr #mixed-phenotype .mp-callout-text p,
  #diagnosing-attr #there-timely-container .dd-callout-text,
  #diagnosing-attr #there-timely-container .dd-callout-text p,
  #diagnosing-attr .cm-callout-text,
  #diagnosing-attr .cm-callout-text p {
    flex: 1 1 auto !important;
    width: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    font-size: 14px !important;
    line-height: 1.35 !important;
    text-align: left !important;
  }
}

/* =========================================================
   CM CALLOUT BULB FIX
   ========================================================= */

#diagnosing-attr .cm-callout {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
}

#diagnosing-attr .cm-callout-icon {
  display: block !important;
  flex: 0 0 32px !important;

  width: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;

  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;

  margin: 0 !important;
  padding: 0 !important;

  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-indent: -9999px !important;
  overflow: hidden !important;

  background-color: transparent !important;
  background-image: url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/lightbulb%20icon%20gradient_1.png") !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: contain !important;
}

#diagnosing-attr .cm-callout-icon::before,
#diagnosing-attr .cm-callout-icon::after {
  content: none !important;
  display: none !important;
}

#diagnosing-attr .cm-callout-text {
  flex: 1 1 auto !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}

/* =========================================================
   FINAL CM CALLOUT FIX — ACTUAL IMG ELEMENT
   ========================================================= */

@media screen and (min-width: 901px) {

  #diagnosing-attr .cm-callout {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;

    width: 100% !important;
    min-height: 56px !important;
    height: auto !important;

    margin: 0 !important;
    padding: 10px 18px !important;
    box-sizing: border-box !important;

    text-align: left !important;
  }

  #diagnosing-attr .cm-callout img.cm-callout-icon {
    display: block !important;
    flex: 0 0 32px !important;

    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;

    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: contain !important;

    background: none !important;
    border: 0 !important;

    color: initial !important;
    font-size: initial !important;
    line-height: normal !important;
    text-indent: 0 !important;
    overflow: visible !important;
  }

  #diagnosing-attr .cm-callout img.cm-callout-icon::before,
  #diagnosing-attr .cm-callout img.cm-callout-icon::after {
    content: none !important;
    display: none !important;
  }

  #diagnosing-attr .cm-callout .cm-callout-text {
    display: block !important;
    flex: 1 1 auto !important;
    width: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    font-size: 14px !important;
    line-height: 1.35 !important;
    text-align: left !important;
  }
}


/* ==========================================================================
   FINAL DESKTOP CALLOUT OVERRIDE
   Keeps existing HTML unchanged.
   Fixes all four callouts and forces the CM bulb to render.
   Mobile/tablet styles remain unchanged.
   Keep this block at the absolute end of the stylesheet.
   ========================================================================== */

@media screen and (min-width: 901px) {

  /* All four callout containers */
  #diagnosing-attr #diagnosing-pn .callout,
  #diagnosing-attr .attr-flowchart .callout-box,
  #diagnosing-attr #mixed-phenotype .mp-callout-box,
  #diagnosing-attr #there-timely-container .dd-callout-box,
  #diagnosing-attr .cm-callout {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;

    width: 100% !important;
    min-height: 56px !important;
    height: auto !important;

    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 10px 18px !important;
    box-sizing: border-box !important;

    text-align: left !important;
  }

  /* Shared bulb sizing */
  #diagnosing-attr #diagnosing-pn .callout .bulb,
  #diagnosing-attr .attr-flowchart .callout-icon,
  #diagnosing-attr #mixed-phenotype .mp-callout-icon,
  #diagnosing-attr #there-timely-container .dd-callout-icon,
  #diagnosing-attr .cm-callout-icon {
    position: relative !important;
    display: block !important;
    flex: 0 0 32px !important;

    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;

    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    text-indent: 0 !important;
    overflow: visible !important;

    background-color: transparent !important;
    background-image: url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/lightbulb%20icon%20gradient_1.png") !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: contain !important;
  }

  /* Remove every older generated icon */
  #diagnosing-attr #diagnosing-pn .callout .bulb::before,
  #diagnosing-attr #diagnosing-pn .callout .bulb::after,
  #diagnosing-attr .attr-flowchart .callout-icon::before,
  #diagnosing-attr .attr-flowchart .callout-icon::after,
  #diagnosing-attr #mixed-phenotype .mp-callout-icon::before,
  #diagnosing-attr #mixed-phenotype .mp-callout-icon::after,
  #diagnosing-attr #there-timely-container .dd-callout-icon::before,
  #diagnosing-attr #there-timely-container .dd-callout-icon::after,
  #diagnosing-attr .cm-callout-icon::before,
  #diagnosing-attr .cm-callout-icon::after {
    content: none !important;
    display: none !important;
    background: none !important;
  }

  /* CM-specific fallback:
     also places the bulb on the callout container itself so it remains visible
     even if AEM/clientlib processing suppresses the span background. */
  #diagnosing-attr .cm-callout {
    position: relative !important;
    padding-left: 62px !important;

    background-color: #F0F1F7 !important;
    background-image: url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/lightbulb%20icon%20gradient_1.png") !important;
    background-repeat: no-repeat !important;
    background-position: 18px center !important;
    background-size: 32px 32px !important;
  }

  /* Hide only the authored CM emoji span.
     The identical bulb is rendered by .cm-callout background above. */
  #diagnosing-attr .cm-callout > .cm-callout-icon {
    display: none !important;
  }

  /* Text */
  #diagnosing-attr #diagnosing-pn .callout .callout-text,
  #diagnosing-attr #diagnosing-pn .callout p,
  #diagnosing-attr .attr-flowchart .callout-text,
  #diagnosing-attr .attr-flowchart .callout-text p,
  #diagnosing-attr #mixed-phenotype .mp-callout-text,
  #diagnosing-attr #mixed-phenotype .mp-callout-text p,
  #diagnosing-attr #there-timely-container .dd-callout-text,
  #diagnosing-attr #there-timely-container .dd-callout-text p,
  #diagnosing-attr .cm-callout-text,
  #diagnosing-attr .cm-callout-text p {
    display: block !important;
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    font-size: 14px !important;
    line-height: 1.35 !important;
    text-align: left !important;
  }
}



/* ==========================================================================
   DIAGNOSING ATTR — EN + FR FOOTER BACKGROUND ZOOM FIX
   IMPORTANT:
   This block changes only the .sec3-mainbg background section.
   Existing promo-card, text, icon and CTA styling remains untouched.
   ========================================================================== */

@media screen and (min-width: 992px) {

  #diagnosing-attr .sec3-mainbg {
    position: relative !important;

    width: 100% !important;
    max-width: 100% !important;

    height: 455px !important;
    min-height: 455px !important;
    max-height: none !important;

    background-image:
      url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/Internal%20Footer%20image_desktop.jpg") !important;
    background-repeat: no-repeat !important;
    background-position: center bottom !important;
    background-size: cover !important;

    overflow: hidden !important;
    box-sizing: border-box !important;
  }
}

/*
 * Approximate 50% browser zoom.
 * Increase only the image-section height and show the complete artwork.
 */
@media screen and (min-width: 2200px) and (max-width: 3599px) {

  #diagnosing-attr .sec3-mainbg {
    height: 620px !important;
    min-height: 620px !important;

    background-position: center bottom !important;
    background-size: 100% 100% !important;
  }
}

/*
 * Approximate 33% browser zoom.
 * Again, only the background section is enlarged.
 */
@media screen and (min-width: 3600px) {

  #diagnosing-attr .sec3-mainbg {
    height: 850px !important;
    min-height: 850px !important;

    background-position: center bottom !important;
    background-size: 100% 100% !important;
  }
}

/* Keep the existing responsive mobile/tablet composition. */
@media screen and (max-width: 991px) {

  #diagnosing-attr .sec3-mainbg {
    background-position: center bottom !important;
    background-size: cover !important;
  }
}


/* =========================================================
   FR ONLY — FIRST FOOTER CTA WIDTH FIX
   ========================================================= */

html[lang^="fr"] #diagnosing-attr .sec3-mainbg .home-cta-1 {
  width: 360px !important;
  max-width: 360px !important;
  min-width: 360px !important;

  left: 50% !important;
  transform: translateX(-50%) !important;
}

html[lang^="fr"] #diagnosing-attr .sec3-mainbg .home-cta-1 .middle-bottom-cta {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;

  padding-left: 10px !important;
  padding-right: 10px !important;

  font-size: 12px !important;
  line-height: 15px !important;

  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

/* =========================================================
   EN + FR — REMOVE WHITE LINE BELOW FOOTER IMAGE
   ========================================================= */

#diagnosing-attr .sec3-mainbg {
  border: 0 !important;
  border-bottom: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;

  /* Covers sub-pixel gap created during browser zoom */
  margin-bottom: -2px !important;
}

#diagnosing-attr #container-1314435c6b,
#diagnosing-attr #container-1314435c6b > .text,
#diagnosing-attr #text-8691be1b74 {
  border: 0 !important;
  outline: 0 !important;
  background-color: #000000 !important;
}

#diagnosing-attr #diagnosis-footer,
#diagnosing-attr #diagnosis-footer.cmp-text,
#diagnosing-attr .diagnosis-footer {
  border: 0 !important;
  border-top: 0 !important;
  outline: 0 !important;

  margin-top: 0 !important;
  background-color: #000000 !important;
}

/* Pull the reference block upward by 1px to avoid zoom-rendering seam */
#diagnosing-attr #diagnosis-footer {
  position: relative !important;
  top: -1px !important;
  margin-bottom: -1px !important;
}

/* =========================================================
   FINAL EN + FR — hATTR-PN RED-FLAG ROW MATCH REFERENCE

   Fixes:
   - removes automatic word hyphenation
   - prevents words such as "history" and "unexplained"
     from breaking in the middle
   - uses the same proportional column widths as the reference
   - reduces the card row height to match the reference
   - keeps all nine lower arrows centred under their own cards

   Keep this block at the ABSOLUTE END of the stylesheet.
   ========================================================= */

@media screen and (min-width: 701px) {

  /* Reference column proportions:
     128 | 86 | 141 | 130 | 145 | 170 | 164 | 106 | 144 */
  #diagnosing-attr #diagnosing-pn .flags-grid,
  #diagnosing-attr #diagnosing-pn #hattrpn-flowchart .flags-grid {
    display: grid !important;
    grid-template-columns:
      minmax(0, 128fr)
      minmax(0, 86fr)
      minmax(0, 141fr)
      minmax(0, 130fr)
      minmax(0, 145fr)
      minmax(0, 170fr)
      minmax(0, 164fr)
      minmax(0, 106fr)
      minmax(0, 144fr) !important;

    align-items: stretch !important;

    width: 100% !important;
    max-width: 100% !important;
    height: 170px !important;
    min-height: 170px !important;
    max-height: 170px !important;

    margin: 0 !important;
    padding: 0 !important;

    background: #E2FCFD99 !important;
    border: 1px solid #94A0CE !important;
    border-radius: 20px 20px 20px 0 !important;

    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  #diagnosing-attr #diagnosing-pn .flag-card,
  #diagnosing-attr #diagnosing-pn #hattrpn-flowchart .flag-card {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;

    flex: none !important;

    margin: 0 !important;
    padding: 12px 8px !important;

    border-right: 1px solid #94A0CE !important;
    box-sizing: border-box !important;
    overflow: hidden !important;

    color: #00215F !important;
    font-family: "Kanit", Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 1.28 !important;

    text-align: center !important;
    white-space: normal !important;

    /* Never split ordinary words with generated hyphens. */
    overflow-wrap: normal !important;
    word-wrap: normal !important;
    word-break: normal !important;
    -webkit-hyphens: none !important;
    -ms-hyphens: none !important;
    hyphens: none !important;
  }

  #diagnosing-attr #diagnosing-pn .flag-card:last-child,
  #diagnosing-attr #diagnosing-pn #hattrpn-flowchart .flag-card:last-child {
    border-right: 0 !important;
  }

  /*
   * The grid uses proportional widths, so the arrows must use
   * the corresponding column centres rather than equal spacing.
   */
  #diagnosing-attr #diagnosing-pn .flags-arrows,
  #diagnosing-attr #diagnosing-pn #hattrpn-flowchart .flags-arrows {
    display: block !important;
    position: relative !important;

    width: 100% !important;
    max-width: 100% !important;
    height: 26px !important;
    min-height: 26px !important;

    margin: 4px 0 2px !important;
    padding: 0 !important;

    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    letter-spacing: 0 !important;
    word-spacing: 0 !important;

    background-color: transparent !important;
    background-image:
      url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/Icon%20algo%20arrow%20down.png"),
      url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/Icon%20algo%20arrow%20down.png"),
      url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/Icon%20algo%20arrow%20down.png"),
      url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/Icon%20algo%20arrow%20down.png"),
      url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/Icon%20algo%20arrow%20down.png"),
      url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/Icon%20algo%20arrow%20down.png"),
      url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/Icon%20algo%20arrow%20down.png"),
      url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/Icon%20algo%20arrow%20down.png"),
      url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/Icon%20algo%20arrow%20down.png") !important;

    background-position:
      5.272% center,
      14.086% center,
      23.435% center,
      34.596% center,
      45.923% center,
      58.896% center,
      72.652% center,
      83.773% center,
      94.069% center !important;

    background-size:
      auto 18px,
      auto 18px,
      auto 18px,
      auto 18px,
      auto 18px,
      auto 18px,
      auto 18px,
      auto 18px,
      auto 18px !important;

    background-repeat:
      no-repeat,
      no-repeat,
      no-repeat,
      no-repeat,
      no-repeat,
      no-repeat,
      no-repeat,
      no-repeat,
      no-repeat !important;

    box-sizing: border-box !important;
    overflow: visible !important;
  }

  #diagnosing-attr #diagnosing-pn .flags-arrows > span,
  #diagnosing-attr #diagnosing-pn #hattrpn-flowchart .flags-arrows > span {
    display: none !important;
  }

  #diagnosing-attr #diagnosing-pn .flags-arrows::before,
  #diagnosing-attr #diagnosing-pn .flags-arrows::after,
  #diagnosing-attr #diagnosing-pn #hattrpn-flowchart .flags-arrows::before,
  #diagnosing-attr #diagnosing-pn #hattrpn-flowchart .flags-arrows::after {
    content: none !important;
    display: none !important;
    background: none !important;
  }
}

/* Slightly smaller text at narrower desktop/laptop widths. */
@media screen and (min-width: 701px) and (max-width: 1199px) {
  #diagnosing-attr #diagnosing-pn .flag-card,
  #diagnosing-attr #diagnosing-pn #hattrpn-flowchart .flag-card {
    padding: 10px 6px !important;
    font-size: 14px !important;
    line-height: 1.24 !important;
  }
}

/* Standard desktop range shown in the supplied reference. */
@media screen and (min-width: 1200px) and (max-width: 1599px) {
  #diagnosing-attr #diagnosing-pn .flag-card,
  #diagnosing-attr #diagnosing-pn #hattrpn-flowchart .flag-card {
    font-size: 16px !important;
    line-height: 1.28 !important;
  }
}

/* Keep larger desktop text controlled without increasing row height. */
@media screen and (min-width: 1600px) {
  #diagnosing-attr #diagnosing-pn .flag-card,
  #diagnosing-attr #diagnosing-pn #hattrpn-flowchart .flag-card {
    padding: 12px 9px !important;
    font-size: 17px !important;
    line-height: 1.26 !important;
  }
}

/* ==========================================================================
   DIAGNOSING ATTR — FINAL EN + FR DESKTOP LAYOUT FIX
   Fixes:
   1. Current #this-page sidebar wrapper is forced into grid column 1 / row 1.
   2. hATTR-PN flowchart remains in grid column 2 / row 1.
   3. Prevents the sidebar from creating a second grid row and a large blank gap.
   4. Supports both the old and current AEM sidebar structures.
   Keep this block at the ABSOLUTE END of the stylesheet.
   ========================================================================== */

@media screen and (min-width: 992px) {

  /* Main hATTR-PN section: one shared row for sidebar and flowchart */
  #diagnosing-attr #diagnosing-pn {
    position: relative !important;
    display: grid !important;

    grid-template-columns: 224px minmax(0, 1fr) !important;
    grid-template-rows: auto !important;
    grid-auto-rows: auto !important;
    grid-auto-flow: row !important;

    column-gap: 24px !important;
    row-gap: 0 !important;
    align-items: start !important;

    width: 100% !important;
    max-width: 1265px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 0 auto !important;
    padding: 0 0 32px !important;

    overflow: visible !important;
    box-sizing: border-box !important;
  }

  /*
   * Sidebar AEM Text wrapper.
   * Supports:
   * - Current structure: #this-page / .this-page
   * - Older structure: .aboutattr-cards-container
   * - Fallback: any direct Text wrapper containing .steps-card
   */
  #diagnosing-attr #diagnosing-pn
    > div.text:has(#this-page),
  #diagnosing-attr #diagnosing-pn
    > div.text:has(.this-page),
  #diagnosing-attr #diagnosing-pn
    > div.text:has(.aboutattr-cards-container),
  #diagnosing-attr #diagnosing-pn
    > div.text:has(.steps-card),
  #diagnosing-attr #diagnosing-pn
    > .diagnosis-sidebar-wrapper {
    grid-column: 1 !important;
    grid-row: 1 !important;

    position: relative !important;
    align-self: start !important;

    width: 224px !important;
    min-width: 224px !important;
    max-width: 224px !important;
    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    border: 0 !important;

    overflow: visible !important;
    box-sizing: border-box !important;
  }

  /* Current and legacy sidebar wrapper layers */
  #diagnosing-attr #diagnosing-pn #this-page,
  #diagnosing-attr #diagnosing-pn .this-page,
  #diagnosing-attr #diagnosing-pn .this-page-items,
  #diagnosing-attr #diagnosing-pn .aboutattr-cards-container,
  #diagnosing-attr #diagnosing-pn .diagnosing-importance-container,
  #diagnosing-attr #diagnosing-pn .diagnosis-cards-container,
  #diagnosing-attr #diagnosing-pn .diagnosis-cards-items {
    position: relative !important;

    width: 224px !important;
    min-width: 224px !important;
    max-width: 224px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: none !important;
    box-sizing: border-box !important;
  }

  /* Main hATTR-PN flowchart AEM Text wrapper */
  #diagnosing-attr #diagnosing-pn
    > div.text:has(#hattrpn-flowchart),
  #diagnosing-attr #diagnosing-pn
    > div.text:has(.hattrpn-flowchart),
  #diagnosing-attr #diagnosing-pn
    > .diagnosis-flowchart-wrapper {
    grid-column: 2 !important;
    grid-row: 1 !important;

    position: relative !important;
    align-self: start !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 16px 0 0 !important;

    overflow: visible !important;
    box-sizing: border-box !important;
  }

  /* Do not allow the PN flowchart itself to reserve unnecessary height */
  #diagnosing-attr #diagnosing-pn #hattrpn-flowchart,
  #diagnosing-attr #diagnosing-pn .hattrpn-flowchart,
  #diagnosing-attr #diagnosing-pn .sheet {
    position: relative !important;

    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 0 auto !important;
    padding-bottom: 0 !important;

    transform: none !important;
    box-sizing: border-box !important;
  }

  /* Sidebar card remains in the left-hand grid cell */
  #diagnosing-attr #diagnosing-pn .steps-card {
    width: 224px !important;
    min-width: 224px !important;
    max-width: 224px !important;

    height: auto !important;
    min-height: 352px !important;
    max-height: calc(100vh - 115px);

    margin: 0 !important;

    box-sizing: border-box !important;
  }

  /*
   * The JavaScript creates this exact placeholder class when the sidebar
   * changes to position: fixed. Keep it inside the same left-hand cell.
   */
  #diagnosing-attr #diagnosing-pn
    .diagnosis-sidebar-sticky-placeholder,
  #diagnosing-attr #diagnosing-pn
    .diagnosis-sidebar-placeholder {
    width: 224px;
    min-width: 224px;
    max-width: 224px;

    height: 352px;
    min-height: 0;

    margin: 0;
    padding: 0;

    flex: 0 0 224px;
    box-sizing: border-box;
  }

  /* ATTR-CM must begin immediately after the completed PN grid row */
  #diagnosing-attr #diagnosing-cm {
    position: relative !important;
    clear: both !important;

    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 0 !important;
    padding-top: 0 !important;

    transform: none !important;
    box-sizing: border-box !important;
  }

  #diagnosing-attr #diagnosing-cm .attr-flowchart {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin-top: 0 !important;
    transform: none !important;
  }
}


/* Compact desktop / iPad Pro landscape */
@media screen and (min-width: 992px) and (max-width: 1100px) {

  #diagnosing-attr #diagnosing-pn {
    grid-template-columns: 190px minmax(0, 1fr) !important;
    column-gap: 16px !important;
  }

  #diagnosing-attr #diagnosing-pn
    > div.text:has(#this-page),
  #diagnosing-attr #diagnosing-pn
    > div.text:has(.this-page),
  #diagnosing-attr #diagnosing-pn
    > div.text:has(.aboutattr-cards-container),
  #diagnosing-attr #diagnosing-pn
    > div.text:has(.steps-card),
  #diagnosing-attr #diagnosing-pn
    > .diagnosis-sidebar-wrapper,
  #diagnosing-attr #diagnosing-pn #this-page,
  #diagnosing-attr #diagnosing-pn .this-page,
  #diagnosing-attr #diagnosing-pn .this-page-items,
  #diagnosing-attr #diagnosing-pn .aboutattr-cards-container,
  #diagnosing-attr #diagnosing-pn .diagnosing-importance-container,
  #diagnosing-attr #diagnosing-pn .diagnosis-cards-container,
  #diagnosing-attr #diagnosing-pn .diagnosis-cards-items,
  #diagnosing-attr #diagnosing-pn .steps-card,
  #diagnosing-attr #diagnosing-pn
    .diagnosis-sidebar-sticky-placeholder,
  #diagnosing-attr #diagnosing-pn
    .diagnosis-sidebar-placeholder {
    width: 190px !important;
    min-width: 190px !important;
    max-width: 190px !important;
  }

  #diagnosing-attr #diagnosing-pn
    .diagnosis-sidebar-sticky-placeholder,
  #diagnosing-attr #diagnosing-pn
    .diagnosis-sidebar-placeholder {
    flex-basis: 190px !important;
  }
}


/* Mobile/tablet safety: never retain desktop placeholder dimensions */
@media screen and (max-width: 991px) {

  #diagnosing-attr #diagnosing-pn
    .diagnosis-sidebar-sticky-placeholder,
  #diagnosing-attr #diagnosing-pn
    .diagnosis-sidebar-placeholder {
    display: none !important;

    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;

    height: 0 !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;
  }
}

/* =========================================================
   CM STATISTICS — NORMAL-WEIGHT SUPERSCRIPTS
   Applies to both EN and FR
   ========================================================= */

#diagnosing-attr .cm-statistics sup,
#diagnosing-attr .cm-statistics .cm-stat-label sup,
#diagnosing-attr .cm-statistics .cm-stat-description sup,
html[lang^="en"] #diagnosing-attr .cm-statistics sup,
html[lang^="fr"] #diagnosing-attr .cm-statistics sup,
body#diagnosing-attr[data-language^="en"] .cm-statistics sup,
body#diagnosing-attr[data-language^="fr"] .cm-statistics sup {
  position: relative !important;
  top: -0.45em !important;

  font-family: "Kanit-Regular", Kanit, sans-serif !important;
  font-size: 55% !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 0 !important;

  vertical-align: baseline !important;
  text-transform: none !important;
}


/* =========================================================
   HEADER CTA WIDTH FIX — "TENEZ-VOUS AU COURANT"
   Keeps the CTA at its intended 146px width inside the flex header.
   ========================================================= */
@media screen and (min-width: 992px) {
  .top-menu ul.us-healthcare li.bg-stay {
    flex: 0 0 146px !important;
    width: 146px !important;
    min-width: 146px !important;
    max-width: 146px !important;
    box-sizing: border-box !important;
  }

  .top-menu ul.us-healthcare li.bg-stay > a {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }
}


/* =========================================================
   DIAGNOSING ATTR HEADER CTA — FINAL EN/FR FIX
   Desktop only:
   - FR "TENEZ-VOUS AU COURANT" remains on one line
   - EN and FR CTA text use regular font weight
   ========================================================= */
@media screen and (min-width: 992px) {

  /* EN + FR: remove bold and prevent wrapping */
  #diagnosing-attr .top-menu ul.us-healthcare li.bg-stay > a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 8px !important;

    box-sizing: border-box !important;
    white-space: nowrap !important;

    font-family: "Kanit-Regular", Kanit, sans-serif !important;
    font-size: 12px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    text-align: center !important;
  }

  /* FR only: provide enough width for the complete CTA text */
  html[lang^="fr"] #diagnosing-attr .top-menu ul.us-healthcare li.bg-stay,
  body#diagnosing-attr[data-language^="fr"] .top-menu ul.us-healthcare li.bg-stay {
    flex: 0 0 190px !important;
    width: 190px !important;
    min-width: 190px !important;
    max-width: 190px !important;
    box-sizing: border-box !important;
  }
}