/* about attr css */

#about-attr-page #text-b9cfd44407 {
  margin-top: 20px;
}

.galaxy-mobile1 .galaxy-ul b {
    font-family: "Kanit-Bold";
    display: inline-block;
    margin-left: -2em;
}

.take-dwn {
  margin-top: 70px;
}

.suptxt-ta {
  vertical-align: baseline;
  position: relative;
  top: -0.8em;
  font-family: "Kanit-Light";
  font-size: 22px;
  font-weight: 100;
}

.bullet.steps-title {
  text-align: left;
  padding-left: 35px;
}

.hfheart {
  margin: auto;
  max-width: 1161px;
  font-family: "Kanit";
  font-size: 14px;/*font-size: 16px;*/
}

span.color-bullet::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: 7px;
  right: 13px;
}

#about-attr-page .galaxy-mobile .galaxy-ul {
  display: block;
  margin-top: auto;
  margin-bottom: auto;
}

#menucontainer {
  margin-top: 5px;
}

.arrow-line-icon {
  display: flex;
  margin-right: -14px;
  margin-left: -14px;
  padding-bottom: 30px;
  padding-top: 6px;
}

#treatment-app .arrow-line-icon {
  max-width: 1116px;
  margin-right: 18px;
}

img.arrow-image1 {
  margin-right: -14px;
}

img.arrow-image3 {
  position: relative;
  right: 14px;
}

#diagnosing-attr .arrow-line-icon {
  margin-right: 190px;
  margin-left: 5px;
  width: 67%;/*width: 70%;*/
  ;
}

#overlay {
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5);
  z-index: 2;
  cursor: pointer;
}

.treatment.banner-content h1 sup {
  vertical-align: baseline;
  position: relative;
  top: -0.8em;
  font-family: "Kanit-Light";
  font-size: 22px;
  font-weight: 100;
}

.suptxt-abt {
  vertical-align: baseline;
  position: relative;
  top: -0.4em;
  font-family: "Kanit";
  font-size: 12px;
}

div#about-attr-app {
  z-index: -1;
  margin-top: 0px;
}

.galaxy-mobile .galaxy-ul li:nth-child(1) {
  padding-bottom: 16px;
}

.galaxy-mobile1 .galaxy-ul li:nth-child(2) {
  padding-top: 6px;
}

.subheading-banner {
  padding-left: 0 !important;
}

.banner-content h1 {
  padding-left: 0 !important;
}

span.about-attr-header {
  color: #FF53FF;
}

#about-attr-page .treatment-arrow-image {
  margin: auto;
  margin-left: -40px;
}

#about-attr-page .diagnosis-cards-items {
  flex-wrap: nowrap;
  padding-top: 0px;
}

#about-attr-page .diagnosis-cards-container h3 {
  color: #151515;
  margin-top: 0%;
  margin-bottom: 2%;
  padding-top: 0px;
  padding-bottom: 15px;
  font-family: "Kanit-Bold";
  font-weight: normal;
}

#about-attr-page .gradient-line {
  padding-bottom: 16px;
  padding-top: 16px;
  margin-left: 20px;
  margin-right: 20px;
}

#about-attr-page .diagnosis-cards-container::before {
  top: -3px;
  left: 0px;
  right: -3px;
  bottom: -3px;
}

#about-attr-page .diagnosis-cards-items {
  margin-bottom: 0;
  /*padding: 0px 0px;
    height: 285px;*/
}
#about-attr-page .galaxy-ul {
    padding-right: 20px;
}
#about-attr-page .galaxy-ul span{
    display:block;
}
#about-attr-page .steps-title {
  font-family: "Kanit-SemiBold";
  line-height: 22px;
}
#about-attr-page .treatment.banner-content h1 sup {
    font-size: 50%;
    font-family: "Kanit-Medium";
}
.about-attr-video {
  text-align: center;
  margin: auto;
  max-width: 1000px;
}

.container-about-attr {
  max-width: 1265px; /* Updated from 1440px */
  margin: auto;
}

.source-damage {
  text-align: center;
  font-family: Kanit;
  max-width: 964px;
  margin: auto;
}

.source-damage h2 {
  font-family: "Kanit-Bold";
  font-size: 25px;
  line-height: 29px;
  color: #00215F;
  padding-bottom: 16px;
  padding-top: 16px;
  font-weight: normal;
}

.source-damage p {
  font-size: 18px;
  color: #151515;
  line-height: 20px;
  font-family: "Kanit";
}

.gradient-line {
  text-align: center;
}

.life-expetancy {
  margin-left: 145px;
  margin-right: 145px;
  border: 1px solid #9DB0AC;
  border-radius: 30px 30px 30px 0px;
  padding-left: 41px;
}

.life-inside {
  display: flex;
  justify-content: space-between;
  padding-top: 30px;
}

.life-inside-image-text {
  display: flex;
  justify-content: space-between;
  font-size: 18px;
  font-weight: 500;
  font-family: Kanit;
}

.right-arrow {
  margin-top: 40px;
}

.life-text {
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
}

.about-attr-video h3 {
  font-size: 20px;
  color: #00215F;
  font-family: "Kanit-Medium";
  padding-bottom: 20px;
  margin: auto;
  margin-top: 20px;
  font-weight: normal;
}

.about-attr-hereity {
  text-align: center;
  margin: auto;
  max-width: 964px;
  padding-top: 40px;
}

.about-attr-hereity h2 {
  font-family:"Kanit-SemiBold";/*font-family: "Kanit-Bold";*/
  color: #00215F;
  font-size:30px;/*font-size: 25px;*/
  line-height: 34px;
  padding-bottom: 20px;
  width: 68%;
  margin: auto;
  font-weight: normal;
}

.about-attr-hereity p {
  font-size: 18px;/*font-size: 16px;*/
  line-height: 19px;
  font-family: "Kanit";
  color:#151515;/*color: #00215F;*/
  margin-left: 19px;
  text-align: center;
  margin-right: 19px;
}

span.attr-green {
  color: #00D008;
}

.about-attr-understand h3 {
  font-family: "Kanit-Medium";
  color: #00215F;
  padding-bottom: 20px;
  text-align: center;
  font-size: 20px;
  font-weight: normal;
}

.understand-img1{
    background-image: url(/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop/about-attr-bgcontainer1.png);
    background-size: 100% 100%;
    height: 346px;
    max-height: 100%;
}
.understand-image-one {
  max-width: 490px;
  min-height: 328px;
  display: flex;
  border-radius: 30px 30px 30px 0px;
  /*background-color: #090c30;*/
}
.understand-img2{
  background-image: url(/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop/about-attr-bgcontainer2.png);
  background-size: 100% 100%;
  height: 346px;
  max-height: 100%;
}
.understand-image-two {
  max-width: 490px;
  min-height: 328px;
  display: flex;
  border-radius: 30px 30px 30px 0px;
  /* background-color: #090c30; */
}

.understand-two-images {
  display: flex;
  justify-content: space-between;
  margin: auto;
  max-width: 1160px;
  font-family: "Kanit";
}

.understand-image-one p {
  font-size: 30px;
  font-family: "Kanit-Bold";
  color: #ffff;
  margin-top: 21px !important;
  margin-left: 30px !important;
}

.understand-image-one ul {
  padding-top: 21px !important;
}

.understand-image-two ul {
  padding-top: 21px !important;
}

.understand-image-two p {
  font-size: 30px;
  font-family: "Kanit-Bold";
  color: #ffff;
  margin-top: 21px !important;
  margin-left: 30px !important;
  font-weight: bold;
}

.understand-image-one p span {
  color: #EC99FD;
}

.understand-image-two p span {
  color: #EC99FD;
}


.two-container-img {
  display: flex;
  justify-content: space-around;
}

.bg-img-text {
  display: flex;
  padding-left: 20px;
  padding-top: 30px;
}

.about-attr-ul li {
  font-family: "Kanit";
  position: relative;
  margin: 0;
  margin-bottom: 1em;
  padding-left: 1.5em;
  color: #FFFFFF;
  font-size: 18px;/*font-size: 16px;*/
  line-height: 18px;
  margin-right: 20px;
}

.about-attr-ul li::before {
  content: url(/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop/list-bullet-icon-new.svg);
  height: 0.4em;
  width: 0.4em;
  display: block;
  position: absolute;
  top: 0;
  left: 10px;
}

.understand-image-one .about-attr-ul li:nth-child(1):before {
  top: 5px;
}

.bg-img-text p {
  font-size: 20px;
  font-family: "Montserrat-SemiBold";
  color: #ffff;
}

.bg-img-text span {
  color: #FF53FF;
  font-family: Montserrat;
  font-weight: bold;
}

.about-attr-systemetic {
  text-align: center;
}

.about-attr-systemetic h2 {
  /*font-family: "Kanit-Bold";*/
  font-family: "Kanit-SemiBold";
  font-size: 30px;
  color: #00215F;
  /*max-width: 656px;*/
  margin: auto;
  padding-top: 15px;
  padding-bottom: 15px;
  font-weight: normal;
}

.about-attr-systemetic h3 {
  font-family: "Kanit-Medium";
  font-size: 20px;
  color: #00215F;
  padding-bottom: 20px;
  font-weight: normal;
}

.about-attr-systemetic p {
  font-family: "Kanit";
  font-size: 18px;
  line-height: 20px;
  color: #FFFFFF;
  margin: auto;
  max-width: 786px;
  padding-top: 60px;/*padding-top: 40px;*/
  text-align: left;
}

.bgsysmeticbanner {
  background-image: url(/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop/systemic-banner.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  height: 173.9px;
  width: 100%;
  margin: auto;
  max-width: 1160px;
  /* background-color: #00102e; */
  border-radius: 30px 30px 30px 0px;
  /* background-position-x: -10px; */
}

.about-attr-prograss {
  padding-bottom: 50px;
}

.about-attr-prograss h3 {
  text-align: center;
  font-family: "Kanit-Medium";
  font-size: 20px;
  color: #00215F;
  margin-top: 40px;
  font-weight: normal;
}

.progress-two-images {
  display: flex;
  justify-content: space-between;
  margin: auto;
  max-width: 1161px;
  font-family: "Kanit";
}

.progress-img1 p {
  font-size: 18px;
  font-family: "Kanit-Bold";
  max-width: 337px;
  text-align: center;
  padding-bottom: 20px;
  margin: auto;
}

.progress-img2 p {
  font-size: 18px;
  font-family: "Kanit-Bold";
  max-width: 531px;
  text-align: center;
  padding-bottom: 20px;
  margin: auto;
}

.steps-title2 {
  color: #585AEA;
  font-size: 16px;
  font-family: "Kanit-SemiBold";
  padding-top: 10px;
}

.progress-image-one {
  background-image: url(/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop/diagnosis-banner.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  width: 571px;
  height: 190px;
  display: flex;
  border-radius: 30px 30px 30px 0px;
}

.progress-image-two {
  background-image: url(/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop/diagnosis-banner.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  width: 571px;
  height: 190px;
  display: flex;
  border-radius: 30px 30px 30px 0px;
}

.progress-image-one ul {
  padding-top: 15px !important;
  padding-left: 45px !important;
  margin-right: 80px !important;
}

.progress-image-two ul {
  padding-top: 15px !important;
  padding-left: 45px !important;
  margin-right: 80px !important;
}

.progress-image-one img {
  margin-top: 15px;
  margin-left: 15px;
  width: 190px;
  height: 90px;
}

.progress-image-two img {
  margin-top: 15px;
  margin-left: 15px;
  width: 190px;
  height: 90px;
}

.progress-img1 ul li {
  color: white;
  padding-bottom: 10px;
}

.progress-img2 ul li {
  line-height: 12px;
  color: white;
  padding-left: 13px;
}

.progress-image-two ul span {
  font-family: Kanit;
  color: white;
}

#about-attr-page #container-75cf52306c {
    background-color: #FAFAFA !important;
}

.attr-life h3 {
  font-family: "Kanit-SemiBold";
  font-size: 30px;
  color: #00215F;
  padding-bottom: 20px;
  text-align: center;
  padding-top: 50px;
  font-weight: normal;
}

.attr-life p {
  font-family: "Kanit";
  font-size: 20px;
  padding-bottom: 25px;
  text-align: center;
  color: #00215F
}
/*#about-attr-page sup{*/
/*        font-size: 10.5px;*/
/*}*/
#about-attr-page .source-damage h2 sup {
    font-size: 50%;
    font-family: "Kanit-SemiBold";
}
#about-attr-page .source-damage p sup {
    font-size: 50%;
    top: -0.5em;
    font-family: "Kanit-Medium";
}
#attr-symptoms .banner-txt2 sup {
    font-family: "Kanit";
    font-size: 50%;
}
#about-attr-page .about-attr-hereity p sup {
    font-size: 60%;
    top: -0.5em;
    font-family: "Kanit";
}
#attr-symptoms .banner-txt3 sup {
    font-size: 50%;
    font-family: "Kanit-Medium";
}
#about-attr-page .galaxy-ul sup ,#about-attr-page .about-attr-systemetic p sup{
    font-size: 60%;
    font-family: "Kanit";
}
#about-attr-page .about-attr-prograss ul.about-attr-ul sup {
    font-size: 60%;
    font-family: "Kanit";
    top: -0.5em;
}
#about-attr-page .galaxy-ptag p sup ,#about-attr-page .galaxy-ptag1 p sup{
    font-size: 60%;
    font-family: "Kanit-SemiBold";
    top: -0.5em;
}
#about-attr-page .attr-life p sup {
    font-size: 60%;
    font-family: "Kanit";
}
#about-attr-page #progressive-cont-1 .cards-footer-header sup, #about-attr-page #progressive-cont-2 .cards-footer-header sup {
    font-size: 60%;
    font-family: "Kanit-medium";
    top: -0.5em;
}
.galaxy-ptag p {
  /*text-align: center;*/
  /*margin: auto;*/
  /*max-width: 337px;*/   
    text-transform: uppercase; 
    max-width: 480px;
    font-family: "Kanit-SemiBold";
    font-size: 20px;
    padding-bottom: 20px;
    line-height: 26px;
    color: #fff;
}

.galaxy-ptag1 p {
  /*text-align: center;*/
  margin: auto;
  /*max-width: 557px;*/
  /*font-family: "Kanit-Bold";*/
  /*font-size: 18px;*/
  /*padding-bottom: 30px;*/
  /*line-height: 20px;*/
    max-width: 480px;
    color: #fff;
    text-transform: uppercase;
    font-family: "Kanit-SemiBold";
    font-size: 20px;
    padding-bottom: 20px;
    line-height: 26px;
}

.galaxy-mobile {
  /*background-image: url(/content/dam/intelligentcontent/unbranded/attr-dsa/en/desktop/galaxy1.png);*/
  display: flex;
  background-size: cover;
  border-radius: 30px 30px 30px 0px;
  margin-right: 20px;
  max-width: 572px;
  /*height: 250px;*/
    min-height: 134px;
    justify-content: space-between;
}

.galaxy-mobile1 {
  /*background-image: url(/content/dam/intelligentcontent/unbranded/attr-dsa/en/desktop/galaxy2.png);*/
  display: flex;
  /*background-size: cover;*/
  /*border-radius: 30px 30px 30px 0px;*/
  max-width: 572px; 
  /*padding: 20px 30px 30px;*/
  /*height: 250px;*/
    justify-content: space-between;
} 
#about-attr-page .gal-neuron-mobile{
    display:none;
}
.galaxy-fix {
  /*height: 150px;
  width: 180px;*/
  width: 100% !important;
  min-width: 124px;
}

.galaxy-ul {
  color: white;
  font-family: "Kanit";
  font-size: 16px;
  line-height: 18px;
  max-width: 54%;
  /*margin-left: 115px;*/
  /*margin-top: 13px;*/
  line-height: 20px;
    max-width: calc(100% - 160px);
}

.galaxy-ul b {
  font-family: "Kanit-Bold";
}

.galaxcy-div {
  display: flex;
  justify-content: center;    gap: 15px;
}

.galxy-image img {
  /*position: relative;*/
  /*top: 17px;*/
  /*left: 50px;*/
  width: 100px;
    /*height: 100px;*/
  ;
}
.galaxy-mobile ul li::before,
.galaxy-mobile1 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: 16px;
}

.galaxy-mobile ul li::before,
.galaxy-mobile1 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: 16px;
}

.about-attr-connecting h2 {
  font-family: "Kanit-Bold";
  font-size: 30px;
  color: #00215F;
  max-width: 964px;
  margin: auto;
  text-align: center;
  padding-top: 20px;
  font-weight: normal;
}

.about-attr-connecting p {
  font-family: "Kanit";
  font-size: 18px;
  text-align: center;
  padding-top: 10px;
  margin-left: 16px;
  margin-right: 16px;
}

.attr-raised {
  display: flex;
  justify-content: space-between;
  margin: auto;
  max-width: 964px;
  font-size: 20px;
  font-family: "Kanit";
  padding-bottom: 50px;
  padding-top: 20px;
}

attr-raised ul {
  max-width: 236px;
}

.attr-raised ul li img {
  margin-left: -14px;
  margin-top: -8px;
}

.attr-raised ul li h4 {
  padding-left: 20px;
  margin-top: -26px;
  font-family: "Kanit-Medium";
}

.understand-ptag {
  /*width: 100%; padding-right: 40px;*/
  /*background-image: url(/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop/about-attr-bgcontainer1.png);
  background-size: cover;*/
    /* width: 350px; */
    padding-right: 0px;
}

.understand-ptag1 {
  /* background-image: url(/content/dam/intelligentcontent/seethepattrns-ca/ca/en/desktop/about-attr-bgcontainer2.png);
  background-size: cover;     */
  /* width: 350px;   */
  /*padding-right: 66px;*/
}

.understand-ptag p:nth-child(2) {
  text-align: left;
  margin: auto;
  margin-top: 3px !important;
}

.understand-ptag p:nth-child(1) {
  text-align: left;
  margin-top: 21px !important;
}

span.reference-italic {
  font-style: italic;
}

.border {
  border-bottom: 2px inset;
  margin-bottom: 35px;
}

.aboutattr-cards-container {
  background-color: #FFFFFF;
  height: 100%;
  border-radius: 30px 30px 30px 0px;
  margin-left: 15%;
  margin: auto;
  max-width: 1050px;
  position: relative;
  margin-bottom: 30px;
}

.kWidgetPlayBtn {
  height: 68px !important;
  background: url(/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop/play-icon.png) !important;
}

#about-attr-page .cmp-video__player {
  /*max-height: 500px !important;*/
    max-width: 964px;
    width: 100%;
    margin: auto;
    max-height: 515px !important;
    /* REMOVED (was breaking mobile layout, no media guard): padding-left: 268px; */
	margin-top: -30px;
}

.aboutattr-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);
}
.aboutattr-cards-container::before{
    visibility: hidden;
}
.aboutattr.diagnosis-cards-items {
  padding-bottom: 20px;
}

.add-30px {
  padding-top: 33px;
}

img.attr.steps-icon {
  width: 75%;
  height: 70%;
}

h3.cards-footer-header {
  font-family: "Kanit-Bold";
  font-size: 18px;
  text-align: center;
  padding-bottom: 15px;
  font-weight: normal;
}

#text-2e067988c2 .about-attr-prograss {
  padding-bottom: 20px;
}
#about-attr-page .aboutattr-cards-container {
    border: 1px solid #606FB4;
    box-shadow: 0px 3px 6px 0px rgb(0 0 0 / 19%);
} 
/*#about-attr-page .aboutattr-cards-container::before {
    visibility: hidden;
} */
#about-attr-page #about-cards-1   {
    padding-bottom: 40px !important;
	margin-top:35px;
}
#about-attr-page #about-cards-1 .aboutattr-cards-container {
    margin-bottom: 0px;
} 
#about-attr-page .cmp-container[role="about-attr-wrap"],
#about-attr-page #content-sec-1,
#about-attr-page #content-sec-2 {
    background: #f7f7f7;
} 
#about-attr-page .video {
    padding-bottom: 30px;
}
#about-attr-page #progressive-cont-1 .diagnosis-cards-items, 
#about-attr-page #progressive-cont-2 .diagnosis-cards-items {
    align-items: flex-end;
}
#about-attr-page #progressive-cont-1 .diagnosis-cards-items .alt-right-arrow  {
    margin-bottom: 20px;
}
#about-attr-page #progressive-cont-2 .diagnosis-cards-items .alt-right-arrow {
    margin-bottom: 15px;
}
#about-attr-page #progressive-cont-1 .diagnosis-cards-items .attr, 
#about-attr-page #progressive-cont-2 .diagnosis-cards-items .attr {
    margin-bottom: 0px;
}
#about-attr-page #progressive-cont-1 .diagnosis-cards-items .steps-title2 {
    padding-top: 2px;
}
#about-attr-page #progressive-cont-1  .cards-footer-header,
#about-attr-page #progressive-cont-2  .cards-footer-header{
    padding-top: 25px;
    padding-bottom: 30px;
    color:#00215F;
    font-size:20px;
    font-family: "Kanit-Medium";
    font-weight: normal !important;
}
#about-attr-page #content-sec-1 .source-damage h2 {
    padding-top: 35px;
    font-family: "Kanit-SemiBold";
    font-size:30px;
    font-weight: normal;
} 
#about-attr-page .about-attr-prograss ul.about-attr-ul {
  /*width: calc(100% - 193px);width: calc(100% - 240px);*/
} 
#about-attr-page .understand-image-one p span .cyan, 
#about-attr-page .understand-image-two p span .cyan {
    color: #FFFFFF;
}
#about-attr-page .galaxy-ptag {
    background-image: url(/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop/galaxy1.png);
    background-size: cover;
    padding: 20px 30px 30px;
    max-width: 573px;
    border-radius: 30px 30px 30px 0;
    height: 328px;
    max-height: 344.59px;
} 
#about-attr-page .galaxy-ptag1 {
    background-image: url(/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop/galaxy2.png);
    background-size: cover;
    max-width: 573px;
    padding: 20px 30px 30px;
    border-radius: 30px 30px 30px 0;
    height: 328px;
    max-height: 344.59px;
}
#about-attr-page .ab-icon-1{
  width: 134px;
  height: 100px;
}
#about-attr-page .ab-icon-2{
  width: 133px;
  height: 117px;
}
#about-attr-page .ab-icon-3{
  width: 164px;
    height: 107.74px;
}
#about-attr-page .ab-icon-4{
  width: 143.79px;
  height: 110px;
  margin-top: 2.3em;
}
#about-attr-page .ab-icon-5{
  width: 53px;
  height: 122px;
}
/* about-attr-mobile */
@media screen and (max-width: 991px) {
    
.galaxy-mobile1 .galaxy-ul b {
    margin-left: 1.5em;
}
.galaxy-mobile1 .galaxy-ul ul li {
    margin-left: 10px;/*margin-left: 30px;*/
}
  #treatment-approaches .steps-card-icon .steps-icon {
    margin-top: 10%;
  }

  #treatment-approaches .liver {
    max-width: 90px;
  }

  #treatment-arrw-1 {
    display: none;
  }

  #treatment-arrw-2 {
    width: 40px;
    margin-top: 50px;
  }

  img.attr.steps-icon {
    width: 151px;
    height: 60px;
  }

  .hfheart {
    padding-left: 20px;
  }

  #treatment-app .arrow-line-icon {
    padding-bottom: 10px;
    padding-top: 0px;
  }

  #treatment-approaches .banner-content {
    padding-bottom: 0px;
    margin-left: 30px;
  }

  .goal p:nth-child(2) sup {
    font-size: 9px;
  }

  .bullet.steps-title {
    width: 225px;
    padding-left: 96;
    text-align: left;
    margin: 0 auto;
  }

  .suptxt-ta {
    top: -0.5em;
    font-size: 17px;
  }

  .main-bg2 .title-txt sup, .main-bg2 .patient-txt sup, .main-bg2 .sec2-span sup {
    font-size: 8px;
    top: -1px;
    position: relative;
  }

  .about-attr-systemetic h2 {
    padding-left: 15px;
    font-size: 25px;
    padding-right: 15px;
    font-weight: normal;
  }

  .attrsymptoms-sec1 .suptxt-ta {
    font-size: 11px;
    font-family: "Kanit";
  }

  .border {
    border-bottom: 0px inset;
    margin-bottom: 35px;
  }

  .about-attr-hereity .suptxt {
    top: -0.7em;
    font-size: 9px;
  }

  .container-about-attr .suptxt {
    top: -0.8em;
    font-size: 9px;
  }

  #attr-inform .cmp-dynamicform-v2 .cmp-dynamicform__generated-form .cmp-dynamicform__form-group .form-control:not(textarea) {
    width: 242px;background-color:#FFF;
  }

  #about-attr-page h3.cards-footer-header {
    padding-left: 5px;
    padding-right: 5px;
  }

  .aboutattr-cards-container {
    width: auto;
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 20px;
    position: relative;
  }

  #about-attr-page .banner-content h1 {
    font-size: 30px;
    line-height: 35px;
    width: 100%;
  }

  #about-attr-app .subheading-banner {
    padding-top: 20px;
  }

  div#about-attr-app {
    margin-top: -120px;
  }

  .understand-two-images {
    display: block;
  }

  .understand-image-one {
    width: auto;
    margin-bottom: 30px;
    display: block;
    height: 367px;
    margin-left: 5px;
    margin-right: 5px;
  }

  .understand-image-two {
    width: auto;
    display: block;
    margin-left: 5px;
    margin-right: 5px;
    height: 367px;
  }

  .understand-image-one p {
    padding-top: 20px;
  }

  .understand-image-two p {
    padding-top: 20px;
  }

  .understand-ptag p:nth-child(2) {
    margin-top: 4px !important;
    padding-top: 0px;
  }

  .container-about-attr {
    margin-left: 0;
    margin-right: 0;
  }

  .life-expetancy {
    margin-left: auto;
    margin-right: auto;
  }

  .life-inside {
    display: block;
    justify-content: space-around;
    text-align: center;
  }

  .right-arrow {
    margin-top: 21px;
    margin-bottom: 22px;
    transform: rotate(90deg);
  }

  .life-expetancy {
    max-width: 300px;
  }

  img.video-img {
    padding-left: 5px;
    padding-right: 5px;
  }

  .about-attr-video {
    padding-top: 20px;
  }

  .progress-two-images {
    display: block;
  }

  .progress-mobile {
    background-image: url(/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/about-attr-bgcontainer1.png);
    background-color: #090c30;
    border-radius: 30px 30px 30px 0px;
    background-size: cover;
    height: 350px;
    margin-bottom: 20px;
    margin-left: 10px;
    margin-right: 10px;
  }

  .progress-mobile1 {
    background-image: url(/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/about-attr-bgcontainer2.png);
    background-color: #090c30;
    border-radius: 30px 30px 30px 0px;
    background-size: cover;
    height: 327px;
    margin-left: 10px;
    margin-right: 10px;
  }

  .progerss-ul {
    color: white;
    font-family: "Kanit";
    font-size: 16px;
    padding-left: 10px;
    max-width: 261px;
    margin: auto;
    line-height: 20px;
  }

  .progerss-ptag {
    font-size: 24px;
    font-family: "Kanit-Bold";
    font-weight: bold;
    color: white;
    padding-top: 10px;
    padding-bottom: 15px;
    max-width: 261px;
    margin: auto;
  }

  .progerss-ptag p span {
    color: #EC99FD;
  }

  .progerss-ul ul li::before {
    content: "";
    height: 0.4em;
    width: 0.4em;
    display: block;
    position: relative;
    top: 13px;
    left: -15px;
    right: 0px;
    transform: rotate(45deg);
    background: transparent linear-gradient(45deg, #F599FC 0%, #7D76FE 30%, #556AFF 49%, #619EFD 79%, #75F2FB 100%) 0% 0% no-repeat padding-box;
  }

  .progress-image-one {
    width: auto;
    display: flex;
    margin-bottom: 30px;
    height: auto;
    margin-left: 5px;
    margin-right: 5px;
  }

  .progress-image-two {
    width: auto;
    display: flex;
    height: auto;
    margin-left: 5px;
    margin-right: 5px;
  }

  .two-container-img {
    display: block;
  }

  .bgimg1 {
    width: auto;
    height: auto;
  }

  .bgimg2 {
    width: auto;
    height: auto;
  }

  .attr-raised {
    display: block;
    padding-left: 35px;
    padding-right: 35px;
  }

  .attr-raised ul li h4 {
    padding-bottom: 33px;
    line-height: 24px;
    padding-left: 30px;
    margin-top: -24px;
  }

  .source-damage {
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 0px;
    /*margin-bottom: 16px;*/
  }

  .about-attr-video h3 {
    margin: auto;
    max-width: 330px;
    line-height: 22px;
    font-weight: normal;
  }

  .about-attr-hereity {
    padding-right: 10px;
    padding-left: 10px;
    padding-top: 20px;
  }

  .about-attr-understand h3 {
    padding-left: 5px;
    padding-right: 5px;
    line-height: 22px;
    font-weight: normal;
  }

  .about-attr-systemetic p {
    padding-right: 5px;
    font-size: 12px;
    padding-left: 62px;
    padding-top: 12px;
    margin: auto;
    margin-left: 10px;
    margin-right: 10px;
    font-size: 14px;
  }

  .bgsysmeticbanner {
    margin: auto;
    margin-left: 10px;
    margin-right: 10px;
    height: 135px;
    background-position-x: -75px;
  }

  .about-attr-prograss {
    margin-top: 20px;
  }

  .progress-img2 p {
    padding-left: 5px;
    padding-right: 5px;
  }

  .progress-image-one ul {
    margin-right: 20px !important;
  }

  .progress-image-two ul {
    margin-right: 20px !important;
  }

  .banner-content h1 {
    font-size: 20px;
    margin: auto;
    line-height: 25px;
  }

  #about-attr-page .treatment-arrow-image {
    margin: auto;
    margin-left: -10px;
    padding-top: 5px;
  }

  .source-damage p {
    margin: auto;
    margin-left: 5px;
    margin-right: 5px;
    font-size: 16px;
    line-height: 19px;
  }

  .b1.about-attr.diagnosis-cards-container {
    margin-top: 6px !IMPORTANT;
  }

  .b2.diagnosis-cards-container {
    margin-top: 10px !important;
  }

  .divcausess {
    padding-left: 30px;
    padding-right: 30px;
  }

  .about-attr-reference p {
    line-height: 25px;
    padding-left: 15px;
    padding-right: 15px;
  }

  .galaxcy-div {
    display: block;
  }

  .galaxy-mobile {
    width: auto;
    margin-left: 10px;
    margin-right: 10px;
    height: 205px;
  }

  .galaxy-mobile1 {
    width: auto;
    margin-left: 0px;/*margin-left: 10px;*/
    margin-right: 10px;
    /*height: 202px;*/
    height: auto;
    padding-bottom: 20px;
    padding-top:20px;
  }

  .galaxy-ptag1 p {
    font-size: 16px;
    padding-top: 20px;
    padding-left: 17px;
    padding-right: 17px;
  }

  .galaxy-ptag p {
    font-size: 16px;
    padding-left: 10px;
    padding-right: 10px;
  }

  .galxy-image img {
    top: 24px;
    width: 54px;
    height: 77px;
    left: 13px;
  }

  .galaxy-ul {
    font-size: 14px;
    max-width: 71%;
    margin-left: 18px;/*margin-left: 25px;*/
    margin-top: 23px;
    line-height: 20px;
  }
  #about-attr-page .video {
    padding:24px 24px;
    width: 100%;
  }
  #about-attr-page .galaxy-ul {
    padding-right: 0px;
    margin-top: 0px;
    font-size: 17px;
    width: 100%;
  }
  
    #about-attr-page .diagnosis-cards-items {
      flex-wrap: wrap;
      height: auto;
        padding: unset;
        margin-bottom: 12%;
    }
    
    #about-attr-page .galaxy-ptag {
        background-image: url(/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/mobile/galaxy1-mob.png);
        background-size: cover;
        max-width: 342px;
        height: 368.59px;
        max-height: 368.59px;
    } 
    #about-attr-page .galaxy-ptag1 {
        background-image: url(/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/mobile/galaxy2-mob.png);
        background-size: cover;
        max-width: 342px;
        height: 422.28px;
        max-height: 422.28px;
    }
}



/* treatment appro css */


/*.treatment-footer-text-container {
  display: none;
}*/

#treatment-approaches .footer-text-container {
  padding-top: 10px;
  height: 190px;
}

#treatment-approaches .footer-text-container h2 {
  padding-bottom: 20px;
  text-align: left;
  font-weight: normal;
}

#treatment-approaches .footer-text-container h4 {
  text-align: left;
  padding-left: 12%;
  padding-bottom: 10px;
  padding-right: 12%;
  font-size: 20px;
}

#treatment-approaches .footer-text-container p {
  font-size: 18px;
  padding-left: 12%;
  text-align: left;
  padding-right: 12%;
  padding-bottom: 12px;
}

#treatment-app {
  z-index: -1;
  margin-top: 0px;
}

#treatment-approaches .banner-content {
  padding-top: 120px;
}

.treatment-diagnosis-banner {
  /*background-image: url(/content/dam/intelligentcontent/unbranded/attr-dsa/en/desktop/diagnosis-banner.png);*/
  background-image: url(/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/internal_sky-header-desktop.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  box-shadow: rgba(0, 0, 0, 0.90) 0px -50px 36px -15px inset;
  position: relative;
  top: 0px;
}

.divcausess {
  margin: auto;
  max-width: 964px;
  padding-bottom: 40px;
}

p.causessattr {
  font-family: "Kanit";
  font-size: 18px;
  text-align: center;
  padding-bottom: 30px;
  padding-top: 30px;
  padding-top: 20px;
}

.silencersbold {
  font-family: "Kanit-Bold";
  font-size: 18px;
}

.stanlibold {
  font-family: "Kanit-Bold";
  font-size: 18px;
}

.lislienesrs li {
  padding-bottom: 10px;
}

.lislienesrs li p {
  font-family: "Kanit";
  font-size: 18px;
  line-height: 20px;
}

#treatment-approaches .targeting h2 {
  padding-top: 15px;
  font-family: "Kanit-Bold";
  padding-bottom: 20px;
  font-weight: normal;
}

#treatment-approaches h1 {
  max-width: 1070px;
}

#treatment-approaches .gradient-line {
  padding-bottom: 10px;
}

.treatment-cards-container {
  background-color: #FFFFFF;
  height: 100%;
  border-radius: 30px 30px 30px 0px;
  margin: auto;
  max-width: 1153px;
  position: relative;
  margin-bottom: 2%;
}

.treatment-cards-items {
  display: flex;
  height: 100%;
  margin-bottom: 0%;
  align-items: center;
  justify-content: center;
  justify-items: center;
  padding-bottom: 30px;
  align-content: center;
}

.treatment-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);
}

#treatment-approaches .steps-card-icon .steps-icon {
  margin-top: 20%;
}

#treatment-approaches .steps-card-icon .steps-icon-1 {
  margin-top: 20%;
  height: 80px;
}

#treatment-approaches .steps-title {
  font-size: 18px;
  line-height: 21px;
  font-family: "Kanit-SemiBold";
}

.targeting {
  text-align: center;
  font-size: 20px;
  font-family: "Kanit";
  color: #00215F;
  margin-top: 20px;
}

.treatment-inside {
  display: flex;
  font-family: "Kanit";
  margin: auto;
  max-width: 1153px;
}

.inside-goal {
  margin: auto;
  max-width: 1153px;
}

.treatment-all-image {
  display: flex;
  max-width: 564px;
}

.container-treatment {
  margin-left: auto;
  margin-right: auto;
  max-width: 1158px;
}

.silence {
  text-align: center;
  padding-bottom: 15px;
  position: relative;
  max-width: 215px;
  height: 180px;
  background-color: white;
  border-radius: 30px 30px 30px 0;
}

.silence::before {
  content: "";
  position: absolute;
  top: -3px;
  left: 0px;
  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);
}

.treatment-liver {
  text-align: center;
  position: relative;
  height: 241px;
  background-color: white;
  border-radius: 30px 30px 30px 0;
}

.treatment-liver::before {
  content: "";
  position: absolute;
  top: -3px;
  left: 0px;
  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);
}

.stabizer {
  text-align: center;
  position: relative;
  max-width: 215px;
  height: 180px;
  background-color: white;
  border-radius: 30px 30px 30px 0;
}

.stabizer::before {
  content: "";
  position: absolute;
  top: -3px;
  left: 0px;
  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);
}

.treatment-all {
  text-align: center;
  position: relative;
  max-width: 564px;
  height: 241px;
  background-color: white;
  border-radius: 30px 30px 30px 0;
}

.treatment-all::before {
  content: "";
  position: absolute;
  top: -3px;
  left: 0px;
  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);
}

.goal {
  text-align: center;
  margin-bottom: 48px;
  padding-bottom: 10px;
  position: relative;
  height: 112px;
  background-color: white;
  border-radius: 30px 30px 30px 0;
}

.goal::before {
  content: "";
  position: absolute;
  top: -3px;
  left: 0px;
  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);
}

.treatment-protein {
  text-align: center;
  position: relative;
  max-width: 270px;
  height: 241px;
  background-color: white;
  border-radius: 30px 30px 30px 0;
}

.treatment-protein::before {
  content: "";
  position: absolute;
  top: -3px;
  left: 0px;
  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);
}

.silence p:nth-child(1) {
  color: #00215F;
  font-size: 24px;
  font-weight: 600;
  padding-top: 25px;
  font-family: "Kanit-SemiBold";
}

.silence p:nth-child(2) {
  font-size: 18px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  padding-right: 10px;
}

.treatment-one {
  padding-right: 20px;
  padding-left:10px;
  width: 50%;
}

.treatment-two {
  width: 50%;
  padding-right: 12px;
}

.treatment-three {
  padding-right: 20px;
}

.treatment-liver-image {
  padding-top: 10px;
  padding-bottom: 10px;
}

.treatment-liver-text p:nth-child(1) {
  font-size: 20px;
  color: #00215F;
  font-weight: 600;
  padding-bottom: 10px;
  font-family: "Kanit-SemiBold";
}

.treatment-liver-text p:nth-child(2) {
  font-size: 18px;
  color: #00215F;
  padding-bottom: 10px;
}

.stabizer p:nth-child(1) {
  color: #00215F;
  font-size: 24px;
  font-weight: 600;
  padding-top: 25px;
  font-family: "Kanit-SemiBold";
}

.stabizer p:nth-child(2) {
  font-size: 18px;
  padding-top: 10px;
  padding-bottom: 20px;
  padding-left: 10px;
  padding-right: 10px;
}

.goal p:nth-child(1) {
  color: #00215F;
  font-size: 24px;
  font-weight: 600;
  padding-top: 25px;
  font-family: "Kanit-SemiBold";
}

p.additionaltext {
  font-family: "Kanit";
  padding-top: 5px;
}

p.additionaltext-em {
  font-family: "Kanit";
  padding-top: 5px;
  font-style: italic;
  font-size: 18px;
  line-height: 20px;
}

.goal p:nth-child(2) {
  font-size: 18px;
  padding-top: 10px;
  padding-bottom: 10px;
  font-family: "Kanit";
}

.treatment-protein-image {
  padding-top: 32px;
  padding-bottom: 10px;
}

.treatment-protein-text p {
  font-size: 20px;
  color: #00215F;
  font-weight: 600;
  padding-bottom: 10px;
  letter-spacing: -1px;
  font-family: "Kanit-SemiBold";
}

.col-split {
  display: flex;
}

.treatment-all-image div img {
  padding-top: 10px;
  padding-bottom: 10px;
}

.treatment-all-image div p {
  font-size: 20px;
  color: #00215F;
  font-weight: 600;
  padding-bottom: 10px;
  font-family: "Kanit-SemiBold";
}

.arrow-down {
  text-align: center;
  padding-top: 20px;
  padding-bottom: 20px;
}

.treatment-all-image .all-one, .all-two, .all-three {
  padding-top: 30px;
}

.treatment-liver-image {
  padding-top: 42px;
}

#treatment-approaches .footer-main-container {
  font-family: "Kanit";
}

.treatment-footer-text-container h2 {
  color: #00215F;
  font-size: 30px;
  font-weight: bold;
  padding-top: 31px;
  font-family: "Kanit-Bold";
  padding-bottom: 31px;
  font-weight: normal;
}

.treatment-footer-text-container h4 {
  font-family: "Kanit";
  font-size: 20px;
  color: #000000;
  max-width: 768px;
  padding-bottom: 20px;
  line-height: 22px;
}

.treatment-footer-text-container p {
  font-size: 18px;
  font-family: "Kanit";
  max-width: 768px;
}

.treatment-footer-text-container::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 3px;
  background: transparent linear-gradient(136deg, #F599FC 0%, #7D76FE 30%, #556AFF 49%, #619EFD 79%, #75F2FB 100%) 0% 0% no-repeat padding-box;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  border-radius: 30px 30px 30px 0px;
}

.treatment-footer-text-container {
  margin: auto;
  max-width: 960px;
  padding-left: 90px;
  border: 1px solid;
  height: 146px;
  border-radius: 30px 30px 30px 0px;
  background-color: white;
  font-family: Kanit Medium;
  position: relative;
}

.treatment-footer-text-container p:nth-child(1) {
  font-size: 30px;
  font-family: "Kanit-Bold";
  color: #00A206;
  max-width: 768px;
  padding-top: 40px;
  /*display: none;*/
  ;
}

.treatment-footer-text-container p:nth-child(2) {
  font-size: 18px;
  font-family: "Kanit";
  color: #00A206;
  padding-top: 20px;
  text-decoration: underline;
  /*display: none;*/
  ;
}

.treatment-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: 10% 90%;
  background-size: cover;
  padding-top: 50px;
  box-shadow: rgba(0, 0, 0, 0.90) 0px 70px 40px -20px inset;
  padding-bottom: 25px;
}

.treatment-footer-subheading p {
  font-family: "Kanit-Bold";
  font-size: 40px;
  color: white;
  text-align: center;
  margin: auto;
  max-width: 758px;
  padding-top: 40px;
  padding-bottom: 20px;
  line-height: 45px;
}
#about-attr-page .treatment-footer-subheading p{
    background-color: #E2FCFD;
    border-radius: 25px 25px 25px 0;
    border: 1px solid #E34AEE;
    color: #00215F;
    width: 653px;
    max-width: 100%;
    height: 139px;
    max-height: 100%;
    font-size: 30px;
    font-family: "Kanit-SemiBold";
    line-height: 34px;
}
.treatment-footer-small-text p {
  font-family: "Kanit";
  font-size: 26px;
  text-align: center;
  color: #ffff;
  padding-bottom: 30px;
  padding-top: 32px;
}
.treatment-footer-small-text p span{
    color: #FF53FF;
    font-family: "Kanit-SemiBold";
}
.treatment-cta{
    text-transform: uppercase;
}
.treatment-btn {
  text-align: center;
  padding-bottom: 166px;
}

.treatment-btn button {
  padding: 10px 50px 10px 50px;
  border-radius: 21px;
  background-color: #FFFFFF;
  color: #00215F;
  cursor: pointer;
  font-family: "Kanit-SemiBold";
  font-size: 16px;
}

.treatment-btn button::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 2px;
  background: transparent linear-gradient(136deg, #F599FC 0%, #7D76FE 30%, #556AFF 49%, #619EFD 79%, #75F2FB 100%) 0% 0% no-repeat padding-box;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  border-radius: 21px;
}

.treatment-btn button {
  position: relative;
  background-image: url(/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/stay-inform-bg.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: 3;
}

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

.treatment-footer-text-container p:nth-child(2) img {
  padding-left: 3px;
  width: 18px;
  height: 14px;
}

.progress-image-two ul li::before {
  content: "";
  height: 0.4em;
  width: 0.4em;
  display: block;
  position: relative;
  top: 7px;
  right: 12px;
  transform: rotate(45deg);
  background: transparent linear-gradient(45deg, #F599FC 0%, #7D76FE 30%, #556AFF 49%, #619EFD 79%, #75F2FB 100%) 0% 0% no-repeat padding-box;
}

.about-attr-reference p {
  margin: auto;
  max-width: 1160px;
  font-size: 13px;
  font-family: "Kanit";
  line-height: 16px;
  padding-top: 0;
  margin-top: -41px;
  pointer-events: none;
}

.about-attr-reference {
  background-color: black;
  color: white;
  padding-top: 60px;
}

span.reference-bold {
  font-family: "Kanit-Bold";
}

/* about attr */

@media screen and (min-width: 992px) {
    
  .treatment.banner-content h1 {
    font-size: 40px;
  }

  #about-attr-page .gradient-line {
    padding-top: 0px !important;
  }

  .about-attr-prograss {
    padding-bottom: 35px !important;
  }
     #about-attr-page #progressive-cont-2 .diagnosis-cards-items .alt-right-arrow {
        margin-bottom: 24px;
    }
    #about-attr-page .steps-card1 {
        margin-bottom: 8px;
    }
    
  #about-attr-page .steps-card2,#about-attr-page .steps-card3 {
    margin-bottom: 24px;
  }
}

@media only screen and (min-width: 1061px) and (max-width: 1200px) {
    
    #about-attr-page .understand-image-two, #about-attr-page .understand-image-one {
        max-width: 500px;
    }
    #about-attr-page .about-attr-prograss ul.about-attr-ul {
        width: calc(100% - 170px);
    }
}

@media only screen and (min-width: 700px) and (max-width: 1200px) {
  .goal {
    margin-top: 25px;
  }
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
  .treatment-footer-main-container {
    min-height: 450px;
    background-position: 5% 90%;
  }

  #treatment-approaches .treatment-footer-text-container {
    width: 302px;
    padding-right: 20px;
  }

  #treatment-approaches .treatment-footer-main-container {
    height: 419px;
    background-position: -20px 0px;
  }

  #treatment-approaches .treatment-footer-text-container p:nth-child(2) {
    font-size: 18px;
    line-height: 0px;
  }

  #about-attr-page .arrow-line-icon {
    margin-right: 34px;
    width: 100%;
    padding-right: 15px;
  }
}

@media only screen and (min-width: 374px) and (max-width: 780px) {
  div#about-attr-app {
    margin-top: -180px;
  }
}

/*treatment mobile device*/
@media screen and (max-width: 991px) {
 /* .mobile-only img {
    width: auto!important;
  }
  */
  
  /*.aboutattr-cards-container::before{
    visibility: visible;
    }*/

  #diagnosing-attr .arrow-line-icon {
    margin-right: 40px !important;
    margin-left: -2px !important;
    padding-bottom: 0;
    width:90%;
  }

  #treatment-approaches .treatment-diagnosis-banner {
    background-image: url(/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/diagnosis-banner.png);
    background-position: -918px 22px;
  }

  .treatment.banner-content h1 sup {
    font-size: 16px;
  }

  #treatment-approaches .banner-txt1 {
    margin-top: 95px;
    margin-bottom: 7px;
  }

  .treatment-footer-text-container p:nth-child(2) img {
    width: 28px;
    height: 26px;
    margin-left: 49px;
    margin-top: 7px;
  }

  .treatment-footer-text-container p:nth-child(1) {
    font-size: 30px;
    padding-top: 40px;
    line-height: 34px;
  }

  .treatment-footer-text-container p:nth-child(2) {
    font-size: 23px;
    padding-top: 36px;
    text-decoration: underline;
  }

  .split-container {
    display: flex;
  }

  .desktop-only1 {
    display: none;
  }

  .treatment-inside {
    justify-content: space-around;
  }

  .treatment-three {
    padding-top: 22px;
  }

  .goal {
    margin-bottom: 22px;
    margin-left: 15px;
    margin-right: 15px;
    height: 130px !important;
    margin-top: 23px;
  }

  .treatment-all-image {
    display: block;
  }

  .treatment-all {
    height: 525px;
  }

  #treatment-approaches .footer-text-container h2 {
    font-size: 17px;
  }

  #treatment-approaches .footer-text-container h4 {
    font-size: 12px;
  }

  #treatment-approaches .footer-text-container p {
    font-size: 10px;
    line-height: 15px;
  }

  #treatment-approaches .footer-text-container {
    height: 280px;
  }

  #treatment-approaches .footer-subheading {
    font-size: 26px;
  }

  .silence p:nth-child(1) {
    font-size: 18px;
  }

  .silence p:nth-child(2) {
    font-size: 16px;
    max-width: 134px;
    margin: auto;
  }

  .stabizer p:nth-child(1) {
    font-size: 18px;
  }

  .stabizer p:nth-child(2) {
    font-size: 15px;
  }

  .treatment-liver-text p:nth-child(1) {
    font-size: 18px;
  }

  .treatment-liver-text p:nth-child(2) {
    font-size: 16px;
  }

  .treatment-protein-text p {
    font-size: 18px;
    letter-spacing: 0px;
  }

  .goal p:nth-child(1) {
    font-size: 18px;
  }

  .goal p:nth-child(2) {
    font-size: 16px;
    max-width: 300px;
    margin: auto;
  }

  .treatment-all-image div p {
    font-size: 18px;
    max-width: 281px;
    margin: auto;
  }

  .targeting {
    font-size: 20px;
    padding-top: 25px;
  }

  .treatment-footer-text-container {
    padding-left: 25px;
    margin-left: 12px;
    margin-right: 12px;
    border: 1px solid;
    height: 282px;
  }

  .treatment-footer-main-container {
    max-height: 930px;
   /* min-height: 480px;*/
    ;
  }

  #treatment-approaches h1 {
    font-size: 26px;
    line-height: 40px;
    width: 100%;
    font-size: 30px;
    line-height: 35px;
    margin-bottom: 0px;
  }

  .treatment-footer-subheading p {
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    line-height: 35px;
    font-size: 30px;
  }

  #treatment-app {
    z-index: -1;
    margin-top: -225px;
  }

  .treatment-footer-text-container h2 {
    font-size: 26px;
    line-height: 30px;
  }

  .treatment-footer-text-container p {
    font-size: 19px;
    line-height: 25px;
  }

  .treatment-protein-image {
    padding-top: 14px;
  }

  .treatment-cards-container {
    background-color: #FFFFFF;
    height: 100%;
    border-radius: 30px 30px 30px 0px;
    width: auto;
    margin-left: 15px;
    margin-right: 15px;
    position: relative;
    margin-bottom: 4%;
    max-width: 100%;
  }

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

  .treatment-cards-items {
    flex-direction: column;
    row-gap: 20px;
  }

  #treatment-approaches .targeting h2 {
    font-size: 25px;
    padding: 15px 17px 20px;
  }
}

@media only screen and (min-width: 991px) and (max-width: 1253px) {
    
  #about-attr-page .treatment.banner-content {
    padding-left: 35px;
  }

  #treatment-approaches .banner-content {
    padding-top: 120px;
    padding-left: 58px;
  }
}

@media only screen and (min-width: 745px) and (max-width: 830px) {
    
  #about-attr-page .treatment-footer-main-container {
    height: 492px;
  }

  #treatment-approaches .treatment-diagnosis-banner {
    background-position: -575px 22px;
  }

  /*#treatment-approaches .treatment-one {*/
  /*  width: 30%;*/
  /*  margin-left: 159px;*/
  /*}*/

  #treatment-approaches .treatment-two .arrow-down {
    width: 25px;
    margin-left: 97px;
  }

  #treatment-approaches .treatment-footer-main-container {
    height: 334px;
  }
}


/* Treatment approches */

@media screen and (min-width: 992px) {
    
  #treatment-approaches img.treatment-arrow-image {
    margin: auto;
    margin-left: -38px;
    margin-right: 0;
    max-width: 1079px;
    margin-top: -15px;
  }
}

@media only screen and (min-width: 374px) and (max-width: 780px) {
  .treatment-footer-main-container {
    height: 323px;
    /*background-position: 0px calc(286px - 73vw);*/
    padding-left: 40px;
    padding-right: 40px;
  }

  .about-attr-reference p {
    margin-top: -42px;
    padding-top: 16%;
  }

  #about-attr-page .banner-content {
    /*padding-top: 139px;*/
  }
}

@media only screen and (min-width: 320px) and (max-width: 373px) {
  .treatment-footer-main-container {
    height: 465px;
  }

  .treatment-footer-main-container {
    background-position: 5% 90%;
  }

  .about-attr-reference p {
    margin-top: -25px;
  }
}

@media (width: 664px) {
  .about-attr-reference p {
    margin-top: -146px;
  }

  #about-attr-page .treatment-footer-main-container {
    height: 323px;
  }
}

@media only screen and (min-width: 745px) and (max-width: 780px) {
  .treatment-footer-main-container {
    background-position: 0px calc(500px - 70vw);
  }

  .about-attr-reference p {
    padding-top: 7%;
  }

  #about-attr-page .treatment-footer-main-container {
    height: 390px;
  }

  #attr-home .cta-bottom-home {
    width: 60%;
    height: 36px;
    position: relative;
    background: linear-gradient(to right, #5E4A83 0%, #353C83 47%, #3D5E83 100%) padding-box, linear-gradient(to right, #F599FC 0%, #556AFF 50%, #75F2FB 100%) border-box;
    border-radius: 50em;
    border: 3px solid transparent;
    left: 10%;
    margin-top: -38px;
  }

  .mobile-only img {
    width: auto;
  }
}

@media only screen and (min-width: 390px) and (max-width: 420px) {
  .treatment-footer-main-container {
    height: 407px;
  }
}

@media (min-width: 992px) and (max-width: 1200px) {
  #treatment-approaches .treatment-inside {
    margin-left: 15px;
    margin-right: 15px;
  }

  #treatment-approaches .treatment-cards-container {
    margin-left: 15px;
    margin-right: 15px;
  }

  #treatment-approaches .container-treatment .inside-goal {
    margin-left: 15px;
    margin-right: 15px;
  }

  #treatment-approaches .about-attr-reference {
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media (min-width: 992px) and (max-width: 1200px) {
  #about-attr-page .galaxy-mobile1, #about-attr-page .galaxy-mobile {
    height: 290px;
    margin: 0 10px;
  }
}

@media (min-width: 590px) and (max-width: 991px) {
  #about-attr-page .galaxy-mobile, #about-attr-page .galaxy-mobile1 {
    max-width: 100%;
    height: auto;
    padding-bottom: 20px;
  }

  #about-attr-page .galaxy-mobile1 ul, #about-attr-page .galaxy-mobile ul {
    padding-left: 20px;
  }
  
  #about-attr-page .galaxy-mobile {
  padding-top: 20px;
}
}



@media (min-width: 320px) and (max-width: 400px) {
    
  #treatment-approaches #container-9711092e2d .treatment-one {
    padding-left: 11px;
    padding-right: 10px;
  }

  #treatment-approaches #container-9711092e2d .treatment-two {
    padding-right: 12px;
    padding-left: 10px;
  }
}
@media ( min-width: 920px) and (max-width: 1200px){
.aboutattr-cards-container, .about-attr-prograss, .bgsysmeticbanner, .aboutattr-cards-container{
    margin: 30px 15px;

}
#about-attr-page .arrow-line-icon{
    max-width: 90%;
  }

  .understand-image-two, .understand-image-one{
    height: 300px;
  }
  .understand-image-one{
    margin-right: 10px;
  }
    #about-attr-page .hfheart {
margin: 0 15px;
}
.about-attr-systemetic p{
    max-width: 700px;
}
}

@media ( min-width: 920px) and (max-width: 1060px){
    #about-attr-page .understand-image-two, .understand-image-one {
        max-width: 455px;
    }
    .understand-ptag {
        width: 149px;
    }
    #about-attr-page .about-attr-prograss ul.about-attr-ul {
        width: calc(100% - 150px);
    }
    #about-attr-page .galaxcy-div{
        padding: 0px 15px 0px 15px;
    }
    #about-attr-page .container-about-attr {
        max-width: 100%;
        padding:0 24px;
    }
}

@media (max-width: 991px){
    #about-attr-page .treatment-diagnosis-banner {
      background-position: 20% 100%;
    }
    /*#about-attr-page .progress-mobile{
        height: fit-content;
    }
    #about-attr-page .progerss-ptag{
        max-width: 90%;
    }
    #about-attr-page .progerss-ul{
        max-width: 90%;
    }*/
}

@media (max-width: 767px){
    #about-attr-page  .source-damage p {
        font-size: 18px;
        line-height: 20px;
    }
    
    #about-attr-page  .container-about-attr {
        margin-left: 0;
        margin-right: 0;
    }
    
    #about-attr-page  .source-damage {
        margin: 0;
    }
    
    #about-attr-page .gradient-line img {}
    
    #about-attr-page #about-cards-1 .aboutattr-cards-container {
        margin: auto;
    }
    
    #about-attr-page .gradient-line {
        margin-left: auto;
        margin-right: auto;
    }
    
    #about-attr-page #content-sec-2 .gradient-line {
        padding-bottom: 20px;
        padding-top: 35px;
    }
    
    #about-attr-page .steps-title {
        max-width: 200px;
        margin-left: auto;
        margin-right: auto;
    }
    
    #about-attr-page #about-cards-1 {
        padding:0px  20px 20px!important;
    }
    
    #about-attr-page .about-attr-video h3 {
        padding-bottom: 0px;
    }
    
    #about-attr-page .about-attr-hereity h2 {
        width: 100%;
        padding: 25px 20px 20px;
        font-weight: normal;
    }
    
    #about-attr-page .progress-mobile {
        margin-left: 20px;
        margin-right: 20px;
        height: auto;
        padding: 20px 0px;
        background: url(/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop/about-attr-bgcontainer1.png);
        background-size: cover;
        background-position: right;
    }
    
    #about-attr-page .progress-mobile1 {
        height: auto;
        margin: 0px 20px 60px;
        padding: 25px 0px;
        background: url(/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop/about-attr-bgcontainer2.png);
        background-size: cover;
        background-position: right;
    }
    
    #about-attr-page .about-attr-systemetic h2 {
        padding: 50px 15px 0px;
    }
    
    #about-attr-page .bgsysmeticbanner {
        background-image: url(/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/mobile/systemic-banner-mob.png);
        height: 186.9px;
        width: 100%;
        margin: auto;
        padding: 20px;
        background-position-x: 0px;
    }
    
    #about-attr-page .about-attr-systemetic p {
        padding: 0px 0px 0px 90px;
        font-size: 16px;
        margin: 0px;
    }
    
    #about-attr-page .about-attr-systemetic {
        padding: 0px 20px;
    }
    
    #about-attr-page .galaxcy-div {
        padding: 0px 20px;
    }
    
    .about-attr-prograss {
        padding-bottom: 30px;
        margin-top: 50px;
    }
    
    #about-attr-page .galaxy-ptag {
        margin-bottom: 20px;
    }
    
    #about-attr-page .galaxy-ptag p ,#about-attr-page .galaxy-ptag1 p{
        font-size: 18px;
        padding: 0 5px 0px 0px;
        line-height: 20px;
    }
    
    #about-attr-page .galaxy-ptag p sup {
        font-size: 60%;
        line-height: 60%;
    }
    
    #about-attr-page .galaxy-ptag .galaxy-mobile {
        height: auto;
        margin: 15px auto 0px;
    }
    
    #about-attr-page .galaxy-mobile .galaxy-ul {
        max-width: 58%;/*max-width: 69%;*/
        font-size: 16px;
    }
    
    #about-attr-page .galxy-image img {
        width: 76px !important;
        height: 93px;
        min-width: 76px;
        /*width: 87px !important;
        height: 78.3px;
        min-width: 87px;*/
    }
    .gal-neuron-desktop{
        display:none;   
    }
    #about-attr-page .gal-neuron-mobile {
        display: block !important;
    }
    #about-attr-page .galaxy-mobile1 .galxy-image img{
        width: 59px !important;
        min-width: 59px !important;
        height: 90px !important;
    }
    
    #about-attr-page .galaxy-mobile .galaxy-ul li:nth-child(1) {
        padding-bottom: 5px;
    }
    
    #about-attr-page .steps-card {width: 100%;}
    
    #about-attr-page .arrow-down-card img {
        margin: 18px auto 0;
        width: 20px;
        display: block;
    }
    
    #about-attr-page .arrow-down-card {
        width: 100%;
    }
    
    #about-attr-page .treatment-footer-subheading p {
        width: auto;
        height: auto;
        font-size: 24px;
        line-height: 26px;
    }
    
    #about-attr-page .treatment-footer-small-text p {
        font-size: 22px;
        padding-top: 24px;
    }
    #about-attr-page .about-attr-understand h3 {
        padding: 0px 20px 20px;
    }  
    #about-attr-page #content-sec-1 {
        padding: 20px 20px 0px !important;
    }
}



@media ( min-width: 393px) and (max-width: 767px){
    .progerss-ul{
        max-width: 90%;
    }
    .bgsysmeticbanner{
        background-position-x: -41px;
    }
    /*#about-attr-page .galaxy-ptag{
        max-width: 100%;
        height: fit-content;
    }
    #about-attr-page .galaxy-ptag1{
        max-width: 100%;
        height: fit-content;
    }*/
}
/*@media (max-width: 420px){
    #about-attr-page .progress-mobile{
        height: 350px;
    }
    #about-attr-page .progerss-ptag{
        max-width: 261px;
    }
    #about-attr-page .progerss-ul{
        max-width: 261px;
    }
}*/

@media (max-width: 360px){
    #about-attr-page .galaxy-ptag{
        background-size: 100% 100%;
        height: fit-content;
        max-height: 450px;
    }
    #about-attr-page .galaxy-ptag1{
        background-size: 100% 100%;
        height: fit-content;
        max-height: 560px;
    }
    #about-attr-page .aboutattr-cards-container{margin: auto 15px !important;}
    html[lang="fr"] #about-attr-page .galaxy-ptag{max-height: fit-content !important;}
    html[lang="fr"] #about-attr-page .galaxy-ptag1{max-height: fit-content !important;height: fit-content !important;}
}
@media (max-width: 360px){
    #about-attr-page .progress-mobile{margin: auto 15px !important;margin-bottom: 20px !important;}
    #about-attr-page .progress-mobile1{margin: auto 15px !important;}
    .attr-life p{margin: auto 15px !important;}
}

@media (max-width: 330px){
    #about-attr-page .bgsysmeticbanner{height: fit-content !important;}
}

/* ===================================================================
   PATHOPHYSIOLOGY SECTION - 2-column layout (nav left, content right)
   Scoped to #container-2a2a9d56d1 specifically (NOT the shared
   role="about-attr-wrap" attribute, which is reused by other
   sections on this page, e.g. the video block below).

   Layout is driven by two custom properties so every other container
   on this page can align to the same nav column without repeating
   magic numbers:
     --nav-width : width of the sticky "On this page" nav column
     --nav-gap   : gap between the nav column and the content column
   =================================================================== */

#about-attr-page {
  --nav-width: 224px; /* Matches user rules */
  --nav-gap: 14px;    /* Matches user rules */
}

#about-attr-page #container-2a2a9d56d1 {
  display: grid !important;
  grid-template-columns: var(--nav-width) minmax(0, 1fr) !important;
  grid-template-areas:
    "nav text"
    "nav diagram";
  column-gap: var(--nav-gap) !important;
  align-items: start;
  max-width: 1265px !important; /* Updated from 1440px */
  width: 100% !important;
  margin: 0 auto !important;
  background-color: #FAFAFA !important;
}

#about-attr-page .aem-GridColumn:has(> #container-2a2a9d56d1) {
  background-color: #FAFAFA !important;
  width: 100% !important;
}

#about-attr-page #container-2a2a9d56d1 > .text:has(#content-sec-1) {
  grid-area: text;
}

#about-attr-page #container-2a2a9d56d1 > .text:has(#about-cards-1) {
  grid-area: diagram;
}

#about-attr-page #container-2a2a9d56d1 > .text:has(#this-page) {
  grid-area: nav;
}

@media screen and (max-width: 991px) {
  #about-attr-page #container-2a2a9d56d1 {
    display: block !important;
  }
}

/* --- Pathophysiology heading + paragraph --- */

#about-attr-page #content-sec-1 {
  background: transparent !important;
}

#about-attr-page #content-sec-1 .container-about-attr {
  max-width: 1001px !important; /* Updated from 1063px */
  width: 100% !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

#about-attr-page #content-sec-1 .source-damage {
  max-width: 923px !important;
  width: 100% !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

#about-attr-page #content-sec-1 .source-damage h2 {
  font-family: "Kanit-SemiBold" !important;
  font-size: 30px !important;
  line-height: 34px !important;
  color: #00215F !important;
  text-align: center !important;
  font-weight: normal !important;
}

#about-attr-page #content-sec-1 .source-damage p {
  font-family: "Kanit" !important;
  font-size: 18px !important;
  line-height: 20px !important;
  color: #151515 !important;
  text-align: center !important;
}

/* --- "At the source" diagram card --- */

#about-attr-page #container-2a2a9d56d1 > .text:has(#about-cards-1) .aboutattr-cards-container {
  background-color: #FFFFFF !important;
  border: 1px solid #606FB4 !important;
  border-radius: 30px 30px 30px 0px !important;
  box-shadow: 0px 0px 15px #0000001D !important;
  max-width: 1001px !important; /* Updated from 1063px */
  width: 100% !important;
  margin: 0 auto !important;
  opacity: 1;
}

#about-attr-page #container-2a2a9d56d1 > .text:has(#about-cards-1) .diagnosis-cards-items {
  flex-wrap: nowrap !important;
}

#about-attr-page .aboutattr-cards-container .at-source-heading {
  font-family: "Kanit-SemiBold" !important;
  font-size: 18px !important;
  line-height: 20px !important;
  color: #00215F !important;
  text-align: center !important;
  display: block !important;
  width: 100% !important;
}

#about-attr-page .aboutattr-cards-container .at-source-heading sup {
  font-size: 50% !important;
  font-family: "Kanit-Medium" !important;
  position: relative;
  top: -0.5em;
}

/* --- "On this page" nav sidebar --- */

#about-attr-page #container-2a2a9d56d1 > .text:has(#this-page) .aboutattr-cards-container {
  background-color: #E9EBF2 !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0px 0px 25px 0px !important;
  margin: 0 !important;
  width: var(--nav-width) !important;
  max-width: var(--nav-width) !important;
  height: 352.5px !important;
  padding: 30px 24px !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  position: sticky;
  top: 20px;
}

#about-attr-page #container-2a2a9d56d1 > .text:has(#this-page) .diagnosis-cards-items {
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  padding: 0 !important;
  flex-wrap: nowrap !important;
}

#about-attr-page #container-2a2a9d56d1 > .text:has(#this-page) .steps-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 12px !important;
  width: 100% !important;
  text-align: left !important;
}

/* "ON THIS PAGE" header - first icon only */
#about-attr-page #container-2a2a9d56d1 > .text:has(#this-page) .steps-card-icon:first-child {
  font-family: "Kanit-Medium" !important;
  font-size: 21px !important;
  font-weight: normal !important;
  color: #00215F !important;
  text-align: left !important;
  padding-bottom: 4px !important;
}

/* All other nav links */
#about-attr-page #container-2a2a9d56d1 > .text:has(#this-page) .steps-card-icon:not(:first-child) {
  font-family: "Kanit" !important;
  font-size: 18px !important;
  font-weight: normal !important;
  color: #00215F !important;
  text-align: left !important;
  line-height: 20px !important;
  padding: 0 !important;
}

/* "Pathophysiology" as active/underlined link (2nd icon) */
#about-attr-page #container-2a2a9d56d1 > .text:has(#this-page) .steps-card-icon:nth-child(2) {
  font-family: "Kanit" !important;
}

/* ===================================================================
   VIDEO SECTION - "Learn more about the mechanism..." + video player
   Scoped to #container-83abeb153b (its own container, separate from
   the Pathophysiology one above, even though both share the
   role="about-attr-wrap" attribute).
   =================================================================== */
   
#about-attr-page .aem-GridColumn:has(#container-83abeb153b) {
  background: #FFFFFF !important;
}

#about-attr-page #container-83abeb153b .about-attr-video {
    max-width: 1230px !important;
    width: 100% !important;
    margin: 0 auto !important;
    display: block !important;    /* Forces it to act as a block element */
    clear: both !important;       /* Breaks it away from any elements floating above it */
    float: none !important;       /* Disables any grid floats forcing it to the left */
    /* REMOVED (was breaking mobile layout, no media guard): padding-left: 268px; */
}

#about-attr-page #container-83abeb153b .about-attr-video h3 {
  width: 100% !important;
  max-width: 1230px !important;
  margin: 0 auto 20px auto !important;
  white-space: normal !important;
  padding-top: 43px;
}

#about-attr-page #container-83abeb153b .cmp-video__player {
  max-width: 1230px !important;
}

/* "At risk: Multiple organs and tissues" card - separate container */

/* Background band + full-width bleed for the ATTR mechanism section */
#about-attr-page .aem-GridColumn:has(#container-de03a1c250) {
  background: #FAFAFA !important;
}

#about-attr-page #content-sec-1,
#about-attr-page #container-83abeb153b,
#about-attr-page #container-de03a1c250 {
  background-color: #FAFAFA !important;
}

/* "At risk" card block - centered, offset by nav-width + nav-gap so it
   lines up under the "At the source" card above it. box-sizing:border-box
   makes the padding-left reduce the available width instead of shifting
   content off-center. */
#about-attr-page #container-de03a1c250 {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  background: #FAFAFA !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

#about-attr-page #container-de03a1c250,
#about-attr-page #container-de03a1c250 > .text,
#about-attr-page #container-de03a1c250 > .aem-Grid,
#about-attr-page #container-de03a1c250 .cmp-container {
  background: #FAFAFA !important;
}

#about-attr-page #container-de03a1c250 > .text:has(#about-cards-2) {
  max-width: 1265px !important; /* Updated from 1440px */
  width: 100% !important;
  margin: 0 auto !important;
  padding-left: calc(var(--nav-width) + var(--nav-gap)) !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
  display: block !important;
}

#about-attr-page #container-de03a1c250 > .text:has(#about-cards-2) #about-cards-2 {
  width: 100% !important;
  display: block !important;
  box-sizing: border-box !important;
}

/* Card itself - centered in the remaining content area, same as "At the source" */
#about-attr-page #container-de03a1c250 > .text:has(#about-cards-2) .aboutattr-cards-container {
  max-width: 1001px !important; /* Updated from 1063px */
  width: 100% !important;
  margin: 0 auto !important;
  display: block !important;
  box-sizing: border-box !important;
}

#about-attr-page #container-de03a1c250 .aboutattr-cards-container {
  background-color: #FFFFFF !important;
  border: 1px solid #606FB4 !important;
  border-radius: 30px 30px 30px 0px !important;
  box-shadow: 0px 0px 15px #0000001D !important;
  opacity: 1;
}

#about-attr-page #container-de03a1c250 .diagnosis-cards-items {
  display: flex !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
}

#about-attr-page #container-de03a1c250 > .text:has(#about-cards-2) .diagnosis-cards-items {
  flex-wrap: nowrap !important;
}

#about-attr-page #container-de03a1c250 .aboutattr-cards-container .at-risk-heading {
  font-family: "Kanit-SemiBold" !important;
  font-size: 18px !important;
  line-height: 20px !important;
  color: #00215F !important;
  text-align: center !important;
  display: block !important;
  width: 100% !important;
}

#about-attr-page #container-de03a1c250 .aboutattr-cards-container .at-risk-heading sup {
  font-size: 50% !important;
  font-family: "Kanit-Medium" !important;
  position: relative;
  top: -0.5em;
}

/* Kill the nav offset on mobile/tablet - the sidebar grid collapses
   below 991px, so this card should go back to full centering there */
@media screen and (max-width: 991px) {
  #about-attr-page #container-de03a1c250 > .text:has(#about-cards-2) {
    padding-left: 0 !important;
  }
}


/* Hereditary intro container - same nav offset pattern */
#about-attr-page #container-02c32ef3cc {
  width: 100% !important;
  max-width: 1265px !important; /* Updated from 1440px */
  margin: 0 auto !important;
  padding-left: calc(var(--nav-width) + var(--nav-gap) + 12px) !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
  background: transparent !important;
}

/* Remove blue background from all possible inner wrappers */
#about-attr-page #container-02c32ef3cc,
#about-attr-page #container-02c32ef3cc > .text,
#about-attr-page #container-02c32ef3cc > .aem-Grid,
#about-attr-page #container-02c32ef3cc .cmp-container {
  background: transparent !important;
}

/* Inner content block */
#about-attr-page #container-02c32ef3cc .about-attr-hereity {
  width: 100% !important;
  max-width: 1001px !important; /* Updated from 1064px */
  margin: 0 auto !important;
  padding-top: 40px !important;
  box-sizing: border-box !important;
  text-align: center !important;
}

/* Heading */
#about-attr-page #container-02c32ef3cc .about-attr-hereity h2 {
  width: 100% !important;
  max-width: 1001px !important; /* Updated to follow structural rules */
  margin: 0 auto 20px auto !important;
  text-align: center !important;
}

/* Paragraph */
#about-attr-page #container-02c32ef3cc .about-attr-hereity p {
  width: 100% !important;
  max-width: 1001px !important; /* Updated to follow structural rules */
  margin: 0 auto !important;
  text-align: center !important;
}

/* Mobile */
@media screen and (max-width: 991px) {
  #about-attr-page #container-02c32ef3cc {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #about-attr-page #container-02c32ef3cc .about-attr-hereity,
  #about-attr-page #container-02c32ef3cc .about-attr-hereity h2,
  #about-attr-page #container-02c32ef3cc .about-attr-hereity p {
    max-width: 100% !important;
  }
}

#about-attr-page #container-02c32ef3cc .about-attr-hereity h2 {
  padding-bottom: 6px !important;
  margin-bottom: 0 !important;
}

#about-attr-page #container-02c32ef3cc .container-text-attr {
  margin-top: 8px !important;
}

#about-attr-page #container-02c32ef3cc .container-text-attr p {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Blue/cards section container - same nav offset pattern, only shift, no bg change */
#about-attr-page #container-3e016e6889 {
  width: 100% !important;
  max-width: 1265px !important; /* Updated from 1440px */
  margin: auto !important;
  padding-left: calc(var(--nav-width) + var(--nav-gap) + 12px) !important;
  box-sizing: border-box !important;
  background: transparent !important;
}

@media screen and (max-width: 991px) {
  #about-attr-page #container-02c32ef3cc,
  #about-attr-page #container-3e016e6889 {
    padding-left: 0 !important;
    max-width: 100% !important;
  }
}

#about-attr-page #container-75cf52306c,
#about-attr-page #container-7122c14fc0,
#about-attr-page #container-380ba759fc {
  width: 100% !important;
  max-width: 1265px !important; /* Updated from 1440px */
  margin: 0 auto !important;
  padding-left: 238px !important;
  box-sizing: border-box !important;
}

@media screen and (max-width: 991px) {
  #about-attr-page #container-7122c14fc0,
  #about-attr-page #container-380ba759fc {
    padding-left: 0 !important;
    max-width: 100% !important;
  }
}



/* ===== SECTION WRAPPER ===== */
#about-attr-page .container-about-attr {
  max-width: 1001px; /* Updated from 1064px */
  margin: 0 auto;
}

#about-attr-page .about-attr-prograss {
  padding-bottom: 35px;
}


#about-attr-page .understand-image-one,
#about-attr-page .understand-image-two {
    display: flex !important;
    flex-direction: column !important;
}

#about-attr-page .genetic-testing-callout {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    background-color: #DDE0EE99 !important;
    border: 1px solid #656EFA !important;
    border-radius: 20px 20px 20px 0px !important;
    padding: 16px 24px !important;
    margin: 24px auto !important;
}

#about-attr-page .genetic-testing-callout__icon {
    flex-shrink: 0 !important;
}

#about-attr-page .genetic-testing-callout__icon img {
    width: 32px !important;
    height: 32px !important;
    display: block !important;
}

#about-attr-page .genetic-testing-callout__text {
    color: #00215F !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
}

#about-attr-page #container-75cf52306c {
    position: relative !important;
    background-color: transparent !important;
    z-index: 0;
}

#about-attr-page #container-75cf52306c::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    background-color: #FAFAFA;
    z-index: -1;
}

#about-attr-page #text-c92be536b1 p {
    color: #151515 !important;
    font-size: 18px !important;
    text-align: left !important;
    font-family: "Kanit", sans-serif !important;
    font-weight: 600 !important;
}

#about-attr-page #text-c92be536b1 ul,
#about-attr-page #text-c92be536b1 li {
    color: #151515 !important;
    font-size: 18px !important;
    text-align: left !important;
    font-family: "Kanit", sans-serif !important;
    font-weight: 400 !important;
	line-height: 1.5;
}

#about-attr-page #text-2c89de61b7 {
    background-color: #DDE0EE99 !important;
    border: 1px solid #656EFA !important;
    border-radius: 20px 20px 20px 0px !important;
    padding: 16px 24px 16px 56px !important;
    margin: 24px auto !important;
    position: relative !important;
	margin-bottom:50px;
}

#about-attr-page #text-2c89de61b7 p {
    color: #00215F !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
}

#about-attr-page #text-2c89de61b7::before {
    content: "";
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    background-image: url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/lightbulb%20icon%20gradient_1.png");
    background-size: contain;
    background-repeat: no-repeat;
}


#about-attr-page #text-2c89de61b7 .callout-line1 {
    white-space: nowrap !important;
}

/* #about-attr-page - hATTR-CM bullet list */
/* Scoped to the Cardiac amyloidosis block inside #container-380ba759fc */

#about-attr-page #container-380ba759fc .slide {
  width: 100%;
  box-sizing: border-box;
  color: #151515;
  font-family: "Kanit", sans-serif;
}

#about-attr-page #container-380ba759fc .slide .title {
  margin: 0 0 8px !important;
  padding: 30px 0 0 !important;
  color: #151515;
  font-family: "Kanit-SemiBold", sans-serif;
  font-size: 18px;
  font-weight: normal;
  line-height: 22px;
  text-align: left;
}

#about-attr-page #container-380ba759fc .slide .bullet-row {
  display: flex;
  align-items: flex-start;
  width: 100%;
  margin: 0 0 8px !important;
  padding: 0;
}

#about-attr-page #container-380ba759fc .slide .bullet {
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  font-family: "Kanit", sans-serif;
  text-align: left;
}

/* Main blue diamond/plus bullets */
#about-attr-page #container-380ba759fc .slide .bullet.plus {
  width: 18px;
  padding-top: 1px;
  color: #585AEA;
  font-size: 0;
  line-height: 22px;
}

#about-attr-page #container-380ba759fc .slide .bullet.plus::before {
  content: "✦";
  display: block;
  font-size: 10px;
  line-height: 22px;
}

#about-attr-page #container-380ba759fc .slide .bullet-text {
  flex: 1 1 auto;
  min-width: 0;
  color: #151515;
  font-family: "Kanit", sans-serif;
  font-size: 16px;
  font-weight: normal;
  line-height: 21px;
  white-space: normal;
  overflow-wrap: break-word;
}

#about-attr-page #container-380ba759fc .slide .bold {
  font-family: "Kanit-Bold", sans-serif;
  font-weight: normal;
}

#about-attr-page #container-380ba759fc .slide .underline {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

#about-attr-page #container-380ba759fc .slide .sup {
  position: relative;
  top: -0.5em;
  margin-left: 1px;
  font-family: "Kanit", sans-serif;
  font-size: 60%;
  line-height: 0;
  vertical-align: baseline;
}

/* Nested teal dot bullets */
#about-attr-page #container-380ba759fc .slide .sub-bullets {
  margin: 0 0 0 50px;
  padding: 0;
}

#about-attr-page #container-380ba759fc .slide .sub-bullets .bullet-row {
  margin-bottom: 10px !important;
}

#about-attr-page #container-380ba759fc .slide .bullet.dot {
  width: 18px;
  padding-top: 0;
  color: #00636A;
  font-size: 17px;
  line-height: 21px;
}

#about-attr-page #container-380ba759fc .slide .sub-bullets .bullet-text {
  font-size: 16px;
  line-height: 21px;
}

#about-attr-page #container-380ba759fc .slide .bullet-row:last-child {
  margin-bottom: 0 !important;
}

@media screen and (max-width: 991px) {
  #about-attr-page #container-380ba759fc .slide .title {
    padding-top: 20px !important;
    font-size: 16px;
    line-height: 20px;
  }

  #about-attr-page #container-380ba759fc .slide .bullet-text,
  #about-attr-page #container-380ba759fc .slide .sub-bullets .bullet-text {
    font-size: 14px;
    line-height: 18px;
  }

  #about-attr-page #container-380ba759fc .slide .bullet.plus {
    width: 16px;
  }

  #about-attr-page #container-380ba759fc .slide .bullet.plus::before {
    font-size: 9px;
    line-height: 18px;
  }

  #about-attr-page #container-380ba759fc .slide .sub-bullets {
    margin-left: 32px;
  }

  #about-attr-page #container-380ba759fc .slide .bullet.dot {
    width: 16px;
    font-size: 15px;
    line-height: 18px;
  }
}

/* #about-attr-page - ATTR-suspected callout box */
/* Scoped to div#text-a798dda2f0 (inside #container-380ba759fc) */

#about-attr-page #text-a798dda2f0 .attr-suspected-box {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #DDE0EE99;
  border: 1px solid #656EFA;
  border-radius: 20px 20px 20px 0px;
  padding: 20px 24px;
  padding-bottom: 40px !important;
  margin-top: 30px !important; /* space above box, after "Weight loss" sub-bullet */
}

#about-attr-page #text-a798dda2f0 .attr-suspected-icon-wrap {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

#about-attr-page #text-a798dda2f0 .attr-suspected-icon {
  font-size: 20px;
  line-height: 1;
}

#about-attr-page #text-a798dda2f0 .attr-suspected-content {
  display: flex;
  flex-direction: column;
}

#about-attr-page #text-a798dda2f0 .attr-suspected-title {
  color: #00215F;
  font-family: "Kanit", sans-serif;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 5.19px !important;
}

/* No ::before bullet — the "•" already exists in the text content itself */
#about-attr-page #text-a798dda2f0 .attr-suspected-line,
#about-attr-page #text-a798dda2f0 .attr-suspected-line.sub {
  color: #00215F;
  font-family: "Kanit", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.4;
  margin-bottom: 5.19px !important;
}

#about-attr-page #text-a798dda2f0 .attr-suspected-line:last-child,
#about-attr-page #text-a798dda2f0 .attr-suspected-line.sub:last-child {
  margin-bottom: 0 !important;
}


/* #about-attr-page - About mixed-phenotype hATTR text block */
/* Scoped to #text-029ce8908f inside #container-7122c14fc0 */

#about-attr-page #text-029ce8908f .about-mixed-hattr {
  text-align: center;
  max-width: 1001px;
  margin: 0 auto;
}

#about-attr-page #text-029ce8908f .about-mixed-hattr__heading {
  text-align: center;
  color: #00215F;
  font-family: "Kanit", sans-serif;
  font-size: 30px;
  font-weight: 600;
  margin-bottom: 25px !important;
  margin-top:79px;
}

#about-attr-page #text-029ce8908f .about-mixed-hattr__title {
  text-align: center;
  color: #00215F;
  font-family: "Kanit", sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.3px;
  margin-bottom: 16px !important;
}

#about-attr-page #text-029ce8908f .about-mixed-hattr__description {
  text-align: center;
  color: #151515;
  font-family: "Kanit", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
}

#about-attr-page #text-029ce8908f .about-mixed-hattr__description b {
  font-weight: 400; /* neutralize the wrapping <b> so only the underlined span stays emphasized */
}

#about-attr-page #container-7122c14fc0 {
  position: relative;
}

#about-attr-page #container-7122c14fc0::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  height: 100%;
  transform: translateX(-50%);
  background-color: #FAFAFA;
  z-index: -1;
}

/* #about-attr-page - mixed-hattr gauge stat image */
/* Scope to actual container/text ID once confirmed */

#about-attr-page .mixed-hattr-stat {
  display: flex;
  justify-content: center;
  margin: 0 auto;
}

#about-attr-page .mixed-hattr-stat img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* #about-attr-page - patient-box two-column layout */
/* Scoped to #container-3c273b57ba, boosted specificity to beat symptoms.css */

body#about-attr-page #container-3c273b57ba .patient-box {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  gap: 24px;
  flex-wrap: nowrap;
}

body#about-attr-page #container-3c273b57ba .border-box.border-box {
  width: 460px !important;
  height: auto !important;
  min-height: 146px;
  padding: 24px 20px;
  border-radius: 30px 30px 30px 0 !important;
}

#about-attr-page .diagnosis-cards-items .steps-card:first-child .steps-card-icon {
  padding-left: 28px !important;
  box-sizing: border-box;
}

#about-attr-page .diagnosis-cards-items .steps-card:first-child img.steps-icon.ab-icon-1 {
  margin-left: 0; /* reset any existing margin so padding controls the offset */
}










/* Container: only add padding (not already set) — border/radius/shadow/width already handled by existing rules */
#about-attr-page #about-cards-2 .aboutattr-cards-container {
  padding: 24px 40px !important;
}

#about-attr-page #about-cards-2 .at-source-heading {
  display: block !important;
  text-align: center !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  color: #041E42 !important;
  margin-bottom: 20px !important;
}

/* display:flex already applied elsewhere — just adding the layout props */
#about-attr-page #about-cards-2 .diagnosis-cards-items {
  align-items: flex-start !important;
  justify-content: center !important;
  flex-wrap: nowrap !important;
  gap: 10px !important;
}

#about-attr-page #about-cards-2 .steps-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  flex: 1 1 0 !important;
  min-width: 0 !important;
}

#about-attr-page #about-cards-2 .steps-card-icon {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  width: 100% !important;
}

/* Native size — no forced width, browser renders each image at its own uploaded dimensions */
#about-attr-page #about-cards-2 .steps-icon {
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  display: block !important;
  margin: 0 auto 10px auto !important;
}

#about-attr-page #about-cards-2 .steps-title {
  text-align: center !important;
  width: 100% !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #00215F !important;
  line-height: 1.3 !important;
}

#about-attr-page #about-cards-2 .steps-plus-icon {
  width: 24px !important;
  height: 24px !important;
  object-fit: contain !important;
  align-self: center !important;
  margin-top: 40px !important;
  flex-shrink: 0 !important;
}

@media (max-width: 767px) {
  #about-attr-page #about-cards-2 .diagnosis-cards-items {
    flex-wrap: wrap !important;
    row-gap: 20px !important;
  }
  #about-attr-page #about-cards-2 .steps-card {
    flex: 1 1 30% !important;
  }
}

#about-attr-page #about-cards-2 .diagnosis-cards-items .steps-card:first-child {
  transform: translateX(-40px) !important;
}


/* Center all card titles */
#about-attr-page #about-cards-1 .steps-title {
  text-align: center !important;
  width: 100% !important;
}

/* Center icon + title as a unit inside each card */
#about-attr-page #about-cards-1 .steps-card-icon {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  width: 100% !important;
}

#about-attr-page #about-cards-1 .steps-icon {
  display: block !important;
  margin: 0 auto 10px auto !important;
}

/* Last card (body/human silhouette) — center specifically, in case its native image content sits off-axis like the nerve icon did */
#about-attr-page #about-cards-1 .diagnosis-cards-items .steps-card:last-child .steps-icon {
  margin: 0 auto 10px auto !important;
  display: block !important;
}

#about-attr-page #about-cards-1 .diagnosis-cards-items .alt-right-arrow {
  margin-left: 20px !important;
  margin-right: 20px !important;
  align-self: center !important;
  flex-shrink: 0 !important;
}










#about-attr-page #progressive-cont-1 .aboutattr.diagnosis-cards-items {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 10px !important;
}

#about-attr-page #progressive-cont-1 .steps-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  flex: 1 1 0 !important;
  min-width: 0 !important;
}

#about-attr-page #progressive-cont-1 .steps-card-icon {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  width: 100% !important;
}

/* NATIVE SIZE — no forced width or height, renders exactly as uploaded to DAM */
#about-attr-page #progressive-cont-1 .steps-icon {
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  display: block !important;
  margin: 0 auto 12px auto !important;
}

/* Stage label — lighter purple, distinct from description */
#about-attr-page #progressive-cont-1 .stage-label {
  color: #7C6FD6 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-align: center !important;
  margin-bottom: 4px !important;
}

#about-attr-page #progressive-cont-1 .steps-title {
  text-align: center !important;
  width: 100% !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #00215F !important;
  line-height: 1.3 !important;
}

#about-attr-page #progressive-cont-1 .steps-plus-icon {
  width: 22px !important;
  height: 22px !important;
  object-fit: contain !important;
  margin: 10px auto !important;
  display: block !important;
  flex-shrink: 0 !important;
}

#about-attr-page #progressive-cont-1 .alt-right-arrow {
  align-self: center !important;
  margin-top: 55px !important;
  margin-left: 15px !important;
  margin-right: 15px !important;
  flex-shrink: 0 !important;
}

#about-attr-page #progressive-cont-1 .arrow-down-card {
  display: none !important;
}

@media (max-width: 767px) {
  #about-attr-page #progressive-cont-1 .aboutattr.diagnosis-cards-items {
    flex-wrap: wrap !important;
    row-gap: 24px !important;
  }
  #about-attr-page #progressive-cont-1 .steps-card {
    flex: 1 1 45% !important;
  }
}

#about-attr-page #progressive-cont-1 .steps-title2 {
  text-align: center !important;
  width: 100% !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #00215F !important;
  line-height: 1.3 !important;
}




#about-attr-page #progressive-cont-2 .aboutattr.diagnosis-cards-items {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 10px !important;
}

#about-attr-page #progressive-cont-2 .steps-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  flex: 1 1 0 !important;
  min-width: 0 !important;
}

#about-attr-page #progressive-cont-2 .steps-card-icon {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  width: 100% !important;
}

/* Native size — no forced width/height */
#about-attr-page #progressive-cont-2 .steps-icon {
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  display: block !important;
  margin: 0 auto 12px auto !important;
}

#about-attr-page #progressive-cont-2 .steps-title {
  text-align: center !important;
  width: 100% !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #00215F !important;
  line-height: 1.3 !important;
  list-style: none !important;
}

/* Belt-and-suspenders: kill any bullet marker if `bullet` class is still present anywhere in this block */
#about-attr-page #progressive-cont-2 .bullet::before,
#about-attr-page #progressive-cont-2 .bullet::marker {
  content: none !important;
  display: none !important;
}

/* First title line (STAGE A/B/C/D/MORTALITY) — lighter purple to match target */
#about-attr-page #progressive-cont-2 .steps-title:first-of-type {
  color: #7C6FD6 !important;
  margin-bottom: 4px !important;
}

#about-attr-page #progressive-cont-2 .alt-right-arrow {
  align-self: center !important;
  margin-top: 55px !important;
  margin-left: 15px !important;
  margin-right: 15px !important;
  flex-shrink: 0 !important;
}

#about-attr-page #progressive-cont-2 .arrow-down-card {
  display: none !important;
}

@media (max-width: 767px) {
  #about-attr-page #progressive-cont-2 .aboutattr.diagnosis-cards-items {
    flex-wrap: wrap !important;
    row-gap: 24px !important;
  }
  #about-attr-page #progressive-cont-2 .steps-card {
    flex: 1 1 45% !important;
  }
}

#about-attr-page #progressive-cont-2 .steps-icon {
  width: auto !important;
  height: auto !important;
  max-height: 90px !important;
  max-width: 100% !important;
  min-width: 0 !important;
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  display: block !important;
  margin: 0 auto 12px auto !important;
   margin-top: 10px !important;
}

#about-attr-page #progressive-cont-2 .aboutattr-cards-container {
  padding-top: 24px !important;
}

#about-attr-page #about-cards-2 .aboutattr-cards-container {
  padding-top: 24px !important;
}

#about-attr-page #about-cards-2 .steps-icon {
  margin-top: 10px !important;
}

#about-attr-page #progressive-cont-1 .aboutattr-cards-container {
  padding-top: 24px !important;
}

#about-attr-page #progressive-cont-1 .steps-icon {
  margin-top: 10px !important;
}








/* card = the visible bordered box, holds icon + box side by side */




/* box now just holds text + button, no separate background */











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

  /* ---------- Global overflow/shrink guard ---------- */
  #about-attr-page,
  #about-attr-page * {
    box-sizing: border-box !important;
  }
  #about-attr-page {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  /* ---------- Header logo fix ---------- */
  #about-attr-page #mobile-menu .logo,
  #about-attr-page #mobile-menu .logo a {
    display: block !important;
    max-width: 100% !important;
  }
  #about-attr-page #mobile-menu .logo img {
/*    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    display: block !important;*/
  }
  #about-attr-page .header-main-menu,
  #about-attr-page .nav-bar.attr-header-nav {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  /* ---------- SHARED base: any "cards" section (about-cards-1, about-cards-2, etc.) ---------- */

  #about-attr-page .aboutattr-cards-container {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 16px !important;
  }

  #about-attr-page .at-source-heading {
    display: block !important;
    text-align: center !important;
    font-size: clamp(15px, 4.2vw, 18px) !important;
    margin-bottom: 16px !important;
  }

  #about-attr-page .diagnosis-cards-items {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
  }

  #about-attr-page .steps-card {
    width: 100% !important;
    max-width: 280px !important;
    margin: 0 auto !important;
  }

  #about-attr-page .steps-card-icon {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
  }

  #about-attr-page .steps-icon {
    max-width: 90px !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto 8px auto !important;
  }

  #about-attr-page .steps-title {
    font-size: clamp(13px, 3.6vw, 15px) !important;
    line-height: 1.4 !important;
    text-align: center !important;
  }

  /* ---------- #about-cards-1 specific: arrows ---------- */
  #about-attr-page #about-cards-1 .alt-right-arrow {
    display: none !important;
  }
  #about-attr-page #about-cards-1 .arrow-down-card {
    display: flex !important;
    justify-content: center !important;
    margin: 10px auto !important;
  }
  #about-attr-page #about-cards-1 .arrow-down-card img {
    width: 20px !important;
    height: auto !important;
  }

  /* ---------- #about-cards-2 specific: plus icon connector ---------- */
  #about-attr-page #about-cards-2 .steps-plus-icon {
    display: block !important;
    width: 24px !important;
    height: 24px !important;
    margin: 10px auto !important;
  }
  
  /* about attr css */

#about-attr-page #text-b9cfd44407 {
  margin-top: 20px;
}

.galaxy-mobile1 .galaxy-ul b {
    font-family: "Kanit-Bold";
    display: inline-block;
    margin-left: -2em;
}

.take-dwn {
  margin-top: 70px;
}

.suptxt-ta {
  vertical-align: baseline;
  position: relative;
  top: -0.8em;
  font-family: "Kanit-Light";
  font-size: 22px;
  font-weight: 100;
}

.bullet.steps-title {
  text-align: left;
  padding-left: 35px;
}

.hfheart {
  margin: auto;
  max-width: 1161px;
  font-family: "Kanit";
  font-size: 14px;/*font-size: 16px;*/
}

span.color-bullet::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: 7px;
  right: 13px;
}

#about-attr-page .galaxy-mobile .galaxy-ul {
  display: block;
  margin-top: auto;
  margin-bottom: auto;
}

#menucontainer {
  margin-top: 5px;
}

.arrow-line-icon {
  display: flex;
  margin-right: -14px;
  margin-left: -14px;
  padding-bottom: 30px;
  padding-top: 6px;
}

#treatment-app .arrow-line-icon {
  max-width: 1116px;
  margin-right: 18px;
}

img.arrow-image1 {
  margin-right: -14px;
}

img.arrow-image3 {
  position: relative;
  right: 14px;
}

#diagnosing-attr .arrow-line-icon {
  margin-right: 190px;
  margin-left: 5px;
  width: 67%;/*width: 70%;*/
  ;
}

#overlay {
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5);
  z-index: 2;
  cursor: pointer;
}

.treatment.banner-content h1 sup {
  vertical-align: baseline;
  position: relative;
  top: -0.8em;
  font-family: "Kanit-Light";
  font-size: 22px;
  font-weight: 100;
}

.suptxt-abt {
  vertical-align: baseline;
  position: relative;
  top: -0.4em;
  font-family: "Kanit";
  font-size: 12px;
}

div#about-attr-app {
  z-index: -1;
  margin-top: 0px;
}

.galaxy-mobile .galaxy-ul li:nth-child(1) {
  padding-bottom: 16px;
}

.galaxy-mobile1 .galaxy-ul li:nth-child(2) {
  padding-top: 6px;
}

.subheading-banner {
  padding-left: 0 !important;
}

.banner-content h1 {
  padding-left: 0 !important;
}

span.about-attr-header {
  color: #FF53FF;
}

#about-attr-page .treatment-arrow-image {
  margin: auto;
  margin-left: -40px;
}

#about-attr-page .diagnosis-cards-items {
  flex-wrap: nowrap;
  padding-top: 0px;
}

#about-attr-page .diagnosis-cards-container h3 {
  color: #151515;
  margin-top: 0%;
  margin-bottom: 2%;
  padding-top: 0px;
  padding-bottom: 15px;
  font-family: "Kanit-Bold";
  font-weight: normal;
}

#about-attr-page .gradient-line {
  padding-bottom: 16px;
  padding-top: 16px;
  margin-left: 20px;
  margin-right: 20px;
}

#about-attr-page .diagnosis-cards-container::before {
  top: -3px;
  left: 0px;
  right: -3px;
  bottom: -3px;
}

#about-attr-page .diagnosis-cards-items {
  margin-bottom: 0;
  /*padding: 0px 0px;
    height: 285px;*/
}
#about-attr-page .galaxy-ul {
    padding-right: 20px;
}
#about-attr-page .galaxy-ul span{
    display:block;
}
#about-attr-page .steps-title {
  font-family: "Kanit-SemiBold";
  line-height: 22px;
}
#about-attr-page .treatment.banner-content h1 sup {
    font-size: 50%;
    font-family: "Kanit-Medium";
}
.about-attr-video {
  text-align: center;
  margin: auto;
  max-width: 1000px;
}

.container-about-attr {
  max-width: 1265px; /* Updated from 1440px */
  margin: auto;
}

.source-damage {
  text-align: center;
  font-family: Kanit;
  max-width: 964px;
  margin: auto;
}

.source-damage h2 {
  font-family: "Kanit-Bold";
  font-size: 25px;
  line-height: 29px;
  color: #00215F;
  padding-bottom: 16px;
  padding-top: 16px;
  font-weight: normal;
}

.source-damage p {
  font-size: 18px;
  color: #151515;
  line-height: 20px;
  font-family: "Kanit";
}

.gradient-line {
  text-align: center;
}

.life-expetancy {
  margin-left: 145px;
  margin-right: 145px;
  border: 1px solid #9DB0AC;
  border-radius: 30px 30px 30px 0px;
  padding-left: 41px;
}

.life-inside {
  display: flex;
  justify-content: space-between;
  padding-top: 30px;
}

.life-inside-image-text {
  display: flex;
  justify-content: space-between;
  font-size: 18px;
  font-weight: 500;
  font-family: Kanit;
}

.right-arrow {
  margin-top: 40px;
}

.life-text {
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
}

.about-attr-video h3 {
  font-size: 20px;
  color: #00215F;
  font-family: "Kanit-Medium";
  padding-bottom: 20px;
  margin: auto;
  margin-top: 20px;
  font-weight: normal;
}

.about-attr-hereity {
  text-align: center;
  margin: auto;
  max-width: 964px;
  padding-top: 40px;
}

.about-attr-hereity h2 {
  font-family:"Kanit-SemiBold";/*font-family: "Kanit-Bold";*/
  color: #00215F;
  font-size:30px;/*font-size: 25px;*/
  line-height: 34px;
  padding-bottom: 20px;
  width: 68%;
  margin: auto;
  font-weight: normal;
}

.about-attr-hereity p {
  font-size: 18px;/*font-size: 16px;*/
  line-height: 19px;
  font-family: "Kanit";
  color:#151515;/*color: #00215F;*/
  margin-left: 19px;
  text-align: center;
  margin-right: 19px;
}

span.attr-green {
  color: #00D008;
}

.about-attr-understand h3 {
  font-family: "Kanit-Medium";
  color: #00215F;
  padding-bottom: 20px;
  text-align: center;
  font-size: 20px;
  font-weight: normal;
}

.understand-img1{
    background-image: url(/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop/about-attr-bgcontainer1.png);
    background-size: 100% 100%;
    height: 346px;
    max-height: 100%;
}
.understand-image-one {
  max-width: 490px;
  min-height: 328px;
  display: flex;
  border-radius: 30px 30px 30px 0px;
  /*background-color: #090c30;*/
}
.understand-img2{
  background-image: url(/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop/about-attr-bgcontainer2.png);
  background-size: 100% 100%;
  height: 346px;
  max-height: 100%;
}
.understand-image-two {
  max-width: 490px;
  min-height: 328px;
  display: flex;
  border-radius: 30px 30px 30px 0px;
  /* background-color: #090c30; */
}

.understand-two-images {
  display: flex;
  justify-content: space-between;
  margin: auto;
  max-width: 1160px;
  font-family: "Kanit";
}

.understand-image-one p {
  font-size: 30px;
  font-family: "Kanit-Bold";
  color: #ffff;
  margin-top: 21px !important;
  margin-left: 30px !important;
}

.understand-image-one ul {
  padding-top: 21px !important;
}

.understand-image-two ul {
  padding-top: 21px !important;
}

.understand-image-two p {
  font-size: 30px;
  font-family: "Kanit-Bold";
  color: #ffff;
  margin-top: 21px !important;
  margin-left: 30px !important;
  font-weight: bold;
}

.understand-image-one p span {
  color: #EC99FD;
}

.understand-image-two p span {
  color: #EC99FD;
}


.two-container-img {
  display: flex;
  justify-content: space-around;
}

.bg-img-text {
  display: flex;
  padding-left: 20px;
  padding-top: 30px;
}

.about-attr-ul li {
  font-family: "Kanit";
  position: relative;
  margin: 0;
  margin-bottom: 1em;
  padding-left: 1.5em;
  color: #FFFFFF;
  font-size: 18px;/*font-size: 16px;*/
  line-height: 18px;
  margin-right: 20px;
}

.about-attr-ul li::before {
  content: url(/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop/list-bullet-icon-new.svg);
  height: 0.4em;
  width: 0.4em;
  display: block;
  position: absolute;
  top: 0;
  left: 10px;
}

.understand-image-one .about-attr-ul li:nth-child(1):before {
  top: 5px;
}

.bg-img-text p {
  font-size: 20px;
  font-family: "Montserrat-SemiBold";
  color: #ffff;
}

.bg-img-text span {
  color: #FF53FF;
  font-family: Montserrat;
  font-weight: bold;
}

.about-attr-systemetic {
  text-align: center;
}

.about-attr-systemetic h2 {
  /*font-family: "Kanit-Bold";*/
  font-family: "Kanit-SemiBold";
  font-size: 30px;
  color: #00215F;
  /*max-width: 656px;*/
  margin: auto;
  padding-top: 15px;
  padding-bottom: 15px;
  font-weight: normal;
}

.about-attr-systemetic h3 {
  font-family: "Kanit-Medium";
  font-size: 20px;
  color: #00215F;
  padding-bottom: 20px;
  font-weight: normal;
}

.about-attr-systemetic p {
  font-family: "Kanit";
  font-size: 18px;
  line-height: 20px;
  color: #FFFFFF;
  margin: auto;
  max-width: 786px;
  padding-top: 60px;/*padding-top: 40px;*/
  text-align: left;
}

.bgsysmeticbanner {
  background-image: url(/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop/systemic-banner.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  height: 173.9px;
  width: 100%;
  margin: auto;
  max-width: 1160px;
  /* background-color: #00102e; */
  border-radius: 30px 30px 30px 0px;
  /* background-position-x: -10px; */
}

.about-attr-prograss {
  padding-bottom: 50px;
}

.about-attr-prograss h3 {
  text-align: center;
  font-family: "Kanit-Medium";
  font-size: 20px;
  color: #00215F;
  margin-top: 40px;
  font-weight: normal;
}

.progress-two-images {
  display: flex;
  justify-content: space-between;
  margin: auto;
  max-width: 1161px;
  font-family: "Kanit";
}

.progress-img1 p {
  font-size: 18px;
  font-family: "Kanit-Bold";
  max-width: 337px;
  text-align: center;
  padding-bottom: 20px;
  margin: auto;
}

.progress-img2 p {
  font-size: 18px;
  font-family: "Kanit-Bold";
  max-width: 531px;
  text-align: center;
  padding-bottom: 20px;
  margin: auto;
}

.steps-title2 {
  color: #585AEA;
  font-size: 16px;
  font-family: "Kanit-SemiBold";
  padding-top: 10px;
}

.progress-image-one {
  background-image: url(/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop/diagnosis-banner.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  width: 571px;
  height: 190px;
  display: flex;
  border-radius: 30px 30px 30px 0px;
}

.progress-image-two {
  background-image: url(/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop/diagnosis-banner.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  width: 571px;
  height: 190px;
  display: flex;
  border-radius: 30px 30px 30px 0px;
}

.progress-image-one ul {
  padding-top: 15px !important;
  padding-left: 45px !important;
  margin-right: 80px !important;
}

.progress-image-two ul {
  padding-top: 15px !important;
  padding-left: 45px !important;
  margin-right: 80px !important;
}

.progress-image-one img {
  margin-top: 15px;
  margin-left: 15px;
  width: 190px;
  height: 90px;
}

.progress-image-two img {
  margin-top: 15px;
  margin-left: 15px;
  width: 190px;
  height: 90px;
}

.progress-img1 ul li {
  color: white;
  padding-bottom: 10px;
}

.progress-img2 ul li {
  line-height: 12px;
  color: white;
  padding-left: 13px;
}

.progress-image-two ul span {
  font-family: Kanit;
  color: white;
}

#about-attr-page #container-75cf52306c {
    background-color: #FAFAFA !important;
}

.attr-life h3 {
  font-family: "Kanit-SemiBold";
  font-size: 30px;
  color: #00215F;
  padding-bottom: 20px;
  text-align: center;
  padding-top: 50px;
  font-weight: normal;
}

.attr-life p {
  font-family: "Kanit";
  font-size: 20px;
  padding-bottom: 25px;
  text-align: center;
  color: #00215F
}
/*#about-attr-page sup{*/
/*        font-size: 10.5px;*/
/*}*/
#about-attr-page .source-damage h2 sup {
    font-size: 50%;
    font-family: "Kanit-SemiBold";
}
#about-attr-page .source-damage p sup {
    font-size: 50%;
    top: -0.5em;
    font-family: "Kanit-Medium";
}
#attr-symptoms .banner-txt2 sup {
    font-family: "Kanit";
    font-size: 50%;
}
#about-attr-page .about-attr-hereity p sup {
    font-size: 60%;
    top: -0.5em;
    font-family: "Kanit";
}
#attr-symptoms .banner-txt3 sup {
    font-size: 50%;
    font-family: "Kanit-Medium";
}
#about-attr-page .galaxy-ul sup ,#about-attr-page .about-attr-systemetic p sup{
    font-size: 60%;
    font-family: "Kanit";
}
#about-attr-page .about-attr-prograss ul.about-attr-ul sup {
    font-size: 60%;
    font-family: "Kanit";
    top: -0.5em;
}
#about-attr-page .galaxy-ptag p sup ,#about-attr-page .galaxy-ptag1 p sup{
    font-size: 60%;
    font-family: "Kanit-SemiBold";
    top: -0.5em;
}
#about-attr-page .attr-life p sup {
    font-size: 60%;
    font-family: "Kanit";
}
#about-attr-page #progressive-cont-1 .cards-footer-header sup, #about-attr-page #progressive-cont-2 .cards-footer-header sup {
    font-size: 60%;
    font-family: "Kanit-medium";
    top: -0.5em;
}
.galaxy-ptag p {
  /*text-align: center;*/
  /*margin: auto;*/
  /*max-width: 337px;*/   
    text-transform: uppercase; 
    max-width: 480px;
    font-family: "Kanit-SemiBold";
    font-size: 20px;
    padding-bottom: 20px;
    line-height: 26px;
    color: #fff;
}

.galaxy-ptag1 p {
  /*text-align: center;*/
  margin: auto;
  /*max-width: 557px;*/
  /*font-family: "Kanit-Bold";*/
  /*font-size: 18px;*/
  /*padding-bottom: 30px;*/
  /*line-height: 20px;*/
    max-width: 480px;
    color: #fff;
    text-transform: uppercase;
    font-family: "Kanit-SemiBold";
    font-size: 20px;
    padding-bottom: 20px;
    line-height: 26px;
}

.galaxy-mobile {
  /*background-image: url(/content/dam/intelligentcontent/unbranded/attr-dsa/en/desktop/galaxy1.png);*/
  display: flex;
  background-size: cover;
  border-radius: 30px 30px 30px 0px;
  margin-right: 20px;
  max-width: 572px;
  /*height: 250px;*/
    min-height: 134px;
    justify-content: space-between;
}

.galaxy-mobile1 {
  /*background-image: url(/content/dam/intelligentcontent/unbranded/attr-dsa/en/desktop/galaxy2.png);*/
  display: flex;
  /*background-size: cover;*/
  /*border-radius: 30px 30px 30px 0px;*/
  max-width: 572px; 
  /*padding: 20px 30px 30px;*/
  /*height: 250px;*/
    justify-content: space-between;
} 
#about-attr-page .gal-neuron-mobile{
    display:none;
}
.galaxy-fix {
  /*height: 150px;
  width: 180px;*/
  width: 100% !important;
  min-width: 124px;
}

.galaxy-ul {
  color: white;
  font-family: "Kanit";
  font-size: 16px;
  line-height: 18px;
  max-width: 54%;
  /*margin-left: 115px;*/
  /*margin-top: 13px;*/
  line-height: 20px;
    max-width: calc(100% - 160px);
}

.galaxy-ul b {
  font-family: "Kanit-Bold";
}

.galaxcy-div {
  display: flex;
  justify-content: center;    gap: 15px;
}

.galxy-image img {
  /*position: relative;*/
  /*top: 17px;*/
  /*left: 50px;*/
  width: 100px;
    /*height: 100px;*/
  ;
}
.galaxy-mobile ul li::before,
.galaxy-mobile1 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: 16px;
}

.galaxy-mobile ul li::before,
.galaxy-mobile1 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: 16px;
}

.about-attr-connecting h2 {
  font-family: "Kanit-Bold";
  font-size: 30px;
  color: #00215F;
  max-width: 964px;
  margin: auto;
  text-align: center;
  padding-top: 20px;
  font-weight: normal;
}

.about-attr-connecting p {
  font-family: "Kanit";
  font-size: 18px;
  text-align: center;
  padding-top: 10px;
  margin-left: 16px;
  margin-right: 16px;
}

.attr-raised {
  display: flex;
  justify-content: space-between;
  margin: auto;
  max-width: 964px;
  font-size: 20px;
  font-family: "Kanit";
  padding-bottom: 50px;
  padding-top: 20px;
}

attr-raised ul {
  max-width: 236px;
}

.attr-raised ul li img {
  margin-left: -14px;
  margin-top: -8px;
}

.attr-raised ul li h4 {
  padding-left: 20px;
  margin-top: -26px;
  font-family: "Kanit-Medium";
}

.understand-ptag {
  /*width: 100%; padding-right: 40px;*/
  /*background-image: url(/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop/about-attr-bgcontainer1.png);
  background-size: cover;*/
    width: 350px;
    padding-right: 0px;
}

.understand-ptag1 {
  /* background-image: url(/content/dam/intelligentcontent/seethepattrns-ca/ca/en/desktop/about-attr-bgcontainer2.png);
  background-size: cover;     */
  width: 350px;
  /*padding-right: 66px;*/
}

.understand-ptag p:nth-child(2) {
  text-align: left;
  margin: auto;
  margin-top: 3px !important;
}

.understand-ptag p:nth-child(1) {
  text-align: left;
  margin-top: 21px !important;
}

span.reference-italic {
  font-style: italic;
}

.border {
  border-bottom: 2px inset;
  margin-bottom: 35px;
}

.aboutattr-cards-container {
  background-color: #FFFFFF;
  height: 100%;
  border-radius: 30px 30px 30px 0px;
  margin-left: 15%;
  margin: auto;
  max-width: 1050px;
  position: relative;
  margin-bottom: 30px;
}

.kWidgetPlayBtn {
  height: 68px !important;
  background: url(/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop/play-icon.png) !important;
}

#about-attr-page .cmp-video__player {
  /*max-height: 500px !important;*/
    max-width: 964px;
    width: 100%;
    margin: auto;
    max-height: 515px !important;
    /* REMOVED (was breaking mobile layout, no media guard): padding-left: 268px; */
	margin-top: -30px;
}

.aboutattr-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);
}
.aboutattr-cards-container::before{
    visibility: hidden;
}
.aboutattr.diagnosis-cards-items {
  padding-bottom: 20px;
}

.add-30px {
  padding-top: 33px;
}

img.attr.steps-icon {
  width: 75%;
  height: 70%;
}

h3.cards-footer-header {
  font-family: "Kanit-Bold";
  font-size: 18px;
  text-align: center;
  padding-bottom: 15px;
  font-weight: normal;
}

#text-2e067988c2 .about-attr-prograss {
  padding-bottom: 20px;
}
#about-attr-page .aboutattr-cards-container {
    border: 1px solid #606FB4;
    box-shadow: 0px 3px 6px 0px rgb(0 0 0 / 19%);
} 
/*#about-attr-page .aboutattr-cards-container::before {
    visibility: hidden;
} */
#about-attr-page #about-cards-1   {
    padding-bottom: 40px !important;
	margin-top:35px;
}
#about-attr-page #about-cards-1 .aboutattr-cards-container {
    margin-bottom: 0px;
} 
#about-attr-page .cmp-container[role="about-attr-wrap"],
#about-attr-page #content-sec-1,
#about-attr-page #content-sec-2 {
    background: #f7f7f7;
} 
#about-attr-page .video {
    padding-bottom: 30px;
}
#about-attr-page #progressive-cont-1 .diagnosis-cards-items, 
#about-attr-page #progressive-cont-2 .diagnosis-cards-items {
    align-items: flex-end;
}
#about-attr-page #progressive-cont-1 .diagnosis-cards-items .alt-right-arrow  {
    margin-bottom: 20px;
}
#about-attr-page #progressive-cont-2 .diagnosis-cards-items .alt-right-arrow {
    margin-bottom: 15px;
}
#about-attr-page #progressive-cont-1 .diagnosis-cards-items .attr, 
#about-attr-page #progressive-cont-2 .diagnosis-cards-items .attr {
    margin-bottom: 0px;
}
#about-attr-page #progressive-cont-1 .diagnosis-cards-items .steps-title2 {
    padding-top: 2px;
}
#about-attr-page #progressive-cont-1  .cards-footer-header,
#about-attr-page #progressive-cont-2  .cards-footer-header{
    padding-top: 25px;
    padding-bottom: 30px;
    color:#00215F;
    font-size:20px;
    font-family: "Kanit-Medium";
    font-weight: normal !important;
}
#about-attr-page #content-sec-1 .source-damage h2 {
    padding-top: 35px;
    font-family: "Kanit-SemiBold";
    font-size:30px;
    font-weight: normal;
} 
#about-attr-page .about-attr-prograss ul.about-attr-ul {
  /*width: calc(100% - 193px);width: calc(100% - 240px);*/
} 
#about-attr-page .understand-image-one p span .cyan, 
#about-attr-page .understand-image-two p span .cyan {
    color: #FFFFFF;
}
#about-attr-page .galaxy-ptag {
    background-image: url(/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop/galaxy1.png);
    background-size: cover;
    padding: 20px 30px 30px;
    max-width: 573px;
    border-radius: 30px 30px 30px 0;
    height: 328px;
    max-height: 344.59px;
} 
#about-attr-page .galaxy-ptag1 {
    background-image: url(/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop/galaxy2.png);
    background-size: cover;
    max-width: 573px;
    padding: 20px 30px 30px;
    border-radius: 30px 30px 30px 0;
    height: 328px;
    max-height: 344.59px;
}
#about-attr-page .ab-icon-1{
  width: 134px;
  height: 100px;
}
#about-attr-page .ab-icon-2{
  width: 133px;
  height: 117px;
}
#about-attr-page .ab-icon-3{
  width: 164px;
    height: 107.74px;
}
#about-attr-page .ab-icon-4{
  width: 143.79px;
  height: 110px;
  margin-top: 2.3em;
}
#about-attr-page .ab-icon-5{
  width: 53px;
  height: 122px;
}
/* about-attr-mobile */
@media screen and (max-width: 991px) {
    
.galaxy-mobile1 .galaxy-ul b {
    margin-left: 1.5em;
}
.galaxy-mobile1 .galaxy-ul ul li {
    margin-left: 10px;/*margin-left: 30px;*/
}
  #treatment-approaches .steps-card-icon .steps-icon {
    margin-top: 10%;
  }

  #treatment-approaches .liver {
    max-width: 90px;
  }

  #treatment-arrw-1 {
    display: none;
  }

  #treatment-arrw-2 {
    width: 40px;
    margin-top: 50px;
  }

  img.attr.steps-icon {
    width: 151px;
    height: 60px;
  }

  .hfheart {
    padding-left: 20px;
  }

  #treatment-app .arrow-line-icon {
    padding-bottom: 10px;
    padding-top: 0px;
  }

  #treatment-approaches .banner-content {
    padding-bottom: 0px;
    margin-left: 30px;
  }

  .goal p:nth-child(2) sup {
    font-size: 9px;
  }

  .bullet.steps-title {
    width: 225px;
    padding-left: 96;
    text-align: left;
    margin: 0 auto;
  }

  .suptxt-ta {
    top: -0.5em;
    font-size: 17px;
  }

  .main-bg2 .title-txt sup, .main-bg2 .patient-txt sup, .main-bg2 .sec2-span sup {
    font-size: 8px;
    top: -1px;
    position: relative;
  }

  .about-attr-systemetic h2 {
    padding-left: 15px;
    font-size: 25px;
    padding-right: 15px;
    font-weight: normal;
  }

  .attrsymptoms-sec1 .suptxt-ta {
    font-size: 11px;
    font-family: "Kanit";
  }

  .border {
    border-bottom: 0px inset;
    margin-bottom: 35px;
  }

  .about-attr-hereity .suptxt {
    top: -0.7em;
    font-size: 9px;
  }

  .container-about-attr .suptxt {
    top: -0.8em;
    font-size: 9px;
  }

  #attr-inform .cmp-dynamicform-v2 .cmp-dynamicform__generated-form .cmp-dynamicform__form-group .form-control:not(textarea) {
    width: 242px;background-color:#FFF;
  }

  #about-attr-page h3.cards-footer-header {
    padding-left: 5px;
    padding-right: 5px;
  }

  .aboutattr-cards-container {
    width: auto;
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 20px;
    position: relative;
  }

  #about-attr-page .banner-content h1 {
    font-size: 30px;
    line-height: 35px;
    width: 100%;
  }

  #about-attr-app .subheading-banner {
    padding-top: 20px;
  }

  div#about-attr-app {
    margin-top: -120px;
  }

  .understand-two-images {
    display: block;
  }

  .understand-image-one {
    width: auto;
    margin-bottom: 30px;
    display: block;
    height: 367px;
    margin-left: 5px;
    margin-right: 5px;
  }

  .understand-image-two {
    width: auto;
    display: block;
    margin-left: 5px;
    margin-right: 5px;
    height: 367px;
  }

  .understand-image-one p {
    padding-top: 20px;
  }

  .understand-image-two p {
    padding-top: 20px;
  }

  .understand-ptag p:nth-child(2) {
    margin-top: 4px !important;
    padding-top: 0px;
  }

  .container-about-attr {
    margin-left: 0;
    margin-right: 0;
  }

  .life-expetancy {
    margin-left: auto;
    margin-right: auto;
  }

  .life-inside {
    display: block;
    justify-content: space-around;
    text-align: center;
  }

  .right-arrow {
    margin-top: 21px;
    margin-bottom: 22px;
    transform: rotate(90deg);
  }

  .life-expetancy {
    max-width: 300px;
  }

  img.video-img {
    padding-left: 5px;
    padding-right: 5px;
  }

  .about-attr-video {
    padding-top: 20px;
  }

  .progress-two-images {
    display: block;
  }

  .progress-mobile {
    background-image: url(/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/about-attr-bgcontainer1.png);
    background-color: #090c30;
    border-radius: 30px 30px 30px 0px;
    background-size: cover;
    height: 350px;
    margin-bottom: 20px;
    margin-left: 10px;
    margin-right: 10px;
  }

  .progress-mobile1 {
    background-image: url(/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/about-attr-bgcontainer2.png);
    background-color: #090c30;
    border-radius: 30px 30px 30px 0px;
    background-size: cover;
    height: 327px;
    margin-left: 10px;
    margin-right: 10px;
  }

  .progerss-ul {
    color: white;
    font-family: "Kanit";
    font-size: 16px;
    padding-left: 10px;
    max-width: 261px;
    margin: auto;
    line-height: 20px;
  }

  .progerss-ptag {
    font-size: 24px;
    font-family: "Kanit-Bold";
    font-weight: bold;
    color: white;
    padding-top: 10px;
    padding-bottom: 15px;
    max-width: 261px;
    margin: auto;
  }

  .progerss-ptag p span {
    color: #EC99FD;
  }

  .progerss-ul ul li::before {
    content: "";
    height: 0.4em;
    width: 0.4em;
    display: block;
    position: relative;
    top: 13px;
    left: -15px;
    right: 0px;
    transform: rotate(45deg);
    background: transparent linear-gradient(45deg, #F599FC 0%, #7D76FE 30%, #556AFF 49%, #619EFD 79%, #75F2FB 100%) 0% 0% no-repeat padding-box;
  }

  .progress-image-one {
    width: auto;
    display: flex;
    margin-bottom: 30px;
    height: auto;
    margin-left: 5px;
    margin-right: 5px;
  }

  .progress-image-two {
    width: auto;
    display: flex;
    height: auto;
    margin-left: 5px;
    margin-right: 5px;
  }

  .two-container-img {
    display: block;
  }

  .bgimg1 {
    width: auto;
    height: auto;
  }

  .bgimg2 {
    width: auto;
    height: auto;
  }

  .attr-raised {
    display: block;
    padding-left: 35px;
    padding-right: 35px;
  }

  .attr-raised ul li h4 {
    padding-bottom: 33px;
    line-height: 24px;
    padding-left: 30px;
    margin-top: -24px;
  }

  .source-damage {
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 0px;
    /*margin-bottom: 16px;*/
  }

  .about-attr-video h3 {
    margin: auto;
    max-width: 330px;
    line-height: 22px;
    font-weight: normal;
  }

  .about-attr-hereity {
    padding-right: 10px;
    padding-left: 10px;
    padding-top: 20px;
  }

  .about-attr-understand h3 {
    padding-left: 5px;
    padding-right: 5px;
    line-height: 22px;
    font-weight: normal;
  }

  .about-attr-systemetic p {
    padding-right: 5px;
    font-size: 12px;
    padding-left: 62px;
    padding-top: 12px;
    margin: auto;
    margin-left: 10px;
    margin-right: 10px;
    font-size: 14px;
  }

  .bgsysmeticbanner {
    margin: auto;
    margin-left: 10px;
    margin-right: 10px;
    height: 135px;
    background-position-x: -75px;
  }

  .about-attr-prograss {
    margin-top: 20px;
  }

  .progress-img2 p {
    padding-left: 5px;
    padding-right: 5px;
  }

  .progress-image-one ul {
    margin-right: 20px !important;
  }

  .progress-image-two ul {
    margin-right: 20px !important;
  }

  .banner-content h1 {
    font-size: 20px;
    margin: auto;
    line-height: 25px;
  }

  #about-attr-page .treatment-arrow-image {
    margin: auto;
    margin-left: -10px;
    padding-top: 5px;
  }

  .source-damage p {
    margin: auto;
    margin-left: 5px;
    margin-right: 5px;
    font-size: 16px;
    line-height: 19px;
  }

  .b1.about-attr.diagnosis-cards-container {
    margin-top: 6px !IMPORTANT;
  }

  .b2.diagnosis-cards-container {
    margin-top: 10px !important;
  }

  .divcausess {
    padding-left: 30px;
    padding-right: 30px;
  }

  .about-attr-reference p {
    line-height: 25px;
    padding-left: 15px;
    padding-right: 15px;
  }

  .galaxcy-div {
    display: block;
  }

  .galaxy-mobile {
    width: auto;
    margin-left: 10px;
    margin-right: 10px;
    height: 205px;
  }

  .galaxy-mobile1 {
    width: auto;
    margin-left: 0px;/*margin-left: 10px;*/
    margin-right: 10px;
    /*height: 202px;*/
    height: auto;
    padding-bottom: 20px;
    padding-top:20px;
  }

  .galaxy-ptag1 p {
    font-size: 16px;
    padding-top: 20px;
    padding-left: 17px;
    padding-right: 17px;
  }

  .galaxy-ptag p {
    font-size: 16px;
    padding-left: 10px;
    padding-right: 10px;
  }

  .galxy-image img {
    top: 24px;
    width: 54px;
    height: 77px;
    left: 13px;
  }

  .galaxy-ul {
    font-size: 14px;
    max-width: 71%;
    margin-left: 18px;/*margin-left: 25px;*/
    margin-top: 23px;
    line-height: 20px;
  }
  #about-attr-page .video {
    padding:24px 24px;
    width: 100%;
  }
  #about-attr-page .galaxy-ul {
    padding-right: 0px;
    margin-top: 0px;
    font-size: 17px;
    width: 100%;
  }
  
    #about-attr-page .diagnosis-cards-items {
      flex-wrap: wrap;
      height: auto;
        padding: unset;
        margin-bottom: 12%;
    }
    
    #about-attr-page .galaxy-ptag {
        background-image: url(/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/mobile/galaxy1-mob.png);
        background-size: cover;
        max-width: 342px;
        height: 368.59px;
        max-height: 368.59px;
    } 
    #about-attr-page .galaxy-ptag1 {
        background-image: url(/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/mobile/galaxy2-mob.png);
        background-size: cover;
        max-width: 342px;
        height: 422.28px;
        max-height: 422.28px;
    }
}



/* treatment appro css */


/*.treatment-footer-text-container {
  display: none;
}*/

#treatment-approaches .footer-text-container {
  padding-top: 10px;
  height: 190px;
}

#treatment-approaches .footer-text-container h2 {
  padding-bottom: 20px;
  text-align: left;
  font-weight: normal;
}

#treatment-approaches .footer-text-container h4 {
  text-align: left;
  padding-left: 12%;
  padding-bottom: 10px;
  padding-right: 12%;
  font-size: 20px;
}

#treatment-approaches .footer-text-container p {
  font-size: 18px;
  padding-left: 12%;
  text-align: left;
  padding-right: 12%;
  padding-bottom: 12px;
}

#treatment-app {
  z-index: -1;
  margin-top: 0px;
}

#treatment-approaches .banner-content {
  padding-top: 120px;
}

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

.divcausess {
  margin: auto;
  max-width: 964px;
  padding-bottom: 40px;
}

p.causessattr {
  font-family: "Kanit";
  font-size: 18px;
  text-align: center;
  padding-bottom: 30px;
  padding-top: 30px;
  padding-top: 20px;
}

.silencersbold {
  font-family: "Kanit-Bold";
  font-size: 18px;
}

.stanlibold {
  font-family: "Kanit-Bold";
  font-size: 18px;
}

.lislienesrs li {
  padding-bottom: 10px;
}

.lislienesrs li p {
  font-family: "Kanit";
  font-size: 18px;
  line-height: 20px;
}

#treatment-approaches .targeting h2 {
  padding-top: 15px;
  font-family: "Kanit-Bold";
  padding-bottom: 20px;
  font-weight: normal;
}

#treatment-approaches h1 {
  max-width: 1070px;
}

#treatment-approaches .gradient-line {
  padding-bottom: 10px;
}

.treatment-cards-container {
  background-color: #FFFFFF;
  height: 100%;
  border-radius: 30px 30px 30px 0px;
  margin: auto;
  max-width: 1153px;
  position: relative;
  margin-bottom: 2%;
}

.treatment-cards-items {
  display: flex;
  height: 100%;
  margin-bottom: 0%;
  align-items: center;
  justify-content: center;
  justify-items: center;
  padding-bottom: 30px;
  align-content: center;
}

.treatment-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);
}

#treatment-approaches .steps-card-icon .steps-icon {
  margin-top: 20%;
}

#treatment-approaches .steps-card-icon .steps-icon-1 {
  margin-top: 20%;
  height: 80px;
}

#treatment-approaches .steps-title {
  font-size: 18px;
  line-height: 21px;
  font-family: "Kanit-SemiBold";
}

.targeting {
  text-align: center;
  font-size: 20px;
  font-family: "Kanit";
  color: #00215F;
  margin-top: 20px;
}

.treatment-inside {
  display: flex;
  font-family: "Kanit";
  margin: auto;
  max-width: 1153px;
}

.inside-goal {
  margin: auto;
  max-width: 1153px;
}

.treatment-all-image {
  display: flex;
  max-width: 564px;
}

.container-treatment {
  margin-left: auto;
  margin-right: auto;
  max-width: 1158px;
}

.silence {
  text-align: center;
  padding-bottom: 15px;
  position: relative;
  max-width: 215px;
  height: 180px;
  background-color: white;
  border-radius: 30px 30px 30px 0;
}

.silence::before {
  content: "";
  position: absolute;
  top: -3px;
  left: 0px;
  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);
}

.treatment-liver {
  text-align: center;
  position: relative;
  height: 241px;
  background-color: white;
  border-radius: 30px 30px 30px 0;
}

.treatment-liver::before {
  content: "";
  position: absolute;
  top: -3px;
  left: 0px;
  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);
}

.stabizer {
  text-align: center;
  position: relative;
  max-width: 215px;
  height: 180px;
  background-color: white;
  border-radius: 30px 30px 30px 0;
}

.stabizer::before {
  content: "";
  position: absolute;
  top: -3px;
  left: 0px;
  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);
}

.treatment-all {
  text-align: center;
  position: relative;
  max-width: 564px;
  height: 241px;
  background-color: white;
  border-radius: 30px 30px 30px 0;
}

.treatment-all::before {
  content: "";
  position: absolute;
  top: -3px;
  left: 0px;
  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);
}

.goal {
  text-align: center;
  margin-bottom: 48px;
  padding-bottom: 10px;
  position: relative;
  height: 112px;
  background-color: white;
  border-radius: 30px 30px 30px 0;
}

.goal::before {
  content: "";
  position: absolute;
  top: -3px;
  left: 0px;
  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);
}

.treatment-protein {
  text-align: center;
  position: relative;
  max-width: 270px;
  height: 241px;
  background-color: white;
  border-radius: 30px 30px 30px 0;
}

.treatment-protein::before {
  content: "";
  position: absolute;
  top: -3px;
  left: 0px;
  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);
}

.silence p:nth-child(1) {
  color: #00215F;
  font-size: 24px;
  font-weight: 600;
  padding-top: 25px;
  font-family: "Kanit-SemiBold";
}

.silence p:nth-child(2) {
  font-size: 18px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  padding-right: 10px;
}

.treatment-one {
  padding-right: 20px;
  padding-left:10px;
  width: 50%;
}

.treatment-two {
  width: 50%;
  padding-right: 12px;
}

.treatment-three {
  padding-right: 20px;
}

.treatment-liver-image {
  padding-top: 10px;
  padding-bottom: 10px;
}

.treatment-liver-text p:nth-child(1) {
  font-size: 20px;
  color: #00215F;
  font-weight: 600;
  padding-bottom: 10px;
  font-family: "Kanit-SemiBold";
}

.treatment-liver-text p:nth-child(2) {
  font-size: 18px;
  color: #00215F;
  padding-bottom: 10px;
}

.stabizer p:nth-child(1) {
  color: #00215F;
  font-size: 24px;
  font-weight: 600;
  padding-top: 25px;
  font-family: "Kanit-SemiBold";
}

.stabizer p:nth-child(2) {
  font-size: 18px;
  padding-top: 10px;
  padding-bottom: 20px;
  padding-left: 10px;
  padding-right: 10px;
}

.goal p:nth-child(1) {
  color: #00215F;
  font-size: 24px;
  font-weight: 600;
  padding-top: 25px;
  font-family: "Kanit-SemiBold";
}

p.additionaltext {
  font-family: "Kanit";
  padding-top: 5px;
}

p.additionaltext-em {
  font-family: "Kanit";
  padding-top: 5px;
  font-style: italic;
  font-size: 18px;
  line-height: 20px;
}

.goal p:nth-child(2) {
  font-size: 18px;
  padding-top: 10px;
  padding-bottom: 10px;
  font-family: "Kanit";
}

.treatment-protein-image {
  padding-top: 32px;
  padding-bottom: 10px;
}

.treatment-protein-text p {
  font-size: 20px;
  color: #00215F;
  font-weight: 600;
  padding-bottom: 10px;
  letter-spacing: -1px;
  font-family: "Kanit-SemiBold";
}

.col-split {
  display: flex;
}

.treatment-all-image div img {
  padding-top: 10px;
  padding-bottom: 10px;
}

.treatment-all-image div p {
  font-size: 20px;
  color: #00215F;
  font-weight: 600;
  padding-bottom: 10px;
  font-family: "Kanit-SemiBold";
}

.arrow-down {
  text-align: center;
  padding-top: 20px;
  padding-bottom: 20px;
}

.treatment-all-image .all-one, .all-two, .all-three {
  padding-top: 30px;
}

.treatment-liver-image {
  padding-top: 42px;
}

#treatment-approaches .footer-main-container {
  font-family: "Kanit";
}

.treatment-footer-text-container h2 {
  color: #00215F;
  font-size: 30px;
  font-weight: bold;
  padding-top: 31px;
  font-family: "Kanit-Bold";
  padding-bottom: 31px;
  font-weight: normal;
}

.treatment-footer-text-container h4 {
  font-family: "Kanit";
  font-size: 20px;
  color: #000000;
  max-width: 768px;
  padding-bottom: 20px;
  line-height: 22px;
}

.treatment-footer-text-container p {
  font-size: 18px;
  font-family: "Kanit";
  max-width: 768px;
}

.treatment-footer-text-container::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 3px;
  background: transparent linear-gradient(136deg, #F599FC 0%, #7D76FE 30%, #556AFF 49%, #619EFD 79%, #75F2FB 100%) 0% 0% no-repeat padding-box;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  border-radius: 30px 30px 30px 0px;
}

.treatment-footer-text-container {
  margin: auto;
  max-width: 960px;
  padding-left: 90px;
  border: 1px solid;
  height: 146px;
  border-radius: 30px 30px 30px 0px;
  background-color: white;
  font-family: Kanit Medium;
  position: relative;
}

.treatment-footer-text-container p:nth-child(1) {
  font-size: 30px;
  font-family: "Kanit-Bold";
  color: #00A206;
  max-width: 768px;
  padding-top: 40px;
  /*display: none;*/
  ;
}

.treatment-footer-text-container p:nth-child(2) {
  font-size: 18px;
  font-family: "Kanit";
  color: #00A206;
  padding-top: 20px;
  text-decoration: underline;
  /*display: none;*/
  ;
}

.treatment-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: 10% 90%;
  background-size: cover;
  padding-top: 50px;
  box-shadow: rgba(0, 0, 0, 0.90) 0px 70px 40px -20px inset;
  padding-bottom: 25px;
}

.treatment-footer-subheading p {
  font-family: "Kanit-Bold";
  font-size: 40px;
  color: white;
  text-align: center;
  margin: auto;
  max-width: 758px;
  padding-top: 40px;
  padding-bottom: 20px;
  line-height: 45px;
}
#about-attr-page .treatment-footer-subheading p{
    background-color: #E2FCFD;
    border-radius: 25px 25px 25px 0;
    border: 1px solid #E34AEE;
    color: #00215F;
    width: 653px;
    max-width: 100%;
    height: 139px;
    max-height: 100%;
    font-size: 30px;
    font-family: "Kanit-SemiBold";
    line-height: 34px;
}
.treatment-footer-small-text p {
  font-family: "Kanit";
  font-size: 26px;
  text-align: center;
  color: #ffff;
  padding-bottom: 30px;
  padding-top: 32px;
}
.treatment-footer-small-text p span{
    color: #FF53FF;
    font-family: "Kanit-SemiBold";
}
.treatment-cta{
    text-transform: uppercase;
}
.treatment-btn {
  text-align: center;
  padding-bottom: 166px;
}

.treatment-btn button {
  padding: 10px 50px 10px 50px;
  border-radius: 21px;
  background-color: #FFFFFF;
  color: #00215F;
  cursor: pointer;
  font-family: "Kanit-SemiBold";
  font-size: 16px;
}

.treatment-btn button::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 2px;
  background: transparent linear-gradient(136deg, #F599FC 0%, #7D76FE 30%, #556AFF 49%, #619EFD 79%, #75F2FB 100%) 0% 0% no-repeat padding-box;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  border-radius: 21px;
}

.treatment-btn button {
  position: relative;
  background-image: url(/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/stay-inform-bg.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: 3;
}

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

.treatment-footer-text-container p:nth-child(2) img {
  padding-left: 3px;
  width: 18px;
  height: 14px;
}

.progress-image-two ul li::before {
  content: "";
  height: 0.4em;
  width: 0.4em;
  display: block;
  position: relative;
  top: 7px;
  right: 12px;
  transform: rotate(45deg);
  background: transparent linear-gradient(45deg, #F599FC 0%, #7D76FE 30%, #556AFF 49%, #619EFD 79%, #75F2FB 100%) 0% 0% no-repeat padding-box;
}

.about-attr-reference p {
  margin: auto;
  max-width: 1160px;
  font-size: 13px;
  font-family: "Kanit";
  line-height: 16px;
  padding-top: 0;
  margin-top: -41px;
  pointer-events: none;
}

.about-attr-reference {
  background-color: black;
  color: white;
  padding-top: 60px;
}

span.reference-bold {
  font-family: "Kanit-Bold";
}

/* about attr */

@media screen and (min-width: 992px) {
    
  .treatment.banner-content h1 {
    font-size: 40px;
  }

  #about-attr-page .gradient-line {
    padding-top: 0px !important;
  }

  .about-attr-prograss {
    padding-bottom: 35px !important;
  }
     #about-attr-page #progressive-cont-2 .diagnosis-cards-items .alt-right-arrow {
        margin-bottom: 24px;
    }
    #about-attr-page .steps-card1 {
        margin-bottom: 8px;
    }
    
  #about-attr-page .steps-card2,#about-attr-page .steps-card3 {
    margin-bottom: 24px;
  }
}

@media only screen and (min-width: 1061px) and (max-width: 1200px) {
    
    #about-attr-page .understand-image-two, #about-attr-page .understand-image-one {
        max-width: 500px;
    }
    #about-attr-page .about-attr-prograss ul.about-attr-ul {
        width: calc(100% - 170px);
    }
}

@media only screen and (min-width: 700px) and (max-width: 1200px) {
  .goal {
    margin-top: 25px;
  }
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
  .treatment-footer-main-container {
    min-height: 450px;
    background-position: 5% 90%;
  }

  #treatment-approaches .treatment-footer-text-container {
    width: 302px;
    padding-right: 20px;
  }

  #treatment-approaches .treatment-footer-main-container {
    height: 419px;
    background-position: -20px 0px;
  }

  #treatment-approaches .treatment-footer-text-container p:nth-child(2) {
    font-size: 18px;
    line-height: 0px;
  }

  #about-attr-page .arrow-line-icon {
    margin-right: 34px;
    width: 100%;
    padding-right: 15px;
  }
}

@media only screen and (min-width: 374px) and (max-width: 780px) {
  div#about-attr-app {
    margin-top: -180px;
  }
}

/*treatment mobile device*/
@media screen and (max-width: 991px) {
 /* .mobile-only img {
    width: auto!important;
  }
  */
  
  /*.aboutattr-cards-container::before{
    visibility: visible;
    }*/

  #diagnosing-attr .arrow-line-icon {
    margin-right: 40px !important;
    margin-left: -2px !important;
    padding-bottom: 0;
    width:90%;
  }

  #treatment-approaches .treatment-diagnosis-banner {
    background-image: url(/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/diagnosis-banner.png);
    background-position: -918px 22px;
  }

  .treatment.banner-content h1 sup {
    font-size: 16px;
  }

  #treatment-approaches .banner-txt1 {
    margin-top: 95px;
    margin-bottom: 7px;
  }

  .treatment-footer-text-container p:nth-child(2) img {
    width: 28px;
    height: 26px;
    margin-left: 49px;
    margin-top: 7px;
  }

  .treatment-footer-text-container p:nth-child(1) {
    font-size: 30px;
    padding-top: 40px;
    line-height: 34px;
  }

  .treatment-footer-text-container p:nth-child(2) {
    font-size: 23px;
    padding-top: 36px;
    text-decoration: underline;
  }

  .split-container {
    display: flex;
  }

  .desktop-only1 {
    display: none;
  }

  .treatment-inside {
    justify-content: space-around;
  }

  .treatment-three {
    padding-top: 22px;
  }

  .goal {
    margin-bottom: 22px;
    margin-left: 15px;
    margin-right: 15px;
    height: 130px !important;
    margin-top: 23px;
  }

  .treatment-all-image {
    display: block;
  }

  .treatment-all {
    height: 525px;
  }

  #treatment-approaches .footer-text-container h2 {
    font-size: 17px;
  }

  #treatment-approaches .footer-text-container h4 {
    font-size: 12px;
  }

  #treatment-approaches .footer-text-container p {
    font-size: 10px;
    line-height: 15px;
  }

  #treatment-approaches .footer-text-container {
    height: 280px;
  }

  #treatment-approaches .footer-subheading {
    font-size: 26px;
  }

  .silence p:nth-child(1) {
    font-size: 18px;
  }

  .silence p:nth-child(2) {
    font-size: 16px;
    max-width: 134px;
    margin: auto;
  }

  .stabizer p:nth-child(1) {
    font-size: 18px;
  }

  .stabizer p:nth-child(2) {
    font-size: 15px;
  }

  .treatment-liver-text p:nth-child(1) {
    font-size: 18px;
  }

  .treatment-liver-text p:nth-child(2) {
    font-size: 16px;
  }

  .treatment-protein-text p {
    font-size: 18px;
    letter-spacing: 0px;
  }

  .goal p:nth-child(1) {
    font-size: 18px;
  }

  .goal p:nth-child(2) {
    font-size: 16px;
    max-width: 300px;
    margin: auto;
  }

  .treatment-all-image div p {
    font-size: 18px;
    max-width: 281px;
    margin: auto;
  }

  .targeting {
    font-size: 20px;
    padding-top: 25px;
  }

  .treatment-footer-text-container {
    padding-left: 25px;
    margin-left: 12px;
    margin-right: 12px;
    border: 1px solid;
    height: 282px;
  }

  .treatment-footer-main-container {
    max-height: 930px;
   /* min-height: 480px;*/
    ;
  }

  #treatment-approaches h1 {
    font-size: 26px;
    line-height: 40px;
    width: 100%;
    font-size: 30px;
    line-height: 35px;
    margin-bottom: 0px;
  }

  .treatment-footer-subheading p {
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    line-height: 35px;
    font-size: 30px;
  }

  #treatment-app {
    z-index: -1;
    margin-top: -225px;
  }

  .treatment-footer-text-container h2 {
    font-size: 26px;
    line-height: 30px;
  }

  .treatment-footer-text-container p {
    font-size: 19px;
    line-height: 25px;
  }

  .treatment-protein-image {
    padding-top: 14px;
  }

  .treatment-cards-container {
    background-color: #FFFFFF;
    height: 100%;
    border-radius: 30px 30px 30px 0px;
    width: auto;
    margin-left: 15px;
    margin-right: 15px;
    position: relative;
    margin-bottom: 4%;
    max-width: 100%;
  }

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

  .treatment-cards-items {
    flex-direction: column;
    row-gap: 20px;
  }

  #treatment-approaches .targeting h2 {
    font-size: 25px;
    padding: 15px 17px 20px;
  }
}

@media only screen and (min-width: 991px) and (max-width: 1253px) {
    
  #about-attr-page .treatment.banner-content {
    padding-left: 35px;
  }

  #treatment-approaches .banner-content {
    padding-top: 120px;
    padding-left: 58px;
  }
}

@media only screen and (min-width: 745px) and (max-width: 830px) {
    
  #about-attr-page .treatment-footer-main-container {
    height: 492px;
  }

  #treatment-approaches .treatment-diagnosis-banner {
    background-position: -575px 22px;
  }

  /*#treatment-approaches .treatment-one {*/
  /*  width: 30%;*/
  /*  margin-left: 159px;*/
  /*}*/

  #treatment-approaches .treatment-two .arrow-down {
    width: 25px;
    margin-left: 97px;
  }

  #treatment-approaches .treatment-footer-main-container {
    height: 334px;
  }
}


/* Treatment approches */

@media screen and (min-width: 992px) {
    
  #treatment-approaches img.treatment-arrow-image {
    margin: auto;
    margin-left: -38px;
    margin-right: 0;
    max-width: 1079px;
    margin-top: -15px;
  }
}

@media only screen and (min-width: 374px) and (max-width: 780px) {
  .treatment-footer-main-container {
    height: 323px;
    /*background-position: 0px calc(286px - 73vw);*/
    padding-left: 40px;
    padding-right: 40px;
  }

  .about-attr-reference p {
    margin-top: -42px;
    padding-top: 16%;
  }

  #about-attr-page .banner-content {
    /*padding-top: 139px;*/
  }
}

@media only screen and (min-width: 320px) and (max-width: 373px) {
  .treatment-footer-main-container {
    height: 465px;
  }

  .treatment-footer-main-container {
    background-position: 5% 90%;
  }

  .about-attr-reference p {
    margin-top: -25px;
  }
}

@media (width: 664px) {
  .about-attr-reference p {
    margin-top: -146px;
  }

  #about-attr-page .treatment-footer-main-container {
    height: 323px;
  }
}

@media only screen and (min-width: 745px) and (max-width: 780px) {
  .treatment-footer-main-container {
    background-position: 0px calc(500px - 70vw);
  }

  .about-attr-reference p {
    padding-top: 7%;
  }

  #about-attr-page .treatment-footer-main-container {
    height: 390px;
  }

  #attr-home .cta-bottom-home {
    width: 60%;
    height: 36px;
    position: relative;
    background: linear-gradient(to right, #5E4A83 0%, #353C83 47%, #3D5E83 100%) padding-box, linear-gradient(to right, #F599FC 0%, #556AFF 50%, #75F2FB 100%) border-box;
    border-radius: 50em;
    border: 3px solid transparent;
    left: 10%;
    margin-top: -38px;
  }

  .mobile-only img {
    width: auto;
  }
}

@media only screen and (min-width: 390px) and (max-width: 420px) {
  .treatment-footer-main-container {
    height: 407px;
  }
}

@media (min-width: 992px) and (max-width: 1200px) {
  #treatment-approaches .treatment-inside {
    margin-left: 15px;
    margin-right: 15px;
  }

  #treatment-approaches .treatment-cards-container {
    margin-left: 15px;
    margin-right: 15px;
  }

  #treatment-approaches .container-treatment .inside-goal {
    margin-left: 15px;
    margin-right: 15px;
  }

  #treatment-approaches .about-attr-reference {
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media (min-width: 992px) and (max-width: 1200px) {
  #about-attr-page .galaxy-mobile1, #about-attr-page .galaxy-mobile {
    height: 290px;
    margin: 0 10px;
  }
}

@media (min-width: 590px) and (max-width: 991px) {
  #about-attr-page .galaxy-mobile, #about-attr-page .galaxy-mobile1 {
    max-width: 100%;
    height: auto;
    padding-bottom: 20px;
  }

  #about-attr-page .galaxy-mobile1 ul, #about-attr-page .galaxy-mobile ul {
    padding-left: 20px;
  }
  
  #about-attr-page .galaxy-mobile {
  padding-top: 20px;
}
}



@media (min-width: 320px) and (max-width: 400px) {
    
  #treatment-approaches #container-9711092e2d .treatment-one {
    padding-left: 11px;
    padding-right: 10px;
  }

  #treatment-approaches #container-9711092e2d .treatment-two {
    padding-right: 12px;
    padding-left: 10px;
  }
}
@media ( min-width: 920px) and (max-width: 1200px){
.aboutattr-cards-container, .about-attr-prograss, .bgsysmeticbanner, .aboutattr-cards-container{
    margin: 30px 15px;

}
#about-attr-page .arrow-line-icon{
    max-width: 90%;
  }

  .understand-image-two, .understand-image-one{
    height: 300px;
  }
  .understand-image-one{
    margin-right: 10px;
  }
    #about-attr-page .hfheart {
margin: 0 15px;
}
.about-attr-systemetic p{
    max-width: 700px;
}
}

@media ( min-width: 920px) and (max-width: 1060px){
    #about-attr-page .understand-image-two, .understand-image-one {
        max-width: 455px;
    }
    .understand-ptag {
        width: 149px;
    }
    #about-attr-page .about-attr-prograss ul.about-attr-ul {
        width: calc(100% - 150px);
    }
    #about-attr-page .galaxcy-div{
        padding: 0px 15px 0px 15px;
    }
    #about-attr-page .container-about-attr {
        max-width: 100%;
        padding:0 24px;
    }
}

@media (max-width: 991px){
    #about-attr-page .treatment-diagnosis-banner {
      background-position: 20% 100%;
    }
    /*#about-attr-page .progress-mobile{
        height: fit-content;
    }
    #about-attr-page .progerss-ptag{
        max-width: 90%;
    }
    #about-attr-page .progerss-ul{
        max-width: 90%;
    }*/
}

@media (max-width: 767px){
    #about-attr-page  .source-damage p {
        font-size: 18px;
        line-height: 20px;
    }
    
    #about-attr-page  .container-about-attr {
        margin-left: 0;
        margin-right: 0;
    }
    
    #about-attr-page  .source-damage {
        margin: 0;
    }
    
    #about-attr-page .gradient-line img {}
    
    #about-attr-page #about-cards-1 .aboutattr-cards-container {
        margin: auto;
    }
    
    #about-attr-page .gradient-line {
        margin-left: auto;
        margin-right: auto;
    }
    
    #about-attr-page #content-sec-2 .gradient-line {
        padding-bottom: 20px;
        padding-top: 35px;
    }
    
    #about-attr-page .steps-title {
        max-width: 200px;
        margin-left: auto;
        margin-right: auto;
    }
    
    #about-attr-page #about-cards-1 {
        padding:0px  20px 20px!important;
    }
    
    #about-attr-page .about-attr-video h3 {
        padding-bottom: 0px;
    }
    
    #about-attr-page .about-attr-hereity h2 {
        width: 100%;
        padding: 25px 20px 20px;
        font-weight: normal;
    }
    
    #about-attr-page .progress-mobile {
        margin-left: 20px;
        margin-right: 20px;
        height: auto;
        padding: 20px 0px;
        background: url(/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop/about-attr-bgcontainer1.png);
        background-size: cover;
        background-position: right;
    }
    
    #about-attr-page .progress-mobile1 {
        height: auto;
        margin: 0px 20px 60px;
        padding: 25px 0px;
        background: url(/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop/about-attr-bgcontainer2.png);
        background-size: cover;
        background-position: right;
    }
    
    #about-attr-page .about-attr-systemetic h2 {
        padding: 50px 15px 0px;
    }
    
    #about-attr-page .bgsysmeticbanner {
        background-image: url(/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/mobile/systemic-banner-mob.png);
        height: 186.9px;
        width: 100%;
        margin: auto;
        padding: 20px;
        background-position-x: 0px;
    }
    
    #about-attr-page .about-attr-systemetic p {
        padding: 0px 0px 0px 90px;
        font-size: 16px;
        margin: 0px;
    }
    
    #about-attr-page .about-attr-systemetic {
        padding: 0px 20px;
    }
    
    #about-attr-page .galaxcy-div {
        padding: 0px 20px;
    }
    
    .about-attr-prograss {
        padding-bottom: 30px;
        margin-top: 50px;
    }
    
    #about-attr-page .galaxy-ptag {
        margin-bottom: 20px;
    }
    
    #about-attr-page .galaxy-ptag p ,#about-attr-page .galaxy-ptag1 p{
        font-size: 18px;
        padding: 0 5px 0px 0px;
        line-height: 20px;
    }
    
    #about-attr-page .galaxy-ptag p sup {
        font-size: 60%;
        line-height: 60%;
    }
    
    #about-attr-page .galaxy-ptag .galaxy-mobile {
        height: auto;
        margin: 15px auto 0px;
    }
    
    #about-attr-page .galaxy-mobile .galaxy-ul {
        max-width: 58%;/*max-width: 69%;*/
        font-size: 16px;
    }
    
    #about-attr-page .galxy-image img {
        width: 76px !important;
        height: 93px;
        min-width: 76px;
        /*width: 87px !important;
        height: 78.3px;
        min-width: 87px;*/
    }
    .gal-neuron-desktop{
        display:none;   
    }
    #about-attr-page .gal-neuron-mobile {
        display: block !important;
    }
    #about-attr-page .galaxy-mobile1 .galxy-image img{
        width: 59px !important;
        min-width: 59px !important;
        height: 90px !important;
    }
    
    #about-attr-page .galaxy-mobile .galaxy-ul li:nth-child(1) {
        padding-bottom: 5px;
    }
    
    #about-attr-page .steps-card {width: 100%;}
    
    #about-attr-page .arrow-down-card img {
        margin: 18px auto 0;
        width: 20px;
        display: block;
    }
    
    #about-attr-page .arrow-down-card {
        width: 100%;
    }
    
    #about-attr-page .treatment-footer-subheading p {
        width: auto;
        height: auto;
        font-size: 24px;
        line-height: 26px;
    }
    
    #about-attr-page .treatment-footer-small-text p {
        font-size: 22px;
        padding-top: 24px;
    }
    #about-attr-page .about-attr-understand h3 {
        padding: 0px 20px 20px;
    }  
    #about-attr-page #content-sec-1 {
        padding: 20px 20px 0px !important;
    }
}



@media ( min-width: 393px) and (max-width: 767px){
    .progerss-ul{
        max-width: 90%;
    }
    .bgsysmeticbanner{
        background-position-x: -41px;
    }
    /*#about-attr-page .galaxy-ptag{
        max-width: 100%;
        height: fit-content;
    }
    #about-attr-page .galaxy-ptag1{
        max-width: 100%;
        height: fit-content;
    }*/
}
/*@media (max-width: 420px){
    #about-attr-page .progress-mobile{
        height: 350px;
    }
    #about-attr-page .progerss-ptag{
        max-width: 261px;
    }
    #about-attr-page .progerss-ul{
        max-width: 261px;
    }
}*/

@media (max-width: 360px){
    #about-attr-page .galaxy-ptag{
        background-size: 100% 100%;
        height: fit-content;
        max-height: 450px;
    }
    #about-attr-page .galaxy-ptag1{
        background-size: 100% 100%;
        height: fit-content;
        max-height: 560px;
    }
    #about-attr-page .aboutattr-cards-container{margin: auto 15px !important;}
    html[lang="fr"] #about-attr-page .galaxy-ptag{max-height: fit-content !important;}
    html[lang="fr"] #about-attr-page .galaxy-ptag1{max-height: fit-content !important;height: fit-content !important;}
}
@media (max-width: 360px){
    #about-attr-page .progress-mobile{margin: auto 15px !important;margin-bottom: 20px !important;}
    #about-attr-page .progress-mobile1{margin: auto 15px !important;}
    .attr-life p{margin: auto 15px !important;}
}

@media (max-width: 330px){
    #about-attr-page .bgsysmeticbanner{height: fit-content !important;}
}

/* ===================================================================
   PATHOPHYSIOLOGY SECTION - 2-column layout (nav left, content right)
   Scoped to #container-2a2a9d56d1 specifically (NOT the shared
   role="about-attr-wrap" attribute, which is reused by other
   sections on this page, e.g. the video block below).

   Layout is driven by two custom properties so every other container
   on this page can align to the same nav column without repeating
   magic numbers:
     --nav-width : width of the sticky "On this page" nav column
     --nav-gap   : gap between the nav column and the content column
   =================================================================== */

#about-attr-page {
  --nav-width: 224px; /* Matches user rules */
  --nav-gap: 14px;    /* Matches user rules */
}

#about-attr-page #container-2a2a9d56d1 {
  display: grid !important;
  grid-template-columns: var(--nav-width) minmax(0, 1fr) !important;
  grid-template-areas:
    "nav text"
    "nav diagram";
  column-gap: var(--nav-gap) !important;
  align-items: start;
  max-width: 1265px !important; /* Updated from 1440px */
  width: 100% !important;
  margin: 0 auto !important;
  background-color: #FAFAFA !important;
}

#about-attr-page .aem-GridColumn:has(> #container-2a2a9d56d1) {
  background-color: #FAFAFA !important;
  width: 100% !important;
}

#about-attr-page #container-2a2a9d56d1 > .text:has(#content-sec-1) {
  grid-area: text;
}

#about-attr-page #container-2a2a9d56d1 > .text:has(#about-cards-1) {
  grid-area: diagram;
}

#about-attr-page #container-2a2a9d56d1 > .text:has(#this-page) {
  grid-area: nav;
}

@media screen and (max-width: 991px) {
  #about-attr-page #container-2a2a9d56d1 {
    display: block !important;
  }
}

/* --- Pathophysiology heading + paragraph --- */

#about-attr-page #content-sec-1 {
  background: transparent !important;
}

#about-attr-page #content-sec-1 .container-about-attr {
  max-width: 1001px !important; /* Updated from 1063px */
  width: 100% !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

#about-attr-page #content-sec-1 .source-damage {
  max-width: 923px !important;
  width: 100% !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

#about-attr-page #content-sec-1 .source-damage h2 {
  font-family: "Kanit-SemiBold" !important;
  font-size: 30px !important;
  line-height: 34px !important;
  color: #00215F !important;
  text-align: center !important;
  font-weight: normal !important;
}

#about-attr-page #content-sec-1 .source-damage p {
  font-family: "Kanit" !important;
  font-size: 18px !important;
  line-height: 20px !important;
  color: #151515 !important;
  text-align: center !important;
}

/* --- "At the source" diagram card --- */

#about-attr-page #container-2a2a9d56d1 > .text:has(#about-cards-1) .aboutattr-cards-container {
  background-color: #FFFFFF !important;
  border: 1px solid #606FB4 !important;
  border-radius: 30px 30px 30px 0px !important;
  box-shadow: 0px 0px 15px #0000001D !important;
  max-width: 1001px !important; /* Updated from 1063px */
  width: 100% !important;
  margin: 0 auto !important;
  opacity: 1;
}

#about-attr-page #container-2a2a9d56d1 > .text:has(#about-cards-1) .diagnosis-cards-items {
  flex-wrap: nowrap !important;
}

#about-attr-page .aboutattr-cards-container .at-source-heading {
  font-family: "Kanit-SemiBold" !important;
  font-size: 18px !important;
  line-height: 20px !important;
  color: #00215F !important;
  text-align: center !important;
  display: block !important;
  width: 100% !important;
}

#about-attr-page .aboutattr-cards-container .at-source-heading sup {
  font-size: 50% !important;
  font-family: "Kanit-Medium" !important;
  position: relative;
  top: -0.5em;
}

/* --- "On this page" nav sidebar --- */

#about-attr-page #container-2a2a9d56d1 > .text:has(#this-page) .aboutattr-cards-container {
  background-color: #E9EBF2 !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0px 0px 25px 0px !important;
  margin: 0 !important;
  width: var(--nav-width) !important;
  max-width: var(--nav-width) !important;
  height: 352.5px !important;
  padding: 30px 24px !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  position: sticky;
  top: 20px;
}

#about-attr-page #container-2a2a9d56d1 > .text:has(#this-page) .diagnosis-cards-items {
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  padding: 0 !important;
  flex-wrap: nowrap !important;
}

#about-attr-page #container-2a2a9d56d1 > .text:has(#this-page) .steps-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 12px !important;
  width: 100% !important;
  text-align: left !important;
}

/* "ON THIS PAGE" header - first icon only */
#about-attr-page #container-2a2a9d56d1 > .text:has(#this-page) .steps-card-icon:first-child {
  font-family: "Kanit-Medium" !important;
  font-size: 21px !important;
  font-weight: normal !important;
  color: #00215F !important;
  text-align: left !important;
  padding-bottom: 4px !important;
}

/* All other nav links */
#about-attr-page #container-2a2a9d56d1 > .text:has(#this-page) .steps-card-icon:not(:first-child) {
  font-family: "Kanit" !important;
  font-size: 18px !important;
  font-weight: normal !important;
  color: #00215F !important;
  text-align: left !important;
  line-height: 20px !important;
  padding: 0 !important;
}

/* "Pathophysiology" as active/underlined link (2nd icon) */
#about-attr-page #container-2a2a9d56d1 > .text:has(#this-page) .steps-card-icon:nth-child(2) {
  font-family: "Kanit-Medium" !important;
}

/* ===================================================================
   VIDEO SECTION - "Learn more about the mechanism..." + video player
   Scoped to #container-83abeb153b (its own container, separate from
   the Pathophysiology one above, even though both share the
   role="about-attr-wrap" attribute).
   =================================================================== */
   
#about-attr-page .aem-GridColumn:has(#container-83abeb153b) {
  background: #FFFFFF !important;
}

#about-attr-page #container-83abeb153b .about-attr-video {
    max-width: 1230px !important;
    width: 100% !important;
    margin: 0 auto !important;
    display: block !important;    /* Forces it to act as a block element */
    clear: both !important;       /* Breaks it away from any elements floating above it */
    float: none !important;       /* Disables any grid floats forcing it to the left */
    /* REMOVED (was breaking mobile layout, no media guard): padding-left: 268px; */
}

#about-attr-page #container-83abeb153b .about-attr-video h3 {
  width: 100% !important;
  max-width: 1230px !important;
  margin: 0 auto 20px auto !important;
  white-space: normal !important;
  padding-top: 43px;
}

#about-attr-page #container-83abeb153b .cmp-video__player {
  max-width: 1230px !important;
}

/* "At risk: Multiple organs and tissues" card - separate container */

/* Background band + full-width bleed for the ATTR mechanism section */
#about-attr-page .aem-GridColumn:has(#container-de03a1c250) {
  background: #FAFAFA !important;
}

#about-attr-page #content-sec-1,
#about-attr-page #container-83abeb153b,
#about-attr-page #container-de03a1c250 {
  background-color: #FAFAFA !important;
}

/* "At risk" card block - centered, offset by nav-width + nav-gap so it
   lines up under the "At the source" card above it. box-sizing:border-box
   makes the padding-left reduce the available width instead of shifting
   content off-center. */
#about-attr-page #container-de03a1c250 {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  background: #FAFAFA !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

#about-attr-page #container-de03a1c250,
#about-attr-page #container-de03a1c250 > .text,
#about-attr-page #container-de03a1c250 > .aem-Grid,
#about-attr-page #container-de03a1c250 .cmp-container {
  background: #FAFAFA !important;
}

#about-attr-page #container-de03a1c250 > .text:has(#about-cards-2) {
  max-width: 1265px !important; /* Updated from 1440px */
  width: 100% !important;
  margin: 0 auto !important;
  padding-left: calc(var(--nav-width) + var(--nav-gap)) !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
  display: block !important;
}

#about-attr-page #container-de03a1c250 > .text:has(#about-cards-2) #about-cards-2 {
  width: 100% !important;
  display: block !important;
  box-sizing: border-box !important;
}

/* Card itself - centered in the remaining content area, same as "At the source" */
#about-attr-page #container-de03a1c250 > .text:has(#about-cards-2) .aboutattr-cards-container {
  max-width: 1001px !important; /* Updated from 1063px */
  width: 100% !important;
  margin: 0 auto !important;
  display: block !important;
  box-sizing: border-box !important;
}

#about-attr-page #container-de03a1c250 .aboutattr-cards-container {
  background-color: #FFFFFF !important;
  border: 1px solid #606FB4 !important;
  border-radius: 30px 30px 30px 0px !important;
  box-shadow: 0px 0px 15px #0000001D !important;
  opacity: 1;
}

#about-attr-page #container-de03a1c250 .diagnosis-cards-items {
  display: flex !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
}

#about-attr-page #container-de03a1c250 > .text:has(#about-cards-2) .diagnosis-cards-items {
  flex-wrap: nowrap !important;
}

#about-attr-page #container-de03a1c250 .aboutattr-cards-container .at-risk-heading {
  font-family: "Kanit-SemiBold" !important;
  font-size: 18px !important;
  line-height: 20px !important;
  color: #00215F !important;
  text-align: center !important;
  display: block !important;
  width: 100% !important;
}

#about-attr-page #container-de03a1c250 .aboutattr-cards-container .at-risk-heading sup {
  font-size: 50% !important;
  font-family: "Kanit-Medium" !important;
  position: relative;
  top: -0.5em;
}

/* Kill the nav offset on mobile/tablet - the sidebar grid collapses
   below 991px, so this card should go back to full centering there */
@media screen and (max-width: 991px) {
  #about-attr-page #container-de03a1c250 > .text:has(#about-cards-2) {
    padding-left: 0 !important;
  }
}


/* Hereditary intro container - same nav offset pattern */
#about-attr-page #container-02c32ef3cc {
  width: 100% !important;
  max-width: 1265px !important; /* Updated from 1440px */
  margin: 0 auto !important;
  padding-left: calc(var(--nav-width) + var(--nav-gap) + 12px) !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
  background: transparent !important;
}

/* Remove blue background from all possible inner wrappers */
#about-attr-page #container-02c32ef3cc,
#about-attr-page #container-02c32ef3cc > .text,
#about-attr-page #container-02c32ef3cc > .aem-Grid,
#about-attr-page #container-02c32ef3cc .cmp-container {
  background: transparent !important;
}

/* Inner content block */
#about-attr-page #container-02c32ef3cc .about-attr-hereity {
  width: 100% !important;
  max-width: 1001px !important; /* Updated from 1064px */
  margin: 0 auto !important;
  padding-top: 40px !important;
  box-sizing: border-box !important;
  text-align: center !important;
}

/* Heading */
#about-attr-page #container-02c32ef3cc .about-attr-hereity h2 {
  width: 100% !important;
  max-width: 1001px !important; /* Updated to follow structural rules */
  margin: 0 auto 20px auto !important;
  text-align: center !important;
}

/* Paragraph */
#about-attr-page #container-02c32ef3cc .about-attr-hereity p {
  width: 100% !important;
  max-width: 1001px !important; /* Updated to follow structural rules */
  margin: 0 auto !important;
  text-align: center !important;
}

/* Mobile */
@media screen and (max-width: 991px) {
  #about-attr-page #container-02c32ef3cc {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #about-attr-page #container-02c32ef3cc .about-attr-hereity,
  #about-attr-page #container-02c32ef3cc .about-attr-hereity h2,
  #about-attr-page #container-02c32ef3cc .about-attr-hereity p {
    max-width: 100% !important;
  }
}

#about-attr-page #container-02c32ef3cc .about-attr-hereity h2 {
  padding-bottom: 6px !important;
  margin-bottom: 0 !important;
}

#about-attr-page #container-02c32ef3cc .container-text-attr {
  margin-top: 8px !important;
}

#about-attr-page #container-02c32ef3cc .container-text-attr p {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Blue/cards section container - same nav offset pattern, only shift, no bg change */
#about-attr-page #container-3e016e6889 {
  width: 100% !important;
  max-width: 1265px !important; /* Updated from 1440px */
  margin: auto !important;
  padding-left: calc(var(--nav-width) + var(--nav-gap) + 12px) !important;
  box-sizing: border-box !important;
  background: transparent !important;
}

@media screen and (max-width: 991px) {
  #about-attr-page #container-02c32ef3cc,
  #about-attr-page #container-3e016e6889 {
    padding-left: 0 !important;
    max-width: 100% !important;
  }
}

#about-attr-page #container-75cf52306c,
#about-attr-page #container-7122c14fc0,
#about-attr-page #container-380ba759fc {
  width: 100% !important;
  max-width: 1265px !important; /* Updated from 1440px */
  margin: 0 auto !important;
  padding-left: 238px !important;
  box-sizing: border-box !important;
}

@media screen and (max-width: 991px) {
  #about-attr-page #container-7122c14fc0,
  #about-attr-page #container-380ba759fc {
    padding-left: 0 !important;
    max-width: 100% !important;
  }
}



/* ===== SECTION WRAPPER ===== */
#about-attr-page .container-about-attr {
  max-width: 1001px; /* Updated from 1064px */
  margin: 0 auto;
}

#about-attr-page .about-attr-prograss {
  padding-bottom: 35px;
}


#about-attr-page .understand-image-one,
#about-attr-page .understand-image-two {
    display: flex !important;
    flex-direction: column !important;
}

#about-attr-page .genetic-testing-callout {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    background-color: #DDE0EE99 !important;
    border: 1px solid #656EFA !important;
    border-radius: 20px 20px 20px 0px !important;
    padding: 16px 24px !important;
    margin: 24px auto !important;
}

#about-attr-page .genetic-testing-callout__icon {
    flex-shrink: 0 !important;
}

#about-attr-page .genetic-testing-callout__icon img {
    width: 32px !important;
    height: 32px !important;
    display: block !important;
}

#about-attr-page .genetic-testing-callout__text {
    color: #00215F !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
}

#about-attr-page #container-75cf52306c {
    position: relative !important;
    background-color: transparent !important;
    z-index: 0;
}

#about-attr-page #container-75cf52306c::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    background-color: #FAFAFA;
    z-index: -1;
}

#about-attr-page #text-c92be536b1 p {
    color: #151515 !important;
    font-size: 18px !important;
    text-align: left !important;
    font-family: "Kanit", sans-serif !important;
    font-weight: 600 !important;
}

#about-attr-page #text-c92be536b1 ul,
#about-attr-page #text-c92be536b1 li {
    color: #151515 !important;
    font-size: 18px !important;
    text-align: left !important;
    font-family: "Kanit", sans-serif !important;
    font-weight: 400 !important;
	line-height: 1.5;
}

#about-attr-page #text-2c89de61b7 {
    background-color: #DDE0EE99 !important;
    border: 1px solid #656EFA !important;
    border-radius: 20px 20px 20px 0px !important;
    padding: 16px 24px 16px 56px !important;
    margin: 24px auto !important;
    position: relative !important;
	margin-bottom:50px;
}

#about-attr-page #text-2c89de61b7 p {
    color: #00215F !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
}

#about-attr-page #text-2c89de61b7::before {
    content: "";
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    background-image: url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/lightbulb%20icon%20gradient_1.png");
    background-size: contain;
    background-repeat: no-repeat;
}


#about-attr-page #text-2c89de61b7 .callout-line1 {
    white-space: nowrap !important;
}

/* #about-attr-page - hATTR-CM bullet list */
/* Scoped to the Cardiac amyloidosis block inside #container-380ba759fc */

#about-attr-page #container-380ba759fc .slide {
  width: 100%;
  box-sizing: border-box;
  color: #151515;
  font-family: "Kanit", sans-serif;
}

#about-attr-page #container-380ba759fc .slide .title {
  margin: 0 0 8px !important;
  padding: 30px 0 0 !important;
  color: #151515;
  font-family: "Kanit-SemiBold", sans-serif;
  font-size: 18px;
  font-weight: normal;
  line-height: 22px;
  text-align: left;
}

#about-attr-page #container-380ba759fc .slide .bullet-row {
  display: flex;
  align-items: flex-start;
  width: 100%;
  margin: 0 0 8px !important;
  padding: 0;
}

#about-attr-page #container-380ba759fc .slide .bullet {
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  font-family: "Kanit", sans-serif;
  text-align: left;
}

/* Main blue diamond/plus bullets */
#about-attr-page #container-380ba759fc .slide .bullet.plus {
  width: 18px;
  padding-top: 1px;
  color: #585AEA;
  font-size: 0;
  line-height: 22px;
}

#about-attr-page #container-380ba759fc .slide .bullet.plus::before {
  content: "✦";
  display: block;
  font-size: 10px;
  line-height: 22px;
}

#about-attr-page #container-380ba759fc .slide .bullet-text {
  flex: 1 1 auto;
  min-width: 0;
  color: #151515;
  font-family: "Kanit", sans-serif;
  font-size: 16px;
  font-weight: normal;
  line-height: 21px;
  white-space: normal;
  overflow-wrap: break-word;
}

#about-attr-page #container-380ba759fc .slide .bold {
  font-family: "Kanit-Bold", sans-serif;
  font-weight: normal;
}

#about-attr-page #container-380ba759fc .slide .underline {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

#about-attr-page #container-380ba759fc .slide .sup {
  position: relative;
  top: -0.5em;
  margin-left: 1px;
  font-family: "Kanit", sans-serif;
  font-size: 60%;
  line-height: 0;
  vertical-align: baseline;
}

/* Nested teal dot bullets */
#about-attr-page #container-380ba759fc .slide .sub-bullets {
  margin: 0 0 0 50px;
  padding: 0;
}

#about-attr-page #container-380ba759fc .slide .sub-bullets .bullet-row {
  margin-bottom: 10px !important;
}

#about-attr-page #container-380ba759fc .slide .bullet.dot {
  width: 18px;
  padding-top: 0;
  color: #00636A;
  font-size: 17px;
  line-height: 21px;
}

#about-attr-page #container-380ba759fc .slide .sub-bullets .bullet-text {
  font-size: 16px;
  line-height: 21px;
}

#about-attr-page #container-380ba759fc .slide .bullet-row:last-child {
  margin-bottom: 0 !important;
}

@media screen and (max-width: 991px) {
  #about-attr-page #container-380ba759fc .slide .title {
    padding-top: 20px !important;
    font-size: 16px;
    line-height: 20px;
  }

  #about-attr-page #container-380ba759fc .slide .bullet-text,
  #about-attr-page #container-380ba759fc .slide .sub-bullets .bullet-text {
    font-size: 14px;
    line-height: 18px;
  }

  #about-attr-page #container-380ba759fc .slide .bullet.plus {
    width: 16px;
  }

  #about-attr-page #container-380ba759fc .slide .bullet.plus::before {
    font-size: 9px;
    line-height: 18px;
  }

  #about-attr-page #container-380ba759fc .slide .sub-bullets {
    margin-left: 32px;
  }

  #about-attr-page #container-380ba759fc .slide .bullet.dot {
    width: 16px;
    font-size: 15px;
    line-height: 18px;
  }
}

/* #about-attr-page - ATTR-suspected callout box */
/* Scoped to div#text-a798dda2f0 (inside #container-380ba759fc) */

#about-attr-page #text-a798dda2f0 .attr-suspected-box {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #DDE0EE99;
  border: 1px solid #656EFA;
  border-radius: 20px 20px 20px 0px;
  padding: 20px 24px;
  padding-bottom: 40px !important;
  margin-top: 30px !important; /* space above box, after "Weight loss" sub-bullet */
}

#about-attr-page #text-a798dda2f0 .attr-suspected-icon-wrap {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

#about-attr-page #text-a798dda2f0 .attr-suspected-icon {
  font-size: 20px;
  line-height: 1;
}

#about-attr-page #text-a798dda2f0 .attr-suspected-content {
  display: flex;
  flex-direction: column;
}

#about-attr-page #text-a798dda2f0 .attr-suspected-title {
  color: #00215F;
  font-family: "Kanit", sans-serif;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 5.19px !important;
}

/* No ::before bullet — the "•" already exists in the text content itself */
#about-attr-page #text-a798dda2f0 .attr-suspected-line,
#about-attr-page #text-a798dda2f0 .attr-suspected-line.sub {
  color: #00215F;
  font-family: "Kanit", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.4;
  margin-bottom: 5.19px !important;
}

#about-attr-page #text-a798dda2f0 .attr-suspected-line:last-child,
#about-attr-page #text-a798dda2f0 .attr-suspected-line.sub:last-child {
  margin-bottom: 0 !important;
}


/* #about-attr-page - About mixed-phenotype hATTR text block */
/* Scoped to #text-029ce8908f inside #container-7122c14fc0 */

#about-attr-page #text-029ce8908f .about-mixed-hattr {
  text-align: center;
  max-width: 1001px;
  margin: 0 auto;
}

#about-attr-page #text-029ce8908f .about-mixed-hattr__heading {
  text-align: center;
  color: #00215F;
  font-family: "Kanit", sans-serif;
  font-size: 30px;
  font-weight: 600;
  margin-bottom: 25px !important;
  margin-top:79px;
}

#about-attr-page #text-029ce8908f .about-mixed-hattr__title {
  text-align: center;
  color: #00215F;
  font-family: "Kanit", sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.3px;
  margin-bottom: 16px !important;
}

#about-attr-page #text-029ce8908f .about-mixed-hattr__description {
  text-align: center;
  color: #151515;
  font-family: "Kanit", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
}

#about-attr-page #text-029ce8908f .about-mixed-hattr__description b {
  font-weight: 400; /* neutralize the wrapping <b> so only the underlined span stays emphasized */
}

#about-attr-page #container-7122c14fc0 {
  position: relative;
}

#about-attr-page #container-7122c14fc0::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  height: 100%;
  transform: translateX(-50%);
  background-color: #FAFAFA;
  z-index: -1;
}

/* #about-attr-page - mixed-hattr gauge stat image */
/* Scope to actual container/text ID once confirmed */

#about-attr-page .mixed-hattr-stat {
  display: flex;
  justify-content: center;
  margin: 0 auto;
}

#about-attr-page .mixed-hattr-stat img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* #about-attr-page - patient-box two-column layout */
/* Scoped to #container-3c273b57ba, boosted specificity to beat symptoms.css */

body#about-attr-page #container-3c273b57ba .patient-box {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  gap: 24px;
  flex-wrap: nowrap;
}

body#about-attr-page #container-3c273b57ba .border-box.border-box {
  width: 460px !important;
  height: auto !important;
  min-height: 146px;
  padding: 24px 20px;
  border-radius: 30px 30px 30px 0 !important;
}

#about-attr-page .diagnosis-cards-items .steps-card:first-child .steps-card-icon {
  padding-left: 28px !important;
  box-sizing: border-box;
}

#about-attr-page .diagnosis-cards-items .steps-card:first-child img.steps-icon.ab-icon-1 {
  margin-left: 0; /* reset any existing margin so padding controls the offset */
}










/* Container: only add padding (not already set) — border/radius/shadow/width already handled by existing rules */
#about-attr-page #about-cards-2 .aboutattr-cards-container {
  padding: 24px 40px !important;
}

#about-attr-page #about-cards-2 .at-source-heading {
  display: block !important;
  text-align: center !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  color: #041E42 !important;
  margin-bottom: 20px !important;
}

/* display:flex already applied elsewhere — just adding the layout props */
#about-attr-page #about-cards-2 .diagnosis-cards-items {
  align-items: flex-start !important;
  justify-content: center !important;
  flex-wrap: nowrap !important;
  gap: 10px !important;
}

#about-attr-page #about-cards-2 .steps-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  flex: 1 1 0 !important;
  min-width: 0 !important;
}

#about-attr-page #about-cards-2 .steps-card-icon {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  width: 100% !important;
}

/* Native size — no forced width, browser renders each image at its own uploaded dimensions */
#about-attr-page #about-cards-2 .steps-icon {
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  display: block !important;
  margin: 0 auto 10px auto !important;
}

#about-attr-page #about-cards-2 .steps-title {
  text-align: center !important;
  width: 100% !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #00215F !important;
  line-height: 1.3 !important;
}

#about-attr-page #about-cards-2 .steps-plus-icon {
  width: 24px !important;
  height: 24px !important;
  object-fit: contain !important;
  align-self: center !important;
  margin-top: 40px !important;
  flex-shrink: 0 !important;
}

@media (max-width: 767px) {
  #about-attr-page #about-cards-2 .diagnosis-cards-items {
    flex-wrap: wrap !important;
    row-gap: 20px !important;
  }
  #about-attr-page #about-cards-2 .steps-card {
    flex: 1 1 30% !important;
  }
}

#about-attr-page #about-cards-2 .diagnosis-cards-items .steps-card:first-child {
  transform: translateX(-40px) !important;
}


/* Center all card titles */
#about-attr-page #about-cards-1 .steps-title {
  text-align: center !important;
  width: 100% !important;
}

/* Center icon + title as a unit inside each card */
#about-attr-page #about-cards-1 .steps-card-icon {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  width: 100% !important;
}

#about-attr-page #about-cards-1 .steps-icon {
  display: block !important;
  margin: 0 auto 10px auto !important;
}

/* Last card (body/human silhouette) — center specifically, in case its native image content sits off-axis like the nerve icon did */
#about-attr-page #about-cards-1 .diagnosis-cards-items .steps-card:last-child .steps-icon {
  margin: 0 auto 10px auto !important;
  display: block !important;
}

#about-attr-page #about-cards-1 .diagnosis-cards-items .alt-right-arrow {
  margin-left: 20px !important;
  margin-right: 20px !important;
  align-self: center !important;
  flex-shrink: 0 !important;
}










#about-attr-page #progressive-cont-1 .aboutattr.diagnosis-cards-items {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 10px !important;
}

#about-attr-page #progressive-cont-1 .steps-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  flex: 1 1 0 !important;
  min-width: 0 !important;
}

#about-attr-page #progressive-cont-1 .steps-card-icon {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  width: 100% !important;
}

/* NATIVE SIZE — no forced width or height, renders exactly as uploaded to DAM */
#about-attr-page #progressive-cont-1 .steps-icon {
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  display: block !important;
  margin: 0 auto 12px auto !important;
}

/* Stage label — lighter purple, distinct from description */
#about-attr-page #progressive-cont-1 .stage-label {
  color: #7C6FD6 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-align: center !important;
  margin-bottom: 4px !important;
}

#about-attr-page #progressive-cont-1 .steps-title {
  text-align: center !important;
  width: 100% !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #00215F !important;
  line-height: 1.3 !important;
}

#about-attr-page #progressive-cont-1 .steps-plus-icon {
  width: 22px !important;
  height: 22px !important;
  object-fit: contain !important;
  margin: 10px auto !important;
  display: block !important;
  flex-shrink: 0 !important;
}

#about-attr-page #progressive-cont-1 .alt-right-arrow {
  align-self: center !important;
  margin-top: 55px !important;
  margin-left: 15px !important;
  margin-right: 15px !important;
  flex-shrink: 0 !important;
}

#about-attr-page #progressive-cont-1 .arrow-down-card {
  display: none !important;
}

@media (max-width: 767px) {
  #about-attr-page #progressive-cont-1 .aboutattr.diagnosis-cards-items {
    flex-wrap: wrap !important;
    row-gap: 24px !important;
  }
  #about-attr-page #progressive-cont-1 .steps-card {
    flex: 1 1 45% !important;
  }
}

#about-attr-page #progressive-cont-1 .steps-title2 {
  text-align: center !important;
  width: 100% !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #00215F !important;
  line-height: 1.3 !important;
}




#about-attr-page #progressive-cont-2 .aboutattr.diagnosis-cards-items {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 10px !important;
}

#about-attr-page #progressive-cont-2 .steps-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  flex: 1 1 0 !important;
  min-width: 0 !important;
}

#about-attr-page #progressive-cont-2 .steps-card-icon {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  width: 100% !important;
}

/* Native size — no forced width/height */
#about-attr-page #progressive-cont-2 .steps-icon {
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  display: block !important;
  margin: 0 auto 12px auto !important;
}

#about-attr-page #progressive-cont-2 .steps-title {
  text-align: center !important;
  width: 100% !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #00215F !important;
  line-height: 1.3 !important;
  list-style: none !important;
}

/* Belt-and-suspenders: kill any bullet marker if `bullet` class is still present anywhere in this block */
#about-attr-page #progressive-cont-2 .bullet::before,
#about-attr-page #progressive-cont-2 .bullet::marker {
  content: none !important;
  display: none !important;
}

/* First title line (STAGE A/B/C/D/MORTALITY) — lighter purple to match target */
#about-attr-page #progressive-cont-2 .steps-title:first-of-type {
  color: #7C6FD6 !important;
  margin-bottom: 4px !important;
}

#about-attr-page #progressive-cont-2 .alt-right-arrow {
  align-self: center !important;
  margin-top: 55px !important;
  margin-left: 15px !important;
  margin-right: 15px !important;
  flex-shrink: 0 !important;
}

#about-attr-page #progressive-cont-2 .arrow-down-card {
  display: none !important;
}

@media (max-width: 767px) {
  #about-attr-page #progressive-cont-2 .aboutattr.diagnosis-cards-items {
    flex-wrap: wrap !important;
    row-gap: 24px !important;
  }
  #about-attr-page #progressive-cont-2 .steps-card {
    flex: 1 1 45% !important;
  }
}

#about-attr-page #progressive-cont-2 .steps-icon {
  width: auto !important;
  height: auto !important;
  max-height: 90px !important;
  max-width: 100% !important;
  min-width: 0 !important;
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  display: block !important;
  margin: 0 auto 12px auto !important;
   margin-top: 10px !important;
}

#about-attr-page #progressive-cont-2 .aboutattr-cards-container {
  padding-top: 24px !important;
}

#about-attr-page #about-cards-2 .aboutattr-cards-container {
  padding-top: 24px !important;
}

#about-attr-page #about-cards-2 .steps-icon {
  margin-top: 10px !important;
}

#about-attr-page #progressive-cont-1 .aboutattr-cards-container {
  padding-top: 24px !important;
}

#about-attr-page #progressive-cont-1 .steps-icon {
  margin-top: 10px !important;
}








/* card = the visible bordered box, holds icon + box side by side */




/* box now just holds text + button, no separate background */











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

  /* ======================================================
     "Learn more about the mechanism" section
     ====================================================== */

  #about-attr-page .container-about-attr {
    position: relative !important;

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

    height: auto !important;
    min-height: 0 !important;

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

    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  #about-attr-page .container-about-attr #overlay {
    position: relative !important;

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

    height: auto !important;
    min-height: 0 !important;

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

    box-sizing: border-box !important;
  }

  #about-attr-page .about-attr-video {
    position: relative !important;

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

    height: auto !important;
    min-height: 0 !important;

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

    box-sizing: border-box !important;
  }

  #about-attr-page .about-attr-video h3 {
    width: 100% !important;
    max-width: 100% !important;

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

    font-size: clamp(16px, 4.5vw, 20px) !important;
    line-height: 1.3 !important;

    text-align: center !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;

    box-sizing: border-box !important;
  }

  /* ======================================================
     Kaltura video wrapper
     ====================================================== */

  #about-attr-page .cmp-video,
  #about-attr-page .cmp-video__holder {
    position: relative !important;

    display: block !important;

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

    height: auto !important;
    min-height: 0 !important;

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

    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  /*
   * Override the inline video height added by Kaltura.
   */
  #about-attr-page .cmp-video__player {
    position: relative !important;

    display: block !important;

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

    height: auto !important;
    min-height: 0 !important;

    aspect-ratio: 16 / 9 !important;

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

    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  /*
   * All nested Kaltura video layers must fill the player.
   */
  #about-attr-page .cmp-video__video,
  #about-attr-page .kWidgetCentered,
  #about-attr-page .kWidgetIframeContainer,
  #about-attr-page .videoHolder,
  #about-attr-page .mwEmbedKalturaIframe {
    position: absolute !important;

    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    display: block !important;

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

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

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

    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  /*
   * Thumbnail/poster.
   */
  #about-attr-page .cmp-video__video img,
  #about-attr-page .kWidgetCentered img,
  #about-attr-page .kWidgetIframeContainer img,
  #about-attr-page .videoHolder img {
    position: absolute !important;

    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    display: block !important;

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

    height: 100% !important;

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

    object-fit: cover !important;
    object-position: center !important;

    transform: none !important;
  }

  /* ======================================================
     Play button
     ====================================================== */

  #about-attr-page .kWidgetPlayBtn {
    position: absolute !important;

    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    left: 50% !important;

    width: 72px !important;
    height: 72px !important;

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

    transform: translate(-50%, -50%) !important;
    transform-origin: center center !important;

    z-index: 50 !important;
  }

  /*
   * Reset internal positioning applied by Kaltura.
   */
  #about-attr-page .kWidgetPlayBtn > *,
  #about-attr-page .kWidgetPlayBtn img,
  #about-attr-page .kWidgetPlayBtn svg {
    position: relative !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    display: block !important;

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

    height: 100% !important;
    max-height: 72px !important;

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

    object-fit: contain !important;

    transform: none !important;
  }

  /*
   * Override inline left/top coordinates applied by Kaltura.
   */
  #about-attr-page .kWidgetPlayBtn[style] {
    top: 50% !important;
    left: 50% !important;

    margin-left: 0 !important;
    margin-top: 0 !important;

    transform: translate(-50%, -50%) !important;
  }
}
  @media screen and (max-width: 480px) {
  #about-attr-page #container-83abeb153b .about-attr-video {
    padding-left: 0 !important;
    max-width: 100% !important;
  }
}

 @media screen and (max-width: 480px) {
  #about-attr-page .cmp-video__player {
    padding-left: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    margin-top: 0 !important;
  }

}


} /* AUTO-FIX: closes @media screen and (max-width: 480px) opened at line 4201 — this brace was missing in the original file, which meant everything after it (roughly 4,400 lines) was unintentionally nested inside this one mobile media query. */

/* AUTO-FIX: restored the "nav offset" padding that was removed above.
   The original padding-left: 268px on .cmp-video__player and
   #container-83abeb153b .about-attr-video had NO media query guard,
   so it was squeezing the video/heading into a narrow right-hand
   column on every screen size, including mobile. It's now scoped to
   desktop widths only (matching its evident original intent as a
   sticky-nav offset), so mobile is fixed and desktop is unaffected. */
@media screen and (min-width: 992px) {
  #about-attr-page .cmp-video__player {
    padding-left: 268px;
  }
  #about-attr-page #container-83abeb153b .about-attr-video {
    padding-left: 268px;
  }
}

/* ==========================================================================
   GLOBAL MOBILE BOUNDARY SAFEGUARDS
   ========================================================================== */
@media screen and (max-width: 480px) {
  html, body, #about-attr-page {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }
}

/* ==========================================================================
   TABLET & MOBILE BASE STYLES (MAX-WIDTH: 767px)
   ========================================================================== */
@media screen and (max-width: 767px) {
  /* Prevent the callout sentence from forcing horizontal overflow */
  #about-attr-page #text-2c89de61b7 .callout-line1,
  #about-attr-page .callout-line1 {
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
  }

  /* Main card layout transition from horizontal to vertical stack */
  #about-attr-page .aboutattr-cards-container,
  #about-attr-page .aboutattr,
  #about-attr-page .aboutattr.diagnosis-cards-items {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    box-sizing: border-box !important;
  }

  /* Reset card containers and structure */
  #about-attr-page .steps-card,
  #about-attr-page .steps-card-icon {
    position: static !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    top: auto !important;
    left: 0 !important;
    right: auto !important;
    margin: 0 auto !important;
    padding: 0 !important;
    transform: none !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }

  /* Keep all card step images scaled safely within the columns */
  #about-attr-page .steps-card-icon > img.steps-icon,
  #about-attr-page img.steps-icon,
  #about-attr-page img.attr.steps-icon {
    position: static !important;
    display: block !important;
    width: 140px !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: 0 !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    box-sizing: border-box !important;
  }

  /* Rotate horizontal desktop design arrows downward for vertical layout */
  #about-attr-page .alt-right-arrow,
  #about-attr-page img.alt-right-arrow {
    position: static !important;
    display: block !important;
    width: 32px !important;
    max-width: 32px !important;
    height: auto !important;
    margin: 16px auto !important;
    transform: rotate(90deg) !important;
  }

  /* Keep typography bound inside the viewport margins */
  #about-attr-page p,
  #about-attr-page li,
  #about-attr-page .steps-title,
  #about-attr-page .steps-title2 {
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    box-sizing: border-box !important;
  }

  /* Stop absolute-positioned superscripts from tearing layouts */
  #about-attr-page sup,
  #about-attr-page .suptxt,
  #about-attr-page .suptxt-abt {
    position: static !important;
    display: inline !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    margin-left: 2px !important;
    margin-right: 0 !important;
    transform: none !important;
    white-space: normal !important;
    vertical-align: super !important;
  }

  /* CMS container safety wrappers */
  #about-attr-page .text,
  #about-attr-page .cmp-text,
  #about-attr-page .cmp-container {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
}

/* ==========================================================================
   STRICT MOBILE ADJUSTMENTS (MAX-WIDTH: 480px)
   ========================================================================== */
@media screen and (max-width: 480px) {
  /* Enforce targeted small scaling for the leaking target images */
  #about-attr-page .steps-card-icon > img.steps-icon,
  #about-attr-page img.steps-icon,
  #about-attr-page img.attr.steps-icon {
    width: 120px !important;
    max-width: 120px !important;
  }

  /* Scale structural layout spacer arrows cleanly on tight screens */
  #about-attr-page .alt-right-arrow,
  #about-attr-page img.alt-right-arrow {
    width: 30px !important;
    max-width: 30px !important;
    margin: 15px auto !important;
  }
}

/* Global utility breakout override */
#about-attr-page #text-2c89de61b7 .callout-line1 {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}


/* ============================================
   ON THIS PAGE — Mobile Accordion
   ============================================ */
@media screen and (max-width: 767px) {

  #about-attr-page .on-this-page-menu {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: calc(100% - 32px) !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 12px 16px 5px !important;
    padding: 0 !important;
    background: #edf0f7 !important;
    border: 0 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    z-index: 5 !important;
  }

  #about-attr-page .on-this-page-menu .diagnosis-cards-items,
  #about-attr-page .on-this-page-menu .steps-card {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  /* HEADER = first-child ("ON THIS PAGE") — always visible */
  #about-attr-page .on-this-page-menu .steps-card-icon:first-child {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    min-height: 44px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 11px 16px !important;
    color: #00215F !important;
    background: #E9EBF3 !important;
    border-radius: 12px !important;
    font-size: 21px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-align: left !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
  }

  #about-attr-page .on-this-page-menu .steps-card-icon:first-child::after {
    content: "" !important;
    display: block !important;
    flex: 0 0 12px !important;
    width: 12px !important;
    height: 12px !important;
    margin: -5px 4px 0 16px !important;
    border-right: 3px solid #09285c !important;
    border-bottom: 3px solid #09285c !important;
    transform: rotate(45deg) !important;
    transition: transform 0.2s ease !important;
    box-sizing: border-box !important;
  }

  #about-attr-page .on-this-page-menu.menu-expanded .steps-card-icon:first-child::after {
    margin-top: 5px !important;
    transform: rotate(-135deg) !important;
  }

  /* BODY = every other .steps-card-icon — hidden when collapsed */
  #about-attr-page .on-this-page-menu:not(.menu-expanded) .steps-card-icon:not(:first-child) {
    display: none !important;
  }

  #about-attr-page .on-this-page-menu.menu-expanded {
    padding-bottom: 12px !important;
  }

  #about-attr-page .on-this-page-menu.menu-expanded .steps-card-icon:not(:first-child) {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 7px 16px !important;
    color: #17396d !important;
    background: transparent !important;
    font-size: 15px !important;
    line-height: 1.15 !important;
    text-align: left !important;
    box-sizing: border-box !important;
  }
}

/* ============================================
   Pathophysiology heading spacing (content-sec-1)
   ============================================ */
@media screen and (max-width: 767px) {
  #about-attr-page #content-sec-1 .source-damage h2 {
    margin-top: 0 !important;
  }

  #about-attr-page #content-sec-1 .container-about-attr,
  #about-attr-page #content-sec-1 .source-damage {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

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

  #about-attr-page .on-this-page-menu {
    margin-bottom: 8px !important;
  }

  #about-attr-page .aboutattr-sidebar-placeholder {
    display: none !important;
    height: 0 !important;
  }

  #about-attr-page #content-sec-1 {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  #about-attr-page #content-sec-1 .container-about-attr,
  #about-attr-page #content-sec-1 .source-damage,
  #about-attr-page #content-sec-1 .source-damage h2 {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

/* ============================================
   "At the source" (about-cards-1) &
   "At risk" (about-cards-2) — matched card sizing
   ============================================ */
@media screen and (max-width: 480px) {

  /* Shared card box styling */
  #about-cards-1 .aboutattr-cards-container,
  #about-cards-2 .aboutattr-cards-container {
    padding: 16px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
  }

  #about-cards-1 .at-source-heading,
  #about-cards-2 .at-source-heading {
    font-size: 18px !important;
    display: block !important;
    text-align: center !important;
    margin-bottom: 12px !important;
  }

  #about-cards-1 .steps-icon,
  #about-cards-2 .steps-icon {
    width: auto !important;
    height: 90px !important;
    max-height: 90px !important;
    max-width: 100% !important;
    object-fit: contain !important;
    margin: 0 auto !important;
    display: block !important;
  }

  #about-cards-1 .steps-title,
  #about-cards-2 .steps-title {
    font-size: 15px !important;
    line-height: 1.2 !important;
    margin: 6px 0 0 !important;
    padding: 0 !important;
  }

  #about-cards-1 .steps-card,
  #about-cards-2 .steps-card {
    margin: 0 auto !important;
    padding: 4px 0 !important;
    height: auto !important;
    min-height: 0 !important;
  }

  #about-cards-1 .steps-card-icon,
  #about-cards-2 .steps-card-icon {
    height: auto !important;
    min-height: 0 !important;
  }

  /* about-cards-1: linear vertical flow, keep arrows */
  #about-cards-1 .diagnosis-cards-items {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px !important;
  }

  /* about-cards-2: 2-column grid so 6 items don't stack
     into a much taller box than about-cards-1 */
  #about-cards-2 .diagnosis-cards-items {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px 12px !important;
    align-items: start !important;
  }

  #about-cards-2 .steps-plus-icon {
    display: none !important; /* no longer needed in a grid layout */
  }

}

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

  #about-cards-2 .aboutattr-cards-container {
    padding: 100px !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }

}

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

  #about-attr-page #about-cards-2 .aboutattr-cards-container {
    padding: 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

}

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

  /* ======================================================
     MAIN SECOND-CARD COMPONENT
     Same mobile width and spacing as the card above
     ====================================================== */

  #about-attr-page
  #container-de03a1c250
  > .text:has(#about-cards-2) {
    display: block !important;

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

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

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

    box-sizing: border-box !important;
  }


  /* Main cards container */
  #about-attr-page
  #container-de03a1c250
  > .text:has(#about-cards-2)
  .aboutattr-cards-container {
    position: relative !important;
    inset: auto !important;

    display: block !important;

    width: calc(100% - 32px) !important;
    max-width: none !important;
    min-width: 0 !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

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

    background: #ffffff !important;

    box-sizing: border-box !important;
    overflow: visible !important;

    flex: none !important;
    align-self: auto !important;
    transform: none !important;
  }


  /* ======================================================
     REMOVE DESKTOP FIXED HEIGHTS FROM EACH CARD
     ====================================================== */

  #about-attr-page
  #container-de03a1c250
  > .text:has(#about-cards-2)
  .aboutattr,

  #about-attr-page
  #container-de03a1c250
  > .text:has(#about-cards-2)
  .steps-card {
    position: relative !important;
    inset: auto !important;

    display: block !important;

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

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

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

    box-sizing: border-box !important;

    flex: none !important;
    align-self: auto !important;

    overflow: visible !important;
    transform: none !important;
  }


  /*
   * Space between individual organ/tissue items.
   * Each block grows only according to its content.
   */
  #about-attr-page
  #container-de03a1c250
  > .text:has(#about-cards-2)
  .aboutattr + .aboutattr,

  #about-attr-page
  #container-de03a1c250
  > .text:has(#about-cards-2)
  .steps-card + .steps-card {
    margin-top: 28px !important;
  }


  /* ======================================================
     IMAGE WRAPPERS
     Remove fixed desktop image areas
     ====================================================== */

  #about-attr-page
  #container-de03a1c250
  > .text:has(#about-cards-2)
  .steps-card-icon,

  #about-attr-page
  #container-de03a1c250
  > .text:has(#about-cards-2)
  .image,

  #about-attr-page
  #container-de03a1c250
  > .text:has(#about-cards-2)
  .cmp-image {
    position: relative !important;
    inset: auto !important;

    display: block !important;

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

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

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

    text-align: center !important;

    box-sizing: border-box !important;
    overflow: visible !important;

    flex: none !important;
    transform: none !important;
  }


  /* Actual images */
  #about-attr-page
  #container-de03a1c250
  > .text:has(#about-cards-2)
  img,

  #about-attr-page
  #container-de03a1c250
  > .text:has(#about-cards-2)
  .cmp-image__image {
    position: relative !important;

    display: block !important;

    width: auto !important;
    max-width: 180px !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

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

    object-fit: contain !important;
    object-position: center !important;

    transform: none !important;
  }


  /* ======================================================
     TEXT
     ====================================================== */

  #about-attr-page
  #container-de03a1c250
  > .text:has(#about-cards-2)
  h2,

  #about-attr-page
  #container-de03a1c250
  > .text:has(#about-cards-2)
  h3,

  #about-attr-page
  #container-de03a1c250
  > .text:has(#about-cards-2)
  h4,

  #about-attr-page
  #container-de03a1c250
  > .text:has(#about-cards-2)
  p {
    position: relative !important;

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

    height: auto !important;
    min-height: 0 !important;

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

    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;

    box-sizing: border-box !important;
    transform: none !important;
  }


  /* Main card heading */
  #about-attr-page
  #container-de03a1c250
  > .text:has(#about-cards-2)
  .aboutattr-cards-container
  > h2,

  #about-attr-page
  #container-de03a1c250
  > .text:has(#about-cards-2)
  .aboutattr-cards-container
  > h3 {
    margin-top: 12px !important;
    margin-bottom: 22px !important;

    text-align: center !important;
  }


  /* Individual item titles */
  #about-attr-page
  #container-de03a1c250
  > .text:has(#about-cards-2)
  .steps-card
  h2,

  #about-attr-page
  #container-de03a1c250
  > .text:has(#about-cards-2)
  .steps-card
  h3,

  #about-attr-page
  #container-de03a1c250
  > .text:has(#about-cards-2)
  .steps-card
  p {
    margin-top: 8px !important;
    margin-bottom: 8px !important;

    text-align: center !important;
  }


  /* ======================================================
     REMOVE GRID/FLEX STRETCHING
     ====================================================== */

  #about-attr-page
  #container-de03a1c250
  > .text:has(#about-cards-2)
  .aem-Grid,

  #about-attr-page
  #container-de03a1c250
  > .text:has(#about-cards-2)
  .responsivegrid,

  #about-attr-page
  #container-de03a1c250
  > .text:has(#about-cards-2)
  .cmp-container {
    display: block !important;

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

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

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

    box-sizing: border-box !important;
    overflow: visible !important;
  }


  /*
   * Prevent any desktop inline height from making
   * individual content blocks excessively tall.
   */
  #about-attr-page
  #container-de03a1c250
  > .text:has(#about-cards-2)
  [style*="height"],

  #about-attr-page
  #container-de03a1c250
  > .text:has(#about-cards-2)
  [style*="min-height"] {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
}

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

  /* =====================================================
     GENETIC TESTING CALLOUT - MOBILE
     Icon at top, text underneath
     ===================================================== */

  #about-attr-page #text-47af5e321e {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

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

    box-sizing: border-box !important;
  }

  #about-attr-page
  #text-47af5e321e
  .genetic-testing-callout {
    display: flex !important;
    flex-direction: column !important;

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

    gap: 10px !important;

    width: calc(100% - 32px) !important;
    max-width: none !important;
    min-width: 0 !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 16px auto !important;
    padding: 16px 14px 18px !important;

    background-color: #eef0fa  !important;

    border: 1px solid #656efa !important;
    border-radius: 20px 20px 20px 0 !important;

    box-sizing: border-box !important;

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

    transform: none !important;
  }

  /* =====================================================
     ICON
     ===================================================== */

  #about-attr-page
  #text-47af5e321e
  .genetic-testing-callout__icon {
    position: relative !important;

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

    flex: 0 0 auto !important;

    width: 38px !important;
    height: 38px !important;

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

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

    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;

    box-sizing: border-box !important;
    transform: none !important;
  }

  /*
   * Handle an image or SVG placed inside the icon wrapper.
   */
  #about-attr-page
  #text-47af5e321e
  .genetic-testing-callout__icon
  img,

  #about-attr-page
  #text-47af5e321e
  .genetic-testing-callout__icon
  svg {
    display: block !important;

    width: 38px !important;
    max-width: 38px !important;

    height: 38px !important;
    max-height: 38px !important;

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

    object-fit: contain !important;
    object-position: center !important;

    transform: none !important;
  }

  /*
   * Reset any desktop pseudo-element icon position.
   */
  #about-attr-page
  #text-47af5e321e
  .genetic-testing-callout__icon::before,

  #about-attr-page
  #text-47af5e321e
  .genetic-testing-callout__icon::after {
    position: static !important;

    display: block !important;

    margin: 0 auto !important;
    transform: none !important;
  }

  /* =====================================================
     TEXT WRAPPER
     ===================================================== */

  #about-attr-page
  #text-47af5e321e
  .genetic-testing-callout__text {
    position: relative !important;

    display: block !important;

    flex: none !important;

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

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

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

    color: #123d79 !important;
    background: transparent !important;

    text-align: center !important;

    box-sizing: border-box !important;

    overflow: visible !important;
    transform: none !important;
  }

  /* =====================================================
     TEXT CONTENT
     ===================================================== */

  #about-attr-page
  #text-47af5e321e
  .genetic-testing-callout__text
  p,

  #about-attr-page
  #text-47af5e321e
  .genetic-testing-callout__text
  span,

  #about-attr-page
  #text-47af5e321e
  .genetic-testing-callout__text
  strong,

  #about-attr-page
  #text-47af5e321e
  .genetic-testing-callout__text
  a {
    display: inline !important;

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

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

    color: inherit !important;
    background: transparent !important;

    font-family: inherit !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    font-style: normal !important;
    line-height: 1.25 !important;
    letter-spacing: 0 !important;

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

    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;

    border: 0 !important;
    box-shadow: none !important;
    transform: none !important;
  }

  #about-attr-page
  #text-47af5e321e
  .genetic-testing-callout__text
  p {
    display: block !important;
  }

  /*
   * Superscript references.
   */
  #about-attr-page
  #text-47af5e321e
  .genetic-testing-callout__text
  sup {
    position: relative !important;
    top: -0.25em !important;

    display: inline !important;

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

    color: inherit !important;

    font-size: 10px !important;
    line-height: 0 !important;

    vertical-align: baseline !important;
  }
}

/* =========================================================
   ABOUT hATTR-PN — MOBILE LAYOUT
   ========================================================= */

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

  /* -------------------------------------------------------
     1. OUTER SECTION

     Desktop displays the direct .text children horizontally.
     Mobile must stack every component vertically.
     ------------------------------------------------------- */

  #about-attr-page #container-75cf52306c {
    position: relative !important;
    inset: auto !important;

    display: block !important;

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

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

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

    box-sizing: border-box !important;
    overflow: visible !important;

    flex: none !important;
    grid-template-columns: none !important;

    transform: none !important;
  }

  /* Every direct AEM text component must occupy full width */
  #about-attr-page
  #container-75cf52306c
  > .text {
    position: relative !important;
    inset: auto !important;
    float: none !important;
    clear: both !important;

    display: block !important;

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

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

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

    box-sizing: border-box !important;
    overflow: visible !important;

    flex: none !important;
    flex-basis: auto !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;

    transform: none !important;
  }

  /* Reset each inner AEM text component */
  #about-attr-page
  #container-75cf52306c
  > .text
  > .cmp-text {
    position: relative !important;
    inset: auto !important;

    display: block !important;

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

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

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

    box-sizing: border-box !important;
    overflow: visible !important;

    transform: none !important;
  }


  /* -------------------------------------------------------
     2. ABOUT hATTR-PN HEADING
     ------------------------------------------------------- */

  #about-attr-page
  #text-79dd3428cb
  .container-about-hattr-pn {
    position: relative !important;

    display: block !important;

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

    height: auto !important;
    min-height: 0 !important;

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

    box-sizing: border-box !important;
    text-align: center !important;

    transform: none !important;
  }

  #about-attr-page
  #text-79dd3428cb
  .attr-life {
    display: block !important;

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

    height: auto !important;
    min-height: 0 !important;

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

    text-align: center !important;
    box-sizing: border-box !important;

    transform: none !important;
  }

  #about-attr-page
  #text-79dd3428cb
  .attr-life
  h3 {
    display: block !important;

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

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

    color: #082c67 !important;

    font-size: 21px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;

    text-align: center !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;

    transform: none !important;
  }

  #about-attr-page
  #text-79dd3428cb
  .attr-life
  p {
    display: block !important;

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

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

    color: #082c67 !important;

    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;

    text-align: center !important;
    text-transform: uppercase !important;

    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;

    transform: none !important;
  }

  #about-attr-page
  #text-79dd3428cb
  .attr-life
  sup {
    position: relative !important;
    top: -0.3em !important;

    display: inline !important;

    font-size: 9px !important;
    line-height: 0 !important;
    vertical-align: baseline !important;
  }


  /* -------------------------------------------------------
     3. PROGRESSION CARD OUTER CONTAINER
     ------------------------------------------------------- */

  #about-attr-page #progressive-cont-1 {
    display: block !important;

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

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

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

    box-sizing: border-box !important;
    overflow: visible !important;

    transform: none !important;
  }

  #about-attr-page
  #progressive-cont-1
  .aboutattr-cards-container {
    position: relative !important;
    inset: auto !important;
    float: none !important;

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

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

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

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

    background: #ffffff !important;

    border: 1px solid #7d8ded !important;
    border-radius: 26px 26px 26px 0 !important;

    box-shadow: 0 2px 10px rgba(12, 40, 90, 0.08) !important;

    box-sizing: border-box !important;
    overflow: hidden !important;

    transform: none !important;
  }


  /* -------------------------------------------------------
     4. INDIVIDUAL STAGE CARDS
     ------------------------------------------------------- */

  #about-attr-page
  #progressive-cont-1
  .aboutattr,

  #about-attr-page
  #progressive-cont-1
  .diagnosis-cards-items {
    position: relative !important;
    inset: auto !important;

    display: block !important;

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

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

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

    box-sizing: border-box !important;
    overflow: visible !important;

    transform: none !important;
  }

  #about-attr-page
  #progressive-cont-1
  .steps-card {
    position: relative !important;
    inset: auto !important;
    float: none !important;

    display: block !important;

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

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

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

    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    box-sizing: border-box !important;
    overflow: visible !important;

    flex: none !important;
    transform: none !important;
  }

  #about-attr-page
  #progressive-cont-1
  .steps-card-icon {
    position: relative !important;
    inset: auto !important;

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

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

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

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

    text-align: center !important;
    box-sizing: border-box !important;
    overflow: visible !important;

    transform: none !important;
  }


  /* -------------------------------------------------------
     5. STAGE IMAGES
     ------------------------------------------------------- */

  #about-attr-page
  #progressive-cont-1
  .steps-icon {
    position: relative !important;
    inset: auto !important;

    display: block !important;

    width: auto !important;
    max-width: 115px !important;

    height: auto !important;
    max-height: 145px !important;

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

    object-fit: contain !important;
    object-position: center !important;

    flex: none !important;
    transform: none !important;
  }

  /* Stage 2 walker */
  #about-attr-page
  #progressive-cont-1
  .steps-icon[alt*="Stage 2"] {
    max-width: 92px !important;
    max-height: 132px !important;
  }

  /* Stage 3 wheelchair */
  #about-attr-page
  #progressive-cont-1
  .steps-icon[alt*="Stage 3"] {
    max-width: 120px !important;
    max-height: 138px !important;
  }

  /* Mortality image */
  #about-attr-page
  #progressive-cont-1
  .steps-icon.attr {
    max-width: 165px !important;
    max-height: 80px !important;
  }


  /* -------------------------------------------------------
     6. STAGE TEXT
     ------------------------------------------------------- */

  #about-attr-page
  #progressive-cont-1
  .steps-title,

  #about-attr-page
  #progressive-cont-1
  .steps-title2 {
    position: relative !important;
    inset: auto !important;

    display: block !important;

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

    height: auto !important;
    min-height: 0 !important;

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

    color: #082c67 !important;

    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;

    text-align: center !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;

    box-sizing: border-box !important;
    transform: none !important;
  }

  #about-attr-page
  #progressive-cont-1
  .stage-label {
    margin-top: 0 !important;
    margin-bottom: 5px !important;

    color: #6973ff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
  }

  #about-attr-page
  #progressive-cont-1
  .stage-label
  + .steps-title {
    margin-top: 0 !important;
    margin-bottom: 8px !important;
  }

  #about-attr-page
  #progressive-cont-1
  .steps-title2 {
    margin-top: 7px !important;
    margin-bottom: 0 !important;
  }

  #about-attr-page
  #progressive-cont-1
  .suptxt-abt {
    position: relative !important;
    top: -0.3em !important;

    display: inline !important;

    font-size: 9px !important;
    line-height: 0 !important;
    vertical-align: baseline !important;
  }


  /* -------------------------------------------------------
     7. PLUS ICONS
     ------------------------------------------------------- */

  #about-attr-page
  #progressive-cont-1
  .steps-plus-icon {
    position: relative !important;
    inset: auto !important;

    display: block !important;

    width: 20px !important;
    max-width: 20px !important;

    height: auto !important;

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

    object-fit: contain !important;
    transform: none !important;
  }


  /* -------------------------------------------------------
     8. ARROWS BETWEEN STAGES

     Desktop arrows point horizontally.
     Rotate them downward on mobile.
     ------------------------------------------------------- */

  #about-attr-page
  #progressive-cont-1
  .alt-right-arrow {
    position: relative !important;
    inset: auto !important;
    float: none !important;

    display: block !important;

    width: 28px !important;
    max-width: 28px !important;

    height: auto !important;

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

    object-fit: contain !important;
    object-position: center !important;

    transform: rotate(90deg) !important;
    transform-origin: center !important;
  }

  /*
   * The final arrow after Mortality is not required.
   */
  #about-attr-page
  #progressive-cont-1
  .aboutattr-cards-container
  > .alt-right-arrow:last-child {
    display: none !important;
  }


 /* -------------------------------------------------------
   9. LAST TWO SECTIONS
   Polyneuropathy list + Active Screening callout
   ------------------------------------------------------- */

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

  /* =====================================================
     DIRECT AEM WRAPPERS
     ===================================================== */

  #about-attr-page
  #container-75cf52306c
  > .text:has(#text-c92be536b1),

  #about-attr-page
  #container-75cf52306c
  > .text:has(#text-2c89de61b7) {
    position: relative !important;
    inset: auto !important;
    float: none !important;
    clear: both !important;

    display: block !important;

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

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

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

    flex: none !important;
    flex-basis: 100% !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;

    box-sizing: border-box !important;
    overflow: visible !important;
    transform: none !important;
  }


  /* =====================================================
     POLYNEUROPATHY SECTION
     ===================================================== */

  #about-attr-page
  #container-75cf52306c
  #text-c92be536b1.cmp-text {
    position: relative !important;
    inset: auto !important;
    float: none !important;
    clear: both !important;

    display: block !important;

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

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

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

    color: #171717 !important;
    background: transparent !important;

    text-align: left !important;

    box-sizing: border-box !important;
    overflow: visible !important;
    transform: none !important;
  }

  /* Polyneuropathy heading */
  #about-attr-page
  #container-75cf52306c
  #text-c92be536b1.cmp-text
  > p:first-child {
    display: block !important;

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

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

    color: #171717 !important;
    background: transparent !important;

    font-family: inherit !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    font-style: normal !important;
    line-height: 1.25 !important;
    letter-spacing: 0 !important;

    text-align: left !important;
    text-transform: none !important;

    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;

    transform: none !important;
  }

  /* List wrapper */
  #about-attr-page
  #container-75cf52306c
  #text-c92be536b1.cmp-text
  > ul {
    position: relative !important;

    display: block !important;

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

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

    list-style: none !important;

    box-sizing: border-box !important;
    transform: none !important;
  }

  /* List items */
  #about-attr-page
  #container-75cf52306c
  #text-c92be536b1.cmp-text
  > ul
  > li {
    position: relative !important;
    inset: auto !important;

    display: block !important;

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

    height: auto !important;
    min-height: 0 !important;

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

    color: #171717 !important;
    background: transparent !important;

    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    font-style: normal !important;
    line-height: 1.23 !important;
    letter-spacing: 0 !important;

    text-align: left !important;
    text-transform: none !important;

    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;

    box-sizing: border-box !important;
    transform: none !important;
  }

  #about-attr-page
  #container-75cf52306c
  #text-c92be536b1.cmp-text
  > ul
  > li:last-child {
    margin-bottom: 0 !important;
  }

  /* Blue diamond bullet */
  #about-attr-page
  #container-75cf52306c
  #text-c92be536b1.cmp-text
  > ul
  > li::before {
    content: "✦" !important;

    position: absolute !important;
    top: 1px !important;
    left: 0 !important;

    display: block !important;

    width: 10px !important;
    height: auto !important;

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

    color: #6575d8 !important;

    font-size: 8px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;

    transform: none !important;
  }

  /* Bold text */
  #about-attr-page
  #container-75cf52306c
  #text-c92be536b1.cmp-text
  li
  strong,

  #about-attr-page
  #container-75cf52306c
  #text-c92be536b1.cmp-text
  li
  b {
    color: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
    font-weight: 700 !important;
  }

  /* References */
  #about-attr-page
  #container-75cf52306c
  #text-c92be536b1.cmp-text
  sup {
    position: relative !important;
    top: -0.35em !important;

    display: inline !important;

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

    color: inherit !important;

    font-size: 8px !important;
    font-weight: 400 !important;
    line-height: 0 !important;

    vertical-align: baseline !important;
  }


  /* =====================================================
     ACTIVE SCREENING CALLOUT
     ===================================================== */

  #about-attr-page
  #container-75cf52306c
  #text-2c89de61b7.cmp-text {
    position: relative !important;
    inset: auto !important;
    float: none !important;
    clear: both !important;

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

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

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 0 auto 20px !important;
    padding: 14px 14px 16px !important;

    color: #082d68 !important;
    background-color: #eef0fa !important;

    border: 1px solid #7d82ff !important;
    border-radius: 18px 18px 18px 0 !important;

    text-align: center !important;

    box-sizing: border-box !important;
    overflow: hidden !important;
    transform: none !important;
  }

  /* Lightbulb icon */
  #about-attr-page
  #container-75cf52306c
  #text-2c89de61b7.cmp-text::before {
    content: "" !important;

    position: relative !important;
    inset: auto !important;

    display: block !important;
    flex: 0 0 38px !important;

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

    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;

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

    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;

    visibility: visible !important;
    opacity: 1 !important;

    box-sizing: border-box !important;
    transform: none !important;
  }

  /* Callout paragraph */
  #about-attr-page
  #container-75cf52306c
  #text-2c89de61b7.cmp-text
  > p {
    position: relative !important;
    inset: auto !important;

    display: block !important;

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

    height: auto !important;
    min-height: 0 !important;

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

    color: #082d68 !important;
    background: transparent !important;

    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    font-style: normal !important;
    line-height: 1.17 !important;
    letter-spacing: 0 !important;

    text-align: center !important;
    text-transform: none !important;

    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;

    border: 0 !important;
    box-shadow: none !important;

    box-sizing: border-box !important;
    transform: none !important;
  }

  /* Reset nested callout text */
  #about-attr-page
  #container-75cf52306c
  #text-2c89de61b7.cmp-text
  > p
  span,

  #about-attr-page
  #container-75cf52306c
  #text-2c89de61b7.cmp-text
  > p
  strong,

  #about-attr-page
  #container-75cf52306c
  #text-2c89de61b7.cmp-text
  > p
  b,

  #about-attr-page
  #container-75cf52306c
  #text-2c89de61b7.cmp-text
  > p
  a {
    position: static !important;

    display: inline !important;

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

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

    color: inherit !important;
    background: transparent !important;

    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    font-style: normal !important;
    line-height: 1.17 !important;
    letter-spacing: 0 !important;

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

    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;

    border: 0 !important;
    box-shadow: none !important;
    transform: none !important;
  }

  #about-attr-page
  #container-75cf52306c
  #text-2c89de61b7.cmp-text
  .callout-line1 {
    display: inline !important;

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

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

    color: inherit !important;

    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.17 !important;

    text-align: center !important;

    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
  }

  /* Remove desktop forced line break */
  #about-attr-page
  #container-75cf52306c
  #text-2c89de61b7.cmp-text
  br {
    display: none !important;
  }

  /* Callout references */
  #about-attr-page
  #container-75cf52306c
  #text-2c89de61b7.cmp-text
  sup {
    position: relative !important;
    top: -0.35em !important;

    display: inline !important;

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

    color: inherit !important;

    font-size: 8px !important;
    font-weight: 700 !important;
    line-height: 0 !important;

    vertical-align: baseline !important;
  }
}

/* =========================================================
   ABOUT ATTR-CM SECTION — MOBILE
   Targets only #container-380ba759fc
   Keep this block at the end of about-attr.css
   ========================================================= */

/* =========================================================
   COMPLETE ATTR-CM MOBILE CSS
   Targets: #container-380ba759fc
   Replace all previous mobile CSS for this section
   ========================================================= */

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

  /* =====================================================
     1. OUTER ATTR-CM CONTAINER
     ===================================================== */

  #about-attr-page #container-380ba759fc {
    position: relative !important;
    inset: auto !important;
    float: none !important;
    clear: both !important;

    display: block !important;

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

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

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

    box-sizing: border-box !important;
    overflow: visible !important;

    flex: none !important;
    grid-template-columns: none !important;

    transform: none !important;
  }


  /* Every direct AEM text wrapper */
  #about-attr-page
  #container-380ba759fc
  > .text {
    position: relative !important;
    inset: auto !important;
    float: none !important;
    clear: both !important;

    display: block !important;

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

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

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

    box-sizing: border-box !important;
    overflow: visible !important;

    flex: none !important;
    flex-basis: 100% !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;

    transform: none !important;
  }


  /* Every inner AEM cmp-text wrapper */
  #about-attr-page
  #container-380ba759fc
  > .text
  > .cmp-text {
    position: relative !important;
    inset: auto !important;
    float: none !important;
    clear: both !important;

    display: block !important;

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

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

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

    box-sizing: border-box !important;
    overflow: visible !important;

    transform: none !important;
  }


  /* =====================================================
     2. ABOUT ATTR-CM HEADING
     ===================================================== */

  #about-attr-page
  #container-380ba759fc
  .container-attr-cm {
    position: relative !important;
    inset: auto !important;

    display: block !important;

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

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

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

    background: transparent !important;

    text-align: center !important;

    box-sizing: border-box !important;
    overflow: visible !important;

    transform: none !important;
  }


  #about-attr-page
  #container-380ba759fc
  .container-attr-cm
  .attr-life {
    position: relative !important;
    inset: auto !important;

    display: block !important;

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

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

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

    background: transparent !important;

    text-align: center !important;

    box-sizing: border-box !important;
    overflow: visible !important;

    transform: none !important;
  }


  #about-attr-page
  #container-380ba759fc
  .container-attr-cm
  .attr-life
  h3 {
    display: block !important;

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

    height: auto !important;
    min-height: 0 !important;

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

    color: #082c67 !important;
    background: transparent !important;

    font-family: inherit !important;
    font-size: 21px !important;
    font-weight: 700 !important;
    font-style: normal !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;

    text-align: center !important;
    text-transform: none !important;

    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;

    box-sizing: border-box !important;
    transform: none !important;
  }


  #about-attr-page
  #container-380ba759fc
  .container-attr-cm
  .attr-life
  p {
    display: block !important;

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

    height: auto !important;
    min-height: 0 !important;

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

    color: #082c67 !important;
    background: transparent !important;

    font-family: inherit !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    font-style: normal !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;

    text-align: center !important;
    text-transform: uppercase !important;

    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;

    box-sizing: border-box !important;
    transform: none !important;
  }


  #about-attr-page
  #container-380ba759fc
  .container-attr-cm
  .attr-life
  sup {
    position: relative !important;
    top: -0.35em !important;

    display: inline !important;

    margin-left: 1px !important;
    padding: 0 !important;

    color: inherit !important;

    font-size: 8px !important;
    line-height: 0 !important;

    vertical-align: baseline !important;
  }


  /* =====================================================
     3. ATTR-CM PROGRESSION CARD
     ===================================================== */

  #about-attr-page
  #container-380ba759fc
  .aboutattr-cards-container {
    position: relative !important;
    inset: auto !important;
    float: none !important;
    clear: both !important;

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

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

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 0 0 24px !important;
    padding: 22px 18px !important;

    background-color: #ffffff !important;

    border: 1px solid #7d8ded !important;
    border-radius: 26px 26px 26px 0 !important;

    box-shadow: 0 2px 10px rgba(12, 40, 90, 0.08) !important;

    box-sizing: border-box !important;
    overflow: hidden !important;

    flex: none !important;
    transform: none !important;
  }


  #about-attr-page
  #container-380ba759fc
  .aboutattr,

  #about-attr-page
  #container-380ba759fc
  .diagnosis-cards-items {
    position: relative !important;
    inset: auto !important;
    float: none !important;

    display: block !important;

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

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

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

    box-sizing: border-box !important;
    overflow: visible !important;

    flex: none !important;
    transform: none !important;
  }


  /* =====================================================
     4. INDIVIDUAL STAGE CARDS
     ===================================================== */

  #about-attr-page
  #container-380ba759fc
  .steps-card {
    position: relative !important;
    inset: auto !important;
    float: none !important;
    clear: both !important;

    display: block !important;

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

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

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

    background: transparent !important;

    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    box-sizing: border-box !important;
    overflow: visible !important;

    flex: none !important;
    transform: none !important;
  }


  #about-attr-page
  #container-380ba759fc
  .steps-card-icon {
    position: relative !important;
    inset: auto !important;

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

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

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

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

    text-align: center !important;

    box-sizing: border-box !important;
    overflow: visible !important;

    flex: none !important;
    transform: none !important;
  }


  /* =====================================================
     5. STAGE IMAGES
     ===================================================== */

  #about-attr-page
  #container-380ba759fc
  .steps-icon {
    position: relative !important;
    inset: auto !important;

    display: block !important;

    width: auto !important;
    max-width: 120px !important;

    height: auto !important;
    max-height: 145px !important;

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

    object-fit: contain !important;
    object-position: center !important;

    flex: none !important;
    transform: none !important;
  }


  #about-attr-page
  #container-380ba759fc
  .steps-icon[alt*="Stage A"],

  #about-attr-page
  #container-380ba759fc
  .steps-icon[alt*="STAGE A"],

  #about-attr-page
  #container-380ba759fc
  .steps-icon[alt*="Extra-cardiac"] {
    max-width: 95px !important;
    max-height: 135px !important;
  }


  #about-attr-page
  #container-380ba759fc
  .steps-icon[alt*="heart" i],

  #about-attr-page
  #container-380ba759fc
  .steps-icon[alt*="cardiac" i] {
    max-width: 115px !important;
    max-height: 135px !important;
  }


  #about-attr-page
  #container-380ba759fc
  .steps-icon.attr {
    max-width: 165px !important;
    max-height: 90px !important;
  }


  /* =====================================================
     6. STAGE TEXT
     ===================================================== */

  #about-attr-page
  #container-380ba759fc
  .steps-title,

  #about-attr-page
  #container-380ba759fc
  .steps-title2 {
    position: relative !important;
    inset: auto !important;

    display: block !important;

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

    height: auto !important;
    min-height: 0 !important;

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

    color: #082c67 !important;
    background: transparent !important;

    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    font-style: normal !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;

    text-align: center !important;
    text-transform: none !important;

    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;

    box-sizing: border-box !important;
    transform: none !important;
  }


  #about-attr-page
  #container-380ba759fc
  .stage-label {
    margin-top: 0 !important;
    margin-bottom: 6px !important;

    color: #6973ff !important;

    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;

    text-transform: uppercase !important;
  }


  #about-attr-page
  #container-380ba759fc
  .stage-label
  + .steps-title {
    margin-top: 0 !important;
    margin-bottom: 8px !important;
  }


  #about-attr-page
  #container-380ba759fc
  .steps-title2 {
    margin-top: 7px !important;
    margin-bottom: 0 !important;
  }


  #about-attr-page
  #container-380ba759fc
  .steps-title
  sup,

  #about-attr-page
  #container-380ba759fc
  .steps-title2
  sup,

  #about-attr-page
  #container-380ba759fc
  .suptxt-abt {
    position: relative !important;
    top: -0.35em !important;

    display: inline !important;

    margin-left: 1px !important;
    padding: 0 !important;

    color: inherit !important;

    font-size: 8px !important;
    line-height: 0 !important;

    vertical-align: baseline !important;
  }


  /* =====================================================
     7. PLUS ICONS
     ===================================================== */

  #about-attr-page
  #container-380ba759fc
  .steps-plus-icon {
    position: relative !important;
    inset: auto !important;

    display: block !important;

    width: 20px !important;
    max-width: 20px !important;

    height: auto !important;
    max-height: 20px !important;

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

    object-fit: contain !important;
    object-position: center !important;

    transform: none !important;
  }


  /* =====================================================
     8. ARROWS BETWEEN STAGES
     ===================================================== */

  #about-attr-page
  #container-380ba759fc
  .alt-right-arrow {
    position: relative !important;
    inset: auto !important;
    float: none !important;

    display: block !important;

    width: 28px !important;
    max-width: 28px !important;

    height: auto !important;

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

    object-fit: contain !important;
    object-position: center !important;

    transform: rotate(90deg) !important;
    transform-origin: center !important;
  }


  #about-attr-page
  #container-380ba759fc
  .aboutattr-cards-container
  > .alt-right-arrow:last-child,

  #about-attr-page
  #container-380ba759fc
  .diagnosis-cards-items
  > .alt-right-arrow:last-child {
    display: none !important;
  }


  /* =====================================================
     9. CARDIAC AMYLOIDOSIS COPY SECTION
     Second-last direct .text element
     ===================================================== */

  #about-attr-page
  #container-380ba759fc
  > .text:nth-last-child(2) {
    position: relative !important;
    inset: auto !important;
    float: none !important;
    clear: both !important;

    display: block !important;

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

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

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

    box-sizing: border-box !important;
    overflow: visible !important;

    flex: none !important;
    transform: none !important;
  }


  #about-attr-page
  #container-380ba759fc
  > .text:nth-last-child(2)
  > .cmp-text {
    position: relative !important;
    inset: auto !important;

    display: block !important;

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

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

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

    color: #171717 !important;
    background: transparent !important;

    text-align: left !important;

    box-sizing: border-box !important;
    overflow: visible !important;

    transform: none !important;
  }


  #about-attr-page
  #container-380ba759fc
  > .text:nth-last-child(2)
  > .cmp-text
  > p {
    position: relative !important;
    inset: auto !important;

    display: block !important;

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

    height: auto !important;
    min-height: 0 !important;

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

    color: #171717 !important;
    background: transparent !important;

    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    font-style: normal !important;
    line-height: 1.28 !important;
    letter-spacing: 0 !important;

    text-align: left !important;
    text-transform: none !important;

    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;

    border: 0 !important;
    box-shadow: none !important;

    box-sizing: border-box !important;
    transform: none !important;
  }


  #about-attr-page
  #container-380ba759fc
  > .text:nth-last-child(2)
  > .cmp-text
  > p:first-child {
    margin-bottom: 8px !important;

    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
  }


  #about-attr-page
  #container-380ba759fc
  > .text:nth-last-child(2)
  > .cmp-text
  p
  span,

  #about-attr-page
  #container-380ba759fc
  > .text:nth-last-child(2)
  > .cmp-text
  p
  a {
    color: inherit !important;
    background: transparent !important;

    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    font-style: inherit !important;
    line-height: inherit !important;
    letter-spacing: inherit !important;

    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;

    text-decoration: none !important;
    transform: none !important;
  }


  #about-attr-page
  #container-380ba759fc
  > .text:nth-last-child(2)
  > .cmp-text
  strong,

  #about-attr-page
  #container-380ba759fc
  > .text:nth-last-child(2)
  > .cmp-text
  b {
    color: inherit !important;

    font-size: inherit !important;
    font-weight: 700 !important;
    line-height: inherit !important;
  }


  /* Cardiac symptom list */
  #about-attr-page
  #container-380ba759fc
  > .text:nth-last-child(2)
  > .cmp-text
  > ul {
    position: relative !important;

    display: block !important;

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

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

    list-style: none !important;

    box-sizing: border-box !important;
    transform: none !important;
  }


  #about-attr-page
  #container-380ba759fc
  > .text:nth-last-child(2)
  > .cmp-text
  > ul
  > li {
    position: relative !important;
    inset: auto !important;

    display: block !important;

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

    height: auto !important;
    min-height: 0 !important;

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

    color: #171717 !important;
    background: transparent !important;

    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    font-style: normal !important;
    line-height: 1.28 !important;
    letter-spacing: 0 !important;

    text-align: left !important;
    text-transform: none !important;

    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;

    box-sizing: border-box !important;
    transform: none !important;
  }


  #about-attr-page
  #container-380ba759fc
  > .text:nth-last-child(2)
  > .cmp-text
  > ul
  > li::before {
    content: "✦" !important;

    position: absolute !important;
    top: 2px !important;
    left: 0 !important;

    display: block !important;

    color: #6675d9 !important;

    font-size: 8px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
  }


  #about-attr-page
  #container-380ba759fc
  > .text:nth-last-child(2)
  > .cmp-text
  > ul
  > li:last-child {
    margin-bottom: 0 !important;
  }


  #about-attr-page
  #container-380ba759fc
  > .text:nth-last-child(2)
  > .cmp-text
  sup {
    position: relative !important;
    top: -0.35em !important;

    display: inline !important;

    margin-left: 1px !important;
    padding: 0 !important;

    color: inherit !important;

    font-size: 8px !important;
    line-height: 0 !important;

    vertical-align: baseline !important;
  }


 /* =====================================================
   10. ATTR SHOULD BE SUSPECTED CALLOUT
   Single border + bulb above heading
   ===================================================== */

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

  /* Outer AEM wrapper */
  #about-attr-page
  #container-380ba759fc
  > .text:last-child {
    position: relative !important;
    inset: auto !important;
    float: none !important;
    clear: both !important;

    display: block !important;

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

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

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

    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    box-sizing: border-box !important;
    overflow: visible !important;

    flex: none !important;
    transform: none !important;
  }

  /*
   * Only this element receives the callout background
   * and border.
   */
  #about-attr-page
  #container-380ba759fc
  > .text:last-child
  > .cmp-text {
    position: relative !important;
    inset: auto !important;
    float: none !important;
    clear: both !important;

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

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

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 0 auto 20px !important;
    padding: 18px 16px 20px !important;

    color: #082d68 !important;
    background-color: #eef0fa !important;

    border: 1px solid #7d82ff !important;
    border-radius: 18px 18px 18px 0 !important;

    box-shadow: none !important;

    text-align: center !important;

    box-sizing: border-box !important;
    overflow: visible !important;

    transform: none !important;
  }

  /*
   * Remove the second border/background from every nested
   * authored wrapper inside the callout.
   */
  #about-attr-page
  #container-380ba759fc
  > .text:last-child
  > .cmp-text
  > div,

  #about-attr-page
  #container-380ba759fc
  > .text:last-child
  > .cmp-text
  > section,

  #about-attr-page
  #container-380ba759fc
  > .text:last-child
  > .cmp-text
  > article {
    position: relative !important;
    inset: auto !important;

    display: block !important;

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

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

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

    color: inherit !important;
    background: transparent !important;

    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    box-sizing: border-box !important;
    overflow: visible !important;

    transform: none !important;
  }

  /*
   * Remove any nested pseudo-element that may be creating
   * the second rounded box.
   */
  #about-attr-page
  #container-380ba759fc
  > .text:last-child
  > .cmp-text
  > div::before,

  #about-attr-page
  #container-380ba759fc
  > .text:last-child
  > .cmp-text
  > div::after {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  /*
   * Do not generate an additional bulb.
   * The authored bulb image will be used.
   */
  #about-attr-page
  #container-380ba759fc
  > .text:last-child
  > .cmp-text::before,

  #about-attr-page
  #container-380ba759fc
  > .text:last-child
  > .cmp-text::after {
    content: none !important;
    display: none !important;
  }

  /* =====================================================
     BULB IMAGE
     ===================================================== */

  #about-attr-page
  #container-380ba759fc
  > .text:last-child
  > .cmp-text
  img {
    position: relative !important;
    inset: auto !important;

    display: block !important;

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

    height: auto !important;
    max-height: 38px !important;

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

    object-fit: contain !important;
    object-position: center !important;

    float: none !important;
    vertical-align: middle !important;

    transform: none !important;
  }

  /*
   * The bulb appears inside the heading paragraph in your
   * current markup. Stack the image above the text.
   */
  #about-attr-page
  #container-380ba759fc
  > .text:last-child
  > .cmp-text
  > p:first-child {
    position: relative !important;
    inset: auto !important;

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

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

    height: auto !important;
    min-height: 0 !important;

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

    color: #082d68 !important;
    background: transparent !important;

    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    font-family: inherit !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    font-style: normal !important;
    line-height: 1.15 !important;
    letter-spacing: 0 !important;

    text-align: center !important;
    text-transform: none !important;

    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;

    box-sizing: border-box !important;
    transform: none !important;
  }

  /* Reset nested heading text */
  #about-attr-page
  #container-380ba759fc
  > .text:last-child
  > .cmp-text
  > p:first-child
  span,

  #about-attr-page
  #container-380ba759fc
  > .text:last-child
  > .cmp-text
  > p:first-child
  strong,

  #about-attr-page
  #container-380ba759fc
  > .text:last-child
  > .cmp-text
  > p:first-child
  b {
    display: inline !important;

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

    color: inherit !important;
    background: transparent !important;

    font-family: inherit !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;

    text-align: center !important;

    border: 0 !important;
    box-shadow: none !important;
  }

  /* =====================================================
     CALLOUT LIST
     ===================================================== */

  #about-attr-page
  #container-380ba759fc
  > .text:last-child
  > .cmp-text
  > ul {
    position: relative !important;

    display: block !important;

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

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

    background: transparent !important;

    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    list-style: none !important;

    text-align: left !important;

    box-sizing: border-box !important;
    transform: none !important;
  }

  #about-attr-page
  #container-380ba759fc
  > .text:last-child
  > .cmp-text
  > ul
  > li {
    position: relative !important;
    inset: auto !important;

    display: block !important;

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

    height: auto !important;
    min-height: 0 !important;

    margin: 0 0 12px !important;
    padding: 0 0 0 15px !important;

    color: #082d68 !important;
    background: transparent !important;

    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    font-style: normal !important;
    line-height: 1.28 !important;
    letter-spacing: 0 !important;

    text-align: left !important;
    text-transform: none !important;

    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;

    box-sizing: border-box !important;
    transform: none !important;
  }

  #about-attr-page
  #container-380ba759fc
  > .text:last-child
  > .cmp-text
  > ul
  > li::before {
    content: "•" !important;

    position: absolute !important;
    top: 0 !important;
    left: 0 !important;

    display: block !important;

    color: #082d68 !important;

    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
  }

  #about-attr-page
  #container-380ba759fc
  > .text:last-child
  > .cmp-text
  > ul
  > li:last-child {
    margin-bottom: 0 !important;
  }

  /* Reset nested list text */
  #about-attr-page
  #container-380ba759fc
  > .text:last-child
  > .cmp-text
  > ul
  > li
  span,

  #about-attr-page
  #container-380ba759fc
  > .text:last-child
  > .cmp-text
  > ul
  > li
  strong,

  #about-attr-page
  #container-380ba759fc
  > .text:last-child
  > .cmp-text
  > ul
  > li
  b {
    color: inherit !important;

    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;

    text-align: inherit !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  /* Superscript references */
  #about-attr-page
  #container-380ba759fc
  > .text:last-child
  > .cmp-text
  sup {
    position: relative !important;
    top: -0.35em !important;

    display: inline !important;

    margin-left: 1px !important;
    padding: 0 !important;

    color: inherit !important;

    font-size: 8px !important;
    font-weight: 700 !important;
    line-height: 0 !important;

    vertical-align: baseline !important;
  }

  /*
   * Let mobile copy wrap naturally.
   */
  #about-attr-page
  #container-380ba759fc
  > .text:last-child
  > .cmp-text
  br {
    display: none !important;
  }
}


  /* =====================================================
     11. RESPONSIVE IMAGES
     ===================================================== */

  #about-attr-page
  #container-380ba759fc
  img {
    height: auto !important;

    object-fit: contain !important;
    object-position: center !important;
  }


  /* =====================================================
     12. REMOVE DESKTOP INLINE DIMENSIONS
     ===================================================== */

  #about-attr-page
  #container-380ba759fc
  [style*="width"] {
    min-width: 0 !important;
  }


  #about-attr-page
  #container-380ba759fc
  [style*="height"],

  #about-attr-page
  #container-380ba759fc
  [style*="min-height"] {
    min-height: 0 !important;
    max-height: none !important;
  }
}


/* =========================================================
   ATTR CTA SECTION — COMPLETE MOBILE CSS
   Container: #container-3c273b57ba
   Component: #text-a301e56879
   Replace previous mobile CSS for:
   .attr-cta-section
   .attr-cta-wrap
   .attr-cta-card
   ========================================================= */

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

  /* =====================================================
     1. OUTER AEM CONTAINER
     ===================================================== */

  #about-attr-page #container-3c273b57ba {
    position: relative !important;
    inset: auto !important;
    float: none !important;
    clear: both !important;

    display: block !important;

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

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

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

    background: transparent !important;

    box-sizing: border-box !important;
    overflow: visible !important;

    transform: none !important;
  }

  #about-attr-page
  #container-3c273b57ba
  > .text {
    position: relative !important;
    inset: auto !important;
    float: none !important;
    clear: both !important;

    display: block !important;

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

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

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

    box-sizing: border-box !important;
    overflow: visible !important;

    flex: none !important;
    transform: none !important;
  }

  #about-attr-page #text-a301e56879 {
    position: relative !important;
    inset: auto !important;

    display: block !important;

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

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

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

    box-sizing: border-box !important;
    overflow: visible !important;

    transform: none !important;
  }


  /* =====================================================
     2. OPTIONAL BLACK STRIP
     ===================================================== */

  #about-attr-page
  #text-a301e56879
  .black-strip {
    display: block !important;

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

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

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

    background-color: #000000 !important;

    box-sizing: border-box !important;
    overflow: hidden !important;
  }


  /* =====================================================
     3. MAIN CTA SECTION
     ===================================================== */

  

  /*
   * If attr-cta-section and attr-cta-wrap are classes
   * on the same element, this prevents duplicate styling
   * problems.
   */
  


  /* =====================================================
     4. CTA CARDS
     ===================================================== */

  

  /*
   * Remove desktop dimensions from direct children.
   */
  


  /* =====================================================
     5. CARD IMAGE / ICON
     ===================================================== */

  

  /*
   * Make the triangular second image slightly larger.
   */
  


  /* =====================================================
     6. CARD TEXT WRAPPERS
     ===================================================== */

  


  /* =====================================================
     7. CARD TEXT
     ===================================================== */

  

  

  

  


  /* =====================================================
     8. CTA BUTTONS
     ===================================================== */

  

  /*
   * Reset text nested inside the CTA button.
   */
  


  /* =====================================================
     9. REMOVE DESKTOP PSEUDO-ELEMENT LAYOUT
     ===================================================== */

  


  /* =====================================================
     10. RESPONSIVE FIX FOR VERY SMALL SCREENS
     ===================================================== */

  
}
}


/* =========================================================
   FINAL OVERRIDE: MIXED-PHENOTYPE BOTTOM BANNER
   Added 15-Jul-2026
   Updated: responsive background-image (desktop-update assets)
   ========================================================= */

/* Base rule: layout/position only, no background-image here.
   Image is now assigned per breakpoint below. */
#about-attr-page .treatment-diagnosis-banner {
  position: relative;
  top: auto;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;

  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important;

  /* No fixed height: height is generated by the content */
  min-height: 0;
  height: 397px;
  

  box-shadow: inset 0 -50px 36px -15px rgba(0, 0, 0, 0.9);
}

/* Desktop (1001px and above) */
@media screen and (min-width: 1001px) {
  #about-attr-page .treatment-diagnosis-banner {
    background-image: url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/internal_sky-header-desktop.jpg") !important;
  }
}

/* Mobile / tablet (1000px and below) */
@media screen and (max-width: 1000px) {
  #about-attr-page .treatment-diagnosis-banner {
    background-image: url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/internal_sky-header-mobile.jpg") !important;
  }
}

/* Keep the usable content width centred within the full-width banner */
#about-attr-page .treatment-diagnosis-banner .container-about-attr {
  width: 100%;
  max-width: 1265px;
  margin-right: auto;
  margin-left: auto;
  padding: 0 36px;
  box-sizing: border-box;
}

/* Move the two bottom blocks to the right, leaving the person visible on the left */
#about-attr-page .treatment-diagnosis-banner .galaxcy-div {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center;
  gap: 30px;
  width: 100%;
  max-width: 1265px;
  margin: 0 auto;
  padding: 0 18px 0 300px;
  box-sizing: border-box;
}

/* Equal-width blocks */
#about-attr-page .treatment-diagnosis-banner .galaxy-ptag,
#about-attr-page .treatment-diagnosis-banner .galaxy-ptag1 {
  flex: 1 1 0;
  width: auto;
  max-width: 420px;
  margin: 0;
  box-sizing: border-box;
}

/* Remove old offsets from the inner cards */
#about-attr-page .treatment-diagnosis-banner .galaxy-mobile,
#about-attr-page .treatment-diagnosis-banner .galaxy-mobile1 {
  width: 100%;
  max-width: none;
  margin-right: 0;
  margin-left: 0;
  box-sizing: border-box;
}

/* Medium desktop/tablet */
@media screen and (min-width: 992px) and (max-width: 1199px) {
  #about-attr-page .treatment-diagnosis-banner {
    padding: 60px 0 85px;
    background-position: center center !important;
  }

  #about-attr-page .treatment-diagnosis-banner .galaxcy-div {
    gap: 24px;
    padding-right: 24px;
    padding-left: 235px;
  }

  #about-attr-page .treatment-diagnosis-banner .galaxy-ptag,
  #about-attr-page .treatment-diagnosis-banner .galaxy-ptag1 {
    max-width: 390px;
  }
}

/* Tablet and mobile */
@media screen and (max-width: 991px) {
  #about-attr-page .treatment-diagnosis-banner {
    height: auto;
    min-height: 0;
    padding: 44px 20px 60px;
    background-position: 28% center !important;
    background-size: cover !important;
  }

  #about-attr-page .treatment-diagnosis-banner .container-about-attr {
    max-width: 100%;
    padding: 0;
  }

  #about-attr-page .treatment-diagnosis-banner .galaxcy-div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    max-width: 100%;
    padding: 0;
  }

  #about-attr-page .treatment-diagnosis-banner .galaxy-ptag,
  #about-attr-page .treatment-diagnosis-banner .galaxy-ptag1 {
    flex: none;
    width: 100%;
    max-width: 420px;
    height: auto;
    margin: 0;
  }
}

@media screen and (max-width: 480px) {
  #about-attr-page .treatment-diagnosis-banner {
    padding: 34px 16px 48px;
    background-position: 24% center !important;
  }

  #about-attr-page .treatment-diagnosis-banner .galaxcy-div {
    gap: 20px;
  }

  #about-attr-page .treatment-diagnosis-banner .galaxy-ptag,
  #about-attr-page .treatment-diagnosis-banner .galaxy-ptag1 {
    max-width: 342px;
  }
}


/* ============================================================================
   FRENCH PAGE — COMPLETE STRUCTURAL OVERRIDES
   Added 16-Jul-2026

   IMPORTANT:
   - French only: html[lang^="fr"]
   - Does not change the English page.
   - Uses stable inner IDs/classes instead of French AEM-generated container IDs.
   - Keep this entire block at the very end of about-attr.css.
   ============================================================================ */

html[lang^="fr"] body#about-attr-page {
  --fr-nav-width: 224px;
  --fr-nav-gap: 14px;
  --fr-content-offset: calc(var(--fr-nav-width) + var(--fr-nav-gap));
  --fr-page-width: 1265px;
  --fr-content-width: 1001px;
}

/* ============================================================================
   DESKTOP — 992px AND ABOVE
   ============================================================================ */
@media screen and (min-width: 992px) {

  /* --------------------------------------------------------------------------
     1. PATHOPHYSIOLOGY: sidebar + heading + first diagram
     Detect the correct French AEM wrapper from stable inner content.
     -------------------------------------------------------------------------- */
  html[lang^="fr"] body#about-attr-page
  .cmp-container:has(> .text #this-page):has(> .text #content-sec-1):has(> .text #about-cards-1) {
    display: grid !important;
    grid-template-columns: var(--fr-nav-width) minmax(0, 1fr) !important;
    grid-template-areas:
      "fr-nav fr-heading"
      "fr-nav fr-source" !important;
    column-gap: var(--fr-nav-gap) !important;
    row-gap: 0 !important;
    align-items: start !important;
    width: 100% !important;
    max-width: var(--fr-page-width) !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background: #FAFAFA !important;
    box-sizing: border-box !important;
  }

  html[lang^="fr"] body#about-attr-page
  .aem-GridColumn:has(> .cmp-container > .text #this-page):has(.cmp-container > .text #content-sec-1) {
    width: 100% !important;
    background: #FAFAFA !important;
  }

  html[lang^="fr"] body#about-attr-page
  .cmp-container:has(> .text #this-page):has(> .text #content-sec-1):has(> .text #about-cards-1)
  > .text:has(#this-page) {
    grid-area: fr-nav !important;
    width: var(--fr-nav-width) !important;
    max-width: var(--fr-nav-width) !important;
    min-width: var(--fr-nav-width) !important;
    margin: 0 !important;
    padding: 0 !important;
    align-self: stretch !important;
    box-sizing: border-box !important;
  }

  html[lang^="fr"] body#about-attr-page
  .cmp-container:has(> .text #this-page):has(> .text #content-sec-1):has(> .text #about-cards-1)
  > .text:has(#content-sec-1) {
    grid-area: fr-heading !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  html[lang^="fr"] body#about-attr-page
  .cmp-container:has(> .text #this-page):has(> .text #content-sec-1):has(> .text #about-cards-1)
  > .text:has(#about-cards-1) {
    grid-area: fr-source !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  /* Sidebar visible card */
  html[lang^="fr"] body#about-attr-page
  .cmp-container:has(> .text #this-page):has(> .text #content-sec-1):has(> .text #about-cards-1)
  > .text:has(#this-page) .aboutattr-cards-container {
    position: sticky !important;
    top: 20px !important;
    display: block !important;
    width: var(--fr-nav-width) !important;
    max-width: var(--fr-nav-width) !important;
    min-width: var(--fr-nav-width) !important;
    height: auto !important;
    min-height: 352px !important;
    margin: 0 !important;
    padding: 30px 24px !important;
    background: #E9EBF2 !important;
    border: 0 !important;
    border-radius: 0 0 25px 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  html[lang^="fr"] body#about-attr-page
  .cmp-container:has(> .text #this-page):has(> .text #content-sec-1):has(> .text #about-cards-1)
  > .text:has(#this-page) .aboutattr-cards-container::before,
  html[lang^="fr"] body#about-attr-page
  .cmp-container:has(> .text #this-page):has(> .text #content-sec-1):has(> .text #about-cards-1)
  > .text:has(#this-page) .aboutattr-cards-container::after {
    content: none !important;
    display: none !important;
  }

  html[lang^="fr"] body#about-attr-page
  .cmp-container:has(> .text #this-page):has(> .text #content-sec-1):has(> .text #about-cards-1)
  > .text:has(#this-page) .diagnosis-cards-items {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  html[lang^="fr"] body#about-attr-page
  .cmp-container:has(> .text #this-page):has(> .text #content-sec-1):has(> .text #about-cards-1)
  > .text:has(#this-page) .steps-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
  }

  html[lang^="fr"] body#about-attr-page
  .cmp-container:has(> .text #this-page):has(> .text #content-sec-1):has(> .text #about-cards-1)
  > .text:has(#this-page) .steps-card-icon {
    position: static !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #00215F !important;
    font-family: Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: normal !important;
    line-height: 18px !important;
    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    transform: none !important;
    box-sizing: border-box !important;
  }

  html[lang^="fr"] body#about-attr-page
  .cmp-container:has(> .text #this-page):has(> .text #content-sec-1):has(> .text #about-cards-1)
  > .text:has(#this-page) .steps-card-icon:first-child {
    margin-bottom: 2px !important;
    font-family: "Kanit-SemiBold" !important;
    font-size: 21px !important;
    line-height: 21px !important;
    text-transform: uppercase !important;
  }

  html[lang^="fr"] body#about-attr-page
  .cmp-container:has(> .text #this-page):has(> .text #content-sec-1):has(> .text #about-cards-1)
  > .text:has(#this-page) .steps-card-icon:nth-child(2) {

  }

  html[lang^="fr"] body#about-attr-page
  .cmp-container:has(> .text #this-page):has(> .text #content-sec-1):has(> .text #about-cards-1)
  > .text:has(#this-page) img,
  html[lang^="fr"] body#about-attr-page
  .cmp-container:has(> .text #this-page):has(> .text #content-sec-1):has(> .text #about-cards-1)
  > .text:has(#this-page) .alt-right-arrow {
    display: none !important;
  }

  /* Heading/content area */
  html[lang^="fr"] body#about-attr-page #content-sec-1 {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-sizing: border-box !important;
  }

  html[lang^="fr"] body#about-attr-page #content-sec-1 .container-about-attr {
    width: 100% !important;
    max-width: var(--fr-content-width) !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
  }

  html[lang^="fr"] body#about-attr-page #content-sec-1 .source-damage {
    width: 100% !important;
    max-width: 923px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  /* First diagram card */
  html[lang^="fr"] body#about-attr-page #about-cards-1 .aboutattr-cards-container {
    display: block !important;
    width: 100% !important;
    max-width: var(--fr-content-width) !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 20px auto 25px !important;
    padding: 0 !important;
    background: #FFFFFF !important;
    border: 1px solid #606FB4 !important;
    border-radius: 30px 30px 30px 0 !important;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.11) !important;
    box-sizing: border-box !important;
  }

  html[lang^="fr"] body#about-attr-page #about-cards-1 .diagnosis-cards-items {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    justify-content: center !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 18px 25px !important;
    box-sizing: border-box !important;
  }

  html[lang^="fr"] body#about-attr-page #about-cards-1 .steps-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html[lang^="fr"] body#about-attr-page #about-cards-1 .steps-card-icon {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  html[lang^="fr"] body#about-attr-page #about-cards-1 img.steps-icon,
  html[lang^="fr"] body#about-attr-page #about-cards-1 img.attr.steps-icon {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto 10px !important;
    padding: 0 !important;
  }

  html[lang^="fr"] body#about-attr-page #about-cards-1 img.alt-right-arrow {
    display: block !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: 34px !important;
    height: auto !important;
    margin: 48px 5px 0 !important;
    transform: none !important;
  }

  /* --------------------------------------------------------------------------
     2. AT-RISK CARD
     Detect wrapper from stable #about-cards-2 instead of an AEM container ID.
     -------------------------------------------------------------------------- */
  html[lang^="fr"] body#about-attr-page
  .cmp-container:has(> .text #about-cards-2) {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding: 0 !important;
    background: #FAFAFA !important;
    box-sizing: border-box !important;
  }

  html[lang^="fr"] body#about-attr-page
  .cmp-container:has(> .text #about-cards-2),
  html[lang^="fr"] body#about-attr-page
  .cmp-container:has(> .text #about-cards-2) > .text,
  html[lang^="fr"] body#about-attr-page
  .cmp-container:has(> .text #about-cards-2) > .aem-Grid {
    background: #FAFAFA !important;
  }

  html[lang^="fr"] body#about-attr-page
  .cmp-container:has(> .text #about-cards-2) > .text:has(#about-cards-2) {
    display: block !important;
    width: 100% !important;
    max-width: var(--fr-page-width) !important;
    margin: 0 auto !important;
    padding-left: var(--fr-content-offset) !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  html[lang^="fr"] body#about-attr-page #about-cards-2 {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  html[lang^="fr"] body#about-attr-page #about-cards-2 .aboutattr-cards-container {
    display: block !important;
    width: 100% !important;
    max-width: var(--fr-content-width) !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 auto 25px !important;
    padding: 24px 40px !important;
    background: #FFFFFF !important;
    border: 1px solid #606FB4 !important;
    border-radius: 30px 30px 30px 0 !important;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.11) !important;
    box-sizing: border-box !important;
  }

  html[lang^="fr"] body#about-attr-page #about-cards-2 .diagnosis-cards-items {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  html[lang^="fr"] body#about-attr-page #about-cards-2 .steps-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
  }

  html[lang^="fr"] body#about-attr-page #about-cards-2 .steps-card-icon {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
  }

  html[lang^="fr"] body#about-attr-page #about-cards-2 img.steps-icon,
  html[lang^="fr"] body#about-attr-page #about-cards-2 img.attr.steps-icon {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto 10px !important;
    padding: 0 !important;
  }

  /* --------------------------------------------------------------------------
     3. VIDEO SECTION
     -------------------------------------------------------------------------- */
  html[lang^="fr"] body#about-attr-page
  .cmp-container:has(.about-attr-video) {
    width: 100% !important;
    max-width: var(--fr-page-width) !important;
    margin: 0 auto !important;
    padding-left: var(--fr-content-offset) !important;
    padding-right: 0 !important;
    background: #FFFFFF !important;
    box-sizing: border-box !important;
  }

  html[lang^="fr"] body#about-attr-page
  .cmp-container:has(.about-attr-video) .about-attr-video {
    display: block !important;
    float: none !important;
    clear: both !important;
    width: 100% !important;
    max-width: var(--fr-content-width) !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  html[lang^="fr"] body#about-attr-page
  .cmp-container:has(.about-attr-video) .about-attr-video h3 {
    width: 100% !important;
    max-width: var(--fr-content-width) !important;
    margin: 0 auto 20px !important;
    padding-top: 43px !important;
    white-space: normal !important;
    text-align: center !important;
  }

  html[lang^="fr"] body#about-attr-page
  .cmp-container:has(.about-attr-video) .cmp-video__player {
    width: 100% !important;
    max-width: var(--fr-content-width) !important;
    margin: 0 auto !important;
    padding-left: 0 !important;
  }

  /* --------------------------------------------------------------------------
     4. ALL CONTENT BLOCKS BELOW THE DIAGRAMS
     Apply the same left offset as English, but only to the French page.
     Each wrapper is identified through a stable class inside it.
     -------------------------------------------------------------------------- */
  html[lang^="fr"] body#about-attr-page
  .cmp-container:has(.about-attr-hereity),
  html[lang^="fr"] body#about-attr-page
  .cmp-container:has(.about-attr-understand),
  html[lang^="fr"] body#about-attr-page
  .cmp-container:has(.understand-two-images),
  html[lang^="fr"] body#about-attr-page
  .cmp-container:has(.about-attr-systemetic),
  html[lang^="fr"] body#about-attr-page
  .cmp-container:has(.about-attr-prograss),
  html[lang^="fr"] body#about-attr-page
  .cmp-container:has(.attr-life),
  html[lang^="fr"] body#about-attr-page
  .cmp-container:has(.about-attr-connecting),
  html[lang^="fr"] body#about-attr-page
  .cmp-container:has(.about-mixed-hattr__heading),
  html[lang^="fr"] body#about-attr-page
  .cmp-container:has(.mixed-hattr-stat),
  html[lang^="fr"] body#about-attr-page
  .cmp-container:has(.patient-box),
  html[lang^="fr"] body#about-attr-page
  .cmp-container:has(.genetic-testing-callout) {
    width: 100% !important;
    max-width: var(--fr-page-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--fr-content-offset) !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* Normal inner content width for subsequent sections */
  html[lang^="fr"] body#about-attr-page .about-attr-hereity,
  html[lang^="fr"] body#about-attr-page .about-attr-understand,
  html[lang^="fr"] body#about-attr-page .understand-two-images,
  html[lang^="fr"] body#about-attr-page .about-attr-systemetic,
  html[lang^="fr"] body#about-attr-page .about-attr-prograss,
  html[lang^="fr"] body#about-attr-page .attr-life,
  html[lang^="fr"] body#about-attr-page .about-attr-connecting,
  html[lang^="fr"] body#about-attr-page .mixed-hattr-stat,
  html[lang^="fr"] body#about-attr-page .patient-box,
  html[lang^="fr"] body#about-attr-page .genetic-testing-callout {
    width: 100% !important;
    max-width: var(--fr-content-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  /* Keep the two large understanding cards side by side */
  html[lang^="fr"] body#about-attr-page .understand-two-images,
  html[lang^="fr"] body#about-attr-page .galaxcy-div,
  html[lang^="fr"] body#about-attr-page .progress-two-images,
  html[lang^="fr"] body#about-attr-page .patient-box {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: space-between !important;
    gap: 20px !important;
  }

  html[lang^="fr"] body#about-attr-page .understand-image-one,
  html[lang^="fr"] body#about-attr-page .understand-image-two,
  html[lang^="fr"] body#about-attr-page .galaxy-ptag,
  html[lang^="fr"] body#about-attr-page .galaxy-ptag1,
  html[lang^="fr"] body#about-attr-page .progress-img1,
  html[lang^="fr"] body#about-attr-page .progress-img2 {
    min-width: 0 !important;
    flex: 1 1 0 !important;
    box-sizing: border-box !important;
  }

  /* French text can be longer: allow cards to grow vertically */
  html[lang^="fr"] body#about-attr-page .galaxy-ptag,
  html[lang^="fr"] body#about-attr-page .galaxy-ptag1,
  html[lang^="fr"] body#about-attr-page .understand-image-one,
  html[lang^="fr"] body#about-attr-page .understand-image-two,
  html[lang^="fr"] body#about-attr-page .progress-image-one,
  html[lang^="fr"] body#about-attr-page .progress-image-two,
  html[lang^="fr"] body#about-attr-page .border-box {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  html[lang^="fr"] body#about-attr-page .galaxy-ptag,
  html[lang^="fr"] body#about-attr-page .galaxy-ptag1 {
    min-height: 328px !important;
  }

  /* Ensure French text wraps instead of overflowing */
  

  /* Full-width background/banner sections must remain full bleed */
  

  /* CTA cards: French text can wrap without changing English */
  

  
}


/* ============================================================================
   TABLET + MOBILE — COLLAPSE EVERYTHING INTO NORMAL FLOW
   ============================================================================ */
@media screen and (max-width: 991px) {

  html[lang^="fr"] body#about-attr-page
  .cmp-container:has(> .text #this-page):has(> .text #content-sec-1):has(> .text #about-cards-1),
  html[lang^="fr"] body#about-attr-page
  .cmp-container:has(> .text #about-cards-2),
  html[lang^="fr"] body#about-attr-page
  .cmp-container:has(.about-attr-video),
  html[lang^="fr"] body#about-attr-page
  .cmp-container:has(.about-attr-hereity),
  html[lang^="fr"] body#about-attr-page
  .cmp-container:has(.about-attr-understand),
  html[lang^="fr"] body#about-attr-page
  .cmp-container:has(.understand-two-images),
  html[lang^="fr"] body#about-attr-page
  .cmp-container:has(.about-attr-systemetic),
  html[lang^="fr"] body#about-attr-page
  .cmp-container:has(.about-attr-prograss),
  html[lang^="fr"] body#about-attr-page
  .cmp-container:has(.attr-life),
  html[lang^="fr"] body#about-attr-page
  .cmp-container:has(.about-attr-connecting),
  html[lang^="fr"] body#about-attr-page
  .cmp-container:has(.mixed-hattr-stat),
  html[lang^="fr"] body#about-attr-page
  .cmp-container:has(.patient-box),
  html[lang^="fr"] body#about-attr-page
  .cmp-container:has(.genetic-testing-callout) {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  html[lang^="fr"] body#about-attr-page
  .cmp-container:has(> .text #this-page):has(> .text #content-sec-1):has(> .text #about-cards-1)
  > .text {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  html[lang^="fr"] body#about-attr-page
  .cmp-container:has(> .text #this-page):has(> .text #content-sec-1):has(> .text #about-cards-1)
  > .text:has(#this-page) .aboutattr-cards-container {
    position: relative !important;
    top: auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
  }

  html[lang^="fr"] body#about-attr-page
  .cmp-container:has(> .text #about-cards-2) > .text:has(#about-cards-2) {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  html[lang^="fr"] body#about-attr-page
  .cmp-container:has(.about-attr-video) .about-attr-video,
  html[lang^="fr"] body#about-attr-page
  .cmp-container:has(.about-attr-video) .cmp-video__player {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-left: 0 !important;
  }

  html[lang^="fr"] body#about-attr-page .understand-two-images,
  html[lang^="fr"] body#about-attr-page .galaxcy-div,
  html[lang^="fr"] body#about-attr-page .progress-two-images,
  html[lang^="fr"] body#about-attr-page .patient-box {
    display: block !important;
    width: 100% !important;
  }

  html[lang^="fr"] body#about-attr-page .galaxy-ptag,
  html[lang^="fr"] body#about-attr-page .galaxy-ptag1,
  html[lang^="fr"] body#about-attr-page .understand-image-one,
  html[lang^="fr"] body#about-attr-page .understand-image-two,
  html[lang^="fr"] body#about-attr-page .progress-image-one,
  html[lang^="fr"] body#about-attr-page .progress-image-two,
  html[lang^="fr"] body#about-attr-page .border-box {
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
}


/* ============================================================================
   SMALL MOBILE — EXTRA FRENCH TEXT SAFETY
   ============================================================================ */
@media screen and (max-width: 480px) {

  html[lang^="fr"] body#about-attr-page,
  html[lang^="fr"] body#about-attr-page .cmp-container,
  html[lang^="fr"] body#about-attr-page .cmp-text,
  html[lang^="fr"] body#about-attr-page .text {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  html[lang^="fr"] body#about-attr-page .galaxy-ptag,
  html[lang^="fr"] body#about-attr-page .galaxy-ptag1 {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  html[lang^="fr"] body#about-attr-page p,
  html[lang^="fr"] body#about-attr-page li,
  html[lang^="fr"] body#about-attr-page h2,
  html[lang^="fr"] body#about-attr-page h3,
  html[lang^="fr"] body#about-attr-page h4,
  html[lang^="fr"] body#about-attr-page span,
  html[lang^="fr"] body#about-attr-page a {
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    box-sizing: border-box !important;
  }
}

/* ========================= END FRENCH OVERRIDES ========================= */

/* ========================================================================
   FINAL FR RESPONSIVE FIXES — SIDEBAR, CALLOUTS, LAPTOP, TABLET AND MOBILE
   Keep this block at the very end of the file.
   ======================================================================== */

html[lang^="fr"] body#about-attr-page {
  --fr-sidebar-width: 224px;
  --fr-sidebar-gap: 14px;
  --fr-callout-icon: url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/lightbulb%20icon%20gradient_1.png");
}

/* ---------- Use the same bulb asset for every callout ---------- */
html[lang^="fr"] body#about-attr-page .genetic-testing-callout__icon,
html[lang^="fr"] body#about-attr-page #text-a798dda2f0 .attr-suspected-icon-wrap {
  width: 32px !important;
  min-width: 32px !important;
  height: 32px !important;
  flex: 0 0 32px !important;
  background-image: var(--fr-callout-icon) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
}

html[lang^="fr"] body#about-attr-page .genetic-testing-callout__icon img,
html[lang^="fr"] body#about-attr-page #text-a798dda2f0 .attr-suspected-icon {
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

html[lang^="fr"] body#about-attr-page #text-2c89de61b7::before {
  width: 32px !important;
  height: 32px !important;
  background-image: var(--fr-callout-icon) !important;
  background-position: center !important;
  background-size: contain !important;
}

html[lang^="fr"] body#about-attr-page .genetic-testing-callout,
html[lang^="fr"] body#about-attr-page #text-2c89de61b7,
html[lang^="fr"] body#about-attr-page #text-a798dda2f0 .attr-suspected-box {
  width: 100% !important;
  max-width: 1001px !important;
  min-height: 0 !important;
  height: auto !important;
  box-sizing: border-box !important;
}

html[lang^="fr"] body#about-attr-page #text-2c89de61b7 .callout-line1 {
  white-space: normal !important;
  overflow-wrap: break-word !important;
}

/* ---------- Desktop and laptop: force sidebar to render ---------- */
@media screen and (min-width: 992px) {
  html[lang^="fr"] body#about-attr-page #container-2a2a9d56d1 {
    display: grid !important;
    grid-template-columns: var(--fr-sidebar-width) minmax(0, 1fr) !important;
    grid-template-areas:
      "nav text"
      "nav diagram" !important;
    column-gap: var(--fr-sidebar-gap) !important;
    align-items: start !important;
    overflow: visible !important;
  }

  html[lang^="fr"] body#about-attr-page #container-2a2a9d56d1 > .text:has(#this-page) {
    display: block !important;
    grid-area: nav !important;
    width: var(--fr-sidebar-width) !important;
    min-width: var(--fr-sidebar-width) !important;
    max-width: var(--fr-sidebar-width) !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 5 !important;
  }

  html[lang^="fr"] body#about-attr-page #container-2a2a9d56d1 > .text:has(#this-page) #this-page,
  html[lang^="fr"] body#about-attr-page #container-2a2a9d56d1 > .text:has(#this-page) .aboutattr-cards-container {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  html[lang^="fr"] body#about-attr-page #container-2a2a9d56d1 > .text:has(#this-page) .aboutattr-cards-container {
    position: sticky !important;
    top: 20px !important;
    width: var(--fr-sidebar-width) !important;
    min-width: var(--fr-sidebar-width) !important;
    max-width: var(--fr-sidebar-width) !important;
    height: auto !important;
    min-height: 352px !important;
    padding: 28px 22px !important;
    overflow: visible !important;
  }

  html[lang^="fr"] body#about-attr-page #container-2a2a9d56d1 > .text:has(#content-sec-1) {
    grid-area: text !important;
    min-width: 0 !important;
  }

  html[lang^="fr"] body#about-attr-page #container-2a2a9d56d1 > .text:has(#about-cards-1) {
    grid-area: diagram !important;
    min-width: 0 !important;
  }
}

/* Smaller laptops: preserve sidebar and reduce crowding */
@media screen and (min-width: 992px) and (max-width: 1279px) {
  html[lang^="fr"] body#about-attr-page {
    --fr-sidebar-width: 190px;
    --fr-sidebar-gap: 12px;
  }

  html[lang^="fr"] body#about-attr-page #container-2a2a9d56d1 {
    max-width: calc(100% - 32px) !important;
  }

  html[lang^="fr"] body#about-attr-page #container-2a2a9d56d1 > .text:has(#this-page) .aboutattr-cards-container {
    padding: 24px 18px !important;
  }

  html[lang^="fr"] body#about-attr-page #container-2a2a9d56d1 > .text:has(#this-page) .steps-card-icon:first-child {
    font-size: 19px !important;
  }

  html[lang^="fr"] body#about-attr-page #container-2a2a9d56d1 > .text:has(#this-page) .steps-card-icon:not(:first-child) {
    font-size: 16px !important;
    line-height: 19px !important;
  }

  html[lang^="fr"] body#about-attr-page #about-cards-1 .aboutattr-cards-container,
  html[lang^="fr"] body#about-attr-page #about-cards-2 .aboutattr-cards-container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  html[lang^="fr"] body#about-attr-page #about-cards-1 .diagnosis-cards-items,
  html[lang^="fr"] body#about-attr-page #about-cards-2 .diagnosis-cards-items {
    gap: 6px !important;
  }

  html[lang^="fr"] body#about-attr-page #about-cards-1 .alt-right-arrow {
    margin-left: 8px !important;
    margin-right: 8px !important;
  }
}

/* ---------- Tablet: normal flow, nav becomes a full-width top panel ---------- */
@media screen and (min-width: 768px) and (max-width: 991px) {
  html[lang^="fr"] body#about-attr-page #container-2a2a9d56d1 {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 24px !important;
    box-sizing: border-box !important;
  }

  html[lang^="fr"] body#about-attr-page #container-2a2a9d56d1 > .text:has(#this-page) {
    display: block !important;
    order: 1 !important;
    width: 100% !important;
    margin-bottom: 24px !important;
  }

  html[lang^="fr"] body#about-attr-page #container-2a2a9d56d1 > .text:has(#content-sec-1) {
    order: 2 !important;
  }

  html[lang^="fr"] body#about-attr-page #container-2a2a9d56d1 > .text:has(#about-cards-1) {
    order: 3 !important;
  }

  html[lang^="fr"] body#about-attr-page #container-2a2a9d56d1 > .text:has(#this-page) .aboutattr-cards-container {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 22px 24px !important;
    border-radius: 0 0 25px 0 !important;
  }

  html[lang^="fr"] body#about-attr-page #container-2a2a9d56d1 > .text:has(#this-page) .steps-card {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px 24px !important;
  }

  html[lang^="fr"] body#about-attr-page #container-2a2a9d56d1 > .text:has(#this-page) .steps-card-icon:first-child {
    grid-column: 1 / -1 !important;
  }

  html[lang^="fr"] body#about-attr-page #about-cards-1 .diagnosis-cards-items,
  html[lang^="fr"] body#about-attr-page #about-cards-2 .diagnosis-cards-items {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 18px !important;
  }

  html[lang^="fr"] body#about-attr-page #about-cards-1 .steps-card,
  html[lang^="fr"] body#about-attr-page #about-cards-2 .steps-card {
    flex: 1 1 28% !important;
    min-width: 180px !important;
  }

  html[lang^="fr"] body#about-attr-page #about-cards-1 .alt-right-arrow,
  html[lang^="fr"] body#about-attr-page #about-cards-2 .steps-plus-icon {
    display: none !important;
  }
}

/* ---------- Mobile: stack all content cleanly ---------- */
@media screen and (max-width: 767px) {
  html[lang^="fr"] body#about-attr-page {
    overflow-x: hidden !important;
  }

  html[lang^="fr"] body#about-attr-page #container-2a2a9d56d1 {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 15px !important;
    box-sizing: border-box !important;
  }

  html[lang^="fr"] body#about-attr-page #container-2a2a9d56d1 > .text:has(#this-page) {
    display: block !important;
    order: 1 !important;
    width: 100% !important;
    margin: 0 0 20px !important;
  }

  html[lang^="fr"] body#about-attr-page #container-2a2a9d56d1 > .text:has(#content-sec-1) {
    order: 2 !important;
  }

  html[lang^="fr"] body#about-attr-page #container-2a2a9d56d1 > .text:has(#about-cards-1) {
    order: 3 !important;
  }

  html[lang^="fr"] body#about-attr-page #container-2a2a9d56d1 > .text:has(#this-page) .aboutattr-cards-container {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 20px !important;
  }

  html[lang^="fr"] body#about-attr-page #container-2a2a9d56d1 > .text:has(#this-page) .steps-card {
    gap: 10px !important;
  }

  html[lang^="fr"] body#about-attr-page #about-cards-1 .aboutattr-cards-container,
  html[lang^="fr"] body#about-attr-page #about-cards-2 .aboutattr-cards-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 24px !important;
    padding: 20px 15px !important;
  }

  html[lang^="fr"] body#about-attr-page #about-cards-1 .diagnosis-cards-items,
  html[lang^="fr"] body#about-attr-page #about-cards-2 .diagnosis-cards-items,
  html[lang^="fr"] body#about-attr-page #progressive-cont-1 .diagnosis-cards-items,
  html[lang^="fr"] body#about-attr-page #progressive-cont-2 .diagnosis-cards-items {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 18px !important;
    width: 100% !important;
    margin: 0 !important;
  }

  html[lang^="fr"] body#about-attr-page #about-cards-1 .steps-card,
  html[lang^="fr"] body#about-attr-page #about-cards-2 .steps-card,
  html[lang^="fr"] body#about-attr-page #progressive-cont-1 .steps-card,
  html[lang^="fr"] body#about-attr-page #progressive-cont-2 .steps-card {
    width: 100% !important;
    max-width: 320px !important;
    min-width: 0 !important;
    transform: none !important;
  }

  html[lang^="fr"] body#about-attr-page #about-cards-1 .alt-right-arrow,
  html[lang^="fr"] body#about-attr-page #about-cards-2 .steps-plus-icon {
    display: block !important;
    margin: 0 auto !important;
    transform: rotate(90deg) !important;
  }

  html[lang^="fr"] body#about-attr-page .understand-two-images,
  html[lang^="fr"] body#about-attr-page .galaxcy-div,
  html[lang^="fr"] body#about-attr-page .progress-two-images,
  html[lang^="fr"] body#about-attr-page .patient-box {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    width: 100% !important;
  }

  html[lang^="fr"] body#about-attr-page .understand-image-one,
  html[lang^="fr"] body#about-attr-page .understand-image-two,
  html[lang^="fr"] body#about-attr-page .galaxy-ptag,
  html[lang^="fr"] body#about-attr-page .galaxy-ptag1,
  html[lang^="fr"] body#about-attr-page .progress-image-one,
  html[lang^="fr"] body#about-attr-page .progress-image-two,
  html[lang^="fr"] body#about-attr-page .border-box {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  html[lang^="fr"] body#about-attr-page .genetic-testing-callout,
  html[lang^="fr"] body#about-attr-page #text-a798dda2f0 .attr-suspected-box {
    align-items: flex-start !important;
    padding: 16px !important;
    gap: 12px !important;
  }

  html[lang^="fr"] body#about-attr-page #text-2c89de61b7 {
    padding: 16px 16px 16px 58px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  html[lang^="fr"] body#about-attr-page #text-2c89de61b7::before {
    left: 14px !important;
    top: 18px !important;
    transform: none !important;
  }

  html[lang^="fr"] body#about-attr-page .about-mixed-hattr__heading {
    margin-top: 35px !important;
    font-size: 25px !important;
    line-height: 30px !important;
  }

  html[lang^="fr"] body#about-attr-page .about-mixed-hattr__title {
    font-size: 18px !important;
    line-height: 23px !important;
  }

  html[lang^="fr"] body#about-attr-page .about-mixed-hattr__description,
  html[lang^="fr"] body#about-attr-page #text-c92be536b1 p,
  html[lang^="fr"] body#about-attr-page #text-c92be536b1 li,
  html[lang^="fr"] body#about-attr-page #container-380ba759fc .bullet-text {
    font-size: 16px !important;
    line-height: 1.4 !important;
  }
}

/* Remove the old left offset from the affected lower containers on tablet/mobile. */
@media screen and (max-width: 991px) {
  html[lang^="fr"] body#about-attr-page #container-75cf52306c,
  html[lang^="fr"] body#about-attr-page #container-7122c14fc0,
  html[lang^="fr"] body#about-attr-page #container-380ba759fc,
  html[lang^="fr"] body#about-attr-page #container-02c32ef3cc,
  html[lang^="fr"] body#about-attr-page #container-3e016e6889 {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    box-sizing: border-box !important;
  }
}

/* ====================== END FINAL FR RESPONSIVE FIXES ===================== */

/* ========================================================================
   FINAL FR VISUAL CORRECTIONS — EN MATCH
   1. Native-sized source diagram images
   2. Genetic-testing callout bulb
   3. Cardiac/mixed-phenotype content styling
   4. Shared bulb asset
   ======================================================================== */

html[lang^="fr"] body#about-attr-page {
  --fr-bulb-icon: url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/lightbulb%20icon%20gradient_1.png");
}

/* 1) "À la source" diagram — keep each asset at the EN/native visual size. */
html[lang^="fr"] body#about-attr-page #about-cards-1 .diagnosis-cards-items {
  align-items: flex-start !important;
  justify-content: space-between !important;
}

html[lang^="fr"] body#about-attr-page #about-cards-1 .steps-card {
  min-width: 0 !important;
}

html[lang^="fr"] body#about-attr-page #about-cards-1 .steps-icon {
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
}

html[lang^="fr"] body#about-attr-page #about-cards-1 .ab-icon-1 {
  width: 134px !important;
  height: 100px !important;
}

html[lang^="fr"] body#about-attr-page #about-cards-1 .ab-icon-2 {
  width: 133px !important;
  height: 117px !important;
}

html[lang^="fr"] body#about-attr-page #about-cards-1 .ab-icon-3 {
  width: 164px !important;
  height: 108px !important;
}

html[lang^="fr"] body#about-attr-page #about-cards-1 .ab-icon-4 {
  width: 144px !important;
  height: 110px !important;
  margin-top: 0 !important;
}

html[lang^="fr"] body#about-attr-page #about-cards-1 .ab-icon-5 {
  width: 53px !important;
  height: 122px !important;
}

/* Prevent generic AEM image rules from stretching diagram assets. */
html[lang^="fr"] body#about-attr-page #about-cards-1 picture,
html[lang^="fr"] body#about-attr-page #about-cards-1 .cmp-image,
html[lang^="fr"] body#about-attr-page #about-cards-1 .cmp-image__image {
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
}

/* 2) Genetic-testing callout — replace the broken/blank authored icon. */
html[lang^="fr"] body#about-attr-page .genetic-testing-callout {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  min-height: 112px !important;
  padding: 18px 26px !important;
}

html[lang^="fr"] body#about-attr-page .genetic-testing-callout__icon {
  display: block !important;
  width: 36px !important;
  min-width: 36px !important;
  height: 42px !important;
  flex: 0 0 36px !important;
  border: 0 !important;
  background-color: transparent !important;
  background-image: var(--fr-bulb-icon) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
}

html[lang^="fr"] body#about-attr-page .genetic-testing-callout__icon img {
  display: none !important;
}

/* Fallback for the authored callout identified by its text component. */
html[lang^="fr"] body#about-attr-page #text-2c89de61b7 {
  min-height: 112px !important;
  padding: 18px 28px 18px 78px !important;
  display: flex !important;
  align-items: center !important;
}

html[lang^="fr"] body#about-attr-page #text-2c89de61b7::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 26px !important;
  top: 50% !important;
  width: 36px !important;
  height: 42px !important;
  transform: translateY(-50%) !important;
  border: 0 !important;
  background-color: transparent !important;
  background-image: var(--fr-bulb-icon) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
}

html[lang^="fr"] body#about-attr-page #text-2c89de61b7 img {
  display: none !important;
}

/* 3) ATTR-CM content — restore EN typography, spacing and diamond bullets. */
html[lang^="fr"] body#about-attr-page #container-380ba759fc {
  max-width: 1001px !important;
  margin: 0 auto !important;
  padding-top: 34px !important;
  padding-bottom: 36px !important;
}

html[lang^="fr"] body#about-attr-page #container-380ba759fc .title,
html[lang^="fr"] body#about-attr-page #container-380ba759fc h2,
html[lang^="fr"] body#about-attr-page #container-380ba759fc h3 {
  color: #00215F !important;
  font-family: "Kanit-SemiBold", "Kanit", sans-serif !important;
  font-weight: normal !important;
}

html[lang^="fr"] body#about-attr-page #container-380ba759fc .title {
  font-size: 20px !important;
  line-height: 25px !important;
  margin: 0 0 18px !important;
  padding: 0 !important;
}

html[lang^="fr"] body#about-attr-page #container-380ba759fc .bullet-row {
  position: relative !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  margin: 0 0 12px !important;
  padding-left: 18px !important;
}

html[lang^="fr"] body#about-attr-page #container-380ba759fc .bullet-row::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 8px !important;
  width: 7px !important;
  height: 7px !important;
  transform: rotate(45deg) !important;
  background: linear-gradient(135deg, #75F2FB 0%, #556AFF 55%, #F599FC 100%) !important;
}

html[lang^="fr"] body#about-attr-page #container-380ba759fc .bullet-text,
html[lang^="fr"] body#about-attr-page #container-380ba759fc p,
html[lang^="fr"] body#about-attr-page #container-380ba759fc li {
  color: #151515 !important;
  font-family: "Kanit", "Kanit", sans-serif !important;
  font-size: 18px !important;
  line-height: 22px !important;
}

/* ATTR-suspected callout with the shared bulb. */
html[lang^="fr"] body#about-attr-page #text-a798dda2f0 .attr-suspected-box {
  align-items: flex-start !important;
  min-height: 0 !important;
  padding: 22px 28px !important;
  gap: 18px !important;
}

html[lang^="fr"] body#about-attr-page #text-a798dda2f0 .attr-suspected-icon-wrap {
  display: block !important;
  width: 36px !important;
  min-width: 36px !important;
  height: 42px !important;
  flex: 0 0 36px !important;
  border: 0 !important;
  background-color: transparent !important;
  background-image: var(--fr-bulb-icon) !important;
  background-repeat: no-repeat !important;
  background-position: center top !important;
  background-size: contain !important;
}

html[lang^="fr"] body#about-attr-page #text-a798dda2f0 .attr-suspected-icon {
  display: none !important;
}

/* 4) Mixed-phenotype gauge — never enlarge beyond its native EN presentation. */
html[lang^="fr"] body#about-attr-page .mixed-hattr-stat {
  width: 100% !important;
  max-width: 1001px !important;
  margin: 20px auto 0 !important;
  overflow: hidden !important;
}

html[lang^="fr"] body#about-attr-page .mixed-hattr-stat img {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 560px !important;
  max-height: 260px !important;
  margin: 0 auto !important;
  object-fit: contain !important;
  object-position: center top !important;
}

/* Tablet */
@media screen and (max-width: 991px) {
  html[lang^="fr"] body#about-attr-page #about-cards-1 .diagnosis-cards-items {
    justify-content: center !important;
    gap: 14px !important;
  }

  html[lang^="fr"] body#about-attr-page .mixed-hattr-stat img {
    max-width: min(560px, 90vw) !important;
    max-height: none !important;
  }
}

/* Mobile */
@media screen and (max-width: 767px) {
  html[lang^="fr"] body#about-attr-page #about-cards-1 .steps-icon,
  html[lang^="fr"] body#about-attr-page #about-cards-1 [class*="ab-icon-"] {
    width: auto !important;
    height: auto !important;
    max-width: 150px !important;
    max-height: 122px !important;
  }

  html[lang^="fr"] body#about-attr-page .genetic-testing-callout {
    align-items: flex-start !important;
    min-height: 0 !important;
    padding: 16px !important;
  }

  html[lang^="fr"] body#about-attr-page #text-2c89de61b7 {
    min-height: 0 !important;
    padding: 16px 16px 16px 62px !important;
  }

  html[lang^="fr"] body#about-attr-page #text-2c89de61b7::before {
    left: 14px !important;
    top: 18px !important;
    width: 32px !important;
    height: 38px !important;
    transform: none !important;
  }

  html[lang^="fr"] body#about-attr-page #container-380ba759fc {
    padding: 24px 15px 30px !important;
  }

  html[lang^="fr"] body#about-attr-page #container-380ba759fc .bullet-text,
  html[lang^="fr"] body#about-attr-page #container-380ba759fc p,
  html[lang^="fr"] body#about-attr-page #container-380ba759fc li {
    font-size: 16px !important;
    line-height: 21px !important;
  }

  html[lang^="fr"] body#about-attr-page .mixed-hattr-stat img {
    width: auto !important;
    max-width: 100% !important;
    max-height: 240px !important;
  }
}

/* =========================================================
   FR POLYNEUROPATHY TEXT BLOCK
   Match EN version
   ========================================================= */

#about-attr-page .attr-polyneuropathy-text {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 30px 20px;
  box-sizing: border-box;
  color: #151515;
  font-family: "Kanit";
}

#about-attr-page .attr-polyneuropathy-heading {
  margin: 0 0 8px;
  padding: 0;
  font-family: "Kanit";
  font-size: 18px;
  line-height: 24px;
  color: #151515;
}

#about-attr-page .attr-polyneuropathy-list {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}

#about-attr-page .attr-polyneuropathy-list li {
  position: relative;
  display: block;
  margin: 0 0 7px;
  padding: 0 0 0 22px;
  font-family: "Kanit";
  font-size: 18px;
  line-height: 23px;
  color: #151515;
}

/* Gradient diamond bullet matching EN */
#about-attr-page .attr-polyneuropathy-list li::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 3px;
  width: 8px;
  height: 8px;
  background:
    linear-gradient(
      135deg,
      #75f2fb 0%,
      #619efd 35%,
      #7d76fe 65%,
      #f599fc 100%
    );
  transform: rotate(45deg);
}

#about-attr-page .attr-polyneuropathy-list sup {
  position: relative;
  top: -0.45em;
  vertical-align: baseline;
  font-family: "Kanit";
  font-size: 60%;
  line-height: 0;
}

/* Prevent global AEM list rules from creating extra spacing */
#about-attr-page .attr-polyneuropathy-text ul,
#about-attr-page .attr-polyneuropathy-text li,
#about-attr-page .attr-polyneuropathy-text p {
  box-sizing: border-box;
}

/* Tablet */
@media screen and (max-width: 991px) {
  #about-attr-page .attr-polyneuropathy-text {
    padding: 25px 24px;
  }

  #about-attr-page .attr-polyneuropathy-heading,
  #about-attr-page .attr-polyneuropathy-list li {
    font-size: 17px;
    line-height: 22px;
  }
}

/* Mobile */
@media screen and (max-width: 767px) {
  #about-attr-page .attr-polyneuropathy-text {
    padding: 22px 20px;
  }

  #about-attr-page .attr-polyneuropathy-heading {
    margin-bottom: 10px;
    font-size: 16px;
    line-height: 21px;
  }

  #about-attr-page .attr-polyneuropathy-list li {
    margin-bottom: 9px;
    padding-left: 20px;
    font-size: 16px;
    line-height: 21px;
  }

  #about-attr-page .attr-polyneuropathy-list li::before {
    top: 7px;
    left: 2px;
    width: 7px;
    height: 7px;
  }
}

/* Small mobile */
@media screen and (max-width: 480px) {
  #about-attr-page .attr-polyneuropathy-text {
    padding: 20px 16px;
  }
}

/* ===========================================
   ATTR Callout - Match EN
   =========================================== */

#about-attr-page .attr-callout-text {
    margin: 0;
    font-family: "Kanit";
    font-size: 18px;
    line-height: 24px;
    color: #151515;
}

#about-attr-page .attr-callout-text .callout-line1 {
    display: inline;
    font-family: "Kanit-SemiBold";
}

#about-attr-page .attr-callout-text sup {
    position: relative;
    top: -0.45em;
    font-size: 60%;
    line-height: 0;
    font-family: "Kanit";
}

@media (max-width:991px) {
    #about-attr-page .attr-callout-text {
        font-size: 17px;
        line-height: 23px;
    }
}

@media (max-width:767px) {
    #about-attr-page .attr-callout-text {
        font-size: 16px;
        line-height: 22px;
        padding: 0 12px;
    }
}

/* =========================================================
   FR AUTONOMIC SCREENING CALLOUT
   Match EN grey callout box
   ========================================================= */

#about-attr-page #text-fbe6e9d58e {
  position: relative;
  width: calc(100% - 40px);
  max-width: 1120px;
  min-height: 94px;
  margin: 35px auto;
  padding: 20px 28px 20px 78px;
  box-sizing: border-box;

  background: #eeeeF8;
  border: 1px solid #6670ff;
  border-radius: 24px 24px 24px 0;
}

#about-attr-page #text-fbe6e9d58e::before {
  content: "";
  position: absolute;
  left: 25px;
  top: 50%;
  width: 34px;
  height: 34px;
  transform: translateY(-50%);

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

#about-attr-page #text-fbe6e9d58e p {
  margin: 0;
  padding: 0;
  color: #00215f;
  font-family: "Kanit-SemiBold";
  font-size: 18px;
  line-height: 26px;
  font-weight: normal;
}

#about-attr-page #text-fbe6e9d58e .callout-line1 {
  display: inline;
}

#about-attr-page #text-fbe6e9d58e sup {
  position: relative;
  top: -0.45em;
  vertical-align: baseline;
  font-family: "Kanit-SemiBold";
  font-size: 60%;
  line-height: 0;
}

/* Tablet */
@media screen and (max-width: 991px) {
  #about-attr-page #text-fbe6e9d58e {
    width: calc(100% - 48px);
    min-height: 90px;
    margin: 28px auto;
    padding: 18px 24px 18px 70px;
  }

  #about-attr-page #text-fbe6e9d58e::before {
    left: 22px;
    width: 31px;
    height: 31px;
  }

  #about-attr-page #text-fbe6e9d58e p {
    font-size: 17px;
    line-height: 24px;
  }
}

/* Mobile */
@media screen and (max-width: 767px) {
  #about-attr-page #text-fbe6e9d58e {
    width: calc(100% - 32px);
    min-height: auto;
    margin: 24px auto;
    padding: 58px 20px 20px;
    border-radius: 20px 20px 20px 0;
    text-align: center;
  }

  #about-attr-page #text-fbe6e9d58e::before {
    left: 50%;
    top: 16px;
    width: 30px;
    height: 30px;
    transform: translateX(-50%);
  }

  #about-attr-page #text-fbe6e9d58e p {
    font-size: 16px;
    line-height: 22px;
  }

  #about-attr-page #text-fbe6e9d58e .callout-line1 {
    display: inline;
  }
}

/* ================= END FINAL FR VISUAL CORRECTIONS ================= */

/* ============================================================================
   FR ABOUT ATTR — EMERGENCY FINAL FIX
   IMPORTANT: scoped only to the current French outer HTML.
   Existing English/shared layout is left untouched.
   ============================================================================ */

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

  /* 1) HERO — stop the French full-viewport rule from shrinking/offsetting it */
  html[lang="fr"] body#about-attr-page #container-3494b00441 {
    display: block !important;
    width: 100% !important;
    max-width: 1265px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  html[lang="fr"] body#about-attr-page
  #container-3494b00441 > .text {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html[lang="fr"] body#about-attr-page
  #container-3494b00441 .treatment-diagnosis-banner {
    display: block !important;
    width: 100% !important;
    max-width: 1160px !important;
    min-height: 340px !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    box-sizing: border-box !important;
  }

  html[lang="fr"] body#about-attr-page
  #container-3494b00441 .banner-content {
    width: 100% !important;
    max-width: 1160px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
  }


  /* 2) FIRST DIAGRAM — retain the existing correct grid and native image ratio */
  html[lang="fr"] body#about-attr-page
  #container-f1c43da3c1 #about-cards-1 .aboutattr-cards-container {
    width: 100% !important;
    max-width: 1001px !important;
    height: auto !important;
    min-height: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  html[lang="fr"] body#about-attr-page
  #container-f1c43da3c1 #about-cards-1 .diagnosis-cards-items {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: auto !important;
    padding: 0 18px 24px !important;
    box-sizing: border-box !important;
  }

  html[lang="fr"] body#about-attr-page
  #container-f1c43da3c1 #about-cards-1 .steps-card {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    height: auto !important;
  }

  html[lang="fr"] body#about-attr-page
  #container-f1c43da3c1 #about-cards-1 img.steps-icon,
  html[lang="fr"] body#about-attr-page
  #container-f1c43da3c1 #about-cards-1 img.attr.steps-icon {
    display: block !important;
    /* width: auto !important; */
    height: auto !important;
    max-width: 100% !important;
    max-height: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    object-fit: contain !important;
    transform: none !important;
  }

  html[lang="fr"] body#about-attr-page
  #container-f1c43da3c1 #about-cards-1 .ab-icon-1 {
    width: 134px !important;
  }

  html[lang="fr"] body#about-attr-page
  #container-f1c43da3c1 #about-cards-1 .ab-icon-2 {
    width: 133px !important;
  }

  html[lang="fr"] body#about-attr-page
  #container-f1c43da3c1 #about-cards-1 .ab-icon-3 {
    width: 164px !important;
  }

  html[lang="fr"] body#about-attr-page
  #container-f1c43da3c1 #about-cards-1 .ab-icon-4 {
    width: 144px !important;
    margin-top: 36px !important;
  }

  html[lang="fr"] body#about-attr-page
  #container-f1c43da3c1 #about-cards-1 .ab-icon-5 {
    width: 53px !important;
  }

  html[lang="fr"] body#about-attr-page
  #container-f1c43da3c1 #about-cards-1 img.alt-right-arrow {
    flex: 0 0 auto !important;
    width: auto !important;
    height: auto !important;
    max-width: 34px !important;
    margin: 0 5px !important;
    transform: none !important;
  }


  /* Keep the existing desktop sidebar dimensions/content readable */
  html[lang="fr"] body#about-attr-page
  #container-f1c43da3c1 #this-page .aboutattr-cards-container {
    width: var(--nav-width, 224px) !important;
    max-width: var(--nav-width, 224px) !important;
    min-width: var(--nav-width, 224px) !important;
    height: auto !important;
    min-height: 352px !important;
    padding: 30px 24px !important;
    box-sizing: border-box !important;
  }

  html[lang="fr"] body#about-attr-page
  #container-f1c43da3c1 #this-page .diagnosis-cards-items,
  html[lang="fr"] body#about-attr-page
  #container-f1c43da3c1 #this-page .steps-card {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html[lang="fr"] body#about-attr-page
  #container-f1c43da3c1 #this-page .steps-card-icon {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    line-height: 18px !important;
    text-align: left !important;
  }


  /* 3) GENETIC TESTING CALLOUT — remove accidental second outer box */
  html[lang="fr"] body#about-attr-page
  .text:has(#text-6a3025371a),
  html[lang="fr"] body#about-attr-page
  #text-6a3025371a,
  html[lang="fr"] body#about-attr-page
  #text-6a3025371a.cmp-text {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
  }

  html[lang="fr"] body#about-attr-page
  .text:has(#text-6a3025371a)::before,
  html[lang="fr"] body#about-attr-page
  .text:has(#text-6a3025371a)::after,
  html[lang="fr"] body#about-attr-page
  #text-6a3025371a::before,
  html[lang="fr"] body#about-attr-page
  #text-6a3025371a::after {
    content: none !important;
    display: none !important;
  }

  html[lang="fr"] body#about-attr-page
  #text-6a3025371a .genetic-testing-callout {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 16px !important;
    width: calc(100% - 40px) !important;
    max-width: 964px !important;
    height: auto !important;
    min-height: 98px !important;
    margin: 24px auto !important;
    padding: 16px 24px !important;
    box-sizing: border-box !important;
  }

  html[lang="fr"] body#about-attr-page
  #text-6a3025371a .genetic-testing-callout__icon {
    flex: 0 0 32px !important;
    width: 32px !important;
    height: 32px !important;
    margin: 0 !important;
  }

  /* FR HTML contains an empty IMG source */
  html[lang="fr"] body#about-attr-page
  #text-6a3025371a .genetic-testing-callout__icon img {
    display: block !important;
    width: 32px !important;
    height: 32px !important;
    background-image: url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/lightbulb%20icon%20gradient_1.png") !important;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
  }

  html[lang="fr"] body#about-attr-page
  #text-6a3025371a .genetic-testing-callout__text {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
  }


  /* 4) LOWER FR TEXT BLOCKS — restore centred content width/readability */
  html[lang="fr"] body#about-attr-page
  #text-8aa235a5f0 {
    width: calc(100% - 40px) !important;
    max-width: 1001px !important;
    margin: 30px auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  html[lang="fr"] body#about-attr-page
  #text-8aa235a5f0 .slide {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: "Kanit", sans-serif !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
    box-sizing: border-box !important;
  }

  html[lang="fr"] body#about-attr-page
  #text-8aa235a5f0 .bullet-row {
    display: flex !important;
    align-items: flex-start !important;
    width: 100% !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
  }

  html[lang="fr"] body#about-attr-page
  #text-8aa235a5f0 .bullet-text {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
  }

  html[lang="fr"] body#about-attr-page
  #text-c6a76ed8cb .about-mixed-hattr {
    width: calc(100% - 40px) !important;
    max-width: 1001px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  html[lang="fr"] body#about-attr-page
  #text-c6a76ed8cb .about-mixed-hattr__description {
    white-space: normal !important;
    overflow-wrap: break-word !important;
  }
}


/* Mobile/tablet: do not apply desktop sidebar/grid dimensions */
@media screen and (max-width: 991px) {
  html[lang="fr"] body#about-attr-page
  #text-6a3025371a .genetic-testing-callout__icon img {
    display: block !important;
    width: 32px !important;
    height: 32px !important;
    background-image: url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/lightbulb%20icon%20gradient_1.png") !important;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
  }
}

/* =========================================================
   FR ABOUT ATTR — HERO WIDTH FIX
   ========================================================= */

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

  /* Break the hero wrapper out of the restricted content/grid column */
  html[lang^="fr"] body#about-attr-page
  .text:has(> #about-cards-2) {
    display: block !important;
    width: 100vw !important;
    max-width: none !important;

    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;

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

  /* Reset the AEM text component */
  html[lang^="fr"] body#about-attr-page
  #about-cards-2 {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  /* Keep the actual hero at the intended site width */
  html[lang^="fr"] body#about-attr-page
  #about-cards-2 .treatment-diagnosis-banner {
    display: block !important;
    width: 100% !important;
    max-width: 1265px !important;
    min-height: 340px !important;
    height: auto !important;

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

    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;

    box-sizing: border-box !important;
  }

  /* Keep the heading aligned inside the hero */
  html[lang^="fr"] body#about-attr-page
  #about-cards-2 .banner-content {
    width: 100% !important;
    max-width: 1160px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }
}

/* ======================= END FR EMERGENCY FIX ======================= */

/* ============================================================================
   FR ABOUT ATTR — TRUE FULL-VIEWPORT HERO
   Exact structure:
   #container-3494b00441 > .text > #about-cards-2
   ============================================================================ */

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

  /* Allow the hero to escape every fixed-width AEM ancestor */
  html[lang="fr"] body#about-attr-page,
  html[lang="fr"] body#about-attr-page #container-4e24aa263f,
  html[lang="fr"] body#about-attr-page #container-4e24aa263f > .container,
  html[lang="fr"] body#about-attr-page #container-3494b00441,
  html[lang="fr"] body#about-attr-page #container-3494b00441 > .text,
  html[lang="fr"] body#about-attr-page #about-cards-2 {
    overflow: visible !important;
  }

  html[lang="fr"] body#about-attr-page #container-3494b00441,
  html[lang="fr"] body#about-attr-page #container-3494b00441 > .text,
  html[lang="fr"] body#about-attr-page #about-cards-2 {
    position: static !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    box-sizing: border-box !important;
  }

  /*
   * Break only the actual hero out to viewport width.
   * This is independent of the parent container width.
   */
  html[lang="fr"] body#about-attr-page
  #about-cards-2 .treatment-diagnosis-banner {
    position: relative !important;
    left: 50% !important;
    right: auto !important;

    width: 100vw !important;
    max-width: none !important;
    min-width: 100vw !important;

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

    margin-left: -50vw !important;
    margin-right: 0 !important;
    padding: 0 !important;

    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;

    transform: none !important;
    box-sizing: border-box !important;
  }

  /* Keep the French hero text aligned to the site content width */
  html[lang="fr"] body#about-attr-page
  #about-cards-2 .treatment.banner-content {
    position: relative !important;
    left: auto !important;

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

    height: 100% !important;
    margin: 0 auto !important;
    padding-left: 30px !important;
    padding-right: 30px !important;

    transform: none !important;
    box-sizing: border-box !important;
  }
}

/* ================= END TRUE FULL-VIEWPORT HERO ================= */

/* ============================================================================
   FR ABOUT ATTR — HERO EDGE + NATIVE DIAGRAM ICON SIZES
   Additive final override. French desktop only.
   ============================================================================ */

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

  /*
   * HERO:
   * The page's main AEM wrapper is centred and narrower than the viewport.
   * Shift the 100vw hero left by exactly half of that width difference.
   */
  html[lang="fr"] body#about-attr-page
  #about-cards-2 .treatment-diagnosis-banner {
    position: relative !important;
    left: auto !important;
    right: auto !important;

    width: 100vw !important;
    max-width: none !important;
    min-width: 100vw !important;

    margin-left: calc((100% - 100vw) / 2) !important;
    margin-right: 0 !important;

    height: 340px !important;
    min-height: 340px !important;
    padding: 0 !important;

    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;

    transform: none !important;
    box-sizing: border-box !important;
  }

  html[lang="fr"] body#about-attr-page
  #about-cards-2 .treatment.banner-content {
    width: min(1265px, 100%) !important;
    max-width: 1265px !important;
    height: 100% !important;

    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 30px !important;
    padding-right: 30px !important;

    box-sizing: border-box !important;
  }


  /*
   * “À LA SOURCE” DIAGRAM:
   * Prevent flexbox and generic responsive image rules from shrinking the
   * five artwork files. These values match the original desktop CSS sizes.
   */
  html[lang="fr"] body#about-attr-page
  #about-cards-1 .diagnosis-cards-items {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    column-gap: 8px !important;

    width: 100% !important;
    height: auto !important;
    padding: 0 18px 24px !important;
    box-sizing: border-box !important;
  }

  html[lang="fr"] body#about-attr-page
  #about-cards-1 .steps-card {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    height: auto !important;
    overflow: visible !important;
  }

  html[lang="fr"] body#about-attr-page
  #about-cards-1 .steps-card-icon {
    width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  html[lang="fr"] body#about-attr-page
  #about-cards-1 img.steps-icon,
  html[lang="fr"] body#about-attr-page
  #about-cards-1 img.attr.steps-icon {
    display: block !important;
    flex: none !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    transform: none !important;
  }

  html[lang="fr"] body#about-attr-page
  #about-cards-1 img.ab-icon-1 {
    width: 134px !important;
    min-width: 134px !important;
    height: 100px !important;
  }

  html[lang="fr"] body#about-attr-page
  #about-cards-1 img.ab-icon-2 {
    width: 133px !important;
    min-width: 133px !important;
    height: 117px !important;
  }

  html[lang="fr"] body#about-attr-page
  #about-cards-1 img.ab-icon-3 {
    width: 164px !important;
    min-width: 164px !important;
    height: 107.74px !important;
  }

  html[lang="fr"] body#about-attr-page
  #about-cards-1 img.ab-icon-4 {
    width: 143.79px !important;
    min-width: 143.79px !important;
    height: 110px !important;
    margin-top: 2.3em !important;
  }

  html[lang="fr"] body#about-attr-page
  #about-cards-1 img.ab-icon-5 {
    width: 53px !important;
    min-width: 53px !important;
    height: 122px !important;
  }

  html[lang="fr"] body#about-attr-page
  #about-cards-1 img.alt-right-arrow {
    display: block !important;
    flex: 0 0 28px !important;
    width: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    height: auto !important;
    margin: 0 2px !important;
    transform: none !important;
  }
}

/* ============================================================================
   FR ABOUT ATTR — DEFINITIVE HERO FULL-BLEED FIX (append at very end of file)
   Root cause: a later override stripped max-width/margin:auto from
   #container-3494b00441, which the 100vw breakout math on
   .treatment-diagnosis-banner depends on to compute the correct offset.
   Restoring the centered parent here (last in the cascade) fixes the gap.
   ============================================================================ */
@media screen and (min-width: 992px) {

  html[lang="fr"] body#about-attr-page #container-3494b00441 {
    display: block !important;
    width: 100% !important;
    max-width: 1265px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  html[lang="fr"] body#about-attr-page #container-3494b00441 > .text,
  html[lang="fr"] body#about-attr-page #about-cards-2 {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  html[lang="fr"] body#about-attr-page #about-cards-2 .treatment-diagnosis-banner {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: 0 !important;

    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;

    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;

    height: 340px !important;
    min-height: 340px !important;
    padding: 0 !important;

    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;

    transform: none !important;
    box-sizing: border-box !important;
  }

  html[lang="fr"] body#about-attr-page #about-cards-2 .treatment.banner-content {
    width: 100% !important;
    max-width: 1265px !important;
    height: 100% !important;
    margin: 0 auto !important;
    padding-left: 30px !important;
    padding-right: 30px !important;
    box-sizing: border-box !important;
  }
}

/* Prevent the intentional full-bleed banner from introducing a page-level
   horizontal scrollbar */
html[lang="fr"] body#about-attr-page {
  overflow-x: hidden !important;
}


/* =========================================================
   FR CALLOUT — KEEP ONLY ONE VISIBLE BLOCK
   ========================================================= */

/* Outer AEM wrapper must stay completely transparent */
html[lang="fr"] body#about-attr-page
.text:has(> #text-fbe6e9d58e) {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Remove any pseudo-element border/background from outer wrapper */
html[lang="fr"] body#about-attr-page
.text:has(> #text-fbe6e9d58e)::before,
html[lang="fr"] body#about-attr-page
.text:has(> #text-fbe6e9d58e)::after {
  content: none !important;
  display: none !important;
}

/* Only this inner component should be visible as the callout box */
html[lang="fr"] body#about-attr-page
#text-fbe6e9d58e.cmp-text {
  width: calc(100% - 40px) !important;
  max-width: 964px !important;

  margin: 24px auto !important;
  padding: 18px 24px !important;

  background: rgba(221, 224, 238, 0.6) !important;
  border: 1px solid #656EFA !important;
  border-radius: 20px 20px 20px 0 !important;
  box-shadow: none !important;

  box-sizing: border-box !important;
}

/* Prevent an extra inner shape from paragraph/pseudo-elements */
html[lang="fr"] body#about-attr-page
#text-fbe6e9d58e.cmp-text::before,
html[lang="fr"] body#about-attr-page
#text-fbe6e9d58e.cmp-text::after,
html[lang="fr"] body#about-attr-page
#text-fbe6e9d58e .attr-callout-text::before,
html[lang="fr"] body#about-attr-page
#text-fbe6e9d58e .attr-callout-text::after {
  content: none !important;
  display: none !important;
}

/* Paragraph should not create another bordered block */
html[lang="fr"] body#about-attr-page
#text-fbe6e9d58e .attr-callout-text {
  width: 100% !important;
  max-width: 100% !important;

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

  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

/* =========================================================
   FR AUTONOMIC CALLOUT — ONE BLOCK ONLY
   ========================================================= */

/* Reset every AEM wrapper surrounding this exact component */
html[lang^="fr"] body#about-attr-page
.text:has(#text-fbe6e9d58e),

html[lang^="fr"] body#about-attr-page
.aem-GridColumn:has(#text-fbe6e9d58e),

html[lang^="fr"] body#about-attr-page
.cmp-container:has(#text-fbe6e9d58e) {
 
  background-color: #FAFAFA !important;

  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;

  min-height: 0 !important;

  padding-top: 0 !important;
  padding-bottom: 0 !important;

  box-sizing: border-box !important;
}

/* Remove any outer wrapper pseudo-elements */
html[lang^="fr"] body#about-attr-page
.text:has(#text-fbe6e9d58e)::before,

html[lang^="fr"] body#about-attr-page
.text:has(#text-fbe6e9d58e)::after,

html[lang^="fr"] body#about-attr-page
.aem-GridColumn:has(#text-fbe6e9d58e)::before,

html[lang^="fr"] body#about-attr-page
.aem-GridColumn:has(#text-fbe6e9d58e)::after,

html[lang^="fr"] body#about-attr-page
.cmp-container:has(#text-fbe6e9d58e)::before,

html[lang^="fr"] body#about-attr-page
.cmp-container:has(#text-fbe6e9d58e)::after {
  content: none !important;
  display: none !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Keep only this single visible callout */
html[lang^="fr"] body#about-attr-page
#text-fbe6e9d58e.cmp-text {
  position: relative !important;

  display: block !important;
  width: calc(100% - 40px) !important;
  max-width: 1120px !important;
  min-height: 94px !important;

  margin: 35px auto !important;
  padding: 20px 28px 20px 78px !important;

  background: #eeeeF8 !important;
  border: 1px solid #6670ff !important;
  border-radius: 24px 24px 24px 0 !important;
  box-shadow: none !important;

  box-sizing: border-box !important;
}

/* Keep the lightbulb pseudo-element on the actual callout only */
html[lang^="fr"] body#about-attr-page
#text-fbe6e9d58e.cmp-text::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;

  left: 25px !important;
  top: 50% !important;
  width: 34px !important;
  height: 34px !important;

  transform: translateY(-50%) !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 !important;
  background-size: contain !important;

  border: 0 !important;
  box-shadow: none !important;
}

/* Do not allow the paragraph itself to become another box */
html[lang^="fr"] body#about-attr-page
#text-fbe6e9d58e .attr-callout-text {
  display: block !important;
  width: 100% !important;

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

  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;

}


/* =========================
   Polyneuropathy in ATTR
   ========================= */

.polyneuropathy-title {
    margin: 0 0 8px 0;
    padding: 0;
    font-family: "Kanit-Bold";
    font-size: 14px;
    line-height: 18px;
    color: #151515;
    font-weight: normal;
}

.polyneuropathy-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.polyneuropathy-list li {
    position: relative;
    margin: 0 0 8px;
    padding-left: 18px;
    font-family: "Kanit";
    font-size: 14px;
    line-height: 18px;
    color: #151515;
}

.polyneuropathy-list li:last-child {
    margin-bottom: 0;
}

.polyneuropathy-list li::before {
    content: url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop/list-bullet-icon.svg");
    position: absolute;
    left: 0;
    top: 1px;
    width: 6px;
    height: 6px;
}

.polyneuropathy-list strong,
.polyneuropathy-list b {
    font-family: "Kanit-Bold";
    font-weight: normal;
}

.polyneuropathy-list u {
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.polyneuropathy-list sup {
    font-size: 60%;
    font-family: "Kanit";
    position: relative;
    top: -0.5em;
    vertical-align: baseline;
}

/* Mobile */

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

    .polyneuropathy-title{
        font-size:13px;
        line-height:17px;
    }

    .polyneuropathy-list li{
        font-size:13px;
        line-height:17px;
        padding-left:16px;
        margin-bottom:7px;
    }

    .polyneuropathy-list li::before{
        transform:scale(.85);
        transform-origin:left top;
    }

    .polyneuropathy-list sup{
        font-size:60%;
    }
}

/* =========================================================
   FINAL ABOUT ATTR OVERRIDES — JULY 2026
   Fixes:
   1. Responsive Pathophysiology paragraph
   2. Liver bracket text weight
   3. Hereditary vs wild-type responsive paragraph
   4. hATTR / ATTRwt desktop cards at inspector-width
   5. Callout superscript weight
   6. hATTR-PN progression stage labels/superscripts
   7. ATTR-CM stage labels/bracket text/superscripts
   8. Mixed-phenotype description weight
   ========================================================= */


/* ---------------------------------------------------------
   1) PATHOPHYSIOLOGY
   Remove authored desktop <br> breaks so the browser wraps
   the paragraph according to available width.
   --------------------------------------------------------- */

#about-attr-page .source-damage {
    width: calc(100% - 40px);
    max-width: 1160px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

#about-attr-page .source-damage p {
    width: 100%;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
}

#about-attr-page .source-damage p br {
    display: none;
}

#about-attr-page .source-damage p sup,
#about-attr-page .source-damage p .suptxt {
    font-family: "Kanit" !important;
    font-weight: 400 !important;
}


/* ---------------------------------------------------------
   2) "AT THE SOURCE: THE LIVER"
   Keep "Liver" bold but make the bracketed copy regular.
   The first visual line remains semibold; remaining text is
   regular because all copy is in the same authored div.
   --------------------------------------------------------- */

#about-attr-page .aboutattr-cards-container .diagnosis-cards-items
.steps-card:first-child .steps-title {
    font-family: "Kanit" !important;
    font-weight: 400 !important;
}

#about-attr-page .aboutattr-cards-container .diagnosis-cards-items
.steps-card:first-child .steps-title::first-line {
    font-family: "Kanit-SemiBold";
    font-weight: 600;
}


/* ---------------------------------------------------------
   3) HEREDITARY VS. WILD-TYPE ATTR
   Join the separately authored paragraphs visually and allow
   normal browser wrapping when the inspector is docked.
   --------------------------------------------------------- */

#about-attr-page .about-attr-hereity {
    width: calc(100% - 40px);
    max-width: 1160px;
    box-sizing: border-box;
}

#about-attr-page .about-attr-hereity .container-text-attr {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
    text-align: center;
}

#about-attr-page .about-attr-hereity .container-text-attr p {
    display: inline;
    margin: 0;
    padding: 0;
    font-family: "Kanit";
    font-weight: 400;
    white-space: normal;
}

#about-attr-page .about-attr-hereity .container-text-attr p:not(:last-child)::after {
    content: " ";
}

#about-attr-page .about-attr-hereity .container-text-attr sup {
    font-family: "Kanit" !important;
    font-weight: 400 !important;
}


/* ---------------------------------------------------------
   4) hATTR AND ATTRwt COMPARISON CARDS
   Prevent the docked inspector width from forcing the desktop
   cards into narrow, vertically clipped columns.
   --------------------------------------------------------- */

#about-attr-page .desktop-only1 .understand-two-images {
    width: calc(100% - 40px);
    max-width: 1160px;
    gap: 28px;
    align-items: stretch;
    box-sizing: border-box;
}

#about-attr-page .desktop-only1 .understand-img1,
#about-attr-page .desktop-only1 .understand-img2 {
    flex: 1 1 0;
    width: 0;
    min-width: 0;
    height: auto;
    min-height: 430px;
    background-size: cover;
    background-position: center;
    border-radius: 30px 30px 30px 0;
    overflow: hidden;
}

#about-attr-page .desktop-only1 .understand-image-one,
#about-attr-page .desktop-only1 .understand-image-two {
    width: 100%;
    max-width: none;
    min-height: 430px;
    height: auto;
    box-sizing: border-box;
}

#about-attr-page .desktop-only1 .understand-ptag,
#about-attr-page .desktop-only1 .understand-ptag1 {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

#about-attr-page .desktop-only1 .about-attr-ul {
    width: 100%;
    max-width: none;
    padding-right: 24px;
    box-sizing: border-box;
}

#about-attr-page .desktop-only1 .about-attr-ul li {
    font-size: 16px;
    line-height: 20px;
    margin-bottom: 14px;
    overflow-wrap: normal;
    word-break: normal;
}


/* Keep the desktop comparison at common docked-inspector widths. */
@media screen and (min-width: 768px) and (max-width: 991px) {

    #about-attr-page .desktop-only1 {
        display: block !important;
    }

    #about-attr-page .mobile-only {
        display: none !important;
    }

    #about-attr-page .desktop-only1 .understand-two-images {
        display: flex !important;
        width: calc(100% - 30px);
        gap: 18px;
    }

    #about-attr-page .desktop-only1 .understand-img1,
    #about-attr-page .desktop-only1 .understand-img2 {
        width: 0 !important;
        min-height: 460px;
        margin: 0 !important;
    }

    #about-attr-page .desktop-only1 .understand-image-one,
    #about-attr-page .desktop-only1 .understand-image-two {
        display: block !important;
        width: 100% !important;
        min-height: 460px;
        height: auto !important;
        margin: 0 !important;
    }

    #about-attr-page .desktop-only1 .understand-image-one p,
    #about-attr-page .desktop-only1 .understand-image-two p {
        font-size: 24px;
        line-height: 28px;
        margin-left: 24px !important;
        padding-top: 0;
    }

    #about-attr-page .desktop-only1 .about-attr-ul {
        padding-top: 8px !important;
        padding-left: 20px;
        padding-right: 18px;
    }

    #about-attr-page .desktop-only1 .about-attr-ul li {
        font-size: 14px;
        line-height: 17px;
        margin-bottom: 10px;
        padding-left: 20px;
        margin-right: 0;
    }
}


/* ---------------------------------------------------------
   5) ALL ABOUT-ATTR CALLOUT SUPERSCRIPTS
   --------------------------------------------------------- */

#about-attr-page .genetic-testing-callout sup,
#about-attr-page .genetic-testing-callout__text sup,
#about-attr-page .attr-callout-text sup,
#about-attr-page .callout-line1 sup,
#about-attr-page [class*="callout"] sup {
    font-family: "Kanit" !important;
    font-weight: 400 !important;
    font-style: normal !important;
    font-size: 60%;
    line-height: 0;
    position: relative;
    top: -0.5em;
    vertical-align: baseline;
}


/* ---------------------------------------------------------
   6) hATTR-PN PROGRESSION CARD
   Stage labels use the supplied #656EFA and references remain
   light rather than inheriting the semibold stage font.
   --------------------------------------------------------- */

#about-attr-page #progressive-cont-1 .stage-label,
#about-attr-page #progressive-cont-1 .steps-card-icon
.steps-title.stage-label {
    color: #656EFA !important;
    font-family: "Kanit-SemiBold";
    font-weight: 600 !important;
}

#about-attr-page #progressive-cont-1 .stage-label sup,
#about-attr-page #progressive-cont-1 .steps-title sup,
#about-attr-page #progressive-cont-1 .suptxt-abt {
    color: inherit;
    font-family: "Kanit" !important;
    font-weight: 400 !important;
    font-size: 60%;
    line-height: 0;
    position: relative;
    top: -0.5em;
    vertical-align: baseline;
}


/* Optional heading styling when the heading already exists above the card. */
#about-attr-page #progressive-cont-1 .cards-footer-header,
#about-attr-page #progressive-cont-1 h3 {
    color: #00215F;
    font-family: "Kanit-SemiBold";
    font-weight: 600 !important;
    text-align: center;
}


/* ---------------------------------------------------------
   7) ATTR-CM PROGRESSION CARD
   Stage heading and superscripts lighter; bracketed clinical
   examples are regular weight.
   --------------------------------------------------------- */

#about-attr-page #progressive-cont-2 .steps-card-icon > .steps-title:first-of-type {
    color: #656EFA !important;
    font-family: "Kanit-SemiBold";
    font-weight: 600 !important;
}

#about-attr-page #progressive-cont-2 .steps-title sup,
#about-attr-page #progressive-cont-2 .suptxt-abt {
    color: inherit;
    font-family: "Kanit" !important;
    font-weight: 400 !important;
    font-size: 60%;
    line-height: 0;
    position: relative;
    top: -0.5em;
    vertical-align: baseline;
}

/*
   STAGE B contains its description and bracketed examples in
   one element. Keep the full description regular so the text
   inside brackets is no longer bold.
*/
#about-attr-page #progressive-cont-2 .steps-card1
.steps-card-icon > .steps-title:nth-of-type(2) {
    font-family: "Kanit" !important;
    font-weight: 400 !important;
}


/* ---------------------------------------------------------
   8) MIXED-PHENOTYPE hATTR DESCRIPTION
   The HTML contains a <b>; override it without changing HTML.
   --------------------------------------------------------- */

#about-attr-page .about-mixed-hattr__description,
#about-attr-page .about-mixed-hattr__description b {
    font-family: "Kanit" !important;
    font-weight: 400 !important;
}

#about-attr-page .about-mixed-hattr__description sup,
#about-attr-page .about-mixed-hattr__title sup {
    font-family: "Kanit" !important;
    font-weight: 400 !important;
}


/* ---------------------------------------------------------
   MOBILE RESTORATION
   On actual mobile, authored breaks may be useful and the
   dedicated mobile cards should remain active.
   --------------------------------------------------------- */

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

    #about-attr-page .source-damage {
        width: 100%;
    }

    #about-attr-page .source-damage p {
        padding-left: 5px;
        padding-right: 5px;
    }

    #about-attr-page .source-damage p br {
        display: none;
    }

    #about-attr-page .about-attr-hereity {
        width: 100%;
    }

    #about-attr-page .about-attr-hereity .container-text-attr {
        padding-left: 10px;
        padding-right: 10px;
    }

    #about-attr-page .desktop-only1 {
        display: none !important;
    }

    #about-attr-page .mobile-only {
        display: block !important;
    }
}

/* =========================================================
   FINAL RESPONSIVE WIDTH / SUPERSCRIPT / SPACING FIXES
   ========================================================= */

/* ---------------------------------------------------------
   1) hATTR / ATTRwt cards:
   keep both cards wider when DevTools is docked on laptop
   --------------------------------------------------------- */

#about-attr-page .desktop-only1 .understand-two-images {
    width: calc(100% - 32px) !important;
    max-width: 1180px !important;
    gap: 36px !important;
    padding: 0 !important;
    box-sizing: border-box;
}

#about-attr-page .desktop-only1 .understand-img1,
#about-attr-page .desktop-only1 .understand-img2 {
    flex: 1 1 50% !important;
    width: calc(50% - 18px) !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 500px !important;
}

#about-attr-page .desktop-only1 .understand-image-one,
#about-attr-page .desktop-only1 .understand-image-two {
    width: 100% !important;
    max-width: none !important;
    min-height: 500px !important;
    height: auto !important;
}

#about-attr-page .desktop-only1 .understand-ptag,
#about-attr-page .desktop-only1 .understand-ptag1 {
    width: 100% !important;
}

#about-attr-page .desktop-only1 .understand-image-one p,
#about-attr-page .desktop-only1 .understand-image-two p {
    font-size: 28px !important;
    line-height: 32px !important;
    margin-left: 30px !important;
    margin-right: 20px !important;
    white-space: normal !important;
}

#about-attr-page .desktop-only1 .about-attr-ul {
    width: 100% !important;
    max-width: none !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    box-sizing: border-box !important;
}

#about-attr-page .desktop-only1 .about-attr-ul li {
    font-size: 16px !important;
    line-height: 20px !important;
    margin-right: 0 !important;
    margin-bottom: 14px !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
}


/* Laptop with docked inspector */
@media screen and (min-width: 768px) and (max-width: 1100px) {

    #about-attr-page .desktop-only1 {
        display: block !important;
    }

    #about-attr-page .mobile-only {
        display: none !important;
    }

    #about-attr-page .desktop-only1 .understand-two-images {
        display: flex !important;
        width: calc(100% - 24px) !important;
        gap: 20px !important;
    }

    #about-attr-page .desktop-only1 .understand-img1,
    #about-attr-page .desktop-only1 .understand-img2 {
        width: calc(50% - 10px) !important;
        min-height: 520px !important;
        margin: 0 !important;
    }

    #about-attr-page .desktop-only1 .understand-image-one,
    #about-attr-page .desktop-only1 .understand-image-two {
        min-height: 520px !important;
    }

    #about-attr-page .desktop-only1 .understand-image-one p,
    #about-attr-page .desktop-only1 .understand-image-two p {
        font-size: 24px !important;
        line-height: 28px !important;
        margin-left: 24px !important;
    }

    #about-attr-page .desktop-only1 .about-attr-ul {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    #about-attr-page .desktop-only1 .about-attr-ul li {
        font-size: 14px !important;
        line-height: 17px !important;
        margin-bottom: 10px !important;
        padding-left: 20px !important;
    }
}


/* ---------------------------------------------------------
   2) hATTR-PN stage superscripts
   --------------------------------------------------------- */

#about-attr-page #progressive-cont-1 .stage-label sup,
#about-attr-page #progressive-cont-1 .steps-title sup,
#about-attr-page #progressive-cont-1 .suptxt-abt {
    font-family: "Kanit" !important;
    font-size: 55% !important;
    font-weight: 400 !important;
    line-height: 0 !important;
    position: relative !important;
    top: -0.55em !important;
    vertical-align: baseline !important;
}


/* ---------------------------------------------------------
   3) Callout superscripts
   --------------------------------------------------------- */

#about-attr-page [class*="callout"] sup,
#about-attr-page .genetic-testing-callout sup,
#about-attr-page .attr-callout-text sup,
#about-attr-page .callout-line1 sup {
    font-family: "Kanit" !important;
    font-size: 55% !important;
    font-weight: 400 !important;
    line-height: 0 !important;
    position: relative !important;
    top: -0.55em !important;
    vertical-align: baseline !important;
}


/* ---------------------------------------------------------
   4) Cardiac amyloidosis list:
   reduce excessive vertical spacing
   --------------------------------------------------------- */

#about-attr-page .slide .title {
    margin-bottom: 8px !important;
}

#about-attr-page .slide .bullet-row {
    margin-bottom: 7px !important;
}

#about-attr-page .slide .bullet-row + .bullet-row {
    margin-top: 0 !important;
}

#about-attr-page .slide .sub-bullets {
    margin-top: 2px !important;
    margin-bottom: 0 !important;
}

#about-attr-page .slide .bullet-row.sub {
    margin-bottom: 5px !important;
}

#about-attr-page .slide .bullet-text {
    line-height: 19px !important;
}

#about-attr-page .slide .sup {
    font-family: "Kanit" !important;
    font-size: 55% !important;
    font-weight: 400 !important;
    line-height: 0 !important;
    position: relative !important;
    top: -0.55em !important;
    vertical-align: baseline !important;
}


/* ---------------------------------------------------------
   5) ATTR HF callout superscript
   --------------------------------------------------------- */

#about-attr-page .about-attr-systemetic sup,
#about-attr-page .about-attr-systemetic p sup,
#about-attr-page .bgsysmeticbanner sup {
    font-family: "Kanit" !important;
    font-size: 55% !important;
    font-weight: 400 !important;
    line-height: 0 !important;
    position: relative !important;
    top: -0.55em !important;
    vertical-align: baseline !important;
}


/* ---------------------------------------------------------
   6) Mixed phenotype superscripts
   --------------------------------------------------------- */

#about-attr-page .about-mixed-hattr__title sup,
#about-attr-page .about-mixed-hattr__description sup,
#about-attr-page .about-mixed-hattr__description b sup {
    font-family: "Kanit" !important;
    font-size: 55% !important;
    font-weight: 400 !important;
    line-height: 0 !important;
    position: relative !important;
    top: -0.55em !important;
    vertical-align: baseline !important;
}


/* Keep mixed phenotype description regular */
#about-attr-page .about-mixed-hattr__description,
#about-attr-page .about-mixed-hattr__description b {
    font-family: "Kanit" !important;
    font-weight: 400 !important;
}


/* Actual mobile */
@media screen and (max-width: 767px) {

    #about-attr-page .desktop-only1 {
        display: none !important;
    }

    #about-attr-page .mobile-only {
        display: block !important;
    }
}


/* =========================================================
   CORRECTION PATCH
   ========================================================= */

#about-attr-page .desktop-only1 .understand-two-images {
    width: 100% !important;
    max-width: 1160px !important;
    gap: 15px !important;
    padding: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

#about-attr-page .desktop-only1 .understand-img1,
#about-attr-page .desktop-only1 .understand-img2 {
    flex: 0 1 573px !important;
    width: 100% !important;
    max-width: 573px !important;
    min-width: 0 !important;
    height: 328px !important;
    min-height: 328px !important;
    max-height: 344.59px !important;
    background-size: cover !important;
    background-position: center !important;
    border-radius: 30px 30px 30px 0 !important;
    overflow: hidden !important;
}

#about-attr-page .desktop-only1 .understand-image-one,
#about-attr-page .desktop-only1 .understand-image-two {
    width: 100% !important;
    max-width: 490px !important;
    min-height: 328px !important;
    height: 328px !important;
    display: flex !important;
    border-radius: 30px 30px 30px 0 !important;
    box-sizing: border-box !important;
}

#about-attr-page .desktop-only1 .understand-ptag,
#about-attr-page .desktop-only1 .understand-ptag1 {
    width: 100% !important;
    max-width: none !important;
    padding-right: 0 !important;
}

#about-attr-page .desktop-only1 .understand-image-one p,
#about-attr-page .desktop-only1 .understand-image-two p {
    font-size: 30px !important;
    line-height: 34px !important;
    margin-top: 21px !important;
    margin-left: 30px !important;
    margin-right: 20px !important;
    padding-top: 0 !important;
    white-space: normal !important;
}

#about-attr-page .desktop-only1 .about-attr-ul {
    width: calc(100% - 20px) !important;
    max-width: none !important;
    padding-top: 12px !important;
    padding-left: 20px !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
}

#about-attr-page .desktop-only1 .about-attr-ul li {
    font-size: 14px !important;
    line-height: 18px !important;
    margin-right: 0 !important;
    margin-bottom: 12px !important;
    padding-left: 20px !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
}

@media screen and (min-width: 768px) and (max-width: 1100px) {
    #about-attr-page .desktop-only1 { display: block !important; }
    #about-attr-page .mobile-only { display: none !important; }

    #about-attr-page .desktop-only1 .understand-two-images {
        display: flex !important;
        width: calc(100% - 20px) !important;
        max-width: 1160px !important;
        gap: 15px !important;
    }

    #about-attr-page .desktop-only1 .understand-img1,
    #about-attr-page .desktop-only1 .understand-img2 {
        flex: 1 1 0 !important;
        width: 0 !important;
        max-width: none !important;
        height: 328px !important;
        min-height: 328px !important;
    }

    #about-attr-page .desktop-only1 .understand-image-one,
    #about-attr-page .desktop-only1 .understand-image-two {
        max-width: none !important;
        height: 328px !important;
        min-height: 328px !important;
    }

    #about-attr-page .desktop-only1 .understand-image-one p,
    #about-attr-page .desktop-only1 .understand-image-two p {
        font-size: 24px !important;
        line-height: 28px !important;
        margin-left: 22px !important;
        margin-right: 14px !important;
    }

    #about-attr-page .desktop-only1 .about-attr-ul {
        padding-left: 16px !important;
        padding-right: 10px !important;
        padding-top: 8px !important;
    }

    #about-attr-page .desktop-only1 .about-attr-ul li {
        font-size: 12px !important;
        line-height: 15px !important;
        margin-bottom: 8px !important;
        padding-left: 18px !important;
    }
}

#about-attr-page p > b ~ sup,
#about-attr-page .callout-line1 ~ sup,
#about-attr-page [class*="callout"] sup {
    font-family: "Kanit" !important;
    font-size: 55% !important;
    font-weight: 400 !important;
    line-height: 0 !important;
    position: relative !important;
    top: -0.55em !important;
    vertical-align: baseline !important;
}

#about-attr-page .slide {
    margin: 0 !important;
    padding: 0 !important;
}

#about-attr-page .slide .title {
    margin: 0 0 8px !important;
    padding: 0 !important;
    line-height: 20px !important;
}

#about-attr-page .slide > .bullet-row {
    margin: 0 0 8px !important;
    padding: 0 !important;
    min-height: 0 !important;
}

#about-attr-page .slide .sub-bullets {
    margin: 0 0 0 50px !important;
    padding: 0 !important;
}

#about-attr-page .slide .sub-bullets .bullet-row {
    margin: 0 0 5px !important;
    padding: 0 !important;
    min-height: 0 !important;
}

#about-attr-page .slide .sub-bullets .bullet-row:last-child {
    margin-bottom: 0 !important;
}

#about-attr-page .slide .bullet-text {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 19px !important;
}

#about-attr-page .slide .bullet {
    margin: 0 !important;
    padding-top: 0 !important;
}

#about-attr-page .slide .sup {
    font-family: "Kanit" !important;
    font-size: 55% !important;
    font-weight: 400 !important;
    line-height: 0 !important;
    position: relative !important;
    top: -0.55em !important;
    vertical-align: baseline !important;
}

/* =========================================================
   FINAL EMERGENCY FIX — ATTR-CM + FOOTER CTA
   Additions are intentionally placed at the end so they win
   against earlier duplicate selectors and media queries.
   ========================================================= */


/* =========================================================
   1) CARDIAC AMYLOIDOSIS (ATTR-CM)
   Remove the large vertical gaps completely.
   ========================================================= */

body#about-attr-page #container-380ba759fc .slide {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

body#about-attr-page #container-380ba759fc .slide .title {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 0 8px 0 !important;
    padding: 20px 0 0 0 !important;
    font-family: "Kanit-SemiBold", sans-serif !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 22px !important;
}

body#about-attr-page #container-380ba759fc .slide > .bullet-row {
    display: flex !important;
    align-items: flex-start !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
    gap: 0 !important;
}

body#about-attr-page #container-380ba759fc .slide > .bullet-row + .bullet-row {
    margin-top: 0 !important;
}

body#about-attr-page #container-380ba759fc .slide .bullet {
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

body#about-attr-page #container-380ba759fc .slide .bullet.plus {
    width: 18px !important;
    flex: 0 0 18px !important;
    font-size: 0 !important;
    line-height: 20px !important;
}

body#about-attr-page #container-380ba759fc .slide .bullet.plus::before {
    display: block !important;
    content: "✦" !important;
    font-size: 9px !important;
    line-height: 20px !important;
}

body#about-attr-page #container-380ba759fc .slide .bullet-text {
    display: block !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: "Kanit", sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 20px !important;
}

body#about-attr-page #container-380ba759fc .slide .bold {
    font-family: "Kanit-Bold", sans-serif !important;
    font-weight: 400 !important;
}

body#about-attr-page #container-380ba759fc .slide .sub-bullets {
    display: block !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 2px 0 0 50px !important;
    padding: 0 !important;
}

body#about-attr-page #container-380ba759fc .slide .sub-bullets .bullet-row {
    display: flex !important;
    align-items: flex-start !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 0 5px 0 !important;
    padding: 0 !important;
    gap: 0 !important;
}

body#about-attr-page #container-380ba759fc .slide .sub-bullets .bullet-row:last-child {
    margin-bottom: 0 !important;
}

body#about-attr-page #container-380ba759fc .slide .bullet.dot {
    width: 18px !important;
    flex: 0 0 18px !important;
    font-size: 15px !important;
    line-height: 20px !important;
}

body#about-attr-page #container-380ba759fc .slide .sub-bullets .bullet-text {
    font-size: 16px !important;
    line-height: 20px !important;
}

/* References in ATTR-CM content */
body#about-attr-page #container-380ba759fc .slide .sup {
    display: inline !important;
    position: relative !important;
    top: -0.5em !important;
    margin-left: 1px !important;
    font-family: "Kanit", sans-serif !important;
    font-size: 55% !important;
    font-weight: 400 !important;
    line-height: 0 !important;
    vertical-align: baseline !important;
}


/* =========================================================
   2) FOOTER CTA TEXT
   Make card body text and references regular.
   ========================================================= */






/* =========================================================
   3) FOOTER CTA RESPONSIVENESS
   Keep the two cards side by side on laptop even when
   DevTools is docked. Prevent the footer from becoming tall.
   Keep the person visible on the left side of the image.
   ========================================================= */










/* Docked DevTools / smaller laptop width */



/* Actual mobile only */


/* =========================================================
   FOOTER CTA FINAL SIZE / ALIGNMENT CORRECTION
   - 490px maximum width for each card
   - 20px gap
   - centered under mixed-phenotype content
   - cards shrink proportionally when DevTools is docked
   ========================================================= */






/* Laptop / docked DevTools:
   keep the cards in one row and let both shrink equally. */



/* Slightly wider desktop */



/* Actual mobile only */


/* =========================================================
   FINAL 481px–990px RESPONSIVE FIX
   1. Keep desktop card diagrams horizontal up to 990px
   2. Scale cards, icons, arrows and text with the viewport
   3. Keep the footer background person visible
   4. Keep both footer CTA cards in one row and fluid
   ========================================================= */


/* ---------------------------------------------------------
   GENERAL TABLET / DOCKED-DEVTOOLS CONTENT WIDTH
   --------------------------------------------------------- */

@media screen and (min-width: 481px) and (max-width: 990px) {

    body#about-attr-page,
    body#about-attr-page .container-about-attr,
    body#about-attr-page .aboutattr-cards-container {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    body#about-attr-page .container-about-attr {
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        overflow: visible !important;
    }

    body#about-attr-page .aboutattr-cards-container {
        width: calc(100% - 24px) !important;
        max-width: none !important;
        height: auto !important;
        min-height: 0 !important;
        margin-left: 12px !important;
        margin-right: 12px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        overflow: hidden !important;
    }


    /* Keep all desktop flow diagrams horizontal */
    body#about-attr-page .aboutattr-cards-container .diagnosis-cards-items,
    body#about-attr-page .aboutattr.diagnosis-cards-items,
    body#about-attr-page #progressive-cont-1 .diagnosis-cards-items,
    body#about-attr-page #progressive-cont-2 .diagnosis-cards-items {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: flex-start !important;
        justify-content: space-between !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 12px 0 20px !important;
        gap: 4px !important;
        overflow: visible !important;
    }

    body#about-attr-page .aboutattr-cards-container .steps-card {
        flex: 1 1 0 !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 2px !important;
        box-sizing: border-box !important;
    }

    body#about-attr-page .aboutattr-cards-container .steps-card-icon {
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        text-align: center !important;
    }


    /* Desktop arrows remain visible; mobile/down arrows stay hidden */
    body#about-attr-page .aboutattr-cards-container .alt-right-arrow {
        display: block !important;
        flex: 0 0 20px !important;
        width: 20px !important;
        min-width: 20px !important;
        max-width: 20px !important;
        height: auto !important;
        margin: 90px 0 0 !important;
        object-fit: contain !important;
    }

    body#about-attr-page .aboutattr-cards-container .arrow-down-card {
        display: none !important;
    }


    /* Scale diagram images instead of forcing desktop dimensions */
    body#about-attr-page .aboutattr-cards-container .steps-icon,
    body#about-attr-page .aboutattr-cards-container img.attr.steps-icon {
        display: block !important;
        width: auto !important;
        max-width: 78% !important;
        height: 92px !important;
        max-height: 92px !important;
        min-height: 0 !important;
        margin: 0 auto 8px !important;
        object-fit: contain !important;
    }

    body#about-attr-page .aboutattr-cards-container .ab-icon-1,
    body#about-attr-page .aboutattr-cards-container .ab-icon-2,
    body#about-attr-page .aboutattr-cards-container .ab-icon-3,
    body#about-attr-page .aboutattr-cards-container .ab-icon-4,
    body#about-attr-page .aboutattr-cards-container .ab-icon-5 {
        width: auto !important;
        max-width: 78% !important;
        height: 92px !important;
        margin: 0 auto 8px !important;
    }


    /* Text must wrap by words, not individual letters */
    body#about-attr-page .aboutattr-cards-container .steps-title,
    body#about-attr-page .aboutattr-cards-container .steps-title2,
    body#about-attr-page .aboutattr-cards-container .stage-label {
        width: 100% !important;
        max-width: none !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 1px !important;
        padding-right: 1px !important;
        box-sizing: border-box !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        hyphens: none !important;
        text-align: center !important;
    }

    body#about-attr-page .aboutattr-cards-container .steps-title {
        font-size: clamp(10px, 1.55vw, 14px) !important;
        line-height: 1.18 !important;
    }

    body#about-attr-page .aboutattr-cards-container .steps-title2 {
        font-size: clamp(9px, 1.4vw, 13px) !important;
        line-height: 1.18 !important;
        padding-top: 6px !important;
    }

    body#about-attr-page .aboutattr-cards-container .stage-label {
        font-size: clamp(10px, 1.45vw, 13px) !important;
        line-height: 1.15 !important;
    }


    /* Scale plus signs and preserve progression layout */
    body#about-attr-page .aboutattr-cards-container .steps-plus-icon {
        display: block !important;
        width: 24px !important;
        height: 24px !important;
        margin: 8px auto !important;
        object-fit: contain !important;
    }


    /* Keep desktop content variants active until 990px */
    body#about-attr-page .desktop-only1,
    body#about-attr-page .desktop-only {
        display: block !important;
    }

    body#about-attr-page .mobile-only {
        display: none !important;
    }
}


/* Slightly tighter scaling for the narrowest part of this range */
@media screen and (min-width: 481px) and (max-width: 650px) {

    body#about-attr-page .aboutattr-cards-container {
        width: calc(100% - 12px) !important;
        margin-left: 6px !important;
        margin-right: 6px !important;
        padding-left: 4px !important;
        padding-right: 4px !important;
    }

    body#about-attr-page .aboutattr-cards-container .diagnosis-cards-items,
    body#about-attr-page .aboutattr.diagnosis-cards-items {
        gap: 1px !important;
    }

    body#about-attr-page .aboutattr-cards-container .alt-right-arrow {
        flex-basis: 14px !important;
        width: 14px !important;
        min-width: 14px !important;
        max-width: 14px !important;
        margin-top: 82px !important;
    }

    body#about-attr-page .aboutattr-cards-container .steps-icon,
    body#about-attr-page .aboutattr-cards-container img.attr.steps-icon,
    body#about-attr-page .aboutattr-cards-container .ab-icon-1,
    body#about-attr-page .aboutattr-cards-container .ab-icon-2,
    body#about-attr-page .aboutattr-cards-container .ab-icon-3,
    body#about-attr-page .aboutattr-cards-container .ab-icon-4,
    body#about-attr-page .aboutattr-cards-container .ab-icon-5 {
        max-width: 82% !important;
        height: 72px !important;
        max-height: 72px !important;
    }

    body#about-attr-page .aboutattr-cards-container .steps-title {
        font-size: 9px !important;
        line-height: 1.16 !important;
    }

    body#about-attr-page .aboutattr-cards-container .steps-title2 {
        font-size: 8px !important;
        line-height: 1.16 !important;
    }

    body#about-attr-page .aboutattr-cards-container .stage-label {
        font-size: 9px !important;
    }
}


/* ---------------------------------------------------------
   FOOTER CTA — 490px CARDS, 20px GAP, RESPONSIVE SHRINKING
   Keep the background person visible when DevTools is docked.
   --------------------------------------------------------- */

body#about-attr-page #text-a301e56879 {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}






/* DevTools/tablet width: preserve the person and shrink cards equally */



/* Keep CTA cards horizontal from 481px through 768px as requested */



/* Actual phone layout only below 481px */




/* =========================================================
   FINAL BREAKPOINT CHANGE
   Mobile layout from 0px–990px
   Desktop layout from 991px+
   ========================================================= */

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

  /* Hide desktop variants */
  #about-attr-page .desktop-only,
  #about-attr-page .desktop-only1{
      display:none !important;
  }

  /* Show mobile variants */
  #about-attr-page .mobile-only{
      display:block !important;
  }

  /* Mobile cards occupy viewport width */
  #about-attr-page .aboutattr-cards-container,
  #about-attr-page .container-about-attr{
      width:100% !important;
      max-width:100% !important;
      margin-left:auto !important;
      margin-right:auto !important;
      padding-left:12px !important;
      padding-right:12px !important;
      box-sizing:border-box !important;
  }

  /* Footer CTA stacks on tablet/mobile too */
  

  
}

/* Explicit desktop */
@media screen and (min-width:991px){

  #about-attr-page .desktop-only,
  #about-attr-page .desktop-only1{
      display:block !important;
  }

  #about-attr-page .mobile-only{
      display:none !important;
  }
}

/* =========================================================
   TRUE MOBILE STRUCTURE FROM 0px TO 990px
   This overrides all earlier tablet/desktop flow rules.
   ========================================================= */

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

  /* -------------------------------------------------------
     GENERAL CARD CONTAINERS
     ------------------------------------------------------- */

  body#about-attr-page .aboutattr-cards-container {
    width: calc(100% - 30px) !important;
    max-width: 560px !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 24px auto !important;
    padding: 20px 16px 34px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  /* Every process diagram must become a vertical flow */
  body#about-attr-page .aboutattr-cards-container .diagnosis-cards-items,
  body#about-attr-page .aboutattr.diagnosis-cards-items,
  body#about-attr-page #progressive-cont-1 .diagnosis-cards-items,
  body#about-attr-page #progressive-cont-2 .diagnosis-cards-items {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 10px 0 20px !important;
    gap: 0 !important;
    overflow: visible !important;
  }

  body#about-attr-page .aboutattr-cards-container .steps-card {
    display: block !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 430px !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }

  body#about-attr-page .aboutattr-cards-container .steps-card-icon {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: 0 !important;
    text-align: center !important;
  }

  /* -------------------------------------------------------
     IMAGES
     ------------------------------------------------------- */

  body#about-attr-page .aboutattr-cards-container .steps-icon,
  body#about-attr-page .aboutattr-cards-container img.attr.steps-icon,
  body#about-attr-page .aboutattr-cards-container .ab-icon-1,
  body#about-attr-page .aboutattr-cards-container .ab-icon-2,
  body#about-attr-page .aboutattr-cards-container .ab-icon-3,
  body#about-attr-page .aboutattr-cards-container .ab-icon-4,
  body#about-attr-page .aboutattr-cards-container .ab-icon-5 {
    display: block !important;
    width: auto !important;
    max-width: 220px !important;
    height: 150px !important;
    max-height: 150px !important;
    min-height: 0 !important;
    margin: 10px auto 16px !important;
    object-fit: contain !important;
  }

  /* Small body-deposit icon may remain narrower */
  body#about-attr-page .aboutattr-cards-container .ab-icon-5 {
    max-width: 105px !important;
  }

  /* -------------------------------------------------------
     TEXT
     ------------------------------------------------------- */

  body#about-attr-page .aboutattr-cards-container .steps-title,
  body#about-attr-page .aboutattr-cards-container .steps-title2,
  body#about-attr-page .aboutattr-cards-container .stage-label {
    display: block !important;
    width: 100% !important;
    max-width: 390px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    box-sizing: border-box !important;
    text-align: center !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }

  body#about-attr-page .aboutattr-cards-container .steps-title {
    font-size: 18px !important;
    line-height: 23px !important;
  }

  body#about-attr-page .aboutattr-cards-container .steps-title2 {
    font-size: 17px !important;
    line-height: 22px !important;
    padding-top: 8px !important;
  }

  body#about-attr-page .aboutattr-cards-container .stage-label {
    font-size: 16px !important;
    line-height: 20px !important;
  }

  /* -------------------------------------------------------
     ARROWS
     Hide horizontal arrows and use vertical/down arrows.
     ------------------------------------------------------- */

  body#about-attr-page .aboutattr-cards-container > .alt-right-arrow,
  body#about-attr-page .aboutattr-cards-container .diagnosis-cards-items > .alt-right-arrow,
  body#about-attr-page .aboutattr-cards-container .aboutattr.diagnosis-cards-items > .alt-right-arrow {
    display: none !important;
  }

  body#about-attr-page .aboutattr-cards-container .arrow-down-card {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    height: 82px !important;
    margin: 6px auto 10px !important;
  }

  body#about-attr-page .aboutattr-cards-container .arrow-down-card img {
    display: block !important;
    width: 40px !important;
    height: 58px !important;
    margin: 0 auto !important;
    object-fit: contain !important;
  }

  /* Some progression blocks do not contain arrow-down-card.
     Rotate their desktop arrows instead of removing them. */
  body#about-attr-page #progressive-cont-1 .diagnosis-cards-items > .alt-right-arrow,
  body#about-attr-page #progressive-cont-2 .diagnosis-cards-items > .alt-right-arrow {
    display: block !important;
    width: 42px !important;
    height: auto !important;
    margin: 22px auto !important;
    transform: rotate(90deg) !important;
    object-fit: contain !important;
  }

  body#about-attr-page .aboutattr-cards-container .steps-plus-icon {
    width: 38px !important;
    height: 38px !important;
    margin: 16px auto !important;
  }

  /* -------------------------------------------------------
     SPECIFIC HEADINGS
     ------------------------------------------------------- */

  body#about-attr-page .at-source-heading,
  body#about-attr-page .cards-footer-header {
    display: block !important;
    width: 100% !important;
    margin: 0 auto 14px !important;
    padding: 0 10px !important;
    box-sizing: border-box !important;
    text-align: center !important;
    font-size: 22px !important;
    line-height: 27px !important;
  }

  /* -------------------------------------------------------
     SIDEBAR / PAGE OFFSET
     No desktop sidebar offset in mobile/tablet mode.
     ------------------------------------------------------- */

  

  /* Keep dedicated mobile variants */
  body#about-attr-page .desktop-only,
  body#about-attr-page .desktop-only1 {
    display: none !important;
  }

  body#about-attr-page .mobile-only {
    display: block !important;
  }
}

/* Smaller mobile sizing */
@media screen and (max-width: 600px) {

  body#about-attr-page .aboutattr-cards-container {
    width: calc(100% - 20px) !important;
    padding: 16px 10px 28px !important;
  }

  body#about-attr-page .aboutattr-cards-container .steps-icon,
  body#about-attr-page .aboutattr-cards-container img.attr.steps-icon,
  body#about-attr-page .aboutattr-cards-container .ab-icon-1,
  body#about-attr-page .aboutattr-cards-container .ab-icon-2,
  body#about-attr-page .aboutattr-cards-container .ab-icon-3,
  body#about-attr-page .aboutattr-cards-container .ab-icon-4 {
    max-width: 190px !important;
    height: 135px !important;
    max-height: 135px !important;
  }

  body#about-attr-page .aboutattr-cards-container .steps-title {
    font-size: 17px !important;
    line-height: 22px !important;
  }

  body#about-attr-page .aboutattr-cards-container .steps-title2 {
    font-size: 16px !important;
    line-height: 21px !important;
  }
}

/* Desktop restored only at 991px and above */
@media screen and (min-width: 991px) {

  body#about-attr-page .desktop-only,
  body#about-attr-page .desktop-only1 {
    display: block !important;
  }

  body#about-attr-page .mobile-only {
    display: none !important;
  }
}

/* =========================================================
   ON THIS PAGE — REAL DROPDOWN FIX (matches actual DOM)
   Replaces the broken #menucontainer-based rule above,
   which never matched anything since #menucontainer
   doesn't exist in the authored markup.
   ========================================================= */

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

  /* Outer wrapper: no card chrome, just spacing */
  body#about-attr-page .aboutattr-cards-container.on-this-page-menu {
    width: calc(100% - 24px) !important;
    max-width: 560px !important;
    height: auto !important;
    min-height: 0 !important;

    margin: 18px auto 28px !important;
    padding: 0 !important;

    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    overflow: visible !important;
    box-sizing: border-box !important;
  }

  body#about-attr-page .aboutattr-cards-container.on-this-page-menu::before,
  body#about-attr-page .aboutattr-cards-container.on-this-page-menu::after {
    display: none !important;
    content: none !important;
  }

  /* Structural wrappers: no visual styling of their own */
  body#about-attr-page .on-this-page-menu .diagnosis-cards-items,
  body#about-attr-page .on-this-page-menu .steps-card {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
  }

  /* THE PILL — "ON THIS PAGE" header row */
  body#about-attr-page .on-this-page-menu .steps-card-icon:first-child {
    position: relative !important;

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

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

    margin: 0 !important;
    padding: 16px 52px 16px 24px !important;

    background: #E9EBF3 !important;
    border: 0 !important;
    border-radius: 14px !important;
    box-shadow: none !important;

    color: #00215F !important;
    font-family: "Kanit-Medium", "Kanit", sans-serif !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
    text-align: left !important;

    cursor: pointer !important;
    box-sizing: border-box !important;
  }

  /* Chevron */
  body#about-attr-page .on-this-page-menu .steps-card-icon:first-child::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    right: 24px !important;

    display: block !important;
    width: 11px !important;
    height: 11px !important;

    border-right: 3px solid #00215F !important;
    border-bottom: 3px solid #00215F !important;

    transform: translateY(-65%) rotate(45deg) !important;
    transition: transform 0.2s ease !important;
  }

  /* Flip chevron when open (covers both an aria-expanded state
     and a .menu-expanded class, whichever your toggle JS uses) */
  body#about-attr-page .on-this-page-menu .steps-card-icon:first-child[aria-expanded="true"]::after,
  body#about-attr-page .on-this-page-menu.menu-expanded .steps-card-icon:first-child::after {
    transform: translateY(-35%) rotate(-135deg) !important;
  }

  /* Collapsed by default: hide every link below the header */
  body#about-attr-page .on-this-page-menu .steps-card-icon:not(:first-child) {
    display: none !important;
  }

  /* Expanded state reveals the links */
  body#about-attr-page .on-this-page-menu:has(.steps-card-icon[aria-expanded="true"]) .steps-card-icon:not(:first-child),
  body#about-attr-page .on-this-page-menu.menu-expanded .steps-card-icon:not(:first-child) {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 12px 24px !important;
    color: #17396d !important;
    background: #F5F6FA !important;
    font-family: "Kanit", sans-serif !important;
    font-size: 15px !important;
    line-height: 1.3 !important;
    text-align: left !important;
    box-sizing: border-box !important;
  }
}


/* =========================================================
   FRENCH ONLY — ATTR SUSPECTED CALLOUT BOX
   Does not affect the English page
   ========================================================= */

html[lang^="fr"] body#about-attr-page .attr-suspected-box {
  display: flex !important;
  align-items: flex-start !important;
  width: 100% !important;
  max-width: 1001px !important;
  min-height: 240px !important;
  height: auto !important;
  box-sizing: border-box !important;

  gap: 12px !important;
  margin: 30px auto 0 !important;
  padding: 20px 24px 40px !important;

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

/* Lightbulb column */
html[lang^="fr"] body#about-attr-page .attr-suspected-icon-wrap {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;

  flex: 0 0 36px !important;
  width: 36px !important;
  min-width: 36px !important;
  height: auto !important;

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

/* Lightbulb container */
html[lang^="fr"] body#about-attr-page .attr-suspected-icon {
  display: block !important;
  width: 36px !important;
  height: auto !important;

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

  font-size: 0 !important;
  line-height: 0 !important;
}

/* Lightbulb image */
html[lang^="fr"] body#about-attr-page .attr-suspected-icon img {
  display: block !important;
  width: 32px !important;
  height: 32px !important;
  max-width: none !important;
  object-fit: contain !important;

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

/* Text content column */
html[lang^="fr"] body#about-attr-page .attr-suspected-content {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;

  min-width: 0 !important;
  width: auto !important;

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

/* Bold heading */
html[lang^="fr"] body#about-attr-page .attr-suspected-title {
  display: block !important;

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

  color: #00215F !important;
  font-family: "Kanit-SemiBold", "Kanit", sans-serif !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;

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

/* Prevent the inner bold tag from changing the layout */
html[lang^="fr"] body#about-attr-page .attr-suspected-title b {
  color: inherit !important;
  font-family: "Kanit-SemiBold", "Kanit", sans-serif !important;
  font-size: inherit !important;
  font-weight: 600 !important;
  line-height: inherit !important;
}

/* Reference number */
html[lang^="fr"] body#about-attr-page .attr-sup {
  display: inline !important;
  margin-left: 2px !important;
}

html[lang^="fr"] body#about-attr-page .attr-sup sup {
  position: relative !important;
  top: -0.35em !important;
  vertical-align: baseline !important;

  font-family: "Kanit", "Kanit", sans-serif !important;
  font-size: 60% !important;
  line-height: 0 !important;
}

/* Bullet lines */
html[lang^="fr"] body#about-attr-page .attr-suspected-line,
html[lang^="fr"] body#about-attr-page .attr-suspected-line.sub {
  display: block !important;

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

  color: #00215F !important;
  font-family: "Kanit", "Kanit", sans-serif !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;

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

/* Remove spacing after final bullet */
html[lang^="fr"] body#about-attr-page .attr-suspected-line:last-child,
html[lang^="fr"] body#about-attr-page .attr-suspected-line.sub:last-child {
  margin-bottom: 0 !important;
}


/* =========================================================
   FRENCH ONLY — TABLET/MOBILE
   ========================================================= */

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

  html[lang^="fr"] body#about-attr-page .attr-suspected-box {
    min-height: 0 !important;
    gap: 12px !important;
    margin-top: 24px !important;
    padding: 16px !important;
  }

  html[lang^="fr"] body#about-attr-page .attr-suspected-icon-wrap {
    flex-basis: 30px !important;
    width: 30px !important;
    min-width: 30px !important;
  }

  html[lang^="fr"] body#about-attr-page .attr-suspected-icon {
    width: 30px !important;
  }

  html[lang^="fr"] body#about-attr-page .attr-suspected-icon img {
    width: 28px !important;
    height: 28px !important;
  }

  html[lang^="fr"] body#about-attr-page .attr-suspected-title,
  html[lang^="fr"] body#about-attr-page .attr-suspected-line,
  html[lang^="fr"] body#about-attr-page .attr-suspected-line.sub {
    font-size: 16px !important;
    line-height: 1.35 !important;
  }
}


/* =========================================================
   FRENCH ONLY — SMALL MOBILE
   ========================================================= */

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

  html[lang^="fr"] body#about-attr-page .attr-suspected-box {
    gap: 10px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 14px !important;
    border-radius: 16px 16px 16px 0 !important;
  }

  html[lang^="fr"] body#about-attr-page .attr-suspected-icon-wrap {
    flex-basis: 26px !important;
    width: 26px !important;
    min-width: 26px !important;
  }

  html[lang^="fr"] body#about-attr-page .attr-suspected-icon,
  html[lang^="fr"] body#about-attr-page .attr-suspected-icon img {
    width: 24px !important;
    height: 24px !important;
  }

  html[lang^="fr"] body#about-attr-page .attr-suspected-title,
  html[lang^="fr"] body#about-attr-page .attr-suspected-line,
  html[lang^="fr"] body#about-attr-page .attr-suspected-line.sub {
    font-size: 15px !important;
    line-height: 1.35 !important;
  }
}


/* =========================================================
   FRENCH ONLY — ABOUT MIXED-PHENOTYPE hATTR
   ========================================================= */

html[lang^="fr"] body#about-attr-page .about-mixed-hattr {
  width: 100% !important;
  max-width: 1100px !important;
  margin: 55px auto 0 !important;
  padding: 0 20px !important;
  box-sizing: border-box !important;
  text-align: center !important;
}

/* Main heading */
html[lang^="fr"] body#about-attr-page .about-mixed-hattr__heading {
  margin: 0 0 22px !important;
  padding: 0 !important;

  color: #00215F !important;
  font-family: "Kanit-SemiBold", "Kanit", sans-serif !important;
  font-size: 34px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;

  text-align: center !important;
}

/* Uppercase title */
html[lang^="fr"] body#about-attr-page .about-mixed-hattr__title {
  display: block !important;
  width: 100% !important;
  max-width: 1000px !important;

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

  color: #00215F !important;
  font-family: "Kanit-SemiBold", "Kanit", sans-serif !important;
  font-size: 24px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;

  text-align: center !important;
  
  white-space: normal !important;
}

/* Description */
html[lang^="fr"] body#about-attr-page .about-mixed-hattr__description {
  display: block !important;
  width: 100% !important;
  max-width: 1080px !important;

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

  color: #151515 !important;
  font-family: "Kanit", "Kanit", sans-serif !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;

  text-align: center !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
}

/* The HTML contains a b tag, but EN appearance is regular */
html[lang^="fr"] body#about-attr-page .about-mixed-hattr__description b {
  color: inherit !important;
  font-family: "Kanit", "Kanit", sans-serif !important;
  font-size: inherit !important;
  font-weight: 400 !important;
  line-height: inherit !important;
}

/* References */
html[lang^="fr"] body#about-attr-page .about-mixed-hattr sup {
  position: relative !important;
  top: -0.45em !important;
  vertical-align: baseline !important;

  font-family: "Kanit", "Kanit", sans-serif !important;
  font-size: 55% !important;
  line-height: 0 !important;
}


/* =========================================================
   FRENCH ONLY — TABLET
   ========================================================= */

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

  html[lang^="fr"] body#about-attr-page .about-mixed-hattr {
    margin-top: 40px !important;
    padding: 0 20px !important;
  }

  html[lang^="fr"] body#about-attr-page .about-mixed-hattr__heading {
    margin-bottom: 18px !important;
    font-size: 30px !important;
    line-height: 1.2 !important;
  }

  html[lang^="fr"] body#about-attr-page .about-mixed-hattr__title {
    margin-bottom: 16px !important;
    font-size: 21px !important;
    line-height: 1.3 !important;
  }

  html[lang^="fr"] body#about-attr-page .about-mixed-hattr__description {
    font-size: 18px !important;
    line-height: 1.4 !important;
  }
}


/* =========================================================
   FRENCH ONLY — MOBILE
   ========================================================= */

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

  html[lang^="fr"] body#about-attr-page .about-mixed-hattr {
    margin-top: 30px !important;
    padding: 0 15px !important;
  }

  html[lang^="fr"] body#about-attr-page .about-mixed-hattr__heading {
    margin-bottom: 16px !important;
    font-size: 25px !important;
    line-height: 1.2 !important;
  }

  html[lang^="fr"] body#about-attr-page .about-mixed-hattr__title {
    margin-bottom: 14px !important;
    font-size: 18px !important;
    line-height: 1.3 !important;
  }

  html[lang^="fr"] body#about-attr-page .about-mixed-hattr__description {
    font-size: 16px !important;
    line-height: 1.4 !important;
  }
}






/* ================= FR HERO — FINAL FULL-BLEED FIX ================= */
@media screen and (min-width: 992px) {

  html[lang="fr"] body#about-attr-page #container-3494b00441,
  html[lang="fr"] body#about-attr-page #container-3494b00441 > .text,
  html[lang="fr"] body#about-attr-page #about-cards-2 {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  html[lang="fr"] body#about-attr-page #about-cards-2 .treatment-diagnosis-banner {
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    top: 0 !important;

    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;

    margin-left: -50vw !important;
    margin-right: -50vw !important;

    height: 340px !important;
    min-height: 340px !important;
    padding: 0 !important;

    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;

    transform: none !important;
    box-sizing: border-box !important;
  }

  html[lang="fr"] body#about-attr-page #about-cards-2 .treatment.banner-content {
    width: 100% !important;
    max-width: 1265px !important;
    height: 100% !important;
    margin: 0 auto !important;
    padding-left: 30px !important;
    padding-right: 30px !important;
    box-sizing: border-box !important;
  }
}

html[lang="fr"] body#about-attr-page {
  overflow-x: hidden !important;
}
/* ================= END FR HERO FIX ================= */



/* ================= FR — FIX DUPLICATE CALLOUT BOX ================= */
html[lang^="fr"] body#about-attr-page
#text-fbe6e9d58e.cmp-text:has(.text > #text-fbe6e9d58e) {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

html[lang^="fr"] body#about-attr-page
#text-fbe6e9d58e.cmp-text:has(.text > #text-fbe6e9d58e)::before,
html[lang^="fr"] body#about-attr-page
#text-fbe6e9d58e.cmp-text:has(.text > #text-fbe6e9d58e)::after {
  content: none !important;
  display: none !important;
}

html[lang^="fr"] body#about-attr-page
#text-fbe6e9d58e.cmp-text:has(.text > #text-fbe6e9d58e) > .text {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}
/* ================= END FR DUPLICATE CALLOUT FIX ================= */


/* ================= FR HERO — ANCESTOR OFFSET RESET ================= */
@media screen and (min-width: 992px) {

  html[lang="fr"] body#about-attr-page
  .aem-GridColumn:has(#container-3494b00441) {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    float: none !important;
    left: auto !important;
    right: auto !important;
    box-sizing: border-box !important;
  }

  html[lang="fr"] body#about-attr-page #container-3494b00441,
  html[lang="fr"] body#about-attr-page #container-3494b00441 > .text,
  html[lang="fr"] body#about-attr-page #about-cards-2 {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    box-sizing: border-box !important;
  }

  html[lang="fr"] body#about-attr-page #about-cards-2 .treatment-diagnosis-banner {
    position: relative !important;
    width: 100vw !important;
    max-width: 100vw !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    height: 340px !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    box-sizing: border-box !important;
  }
}


/* ================= FR HERO — FIX ID COLLISION (v2, parent-independent breakout) ================= */
@media screen and (min-width: 992px) {

  html[lang^="fr"] body#about-attr-page
  .cmp-container:has(> .text #about-cards-2):has(.treatment-diagnosis-banner) {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  html[lang^="fr"] body#about-attr-page
  .cmp-container:has(> .text #about-cards-2):has(.treatment-diagnosis-banner)
  > .text:has(#about-cards-2) {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  html[lang^="fr"] body#about-attr-page
  #about-cards-2 .treatment-diagnosis-banner {
    position: relative !important;
    left: 50% !important;
    right: auto !important;

    width: 100vw !important;
    max-width: 100vw !important;

    margin-left: -50vw !important;
    margin-right: 0 !important;

    height: 340px !important;
    padding: 0 !important;

    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;

    transform: none !important;
    box-sizing: border-box !important;
  }

  html[lang^="fr"] body#about-attr-page
  #about-cards-2 .treatment.banner-content {
    position: relative !important;
    left: auto !important;
    margin-left: 0 !important;

    width: 100% !important;
    max-width: 1265px !important;
    margin: 0 auto !important;
    padding-left: 30px !important;
    padding-right: 30px !important;
    box-sizing: border-box !important;
  }
}

html[lang^="fr"] body#about-attr-page {
  overflow-x: hidden !important;
}
/* ================= END FIX v2 ================= */


/* ================= FR — CTA BUTTON SINGLE-LINE (DESKTOP ONLY) ================= */


/* Narrower desktop / docked DevTools: scale text down a touch further
   so both buttons still fit on one line without forcing horizontal scroll */

/* ================= END FR CTA BUTTON FIX ================= */



/* ============================================================================
   FR PATHOPHYSIOLOGY — DEFINITIVE FIX (single source of truth)
   Structure: #container-f1c43da3c1 > .text > (#content-sec-1 | #about-cards-1 | #this-page)
   Desktop: 224px nav + 14px gap + 1fr content (max 1265px), matches EN exactly.
   All earlier FR overrides for this container have been removed to avoid
   conflicting !important rules stacking on top of each other.
   ============================================================================ */

/* --- DESKTOP (>=992px): 3-column grid, exact EN proportions --- */
@media screen and (min-width: 992px) {

  html[lang^="fr"] body#about-attr-page div#container-f1c43da3c1.cmp-container {
    display: grid !important;
    grid-template-columns: 224px minmax(0, 1fr) !important;
    grid-template-areas:
      "nav text"
      "nav diagram" !important;
    column-gap: 14px !important;
    row-gap: 0 !important;
    align-items: start !important;

    width: 100% !important;
    max-width: 1265px !important;
    margin: 0 auto !important;
    padding: 0 !important;

    position: static !important;
    float: none !important;
    background-color: #FAFAFA !important;
  }

  html[lang^="fr"] body#about-attr-page div#container-f1c43da3c1.cmp-container > .text {
    display: block !important;
    position: static !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Nav sidebar -> grid area "nav" */
  html[lang^="fr"] body#about-attr-page div#container-f1c43da3c1.cmp-container > .text:has(#this-page) {
    grid-area: nav !important;
    width: 224px !important;
    max-width: 224px !important;
    min-width: 224px !important;
  }

  /* Heading/paragraph -> grid area "text" */
  html[lang^="fr"] body#about-attr-page div#container-f1c43da3c1.cmp-container > .text:has(#content-sec-1) {
    grid-area: text !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  /* "À la source" diagram -> grid area "diagram" */
  html[lang^="fr"] body#about-attr-page div#container-f1c43da3c1.cmp-container > .text:has(#about-cards-1) {
    grid-area: diagram !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Sidebar visual card */
  html[lang^="fr"] body#about-attr-page #container-f1c43da3c1 #this-page .aboutattr-cards-container {
    position: sticky !important;
    top: 20px !important;
    left: auto !important;
    right: auto !important;

    display: block !important;
    width: 224px !important;
    max-width: 224px !important;
    height: auto !important;
    min-height: 352.5px !important;

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

    background-color: #E9EBF2 !important;
    border: none !important;
    border-radius: 0px 0px 25px 0px !important;
    box-shadow: none !important;

    box-sizing: border-box !important;
    overflow: visible !important;
    z-index: 1 !important;
  }

  html[lang^="fr"] body#about-attr-page #container-f1c43da3c1 #this-page .diagnosis-cards-items,
  html[lang^="fr"] body#about-attr-page #container-f1c43da3c1 #this-page .steps-card {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html[lang^="fr"] body#about-attr-page #container-f1c43da3c1 #this-page .steps-card-icon {
    display: block !important;
    width: 100% !important;
    margin: 0 0 12px !important;
    padding: 0 !important;

    color: #00215F !important;
    font-family: "Kanit", sans-serif !important;
    font-size: 18px !important;
    font-weight: normal !important;
    line-height: 20px !important;
    text-align: left !important;
    white-space: normal !important;
  }

  html[lang^="fr"] body#about-attr-page #container-f1c43da3c1 #this-page .steps-card-icon:first-child {
    font-family: "Kanit-Medium", sans-serif !important;
    font-size: 21px !important;
    padding-bottom: 4px !important;
  }

  html[lang^="fr"] body#about-attr-page #container-f1c43da3c1 #this-page .steps-card-icon:nth-child(2) {
  }

  html[lang^="fr"] body#about-attr-page #container-f1c43da3c1 #this-page img,
  html[lang^="fr"] body#about-attr-page #container-f1c43da3c1 #this-page .alt-right-arrow {
    display: none !important;
  }

  /* Heading/paragraph content */
  html[lang^="fr"] body#about-attr-page #container-f1c43da3c1 #content-sec-1 {
    background: transparent !important;
  }

  html[lang^="fr"] body#about-attr-page #container-f1c43da3c1 #content-sec-1 .container-about-attr {
    width: 100% !important;
    max-width: 1001px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
  }

  html[lang^="fr"] body#about-attr-page #container-f1c43da3c1 #content-sec-1 .source-damage {
    width: 100% !important;
    max-width: 923px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  /* Diagram card */
  html[lang^="fr"] body#about-attr-page #container-f1c43da3c1 #about-cards-1 .aboutattr-cards-container {
    display: block !important;
    width: 100% !important;
    max-width: 1001px !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 20px auto 25px !important;
    padding: 0 !important;

    background: #FFFFFF !important;
    border: 1px solid #606FB4 !important;
    border-radius: 30px 30px 30px 0 !important;
    box-shadow: 0 0 15px rgba(0,0,0,0.11) !important;
    box-sizing: border-box !important;
  }

  html[lang^="fr"] body#about-attr-page #container-f1c43da3c1 #about-cards-1 .diagnosis-cards-items {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    justify-content: center !important;

    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 18px 25px !important;
    box-sizing: border-box !important;
  }

  html[lang^="fr"] body#about-attr-page #container-f1c43da3c1 #about-cards-1 .steps-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html[lang^="fr"] body#about-attr-page #container-f1c43da3c1 #about-cards-1 .steps-card-icon {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  html[lang^="fr"] body#about-attr-page #container-f1c43da3c1 #about-cards-1 img.steps-icon,
  html[lang^="fr"] body#about-attr-page #container-f1c43da3c1 #about-cards-1 img.attr.steps-icon {
    display: block !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: none !important;
    margin: 0 auto 10px !important;
    object-fit: contain !important;
    transform: none !important;
  }

  html[lang^="fr"] body#about-attr-page #container-f1c43da3c1 #about-cards-1 .ab-icon-1 { width: 134px !important; height: 100px !important; }
  html[lang^="fr"] body#about-attr-page #container-f1c43da3c1 #about-cards-1 .ab-icon-2 { width: 133px !important; height: 117px !important; }
  html[lang^="fr"] body#about-attr-page #container-f1c43da3c1 #about-cards-1 .ab-icon-3 { width: 164px !important; height: 107.74px !important; }
  html[lang^="fr"] body#about-attr-page #container-f1c43da3c1 #about-cards-1 .ab-icon-4 { width: 143.79px !important; height: 110px !important; margin-top: 2.3em !important; }
  html[lang^="fr"] body#about-attr-page #container-f1c43da3c1 #about-cards-1 .ab-icon-5 { width: 53px !important; height: 122px !important; }

  html[lang^="fr"] body#about-attr-page #container-f1c43da3c1 #about-cards-1 img.alt-right-arrow {
    display: block !important;
    flex: 0 0 28px !important;
    width: 28px !important;
    max-width: 28px !important;
    height: auto !important;
    margin: 0 5px !important;
    align-self: center !important;
    transform: none !important;
  }

  html[lang^="fr"] body#about-attr-page #container-f1c43da3c1 .at-source-heading {
    font-family: "Kanit-SemiBold" !important;
    font-size: 18px !important;
    line-height: 20px !important;
    color: #00215F !important;
    text-align: center !important;
    display: block !important;
    width: 100% !important;
  }
}

/* --- MOBILE/TABLET (<992px): stack, nav becomes accordion pill --- */
@media screen and (max-width: 991px) {

  html[lang^="fr"] body#about-attr-page div#container-f1c43da3c1.cmp-container {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html[lang^="fr"] body#about-attr-page div#container-f1c43da3c1.cmp-container > .text {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html[lang^="fr"] body#about-attr-page div#container-f1c43da3c1.cmp-container > .text:has(#this-page)     { order: -1 !important; }
  html[lang^="fr"] body#about-attr-page div#container-f1c43da3c1.cmp-container > .text:has(#content-sec-1) { order: 0 !important; }
  html[lang^="fr"] body#about-attr-page div#container-f1c43da3c1.cmp-container > .text:has(#about-cards-1) { order: 1 !important; }

  html[lang^="fr"] body#about-attr-page #container-f1c43da3c1 #this-page .aboutattr-cards-container {
    position: static !important;
    width: calc(100% - 32px) !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 12px 16px 5px !important;
    padding: 0 !important;

    background: #edf0f7 !important;
    border: 0 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  html[lang^="fr"] body#about-attr-page #container-f1c43da3c1 #this-page .diagnosis-cards-items,
  html[lang^="fr"] body#about-attr-page #container-f1c43da3c1 #this-page .steps-card {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }

  html[lang^="fr"] body#about-attr-page #container-f1c43da3c1 #this-page .steps-card-icon:first-child {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 11px 16px !important;

    color: #00215F !important;
    background: #E9EBF3 !important;
    border-radius: 12px !important;

    font-size: 21px !important;
    font-weight: 700 !important;
    text-align: left !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
  }

  html[lang^="fr"] body#about-attr-page #container-f1c43da3c1 #this-page .steps-card-icon:first-child::after {
    content: "" !important;
    display: block !important;
    flex: 0 0 12px !important;
    width: 12px !important;
    height: 12px !important;
    margin: -5px 4px 0 16px !important;
    border-right: 3px solid #09285c !important;
    border-bottom: 3px solid #09285c !important;
    transform: rotate(45deg) !important;
  }

  html[lang^="fr"] body#about-attr-page #container-f1c43da3c1 #this-page.menu-expanded .steps-card-icon:first-child::after {
    transform: rotate(-135deg) !important;
  }

  html[lang^="fr"] body#about-attr-page #container-f1c43da3c1 #this-page .steps-card-icon:not(:first-child) {
    display: none !important;
  }

  html[lang^="fr"] body#about-attr-page #container-f1c43da3c1 #this-page.menu-expanded .steps-card-icon:not(:first-child) {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 7px 16px !important;
    color: #17396d !important;
    background: transparent !important;
    font-size: 15px !important;
    line-height: 1.15 !important;
    text-align: left !important;
    box-sizing: border-box !important;
  }

  html[lang^="fr"] body#about-attr-page #container-f1c43da3c1 #about-cards-1 .aboutattr-cards-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 24px !important;
  }
}
/* ================= END FR PATHOPHYSIOLOGY DEFINITIVE FIX ================= */


/* =========================================================
   ABOUT ATTR – FINAL DESKTOP ALIGNMENT FIXES
   EN + FR
   Added 22-Jul-2026
   ========================================================= */

/* 1. UNDERLINED LINKS — SAME COLOUR AS PARAGRAPH TEXT */
#about-attr-page .source-damage p a,
#about-attr-page .source-damage p a:visited,
#about-attr-page .about-mixed-hattr__description a,
#about-attr-page .about-mixed-hattr__description a:visited {
  color: inherit !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  text-decoration: underline !important;
  text-decoration-color: currentColor !important;
  text-underline-offset: 2px !important;
}

#about-attr-page .source-damage p,
#about-attr-page .source-damage p a,
#about-attr-page .about-mixed-hattr__description,
#about-attr-page .about-mixed-hattr__description a {
  color: #151515 !important;
}

/* 2. EN ONLY — MOVE THE SOURCE/BODY DIAGRAM SLIGHTLY LEFT */
@media screen and (min-width: 992px) {
  html[lang^="en"] body#about-attr-page
  #about-cards-1
  .aboutattr.diagnosis-cards-items {
    position: relative !important;
    left: -10px !important;
  }
}

/* 3. hATTR-PN PROGRESSION CARD ALIGNMENT */
@media screen and (min-width: 992px) {
  #about-attr-page #progressive-cont-1 .aboutattr-cards-container {
    padding: 26px 28px 28px !important;
    box-sizing: border-box !important;
  }

  #about-attr-page #progressive-cont-1 .aboutattr.diagnosis-cards-items {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 12px !important;
    width: 100% !important;
  }

  #about-attr-page #progressive-cont-1 .steps-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    align-self: stretch !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 4px !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  #about-attr-page #progressive-cont-1 .steps-card-icon {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
  }

  #about-attr-page #progressive-cont-1 .steps-icon {
    display: block !important;
    width: auto !important;
    height: 125px !important;
    max-width: 150px !important;
    max-height: 125px !important;
    margin: 0 auto 8px !important;
    padding: 0 !important;
    object-fit: contain !important;
    object-position: center bottom !important;
  }

  #about-attr-page #progressive-cont-1 .steps-card:first-child .steps-icon {
    max-width: 115px !important;
  }

  #about-attr-page #progressive-cont-1 .steps-icon[alt*="Stage 2"],
  #about-attr-page #progressive-cont-1 .steps-icon[alt*="stage 2"] {
    max-width: 110px !important;
  }

  #about-attr-page #progressive-cont-1 .steps-icon[alt*="Stage 3"],
  #about-attr-page #progressive-cont-1 .steps-icon[alt*="stage 3"] {
    max-width: 145px !important;
  }

  #about-attr-page #progressive-cont-1 .steps-icon.attr {
    width: 165px !important;
    max-width: 165px !important;
    height: 125px !important;
    max-height: 125px !important;
  }

  #about-attr-page #progressive-cont-1 .stage-label,
  #about-attr-page #progressive-cont-1 .steps-title:first-of-type {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 24px !important;
    margin: 0 0 4px !important;
    padding: 0 !important;
    color: #6973FF !important;
    font-family: "Kanit-SemiBold", "Kanit", sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 18px !important;
    text-align: center !important;
    text-transform: uppercase !important;
  }

  #about-attr-page #progressive-cont-1 .steps-title,
  #about-attr-page #progressive-cont-1 .steps-title2 {
    width: 100% !important;
    max-width: 185px !important;
    min-height: 52px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    color: #00215F !important;
    font-family: "Kanit-SemiBold", "Kanit", sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 18px !important;
    text-align: center !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  #about-attr-page #progressive-cont-1 .steps-title2 {
    min-height: 55px !important;
    margin-top: 4px !important;
  }

  #about-attr-page #progressive-cont-1 .steps-plus-icon {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    margin: 7px auto !important;
    object-fit: contain !important;
  }

  #about-attr-page #progressive-cont-1 .alt-right-arrow {
    align-self: flex-start !important;
    flex: 0 0 auto !important;
    margin: 82px 8px 0 !important;
  }
}

/* 4. ATTR-CM PROGRESSION CARD ALIGNMENT */
@media screen and (min-width: 992px) {
  #about-attr-page #progressive-cont-2 .aboutattr-cards-container {
    padding: 26px 28px 28px !important;
    box-sizing: border-box !important;
  }

  #about-attr-page #progressive-cont-2 .aboutattr.diagnosis-cards-items {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 12px !important;
    width: 100% !important;
  }

  #about-attr-page #progressive-cont-2 .steps-card,
  #about-attr-page #progressive-cont-2 .steps-card1 {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    align-self: stretch !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 4px !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  #about-attr-page #progressive-cont-2 .steps-card-icon {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #about-attr-page #progressive-cont-2 .steps-icon {
    display: block !important;
    width: auto !important;
    height: 105px !important;
    max-width: 145px !important;
    max-height: 105px !important;
    margin: 0 auto 8px !important;
    padding: 0 !important;
    object-fit: contain !important;
    object-position: center bottom !important;
  }

  #about-attr-page #progressive-cont-2 .steps-icon.attr {
    width: 150px !important;
    max-width: 150px !important;
    height: 105px !important;
    max-height: 105px !important;
  }

  #about-attr-page #progressive-cont-2 .steps-title:first-of-type {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 24px !important;
    margin: 0 0 4px !important;
    padding: 0 !important;
    color: #6973FF !important;
    font-family: "Kanit-SemiBold", "Kanit", sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 18px !important;
    text-align: center !important;
    text-transform: uppercase !important;
  }

  #about-attr-page #progressive-cont-2 .steps-title:not(:first-of-type),
  #about-attr-page #progressive-cont-2 .steps-title2 {
    width: 100% !important;
    max-width: 170px !important;
    min-height: 58px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    color: #00215F !important;
    font-family: "Kanit-SemiBold", "Kanit", sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 18px !important;
    text-align: center !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  #about-attr-page #progressive-cont-2 .steps-card1
  .steps-card-icon > .steps-title:nth-of-type(2) {
    font-family: "Kanit", "Kanit", sans-serif !important;
    font-weight: 400 !important;
  }

  #about-attr-page #progressive-cont-2 .alt-right-arrow {
    align-self: flex-start !important;
    flex: 0 0 auto !important;
    margin: 70px 8px 0 !important;
  }
}

/* 5. MIXED-PHENOTYPE GAUGE AND TEXT */
#about-attr-page .about-mixed-hattr {
  width: 100% !important;
  max-width: 1100px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  box-sizing: border-box !important;
}

#about-attr-page .about-mixed-hattr__description {
  width: 100% !important;
  max-width: 1080px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  color: #151515 !important;
  font-family: "Kanit", "Kanit", sans-serif !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 23px !important;
  text-align: center !important;
}

#about-attr-page .about-mixed-hattr__description b {
  font-family: inherit !important;
  font-weight: inherit !important;
}

#about-attr-page .mixed-stat {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  width: 100% !important;
  max-width: 300px !important;
  margin: 22px 0 0 8px !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

#about-attr-page .mixed-stat__visual {
  position: relative !important;
  display: block !important;
  width: 265px !important;
  height: 150px !important;
  margin: 0 !important;
  padding: 0 !important;
}

#about-attr-page .mixed-stat__ring {
  display: block !important;
  width: 265px !important;
  height: 150px !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: left top !important;
}

#about-attr-page .mixed-stat__percentage {
  position: absolute !important;
  left: 0 !important;
  bottom: -2px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #00215F !important;
  font-family: "Kanit", "Kanit", sans-serif !important;
  line-height: 1 !important;
  text-align: left !important;
}

#about-attr-page .mixed-stat__upto {
  display: block !important;
  margin: 0 0 1px !important;
  padding: 0 !important;
  color: #00215F !important;
  font-family: "Kanit", "Kanit", sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 16px !important;
}

#about-attr-page .mixed-stat__number {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #00215F !important;
  font-family: "Kanit-SemiBold", "Kanit", sans-serif !important;
  font-size: 25px !important;
  font-weight: 600 !important;
  line-height: 27px !important;
}

#about-attr-page .mixed-stat__description {
  width: 100% !important;
  max-width: 285px !important;
  margin: 4px 0 0 !important;
  padding: 0 !important;
  color: #00215F !important;
  font-family: "Kanit", "Kanit", sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 15px !important;
  text-align: left !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

@media screen and (min-width: 992px) {
  html[lang^="en"] body#about-attr-page .mixed-stat {
    margin-left: 10px !important;
  }

  html[lang^="fr"] body#about-attr-page .mixed-stat {
    margin-left: 18px !important;
  }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
  #about-attr-page .mixed-stat {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #about-attr-page .mixed-stat__visual {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #about-attr-page .mixed-stat__description {
    text-align: center !important;
  }
}

@media screen and (max-width: 767px) {
  #about-attr-page .source-damage p a,
  #about-attr-page .about-mixed-hattr__description a {
    color: inherit !important;
    text-decoration-color: currentColor !important;
  }

  #about-attr-page .mixed-stat {
    align-items: center !important;
    width: calc(100% - 30px) !important;
    max-width: 320px !important;
    margin: 20px auto 0 !important;
  }

  #about-attr-page .mixed-stat__visual {
    width: 265px !important;
    max-width: 100% !important;
  }

  #about-attr-page .mixed-stat__ring {
    width: 265px !important;
    max-width: 100% !important;
  }

  #about-attr-page .mixed-stat__description {
    max-width: 290px !important;
    margin-top: 6px !important;
    text-align: center !important;
  }
}

/* ================= END ABOUT ATTR FINAL ALIGNMENT FIXES ================= */

/* =========================================================
   FINAL VISUAL CORRECTIONS — 22 JUL 2026
   1. EN source diagram final icon position
   2. hATTR-PN plus icon vertical position
   3. Mixed-phenotype statistic centred and enlarged
   ========================================================= */

/* ---------------------------------------------------------
   1) EN ONLY — move the final body icon slightly left so its
      position matches the French version.
   --------------------------------------------------------- */
@media screen and (min-width: 992px) {
  html[lang^="en"] body#about-attr-page
  #about-cards-1
  .diagnosis-cards-items
  .steps-card:last-of-type
  .steps-icon {
    position: relative !important;
    left: -18px !important;
    transform: none !important;
  }

  html[lang^="en"] body#about-attr-page
  #about-cards-1
  .diagnosis-cards-items
  .steps-card:last-of-type
  .steps-title,
  html[lang^="en"] body#about-attr-page
  #about-cards-1
  .diagnosis-cards-items
  .steps-card:last-of-type
  .steps-title2 {
    position: relative !important;
    left: -10px !important;
  }
}

/* ---------------------------------------------------------
   2) hATTR-PN — pull the plus signs and their lower text up.
      Both Stage 1 and Stage 2 remain aligned with each other.
   --------------------------------------------------------- */
@media screen and (min-width: 992px) {
  #about-attr-page
  #progressive-cont-1
  .steps-plus-icon {
    position: relative !important;
    top: -14px !important;
    margin-top: 0 !important;
    margin-bottom: -7px !important;
  }

  #about-attr-page
  #progressive-cont-1
  .steps-title2 {
    position: relative !important;
    top: -10px !important;
  }
}

/* ---------------------------------------------------------
   3) MIXED-PHENOTYPE STATISTIC
      Rebuild the supplied .mixed-stat HTML to match the large,
      centred target presentation.
   --------------------------------------------------------- */
#about-attr-page #text-064180505a {
  width: 100% !important;
  max-width: none !important;
}

#about-attr-page #text-064180505a .mixed-stat,
#about-attr-page .mixed-stat {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;

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

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

  text-align: center !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

#about-attr-page #text-064180505a .mixed-stat__visual,
#about-attr-page .mixed-stat__visual {
  position: relative !important;
  display: block !important;

  width: 340px !important;
  max-width: 100% !important;
  height: 180px !important;

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

#about-attr-page #text-064180505a .mixed-stat__ring,
#about-attr-page .mixed-stat__ring {
  display: block !important;

  width: 340px !important;
  max-width: 100% !important;
  height: 180px !important;

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

  object-fit: contain !important;
  object-position: center top !important;
}

#about-attr-page #text-064180505a .mixed-stat__percentage,
#about-attr-page .mixed-stat__percentage {
  position: absolute !important;
  left: 50% !important;
  top: 52% !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;

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

  width: 190px !important;
  margin: 0 !important;
  padding: 0 !important;

  color: #00215F !important;
  text-align: center !important;
  line-height: 1 !important;
}

#about-attr-page #text-064180505a .mixed-stat__upto,
#about-attr-page .mixed-stat__upto {
  display: block !important;

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

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

#about-attr-page #text-064180505a .mixed-stat__number,
#about-attr-page .mixed-stat__number {
  display: block !important;

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

  color: #00215F !important;
  font-family: "Kanit-Bold", "Kanit", sans-serif !important;
  font-size: 54px !important;
  font-weight: 700 !important;
  line-height: 56px !important;
  text-align: center !important;
}

#about-attr-page #text-064180505a .mixed-stat__description,
#about-attr-page .mixed-stat__description {
  display: block !important;

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

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

  color: #00215F !important;
  font-family: "Kanit-SemiBold", "Kanit", sans-serif !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  line-height: 26px !important;
  text-align: center !important;

  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

#about-attr-page #text-064180505a .mixed-stat__description sup,
#about-attr-page .mixed-stat__description sup {
  position: relative !important;
  top: -0.45em !important;
  font-size: 55% !important;
  line-height: 0 !important;
}

/* Remove the language-specific left offsets from the previous block. */
@media screen and (min-width: 992px) {
  html[lang^="en"] body#about-attr-page .mixed-stat,
  html[lang^="fr"] body#about-attr-page .mixed-stat {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Tablet */
@media screen and (min-width: 768px) and (max-width: 991px) {
  #about-attr-page #text-064180505a .mixed-stat,
  #about-attr-page .mixed-stat {
    max-width: 560px !important;
    margin: 24px auto 36px !important;
  }

  #about-attr-page #text-064180505a .mixed-stat__upto,
  #about-attr-page .mixed-stat__upto {
    font-size: 31px !important;
    line-height: 33px !important;
  }

  #about-attr-page #text-064180505a .mixed-stat__number,
  #about-attr-page .mixed-stat__number {
    font-size: 48px !important;
    line-height: 50px !important;
  }

  #about-attr-page #text-064180505a .mixed-stat__description,
  #about-attr-page .mixed-stat__description {
    font-size: 19px !important;
    line-height: 23px !important;
  }
}

/* Mobile */
@media screen and (max-width: 767px) {
  #about-attr-page #text-064180505a .mixed-stat,
  #about-attr-page .mixed-stat {
    width: 100% !important;
    max-width: 360px !important;
    margin: 20px auto 30px !important;
    padding: 0 14px !important;
  }

  #about-attr-page #text-064180505a .mixed-stat__visual,
  #about-attr-page .mixed-stat__visual,
  #about-attr-page #text-064180505a .mixed-stat__ring,
  #about-attr-page .mixed-stat__ring {
    width: 290px !important;
    height: 154px !important;
  }

  #about-attr-page #text-064180505a .mixed-stat__upto,
  #about-attr-page .mixed-stat__upto {
    margin-bottom: 4px !important;
    font-size: 27px !important;
    line-height: 29px !important;
  }

  #about-attr-page #text-064180505a .mixed-stat__number,
  #about-attr-page .mixed-stat__number {
    font-size: 43px !important;
    line-height: 45px !important;
  }

  #about-attr-page #text-064180505a .mixed-stat__description,
  #about-attr-page .mixed-stat__description {
    max-width: 330px !important;
    margin-top: 4px !important;
    font-size: 16px !important;
    line-height: 19px !important;
    text-align: center !important;
  }
}

/* ================= END FINAL VISUAL CORRECTIONS ================= */

/* =========================================================
   FINAL hATTR-PN + MIXED-PHENOTYPE SPACING FIXES
   Added 22-Jul-2026
   ========================================================= */

/* ---------------------------------------------------------
   1) hATTR-PN: pull the text below the plus icons upward
   --------------------------------------------------------- */
@media screen and (min-width: 768px) {
  #about-attr-page #progressive-cont-1 .steps-plus-icon {
    margin-top: -15px !important;
    margin-bottom: 2px !important;
  }

  #about-attr-page #progressive-cont-1 .steps-title2 {
    margin-top: 0 !important;
    padding-top: 0 !important;
    transform: translateY(-4px) !important;
  }
}

/* ---------------------------------------------------------
   2) hATTR-PN: keep every reference number as superscript
   Includes STAGE 1/2/3, section heading 1,8 and mortality 2
   --------------------------------------------------------- */
#about-attr-page #progressive-cont-1 sup,
#about-attr-page #progressive-cont-1 .suptxt-abt,
#about-attr-page .attr-life sup {
  display: inline !important;
  position: relative !important;
  top: -0.55em !important;
  vertical-align: baseline !important;
  margin-left: 1px !important;
  padding: 0 !important;
  font-family: "Kanit", "Kanit", sans-serif !important;
  font-size: 55% !important;
  font-weight: 400 !important;
  line-height: 0 !important;
}

/* Prevent stage labels from stretching because of superscripts */
#about-attr-page #progressive-cont-1 .stage-label,
#about-attr-page #progressive-cont-1 .steps-title:first-of-type {
  line-height: 18px !important;
}

/* ---------------------------------------------------------
   3) Add breathing room after the active-screening callout
   --------------------------------------------------------- */
#about-attr-page #progressive-cont-1 {
  padding-bottom: 34px !important;
  box-sizing: border-box !important;
}

#about-attr-page #progressive-cont-1 .attr-suspected-box,
#about-attr-page #progressive-cont-1 .active-screening-box,
#about-attr-page #progressive-cont-1 .attr-callout,
#about-attr-page #progressive-cont-1 [class*="screening"] {
  margin-bottom: 28px !important;
}

/* Fallback for the AEM section wrapper containing the PN block */
#about-attr-page #content-sec-1 {
  padding-bottom: 34px !important;
  box-sizing: border-box !important;
}

/* ---------------------------------------------------------
   4) Mixed-phenotype section: full-width #FAFAFA background
   --------------------------------------------------------- */
#about-attr-page #container-7122c14fc0,
#about-attr-page #text-029ce8908f,
#about-attr-page #text-064180505a,
#about-attr-page .about-mixed-hattr,
#about-attr-page .mixed-stat {
  background-color: transparent !important;
}

/* Full-width section background using the known AEM wrapper */
#about-attr-page #container-7122c14fc0 {
  position: relative !important;
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-top: 42px !important;
  padding-bottom: 54px !important;
  background-color: #FAFAFA !important;
  box-sizing: border-box !important;
}

/* Keep the mixed section content centred inside the full-width background */
#about-attr-page #container-7122c14fc0 > .cmp-container,
#about-attr-page #container-7122c14fc0 .about-mixed-hattr,
#about-attr-page #container-7122c14fc0 .mixed-stat {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Additional fallback when AEM places the text blocks in separate siblings */
#about-attr-page .about-mixed-hattr:first-child,
#about-attr-page #text-029ce8908f,
#about-attr-page #text-064180505a {
  box-sizing: border-box !important;
}

@media screen and (max-width: 767px) {
  #about-attr-page #progressive-cont-1 .steps-title2 {
    transform: none !important;
    margin-top: 2px !important;
  }

  #about-attr-page #progressive-cont-1 {
    padding-bottom: 26px !important;
  }

  #about-attr-page #container-7122c14fc0 {
    padding-top: 30px !important;
    padding-bottom: 38px !important;
  }
}

/* ================= END FINAL hATTR-PN + MIXED FIXES ================= */


/* =========================================================
   FINAL EN/FR FOOTER + SUPERSCRIPT CORRECTIONS
   Added 22-Jul-2026
   Keep this block at the very bottom of the CSS file
   ========================================================= */


/* ---------------------------------------------------------
   1) EN: remove the thin white separator above the footer
   --------------------------------------------------------- */



/* Close any sub-pixel gap between the CTA image and black footer */


html[lang^="en"] body#about-attr-page .treatment-footer-main-container,
html[lang^="en"] body#about-attr-page .container-about-attr-footer,
html[lang^="en"] body#about-attr-page .about-attr-reference {
  margin-top: -1px !important;
}

/* Remove AEM wrapper spacing that can show as a white line */



/* ---------------------------------------------------------
   2) EN + FR: force 8 and 11/reference numbers to superscript
   Applies to hATTR-PN and ATTR-CM headings/stage labels
   --------------------------------------------------------- */

#about-attr-page #progressive-cont-1 sup,
#about-attr-page #progressive-cont-2 sup,
#about-attr-page #progressive-cont-1 .suptxt-abt,
#about-attr-page #progressive-cont-2 .suptxt-abt,
#about-attr-page .attr-life sup {
  display: inline-block !important;
  position: relative !important;
  top: -0.55em !important;
  vertical-align: baseline !important;

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

  font-family: "Kanit", "Kanit", sans-serif !important;
  font-size: 55% !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 0 !important;

  transform: none !important;
}

/* Stage heading superscripts should not change card height */
#about-attr-page #progressive-cont-1 .steps-title sup,
#about-attr-page #progressive-cont-2 .steps-title sup,
#about-attr-page #progressive-cont-1 .stage-label sup,
#about-attr-page #progressive-cont-2 .stage-label sup {
  top: -0.6em !important;
  font-size: 52% !important;
}

/* Section-heading references such as 1,8 and 11 */
#about-attr-page #progressive-cont-1 .cards-footer-header sup,
#about-attr-page #progressive-cont-2 .cards-footer-header sup,
#about-attr-page .attr-life p sup {
  top: -0.65em !important;
  font-size: 52% !important;
}


/* ---------------------------------------------------------
   3) FR footer: repair overlapping abbreviations/references
   --------------------------------------------------------- */

html[lang^="fr"] body#about-attr-page .container-about-attr-footer,
html[lang^="fr"] body#about-attr-page .about-attr-reference,
html[lang^="fr"] body#about-attr-page .treatment-footer-main-container {
  position: relative !important;
  display: block !important;

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

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

/* Black reference area */
html[lang^="fr"] body#about-attr-page .container-about-attr-footer,
html[lang^="fr"] body#about-attr-page .about-attr-reference {
  background-color: #000000 !important;
}

/* Reset inherited negative offsets and cramped line-height */
html[lang^="fr"] body#about-attr-page .about-attr-reference {
  padding: 18px 24px 26px !important;
}

html[lang^="fr"] body#about-attr-page .about-attr-reference p {
  position: static !important;
  display: block !important;

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

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

  color: #FFFFFF !important;
  font-family: "Kanit", "Kanit", sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  text-align: left !important;

  white-space: normal !important;
  overflow: visible !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;

  transform: none !important;
}

/* No extra space after the final references paragraph */
html[lang^="fr"] body#about-attr-page .about-attr-reference p:last-child {
  margin-bottom: 0 !important;
}

/* Keep only labels/reference numbers bold */
html[lang^="fr"] body#about-attr-page .about-attr-reference .reference-bold {
  font-family: "Kanit-SemiBold", "Kanit", sans-serif !important;
  font-weight: 600 !important;
}

/* Journal names remain italic without becoming bold */
html[lang^="fr"] body#about-attr-page .about-attr-reference .reference-italic {
  font-family: "Kanit", "Kanit", sans-serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
}

/* Footer superscripts */
html[lang^="fr"] body#about-attr-page .about-attr-reference sup {
  display: inline-block !important;
  position: relative !important;
  top: -0.45em !important;
  vertical-align: baseline !important;

  margin-left: 1px !important;
  padding: 0 !important;

  font-size: 60% !important;
  font-weight: 400 !important;
  line-height: 0 !important;
}

/* Remove empty authored paragraph spacing */
html[lang^="fr"] body#about-attr-page .about-attr-reference p:empty,
html[lang^="fr"] body#about-attr-page .about-attr-reference p > br:only-child {
  display: none !important;
}


/* ---------------------------------------------------------
   Tablet/mobile footer readability
   --------------------------------------------------------- */

@media screen and (max-width: 991px) {
  html[lang^="fr"] body#about-attr-page .about-attr-reference {
    padding: 18px 18px 24px !important;
  }

  html[lang^="fr"] body#about-attr-page .about-attr-reference p {
    margin: 0 auto 10px !important;
    padding: 0 !important;
    font-size: 11px !important;
    line-height: 1.5 !important;
  }
}

@media screen and (max-width: 480px) {
  html[lang^="fr"] body#about-attr-page .about-attr-reference {
    padding: 16px 14px 22px !important;
  }

  html[lang^="fr"] body#about-attr-page .about-attr-reference p {
    font-size: 10px !important;
    line-height: 1.5 !important;
  }
}

/* ================= END FINAL EN/FR FOOTER FIXES ================= */


/* =========================================================
   FINAL FR FOOTER LINE + CTA BUTTON WIDTH FIX
   Added 22-Jul-2026
   Keep this block at the very bottom
   ========================================================= */

/* 1) FR: remove the thin white separator above the footer */


/* Close any 1px/sub-pixel gap between CTA banner and footer */


html[lang^="fr"] body#about-attr-page .treatment-footer-main-container,
html[lang^="fr"] body#about-attr-page .container-about-attr-footer,
html[lang^="fr"] body#about-attr-page .about-attr-reference {
  margin-top: -1px !important;
}

/* 2) FR: make both CTA buttons the same width and allow wrapping */


/* Tablet/mobile: keep buttons responsive */


/* ================ END FINAL FR CTA FIX ================ */


/* =========================================================
   FINAL PROGRESSION REFERENCE SUPERSCRIPT FIX
   Added 22-Jul-2026
   Forces references such as 1,8 and 11 to render as superscript
   in both EN and FR.
   ========================================================= */

/*
 * Earlier card rules use flex alignment and fixed line-height.
 * Using transform here is more reliable than top alone.
 */
html[lang^="en"] body#about-attr-page #progressive-cont-1 sup,
html[lang^="en"] body#about-attr-page #progressive-cont-2 sup,
html[lang^="fr"] body#about-attr-page #progressive-cont-1 sup,
html[lang^="fr"] body#about-attr-page #progressive-cont-2 sup,

html[lang^="en"] body#about-attr-page #progressive-cont-1 .suptxt-abt,
html[lang^="en"] body#about-attr-page #progressive-cont-2 .suptxt-abt,
html[lang^="fr"] body#about-attr-page #progressive-cont-1 .suptxt-abt,
html[lang^="fr"] body#about-attr-page #progressive-cont-2 .suptxt-abt,

html[lang^="en"] body#about-attr-page .attr-life sup,
html[lang^="fr"] body#about-attr-page .attr-life sup {
  display: inline-block !important;
  position: relative !important;

  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;

  vertical-align: baseline !important;

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

  font-family: "Kanit", "Kanit", sans-serif !important;
  font-size: 50% !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 1 !important;

  transform: translateY(-0.78em) !important;
  transform-origin: center !important;
}

/* Stage labels: STAGE 1, STAGE 2, STAGE A, etc. */
html[lang^="en"] body#about-attr-page #progressive-cont-1 .steps-title sup,
html[lang^="en"] body#about-attr-page #progressive-cont-2 .steps-title sup,
html[lang^="fr"] body#about-attr-page #progressive-cont-1 .steps-title sup,
html[lang^="fr"] body#about-attr-page #progressive-cont-2 .steps-title sup,

html[lang^="en"] body#about-attr-page #progressive-cont-1 .stage-label sup,
html[lang^="en"] body#about-attr-page #progressive-cont-2 .stage-label sup,
html[lang^="fr"] body#about-attr-page #progressive-cont-1 .stage-label sup,
html[lang^="fr"] body#about-attr-page #progressive-cont-2 .stage-label sup {
  font-size: 48% !important;
  
}

/* Section headings: progression sentence references 1,8 and 11 */
html[lang^="en"] body#about-attr-page #progressive-cont-1 .cards-footer-header sup,
html[lang^="en"] body#about-attr-page #progressive-cont-2 .cards-footer-header sup,
html[lang^="fr"] body#about-attr-page #progressive-cont-1 .cards-footer-header sup,
html[lang^="fr"] body#about-attr-page #progressive-cont-2 .cards-footer-header sup,

html[lang^="en"] body#about-attr-page .attr-life p sup,
html[lang^="fr"] body#about-attr-page .attr-life p sup {
  font-size: 48% !important;
  transform: translateY(-0.85em) !important;
}

/*
 * Some authored text may use a span class instead of a real <sup>.
 * These selectors cover that markup as well.
 */
html[lang^="en"] body#about-attr-page #progressive-cont-1 span.suptxt-abt,
html[lang^="en"] body#about-attr-page #progressive-cont-2 span.suptxt-abt,
html[lang^="fr"] body#about-attr-page #progressive-cont-1 span.suptxt-abt,
html[lang^="fr"] body#about-attr-page #progressive-cont-2 span.suptxt-abt {
  display: inline-block !important;
  font-size: 48% !important;
  line-height: 1 !important;
  vertical-align: baseline !important;
  transform: translateY(-0.78em) !important;
}

/* Prevent parent flex alignment from pulling superscripts down */
#about-attr-page #progressive-cont-1 .steps-title,
#about-attr-page #progressive-cont-2 .steps-title,
#about-attr-page #progressive-cont-1 .stage-label,
#about-attr-page #progressive-cont-2 .stage-label,
#about-attr-page #progressive-cont-1 .cards-footer-header,
#about-attr-page #progressive-cont-2 .cards-footer-header {
  overflow: visible !important;
}

/* ============== END FINAL SUPERSCRIPT FIX ============== */


/* =========================================================
   FINAL LINK COLOUR FIX — EN + FR
   Added 22-Jul-2026
   Keeps underlined links the same colour as surrounding text
   while preserving the underline.
   ========================================================= */

/* General paragraph/list links on the About ATTR page */
html[lang^="en"] body#about-attr-page p a,
html[lang^="en"] body#about-attr-page li a,
html[lang^="fr"] body#about-attr-page p a,
html[lang^="fr"] body#about-attr-page li a,
html[lang^="en"] body#about-attr-page p a:visited,
html[lang^="en"] body#about-attr-page li a:visited,
html[lang^="fr"] body#about-attr-page p a:visited,
html[lang^="fr"] body#about-attr-page li a:visited {
/*  color: inherit !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-style: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  text-decoration-color: currentColor !important;
  text-decoration-thickness: auto !important;
  text-underline-offset: 2px !important;*/
}

/* Hover/focus should also retain the paragraph colour */
html[lang^="en"] body#about-attr-page p a:hover,
html[lang^="en"] body#about-attr-page li a:hover,
html[lang^="fr"] body#about-attr-page p a:hover,
html[lang^="fr"] body#about-attr-page li a:hover,
html[lang^="en"] body#about-attr-page p a:focus,
html[lang^="en"] body#about-attr-page li a:focus,
html[lang^="fr"] body#about-attr-page p a:focus,
html[lang^="fr"] body#about-attr-page li a:focus,
html[lang^="en"] body#about-attr-page p a:active,
html[lang^="en"] body#about-attr-page li a:active,
html[lang^="fr"] body#about-attr-page p a:active,
html[lang^="fr"] body#about-attr-page li a:active {
  color: inherit !important;
  text-decoration-color: currentColor !important;
}

/* Dark hereditary / wild-type cards */
#about-attr-page .understand-image-one p a,
#about-attr-page .understand-image-one li a,
#about-attr-page .understand-image-two p a,
#about-attr-page .understand-image-two li a,
#about-attr-page .galaxy-ptag p a,
#about-attr-page .galaxy-ptag li a,
#about-attr-page .galaxy-ptag1 p a,
#about-attr-page .galaxy-ptag1 li a {
  color: #FFFFFF !important;
  text-decoration-color: #FFFFFF !important;
}

/* Main body copy / callouts */
#about-attr-page .source-damage p a,
#about-attr-page .about-attr-hereity p a,
#about-attr-page .about-mixed-hattr__description a,
#about-attr-page .attr-life p a,
#about-attr-page .about-attr-prograss p a,
#about-attr-page .about-attr-prograss li a,
#about-attr-page .attr-suspected-title a,
#about-attr-page .attr-suspected-line a,
#about-attr-page .about-attr-reference + p a {
  color: inherit !important;
  text-decoration-color: currentColor !important;
}

/* Active screening / genetic testing callouts */
#about-attr-page .attr-suspected-box a,
#about-attr-page .active-screening a,
#about-attr-page .genetic-testing a,
#about-attr-page .callout a,
#about-attr-page [class*="callout"] a {
  color: inherit !important;
  text-decoration-color: currentColor !important;
}

/* Cardiac amyloidosis lists */
#about-attr-page .about-attr-prograss ul li a,
#about-attr-page .about-attr-systemetic ul li a,
#about-attr-page .divcausess ul li a,
#about-attr-page .lislienesrs li a {
  color: inherit !important;
  text-decoration-color: currentColor !important;
}

/* Preserve accessibility focus indication */
html[lang^="en"] body#about-attr-page p a:focus-visible,
html[lang^="en"] body#about-attr-page li a:focus-visible,
html[lang^="fr"] body#about-attr-page p a:focus-visible,
html[lang^="fr"] body#about-attr-page li a:focus-visible {
  outline: 2px solid currentColor !important;
  outline-offset: 2px !important;
}

/* ============== END FINAL LINK COLOUR FIX ============== */



/* =========================================================
   CARDIAC AMYLOIDOSIS LINK COLOUR FIX (EN + FR)
   ========================================================= */

html[lang^="en"] body#about-attr-page .slide .bullet-text a,
html[lang^="fr"] body#about-attr-page .slide .bullet-text a,
html[lang^="en"] body#about-attr-page .slide .bullet-text a:visited,
html[lang^="fr"] body#about-attr-page .slide .bullet-text a:visited,
html[lang^="en"] body#about-attr-page .slide .bullet-text a:hover,
html[lang^="fr"] body#about-attr-page .slide .bullet-text a:hover,
html[lang^="en"] body#about-attr-page .slide .bullet-text a:focus,
html[lang^="fr"] body#about-attr-page .slide .bullet-text a:focus,
html[lang^="en"] body#about-attr-page .slide .bullet-text a:active,
html[lang^="fr"] body#about-attr-page .slide .bullet-text a:active{
    color:inherit !important;
    font:inherit !important;
    text-decoration:underline !important;
    text-decoration-color:currentColor !important;
    text-underline-offset:2px !important;
}

html[lang^="en"] body#about-attr-page .slide .bullet-text a .underline,
html[lang^="fr"] body#about-attr-page .slide .bullet-text a .underline,
html[lang^="en"] body#about-attr-page .slide .bullet-text a u,
html[lang^="fr"] body#about-attr-page .slide .bullet-text a u,
html[lang^="en"] body#about-attr-page .slide .bullet-text a u .underline,
html[lang^="fr"] body#about-attr-page .slide .bullet-text a u .underline{
    color:inherit !important;
    text-decoration:underline !important;
    text-decoration-color:currentColor !important;
}

html[lang^="en"] body#about-attr-page .slide .bullet-text,
html[lang^="fr"] body#about-attr-page .slide .bullet-text{
    color:#151515 !important;
}


/* =========================================================
   FINAL FR SECTION BACKGROUNDS + CTA BUTTON TEXT FIX
   Added 22-Jul-2026
   Keep this block at the very bottom of the CSS file
   ========================================================= */


/* ---------------------------------------------------------
   1) FR: first content area through the video — light grey
   --------------------------------------------------------- */

html[lang^="fr"] body#about-attr-page
.cmp-container[role="about-attr-wrap"],

html[lang^="fr"] body#about-attr-page
#content-sec-1,

html[lang^="fr"] body#about-attr-page
#content-sec-2,

html[lang^="fr"] body#about-attr-page
#container-75cf52306c,

html[lang^="fr"] body#about-attr-page
#about-cards-1,

html[lang^="fr"] body#about-attr-page
.about-attr-video,

html[lang^="fr"] body#about-attr-page
.video {
  background-color: #FAFAFA !important;
}


/* Make the grey background span the full available width */
html[lang^="fr"] body#about-attr-page
#content-sec-1,

html[lang^="fr"] body#about-attr-page
#content-sec-2,

html[lang^="fr"] body#about-attr-page
#container-75cf52306c {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
}


/* ---------------------------------------------------------
   2) FR: “À propos de l’ATTRh-PN” section — light grey
   --------------------------------------------------------- */

html[lang^="fr"] body#about-attr-page
#progressive-cont-1,

html[lang^="fr"] body#about-attr-page
#progressive-cont-1 .about-attr-prograss,

html[lang^="fr"] body#about-attr-page
#progressive-cont-1 .attr-life,

html[lang^="fr"] body#about-attr-page
#progressive-cont-1 + .text,

html[lang^="fr"] body#about-attr-page
#progressive-cont-1 ~ .text {
  background-color: #FAFAFA !important;
}


/* Ensure the ATTRh-PN block itself fills the width */
html[lang^="fr"] body#about-attr-page
#progressive-cont-1 {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
  padding-top: 1px !important;
  padding-bottom: 40px !important;
}


/* ---------------------------------------------------------
   3) FR: “À propos de l’ATTRh à phénotype mixte” — light grey
   --------------------------------------------------------- */

html[lang^="fr"] body#about-attr-page
#container-7122c14fc0,

html[lang^="fr"] body#about-attr-page
#text-029ce8908f,

html[lang^="fr"] body#about-attr-page
.about-mixed-hattr,

html[lang^="fr"] body#about-attr-page
.mixed-hattr-stat,

html[lang^="fr"] body#about-attr-page
.mixed-stat {
  background-color: #FAFAFA !important;
}


/* Full-width grey background behind the mixed-phenotype section */
html[lang^="fr"] body#about-attr-page
#container-7122c14fc0 {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
  padding-top: 1px !important;
  padding-bottom: 40px !important;
}


/* Keep inner mixed content centred */
html[lang^="fr"] body#about-attr-page
#text-029ce8908f,

html[lang^="fr"] body#about-attr-page
.about-mixed-hattr {
  max-width: 1100px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}


/* ---------------------------------------------------------
   4) FR CTA second card text + button alignment
   --------------------------------------------------------- */




/* Tablet */



/* Mobile */


/* ========== END FINAL FR BACKGROUND + CTA FIX ========== */

/* =========================================================
   FINAL FR FULL-WIDTH GREY BACKGROUND FIX
   Added 22-Jul-2026
   Keep this block at the very bottom of the CSS file
   ========================================================= */

html[lang^="fr"] body#about-attr-page {
  background-color: #FAFAFA !important;
}

/* First content area through video */
html[lang^="fr"] body#about-attr-page #container-75cf52306c,
html[lang^="fr"] body#about-attr-page #container-75cf52306c > .cmp-container,
html[lang^="fr"] body#about-attr-page #container-75cf52306c > .aem-Grid,
html[lang^="fr"] body#about-attr-page #container-75cf52306c > .responsivegrid,
html[lang^="fr"] body#about-attr-page #content-sec-1,
html[lang^="fr"] body#about-attr-page #content-sec-2,
html[lang^="fr"] body#about-attr-page .cmp-container[role="about-attr-wrap"] {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  background-color: #FAFAFA !important;
  box-sizing: border-box !important;
}

/* hATTR-PN section */
html[lang^="fr"] body#about-attr-page #progressive-cont-1,
html[lang^="fr"] body#about-attr-page #progressive-cont-1 > .cmp-container,
html[lang^="fr"] body#about-attr-page #progressive-cont-1 > .aem-Grid,
html[lang^="fr"] body#about-attr-page #progressive-cont-1 > .responsivegrid {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  background-color: #FAFAFA !important;
  box-sizing: border-box !important;
}

/* Mixed-phenotype section */
html[lang^="fr"] body#about-attr-page #container-7122c14fc0,
html[lang^="fr"] body#about-attr-page #container-7122c14fc0 > .cmp-container,
html[lang^="fr"] body#about-attr-page #container-7122c14fc0 > .aem-Grid,
html[lang^="fr"] body#about-attr-page #container-7122c14fc0 > .responsivegrid,
html[lang^="fr"] body#about-attr-page #text-029ce8908f,
html[lang^="fr"] body#about-attr-page .about-mixed-hattr {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  background-color: #FAFAFA !important;
  box-sizing: border-box !important;
}

/* Full-bleed background even when section sits inside a centred AEM wrapper */
html[lang^="fr"] body#about-attr-page #container-75cf52306c,
html[lang^="fr"] body#about-attr-page #progressive-cont-1,
html[lang^="fr"] body#about-attr-page #container-7122c14fc0 {
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  padding-left: max(20px, calc((100vw - 1265px) / 2)) !important;
  padding-right: max(20px, calc((100vw - 1265px) / 2)) !important;
  overflow-x: clip !important;
}

@supports not (overflow: clip) {
  html[lang^="fr"] body#about-attr-page #container-75cf52306c,
  html[lang^="fr"] body#about-attr-page #progressive-cont-1,
  html[lang^="fr"] body#about-attr-page #container-7122c14fc0 {
    overflow-x: hidden !important;
  }
}

@media screen and (max-width: 991px) {
  html[lang^="fr"] body#about-attr-page #container-75cf52306c,
  html[lang^="fr"] body#about-attr-page #progressive-cont-1,
  html[lang^="fr"] body#about-attr-page #container-7122c14fc0 {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
}

/* ========== END FINAL FR FULL-WIDTH GREY FIX ========== */


/* =========================================================
   FINAL FR SECTION-ONLY GREY BACKGROUND CORRECTION
   Added 22-Jul-2026
   This overrides the earlier body-level grey rule.
   ========================================================= */

/* Keep the page background white */
html[lang^="fr"] body#about-attr-page {
  background-color: #FFFFFF !important;
}

/* Only these requested sections stay grey */
html[lang^="fr"] body#about-attr-page #container-75cf52306c,
html[lang^="fr"] body#about-attr-page #content-sec-1,
html[lang^="fr"] body#about-attr-page #content-sec-2,
html[lang^="fr"] body#about-attr-page .cmp-container[role="about-attr-wrap"],

html[lang^="fr"] body#about-attr-page #progressive-cont-1,

html[lang^="fr"] body#about-attr-page #container-7122c14fc0 {
  background-color: #FAFAFA !important;
}

/* Do not force unrelated child sections to grey */
html[lang^="fr"] body#about-attr-page #text-029ce8908f,
html[lang^="fr"] body#about-attr-page .about-mixed-hattr,
html[lang^="fr"] body#about-attr-page .mixed-hattr-stat,
html[lang^="fr"] body#about-attr-page .mixed-stat {
  background-color: transparent !important;
}

/* Keep footer and CTA image section unaffected */


/* ========== END FR SECTION-ONLY GREY FIX ========== */


/* =========================================================
   SAFE FR SECTION-ONLY FULL-WIDTH GREY BACKGROUND
   Added 22-Jul-2026
   IMPORTANT:
   - Does NOT use ::before/::after
   - Does NOT change positioning, z-index, isolation or widths
   - Preserves all images, cards and progression layouts
   ========================================================= */

/* Keep the overall page white */
html[lang^="fr"] body#about-attr-page {
  background-color: #FFFFFF !important;
}

/*
 * Full-bleed background technique:
 * box-shadow paints beyond the centred section without changing
 * the section's own width or affecting its children.
 */
html[lang^="fr"] body#about-attr-page
.cmp-container[role="about-attr-wrap"],

html[lang^="fr"] body#about-attr-page
#progressive-cont-1,

html[lang^="fr"] body#about-attr-page
#container-7122c14fc0 {
  background-color: #FAFAFA !important;
  box-shadow: 0 0 0 100vmax #FAFAFA !important;
  clip-path: inset(0 -100vmax) !important;
}

/* Preserve the original content widths and layouts */
html[lang^="fr"] body#about-attr-page
.cmp-container[role="about-attr-wrap"],
html[lang^="fr"] body#about-attr-page
#progressive-cont-1,
html[lang^="fr"] body#about-attr-page
#container-7122c14fc0 {
  position: static;
  isolation: auto;
  width: auto;
  max-width: none;
  transform: none;
}

/* Restore progression cards in case prior rules affected them */
html[lang^="fr"] body#about-attr-page
#progressive-cont-1
.aboutattr-cards-container {
  display: block !important;
  width: auto !important;
  max-width: 1050px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  overflow: visible !important;
}

html[lang^="fr"] body#about-attr-page
#progressive-cont-1
.aboutattr.diagnosis-cards-items {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  width: 100% !important;
}

html[lang^="fr"] body#about-attr-page
#progressive-cont-1
.steps-card {
  flex: 1 1 0 !important;
  width: auto !important;
  min-width: 0 !important;
}

html[lang^="fr"] body#about-attr-page
#progressive-cont-1
.steps-card-icon {
  width: 100% !important;
}

/* Ensure all progression images remain visible */
html[lang^="fr"] body#about-attr-page
#progressive-cont-1 img,
html[lang^="fr"] body#about-attr-page
#about-cards-1 img,
html[lang^="fr"] body#about-attr-page
.about-attr-video img {
  visibility: visible !important;
  opacity: 1 !important;
}

/* Keep neighbouring sections white */


/* Tablet/mobile: let existing responsive rules control cards */
@media screen and (max-width: 991px) {
  html[lang^="fr"] body#about-attr-page
  #progressive-cont-1
  .aboutattr.diagnosis-cards-items {
    flex-wrap: wrap !important;
  }
}

/* ========== END SAFE FR GREY BACKGROUND FIX ========== */


/* ==========================================================================
   FINAL ATTR CTA CARD FIX
   Added 22-Jul-2026
   Keep this block at the VERY END of the CSS file.
   Fixes mobile card sizing, text/button overlap, and footer background spacing.
   ========================================================================== */





/* Desktop / tablet card layout */













/* ==========================================================================
   MOBILE — 480px AND BELOW
   ========================================================================== */

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

  #about-attr-page #container-3c273b57ba,
  #about-attr-page #container-3c273b57ba > .text,
  #about-attr-page #text-a301e56879 {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    transform: none !important;
  }

  

  

  

  

  

  

  

  

  

  
}


/* ==========================================================================
   VERY SMALL MOBILE — 360px AND BELOW
   ========================================================================== */



/* ================= END FINAL ATTR CTA CARD FIX ================= */


/* ==========================================================================
   FINAL MOBILE CTA MATCH FIX — 22 JUL 2026
   This block must remain at the very end of the file.
   ========================================================================== */




/* Small phones */


/* ================= END FINAL MOBILE CTA MATCH FIX ================= */



/* ==========================================================
   SECTION ONLY GREY BACKGROUND
   (Does NOT affect whole page)
   ========================================================== */

#about-attr-page #container-3235c11473{
    background:#F3F3F3 !important;
    padding-top:50px !important;
    padding-bottom:50px !important;
}

#about-attr-page #container-3235c11473 > .text,
#about-attr-page #container-3235c11473 > .responsivegrid,
#about-attr-page #container-3235c11473 > .aem-Grid{
    max-width:1265px;
    margin-left:auto;
    margin-right:auto;
}

#about-attr-page #container-3235c11473 .cmp-container,
#about-attr-page #container-3235c11473 .text{
    background:transparent !important;
}

/* =========================================================
   FINAL FR #FAFAFA BANDS — CORRECTED VERSION
   Uses the actual full-width AEM responsive-grid wrappers.
   Keep this block LAST in about-attr.css.
   ========================================================= */

/* Page remains white by default. */
html[lang^="fr"] body#about-attr-page {
  background-color: #FFFFFF !important;
}

/* ---------------------------------------------------------
   RESET PREVIOUS/BROAD FR BACKGROUND RULES
   --------------------------------------------------------- */

html[lang^="fr"] body#about-attr-page .cmp-container[role="about-attr-wrap"],
html[lang^="fr"] body#about-attr-page #container-75cf52306c,
html[lang^="fr"] body#about-attr-page #container-7122c14fc0,
html[lang^="fr"] body#about-attr-page #content-sec-1,
html[lang^="fr"] body#about-attr-page #content-sec-2,
html[lang^="fr"] body#about-attr-page #progressive-cont-1,
html[lang^="fr"] body#about-attr-page #progressive-cont-1 > .cmp-container,
html[lang^="fr"] body#about-attr-page #progressive-cont-1 > .aem-Grid,
html[lang^="fr"] body#about-attr-page #progressive-cont-1 > .responsivegrid,
html[lang^="fr"] body#about-attr-page #progressive-cont-1 .about-attr-prograss,
html[lang^="fr"] body#about-attr-page #progressive-cont-1 .attr-life,
html[lang^="fr"] body#about-attr-page #progressive-cont-1 + .text,
html[lang^="fr"] body#about-attr-page #progressive-cont-1 ~ .text,
html[lang^="fr"] body#about-attr-page #progressive-cont-2,
html[lang^="fr"] body#about-attr-page #progressive-cont-2 + .text,
html[lang^="fr"] body#about-attr-page #progressive-cont-2 ~ .text,
html[lang^="fr"] body#about-attr-page #container-f1c43da3c1,
html[lang^="fr"] body#about-attr-page #container-0558d93e3a,
html[lang^="fr"] body#about-attr-page #container-ba6e58fea9,
html[lang^="fr"] body#about-attr-page #container-1070bba6bc,
html[lang^="fr"] body#about-attr-page #container-3235c11473 {
  background-color: transparent !important;
  box-shadow: none !important;
  clip-path: none !important;
}

/* Remove the faulty full-page painting completely. */
html[lang^="fr"] body#about-attr-page * {
  --fr-section-bg: transparent;
}

/* ---------------------------------------------------------
   APPLY #FAFAFA TO THE ACTUAL FULL-WIDTH AEM WRAPPERS
   Each selected .container.responsivegrid is already full width.
   --------------------------------------------------------- */

/* BAND 1:
   Pathophysiology introduction */
html[lang^="fr"] body#about-attr-page
.container.responsivegrid:has(> #container-f1c43da3c1),

/* BAND 1:
   Multiple organs and tissues */
html[lang^="fr"] body#about-attr-page
.container.responsivegrid:has(> #container-0558d93e3a),

/* BAND 1:
   Mechanism-of-disease video */
html[lang^="fr"] body#about-attr-page
.container.responsivegrid:has(> #container-ba6e58fea9),

/* BAND 2:
   Complete hATTR-PN section */
html[lang^="fr"] body#about-attr-page
.container.responsivegrid:has(> #container-1070bba6bc),

/* BAND 3:
   Complete mixed-phenotype hATTR section */
html[lang^="fr"] body#about-attr-page
.container.responsivegrid:has(> #container-3235c11473) {
  background-color: #FAFAFA !important;
}

/* Ensure only these wrappers are grey; nearby sections stay white. */
html[lang^="fr"] body#about-attr-page
.container.responsivegrid:has(> #container-2f22f1a3fe),

html[lang^="fr"] body#about-attr-page
.container.responsivegrid:has(> #container-d3725d332e),

html[lang^="fr"] body#about-attr-page
.container.responsivegrid:has(> #container-8f1a20ac09),

html[lang^="fr"] body#about-attr-page
.container.responsivegrid:has(> #container-c43553e6ca) {
  background-color: #FFFFFF !important;
}

/* Inner cards remain white, matching EN. */
html[lang^="fr"] body#about-attr-page .aboutattr-cards-container {
  background-color: #FFFFFF !important;
}

/* Inner text/component wrappers should not create extra grey blocks. */
html[lang^="fr"] body#about-attr-page
.container.responsivegrid:has(> #container-f1c43da3c1) .cmp-container,
html[lang^="fr"] body#about-attr-page
.container.responsivegrid:has(> #container-0558d93e3a) .cmp-container,
html[lang^="fr"] body#about-attr-page
.container.responsivegrid:has(> #container-ba6e58fea9) .cmp-container,
html[lang^="fr"] body#about-attr-page
.container.responsivegrid:has(> #container-1070bba6bc) .cmp-container,
html[lang^="fr"] body#about-attr-page
.container.responsivegrid:has(> #container-3235c11473) .cmp-container {
  box-shadow: none !important;
  clip-path: none !important;
}

/* The mixed-phenotype band needs vertical breathing space like EN. */
html[lang^="fr"] body#about-attr-page
.container.responsivegrid:has(> #container-3235c11473) {
  padding-top: 45px !important;
  padding-bottom: 45px !important;
  box-sizing: border-box;
}

/* Prevent accidental horizontal overflow without changing widths. */
html[lang^="fr"] body#about-attr-page {
  overflow-x: hidden !important;
}

/* ================= END CORRECTED FR BANDS ================= */



/* =========================================================
   FINAL FR OUTER PAGE BACKGROUND FIX
   Keeps the page background white while preserving the
   three #FAFAFA content bands.
   ========================================================= */

html[lang^="fr"],
html[lang^="fr"] body,
html[lang^="fr"] body#about-attr-page {
    background-color: #FFFFFF !important;
}

/* Prevent any inherited black outer background */
html[lang^="fr"] body#about-attr-page > .root,
html[lang^="fr"] body#about-attr-page .root.container.responsivegrid {
    background-color: transparent !important;
}

/* ================= END FINAL FIX ================= */

/* =========================================================
   FINAL FR PAGE SHELL + ALIGNMENT FIX
   Fixes:
   - content pulled toward the left
   - white strip on the right
   - clipped hero text
   - black header navigation text
   Keep this block LAST in about-attr.css.
   ========================================================= */

/* Full browser-width page shell */
html[lang^="fr"],
html[lang^="fr"] body,
html[lang^="fr"] body#about-attr-page {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  background-color: #FFFFFF !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

/* Restore the AEM root/page wrappers */
html[lang^="fr"] body#about-attr-page > .root,
html[lang^="fr"] body#about-attr-page .root.container.responsivegrid,
html[lang^="fr"] body#about-attr-page #container-6ec7ca40ee,
html[lang^="fr"] body#about-attr-page #container-fe24daa6c3,
html[lang^="fr"] body#about-attr-page #container-fe24daa6c3 > .aem-Grid {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;

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

  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;

  background-color: transparent !important;
  box-sizing: border-box !important;
}

/* Every top-level AEM section occupies the available page width */
html[lang^="fr"] body#about-attr-page
#container-fe24daa6c3 > .aem-Grid >
.container.responsivegrid.aem-GridColumn {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;

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

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

/* ---------------------------------------------------------
   HERO: full available width, no viewport breakout math
   --------------------------------------------------------- */

@media screen and (min-width: 992px) {
  html[lang^="fr"] body#about-attr-page #container-3494b00441,
  html[lang^="fr"] body#about-attr-page #container-3494b00441 > .text,
  html[lang^="fr"] body#about-attr-page #about-cards-2 {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;

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

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

  html[lang^="fr"] body#about-attr-page
  #about-cards-2 .treatment-diagnosis-banner {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;

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

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

    height: 397px !important;
    min-height: 340px !important;
    padding: 0 !important;

    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    box-sizing: border-box !important;
  }

  html[lang^="fr"] body#about-attr-page
  #about-cards-2 .treatment.banner-content {
    width: 100% !important;
    max-width: 1265px !important;
    height: 100% !important;

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

    padding-left: 30px !important;
    padding-right: 30px !important;
    box-sizing: border-box !important;
  }
}

/* Cancel older generic full-viewport breakout rules */
html[lang^="fr"] body#about-attr-page
.cmp-container:has(.treatment-diagnosis-banner) {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;

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

  left: auto !important;
  right: auto !important;
  transform: none !important;
}

/* ---------------------------------------------------------
   CENTRED CONTENT AREA
   --------------------------------------------------------- */

html[lang^="fr"] body#about-attr-page .container-about-attr,
html[lang^="fr"] body#about-attr-page .container-about-hattr-pn,
html[lang^="fr"] body#about-attr-page .container-attr-cm,
html[lang^="fr"] body#about-attr-page .about-mixed-hattr,
html[lang^="fr"] body#about-attr-page .mixed-stat,
html[lang^="fr"] body#about-attr-page .container-about-attr-footer {
  width: 100% !important;
  max-width: 1265px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* Preserve the three full-width #FAFAFA section bands */
html[lang^="fr"] body#about-attr-page
.container.responsivegrid:has(> #container-f1c43da3c1),
html[lang^="fr"] body#about-attr-page
.container.responsivegrid:has(> #container-0558d93e3a),
html[lang^="fr"] body#about-attr-page
.container.responsivegrid:has(> #container-ba6e58fea9),
html[lang^="fr"] body#about-attr-page
.container.responsivegrid:has(> #container-1070bba6bc),
html[lang^="fr"] body#about-attr-page
.container.responsivegrid:has(> #container-3235c11473) {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  background-color: #FAFAFA !important;
}

/* Other content sections remain white */
html[lang^="fr"] body#about-attr-page
.container.responsivegrid:has(> #container-2f22f1a3fe),
html[lang^="fr"] body#about-attr-page
.container.responsivegrid:has(> #container-d3725d332e),
html[lang^="fr"] body#about-attr-page
.container.responsivegrid:has(> #container-8f1a20ac09),
html[lang^="fr"] body#about-attr-page
.container.responsivegrid:has(> #container-c43553e6ca) {
  background-color: #FFFFFF !important;
}

/* Header navigation text must remain white */
html[lang^="fr"] body#about-attr-page #header .attr-header-nav a,
html[lang^="fr"] body#about-attr-page #header .main-menu a,
html[lang^="fr"] body#about-attr-page #header .top-menu a {
  color: #FFFFFF !important;
}

/* Active navigation underline remains visible */
html[lang^="fr"] body#about-attr-page
#header .attr-header-nav a:hover,
html[lang^="fr"] body#about-attr-page
#header .attr-header-nav a:focus,
html[lang^="fr"] body#about-attr-page
#header .attr-header-nav a:active {
  color: #FFFFFF !important;
}

/* ================= END FINAL FR ALIGNMENT FIX ================= */



/* =========================================================
   FINAL EN + FR CTA / BLACK STRIP / EN HEADER FIX — V3
   Keep this block LAST in about-attr.css.
   ========================================================= */

/* BLACK STRIP — EN + FR */
html[lang^="en"] body#about-attr-page .black-strip,
html[lang^="fr"] body#about-attr-page .black-strip {
  display: block !important;
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  height: 56px !important;
  min-height: 56px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #000000 !important;
  box-sizing: border-box !important;
}

/* EN HEADER FONT — WHITE */
html[lang^="en"] body#about-attr-page #header .attr-header-nav a,
html[lang^="en"] body#about-attr-page #header .main-menu a,
html[lang^="en"] body#about-attr-page #header .top-menu a,
html[lang^="en"] body#about-attr-page #header .language-wrap a,
html[lang^="en"] body#about-attr-page #header .bg-stay a,
html[lang^="en"] body#about-attr-page #header .attr-header-nav a:visited,
html[lang^="en"] body#about-attr-page #header .attr-header-nav a:hover,
html[lang^="en"] body#about-attr-page #header .attr-header-nav a:focus {
  color: #FFFFFF !important;
}

/* CTA BLOCKS — DESKTOP */


/* CTA BLOCKS — MOBILE/TABLET */


/* ================= END FINAL CTA/HEADER/STRIP FIX V3 ================= */



/* =========================================================
   FINAL EN + FR CTA BUTTON OVERLAP FIX — V4
   Applies to both English and French.
   Keeps:
   - 490px card width
   - 20px gap
   - 238px left start
   - blue button centered
   - button half inside / half outside the card
   Keep this block LAST in about-attr.css.
   ========================================================= */



/* Tablet/mobile: keep button overlapping but use fluid card width */


/* ================= END FINAL EN + FR CTA BUTTON FIX V4 ================= */



/* =========================================================
   FINAL EN + FR CTA BUTTON TRUE-CENTER FIX — V5
   The button is centred against the full card, not only the
   text box beside the icon.
   Keep this block LAST in about-attr.css.
   ========================================================= */



/* Same centring behaviour for tablet/mobile */


/* ================= END FINAL CTA TRUE-CENTER FIX V5 ================= */



/* =========================================================
   FINAL EN + FR CTA ALIGNMENT / ICON / BUTTON TEXT FIX — V6
   Keep this block LAST in about-attr.css.
   ========================================================= */



/* Tablet/mobile icon alignment */


/* ================= END FINAL CTA V6 ================= */



/* =========================================================
   FINAL CTA SECTION FIX — EN + FR — V7
   Built for the exact HTML structure:
   #attr-cta-section > .attr-cta-card > img + .attr-cta-box
   Keep this block LAST in about-attr.css.
   ========================================================= */

/* The CTA section/background must remain full width. */


/* Each CTA card */


/* Fixed image area inside both cards */


/* Text area */




/* Button positioned relative to the complete 490px card */




/* EN only: second CTA button stays on one line */


/* FR second CTA button may wrap to two lines */


/* Tablet/mobile */


/* ================= END FINAL CTA V7 ================= */

/* =========================================================
   CONSOLIDATED FOOTER CTA — EN + FR
   Single source of truth for desktop, tablet and mobile.
   ========================================================= */

/* Full-width CTA section/background */
html[lang^="en"] body#about-attr-page #attr-cta-section,
html[lang^="fr"] body#about-attr-page #attr-cta-section {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;

  width: 100%;
  min-width: 0;
  max-width: none;

  gap: 20px;
  margin: 0;
  padding: 84px 20px 108px 850px;

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

  overflow: visible;
  box-sizing: border-box;
}

/* Desktop cards */
html[lang^="en"] body#about-attr-page #attr-cta-section > .attr-cta-card,
html[lang^="fr"] body#about-attr-page #attr-cta-section > .attr-cta-card {
  position: relative;
  display: flex;
  flex: 0 0 490px;
  align-items: center;

  width: 490px;
  min-width: 490px;
  max-width: 490px;

  height: auto;
  min-height: 158px;
  max-height: none;

  gap: 20px;
  margin: 0;
  padding: 24px 28px 42px;

  background: rgba(222, 224, 238, 0.95);
  border: 1px solid #656efa;
  border-radius: 22px 22px 22px 0;

  overflow: visible;
  box-sizing: border-box;
}

/* Card icons */
html[lang^="en"] body#about-attr-page #attr-cta-section > .attr-cta-card > .attr-cta-icon,
html[lang^="fr"] body#about-attr-page #attr-cta-section > .attr-cta-card > .attr-cta-icon {
  position: static;
  display: block;
  flex: 0 0 70px;

  width: 70px;
  min-width: 70px;
  max-width: 70px;

  height: 82px;
  min-height: 82px;
  max-height: 82px;

  margin: 0;
  padding: 0;

  object-fit: contain;
  object-position: center;
  box-sizing: border-box;
}

/* Text area */
html[lang^="en"] body#about-attr-page #attr-cta-section > .attr-cta-card > .attr-cta-box,
html[lang^="fr"] body#about-attr-page #attr-cta-section > .attr-cta-card > .attr-cta-box {
  position: static;
  display: block;
  flex: 1 1 auto;

  width: auto;
  min-width: 0;
  max-width: none;

  height: auto;
  min-height: 0;
  max-height: none;

  margin: 0;
  padding: 0;

  background: transparent;
  overflow: visible;
  box-sizing: border-box;
}

html[lang^="en"] body#about-attr-page #attr-cta-section .attr-cta-text,
html[lang^="fr"] body#about-attr-page #attr-cta-section .attr-cta-text {
  width: 100%;
  height: auto;
  min-height: 0;
  max-height: none;

  margin: 0;
  padding: 0;

  font-family: "Kanit", sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.4;
  color: #1a1a4b;
  text-align: left;

  overflow-wrap: normal;
  word-break: normal;
}

/* Button overlaps the bottom edge of the complete card */
html[lang^="en"] body#about-attr-page #attr-cta-section .attr-cta-btn-wrap,
html[lang^="fr"] body#about-attr-page #attr-cta-section .attr-cta-btn-wrap {
  position: absolute;
  left: 50%;
  bottom: -22px;
  transform: translateX(-50%);

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

  width: 330px;
  min-width: 330px;
  max-width: 330px;

  margin: 0;
  padding: 0;
  z-index: 10;
  box-sizing: border-box;
}

html[lang^="en"] body#about-attr-page #attr-cta-section .attr-cta-btn,
html[lang^="fr"] body#about-attr-page #attr-cta-section .attr-cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  min-height: 44px;

  margin: 0;
  padding: 10px 14px;

  background: #656efa;
  border-radius: 24px;

  color: #fff;
  font-family: "Kanit-SemiBold", sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.3px;
  text-align: center;
  text-decoration: none;

  box-sizing: border-box;
}

/* EN second button stays on one line */
html[lang^="en"] body#about-attr-page
#attr-cta-section > .attr-cta-card:nth-child(2) .attr-cta-btn {
  white-space: nowrap;
}

/* FR first button is wider for the longer translation */
html[lang^="fr"] body#about-attr-page
#attr-cta-section > .attr-cta-card:first-child .attr-cta-btn-wrap {
  width: 410px;
  min-width: 410px;
  max-width: 410px;
}

/* FR labels may wrap */
html[lang^="fr"] body#about-attr-page #attr-cta-section .attr-cta-btn {
  white-space: normal;
}

/* Tablet */
@media screen and (min-width: 769px) and (max-width: 1100px) {
  html[lang^="en"] body#about-attr-page #attr-cta-section,
  html[lang^="fr"] body#about-attr-page #attr-cta-section {
    justify-content: center;
    padding: 70px 30px 100px;
  }

  html[lang^="en"] body#about-attr-page #attr-cta-section > .attr-cta-card,
  html[lang^="fr"] body#about-attr-page #attr-cta-section > .attr-cta-card {
    flex: 1 1 0;
    width: calc((100% - 20px) / 2);
    min-width: 0;
    max-width: 490px;
  }
}

/* Mobile */
@media screen and (max-width: 768px) {
  html[lang^="en"] body#about-attr-page #attr-cta-section,
  html[lang^="fr"] body#about-attr-page #attr-cta-section {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;

    width: 100%;

    height: auto;
    min-height: 0;
    max-height: none;

    gap: 44px;
    margin: 0;
    padding: 40px 16px 70px;

    background-image: url('/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/Internal%20Footer%20image_desktop.jpg');
    background-size: cover;
    background-position: 20% bottom;
    background-repeat: no-repeat;

    box-sizing: border-box;
  }

  html[lang^="en"] body#about-attr-page #attr-cta-section > .attr-cta-card,
  html[lang^="fr"] body#about-attr-page #attr-cta-section > .attr-cta-card {
    position: relative;
    display: flex;
    flex-direction: row;
    flex: 0 0 auto;
    align-items: center;

    width: 100%;
    min-width: 0;
    max-width: 490px;

    height: auto;
    min-height: 0;
    max-height: none;

    gap: 16px;
    margin: 0;
    padding: 24px 20px 46px;

    overflow: visible;
    box-sizing: border-box;
  }

  html[lang^="en"] body#about-attr-page #attr-cta-section > .attr-cta-card > .attr-cta-icon,
  html[lang^="fr"] body#about-attr-page #attr-cta-section > .attr-cta-card > .attr-cta-icon {
    flex: 0 0 58px;

    width: 58px;
    min-width: 58px;
    max-width: 58px;

    height: 74px;
    min-height: 74px;
    max-height: 74px;
  }

  html[lang^="en"] body#about-attr-page #attr-cta-section > .attr-cta-card > .attr-cta-box,
  html[lang^="fr"] body#about-attr-page #attr-cta-section > .attr-cta-card > .attr-cta-box {
    flex: 1 1 auto;

    width: auto;
    min-width: 0;

    height: auto;
    min-height: 0;
    max-height: none;
  }

  html[lang^="en"] body#about-attr-page #attr-cta-section .attr-cta-text,
  html[lang^="fr"] body#about-attr-page #attr-cta-section .attr-cta-text {
    height: auto;
    min-height: 0;
    max-height: none;

    font-size: 15px;
    line-height: 1.35;
  }

  html[lang^="en"] body#about-attr-page #attr-cta-section .attr-cta-btn-wrap,
  html[lang^="fr"] body#about-attr-page #attr-cta-section .attr-cta-btn-wrap,
  html[lang^="fr"] body#about-attr-page
  #attr-cta-section > .attr-cta-card:first-child .attr-cta-btn-wrap {
    width: calc(100% - 32px);
    min-width: 0;
    max-width: 390px;
  }

  html[lang^="en"] body#about-attr-page #attr-cta-section .attr-cta-btn,
  html[lang^="fr"] body#about-attr-page #attr-cta-section .attr-cta-btn {
    width: 100%;
    min-width: 0;
    max-width: 390px;

    height: auto;
    min-height: 44px;

    white-space: normal;
  }
}

/* Small mobile */
@media screen and (max-width: 480px) {
  html[lang^="en"] body#about-attr-page #attr-cta-section,
  html[lang^="fr"] body#about-attr-page #attr-cta-section {
    padding: 32px 14px 64px;
    gap: 40px;
  }

  html[lang^="en"] body#about-attr-page #attr-cta-section > .attr-cta-card,
  html[lang^="fr"] body#about-attr-page #attr-cta-section > .attr-cta-card {
    gap: 14px;
    padding: 22px 16px 44px;
    border-radius: 22px 22px 22px 0;
  }

  html[lang^="en"] body#about-attr-page #attr-cta-section > .attr-cta-card > .attr-cta-icon,
  html[lang^="fr"] body#about-attr-page #attr-cta-section > .attr-cta-card > .attr-cta-icon {
    flex-basis: 52px;

    width: 52px;
    min-width: 52px;
    max-width: 52px;

    height: 68px;
    min-height: 68px;
    max-height: 68px;
  }

  html[lang^="en"] body#about-attr-page #attr-cta-section .attr-cta-text,
  html[lang^="fr"] body#about-attr-page #attr-cta-section .attr-cta-text {
    font-size: 14px;
    line-height: 1.3;
  }

  html[lang^="en"] body#about-attr-page #attr-cta-section .attr-cta-btn,
  html[lang^="fr"] body#about-attr-page #attr-cta-section .attr-cta-btn {
    font-size: 11px;
    padding: 10px;
  }
}

/* ================= END CONSOLIDATED FOOTER CTA ================= */



/* =========================================================
   FINAL FOOTER CTA BACKGROUND + MOBILE LAYOUT FIX — EN + FR
   Keep this block LAST in about-attr.css.
   ========================================================= */

/* DESKTOP / LARGE TABLET */
@media screen and (min-width: 769px) {

  html[lang^="en"] body#about-attr-page #attr-cta-section,
  html[lang^="fr"] body#about-attr-page #attr-cta-section {
    min-height: 430px !important;

    padding-top: 84px !important;
    padding-bottom: 120px !important;

    background-image: url('/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/Internal%20Footer%20image_desktop.jpg') !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;

    /* Keep the girl visible and lower in the footer */
    background-position: left bottom !important;
  }
}

/* MOBILE */
@media screen and (max-width: 768px) {

  html[lang^="en"] body#about-attr-page #attr-cta-section,
  html[lang^="fr"] body#about-attr-page #attr-cta-section {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;

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

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    gap: 52px !important;

    margin: 0 !important;
    padding: 48px 20px 84px !important;

    background-image: url('/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/Internal%20Footer%20image_desktop.jpg') !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;

    /* Shift the image so the girl remains visible on mobile */
    background-position: 16% bottom !important;

    overflow: visible !important;
    box-sizing: border-box !important;
  }

  html[lang^="en"] body#about-attr-page #attr-cta-section > .attr-cta-card,
  html[lang^="fr"] body#about-attr-page #attr-cta-section > .attr-cta-card {
    position: relative !important;

    display: grid !important;
    grid-template-columns: 62px minmax(0, 1fr) !important;
    column-gap: 18px !important;
    align-items: center !important;

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

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 28px 22px 52px !important;

    background: rgba(222, 224, 238, 0.96) !important;
    border: 1px solid #656efa !important;
    border-radius: 24px 24px 24px 0 !important;

    overflow: visible !important;
    box-sizing: border-box !important;
  }

  html[lang^="en"] body#about-attr-page #attr-cta-section > .attr-cta-card > .attr-cta-icon,
  html[lang^="fr"] body#about-attr-page #attr-cta-section > .attr-cta-card > .attr-cta-icon {
    grid-column: 1 !important;
    align-self: center !important;
    justify-self: center !important;

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

    height: 78px !important;
    min-height: 78px !important;
    max-height: 78px !important;

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

    object-fit: contain !important;
    object-position: center !important;
  }

  html[lang^="en"] body#about-attr-page #attr-cta-section > .attr-cta-card > .attr-cta-box,
  html[lang^="fr"] body#about-attr-page #attr-cta-section > .attr-cta-card > .attr-cta-box {
    position: static !important;

    grid-column: 2 !important;
    align-self: center !important;

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

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

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

  html[lang^="en"] body#about-attr-page #attr-cta-section .attr-cta-text,
  html[lang^="fr"] body#about-attr-page #attr-cta-section .attr-cta-text {
    width: 100% !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

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

    font-size: 16px !important;
    line-height: 1.35 !important;
  }

  html[lang^="en"] body#about-attr-page #attr-cta-section .attr-cta-btn-wrap,
  html[lang^="fr"] body#about-attr-page #attr-cta-section .attr-cta-btn-wrap,
  html[lang^="fr"] body#about-attr-page
  #attr-cta-section > .attr-cta-card:first-child .attr-cta-btn-wrap {
    position: absolute !important;

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

    transform: translateX(-50%) !important;

    width: calc(100% - 42px) !important;
    min-width: 0 !important;
    max-width: 470px !important;

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

    z-index: 10 !important;
  }

  html[lang^="en"] body#about-attr-page #attr-cta-section .attr-cta-btn,
  html[lang^="fr"] body#about-attr-page #attr-cta-section .attr-cta-btn {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

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

    margin: 0 !important;
    padding: 11px 14px !important;

    font-size: 13px !important;
    line-height: 1.15 !important;

    white-space: normal !important;
    text-align: center !important;
  }
}

/* SMALL PHONES */
@media screen and (max-width: 480px) {

  html[lang^="en"] body#about-attr-page #attr-cta-section,
  html[lang^="fr"] body#about-attr-page #attr-cta-section {
    gap: 48px !important;
    padding: 40px 14px 76px !important;

    background-position: 12% bottom !important;
  }

  html[lang^="en"] body#about-attr-page #attr-cta-section > .attr-cta-card,
  html[lang^="fr"] body#about-attr-page #attr-cta-section > .attr-cta-card {
    grid-template-columns: 54px minmax(0, 1fr) !important;
    column-gap: 14px !important;

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

    padding: 24px 18px 48px !important;
  }

  html[lang^="en"] body#about-attr-page #attr-cta-section > .attr-cta-card > .attr-cta-icon,
  html[lang^="fr"] body#about-attr-page #attr-cta-section > .attr-cta-card > .attr-cta-icon {
    width: 54px !important;
    min-width: 54px !important;
    max-width: 54px !important;

    height: 70px !important;
    min-height: 70px !important;
    max-height: 70px !important;
  }

  html[lang^="en"] body#about-attr-page #attr-cta-section .attr-cta-text,
  html[lang^="fr"] body#about-attr-page #attr-cta-section .attr-cta-text {
    font-size: 14px !important;
    line-height: 1.3 !important;
  }

  html[lang^="en"] body#about-attr-page #attr-cta-section .attr-cta-btn-wrap,
  html[lang^="fr"] body#about-attr-page #attr-cta-section .attr-cta-btn-wrap,
  html[lang^="fr"] body#about-attr-page
  #attr-cta-section > .attr-cta-card:first-child .attr-cta-btn-wrap {
    width: calc(100% - 28px) !important;
    max-width: none !important;
  }

  html[lang^="en"] body#about-attr-page #attr-cta-section .attr-cta-btn,
  html[lang^="fr"] body#about-attr-page #attr-cta-section .attr-cta-btn {
    min-height: 46px !important;

    font-size: 12px !important;
    padding: 10px 10px !important;
  }
}

/* ================= END FINAL FOOTER CTA FIX ================= */



/* =========================================================
   FR MOBILE — MATCH EN LAYOUT AND DESIGN
   Structural layout is identical to EN.
   Only French text is allowed to wrap where required.
   Keep this block LAST in about-attr.css.
   ========================================================= */

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

  /* FR footer section matches EN */
  html[lang^="fr"] body#about-attr-page #attr-cta-section {
    position: relative !important;

    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;

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

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    gap: 52px !important;

    margin: 0 !important;
    padding: 48px 20px 84px !important;

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

    overflow: visible !important;
    box-sizing: border-box !important;
  }

  /* FR cards match EN dimensions and structure */
  html[lang^="fr"] body#about-attr-page
  #attr-cta-section > .attr-cta-card {
    position: relative !important;

    display: grid !important;
    grid-template-columns: 62px minmax(0, 1fr) !important;
    column-gap: 18px !important;
    align-items: center !important;

    flex: 0 0 auto !important;

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

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    gap: 0 !important;
    margin: 0 !important;
    padding: 28px 22px 52px !important;

    background: rgba(222, 224, 238, 0.96) !important;
    border: 1px solid #656efa !important;
    border-radius: 24px 24px 24px 0 !important;

    overflow: visible !important;
    box-sizing: border-box !important;
  }

  /* FR icons match EN */
  html[lang^="fr"] body#about-attr-page
  #attr-cta-section > .attr-cta-card > .attr-cta-icon {
    position: static !important;

    display: block !important;
    grid-column: 1 !important;
    align-self: center !important;
    justify-self: center !important;

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

    height: 78px !important;
    min-height: 78px !important;
    max-height: 78px !important;

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

    object-fit: contain !important;
    object-position: center !important;

    box-sizing: border-box !important;
  }

  /* FR text container matches EN */
  html[lang^="fr"] body#about-attr-page
  #attr-cta-section > .attr-cta-card > .attr-cta-box {
    position: static !important;

    display: block !important;
    grid-column: 2 !important;
    align-self: center !important;

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

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

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

    background: transparent !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  /* Same typography metrics as EN */
  html[lang^="fr"] body#about-attr-page
  #attr-cta-section .attr-cta-text {
    display: block !important;

    width: 100% !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

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

    font-family: "Kanit", sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.35 !important;

    color: #1a1a4b !important;
    text-align: left !important;

    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  /* FR button placement matches EN */
  html[lang^="fr"] body#about-attr-page
  #attr-cta-section .attr-cta-btn-wrap,
  html[lang^="fr"] body#about-attr-page
  #attr-cta-section > .attr-cta-card:first-child .attr-cta-btn-wrap {
    position: absolute !important;

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

    transform: translateX(-50%) !important;

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

    width: calc(100% - 42px) !important;
    min-width: 0 !important;
    max-width: 470px !important;

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

    z-index: 10 !important;
    box-sizing: border-box !important;
  }

  html[lang^="fr"] body#about-attr-page
  #attr-cta-section .attr-cta-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

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

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

    margin: 0 !important;
    padding: 11px 14px !important;

    font-family: "Kanit-SemiBold", sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;

    color: #FFFFFF !important;
    text-align: center !important;
    text-decoration: none !important;

    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;

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

/* FR small mobile matches EN small-mobile layout */
@media screen and (max-width: 480px) {

  html[lang^="fr"] body#about-attr-page #attr-cta-section {
    gap: 48px !important;
    padding: 40px 14px 76px !important;

    background-position: 12% bottom !important;
  }

  html[lang^="fr"] body#about-attr-page
  #attr-cta-section > .attr-cta-card {
    grid-template-columns: 54px minmax(0, 1fr) !important;
    column-gap: 14px !important;

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

    padding: 24px 18px 48px !important;
    border-radius: 22px 22px 22px 0 !important;
  }

  html[lang^="fr"] body#about-attr-page
  #attr-cta-section > .attr-cta-card > .attr-cta-icon {
    width: 54px !important;
    min-width: 54px !important;
    max-width: 54px !important;

    height: 70px !important;
    min-height: 70px !important;
    max-height: 70px !important;
  }

  html[lang^="fr"] body#about-attr-page
  #attr-cta-section .attr-cta-text {
    font-size: 14px !important;
    line-height: 1.3 !important;
  }

  html[lang^="fr"] body#about-attr-page
  #attr-cta-section .attr-cta-btn-wrap,
  html[lang^="fr"] body#about-attr-page
  #attr-cta-section > .attr-cta-card:first-child .attr-cta-btn-wrap {
    width: calc(100% - 28px) !important;
    max-width: none !important;
  }

  html[lang^="fr"] body#about-attr-page
  #attr-cta-section .attr-cta-btn {
    min-height: 46px !important;

    padding: 10px !important;

    font-size: 12px !important;
    line-height: 1.15 !important;
  }
}

/* ================= END FR MOBILE MATCH EN ================= */



/* =========================================================
   EN + FR — USE MOBILE CTA DESIGN UP TO 990PX
   Desktop CTA layout starts from 991px.
   Keep this block LAST in about-attr.css.
   ========================================================= */

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

  html[lang^="en"] body#about-attr-page #attr-cta-section,
  html[lang^="fr"] body#about-attr-page #attr-cta-section {
    position: relative !important;

    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;

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

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    gap: 52px !important;

    margin: 0 !important;
    padding: 48px 20px 84px !important;

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

    overflow: visible !important;
    box-sizing: border-box !important;
  }

  html[lang^="en"] body#about-attr-page
  #attr-cta-section > .attr-cta-card,
  html[lang^="fr"] body#about-attr-page
  #attr-cta-section > .attr-cta-card {
    position: relative !important;

    display: grid !important;
    grid-template-columns: 62px minmax(0, 1fr) !important;
    column-gap: 18px !important;
    align-items: center !important;

    flex: 0 0 auto !important;

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

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    gap: 0 !important;
    margin: 0 !important;
    padding: 28px 22px 52px !important;

    background: rgba(222, 224, 238, 0.96) !important;
    border: 1px solid #656efa !important;
    border-radius: 24px 24px 24px 0 !important;

    overflow: visible !important;
    box-sizing: border-box !important;
  }

  html[lang^="en"] body#about-attr-page
  #attr-cta-section > .attr-cta-card > .attr-cta-icon,
  html[lang^="fr"] body#about-attr-page
  #attr-cta-section > .attr-cta-card > .attr-cta-icon {
    position: static !important;

    display: block !important;
    grid-column: 1 !important;
    align-self: center !important;
    justify-self: center !important;

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

    height: 78px !important;
    min-height: 78px !important;
    max-height: 78px !important;

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

    object-fit: contain !important;
    object-position: center !important;

    box-sizing: border-box !important;
  }

  html[lang^="en"] body#about-attr-page
  #attr-cta-section > .attr-cta-card > .attr-cta-box,
  html[lang^="fr"] body#about-attr-page
  #attr-cta-section > .attr-cta-card > .attr-cta-box {
    position: static !important;

    display: block !important;
    grid-column: 2 !important;
    align-self: center !important;

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

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

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

    background: transparent !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  html[lang^="en"] body#about-attr-page
  #attr-cta-section .attr-cta-text,
  html[lang^="fr"] body#about-attr-page
  #attr-cta-section .attr-cta-text {
    display: block !important;

    width: 100% !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

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

    font-family: "Kanit", sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.35 !important;

    color: #1a1a4b !important;
    text-align: left !important;

    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  html[lang^="en"] body#about-attr-page
  #attr-cta-section .attr-cta-btn-wrap,
  html[lang^="fr"] body#about-attr-page
  #attr-cta-section .attr-cta-btn-wrap,
  html[lang^="fr"] body#about-attr-page
  #attr-cta-section > .attr-cta-card:first-child .attr-cta-btn-wrap {
    position: absolute !important;

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

    transform: translateX(-50%) !important;

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

    width: calc(100% - 42px) !important;
    min-width: 0 !important;
    max-width: 470px !important;

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

    z-index: 9 !important;
    box-sizing: border-box !important;
  }

  html[lang^="en"] body#about-attr-page
  #attr-cta-section .attr-cta-btn,
  html[lang^="fr"] body#about-attr-page
  #attr-cta-section .attr-cta-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

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

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

    margin: 0 !important;
    padding: 11px 14px !important;

    font-family: "Kanit-SemiBold", sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;

    color: #FFFFFF !important;
    text-align: center !important;
    text-decoration: none !important;

    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;

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

/* Keep the smaller-phone adjustments below 480px */
@media screen and (max-width: 480px) {

  html[lang^="en"] body#about-attr-page #attr-cta-section,
  html[lang^="fr"] body#about-attr-page #attr-cta-section {
    gap: 48px !important;
    padding: 40px 14px 76px !important;

    background-position: 12% bottom !important;
  }

  html[lang^="en"] body#about-attr-page
  #attr-cta-section > .attr-cta-card,
  html[lang^="fr"] body#about-attr-page
  #attr-cta-section > .attr-cta-card {
    grid-template-columns: 54px minmax(0, 1fr) !important;
    column-gap: 14px !important;

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

    padding: 24px 18px 48px !important;
    border-radius: 22px 22px 22px 0 !important;
  }

  html[lang^="en"] body#about-attr-page
  #attr-cta-section > .attr-cta-card > .attr-cta-icon,
  html[lang^="fr"] body#about-attr-page
  #attr-cta-section > .attr-cta-card > .attr-cta-icon {
    width: 54px !important;
    min-width: 54px !important;
    max-width: 54px !important;

    height: 70px !important;
    min-height: 70px !important;
    max-height: 70px !important;
  }

  html[lang^="en"] body#about-attr-page
  #attr-cta-section .attr-cta-text,
  html[lang^="fr"] body#about-attr-page
  #attr-cta-section .attr-cta-text {
    font-size: 14px !important;
    line-height: 1.3 !important;
  }

  html[lang^="en"] body#about-attr-page
  #attr-cta-section .attr-cta-btn-wrap,
  html[lang^="fr"] body#about-attr-page
  #attr-cta-section .attr-cta-btn-wrap,
  html[lang^="fr"] body#about-attr-page
  #attr-cta-section > .attr-cta-card:first-child .attr-cta-btn-wrap {
    width: calc(100% - 28px) !important;
    max-width: none !important;
  }

  html[lang^="en"] body#about-attr-page
  #attr-cta-section .attr-cta-btn,
  html[lang^="fr"] body#about-attr-page
  #attr-cta-section .attr-cta-btn {
    min-height: 46px !important;

    padding: 10px !important;

    font-size: 12px !important;
    line-height: 1.15 !important;
  }
}

/* ================= END MOBILE DESIGN THROUGH 990PX ================= */



/* =========================================================
   FR ABOUT ATTR — COMPLETE MOBILE/TABLET PAGE FIX
   Applies through 990px only. EN remains unchanged.
   Keep this block LAST in about-attr.css.
   ========================================================= */

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

  /* ---------------------------------------------------------
     GLOBAL FR MOBILE WIDTH / OVERFLOW RESET
     --------------------------------------------------------- */

  html[lang^="fr"],
  html[lang^="fr"] body,
  html[lang^="fr"] body#about-attr-page {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  html[lang^="fr"] body#about-attr-page .cmp-container,
  html[lang^="fr"] body#about-attr-page .responsivegrid,
  html[lang^="fr"] body#about-attr-page .aem-Grid,
  html[lang^="fr"] body#about-attr-page .text,
  html[lang^="fr"] body#about-attr-page .cmp-text {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ---------------------------------------------------------
     1. MOVE "SUR CETTE PAGE" DIRECTLY BELOW THE HERO
     --------------------------------------------------------- */

  html[lang^="fr"] body#about-attr-page
  #container-f1c43da3c1 {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  html[lang^="fr"] body#about-attr-page
  #container-f1c43da3c1 > .text:has(#this-page) {
    order: -10 !important;
  }

  html[lang^="fr"] body#about-attr-page
  #container-f1c43da3c1 > .text:has(#content-sec-1) {
    order: -9 !important;
  }

  html[lang^="fr"] body#about-attr-page
  #container-f1c43da3c1 > .text:has(#about-cards-1) {
    order: -8 !important;
  }

  html[lang^="fr"] body#about-attr-page
  #container-f1c43da3c1 #this-page .aboutattr-cards-container {
    width: calc(100% - 32px) !important;
    max-width: 560px !important;
    min-height: 0 !important;
    height: auto !important;

    margin: 16px auto 20px !important;
    padding: 0 !important;

    border-radius: 14px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  /* ---------------------------------------------------------
     2. SOURCE DIAGRAM — STACK CORRECTLY AND REMOVE DUPLICATE
        CONSECUTIVE ARROWS
     --------------------------------------------------------- */

  html[lang^="fr"] body#about-attr-page
  #about-cards-1 .aboutattr-cards-container,
  html[lang^="fr"] body#about-attr-page
  #container-0558d93e3a .aboutattr-cards-container {
    width: calc(100% - 32px) !important;
    max-width: 560px !important;
    min-width: 0 !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 18px auto 26px !important;
    padding: 22px 18px 28px !important;

    border-radius: 24px 24px 24px 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  html[lang^="fr"] body#about-attr-page
  #about-cards-1 .diagnosis-cards-items,
  html[lang^="fr"] body#about-attr-page
  #container-0558d93e3a .diagnosis-cards-items {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;

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

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

    box-sizing: border-box !important;
  }

  html[lang^="fr"] body#about-attr-page
  #about-cards-1 .steps-card,
  html[lang^="fr"] body#about-attr-page
  #container-0558d93e3a .steps-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;

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

    height: auto !important;
    min-height: 0 !important;

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

    text-align: center !important;
    box-sizing: border-box !important;
  }

  html[lang^="fr"] body#about-attr-page
  #about-cards-1 .steps-card-icon,
  html[lang^="fr"] body#about-attr-page
  #container-0558d93e3a .steps-card-icon {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

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

    text-align: center !important;
    white-space: normal !important;
    box-sizing: border-box !important;
  }

  html[lang^="fr"] body#about-attr-page
  #about-cards-1 img.steps-icon,
  html[lang^="fr"] body#about-attr-page
  #about-cards-1 img.attr.steps-icon,
  html[lang^="fr"] body#about-attr-page
  #container-0558d93e3a img.steps-icon,
  html[lang^="fr"] body#about-attr-page
  #container-0558d93e3a img.attr.steps-icon {
    display: block !important;

    width: auto !important;
    max-width: min(230px, 80%) !important;
    height: auto !important;
    max-height: 220px !important;

    margin: 0 auto 12px !important;

    object-fit: contain !important;
    transform: none !important;
  }

  /* Keep one arrow between stages */
  html[lang^="fr"] body#about-attr-page
  #about-cards-1 img.alt-right-arrow,
  html[lang^="fr"] body#about-attr-page
  #container-0558d93e3a img.alt-right-arrow {
    display: block !important;

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

    height: auto !important;

    margin: 4px auto !important;

    transform: rotate(90deg) !important;
    object-fit: contain !important;
  }

  /* Remove only duplicate arrows appearing immediately together */
  html[lang^="fr"] body#about-attr-page
  #about-cards-1 img.alt-right-arrow + img.alt-right-arrow,
  html[lang^="fr"] body#about-attr-page
  #container-0558d93e3a img.alt-right-arrow + img.alt-right-arrow {
    display: none !important;
  }

  /* ---------------------------------------------------------
     3. hATTR-PN PROGRESSION CARD — VERTICAL, NO OVERFLOW
     --------------------------------------------------------- */

  html[lang^="fr"] body#about-attr-page
  #progressive-cont-1 .aboutattr-cards-container {
    width: calc(100% - 32px) !important;
    max-width: 560px !important;
    min-width: 0 !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 20px auto 26px !important;
    padding: 22px 18px 28px !important;

    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  html[lang^="fr"] body#about-attr-page
  #progressive-cont-1 .diagnosis-cards-items {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;

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

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

  html[lang^="fr"] body#about-attr-page
  #progressive-cont-1 .steps-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;

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

    height: auto !important;
    min-height: 0 !important;

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

    text-align: center !important;
    box-sizing: border-box !important;
  }

  html[lang^="fr"] body#about-attr-page
  #progressive-cont-1 .steps-card-icon {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  html[lang^="fr"] body#about-attr-page
  #progressive-cont-1 img.steps-icon,
  html[lang^="fr"] body#about-attr-page
  #progressive-cont-1 img.attr.steps-icon {
    display: block !important;

    width: auto !important;
    max-width: 210px !important;
    height: auto !important;
    max-height: 150px !important;

    margin: 0 auto 10px !important;

    object-fit: contain !important;
    transform: none !important;
  }

  html[lang^="fr"] body#about-attr-page
  #progressive-cont-1 img.alt-right-arrow {
    display: block !important;

    width: 34px !important;
    max-width: 34px !important;
    height: auto !important;

    margin: 4px auto !important;

    transform: rotate(90deg) !important;
  }

  /* ---------------------------------------------------------
     4. POLYNEUROPATHY LIST — CORRECT WIDTH AND PADDING
     --------------------------------------------------------- */

  html[lang^="fr"] body#about-attr-page
  .attr-polyneuropathy-text,
  html[lang^="fr"] body#about-attr-page
  .polyneuropathy-text {
    width: calc(100% - 32px) !important;
    max-width: 560px !important;
    min-width: 0 !important;

    margin: 0 auto !important;
    padding: 24px 18px !important;

    box-sizing: border-box !important;
  }

  html[lang^="fr"] body#about-attr-page
  .attr-polyneuropathy-list,
  html[lang^="fr"] body#about-attr-page
  .polyneuropathy-list {
    width: 100% !important;

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

    list-style: none !important;
    box-sizing: border-box !important;
  }

  html[lang^="fr"] body#about-attr-page
  .attr-polyneuropathy-list li,
  html[lang^="fr"] body#about-attr-page
  .polyneuropathy-list li {
    width: 100% !important;

    margin: 0 0 14px !important;
    padding: 0 0 0 28px !important;

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

    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;

    box-sizing: border-box !important;
  }

  /* ---------------------------------------------------------
     5. CARDIAC AMYLOIDOSIS TEXT — FIX PLUS/BULLET LAYOUT
     --------------------------------------------------------- */

  html[lang^="fr"] body#about-attr-page
  #container-380ba759fc {
    width: 100% !important;
    max-width: 100% !important;

    margin: 0 auto !important;
    padding: 24px 16px 34px !important;

    box-sizing: border-box !important;
  }

  html[lang^="fr"] body#about-attr-page
  #container-380ba759fc .slide {
    width: calc(100% - 0px) !important;
    max-width: 560px !important;

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

    box-sizing: border-box !important;
  }

  html[lang^="fr"] body#about-attr-page
  #container-380ba759fc .slide .bullet-row {
    display: flex !important;
    align-items: flex-start !important;

    width: 100% !important;

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

    box-sizing: border-box !important;
  }

  html[lang^="fr"] body#about-attr-page
  #container-380ba759fc .slide .bullet.plus {
    display: block !important;
    flex: 0 0 22px !important;

    width: 22px !important;

    padding: 1px 0 0 !important;

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

  html[lang^="fr"] body#about-attr-page
  #container-380ba759fc .slide .bullet.plus::before {
    content: "✦" !important;

    display: block !important;

    color: #585AEA !important;
    font-size: 10px !important;
    line-height: 22px !important;
  }

  html[lang^="fr"] body#about-attr-page
  #container-380ba759fc .slide .bullet-text {
    flex: 1 1 auto !important;

    width: auto !important;
    min-width: 0 !important;

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

    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  html[lang^="fr"] body#about-attr-page
  #container-380ba759fc .slide .sub-bullets {
    width: calc(100% - 28px) !important;

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

    box-sizing: border-box !important;
  }

  /* ---------------------------------------------------------
     6. SUSPECTED ATTR CALLOUT — SAME WIDTH AS CONTENT ABOVE
     --------------------------------------------------------- */

  html[lang^="fr"] body#about-attr-page
  .attr-suspected-box,
  html[lang^="fr"] body#about-attr-page
  #text-a798dda2f0 .attr-suspected-box {
    width: calc(100% - 32px) !important;
    max-width: 560px !important;
    min-width: 0 !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    gap: 12px !important;
    margin: 24px auto 30px !important;
    padding: 18px 16px 22px !important;

    border-radius: 20px 20px 20px 0 !important;
    box-sizing: border-box !important;
  }

  html[lang^="fr"] body#about-attr-page
  .attr-suspected-content {
    min-width: 0 !important;
    width: auto !important;
  }

  html[lang^="fr"] body#about-attr-page
  .attr-suspected-title,
  html[lang^="fr"] body#about-attr-page
  .attr-suspected-line,
  html[lang^="fr"] body#about-attr-page
  .attr-suspected-line.sub {
    font-size: 16px !important;
    line-height: 1.4 !important;

    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  /* ---------------------------------------------------------
     7. "AT RISK: MULTIPLE ORGANS" CARD — SAME WIDTH AS SOURCE
     --------------------------------------------------------- */

  html[lang^="fr"] body#about-attr-page
  #container-0558d93e3a,
  html[lang^="fr"] body#about-attr-page
  #container-0558d93e3a > .text,
  html[lang^="fr"] body#about-attr-page
  #container-0558d93e3a .cmp-text {
    width: 100% !important;
    max-width: 100% !important;

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

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

/* Small-phone tuning */
@media screen and (max-width: 480px) {

  html[lang^="fr"] body#about-attr-page
  #about-cards-1 .aboutattr-cards-container,
  html[lang^="fr"] body#about-attr-page
  #container-0558d93e3a .aboutattr-cards-container,
  html[lang^="fr"] body#about-attr-page
  #progressive-cont-1 .aboutattr-cards-container,
  html[lang^="fr"] body#about-attr-page
  .attr-polyneuropathy-text,
  html[lang^="fr"] body#about-attr-page
  .polyneuropathy-text,
  html[lang^="fr"] body#about-attr-page
  .attr-suspected-box,
  html[lang^="fr"] body#about-attr-page
  #text-a798dda2f0 .attr-suspected-box {
    width: calc(100% - 24px) !important;
    max-width: none !important;
  }

  html[lang^="fr"] body#about-attr-page
  #about-cards-1 .aboutattr-cards-container,
  html[lang^="fr"] body#about-attr-page
  #container-0558d93e3a .aboutattr-cards-container,
  html[lang^="fr"] body#about-attr-page
  #progressive-cont-1 .aboutattr-cards-container {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}

/* ================= END FR COMPLETE MOBILE FIX ================= */


/* =========================================================
   FR ABOUT ATTR – MOBILE LAYOUT MATCHING EN
   Added at the end so it overrides earlier mobile rules
   ========================================================= */

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

  html[lang^="fr"] body#about-attr-page #container-f1c43da3c1 {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  html[lang^="fr"] body#about-attr-page #container-f1c43da3c1 > .text {
    display: block !important;
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  html[lang^="fr"] body#about-attr-page #container-f1c43da3c1 #this-page {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 18px 16px 24px !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
  }

  html[lang^="fr"] body#about-attr-page #container-f1c43da3c1 #this-page .fr-about-sidebar-placeholder {
    display: none !important;
  }

  html[lang^="fr"] body#about-attr-page #container-f1c43da3c1 #this-page .aboutattr-cards-container {
    position: static !important;
    display: block !important;
    width: 100% !important;
    max-width: 560px !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  html[lang^="fr"] body#about-attr-page #container-f1c43da3c1 #this-page .aboutattr-cards-container::before,
  html[lang^="fr"] body#about-attr-page #container-f1c43da3c1 #this-page .aboutattr-cards-container::after {
    display: none !important;
    content: none !important;
  }

  html[lang^="fr"] body#about-attr-page #container-f1c43da3c1 #this-page .diagnosis-cards-items,
  html[lang^="fr"] body#about-attr-page #container-f1c43da3c1 #this-page .steps-card {
    position: static !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  html[lang^="fr"] body#about-attr-page #container-f1c43da3c1 #this-page .steps-card-icon:first-child {
    position: relative !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    min-height: 60px !important;
    margin: 0 !important;
    padding: 16px 54px 16px 24px !important;
    background: #e9ebf3 !important;
    border: 0 !important;
    border-radius: 14px !important;
    box-shadow: none !important;
    color: #00215f !important;
    font-family: "Kanit-Medium", "Kanit", sans-serif !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-align: left !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
  }

  html[lang^="fr"] body#about-attr-page #container-f1c43da3c1 #this-page .steps-card-icon:first-child::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    right: 24px !important;
    width: 14px !important;
    height: 14px !important;
    border-right: 4px solid #00215f !important;
    border-bottom: 4px solid #00215f !important;
    transform: translateY(-65%) rotate(45deg) !important;
    transform-origin: center !important;
    transition: transform 0.25s ease !important;
    box-sizing: border-box !important;
  }

  html[lang^="fr"] body#about-attr-page #container-f1c43da3c1 #this-page .steps-card.mobile-nav-open .steps-card-icon:first-child::after {
    transform: translateY(-35%) rotate(225deg) !important;
  }

  html[lang^="fr"] body#about-attr-page #container-f1c43da3c1 #this-page .steps-card:not(.mobile-nav-open) .steps-card-icon:not(:first-child) {
    display: none !important;
  }

  html[lang^="fr"] body#about-attr-page #container-f1c43da3c1 #this-page .steps-card.mobile-nav-open .steps-card-icon:not(:first-child) {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 12px 24px !important;
    background: #e9ebf3 !important;
    color: #00215f !important;
    font-family: "Kanit", "Kanit", sans-serif !important;
    font-size: 16px !important;
    line-height: 1.25 !important;
    text-align: left !important;
    box-sizing: border-box !important;
  }

  html[lang^="fr"] body#about-attr-page #container-f1c43da3c1 #this-page .steps-card.mobile-nav-open .steps-card-icon:nth-child(2) {
    padding-top: 18px !important;
  }

  html[lang^="fr"] body#about-attr-page #container-f1c43da3c1 #this-page .steps-card.mobile-nav-open .steps-card-icon:last-child {
    padding-bottom: 18px !important;
    border-radius: 0 0 14px 14px !important;
  }

  html[lang^="fr"] body#about-attr-page #container-f1c43da3c1 #content-sec-1 {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
  }

  html[lang^="fr"] body#about-attr-page #container-f1c43da3c1 #content-sec-1 .container-about-attr {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 18px 28px 36px !important;
    box-sizing: border-box !important;
  }

  html[lang^="fr"] body#about-attr-page #container-f1c43da3c1 #content-sec-1 .source-damage {
    display: block !important;
    width: 100% !important;
    max-width: 490px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  html[lang^="fr"] body#about-attr-page #container-f1c43da3c1 #content-sec-1 .source-damage h2 {
    margin: 0 !important;
    padding: 12px 0 20px !important;
    color: #00215f !important;
    font-family: "Kanit-SemiBold", "Kanit", sans-serif !important;
    font-size: 30px !important;
    line-height: 1.12 !important;
    font-weight: normal !important;
    text-align: center !important;
  }

  html[lang^="fr"] body#about-attr-page #container-f1c43da3c1 #content-sec-1 .source-damage p {
    width: 100% !important;
    max-width: 470px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    color: #151515 !important;
    font-family: "Kanit", "Kanit", sans-serif !important;
    font-size: 18px !important;
    line-height: 1.27 !important;
    text-align: center !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }

  html[lang^="fr"] body#about-attr-page #container-f1c43da3c1 #about-cards-1 {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 16px 30px !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
  }

  html[lang^="fr"] body#about-attr-page #container-f1c43da3c1 #about-cards-1 .aboutattr-cards-container {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: 500px !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 auto !important;
    padding: 22px 16px 36px !important;
    background: #ffffff !important;
    border: 1px solid #606fb4 !important;
    border-radius: 30px 30px 30px 0 !important;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.11) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  html[lang^="fr"] body#about-attr-page #container-f1c43da3c1 #about-cards-1 .at-source-heading {
    display: block !important;
    width: 100% !important;
    margin: 18px auto 18px !important;
    padding: 0 8px !important;
    color: #00215f !important;
    font-family: "Kanit-SemiBold", "Kanit", sans-serif !important;
    font-size: 18px !important;
    line-height: 1.2 !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  html[lang^="fr"] body#about-attr-page #container-f1c43da3c1 #about-cards-1 > br {
    display: none !important;
  }

  html[lang^="fr"] body#about-attr-page #container-f1c43da3c1 #about-cards-1 .diagnosis-cards-items {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    box-sizing: border-box !important;
  }

  html[lang^="fr"] body#about-attr-page #container-f1c43da3c1 #about-cards-1 .steps-card {
    position: static !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  html[lang^="fr"] body#about-attr-page #container-f1c43da3c1 #about-cards-1 .steps-card-icon {
    position: static !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  html[lang^="fr"] body#about-attr-page #container-f1c43da3c1 #about-cards-1 .steps-icon {
    display: block !important;
    width: auto !important;
    max-width: 230px !important;
    height: auto !important;
    max-height: 215px !important;
    margin: 0 auto 18px !important;
    object-fit: contain !important;
  }

  html[lang^="fr"] body#about-attr-page #container-f1c43da3c1 #about-cards-1 .ab-icon-1 {
    width: 230px !important;
    max-width: 230px !important;
    height: auto !important;
  }

  html[lang^="fr"] body#about-attr-page #container-f1c43da3c1 #about-cards-1 .ab-icon-2,
  html[lang^="fr"] body#about-attr-page #container-f1c43da3c1 #about-cards-1 .ab-icon-3,
  html[lang^="fr"] body#about-attr-page #container-f1c43da3c1 #about-cards-1 .ab-icon-4 {
    width: 210px !important;
    max-width: 210px !important;
    height: auto !important;
    margin-top: 0 !important;
  }

  html[lang^="fr"] body#about-attr-page #container-f1c43da3c1 #about-cards-1 .ab-icon-5 {
    width: auto !important;
    max-width: 135px !important;
    height: 210px !important;
    max-height: 210px !important;
  }

  html[lang^="fr"] body#about-attr-page #container-f1c43da3c1 #about-cards-1 .steps-title {
    display: block !important;
    width: 100% !important;
    max-width: 360px !important;
    margin: 0 auto !important;
    padding: 0 12px !important;
    color: #00215f !important;
    font-family: "Kanit-SemiBold", "Kanit", sans-serif !important;
    font-size: 18px !important;
    line-height: 1.28 !important;
    text-align: center !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    box-sizing: border-box !important;
  }

  html[lang^="fr"] body#about-attr-page #container-f1c43da3c1 #about-cards-1 .diagnosis-cards-items > .alt-right-arrow {
    display: none !important;
  }

  html[lang^="fr"] body#about-attr-page #container-f1c43da3c1 #about-cards-1 .arrow-down-card {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 92px !important;
    margin: 8px auto 12px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  html[lang^="fr"] body#about-attr-page #container-f1c43da3c1 #about-cards-1 .arrow-down-card img {
    display: block !important;
    width: 42px !important;
    max-width: 42px !important;
    height: 62px !important;
    max-height: 62px !important;
    margin: 0 auto !important;
    object-fit: contain !important;
  }
}

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

  html[lang^="fr"] body#about-attr-page #container-f1c43da3c1 #content-sec-1 .container-about-attr {
    padding: 15px 24px 32px !important;
  }

  html[lang^="fr"] body#about-attr-page #container-f1c43da3c1 #content-sec-1 .source-damage h2 {
    font-size: 29px !important;
    line-height: 1.12 !important;
  }

  html[lang^="fr"] body#about-attr-page #container-f1c43da3c1 #content-sec-1 .source-damage p {
    max-width: 350px !important;
    font-size: 17px !important;
    line-height: 1.28 !important;
  }

  html[lang^="fr"] body#about-attr-page #container-f1c43da3c1 #about-cards-1 {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  html[lang^="fr"] body#about-attr-page #container-f1c43da3c1 #about-cards-1 .aboutattr-cards-container {
    padding: 20px 12px 32px !important;
  }

  html[lang^="fr"] body#about-attr-page #container-f1c43da3c1 #about-cards-1 .ab-icon-1 {
    width: 215px !important;
    max-width: 215px !important;
  }

  html[lang^="fr"] body#about-attr-page #container-f1c43da3c1 #about-cards-1 .ab-icon-2,
  html[lang^="fr"] body#about-attr-page #container-f1c43da3c1 #about-cards-1 .ab-icon-3,
  html[lang^="fr"] body#about-attr-page #container-f1c43da3c1 #about-cards-1 .ab-icon-4 {
    width: 195px !important;
    max-width: 195px !important;
  }

  html[lang^="fr"] body#about-attr-page #container-f1c43da3c1 #about-cards-1 .steps-title {
    max-width: 330px !important;
    font-size: 17px !important;
    line-height: 1.28 !important;
  }
}

/* =========================================================
   FR hATTR-PN PROGRESSION — MOBILE VERTICAL FIX
   FINAL OVERRIDE: keep at the very end of the CSS file
   ========================================================= */

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

  html[lang^="fr"] body#about-attr-page #container-1070bba6bc {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  html[lang^="fr"] body#about-attr-page #container-1070bba6bc > .text {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  html[lang^="fr"] body#about-attr-page #container-1070bba6bc .container-about-hattr-pn {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
  }

  html[lang^="fr"] body#about-attr-page #container-1070bba6bc .attr-life {
    width: 100% !important;
    max-width: 500px !important;
    margin: 0 auto !important;
    text-align: center !important;
  }

  html[lang^="fr"] body#about-attr-page #container-1070bba6bc .attr-life h3 {
    margin: 0 !important;
    padding: 34px 0 16px !important;
    font-size: 28px !important;
    line-height: 1.15 !important;
    text-align: center !important;
  }

  html[lang^="fr"] body#about-attr-page #container-1070bba6bc .attr-life p {
    margin: 0 !important;
    padding: 0 0 24px !important;
    font-size: 18px !important;
    line-height: 1.3 !important;
    text-align: center !important;
  }

  html[lang^="fr"] body#about-attr-page #progressive-cont-1 {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 16px 30px !important;
    box-sizing: border-box !important;
  }

  html[lang^="fr"] body#about-attr-page #progressive-cont-1 .aboutattr-cards-container {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: 520px !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 auto !important;
    padding: 30px 18px 42px !important;
    background: #ffffff !important;
    border: 1px solid #606fb4 !important;
    border-radius: 30px 30px 30px 0 !important;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.11) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  html[lang^="fr"] body#about-attr-page #progressive-cont-1 .aboutattr.diagnosis-cards-items {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    box-sizing: border-box !important;
  }

  html[lang^="fr"] body#about-attr-page #progressive-cont-1 .steps-card {
    position: static !important;
    display: block !important;
    flex: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
  }

  html[lang^="fr"] body#about-attr-page #progressive-cont-1 .steps-card-icon {
    position: static !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  html[lang^="fr"] body#about-attr-page #progressive-cont-1 .steps-card-icon > img.steps-icon:not(.attr) {
    display: block !important;
    width: auto !important;
    max-width: 145px !important;
    height: 125px !important;
    max-height: 125px !important;
    margin: 0 auto 10px !important;
    object-fit: contain !important;
  }

  html[lang^="fr"] body#about-attr-page #progressive-cont-1 img.attr.steps-icon {
    display: block !important;
    width: auto !important;
    max-width: 185px !important;
    height: 125px !important;
    max-height: 125px !important;
    margin: 0 auto 10px !important;
    object-fit: contain !important;
  }

  html[lang^="fr"] body#about-attr-page #progressive-cont-1 .steps-title {
    display: block !important;
    width: 100% !important;
    max-width: 360px !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    padding: 0 10px !important;
    color: #00215f !important;
    font-family: "Kanit-SemiBold", "Kanit", sans-serif !important;
    font-size: 17px !important;
    line-height: 1.25 !important;
    text-align: center !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
    box-sizing: border-box !important;
  }

  html[lang^="fr"] body#about-attr-page #progressive-cont-1 .stage-label {
    margin: 0 auto 8px !important;
    padding: 0 10px !important;
    color: #6764ff !important;
    font-size: 16px !important;
    line-height: 1.15 !important;
  }

  html[lang^="fr"] body#about-attr-page #progressive-cont-1 .steps-title2 {
    display: block !important;
    width: 100% !important;
    max-width: 360px !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    padding: 8px 10px 0 !important;
    color: #00215f !important;
    font-family: "Kanit-SemiBold", "Kanit", sans-serif !important;
    font-size: 17px !important;
    line-height: 1.25 !important;
    text-align: center !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    box-sizing: border-box !important;
  }

  html[lang^="fr"] body#about-attr-page #progressive-cont-1 .steps-plus-icon {
    display: block !important;
    width: 32px !important;
    max-width: 32px !important;
    height: 32px !important;
    max-height: 32px !important;
    margin: 14px auto 4px !important;
    object-fit: contain !important;
  }

  html[lang^="fr"] body#about-attr-page #progressive-cont-1 .aboutattr.diagnosis-cards-items > .alt-right-arrow {
    display: block !important;
    width: 40px !important;
    max-width: 40px !important;
    min-width: 40px !important;
    height: auto !important;
    max-height: none !important;
    margin: 30px auto !important;
    transform: rotate(90deg) !important;
    transform-origin: center !important;
    object-fit: contain !important;
    flex: none !important;
  }

  html[lang^="fr"] body#about-attr-page #progressive-cont-1 .steps-card,
  html[lang^="fr"] body#about-attr-page #progressive-cont-1 .steps-card-icon,
  html[lang^="fr"] body#about-attr-page #progressive-cont-1 .steps-title,
  html[lang^="fr"] body#about-attr-page #progressive-cont-1 .steps-title2 {
    flex-basis: auto !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    grid-column: auto !important;
    grid-row: auto !important;
  }
}

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

  html[lang^="fr"] body#about-attr-page #progressive-cont-1 {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  html[lang^="fr"] body#about-attr-page #progressive-cont-1 .aboutattr-cards-container {
    padding: 26px 14px 36px !important;
  }

  html[lang^="fr"] body#about-attr-page #progressive-cont-1 .steps-card-icon > img.steps-icon:not(.attr) {
    max-width: 135px !important;
    height: 115px !important;
    max-height: 115px !important;
  }

  html[lang^="fr"] body#about-attr-page #progressive-cont-1 img.attr.steps-icon {
    max-width: 170px !important;
    height: 115px !important;
    max-height: 115px !important;
  }

  html[lang^="fr"] body#about-attr-page #progressive-cont-1 .steps-title,
  html[lang^="fr"] body#about-attr-page #progressive-cont-1 .steps-title2 {
    max-width: 325px !important;
    font-size: 16px !important;
    line-height: 1.28 !important;
  }

  html[lang^="fr"] body#about-attr-page #progressive-cont-1 .stage-label {
    font-size: 15px !important;
  }

  html[lang^="fr"] body#about-attr-page #progressive-cont-1 .aboutattr.diagnosis-cards-items > .alt-right-arrow {
    width: 38px !important;
    max-width: 38px !important;
    min-width: 38px !important;
    margin: 28px auto !important;
  }
}

/* =========================================================
   FINAL FR MOBILE CORRECTIONS
   hATTR-PN alignment + ATTR-CM bullets + genetic callouts
   Keep this block at the very end of the stylesheet
   ========================================================= */

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

  /* =======================================================
     1. hATTR-PN PROGRESSION — CENTERED VERTICAL MOBILE CARD
     ======================================================= */

  html[lang^="fr"] body#about-attr-page #container-1070bba6bc,
  html[lang^="fr"] body#about-attr-page #container-1070bba6bc > .text,
  html[lang^="fr"] body#about-attr-page #container-1070bba6bc #progressive-cont-1 {
    position: static !important;
    display: block !important;
    float: none !important;
    clear: both !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    left: auto !important;
    right: auto !important;
    inset: auto !important;
    transform: none !important;
    translate: none !important;
    box-sizing: border-box !important;
  }

  html[lang^="fr"] body#about-attr-page #container-1070bba6bc {
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
  }

  html[lang^="fr"] body#about-attr-page #container-1070bba6bc > .text {
    margin: 0 !important;
    padding: 0 !important;
  }

  html[lang^="fr"] body#about-attr-page #container-1070bba6bc #progressive-cont-1 {
    margin: 0 !important;
    padding: 0 16px 30px !important;
    overflow: visible !important;
  }

  html[lang^="fr"] body#about-attr-page #progressive-cont-1 .aboutattr-cards-container {
    position: relative !important;
    display: block !important;
    float: none !important;
    clear: both !important;
    width: calc(100% - 0px) !important;
    max-width: 520px !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 auto !important;
    padding: 30px 18px 42px !important;
    left: auto !important;
    right: auto !important;
    inset: auto !important;
    transform: none !important;
    translate: none !important;
    background: #ffffff !important;
    border: 1px solid #606fb4 !important;
    border-radius: 30px 30px 30px 0 !important;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.11) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  html[lang^="fr"] body#about-attr-page #progressive-cont-1 .aboutattr.diagnosis-cards-items {
    position: static !important;
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    box-sizing: border-box !important;
  }

  html[lang^="fr"] body#about-attr-page #progressive-cont-1 .steps-card,
  html[lang^="fr"] body#about-attr-page #progressive-cont-1 .steps-card-icon {
    position: static !important;
    float: none !important;
    clear: both !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    box-sizing: border-box !important;
  }

  html[lang^="fr"] body#about-attr-page #progressive-cont-1 .steps-card {
    display: block !important;
    flex: none !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  html[lang^="fr"] body#about-attr-page #progressive-cont-1 .steps-card-icon {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: center !important;
  }

  html[lang^="fr"] body#about-attr-page #progressive-cont-1 .steps-card-icon > img.steps-icon:not(.attr) {
    display: block !important;
    width: auto !important;
    max-width: 145px !important;
    height: 125px !important;
    max-height: 125px !important;
    margin: 0 auto 10px !important;
    object-fit: contain !important;
  }

  html[lang^="fr"] body#about-attr-page #progressive-cont-1 img.attr.steps-icon {
    display: block !important;
    width: auto !important;
    max-width: 185px !important;
    height: 125px !important;
    max-height: 125px !important;
    margin: 0 auto 10px !important;
    object-fit: contain !important;
  }

  html[lang^="fr"] body#about-attr-page #progressive-cont-1 .steps-title,
  html[lang^="fr"] body#about-attr-page #progressive-cont-1 .steps-title2 {
    display: block !important;
    width: 100% !important;
    max-width: 360px !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    color: #00215f !important;
    font-family: "Kanit-SemiBold", "Kanit", sans-serif !important;
    font-size: 17px !important;
    line-height: 1.25 !important;
    text-align: center !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
    box-sizing: border-box !important;
  }

  html[lang^="fr"] body#about-attr-page #progressive-cont-1 .steps-title {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 10px !important;
  }

  html[lang^="fr"] body#about-attr-page #progressive-cont-1 .stage-label {
    margin: 0 auto 8px !important;
    padding: 0 10px !important;
    color: #6764ff !important;
    font-size: 16px !important;
    line-height: 1.15 !important;
  }

  html[lang^="fr"] body#about-attr-page #progressive-cont-1 .steps-title2 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 8px 10px 0 !important;
  }

  html[lang^="fr"] body#about-attr-page #progressive-cont-1 .steps-plus-icon {
    display: block !important;
    width: 32px !important;
    max-width: 32px !important;
    height: 32px !important;
    max-height: 32px !important;
    margin: 14px auto 4px !important;
    object-fit: contain !important;
  }

  html[lang^="fr"] body#about-attr-page #progressive-cont-1 .aboutattr.diagnosis-cards-items > .alt-right-arrow {
    display: block !important;
    flex: none !important;
    width: 40px !important;
    max-width: 40px !important;
    min-width: 40px !important;
    height: auto !important;
    max-height: none !important;
    margin: 30px auto !important;
    transform: rotate(90deg) !important;
    transform-origin: center !important;
    object-fit: contain !important;
  }

  /* =======================================================
     2. FR CARDIAC AMYLOIDOSIS — MATCH EN BULLET LAYOUT
     ======================================================= */

  html[lang^="fr"] body#about-attr-page .slide {
    display: block !important;
    width: calc(100% - 36px) !important;
    max-width: 500px !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    padding: 24px 0 18px !important;
    color: #151515 !important;
    box-sizing: border-box !important;
  }

  html[lang^="fr"] body#about-attr-page .slide > .title {
    display: block !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
    color: #151515 !important;
    font-family: "Kanit-SemiBold", "Kanit", sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    text-align: left !important;
  }

  html[lang^="fr"] body#about-attr-page .slide > .bullet-row,
  html[lang^="fr"] body#about-attr-page .slide .sub-bullets > .bullet-row {
    display: grid !important;
    grid-template-columns: 14px minmax(0, 1fr) !important;
    column-gap: 10px !important;
    align-items: start !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  html[lang^="fr"] body#about-attr-page .slide .bullet {
    display: block !important;
    width: 14px !important;
    min-width: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #6764ff !important;
    font-family: "Kanit-SemiBold", "Kanit", sans-serif !important;
    font-size: 18px !important;
    line-height: 1.35 !important;
    text-align: center !important;
  }

  html[lang^="fr"] body#about-attr-page .slide .bullet.plus {
    font-size: 17px !important;
  }

  html[lang^="fr"] body#about-attr-page .slide .bullet-text {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #151515 !important;
    font-family: "Kanit", "Kanit", sans-serif !important;
    font-size: 16px !important;
    line-height: 1.36 !important;
    text-align: left !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
    box-sizing: border-box !important;
  }

  html[lang^="fr"] body#about-attr-page .slide .sub-bullets {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 2px 0 0 !important;
    padding: 0 0 0 46px !important;
    box-sizing: border-box !important;
  }

  html[lang^="fr"] body#about-attr-page .slide .sub-bullets > .bullet-row {
    grid-template-columns: 12px minmax(0, 1fr) !important;
    column-gap: 10px !important;
    margin-bottom: 10px !important;
  }

  html[lang^="fr"] body#about-attr-page .slide .sub-bullets .bullet.dot {
    width: 12px !important;
    min-width: 12px !important;
    color: #007a83 !important;
    font-size: 16px !important;
    line-height: 1.35 !important;
  }

  html[lang^="fr"] body#about-attr-page .slide .bold,
  html[lang^="fr"] body#about-attr-page .slide b {
    font-family: "Kanit-SemiBold", "Kanit", sans-serif !important;
    font-weight: 700 !important;
  }

  html[lang^="fr"] body#about-attr-page .slide .sup {
    position: relative !important;
    top: -0.45em !important;
    font-size: 60% !important;
    line-height: 0 !important;
  }

  /* =======================================================
     3. ALL GENETIC TESTING CALLOUTS — ICON ABOVE, TEXT BELOW
     ======================================================= */

  html[lang^="fr"] body#about-attr-page .genetic-testing-callout {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: calc(100% - 24px) !important;
    max-width: 520px !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 20px auto !important;
    padding: 28px 24px 30px !important;
    background: #eef0f9  !important;
    border: 1px solid #6764ff !important;
    border-radius: 28px 28px 28px 0 !important;
    box-shadow: none !important;
    text-align: center !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  html[lang^="fr"] body#about-attr-page .genetic-testing-callout__icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: none !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 auto 16px !important;
    padding: 0 !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  html[lang^="fr"] body#about-attr-page .genetic-testing-callout__icon img {
    display: block !important;
    width: 54px !important;
    max-width: 54px !important;
    height: 54px !important;
    max-height: 54px !important;
    margin: 0 auto !important;
    object-fit: contain !important;
  }

  html[lang^="fr"] body#about-attr-page .genetic-testing-callout__text {
    display: block !important;
    width: 100% !important;
    max-width: 430px !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    color: #003b78 !important;
    font-family: "Kanit-SemiBold", "Kanit", sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    text-align: center !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
    box-sizing: border-box !important;
  }

  html[lang^="fr"] body#about-attr-page .genetic-testing-callout__text sup {
    position: relative !important;
    top: -0.45em !important;
    font-size: 60% !important;
    line-height: 0 !important;
  }
}

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

  html[lang^="fr"] body#about-attr-page #container-1070bba6bc #progressive-cont-1 {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  html[lang^="fr"] body#about-attr-page #progressive-cont-1 .aboutattr-cards-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 26px 14px 36px !important;
  }

  html[lang^="fr"] body#about-attr-page #progressive-cont-1 .steps-card-icon > img.steps-icon:not(.attr) {
    max-width: 135px !important;
    height: 115px !important;
    max-height: 115px !important;
  }

  html[lang^="fr"] body#about-attr-page #progressive-cont-1 img.attr.steps-icon {
    max-width: 170px !important;
    height: 115px !important;
    max-height: 115px !important;
  }

  html[lang^="fr"] body#about-attr-page #progressive-cont-1 .steps-title,
  html[lang^="fr"] body#about-attr-page #progressive-cont-1 .steps-title2 {
    max-width: 325px !important;
    font-size: 16px !important;
    line-height: 1.28 !important;
  }

  html[lang^="fr"] body#about-attr-page #progressive-cont-1 .stage-label {
    font-size: 15px !important;
  }

  html[lang^="fr"] body#about-attr-page #progressive-cont-1 .aboutattr.diagnosis-cards-items > .alt-right-arrow {
    width: 38px !important;
    max-width: 38px !important;
    min-width: 38px !important;
    margin: 28px auto !important;
  }

  html[lang^="fr"] body#about-attr-page .slide {
    width: calc(100% - 32px) !important;
    padding-top: 20px !important;
    padding-bottom: 14px !important;
  }

  html[lang^="fr"] body#about-attr-page .slide > .title {
    font-size: 17px !important;
  }

  html[lang^="fr"] body#about-attr-page .slide .bullet-text {
    font-size: 16px !important;
    line-height: 1.35 !important;
  }

  html[lang^="fr"] body#about-attr-page .slide .sub-bullets {
    padding-left: 36px !important;
  }

  html[lang^="fr"] body#about-attr-page .genetic-testing-callout {
    width: calc(100% - 24px) !important;
    padding: 24px 18px 26px !important;
    border-radius: 24px 24px 24px 0 !important;
  }

  html[lang^="fr"] body#about-attr-page .genetic-testing-callout__icon img {
    width: 50px !important;
    max-width: 50px !important;
    height: 50px !important;
    max-height: 50px !important;
  }

  html[lang^="fr"] body#about-attr-page .genetic-testing-callout__text {
    max-width: 330px !important;
    font-size: 17px !important;
    line-height: 1.35 !important;
  }
}

/* =========================================================
   FINAL MOBILE CALLOUT FIXES — EN + FR
   Added for:
   1) Active-screening callout: bulb above, text below
   2) ATTR-suspected callout: bulb above, text below
   Applies only on mobile/tablet.
   ========================================================= */

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

  /* -------------------------------------------------------
     ACTIVE-SCREENING CALLOUT — FR
     #text-fbe6e9d58e
     ------------------------------------------------------- */
  html[lang^="fr"] body#about-attr-page #text-fbe6e9d58e {
    display: block !important;
    width: calc(100% - 32px) !important;
    max-width: 520px !important;
    margin: 22px auto 30px !important;
    padding: 28px 22px 30px !important;
    background: #eef0f9 !important;
    border: 1px solid #6764ff !important;
    border-radius: 28px 28px 28px 0 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    text-align: center !important;
    overflow: hidden !important;
  }

  html[lang^="fr"] body#about-attr-page #text-fbe6e9d58e::before {
    content: "" !important;
    display: block !important;
    width: 58px !important;
    height: 58px !important;
    margin: 0 auto 16px !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 !important;
    background-size: contain !important;
  }

  html[lang^="fr"] body#about-attr-page #text-fbe6e9d58e .text,
  html[lang^="fr"] body#about-attr-page #text-fbe6e9d58e .cmp-text {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
  }

  html[lang^="fr"] body#about-attr-page #text-fbe6e9d58e .attr-callout-text {
    display: block !important;
    width: 100% !important;
    max-width: 430px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    color: #00215f !important;
    font-family: "Kanit-SemiBold", "Kanit", sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    text-align: center !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    box-sizing: border-box !important;
  }

  html[lang^="fr"] body#about-attr-page #text-fbe6e9d58e .callout-line1 {
    display: inline !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }

  /* -------------------------------------------------------
     ACTIVE-SCREENING CALLOUT — EN
     #text-2c89de61b7
     Adds the missing lightbulb and stacks it above text.
     ------------------------------------------------------- */
  html[lang^="en"] body#about-attr-page #text-2c89de61b7 {
    display: block !important;
    width: calc(100% - 32px) !important;
    max-width: 520px !important;
    margin: 22px auto 30px !important;
    padding: 28px 22px 30px !important;
    background: #eef0f9 !important;
    border: 1px solid #6764ff !important;
    border-radius: 28px 28px 28px 0 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    text-align: center !important;
    overflow: hidden !important;
  }

  html[lang^="en"] body#about-attr-page #text-2c89de61b7::before {
    content: "" !important;
    display: block !important;
    width: 58px !important;
    height: 58px !important;
    margin: 0 auto 16px !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 !important;
    background-size: contain !important;
  }

  html[lang^="en"] body#about-attr-page #text-2c89de61b7 p {
    display: block !important;
    width: 100% !important;
    max-width: 430px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    color: #00215f !important;
    font-family: "Kanit-SemiBold", "Kanit", sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    text-align: center !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    box-sizing: border-box !important;
  }

  html[lang^="en"] body#about-attr-page #text-2c89de61b7 .callout-line1 {
    display: inline !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }

  /* -------------------------------------------------------
     ATTR-SUSPECTED CALLOUT — EN + FR
     Icon above, content below for all such callouts.
     ------------------------------------------------------- */
  body#about-attr-page .attr-suspected-box {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: calc(100% - 32px) !important;
    max-width: 520px !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 22px auto 30px !important;
    padding: 28px 22px 30px !important;
    gap: 14px !important;
    background: #eef0f9 !important;
    border: 1px solid #6764ff !important;
    border-radius: 28px 28px 28px 0 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  body#about-attr-page .attr-suspected-icon-wrap {
    position: static !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: none !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  body#about-attr-page .attr-suspected-icon {
    position: static !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 58px !important;
    height: 58px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background: transparent !important;
    box-sizing: border-box !important;
  }

  body#about-attr-page .attr-suspected-icon img {
    display: block !important;
    width: 58px !important;
    max-width: 58px !important;
    height: 58px !important;
    max-height: 58px !important;
    margin: 0 auto !important;
    object-fit: contain !important;
  }

  body#about-attr-page .attr-suspected-content {
    display: block !important;
    width: 100% !important;
    max-width: 440px !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    color: #00215f !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  body#about-attr-page .attr-suspected-title {
    display: block !important;
    width: 100% !important;
    margin: 0 auto 14px !important;
    padding: 0 !important;
    color: #00215f !important;
    font-family: "Kanit-SemiBold", "Kanit", sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    text-align: center !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    box-sizing: border-box !important;
  }

  body#about-attr-page .attr-suspected-line {
    display: block !important;
    width: 100% !important;
    margin: 0 auto 12px !important;
    padding: 0 !important;
    color: #00215f !important;
    font-family: "Kanit", "Kanit", sans-serif !important;
    font-size: 17px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    text-align: center !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    box-sizing: border-box !important;
  }

  body#about-attr-page .attr-suspected-line:last-child {
    margin-bottom: 0 !important;
  }

  body#about-attr-page .attr-suspected-line.sub {
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
  }
}

@media screen and (max-width: 480px) {
  html[lang^="fr"] body#about-attr-page #text-fbe6e9d58e,
  html[lang^="en"] body#about-attr-page #text-2c89de61b7,
  body#about-attr-page .attr-suspected-box {
    width: calc(100% - 24px) !important;
    padding: 24px 18px 26px !important;
  }

  html[lang^="fr"] body#about-attr-page #text-fbe6e9d58e .attr-callout-text,
  html[lang^="en"] body#about-attr-page #text-2c89de61b7 p,
  body#about-attr-page .attr-suspected-title {
    font-size: 17px !important;
    line-height: 1.35 !important;
  }

  body#about-attr-page .attr-suspected-line {
    font-size: 16px !important;
    line-height: 1.4 !important;
  }
}


/* ==========================================================================
   FINAL MOBILE CALLOUT ALIGNMENT FIXES
   Added after all existing rules so these declarations take precedence.
   ========================================================================== */

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

  /* ------------------------------------------------------------------------
     FR ACTIVE-SCREENING CALLOUT
     Bulb centered above the text without overlapping it.
     ------------------------------------------------------------------------ */

  html[lang^="fr"] body#about-attr-page #text-fbe6e9d58e {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;

    width: calc(100% - 32px) !important;
    max-width: 520px !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;

    margin: 24px auto 30px !important;
    padding: 28px 22px 30px !important;

    background: #eef0f9 !important;
    border: 1px solid #6764ff !important;
    border-radius: 28px 28px 28px 0 !important;
    box-shadow: none !important;

    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  /*
   * Remove the bulb generated by older rules on the paragraph/span.
   * Those old pseudo-elements are what caused the icon to sit over the text.
   */
  html[lang^="fr"] body#about-attr-page
  #text-fbe6e9d58e .attr-callout-text::before,
  html[lang^="fr"] body#about-attr-page
  #text-fbe6e9d58e .attr-callout-text::after,
  html[lang^="fr"] body#about-attr-page
  #text-fbe6e9d58e .callout-line1::before,
  html[lang^="fr"] body#about-attr-page
  #text-fbe6e9d58e .callout-line1::after,
  html[lang^="fr"] body#about-attr-page
  #text-fbe6e9d58e > .text::before,
  html[lang^="fr"] body#about-attr-page
  #text-fbe6e9d58e > .text::after {
    content: none !important;
    display: none !important;
  }

  /*
   * Generate one clean bulb at the top of the complete callout.
   */
  html[lang^="fr"] body#about-attr-page #text-fbe6e9d58e::before {
    content: "" !important;
    position: static !important;
    display: block !important;
    flex: none !important;

    width: 58px !important;
    height: 58px !important;

    margin: 0 auto 16px !important;
    padding: 0 !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 !important;
    background-size: contain !important;

    transform: none !important;
    inset: auto !important;
    box-sizing: border-box !important;
  }

  html[lang^="fr"] body#about-attr-page
  #text-fbe6e9d58e > .text {
    position: static !important;
    display: block !important;

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

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

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;

    transform: none !important;
    box-sizing: border-box !important;
  }

  html[lang^="fr"] body#about-attr-page
  #text-fbe6e9d58e .attr-callout-text {
    position: static !important;
    display: block !important;

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

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

    color: #00215f !important;
    font-family: "Kanit-SemiBold", "Kanit", sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    text-align: center !important;

    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;

    transform: none !important;
    box-sizing: border-box !important;
  }

  html[lang^="fr"] body#about-attr-page
  #text-fbe6e9d58e .callout-line1 {
    position: static !important;
    display: inline !important;

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

    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;

    transform: none !important;
  }


  /* ------------------------------------------------------------------------
     FR ATTR-SUSPECTED CALLOUT
     Keep the text layout but center the bulb above the content.
     ------------------------------------------------------------------------ */

  html[lang^="fr"] body#about-attr-page
  #text-e26e5291d1 .attr-suspected-box {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;

    width: calc(100% - 32px) !important;
    max-width: 520px !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;

    margin: 24px auto 30px !important;
    padding: 28px 22px 30px !important;
    gap: 14px !important;

    background: #eef0f9 !important;
    border: 1px solid #6764ff !important;
    border-radius: 28px 28px 28px 0 !important;
    box-shadow: none !important;

    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  html[lang^="fr"] body#about-attr-page
  #text-e26e5291d1 .attr-suspected-icon-wrap {
    position: static !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important;
    flex: none !important;

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

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

    transform: none !important;
    inset: auto !important;
    box-sizing: border-box !important;
  }

  html[lang^="fr"] body#about-attr-page
  #text-e26e5291d1 .attr-suspected-icon {
    position: static !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 58px !important;
    height: 58px !important;

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

    background: transparent !important;
    transform: none !important;
    inset: auto !important;
    box-sizing: border-box !important;
  }

  html[lang^="fr"] body#about-attr-page
  #text-e26e5291d1 .attr-suspected-icon img {
    position: static !important;
    display: block !important;

    width: 58px !important;
    max-width: 58px !important;
    height: 58px !important;
    max-height: 58px !important;

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

    object-fit: contain !important;
    transform: none !important;
  }

  html[lang^="fr"] body#about-attr-page
  #text-e26e5291d1 .attr-suspected-content {
    display: block !important;

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

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

    color: #00215f !important;
    text-align: left !important;
    box-sizing: border-box !important;
  }

  html[lang^="fr"] body#about-attr-page
  #text-e26e5291d1 .attr-suspected-title {
    width: 100% !important;
    margin: 0 0 14px !important;
    padding: 0 !important;

    color: #00215f !important;
    font-family: "Kanit-SemiBold", "Kanit", sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    text-align: left !important;

    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }

  html[lang^="fr"] body#about-attr-page
  #text-e26e5291d1 .attr-suspected-line {
    width: 100% !important;
    margin: 0 0 12px !important;
    padding: 0 !important;

    color: #00215f !important;
    font-family: "Kanit", "Kanit", sans-serif !important;
    font-size: 17px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    text-align: left !important;

    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }

  html[lang^="fr"] body#about-attr-page
  #text-e26e5291d1 .attr-suspected-line:last-child {
    margin-bottom: 0 !important;
  }
}


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

  html[lang^="fr"] body#about-attr-page #text-fbe6e9d58e,
  html[lang^="fr"] body#about-attr-page
  #text-e26e5291d1 .attr-suspected-box {
    width: calc(100% - 24px) !important;
    padding: 24px 18px 26px !important;
  }

  html[lang^="fr"] body#about-attr-page
  #text-fbe6e9d58e .attr-callout-text,
  html[lang^="fr"] body#about-attr-page
  #text-e26e5291d1 .attr-suspected-title {
    font-size: 17px !important;
    line-height: 1.35 !important;
  }

  html[lang^="fr"] body#about-attr-page
  #text-e26e5291d1 .attr-suspected-line {
    font-size: 16px !important;
    line-height: 1.4 !important;
  }

  html[lang^="fr"] body#about-attr-page #text-fbe6e9d58e::before,
  html[lang^="fr"] body#about-attr-page
  #text-e26e5291d1 .attr-suspected-icon,
  html[lang^="fr"] body#about-attr-page
  #text-e26e5291d1 .attr-suspected-icon img {
    width: 52px !important;
    max-width: 52px !important;
    height: 52px !important;
    max-height: 52px !important;
  }
}


/* ==========================================================================
   FR ACTIVE-SCREENING CALLOUT — FINAL DUPLICATE-ID FIX
   The authored markup contains nested elements with the same ID
   (#text-fbe6e9d58e). This override styles only the outer component as the
   card and resets the inner duplicate-ID wrapper.
   ========================================================================== */

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

  /* Outer AEM text component becomes the complete callout card */
  html[lang^="fr"] body#about-attr-page
  .text > #text-fbe6e9d58e.cmp-text:has(> .text > #text-fbe6e9d58e) {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;

    width: calc(100% - 32px) !important;
    max-width: 520px !important;
    min-width: 0 !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 26px auto 30px !important;
    padding: 24px 22px 28px !important;

    background: #eef0f9 !important;
    border: 1px solid #6764ff !important;
    border-radius: 28px 28px 28px 0 !important;
    box-shadow: none !important;

    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  /* One centered bulb above the text */
  html[lang^="fr"] body#about-attr-page
  .text > #text-fbe6e9d58e.cmp-text:has(> .text > #text-fbe6e9d58e)::before {
    content: "" !important;
    position: static !important;
    display: block !important;
    flex: 0 0 auto !important;

    width: 58px !important;
    height: 58px !important;

    margin: 0 auto 14px !important;
    padding: 0 !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 !important;
    background-size: contain !important;

    inset: auto !important;
    transform: none !important;
    box-sizing: border-box !important;
  }

  /* Reset the nested authored wrappers so they do not become a second card */
  html[lang^="fr"] body#about-attr-page
  .text > #text-fbe6e9d58e.cmp-text:has(> .text > #text-fbe6e9d58e)
  > .text,
  html[lang^="fr"] body#about-attr-page
  .text > #text-fbe6e9d58e.cmp-text:has(> .text > #text-fbe6e9d58e)
  > .text > #text-fbe6e9d58e.cmp-text {
    position: static !important;
    display: block !important;

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

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

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

    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    overflow: visible !important;
    transform: none !important;
    inset: auto !important;
    box-sizing: border-box !important;
  }

  /* Remove every older pseudo-element from the nested wrappers/text */
  html[lang^="fr"] body#about-attr-page
  .text > #text-fbe6e9d58e.cmp-text:has(> .text > #text-fbe6e9d58e)
  > .text::before,
  html[lang^="fr"] body#about-attr-page
  .text > #text-fbe6e9d58e.cmp-text:has(> .text > #text-fbe6e9d58e)
  > .text::after,
  html[lang^="fr"] body#about-attr-page
  .text > #text-fbe6e9d58e.cmp-text:has(> .text > #text-fbe6e9d58e)
  > .text > #text-fbe6e9d58e.cmp-text::before,
  html[lang^="fr"] body#about-attr-page
  .text > #text-fbe6e9d58e.cmp-text:has(> .text > #text-fbe6e9d58e)
  > .text > #text-fbe6e9d58e.cmp-text::after,
  html[lang^="fr"] body#about-attr-page
  .text > #text-fbe6e9d58e.cmp-text:has(> .text > #text-fbe6e9d58e)
  .attr-callout-text::before,
  html[lang^="fr"] body#about-attr-page
  .text > #text-fbe6e9d58e.cmp-text:has(> .text > #text-fbe6e9d58e)
  .attr-callout-text::after,
  html[lang^="fr"] body#about-attr-page
  .text > #text-fbe6e9d58e.cmp-text:has(> .text > #text-fbe6e9d58e)
  .callout-line1::before,
  html[lang^="fr"] body#about-attr-page
  .text > #text-fbe6e9d58e.cmp-text:has(> .text > #text-fbe6e9d58e)
  .callout-line1::after {
    content: none !important;
    display: none !important;
  }

  /* Final text styling */
  html[lang^="fr"] body#about-attr-page
  .text > #text-fbe6e9d58e.cmp-text:has(> .text > #text-fbe6e9d58e)
  .attr-callout-text {
    position: static !important;
    display: block !important;

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

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

    color: #00215f !important;
    font-family: "Kanit-SemiBold", "Kanit", sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    text-align: center !important;

    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;

    transform: none !important;
    inset: auto !important;
    box-sizing: border-box !important;
  }

  html[lang^="fr"] body#about-attr-page
  .text > #text-fbe6e9d58e.cmp-text:has(> .text > #text-fbe6e9d58e)
  .callout-line1 {
    position: static !important;
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;

    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;

    transform: none !important;
    inset: auto !important;
  }
}

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

  html[lang^="fr"] body#about-attr-page
  .text > #text-fbe6e9d58e.cmp-text:has(> .text > #text-fbe6e9d58e) {
    width: calc(100% - 24px) !important;
    padding: 22px 18px 25px !important;
  }

  html[lang^="fr"] body#about-attr-page
  .text > #text-fbe6e9d58e.cmp-text:has(> .text > #text-fbe6e9d58e)::before {
    width: 52px !important;
    height: 52px !important;
    margin-bottom: 12px !important;
  }

  html[lang^="fr"] body#about-attr-page
  .text > #text-fbe6e9d58e.cmp-text:has(> .text > #text-fbe6e9d58e)
  .attr-callout-text {
    max-width: 360px !important;
    font-size: 17px !important;
    line-height: 1.32 !important;
  }
}


/* ========================================================================== 
   FR SIDEBAR ACTIVE UNDERLINE — FINAL OVERRIDE
   Only the currently active section receives the pink underline.
   ========================================================================== */

html[lang^="fr"] body#about-attr-page
#this-page .steps-card-icon:not(:first-child) {
  text-decoration: none !important;
  text-decoration-line: none !important;
  text-decoration-color: transparent !important;
  text-decoration-thickness: initial !important;
  text-underline-offset: initial !important;
  font-weight: normal !important;
}

html[lang^="fr"] body#about-attr-page
#this-page .steps-card-icon.active,
html[lang^="fr"] body#about-attr-page
#this-page .steps-card-icon.is-active,
html[lang^="fr"] body#about-attr-page
#this-page .steps-card-icon.fr-sidebar-active {
  text-decoration-line: underline !important;
  text-decoration-color: #FF53FF !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 5px !important;
  font-weight: 700 !important;
}


/* ==========================================================================
   ABOUT ATTR — EN + FR LIGHTBULB ASSET UPDATE
   ========================================================================== */

/* Genetic-testing callout authored bulb image */
body#about-attr-page .genetic-testing-callout__icon img {
  content: url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/lightbulb%20icon%20gradient_1.png") !important;
}

/* ATTR-suspected callout authored bulb image */
body#about-attr-page .attr-suspected-icon img {
  content: url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/lightbulb%20icon%20gradient_1.png") !important;
}

/* Any bulb generated by existing CSS rules */
body#about-attr-page .genetic-testing-callout__icon,
body#about-attr-page .attr-suspected-icon-wrap,
body#about-attr-page .attr-suspected-icon,
html[lang^="en"] body#about-attr-page .genetic-testing-callout__icon,
html[lang^="fr"] body#about-attr-page .genetic-testing-callout__icon,
html[lang^="en"] body#about-attr-page .attr-suspected-icon-wrap,
html[lang^="fr"] body#about-attr-page .attr-suspected-icon-wrap {
  --about-attr-bulb-image: url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/lightbulb%20icon%20gradient_1.png") !important;
}

/* Ensure older pseudo-element implementations also use the new DAM asset */
body#about-attr-page .genetic-testing-callout::before,
body#about-attr-page .genetic-testing-callout::after,
body#about-attr-page .genetic-testing-callout__icon::before,
body#about-attr-page .genetic-testing-callout__icon::after,
body#about-attr-page .attr-suspected-box::before,
body#about-attr-page .attr-suspected-box::after,
body#about-attr-page .attr-suspected-icon-wrap::before,
body#about-attr-page .attr-suspected-icon-wrap::after,
body#about-attr-page .attr-suspected-icon::before,
body#about-attr-page .attr-suspected-icon::after {
  background-image: url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/lightbulb%20icon%20gradient_1.png") !important;
}



/* ==========================================================================
   FINAL DESKTOP FOOTER CTA FIX — GIRL RESTORED
   Existing HTML remains unchanged.
   Tablet and mobile rules remain unchanged.
   Keep this block at the absolute end of about-attr.css.
   ========================================================================== */

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

  /* Remove the desktop black spacer above the CTA background. */
  html[lang^="en"] body#about-attr-page
  #text-a301e56879 > .black-strip,
  html[lang^="fr"] body#about-attr-page
  #text-a301e56879 > .black-strip {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  /* Footer artwork and CTA placement. */
  html[lang^="en"] body#about-attr-page #attr-cta-section,
  html[lang^="fr"] body#about-attr-page #attr-cta-section {
    position: relative !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    justify-content: center !important;

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

    height: 330px !important;
    min-height: 330px !important;
    max-height: 330px !important;

    gap: 20px !important;
    margin: 0 !important;
    padding: 38px 20px 70px 560px !important;

    background-color: #111746 !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: left bottom !important;
    background-size: cover !important;

    overflow: visible !important;
    box-sizing: border-box !important;
  }

  /* CTA cards. */
  html[lang^="en"] body#about-attr-page
  #attr-cta-section > .attr-cta-card,
  html[lang^="fr"] body#about-attr-page
  #attr-cta-section > .attr-cta-card {
    position: relative !important;
    display: flex !important;
    flex: 0 0 390px !important;
    align-items: center !important;

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

    height: auto !important;
    min-height: 112px !important;
    max-height: none !important;

    gap: 16px !important;
    margin: 0 !important;
    padding: 20px 24px 34px !important;

    background: rgba(222, 224, 238, 0.95) !important;
    border: 1px solid #656efa !important;
    border-radius: 22px 22px 22px 0 !important;

    overflow: visible !important;
    box-sizing: border-box !important;
  }

  /* CTA icons. */
  html[lang^="en"] body#about-attr-page
  #attr-cta-section > .attr-cta-card > .attr-cta-icon,
  html[lang^="fr"] body#about-attr-page
  #attr-cta-section > .attr-cta-card > .attr-cta-icon {
    position: static !important;
    display: block !important;
    flex: 0 0 54px !important;

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

    height: 66px !important;
    min-height: 66px !important;
    max-height: 66px !important;

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

    object-fit: contain !important;
    object-position: center !important;
    box-sizing: border-box !important;
  }

  /* CTA text container. */
  html[lang^="en"] body#about-attr-page
  #attr-cta-section > .attr-cta-card > .attr-cta-box,
  html[lang^="fr"] body#about-attr-page
  #attr-cta-section > .attr-cta-card > .attr-cta-box {
    position: static !important;
    display: block !important;
    flex: 1 1 auto !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

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

    background: transparent !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  html[lang^="en"] body#about-attr-page
  #attr-cta-section .attr-cta-text,
  html[lang^="fr"] body#about-attr-page
  #attr-cta-section .attr-cta-text {
    width: 100% !important;
    height: auto !important;

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

    font-family: "Kanit", sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.28 !important;
    color: #1a1a4b !important;
    text-align: left !important;

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

  /* CTA buttons. */
  html[lang^="en"] body#about-attr-page
  #attr-cta-section .attr-cta-btn-wrap,
  html[lang^="fr"] body#about-attr-page
  #attr-cta-section .attr-cta-btn-wrap {
    position: absolute !important;
    left: 50% !important;
    bottom: -14px !important;
    transform: translateX(-50%) !important;

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

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

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

  html[lang^="en"] body#about-attr-page
  #attr-cta-section .attr-cta-btn,
  html[lang^="fr"] body#about-attr-page
  #attr-cta-section .attr-cta-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

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

    margin: 0 !important;
    padding: 7px 12px !important;

    background: #656efa !important;
    border-radius: 24px !important;

    color: #ffffff !important;
    font-family: "Kanit-SemiBold", sans-serif !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    letter-spacing: 0.3px !important;
    text-align: center !important;
    text-decoration: none !important;

    box-sizing: border-box !important;
  }

  /* English second button stays on one line. */
  html[lang^="en"] body#about-attr-page
  #attr-cta-section > .attr-cta-card:nth-child(2) .attr-cta-btn {
    white-space: nowrap !important;
  }

  /* French first CTA needs a wider button. */
  html[lang^="fr"] body#about-attr-page
  #attr-cta-section > .attr-cta-card:first-child .attr-cta-btn-wrap {
    width: 358px !important;
    min-width: 358px !important;
    max-width: 358px !important;
  }

  html[lang^="fr"] body#about-attr-page
  #attr-cta-section .attr-cta-btn {
    white-space: normal !important;
  }
}


/* Large desktop positioning. */
@media screen and (min-width: 1600px) {

  html[lang^="en"] body#about-attr-page #attr-cta-section,
  html[lang^="fr"] body#about-attr-page #attr-cta-section {
    padding-left: 660px !important;
  }
}



/* =========================================================
   ATTR CTA CARDS — GLOBAL FALLBACK (page-independent)
   Fixes the cards showing unstyled/plain when #attr-cta-section
   is reused on a page other than body#about-attr-page.
   Deliberately LOWER specificity than the body#about-attr-page
   rules above, so this only applies where those don't match.
   ========================================================= */

#attr-cta-section {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 24px;
  width: 100%;
  margin: 0;
  padding: 40px 20px;
  box-sizing: border-box;
  overflow: visible;
}

#attr-cta-section > .attr-cta-card {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 380px;
  max-width: 490px;
  min-height: 158px;
  gap: 20px;
  margin: 0;
  padding: 24px 28px 42px;

  background: rgba(222, 224, 238, 0.95);
  border: 1px solid #656efa;
  border-radius: 22px 22px 22px 0;

  overflow: visible;
  box-sizing: border-box;
}

#attr-cta-section > .attr-cta-card > .attr-cta-icon {
  flex: 0 0 70px;
  width: 70px;
  min-width: 70px;
  max-width: 70px;
  height: 82px;
  min-height: 82px;
  max-height: 82px;
  margin: 0;
  padding: 0;
  object-fit: contain;
  object-position: center;
  box-sizing: border-box;
}

#attr-cta-section > .attr-cta-card > .attr-cta-box {
  flex: 1 1 auto;
  width: auto;
  margin: 0;
  padding: 0;
  background: transparent;
  overflow: visible;
  box-sizing: border-box;
}

#attr-cta-section .attr-cta-text {
  width: 100%;
  margin: 0;
  padding: 0;

  font-family: "Kanit", sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.4;
  color: #1a1a4b;
  text-align: left;
}

/* Button overlaps the bottom edge of the card, like a pill tab */
#attr-cta-section .attr-cta-btn-wrap {
  position: absolute;
  left: 50%;
  bottom: -22px;
  transform: translateX(-50%);

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

  width: 90%;
  max-width: 330px;

  margin: 0;
  padding: 0;
  z-index: 10;
  box-sizing: border-box;
}

#attr-cta-section .attr-cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  min-height: 44px;

  margin: 0;
  padding: 10px 14px;

  background: #656efa;
  border-radius: 24px;

  color: #fff;
  font-family: "Kanit-SemiBold", sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.3px;
  text-align: center;
  text-decoration: none;
  white-space: normal;

  box-sizing: border-box;
}

/* Tablet */
@media screen and (min-width: 769px) and (max-width: 1100px) {
  #attr-cta-section {
    padding: 40px 30px;
  }

  #attr-cta-section > .attr-cta-card {
    flex: 1 1 0;
    width: calc((100% - 24px) / 2);
    min-width: 0;
    max-width: 490px;
  }
}

/* Mobile */
@media screen and (max-width: 768px) {
  #attr-cta-section {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 44px;
    padding: 30px 16px 60px;
  }

  #attr-cta-section > .attr-cta-card {
    flex: 0 0 auto;
    width: 100%;
    max-width: 490px;
    padding: 24px 20px 46px;
  }

  #attr-cta-section > .attr-cta-card > .attr-cta-icon {
    flex-basis: 58px;
    width: 58px;
    min-width: 58px;
    max-width: 58px;
    height: 74px;
    min-height: 74px;
    max-height: 74px;
  }

  #attr-cta-section .attr-cta-text {
    font-size: 15px;
    line-height: 1.35;
  }

  #attr-cta-section .attr-cta-btn-wrap {
    width: calc(100% - 32px);
    max-width: 390px;
  }

  #attr-cta-section .attr-cta-btn {
    width: 100%;
    max-width: 390px;
    min-height: 44px;
  }
}

/* Small mobile */
@media screen and (max-width: 480px) {
  #attr-cta-section {
    padding: 24px 14px 54px;
    gap: 40px;
  }

  #attr-cta-section > .attr-cta-card {
    gap: 14px;
    padding: 22px 16px 44px;
    border-radius: 22px 22px 22px 0;
  }

  #attr-cta-section > .attr-cta-card > .attr-cta-icon {
    flex-basis: 52px;
    width: 52px;
    min-width: 52px;
    max-width: 52px;
    height: 68px;
    min-height: 68px;
    max-height: 68px;
  }

  #attr-cta-section .attr-cta-text {
    font-size: 14px;
    line-height: 1.3;
  }

  #attr-cta-section .attr-cta-btn {
    font-size: 11px;
    padding: 10px;
  }
}

/* =========================================================
   ABOUT hATTR-PN — FIXED FOUR-STAGE RESPONSIVE LAYOUT
   Keeps the same appearance at different screen sizes
   ========================================================= */

/* Outer component */
#about-attr-page #progressive-cont-1 {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  box-sizing: border-box;
}

/* White bordered card */
#about-attr-page #progressive-cont-1 .aboutattr-cards-container {
  width: calc(100% - 36px) !important;
  max-width: 1153px !important;
  min-width: 900px !important;
  min-height: 360px !important;
  height: auto !important;
  margin: 0 auto 30px !important;
  padding: 38px 35px 48px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* Main stages row */
#about-attr-page #progressive-cont-1 .aboutattr.diagnosis-cards-items {
  display: grid !important;
  grid-template-columns:
    minmax(145px, 1fr)
    38px
    minmax(145px, 1fr)
    38px
    minmax(145px, 1fr)
    38px
    minmax(145px, 1fr);
  align-items: start !important;
  justify-content: center !important;
  column-gap: 16px !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  flex-wrap: nowrap !important;
}

/* Each stage */
#about-attr-page #progressive-cont-1 .steps-card {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  text-align: center !important;
}

/* Content inside every stage */
#about-attr-page #progressive-cont-1 .steps-card-icon {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* Main stage illustrations */
#about-attr-page #progressive-cont-1 .steps-icon {
  display: block !important;
  width: auto !important;
  height: 115px !important;
  max-width: 165px !important;
  max-height: 115px !important;
  margin: 0 auto 13px !important;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  position: static !important;
  transform: none !important;
}

/* Mortality image */
#about-attr-page #progressive-cont-1 img.attr.steps-icon {
  width: 185px !important;
  max-width: 100% !important;
  height: 115px !important;
  max-height: 115px !important;
  object-fit: contain !important;
}

/* STAGE labels */
#about-attr-page #progressive-cont-1 .stage-label {
  display: block !important;
  width: 100% !important;
  margin: 0 0 7px !important;
  padding: 0 !important;
  color: #585aea !important;
  font-family: "Kanit-SemiBold" !important;
  font-size: 16px !important;
  line-height: 19px !important;
  text-align: center !important;
}

/* Main description */
#about-attr-page #progressive-cont-1 .stage-label + .steps-title {
  display: block !important;
  width: 100% !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #00215f !important;
  font-family: "Kanit-SemiBold" !important;
  font-size: 16px !important;
  line-height: 20px !important;
  text-align: center !important;
  position: static !important;
  transform: none !important;
}

/* Pink plus sign */
#about-attr-page #progressive-cont-1 .steps-plus-icon {
  display: block !important;
  flex: 0 0 auto !important;
  width: 21px !important;
  min-width: 21px !important;
  max-width: 21px !important;
  height: 21px !important;
  min-height: 21px !important;
  max-height: 21px !important;
  margin: 7px auto 8px !important;
  padding: 0 !important;
  object-fit: contain !important;
  position: static !important;
  inset: auto !important;
  transform: none !important;
}

/* Text below pink plus sign */
#about-attr-page #progressive-cont-1 .steps-title2 {
  display: block !important;
  width: 100% !important;
  min-height: 60px !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #00215f !important;
  font-family: "Kanit-SemiBold" !important;
  font-size: 16px !important;
  line-height: 20px !important;
  text-align: center !important;
  position: static !important;
  inset: auto !important;
  transform: none !important;
}

/* Arrows between stages */
#about-attr-page #progressive-cont-1 .alt-right-arrow {
  display: block !important;
  align-self: start !important;
  width: 30px !important;
  min-width: 30px !important;
  max-width: 30px !important;
  height: auto !important;
  margin: 78px auto 0 !important;
  padding: 0 !important;
  position: static !important;
  inset: auto !important;
  transform: none !important;
  object-fit: contain !important;
}

/* Superscript references */
#about-attr-page #progressive-cont-1 sup {
  position: relative !important;
  top: -0.45em !important;
  font-size: 60% !important;
  line-height: 0 !important;
}

/* Medium laptop widths */
@media screen and (min-width: 992px) and (max-width: 1200px) {
  #about-attr-page #progressive-cont-1 .aboutattr-cards-container {
    width: calc(100% - 30px) !important;
    min-width: 900px !important;
    padding-left: 25px !important;
    padding-right: 25px !important;
  }

  #about-attr-page #progressive-cont-1 .aboutattr.diagnosis-cards-items {
    column-gap: 10px !important;
    grid-template-columns:
      minmax(140px, 1fr)
      32px
      minmax(140px, 1fr)
      32px
      minmax(140px, 1fr)
      32px
      minmax(140px, 1fr);
  }

  #about-attr-page #progressive-cont-1 .alt-right-arrow {
    width: 27px !important;
    min-width: 27px !important;
    max-width: 27px !important;
  }
}

/* Small screens:
   preserve the four-stage design instead of wrapping it */
@media screen and (max-width: 991px) {
  #about-attr-page #progressive-cont-1 {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  #about-attr-page #progressive-cont-1 .aboutattr-cards-container {
    width: 900px !important;
    min-width: 900px !important;
    max-width: 900px !important;
    margin-left: 15px !important;
    margin-right: 15px !important;
  }

  #about-attr-page #progressive-cont-1 .aboutattr.diagnosis-cards-items {
    display: grid !important;
    flex-wrap: nowrap !important;
    margin-bottom: 0 !important;
  }
}

/* =========================================================
   FIX: CTA SECTION WIDTH + FOOTER BACKGROUND RESPONSIVENESS
   ========================================================= */

/* Prevent the complete page from becoming wider than the browser */
html,
body,
#about-attr-page {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

/* Every element should calculate padding inside its width */
#about-attr-page *,
#about-attr-page *::before,
#about-attr-page *::after {
  box-sizing: border-box;
}

/* =========================================================
   TWO CTA BLOCKS
   ========================================================= */

/* Full-width outer section */
#about-attr-page .attr-cta-section,
#about-attr-page .attr-cta-wrap {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  overflow: hidden !important;
}

/* Keep the two cards inside the available screen width */
#about-attr-page .attr-cta-wrap {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 28px !important;
  align-items: stretch !important;
  width: calc(100% - 80px) !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
}

/* Individual blocks must be allowed to shrink */
#about-attr-page .attr-cta-card {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
}

/* Inner card box */
#about-attr-page .attr-cta-box {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

/* CTA buttons must not force horizontal overflow */
#about-attr-page .attr-cta-btn-wrap,
#about-attr-page .attr-cta-btn {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

#about-attr-page .attr-cta-btn {
  white-space: normal !important;
  overflow-wrap: break-word !important;
  text-align: center !important;
}

/* =========================================================
   FOOTER / NIGHT-SKY IMAGE SECTION
   ========================================================= */

#about-attr-page .footer-image-section,
#about-attr-page .footer-cta-section,
#about-attr-page .attr-footer-banner {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 360px !important;
  height: auto !important;
  aspect-ratio: 1920 / 510;
  margin: 0 !important;
  padding: 0 !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: left center !important;
  overflow: hidden !important;
}

/* When the footer uses an actual IMG instead of background-image */
#about-attr-page .footer-image-section > img,
#about-attr-page .footer-cta-section > img,
#about-attr-page .attr-footer-banner > img {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: left center !important;
}

/* Keep footer content above the image */
#about-attr-page .footer-image-section > *:not(img),
#about-attr-page .footer-cta-section > *:not(img),
#about-attr-page .attr-footer-banner > *:not(img) {
  position: relative;
  z-index: 2;
}

/* =========================================================
   LAPTOP WIDTH
   ========================================================= */

@media screen and (min-width: 992px) and (max-width: 1350px) {
  #about-attr-page .attr-cta-wrap {
    width: calc(100% - 50px) !important;
    gap: 20px !important;
  }

  #about-attr-page .footer-image-section,
  #about-attr-page .footer-cta-section,
  #about-attr-page .attr-footer-banner {
    min-height: 340px !important;
    background-position: left center !important;
  }
}

/* =========================================================
   TABLET AND MOBILE
   ========================================================= */

@media screen and (max-width: 991px) {
  #about-attr-page .attr-cta-wrap {
    grid-template-columns: 1fr !important;
    width: calc(100% - 32px) !important;
    gap: 24px !important;
  }

  #about-attr-page .footer-image-section,
  #about-attr-page .footer-cta-section,
  #about-attr-page .attr-footer-banner {
    aspect-ratio: auto !important;
    min-height: 430px !important;
    background-size: cover !important;
    background-position: 18% center !important;
  }
}

/* ==========================================================================
   FINAL FOOTER CTA ALIGNMENT FIX
   - Centres the two CTA cards as one group
   - Keeps the complete footer artwork, including the girl, visible at any zoom
   - Keep this block at the absolute end of the stylesheet
   ========================================================================== */

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

  html[lang^="en"] body#about-attr-page #attr-cta-section,
  html[lang^="fr"] body#about-attr-page #attr-cta-section {
    position: relative !important;

    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    justify-content: center !important;

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

    /*
     * Use the artwork's responsive aspect ratio instead of a fixed 330px crop.
     * The minimum keeps the cards comfortable on normal laptop screens.
     */
    height: auto !important;
    min-height: clamp(330px, 29vw, 560px) !important;
    max-height: none !important;

    gap: 28px !important;
    margin: 0 !important;

    /*
     * Removing the old 560px left padding centres the two cards.
     */
    padding: clamp(38px, 5vw, 84px) 24px 80px !important;

    background-color: #111746 !important;
    background-image:
      url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/Internal%20Footer%20image_desktop.jpg") !important;

    /*
     * Stretching only the decorative background to the section box prevents
     * the girl from being cropped out when browser zoom changes.
     */
    background-size: 100% 100% !important;
    background-position: left bottom !important;
    background-repeat: no-repeat !important;

    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  html[lang^="en"] body#about-attr-page
  #attr-cta-section > .attr-cta-card,
  html[lang^="fr"] body#about-attr-page
  #attr-cta-section > .attr-cta-card {
    flex: 0 1 390px !important;

    width: min(390px, calc((100% - 76px) / 2)) !important;
    min-width: 0 !important;
    max-width: 390px !important;

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

/* Very wide CSS viewports, including heavily zoomed-out desktop browsers */
@media screen and (min-width: 1800px) {
  html[lang^="en"] body#about-attr-page #attr-cta-section,
  html[lang^="fr"] body#about-attr-page #attr-cta-section {
    min-height: clamp(360px, 27vw, 620px) !important;
    padding-top: clamp(50px, 5vw, 105px) !important;
  }
}

/* ==========================================================================
   FR ONLY — STAGE 1 & STAGE 2 PLUS ICON VERTICAL ALIGNMENT
   Keeps the English layout unchanged.
   Keep this block at the absolute end of the stylesheet.
   ========================================================================== */

html[lang^="fr"] body#about-attr-page
#progressive-cont-1
.aboutattr.diagnosis-cards-items
> .steps-card:nth-child(1)
.stage-label + .steps-title,
html[lang^="fr"] body#about-attr-page
#progressive-cont-1
.aboutattr.diagnosis-cards-items
> .steps-card:nth-child(3)
.stage-label + .steps-title {
  min-height: 24px !important;
}

html[lang^="fr"] body#about-attr-page
#progressive-cont-1
.aboutattr.diagnosis-cards-items
> .steps-card:nth-child(1)
.steps-plus-icon,
html[lang^="fr"] body#about-attr-page
#progressive-cont-1
.aboutattr.diagnosis-cards-items
> .steps-card:nth-child(3)
.steps-plus-icon {
  margin-top: 4px !important;
  margin-bottom: 8px !important;
}

@media screen and (min-width: 769px) and (max-width: 1200px) {
  html[lang^="fr"] body#about-attr-page
  #progressive-cont-1
  .aboutattr.diagnosis-cards-items
  > .steps-card:nth-child(1)
  .stage-label + .steps-title,
  html[lang^="fr"] body#about-attr-page
  #progressive-cont-1
  .aboutattr.diagnosis-cards-items
  > .steps-card:nth-child(3)
  .stage-label + .steps-title {
    min-height: 22px !important;
  }

  html[lang^="fr"] body#about-attr-page
  #progressive-cont-1
  .aboutattr.diagnosis-cards-items
  > .steps-card:nth-child(1)
  .steps-plus-icon,
  html[lang^="fr"] body#about-attr-page
  #progressive-cont-1
  .aboutattr.diagnosis-cards-items
  > .steps-card:nth-child(3)
  .steps-plus-icon {
    margin-top: 2px !important;
  }
}


/* =========================================================
   Move footer CTA cards 50px to the right
   ========================================================= */

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

  html[lang^="en"] body#about-attr-page #attr-cta-section > .attr-cta-card:first-child,
  html[lang^="fr"] body#about-attr-page #attr-cta-section > .attr-cta-card:first-child {
    margin-left: 200px !important;
  }

}


/* =========================================================
   MOBILE HEADER LANGUAGE SWITCHER FIX
   Prevent EN and FR from wrapping onto separate lines
   ========================================================= */

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

  #about-attr-page .top-menu .us-healthcare .language-wrap {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    min-width: max-content !important;
    max-width: none !important;

    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  #about-attr-page .top-menu .us-healthcare .language-wrap a {
    display: inline-block !important;

    width: auto !important;
    min-width: max-content !important;

    margin: 0 !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  /* Separator between EN and FR */
  #about-attr-page
  .top-menu
  .us-healthcare
  .language-wrap
  a + a {
    margin-left: 12px !important;
    padding-left: 12px !important;
    border-left: 1px solid #ffffff;
  }
}


/* =========================================================
   ON THIS PAGE - ACTIVE LINK
   ========================================================= */

/* Active ON THIS PAGE item */
#about-attr-page
#container-2a29d56d1
> .text:has(#this-page)
.steps-card-icon.active-link:not(:first-child) {
  font-family: "Kanit-Bold", "Kanit-SemiBold", Arial, sans-serif !important;
  font-weight: 700 !important;
  color: #00215f !important;
}


/* ========================================================================== 
   FINAL OVERRIDES — SUPERSCRIPT WEIGHT + EN hATTR-PN MOBILE LAYOUT
   Keep this block at the absolute end of the stylesheet.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. SUPERSCRIPT REFERENCES — REGULAR/UNBOLD FOR EN AND FR
   -------------------------------------------------------------------------- */

#about-attr-page #text-a798dda2f0 .attr-suspected-title .attr-sup,
#about-attr-page #text-a798dda2f0 .attr-suspected-title .attr-sup sup,
#about-attr-page #progressive-cont-1 .stage-label sup,
#about-attr-page #progressive-cont-1 .steps-title sup,
#about-attr-page #progressive-cont-1 .steps-title2 sup,
#about-attr-page #progressive-cont-1 .suptxt-abt {
  font-family: "Kanit", "Kanit", sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
}

/* Keep the callout reference visually superscripted without inheriting bold. */
#about-attr-page #text-a798dda2f0 .attr-suspected-title .attr-sup sup {
  position: relative !important;
  top: -0.45em !important;
  font-size: 60% !important;
  line-height: 0 !important;
  vertical-align: baseline !important;
}

/* --------------------------------------------------------------------------
   2. EN hATTR-PN PROGRESSION — MATCH THE WORKING FR MOBILE LAYOUT
   -------------------------------------------------------------------------- */

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

  html[lang^="en"] body#about-attr-page #progressive-cont-1 {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 16px 30px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  html[lang^="en"] body#about-attr-page
  #progressive-cont-1 .aboutattr-cards-container {
    position: relative !important;
    display: block !important;
    float: none !important;
    clear: both !important;
    width: 100% !important;
    max-width: 520px !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 auto !important;
    padding: 30px 18px 42px !important;
    inset: auto !important;
    transform: none !important;
    background: #ffffff !important;
    border: 1px solid #606fb4 !important;
    border-radius: 30px 30px 30px 0 !important;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.11) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  html[lang^="en"] body#about-attr-page
  #progressive-cont-1 .aboutattr.diagnosis-cards-items {
    position: static !important;
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    inset: auto !important;
    transform: none !important;
    box-sizing: border-box !important;
  }

  html[lang^="en"] body#about-attr-page
  #progressive-cont-1 .steps-card,
  html[lang^="en"] body#about-attr-page
  #progressive-cont-1 .steps-card-icon {
    position: static !important;
    float: none !important;
    clear: both !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    inset: auto !important;
    transform: none !important;
    box-sizing: border-box !important;
  }

  html[lang^="en"] body#about-attr-page
  #progressive-cont-1 .steps-card {
    display: block !important;
    flex: none !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    text-align: center !important;
  }

  html[lang^="en"] body#about-attr-page
  #progressive-cont-1 .steps-card-icon {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: center !important;
  }

  html[lang^="en"] body#about-attr-page
  #progressive-cont-1 .steps-card-icon > img.steps-icon:not(.attr) {
    display: block !important;
    width: auto !important;
    max-width: 145px !important;
    height: 125px !important;
    max-height: 125px !important;
    margin: 0 auto 10px !important;
    padding: 0 !important;
    object-fit: contain !important;
    object-position: center !important;
    position: static !important;
    transform: none !important;
  }

  html[lang^="en"] body#about-attr-page
  #progressive-cont-1 img.attr.steps-icon {
    display: block !important;
    width: auto !important;
    max-width: 185px !important;
    height: 125px !important;
    max-height: 125px !important;
    margin: 0 auto 10px !important;
    padding: 0 !important;
    object-fit: contain !important;
    object-position: center !important;
    position: static !important;
    transform: none !important;
  }

  html[lang^="en"] body#about-attr-page
  #progressive-cont-1 .steps-title,
  html[lang^="en"] body#about-attr-page
  #progressive-cont-1 .steps-title2 {
    display: block !important;
    width: 100% !important;
    max-width: 360px !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    color: #00215f !important;
    font-family: "Kanit-SemiBold", "Kanit", sans-serif !important;
    font-size: 17px !important;
    line-height: 1.25 !important;
    text-align: center !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
    box-sizing: border-box !important;
  }

  html[lang^="en"] body#about-attr-page
  #progressive-cont-1 .steps-title {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 10px !important;
  }

  html[lang^="en"] body#about-attr-page
  #progressive-cont-1 .stage-label {
    margin: 0 auto 8px !important;
    padding: 0 10px !important;
    color: #6764ff !important;
    font-size: 16px !important;
    line-height: 1.15 !important;
    text-align: center !important;
  }

  html[lang^="en"] body#about-attr-page
  #progressive-cont-1 .steps-title2 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 8px 10px 0 !important;
  }

  html[lang^="en"] body#about-attr-page
  #progressive-cont-1 .steps-plus-icon {
    display: block !important;
    flex: none !important;
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    margin: 14px auto 4px !important;
    padding: 0 !important;
    object-fit: contain !important;
    position: static !important;
    inset: auto !important;
    transform: none !important;
  }

  html[lang^="en"] body#about-attr-page
  #progressive-cont-1
  .aboutattr.diagnosis-cards-items > .alt-right-arrow {
    display: block !important;
    flex: none !important;
    align-self: center !important;
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: auto !important;
    max-height: none !important;
    margin: 30px auto !important;
    padding: 0 !important;
    position: static !important;
    inset: auto !important;
    transform: rotate(90deg) !important;
    transform-origin: center !important;
    object-fit: contain !important;
  }
}

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

  html[lang^="en"] body#about-attr-page #progressive-cont-1 {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  html[lang^="en"] body#about-attr-page
  #progressive-cont-1 .aboutattr-cards-container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    padding: 26px 14px 36px !important;
  }

  html[lang^="en"] body#about-attr-page
  #progressive-cont-1 .steps-card-icon > img.steps-icon:not(.attr) {
    max-width: 135px !important;
    height: 115px !important;
    max-height: 115px !important;
  }

  html[lang^="en"] body#about-attr-page
  #progressive-cont-1 img.attr.steps-icon {
    max-width: 170px !important;
    height: 115px !important;
    max-height: 115px !important;
  }

  html[lang^="en"] body#about-attr-page
  #progressive-cont-1 .steps-title,
  html[lang^="en"] body#about-attr-page
  #progressive-cont-1 .steps-title2 {
    max-width: 325px !important;
    font-size: 16px !important;
    line-height: 1.28 !important;
  }

  html[lang^="en"] body#about-attr-page
  #progressive-cont-1 .stage-label {
    font-size: 15px !important;
  }

  html[lang^="en"] body#about-attr-page
  #progressive-cont-1
  .aboutattr.diagnosis-cards-items > .alt-right-arrow {
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    margin: 28px auto !important;
  }
}


@media only screen and (max-width: 991px) {
    html[lang="fr"] .progerss-ptag p span {
        color: #EC99FD;  !important
    }
}

/* ==========================================================================
   FINAL OVERRIDE — FR HEADER CTA WIDTH + CALLOUT SUPERSCRIPT WEIGHT
   Page: About ATTR
   Keep this block at the absolute end of the stylesheet.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. FR HEADER: keep “Pour rester informé” on one line
   -------------------------------------------------------------------------- */

html[lang^="fr"] body#about-attr-page
#header .top-menu .us-healthcare > li.bg-stay {
  display: flex !important;
  flex: 0 0 185px !important;
  align-items: center !important;
  justify-content: center !important;

  width: 185px !important;
  min-width: 185px !important;
  max-width: 185px !important;
  height: 29px !important;
  min-height: 29px !important;

  margin-left: 24px !important;
  padding: 0 !important;

  background-position: center !important;
  background-size: 100% 100% !important;

  box-sizing: border-box !important;
  overflow: visible !important;
  white-space: nowrap !important;
}

html[lang^="fr"] body#about-attr-page
#header .top-menu .us-healthcare > li.bg-stay > a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 100% !important;

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

  font-size: 10px !important;
  line-height: 1 !important;
  text-align: center !important;
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;

  box-sizing: border-box !important;
}

/* Mobile/tablet header */
@media screen and (max-width: 991px) {
  html[lang^="fr"] body#about-attr-page
  #header .top-menu .us-healthcare > li.bg-stay {
    flex: 0 0 155px !important;

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

    margin-left: 8px !important;
    margin-right: 8px !important;
  }

  html[lang^="fr"] body#about-attr-page
  #header .top-menu .us-healthcare > li.bg-stay > a {
    padding: 0 6px !important;
    font-size: 9px !important;
  }
}

/* --------------------------------------------------------------------------
   2. ATTR-suspected callout: force reference numbers to regular/unbold
   Works for both EN and FR, regardless of the AEM Text component ID.
   -------------------------------------------------------------------------- */

html[lang^="en"] body#about-attr-page
.attr-suspected-title .attr-sup,
html[lang^="en"] body#about-attr-page
.attr-suspected-title .attr-sup sup,
html[lang^="en"] body#about-attr-page
.attr-suspected-title > sup,
html[lang^="en"] body#about-attr-page
.attr-suspected-title b sup,
html[lang^="fr"] body#about-attr-page
.attr-suspected-title .attr-sup,
html[lang^="fr"] body#about-attr-page
.attr-suspected-title .attr-sup sup,
html[lang^="fr"] body#about-attr-page
.attr-suspected-title > sup,
html[lang^="fr"] body#about-attr-page
.attr-suspected-title b sup {
  font-family: "Kanit", "Kanit", sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-synthesis: none !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: none !important;
}

/* Preserve superscript size and position */
html[lang^="en"] body#about-attr-page
.attr-suspected-title sup,
html[lang^="fr"] body#about-attr-page
.attr-suspected-title sup {
  position: relative !important;
  top: -0.45em !important;
  vertical-align: baseline !important;

  font-family: "Kanit", "Kanit", sans-serif !important;
  font-size: 60% !important;
  font-weight: 400 !important;
  line-height: 0 !important;
}

/* ==========================================================================
   FINAL OVERRIDE — STAY INFORMED TEXT COLOR
   Applies to both EN and FR on the About ATTR page.
   Keep this block at the absolute end of the stylesheet.
   ========================================================================== */

html[lang^="en"] body#about-attr-page #header .bg-stay > a,
html[lang^="en"] body#about-attr-page #header .bg-stay > a:visited,
html[lang^="en"] body#about-attr-page #header .bg-stay > a:hover,
html[lang^="en"] body#about-attr-page #header .bg-stay > a:focus,
html[lang^="en"] body#about-attr-page #header .bg-stay > a:active,
html[lang^="fr"] body#about-attr-page #header .bg-stay > a,
html[lang^="fr"] body#about-attr-page #header .bg-stay > a:visited,
html[lang^="fr"] body#about-attr-page #header .bg-stay > a:hover,
html[lang^="fr"] body#about-attr-page #header .bg-stay > a:focus,
html[lang^="fr"] body#about-attr-page #header .bg-stay > a:active {
  color: #00215F !important;
}

/* ==========================================================================
   FINAL ABOUT ATTR FOOTER NAVIGATION / ICON VISIBILITY FIX
   Keep this block at the absolute end of about-attr.css.

   The earlier generic `li a { color: inherit !important; }` rule also affects
   the black global footer. This restores the intended white footer links and
   keeps authored link icons above the footer background.
   ========================================================================== */

html[lang^="en"] body#about-attr-page .footer-ul-li-container,
html[lang^="fr"] body#about-attr-page .footer-ul-li-container,
html[lang^="en"] body#about-attr-page ul.footer-ul-li,
html[lang^="fr"] body#about-attr-page ul.footer-ul-li,
html[lang^="en"] body#about-attr-page ul.footer-ul-li > li,
html[lang^="fr"] body#about-attr-page ul.footer-ul-li > li {
  position: relative !important;
  z-index: 5 !important;
  color: #ffffff !important;
  visibility: visible !important;
  opacity: 1 !important;
}

html[lang^="en"] body#about-attr-page .footer-ul-li-container a,
html[lang^="fr"] body#about-attr-page .footer-ul-li-container a,
html[lang^="en"] body#about-attr-page ul.footer-ul-li > li > a,
html[lang^="fr"] body#about-attr-page ul.footer-ul-li > li > a,
html[lang^="en"] body#about-attr-page .footer-ul-li-container a:visited,
html[lang^="fr"] body#about-attr-page .footer-ul-li-container a:visited,
html[lang^="en"] body#about-attr-page ul.footer-ul-li > li > a:visited,
html[lang^="fr"] body#about-attr-page ul.footer-ul-li > li > a:visited {
  position: relative !important;
  z-index: 6 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  visibility: visible !important;
  opacity: 1 !important;
  background-color: transparent !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  text-decoration: none !important;
  text-decoration-color: #ffffff !important;
}

html[lang^="en"] body#about-attr-page .footer-ul-li-container a:hover,
html[lang^="fr"] body#about-attr-page .footer-ul-li-container a:hover,
html[lang^="en"] body#about-attr-page .footer-ul-li-container a:focus,
html[lang^="fr"] body#about-attr-page .footer-ul-li-container a:focus,
html[lang^="en"] body#about-attr-page .footer-ul-li-container a:active,
html[lang^="fr"] body#about-attr-page .footer-ul-li-container a:active,
html[lang^="en"] body#about-attr-page ul.footer-ul-li > li > a:hover,
html[lang^="fr"] body#about-attr-page ul.footer-ul-li > li > a:hover,
html[lang^="en"] body#about-attr-page ul.footer-ul-li > li > a:focus,
html[lang^="fr"] body#about-attr-page ul.footer-ul-li > li > a:focus,
html[lang^="en"] body#about-attr-page ul.footer-ul-li > li > a:active,
html[lang^="fr"] body#about-attr-page ul.footer-ul-li > li > a:active {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  visibility: visible !important;
  opacity: 1 !important;
  text-decoration: underline !important;
  text-decoration-color: #ffffff !important;
}

/* Restore icons generated by the footer component without replacing their assets. */
html[lang^="en"] body#about-attr-page .footer-ul-li-container a::before,
html[lang^="fr"] body#about-attr-page .footer-ul-li-container a::before,
html[lang^="en"] body#about-attr-page .footer-ul-li-container a::after,
html[lang^="fr"] body#about-attr-page .footer-ul-li-container a::after,
html[lang^="en"] body#about-attr-page ul.footer-ul-li > li > a::before,
html[lang^="fr"] body#about-attr-page ul.footer-ul-li > li > a::before,
html[lang^="en"] body#about-attr-page ul.footer-ul-li > li > a::after,
html[lang^="fr"] body#about-attr-page ul.footer-ul-li > li > a::after {
  color: #ffffff !important;
  visibility: visible !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

/* Restore authored image/SVG icons inside footer links. */
html[lang^="en"] body#about-attr-page .footer-ul-li-container a img,
html[lang^="fr"] body#about-attr-page .footer-ul-li-container a img,
html[lang^="en"] body#about-attr-page .footer-ul-li-container a svg,
html[lang^="fr"] body#about-attr-page .footer-ul-li-container a svg {
  position: relative !important;
  z-index: 7 !important;
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

/* ==========================================================================
   FINAL DESKTOP-ONLY ABOUT ATTR SPACING + DIAGRAM ALIGNMENT FIX
   Applies to EN and FR. Mobile/tablet (991px and below) is intentionally
   untouched. Keep this block at the absolute end of the stylesheet.
   ========================================================================== */

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

  /* ------------------------------------------------------------------------
     1. CARDIAC AMYLOIDOSIS (ATTR-CM) — compact and consistent spacing
     ------------------------------------------------------------------------ */

  html[lang^="en"] body#about-attr-page #container-380ba759fc > .text:has(.slide),
  html[lang^="en"] body#about-attr-page #container-380ba759fc .cmp-text:has(.slide),
  html[lang^="fr"] body#about-attr-page #container-380ba759fc > .text:has(.slide),
  html[lang^="fr"] body#about-attr-page #container-380ba759fc .cmp-text:has(.slide),
  body#about-attr-page #container-380ba759fc > .text:has(.slide),
  body#about-attr-page #container-380ba759fc .cmp-text:has(.slide) {
    margin: 0 !important;
    padding: 16px 16px 14px !important;
    box-sizing: border-box !important;
  }

  html[lang^="en"] body#about-attr-page #container-380ba759fc .slide,
  html[lang^="fr"] body#about-attr-page #container-380ba759fc .slide,
  body#about-attr-page #container-380ba759fc .slide {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html[lang^="en"] body#about-attr-page #container-380ba759fc .slide .title,
  html[lang^="fr"] body#about-attr-page #container-380ba759fc .slide .title,
  body#about-attr-page #container-380ba759fc .slide .title {
    margin: 0 0 6px !important;
    padding: 0 !important;
    line-height: 22px !important;
  }

  html[lang^="en"] body#about-attr-page #container-380ba759fc .slide > .bullet-row,
  html[lang^="fr"] body#about-attr-page #container-380ba759fc .slide > .bullet-row,
  body#about-attr-page #container-380ba759fc .slide > .bullet-row {
    margin: 0 0 6px !important;
    padding: 0 !important;
    min-height: 0 !important;
    align-items: flex-start !important;
  }

  html[lang^="en"] body#about-attr-page #container-380ba759fc .slide > .bullet-row:last-of-type,
  html[lang^="fr"] body#about-attr-page #container-380ba759fc .slide > .bullet-row:last-of-type,
  body#about-attr-page #container-380ba759fc .slide > .bullet-row:last-of-type {
    margin-bottom: 4px !important;
  }

  html[lang^="en"] body#about-attr-page #container-380ba759fc .slide .sub-bullets,
  html[lang^="fr"] body#about-attr-page #container-380ba759fc .slide .sub-bullets,
  body#about-attr-page #container-380ba759fc .slide .sub-bullets {
    margin: -30px 0 0 48px !important;
    padding: 0 !important;
  }

  html[lang^="en"] body#about-attr-page #container-380ba759fc .slide .sub-bullets .bullet-row,
  html[lang^="fr"] body#about-attr-page #container-380ba759fc .slide .sub-bullets .bullet-row,
  body#about-attr-page #container-380ba759fc .slide .sub-bullets .bullet-row {
    margin: 0 0 3px !important;
    padding: 0 !important;
    min-height: 0 !important;
  }

  html[lang^="en"] body#about-attr-page #container-380ba759fc .slide .sub-bullets .bullet-row:last-child,
  html[lang^="fr"] body#about-attr-page #container-380ba759fc .slide .sub-bullets .bullet-row:last-child,
  body#about-attr-page #container-380ba759fc .slide .sub-bullets .bullet-row:last-child {
    margin-bottom: 0 !important;
  }

  html[lang^="en"] body#about-attr-page #container-380ba759fc .slide .bullet-text,
  html[lang^="fr"] body#about-attr-page #container-380ba759fc .slide .bullet-text,
  body#about-attr-page #container-380ba759fc .slide .bullet-text {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 20px !important;
  }

  /* ------------------------------------------------------------------------
     2. AT THE SOURCE: THE LIVER — one horizontal row and heading clearance
     ------------------------------------------------------------------------ */

  html[lang^="en"] body#about-attr-page #container-2a2a9d56d1 #about-cards-1 .aboutattr-cards-container,
  html[lang^="fr"] body#about-attr-page #about-cards-1 .aboutattr-cards-container,
  body#about-attr-page #about-cards-1 .aboutattr-cards-container {
    width: 100% !important;
    max-width: 1001px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 22px 28px 28px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  html[lang^="en"] body#about-attr-page #container-2a2a9d56d1 #about-cards-1 .at-source-heading,
  html[lang^="fr"] body#about-attr-page #about-cards-1 .at-source-heading,
  body#about-attr-page #about-cards-1 .at-source-heading {
    display: block !important;
    width: 100% !important;
    margin: 0 auto 18px !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }

  html[lang^="en"] body#about-attr-page #container-2a2a9d56d1 #about-cards-1 .aboutattr-cards-container > .at-source-heading + br,
  html[lang^="en"] body#about-attr-page #container-2a2a9d56d1 #about-cards-1 .aboutattr-cards-container > .at-source-heading + br + br,
  html[lang^="fr"] body#about-attr-page #about-cards-1 .aboutattr-cards-container > .at-source-heading + br,
  html[lang^="fr"] body#about-attr-page #about-cards-1 .aboutattr-cards-container > .at-source-heading + br + br,
  body#about-attr-page #about-cards-1 .aboutattr-cards-container > .at-source-heading + br,
  body#about-attr-page #about-cards-1 .aboutattr-cards-container > .at-source-heading + br + br {
    display: none !important;
  }

  html[lang^="en"] body#about-attr-page #container-2a2a9d56d1 #about-cards-1 .diagnosis-cards-items,
  html[lang^="fr"] body#about-attr-page #about-cards-1 .diagnosis-cards-items,
  body#about-attr-page #about-cards-1 .diagnosis-cards-items {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    box-sizing: border-box !important;
  }

  html[lang^="en"] body#about-attr-page #container-2a2a9d56d1 #about-cards-1 .steps-card,
  html[lang^="fr"] body#about-attr-page #about-cards-1 .steps-card,
  body#about-attr-page #about-cards-1 .steps-card {
    display: block !important;
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    text-align: center !important;
  }

  html[lang^="en"] body#about-attr-page #container-2a2a9d56d1 #about-cards-1 .steps-card-icon,
  html[lang^="fr"] body#about-attr-page #about-cards-1 .steps-card-icon,
  body#about-attr-page #about-cards-1 .steps-card-icon {
    display: grid !important;
    grid-template-rows: 135px minmax(64px, auto) !important;
    align-items: end !important;
    justify-items: center !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  html[lang^="en"] body#about-attr-page #container-2a2a9d56d1 #about-cards-1 .steps-icon,
  html[lang^="fr"] body#about-attr-page #about-cards-1 .steps-icon,
  body#about-attr-page #about-cards-1 .steps-icon {
    grid-row: 1 !important;
    align-self: end !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 165px !important;
    max-height: 130px !important;
    margin: 0 auto 8px !important;
    object-fit: contain !important;
    object-position: center bottom !important;
    transform: none !important;
  }

  html[lang^="en"] body#about-attr-page #container-2a2a9d56d1 #about-cards-1 .steps-title,
  html[lang^="fr"] body#about-attr-page #about-cards-1 .steps-title,
  body#about-attr-page #about-cards-1 .steps-title {
    grid-row: 2 !important;
    align-self: start !important;
    width: 100% !important;
    max-width: 180px !important;
    min-height: 58px !important;
    margin: 0 auto !important;
    padding: 0 4px !important;
    box-sizing: border-box !important;
    font-size: 15px !important;
    line-height: 18px !important;
    text-align: center !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }

  html[lang^="en"] body#about-attr-page #container-2a2a9d56d1 #about-cards-1 .diagnosis-cards-items > .alt-right-arrow,
  html[lang^="fr"] body#about-attr-page #about-cards-1 .diagnosis-cards-items > .alt-right-arrow,
  body#about-attr-page #about-cards-1 .diagnosis-cards-items > .alt-right-arrow {
    display: block !important;
    flex: 0 0 28px !important;
    align-self: flex-start !important;
    width: 28px !important;
    max-width: 28px !important;
    height: auto !important;
    margin: 54px 6px 0 !important;
    object-fit: contain !important;
    transform: none !important;
  }

  html[lang^="en"] body#about-attr-page #container-2a2a9d56d1 #about-cards-1 .arrow-down-card,
  html[lang^="fr"] body#about-attr-page #about-cards-1 .arrow-down-card,
  body#about-attr-page #about-cards-1 .arrow-down-card {
    display: none !important;
  }

  /* ------------------------------------------------------------------------
     3. AT RISK: MULTIPLE ORGANS AND TISSUES — keep all stages on one row
     ------------------------------------------------------------------------ */

  html[lang^="en"] body#about-attr-page #container-de03a1c250 #about-cards-2 .aboutattr-cards-container,
  html[lang^="fr"] body#about-attr-page #about-cards-2 .aboutattr-cards-container,
  body#about-attr-page #about-cards-2 .aboutattr-cards-container {
    width: 100% !important;
    max-width: 1001px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 22px 28px 28px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  html[lang^="en"] body#about-attr-page #container-de03a1c250 #about-cards-2 .at-source-heading,
  html[lang^="fr"] body#about-attr-page #about-cards-2 .at-source-heading,
  body#about-attr-page #about-cards-2 .at-source-heading {
    display: block !important;
    width: 100% !important;
    margin: 0 auto 18px !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }

  html[lang^="en"] body#about-attr-page #container-de03a1c250 #about-cards-2 .diagnosis-cards-items,
  html[lang^="fr"] body#about-attr-page #about-cards-2 .diagnosis-cards-items,
  body#about-attr-page #about-cards-2 .diagnosis-cards-items {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    box-sizing: border-box !important;
  }

  html[lang^="en"] body#about-attr-page #container-de03a1c250 #about-cards-2 .steps-card,
  html[lang^="fr"] body#about-attr-page #about-cards-2 .steps-card,
  body#about-attr-page #about-cards-2 .steps-card {
    display: block !important;
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    text-align: center !important;
  }

  html[lang^="en"] body#about-attr-page #container-de03a1c250 #about-cards-2 .steps-card:first-child,
  html[lang^="fr"] body#about-attr-page #about-cards-2 .steps-card:first-child,
  body#about-attr-page #about-cards-2 .steps-card:first-child {
    transform: none !important;
  }

  html[lang^="en"] body#about-attr-page #container-de03a1c250 #about-cards-2 .steps-card-icon,
  html[lang^="fr"] body#about-attr-page #about-cards-2 .steps-card-icon,
  body#about-attr-page #about-cards-2 .steps-card-icon {
    display: grid !important;
    grid-template-rows: 125px minmax(62px, auto) !important;
    align-items: end !important;
    justify-items: center !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  html[lang^="en"] body#about-attr-page #container-de03a1c250 #about-cards-2 .steps-icon,
  html[lang^="fr"] body#about-attr-page #about-cards-2 .steps-icon,
  body#about-attr-page #about-cards-2 .steps-icon {
    grid-row: 1 !important;
    align-self: end !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 150px !important;
    max-height: 120px !important;
    margin: 0 auto 8px !important;
    object-fit: contain !important;
    object-position: center bottom !important;
    transform: none !important;
  }

  html[lang^="en"] body#about-attr-page #container-de03a1c250 #about-cards-2 .ab-icon-1,
  html[lang^="en"] body#about-attr-page #container-de03a1c250 #about-cards-2 .ab-icon-2,
  html[lang^="en"] body#about-attr-page #container-de03a1c250 #about-cards-2 .ab-icon-3,
  html[lang^="en"] body#about-attr-page #container-de03a1c250 #about-cards-2 .ab-icon-4,
  html[lang^="en"] body#about-attr-page #container-de03a1c250 #about-cards-2 .ab-icon-5,
  html[lang^="en"] body#about-attr-page #container-de03a1c250 #about-cards-2 .ab-icon-6,
  html[lang^="fr"] body#about-attr-page #about-cards-2 .ab-icon-1,
  html[lang^="fr"] body#about-attr-page #about-cards-2 .ab-icon-2,
  html[lang^="fr"] body#about-attr-page #about-cards-2 .ab-icon-3,
  html[lang^="fr"] body#about-attr-page #about-cards-2 .ab-icon-4,
  html[lang^="fr"] body#about-attr-page #about-cards-2 .ab-icon-5,
  html[lang^="fr"] body#about-attr-page #about-cards-2 .ab-icon-6,
  body#about-attr-page #about-cards-2 .ab-icon-1,
  body#about-attr-page #about-cards-2 .ab-icon-2,
  body#about-attr-page #about-cards-2 .ab-icon-3,
  body#about-attr-page #about-cards-2 .ab-icon-4,
  body#about-attr-page #about-cards-2 .ab-icon-5,
  body#about-attr-page #about-cards-2 .ab-icon-6 {
    width: auto !important;
    height: auto !important;
    max-width: 150px !important;
    max-height: 120px !important;
    margin-top: 0 !important;
  }

  html[lang^="en"] body#about-attr-page #container-de03a1c250 #about-cards-2 .steps-title,
  html[lang^="fr"] body#about-attr-page #about-cards-2 .steps-title,
  body#about-attr-page #about-cards-2 .steps-title {
    grid-row: 2 !important;
    align-self: start !important;
    width: 100% !important;
    max-width: 150px !important;
    min-height: 54px !important;
    margin: 0 auto !important;
    padding: 0 2px !important;
    box-sizing: border-box !important;
    font-size: 14px !important;
    line-height: 17px !important;
    text-align: center !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }

  html[lang^="en"] body#about-attr-page #container-de03a1c250 #about-cards-2 .steps-plus-icon,
  html[lang^="fr"] body#about-attr-page #about-cards-2 .steps-plus-icon,
  body#about-attr-page #about-cards-2 .steps-plus-icon {
    display: block !important;
    flex: 0 0 24px !important;
    align-self: flex-start !important;
    width: 24px !important;
    min-width: 24px !important;
    max-width: 24px !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    margin: 50px 4px 0 !important;
    object-fit: contain !important;
    transform: none !important;
  }
}

@media screen and (min-width: 992px) {
  #about-attr-page
  .slide:has(> .sub-bullets)
  > .bullet-row
  + .bullet-row {
    position: relative !important;
    top: -15px !important;
  }

  /* Cancel the previous text-only movement */
  #about-attr-page
  .slide:has(> .sub-bullets)
  > .bullet-row
  + .bullet-row
  > .bullet-text {
    top: 0 !important;
  }
}


/* =========================================================
   FINAL FR macOS BOLD-FONT FIX — 30 JUL 2026
   Keep this block at the absolute end of the stylesheet.

   Uses both the authored Kanit bold face and a numeric 700
   weight so Chrome/Safari on macOS do not resolve these
   elements as regular weight.
   ========================================================= */

/* ---------------------------------------------------------
   1) Polyneuropathy heading and authored bold phrases
   --------------------------------------------------------- */
html[lang^="fr"] body#about-attr-page .polyneuropathy-title,
html[lang^="fr"] body#about-attr-page
#container-75cf52306c
#text-c92be536b1.cmp-text > p:first-child {
  font-family: "Kanit-Bold", "Kanit", Arial, sans-serif !important;
  font-weight: 700 !important;
  font-style: normal !important;
  font-synthesis: weight !important;
}

html[lang^="fr"] body#about-attr-page .polyneuropathy-list strong,
html[lang^="fr"] body#about-attr-page .polyneuropathy-list b,
html[lang^="fr"] body#about-attr-page
#container-75cf52306c
#text-c92be536b1.cmp-text strong,
html[lang^="fr"] body#about-attr-page
#container-75cf52306c
#text-c92be536b1.cmp-text b {
  font-family: "Kanit-Bold", "Kanit", Arial, sans-serif !important;
  font-weight: 700 !important;
  font-style: normal !important;
  font-synthesis: weight !important;
}

/* Keep the linked bold phrases bold after the global link reset. */
html[lang^="fr"] body#about-attr-page .polyneuropathy-list a strong,
html[lang^="fr"] body#about-attr-page .polyneuropathy-list a b,
html[lang^="fr"] body#about-attr-page
#text-c92be536b1.cmp-text a strong,
html[lang^="fr"] body#about-attr-page
#text-c92be536b1.cmp-text a b {
  font-family: "Kanit-Bold", "Kanit", Arial, sans-serif !important;
  font-weight: 700 !important;
}

/* ---------------------------------------------------------
   2) Cardiac amyloidosis heading and bold inline phrases
   --------------------------------------------------------- */
html[lang^="fr"] body#about-attr-page
#container-380ba759fc .slide .title {
  font-family: "Kanit-Bold", "Kanit", Arial, sans-serif !important;
  font-weight: 700 !important;
  font-style: normal !important;
  font-synthesis: weight !important;
}

html[lang^="fr"] body#about-attr-page
#container-380ba759fc .slide .bold,
html[lang^="fr"] body#about-attr-page
#container-380ba759fc .slide .bullet-text strong,
html[lang^="fr"] body#about-attr-page
#container-380ba759fc .slide .bullet-text b {
  font-family: "Kanit-Bold", "Kanit", Arial, sans-serif !important;
  font-weight: 700 !important;
  font-style: normal !important;
  font-synthesis: weight !important;
}

/* The first nested item (Autonomic neuropathy) is bold + underlined. */
html[lang^="fr"] body#about-attr-page
#container-380ba759fc .slide
.sub-bullets .bullet-row:first-child .bullet-text a,
html[lang^="fr"] body#about-attr-page
#container-380ba759fc .slide
.sub-bullets .bullet-row:first-child .bullet-text .underline,
html[lang^="fr"] body#about-attr-page
#container-380ba759fc .slide
.sub-bullets .bullet-row:first-child .bullet-text u {
  font-family: "Kanit-Bold", "Kanit", Arial, sans-serif !important;
  font-weight: 700 !important;
  font-synthesis: weight !important;
}

/* ---------------------------------------------------------
   3) ATTR-CM progression stages, including STAGE B copy
   --------------------------------------------------------- */
/* html[lang^="fr"] body#about-attr-page
#progressive-cont-2 .stage-label,
html[lang^="fr"] body#about-attr-page
#progressive-cont-2 .steps-card-icon > .steps-title:first-of-type,
html[lang^="fr"] body#about-attr-page
#progressive-cont-2 .steps-card-icon > .steps-title:not(.stage-label),
html[lang^="fr"] body#about-attr-page
#progressive-cont-2 .steps-card1
.steps-card-icon > .steps-title:nth-of-type(2) {
  font-family: "Kanit-Bold", "Kanit", Arial, sans-serif !important;
  font-weight: 700 !important;
  font-style: normal !important;
  font-synthesis: weight !important;
} */

/* References remain regular and do not inherit the bold stage weight. */
html[lang^="fr"] body#about-attr-page
#progressive-cont-2 .stage-label sup,
html[lang^="fr"] body#about-attr-page
#progressive-cont-2 .steps-title sup,
html[lang^="fr"] body#about-attr-page
#progressive-cont-2 .suptxt-abt {
  font-family: "Kanit", "Kanit", Arial, sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-synthesis: none !important;
}

/* ============== END FR macOS BOLD-FONT FIX ============== */


/* =========================================================
   FINAL FR — ABOUT CARDS 1 ALIGNMENT FIX
   Added 31 JUL 2026

   Scope:
   - French About ATTR page only
   - First pathophysiology diagram only (#about-cards-1)
   - Safari/macOS-safe: no :has() selector is used

   This block must remain at the absolute end of the file so
   it overrides the older duplicated desktop/mobile rules.
   ========================================================= */

/* Remove the two authored <br> elements below the heading.
   Spacing is controlled consistently through CSS instead. */
html[lang^="fr"] body#about-attr-page
#about-cards-1 .at-source-heading + br,
html[lang^="fr"] body#about-attr-page
#about-cards-1 .at-source-heading + br + br {
  display: none !important;
}

html[lang^="fr"] body#about-attr-page
#about-cards-1 .aboutattr-cards-container {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

html[lang^="fr"] body#about-attr-page
#about-cards-1 .at-source-heading {
  position: static !important;
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 5px 16px 0 !important;
  color: #00215F !important;
  font-family: "Kanit-SemiBold", "Kanit", Arial, sans-serif !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  font-style: normal !important;
  font-synthesis: weight !important;
  line-height: 24px !important;
  text-align: center !important;
  white-space: normal !important;
  box-sizing: border-box !important;
}

html[lang^="fr"] body#about-attr-page
#about-cards-1 .at-source-heading sup {
  position: relative !important;
  top: -0.5em !important;
  margin-left: 2px !important;
  font-family: "Kanit-Medium", "Kanit", Arial, sans-serif !important;
  font-size: 55% !important;
  font-weight: 500 !important;
  line-height: 0 !important;
  vertical-align: baseline !important;
}

html[lang^="fr"] body#about-attr-page
#about-cards-1 .steps-card,
html[lang^="fr"] body#about-attr-page
#about-cards-1 .steps-card-icon {
  min-width: 0 !important;
  box-sizing: border-box !important;
}

html[lang^="fr"] body#about-attr-page
#about-cards-1 .steps-title {
  color: #00215F !important;
  font-family: "Kanit-SemiBold", "Kanit", Arial, sans-serif !important;
  font-weight: 600 !important;
  font-style: normal !important;
  font-synthesis: weight !important;
  text-align: center !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
  box-sizing: border-box !important;
}

/* Keep the five assets at their approved proportions. Their
   shared grid row below controls visual alignment. */
html[lang^="fr"] body#about-attr-page
#about-cards-1 img.steps-icon {
  position: static !important;
  display: block !important;
  max-width: 100% !important;
  max-height: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
}

html[lang^="fr"] body#about-attr-page
#about-cards-1 img.steps-icon.ab-icon-1 {
  width: 134px !important;
  height: 100px !important;
}

html[lang^="fr"] body#about-attr-page
#about-cards-1 img.steps-icon.ab-icon-2 {
  width: 133px !important;
  height: 117px !important;
}

html[lang^="fr"] body#about-attr-page
#about-cards-1 img.steps-icon.ab-icon-3 {
  width: 164px !important;
  height: 108px !important;
}

html[lang^="fr"] body#about-attr-page
#about-cards-1 img.steps-icon.ab-icon-4 {
  width: 144px !important;
  height: 110px !important;
  margin-top: 0 !important;
}

html[lang^="fr"] body#about-attr-page
#about-cards-1 img.steps-icon.ab-icon-5 {
  width: 53px !important;
  height: 122px !important;
}

/* =========================================================
   DESKTOP / LAPTOP
   ========================================================= */
@media screen and (min-width: 992px) {

  html[lang^="fr"] body#about-attr-page
  #about-cards-1 .aboutattr-cards-container {
    max-width: var(--fr-content-width, 1125px) !important;
    margin-top: 20px !important;
    margin-bottom: 25px !important;
    padding: 0 !important;
  }

  /* Nine visible grid items:
     card / arrow / card / arrow / card / arrow / card / arrow / card */
  html[lang^="fr"] body#about-attr-page
  #about-cards-1 .diagnosis-cards-items {
    display: grid !important;
    grid-template-columns:
      minmax(0, 1fr) 32px
      minmax(0, 1fr) 32px
      minmax(0, 1fr) 32px
      minmax(0, 1fr) 32px
      minmax(0, 1fr) !important;
    grid-auto-flow: row !important;
    column-gap: 7px !important;
    row-gap: 0 !important;
    align-items: start !important;
    justify-content: stretch !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 13px 22px 27px !important;
    box-sizing: border-box !important;
  }

  html[lang^="fr"] body#about-attr-page
  #about-cards-1 .steps-card {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    align-self: start !important;
    justify-self: stretch !important;
    transform: none !important;
  }

  /* Every image occupies the same 132px visual row. This is
     what aligns all titles, regardless of the asset height. */
  html[lang^="fr"] body#about-attr-page
  #about-cards-1 .steps-card-icon {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 132px auto !important;
    align-items: start !important;
    justify-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    transform: none !important;
  }

  html[lang^="fr"] body#about-attr-page
  #about-cards-1 .steps-card-icon > img.steps-icon {
    grid-row: 1 !important;
    align-self: center !important;
    justify-self: center !important;
  }

  html[lang^="fr"] body#about-attr-page
  #about-cards-1 .steps-title {
    grid-row: 2 !important;
    align-self: start !important;
    width: 100% !important;
    max-width: 180px !important;
    min-height: 100px !important;
    margin: 10px auto 0 !important;
    padding: 0 2px !important;
    font-size: 16px !important;
    line-height: 20px !important;
  }

  /* Horizontal arrows are centred against the shared image row,
     not against the varying French title heights. */
  html[lang^="fr"] body#about-attr-page
  #about-cards-1 img.alt-right-arrow {
    display: block !important;
    align-self: start !important;
    justify-self: center !important;
    width: 32px !important;
    max-width: 32px !important;
    height: 24px !important;
    margin: 54px 0 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
    transform: none !important;
  }

  html[lang^="fr"] body#about-attr-page
  #about-cards-1 .arrow-down-card {
    display: none !important;
  }
}

/* Slightly tighter spacing for smaller laptops while retaining
   the same baseline alignment. */
@media screen and (min-width: 992px) and (max-width: 1199px) {
  html[lang^="fr"] body#about-attr-page
  #about-cards-1 .diagnosis-cards-items {
    grid-template-columns:
      minmax(0, 1fr) 26px
      minmax(0, 1fr) 26px
      minmax(0, 1fr) 26px
      minmax(0, 1fr) 26px
      minmax(0, 1fr) !important;
    column-gap: 4px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  html[lang^="fr"] body#about-attr-page
  #about-cards-1 img.alt-right-arrow {
    width: 26px !important;
    max-width: 26px !important;
  }

  html[lang^="fr"] body#about-attr-page
  #about-cards-1 .steps-title {
    max-width: 158px !important;
    padding-left: 1px !important;
    padding-right: 1px !important;
    font-size: 15px !important;
    line-height: 19px !important;
  }
}

/* =========================================================
   TABLET
   ========================================================= */
@media screen and (min-width: 768px) and (max-width: 991px) {

  html[lang^="fr"] body#about-attr-page
  #about-cards-1 .aboutattr-cards-container {
    max-width: 100% !important;
    margin: 18px auto 24px !important;
    padding: 0 !important;
  }

  html[lang^="fr"] body#about-attr-page
  #about-cards-1 .diagnosis-cards-items {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 28px 22px !important;
    align-items: start !important;
    justify-items: center !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 18px 28px 30px !important;
    box-sizing: border-box !important;
  }

  html[lang^="fr"] body#about-attr-page
  #about-cards-1 .steps-card {
    display: block !important;
    width: 100% !important;
    max-width: 280px !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
  }

  html[lang^="fr"] body#about-attr-page
  #about-cards-1 .steps-card:last-child {
    grid-column: 1 / -1 !important;
    justify-self: center !important;
  }

  html[lang^="fr"] body#about-attr-page
  #about-cards-1 .steps-card-icon {
    display: grid !important;
    grid-template-rows: 132px auto !important;
    align-items: start !important;
    justify-items: center !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html[lang^="fr"] body#about-attr-page
  #about-cards-1 .steps-card-icon > img.steps-icon {
    grid-row: 1 !important;
    align-self: center !important;
  }

  html[lang^="fr"] body#about-attr-page
  #about-cards-1 .steps-title {
    grid-row: 2 !important;
    width: 100% !important;
    max-width: 260px !important;
    min-height: 0 !important;
    margin: 10px auto 0 !important;
    padding: 0 5px !important;
    font-size: 16px !important;
    line-height: 20px !important;
  }

  html[lang^="fr"] body#about-attr-page
  #about-cards-1 img.alt-right-arrow,
  html[lang^="fr"] body#about-attr-page
  #about-cards-1 .arrow-down-card {
    display: none !important;
  }
}

/* =========================================================
   MOBILE
   ========================================================= */
@media screen and (max-width: 767px) {

  html[lang^="fr"] body#about-attr-page
  #about-cards-1 .aboutattr-cards-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 16px auto 24px !important;
    padding: 0 !important;
  }

  html[lang^="fr"] body#about-attr-page
  #about-cards-1 .at-source-heading {
    padding: 12px 14px 0 !important;
    font-size: 19px !important;
    line-height: 23px !important;
  }

  html[lang^="fr"] body#about-attr-page
  #about-cards-1 .diagnosis-cards-items {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 18px 16px 26px !important;
    box-sizing: border-box !important;
  }

  html[lang^="fr"] body#about-attr-page
  #about-cards-1 .steps-card {
    display: block !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 320px !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
  }

  html[lang^="fr"] body#about-attr-page
  #about-cards-1 .steps-card-icon {
    display: grid !important;
    grid-template-rows: 132px auto !important;
    align-items: start !important;
    justify-items: center !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html[lang^="fr"] body#about-attr-page
  #about-cards-1 .steps-card-icon > img.steps-icon {
    grid-row: 1 !important;
    align-self: center !important;
  }

  html[lang^="fr"] body#about-attr-page
  #about-cards-1 .steps-title {
    grid-row: 2 !important;
    width: 100% !important;
    max-width: 285px !important;
    min-height: 0 !important;
    margin: 9px auto 0 !important;
    padding: 0 5px !important;
    font-size: 16px !important;
    line-height: 20px !important;
  }

  html[lang^="fr"] body#about-attr-page
  #about-cards-1 img.alt-right-arrow {
    display: none !important;
  }

  html[lang^="fr"] body#about-attr-page
  #about-cards-1 .arrow-down-card {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: auto !important;
    margin: 8px auto 10px !important;
    padding: 0 !important;
    transform: none !important;
  }

  html[lang^="fr"] body#about-attr-page
  #about-cards-1 .arrow-down-card img {
    display: block !important;
    width: 31px !important;
    max-width: 31px !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: 0 !important;
    object-fit: contain !important;
    transform: none !important;
  }
}

/* ============== END FR ABOUT CARDS 1 ALIGNMENT FIX ============== */



/* ========================================================================== 
   FINAL FR — PATHOPHYSIOLOGY CARD ALIGNMENT + CONSISTENT PADDING
   Added 31 JUL 2026

   Scope:
   - French About ATTR page only
   - "À la source : le foie" (#about-cards-1)
   - "À risque : plusieurs organes et tissus" (#about-cards-2)

   Keep this block at the absolute end of the stylesheet. It intentionally
   overrides the older duplicated card rules above without changing EN.
   ========================================================================== */

/* --------------------------------------------------------------------------
   SHARED RESET
   -------------------------------------------------------------------------- */

/* Remove authored line breaks below either heading. Spacing is controlled
   only by the heading and content padding below. */
html[lang^="fr"] body#about-attr-page
#about-cards-1 .at-source-heading + br,
html[lang^="fr"] body#about-attr-page
#about-cards-1 .at-source-heading + br + br,
html[lang^="fr"] body#about-attr-page
#about-cards-2 .at-source-heading + br,
html[lang^="fr"] body#about-attr-page
#about-cards-2 .at-source-heading + br + br,
html[lang^="fr"] body#about-attr-page
#about-cards-2 .at-risk-heading + br,
html[lang^="fr"] body#about-attr-page
#about-cards-2 .at-risk-heading + br + br {
  display: none !important;
}

/* Both outer cards use the same width, border-box model and outer spacing. */
html[lang^="fr"] body#about-attr-page
#container-f1c43da3c1 #about-cards-1 .aboutattr-cards-container,
html[lang^="fr"] body#about-attr-page
#container-de03a1c250 #about-cards-2 .aboutattr-cards-container {
  position: relative !important;
  inset: auto !important;
  display: block !important;
  width: 100% !important;
  max-width: var(--fr-content-width, 1125px) !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 20px auto 28px !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  transform: none !important;
}

/* Keep both headings visually identical, including the top and side padding. */
html[lang^="fr"] body#about-attr-page
#about-cards-1 .at-source-heading,
html[lang^="fr"] body#about-attr-page
#about-cards-2 .at-source-heading,
html[lang^="fr"] body#about-attr-page
#about-cards-2 .at-risk-heading {
  position: static !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 16px 24px 0 !important;
  box-sizing: border-box !important;
  color: #00215F !important;
  font-family: "Kanit-SemiBold", "Kanit", Arial, sans-serif !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  font-style: normal !important;
  font-synthesis: weight !important;
  line-height: 24px !important;
  text-align: center !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  transform: none !important;
}

html[lang^="fr"] body#about-attr-page
#about-cards-1 .at-source-heading sup,
html[lang^="fr"] body#about-attr-page
#about-cards-2 .at-source-heading sup,
html[lang^="fr"] body#about-attr-page
#about-cards-2 .at-risk-heading sup {
  position: relative !important;
  top: -0.5em !important;
  margin-left: 2px !important;
  font-family: "Kanit-Medium", "Kanit", Arial, sans-serif !important;
  font-size: 55% !important;
  font-weight: 500 !important;
  line-height: 0 !important;
  vertical-align: baseline !important;
}

/* Shared card/item reset. */
html[lang^="fr"] body#about-attr-page
#about-cards-1 .steps-card,
html[lang^="fr"] body#about-attr-page
#about-cards-1 .steps-card-icon,
html[lang^="fr"] body#about-attr-page
#about-cards-2 .steps-card,
html[lang^="fr"] body#about-attr-page
#about-cards-2 .steps-card-icon {
  position: static !important;
  inset: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  box-sizing: border-box !important;
  transform: none !important;
}

html[lang^="fr"] body#about-attr-page
#about-cards-1 .steps-title,
html[lang^="fr"] body#about-attr-page
#about-cards-2 .steps-title {
  color: #00215F !important;
  font-family: "Kanit-SemiBold", "Kanit", Arial, sans-serif !important;
  font-weight: 600 !important;
  font-style: normal !important;
  font-synthesis: weight !important;
  text-align: center !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
  box-sizing: border-box !important;
  transform: none !important;
}

html[lang^="fr"] body#about-attr-page
#about-cards-1 img.steps-icon,
html[lang^="fr"] body#about-attr-page
#about-cards-2 img.steps-icon {
  position: static !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  margin: 0 auto !important;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
}

/* Preserve the approved first-diagram asset proportions. */
html[lang^="fr"] body#about-attr-page
#about-cards-1 img.steps-icon.ab-icon-1 {
  width: 134px !important;
  height: 100px !important;
}

html[lang^="fr"] body#about-attr-page
#about-cards-1 img.steps-icon.ab-icon-2 {
  width: 133px !important;
  height: 117px !important;
}

html[lang^="fr"] body#about-attr-page
#about-cards-1 img.steps-icon.ab-icon-3 {
  width: 164px !important;
  height: 108px !important;
}

html[lang^="fr"] body#about-attr-page
#about-cards-1 img.steps-icon.ab-icon-4 {
  width: 144px !important;
  height: 110px !important;
  margin-top: 0 !important;
}

html[lang^="fr"] body#about-attr-page
#about-cards-1 img.steps-icon.ab-icon-5 {
  width: 53px !important;
  height: 122px !important;
}

/* --------------------------------------------------------------------------
   DESKTOP / LAPTOP
   -------------------------------------------------------------------------- */
@media screen and (min-width: 992px) {

  /* =========================
     BLOCK 1 — AT THE SOURCE
     ========================= */
  html[lang^="fr"] body#about-attr-page
  #container-f1c43da3c1 #about-cards-1 .diagnosis-cards-items {
    display: grid !important;
    grid-template-columns:
      minmax(0, 1fr) 34px
      minmax(0, 1fr) 34px
      minmax(0, 1fr) 34px
      minmax(0, 1fr) 34px
      minmax(0, 1fr) !important;
    grid-auto-flow: row !important;
    column-gap: 4px !important;
    row-gap: 0 !important;
    align-items: start !important;
    justify-content: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 12px 28px 28px !important;
    box-sizing: border-box !important;
  }

  html[lang^="fr"] body#about-attr-page
  #container-f1c43da3c1 #about-cards-1 .steps-card {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    align-self: start !important;
    justify-self: stretch !important;
    text-align: center !important;
  }

  html[lang^="fr"] body#about-attr-page
  #container-f1c43da3c1 #about-cards-1 .steps-card-icon {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 132px auto !important;
    align-items: start !important;
    justify-items: center !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
  }

  html[lang^="fr"] body#about-attr-page
  #container-f1c43da3c1 #about-cards-1 .steps-card-icon > img.steps-icon {
    grid-row: 1 !important;
    align-self: center !important;
    justify-self: center !important;
    max-width: 100% !important;
    max-height: 122px !important;
  }

  html[lang^="fr"] body#about-attr-page
  #container-f1c43da3c1 #about-cards-1 .steps-title {
    grid-row: 2 !important;
    align-self: start !important;
    width: 100% !important;
    max-width: 184px !important;
    min-height: 100px !important;
    margin: 10px auto 0 !important;
    padding: 0 3px !important;
    font-size: 16px !important;
    line-height: 20px !important;
  }

  /* Arrows are centred against the shared image row. */
  html[lang^="fr"] body#about-attr-page
  #container-f1c43da3c1 #about-cards-1 img.alt-right-arrow {
    display: block !important;
    align-self: start !important;
    justify-self: center !important;
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    margin: 54px 0 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
    object-position: center !important;
  }

  html[lang^="fr"] body#about-attr-page
  #container-f1c43da3c1 #about-cards-1 .arrow-down-card {
    display: none !important;
  }

  /* =========================
     BLOCK 2 — AT RISK
     ========================= */
  html[lang^="fr"] body#about-attr-page
  #container-de03a1c250 #about-cards-2 .diagnosis-cards-items {
    display: grid !important;
    grid-template-columns:
      minmax(0, 1fr) 28px
      minmax(0, 1fr) 28px
      minmax(0, 1fr) 28px
      minmax(0, 1fr) 28px
      minmax(0, 1fr) 28px
      minmax(0, 1fr) !important;
    grid-auto-flow: row !important;
    column-gap: 4px !important;
    row-gap: 0 !important;
    align-items: start !important;
    justify-content: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 12px 28px 30px !important;
    box-sizing: border-box !important;
  }

  html[lang^="fr"] body#about-attr-page
  #container-de03a1c250 #about-cards-2 .steps-card {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    align-self: start !important;
    justify-self: stretch !important;
    text-align: center !important;
  }

  html[lang^="fr"] body#about-attr-page
  #container-de03a1c250 #about-cards-2 .steps-card:first-child {
    transform: none !important;
  }

  html[lang^="fr"] body#about-attr-page
  #container-de03a1c250 #about-cards-2 .steps-card-icon {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 128px auto !important;
    align-items: start !important;
    justify-items: center !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
  }

  html[lang^="fr"] body#about-attr-page
  #container-de03a1c250 #about-cards-2 .steps-card-icon > img.steps-icon {
    grid-row: 1 !important;
    align-self: center !important;
    justify-self: center !important;
    max-width: 154px !important;
    max-height: 118px !important;
  }

  html[lang^="fr"] body#about-attr-page
  #container-de03a1c250 #about-cards-2 .steps-title {
    grid-row: 2 !important;
    align-self: start !important;
    width: 100% !important;
    max-width: 158px !important;
    min-height: 72px !important;
    margin: 10px auto 0 !important;
    padding: 0 3px !important;
    font-size: 16px !important;
    line-height: 19px !important;
  }

  /* Plus signs are centred against the shared image row. */
  html[lang^="fr"] body#about-attr-page
  #container-de03a1c250 #about-cards-2 .steps-plus-icon {
    position: static !important;
    display: block !important;
    align-self: start !important;
    justify-self: center !important;
    width: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    margin: 50px 0 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
    object-position: center !important;
    transform: none !important;
  }
}

/* Slightly tighter horizontal spacing for smaller laptops. */
@media screen and (min-width: 992px) and (max-width: 1199px) {
  html[lang^="fr"] body#about-attr-page
  #container-f1c43da3c1 #about-cards-1 .diagnosis-cards-items {
    grid-template-columns:
      minmax(0, 1fr) 26px
      minmax(0, 1fr) 26px
      minmax(0, 1fr) 26px
      minmax(0, 1fr) 26px
      minmax(0, 1fr) !important;
    column-gap: 3px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  html[lang^="fr"] body#about-attr-page
  #container-f1c43da3c1 #about-cards-1 img.alt-right-arrow {
    width: 26px !important;
    min-width: 26px !important;
    max-width: 26px !important;
  }

  html[lang^="fr"] body#about-attr-page
  #container-f1c43da3c1 #about-cards-1 .steps-title {
    max-width: 160px !important;
    font-size: 15px !important;
    line-height: 19px !important;
  }

  html[lang^="fr"] body#about-attr-page
  #container-de03a1c250 #about-cards-2 .diagnosis-cards-items {
    grid-template-columns:
      minmax(0, 1fr) 22px
      minmax(0, 1fr) 22px
      minmax(0, 1fr) 22px
      minmax(0, 1fr) 22px
      minmax(0, 1fr) 22px
      minmax(0, 1fr) !important;
    column-gap: 2px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  html[lang^="fr"] body#about-attr-page
  #container-de03a1c250 #about-cards-2 .steps-plus-icon {
    width: 22px !important;
    min-width: 22px !important;
    max-width: 22px !important;
    height: 22px !important;
    min-height: 22px !important;
    max-height: 22px !important;
    margin-top: 53px !important;
  }

  html[lang^="fr"] body#about-attr-page
  #container-de03a1c250 #about-cards-2 .steps-title {
    max-width: 142px !important;
    font-size: 15px !important;
    line-height: 18px !important;
  }
}

/* --------------------------------------------------------------------------
   TABLET
   -------------------------------------------------------------------------- */
@media screen and (min-width: 768px) and (max-width: 991px) {
  html[lang^="fr"] body#about-attr-page
  #container-f1c43da3c1 #about-cards-1 .aboutattr-cards-container,
  html[lang^="fr"] body#about-attr-page
  #container-de03a1c250 #about-cards-2 .aboutattr-cards-container {
    width: calc(100% - 32px) !important;
    max-width: none !important;
    margin: 18px 16px 26px !important;
    padding: 0 !important;
  }

  html[lang^="fr"] body#about-attr-page
  #about-cards-1 .at-source-heading,
  html[lang^="fr"] body#about-attr-page
  #about-cards-2 .at-source-heading,
  html[lang^="fr"] body#about-attr-page
  #about-cards-2 .at-risk-heading {
    padding: 16px 18px 0 !important;
    font-size: 19px !important;
    line-height: 23px !important;
  }

  html[lang^="fr"] body#about-attr-page
  #container-f1c43da3c1 #about-cards-1 .diagnosis-cards-items,
  html[lang^="fr"] body#about-attr-page
  #container-de03a1c250 #about-cards-2 .diagnosis-cards-items {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 28px 22px !important;
    align-items: start !important;
    justify-items: center !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 18px 24px 28px !important;
    box-sizing: border-box !important;
  }

  html[lang^="fr"] body#about-attr-page
  #about-cards-1 .steps-card,
  html[lang^="fr"] body#about-attr-page
  #about-cards-2 .steps-card {
    display: block !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
  }

  html[lang^="fr"] body#about-attr-page
  #about-cards-1 .steps-card-icon,
  html[lang^="fr"] body#about-attr-page
  #about-cards-2 .steps-card-icon {
    display: grid !important;
    grid-template-rows: 128px auto !important;
    align-items: start !important;
    justify-items: center !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html[lang^="fr"] body#about-attr-page
  #about-cards-1 .steps-title,
  html[lang^="fr"] body#about-attr-page
  #about-cards-2 .steps-title {
    width: 100% !important;
    max-width: 280px !important;
    min-height: 0 !important;
    margin: 9px auto 0 !important;
    padding: 0 5px !important;
    font-size: 16px !important;
    line-height: 20px !important;
  }

  html[lang^="fr"] body#about-attr-page
  #about-cards-1 img.alt-right-arrow,
  html[lang^="fr"] body#about-attr-page
  #about-cards-1 .arrow-down-card,
  html[lang^="fr"] body#about-attr-page
  #about-cards-2 .steps-plus-icon {
    display: none !important;
  }
}

/* --------------------------------------------------------------------------
   MOBILE
   -------------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
  html[lang^="fr"] body#about-attr-page
  #container-f1c43da3c1 #about-cards-1 .aboutattr-cards-container,
  html[lang^="fr"] body#about-attr-page
  #container-de03a1c250 #about-cards-2 .aboutattr-cards-container {
    width: calc(100% - 32px) !important;
    max-width: none !important;
    margin: 16px 16px 24px !important;
    padding: 0 !important;
  }

  html[lang^="fr"] body#about-attr-page
  #about-cards-1 .at-source-heading,
  html[lang^="fr"] body#about-attr-page
  #about-cards-2 .at-source-heading,
  html[lang^="fr"] body#about-attr-page
  #about-cards-2 .at-risk-heading {
    padding: 14px 14px 0 !important;
    font-size: 18px !important;
    line-height: 22px !important;
  }

  /* First block stacks vertically and keeps the authored down arrows. */
  html[lang^="fr"] body#about-attr-page
  #container-f1c43da3c1 #about-cards-1 .diagnosis-cards-items {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 16px 16px 24px !important;
    box-sizing: border-box !important;
  }

  html[lang^="fr"] body#about-attr-page
  #container-f1c43da3c1 #about-cards-1 .steps-card {
    display: block !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 320px !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
  }

  html[lang^="fr"] body#about-attr-page
  #container-f1c43da3c1 #about-cards-1 .steps-card-icon {
    display: grid !important;
    grid-template-rows: 128px auto !important;
    align-items: start !important;
    justify-items: center !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html[lang^="fr"] body#about-attr-page
  #container-f1c43da3c1 #about-cards-1 .steps-title {
    width: 100% !important;
    max-width: 290px !important;
    min-height: 0 !important;
    margin: 8px auto 0 !important;
    padding: 0 5px !important;
    font-size: 16px !important;
    line-height: 20px !important;
  }

  html[lang^="fr"] body#about-attr-page
  #container-f1c43da3c1 #about-cards-1 img.alt-right-arrow {
    display: none !important;
  }

  html[lang^="fr"] body#about-attr-page
  #container-f1c43da3c1 #about-cards-1 .arrow-down-card {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: auto !important;
    margin: 8px auto 10px !important;
    padding: 0 !important;
  }

  html[lang^="fr"] body#about-attr-page
  #container-f1c43da3c1 #about-cards-1 .arrow-down-card img {
    display: block !important;
    width: 31px !important;
    max-width: 31px !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: 0 !important;
    object-fit: contain !important;
    transform: none !important;
  }

  /* Second block uses a compact two-column mobile grid. */
  html[lang^="fr"] body#about-attr-page
  #container-de03a1c250 #about-cards-2 .diagnosis-cards-items {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 22px 12px !important;
    align-items: start !important;
    justify-items: center !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 16px 14px 24px !important;
    box-sizing: border-box !important;
  }

  html[lang^="fr"] body#about-attr-page
  #container-de03a1c250 #about-cards-2 .steps-card {
    display: block !important;
    width: 100% !important;
    max-width: 180px !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
  }

  html[lang^="fr"] body#about-attr-page
  #container-de03a1c250 #about-cards-2 .steps-card + .steps-card,
  html[lang^="fr"] body#about-attr-page
  #container-de03a1c250 #about-cards-2 .aboutattr + .aboutattr {
    margin-top: 0 !important;
  }

  html[lang^="fr"] body#about-attr-page
  #container-de03a1c250 #about-cards-2 .steps-card-icon {
    display: grid !important;
    grid-template-rows: 108px auto !important;
    align-items: start !important;
    justify-items: center !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html[lang^="fr"] body#about-attr-page
  #container-de03a1c250 #about-cards-2 .steps-card-icon > img.steps-icon {
    align-self: center !important;
    justify-self: center !important;
    max-width: 120px !important;
    max-height: 100px !important;
  }

  html[lang^="fr"] body#about-attr-page
  #container-de03a1c250 #about-cards-2 .steps-title {
    width: 100% !important;
    max-width: 160px !important;
    min-height: 0 !important;
    margin: 7px auto 0 !important;
    padding: 0 2px !important;
    font-size: 14px !important;
    line-height: 17px !important;
  }

  html[lang^="fr"] body#about-attr-page
  #container-de03a1c250 #about-cards-2 .steps-plus-icon {
    display: none !important;
  }
}

/* ============== END FR PATHOPHYSIOLOGY CARD ALIGNMENT FIX ============== */

/* =========================================================
   FINAL FR — AT-RISK CARD IMAGE / PLUS / TEXT ALIGNMENT
   Added 31 JUL 2026

   Keep this block at the absolute end of the stylesheet.
   It fixes #about-cards-2 without changing the first diagram.
   ========================================================= */

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

  /* Keep every organ card in the same two-row structure. */
  html[lang^="fr"] body#about-attr-page
  #container-de03a1c250 #about-cards-2 .steps-card-icon {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 126px 72px !important;
    align-items: start !important;
    justify-items: center !important;
    width: 100% !important;
    height: 198px !important;
    min-height: 198px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  /* Align the bottom edge of all six organ images. */
  html[lang^="fr"] body#about-attr-page
  #container-de03a1c250 #about-cards-2 .steps-card-icon > img.steps-icon {
    grid-row: 1 !important;
    align-self: end !important;
    justify-self: center !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 154px !important;
    max-height: 118px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    object-fit: contain !important;
    object-position: center bottom !important;
    transform: none !important;
  }

  /* Keep all labels starting from the same horizontal line. */
  html[lang^="fr"] body#about-attr-page
  #container-de03a1c250 #about-cards-2 .steps-title {
    grid-row: 2 !important;
    align-self: start !important;
    justify-self: center !important;
    width: 100% !important;
    max-width: 158px !important;
    min-height: 72px !important;
    margin: 8px auto 0 !important;
    padding: 0 3px !important;
    box-sizing: border-box !important;
    font-size: 16px !important;
    line-height: 19px !important;
    text-align: center !important;
  }

  /* Place every plus sign at the exact centre of the shared image row. */
  html[lang^="fr"] body#about-attr-page
  #container-de03a1c250 #about-cards-2 .steps-plus-icon {
    position: static !important;
    display: block !important;
    align-self: start !important;
    justify-self: center !important;
    width: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    margin: 49px 0 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
    object-position: center !important;
    transform: none !important;
  }

  /* Equalise the card's internal top and bottom spacing. */
  html[lang^="fr"] body#about-attr-page
  #container-de03a1c250 #about-cards-2 .diagnosis-cards-items {
    align-items: start !important;
    padding-top: 12px !important;
    padding-bottom: 24px !important;
  }
}

/* Smaller desktop/laptop widths use the same vertical alignment. */
@media screen and (min-width: 992px) and (max-width: 1199px) {
  html[lang^="fr"] body#about-attr-page
  #container-de03a1c250 #about-cards-2 .steps-card-icon {
    grid-template-rows: 122px 70px !important;
    height: 192px !important;
    min-height: 192px !important;
  }

  html[lang^="fr"] body#about-attr-page
  #container-de03a1c250 #about-cards-2 .steps-card-icon > img.steps-icon {
    max-width: 142px !important;
    max-height: 114px !important;
  }

  html[lang^="fr"] body#about-attr-page
  #container-de03a1c250 #about-cards-2 .steps-title {
    max-width: 142px !important;
    min-height: 70px !important;
    margin-top: 8px !important;
    font-size: 15px !important;
    line-height: 18px !important;
  }

  html[lang^="fr"] body#about-attr-page
  #container-de03a1c250 #about-cards-2 .steps-plus-icon {
    width: 22px !important;
    min-width: 22px !important;
    max-width: 22px !important;
    height: 22px !important;
    min-height: 22px !important;
    max-height: 22px !important;
    margin-top: 50px !important;
  }
}

/* ============== END FR AT-RISK ALIGNMENT FIX ============== */

/* =========================================================
   FINAL EN + FR MOBILE HERO IMAGE SIZE FIX
   Added 31 JUL 2026

   The supplied mobile reference uses an approximately 768 × 930 proportion.
   This block keeps that proportion, prevents the desktop 340px height
   and older banner padding rules from resizing/cropping the image,
   and applies the same behaviour to EN and FR.

   Keep this block at the absolute end of the stylesheet.
   ========================================================= */

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

  /* Reset the AEM hero wrappers for both language versions. */
  html[lang^="en"] body#about-attr-page #container-3494b00441,
  html[lang^="fr"] body#about-attr-page #container-3494b00441,
  html[lang^="en"] body#about-attr-page #container-3494b00441 > .text,
  html[lang^="fr"] body#about-attr-page #container-3494b00441 > .text,
  html[lang^="en"] body#about-attr-page #container-3494b00441 #about-cards-2,
  html[lang^="fr"] body#about-attr-page #container-3494b00441 #about-cards-2 {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    box-sizing: border-box !important;
  }

  /* Display the dedicated mobile artwork at its intended proportion. */
  html[lang^="en"] body#about-attr-page
  #container-3494b00441 #about-cards-2 .treatment-diagnosis-banner,
  html[lang^="fr"] body#about-attr-page
  #container-3494b00441 #about-cards-2 .treatment-diagnosis-banner {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;

    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    /* Mobile proportion matched to the supplied reference. */
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;


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

    background-image: url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/internal_sky-header-mobile.jpg") !important;
    background-repeat: no-repeat !important;
    background-position: center top !important;
    background-size: cover !important;
    background-color: #02072D !important;

    box-shadow: none !important;
    overflow: hidden !important;
    transform: none !important;
    box-sizing: border-box !important;
  }

  /* Keep the authored hero copy inside the image without changing its font styling. */
  html[lang^="en"] body#about-attr-page
  #container-3494b00441 #about-cards-2 .treatment.banner-content,
  html[lang^="fr"] body#about-attr-page
  #container-3494b00441 #about-cards-2 .treatment.banner-content {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    padding-left: clamp(28px, 8vw, 64px) !important;
    padding-right: clamp(28px, 8vw, 64px) !important;
    transform: none !important;
    box-sizing: border-box !important;
  }
}

/* Very small phones: retain the same image ratio and reduce only side spacing. */
@media screen and (max-width: 480px) {
  html[lang^="en"] body#about-attr-page
  #container-3494b00441 #about-cards-2 .treatment.banner-content,
  html[lang^="fr"] body#about-attr-page
  #container-3494b00441 #about-cards-2 .treatment.banner-content {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

/* ============== END EN + FR MOBILE HERO IMAGE FIX ============== */

/* ========================================================================
   DEFINITIVE EN + FR MOBILE HERO PROPORTION FIX
   Added 31 JUL 2026

   Reason for this override:
   The hero copy was still participating in normal document flow. Therefore,
   it could make the background container taller than the mobile artwork's
   768 x 930 proportion. The copy is now positioned inside the fixed-ratio
   hero and can no longer stretch the image.

   Keep this block at the absolute end of the stylesheet.
   ======================================================================== */

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

  /* Reset the complete AEM wrapper chain for the hero only. */
  html[lang^="en"] body#about-attr-page #container-3494b00441,
  html[lang^="fr"] body#about-attr-page #container-3494b00441,
  html[lang^="en"] body#about-attr-page #container-3494b00441 > .text,
  html[lang^="fr"] body#about-attr-page #container-3494b00441 > .text,
  html[lang^="en"] body#about-attr-page #container-3494b00441 #about-cards-2,
  html[lang^="fr"] body#about-attr-page #container-3494b00441 #about-cards-2 {
    position: relative !important;
    inset: 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;
    transform: none !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  /*
   * The mobile artwork is 768 x 930.
   * aspect-ratio controls the rendered height from the available width.
   * The absolutely positioned copy below cannot increase this height.
   */
  html[lang^="en"] body#about-attr-page
  #container-3494b00441 #about-cards-2 .treatment-diagnosis-banner,
  html[lang^="fr"] body#about-attr-page
  #container-3494b00441 #about-cards-2 .treatment-diagnosis-banner {
    position: relative !important;
    inset: 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;

    background-image: url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/internal_sky-header-mobile.jpg") !important;
    background-repeat: no-repeat !important;
    background-position: center top !important;
    background-size: 100% 100% !important;
    background-color: #02072D !important;

    border: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  /*
   * Place the authored EN/FR copy over the artwork instead of allowing it
   * to determine the banner height.
   */
  html[lang^="en"] body#about-attr-page
  #container-3494b00441 #about-cards-2 .treatment.banner-content,
  html[lang^="fr"] body#about-attr-page
  #container-3494b00441 #about-cards-2 .treatment.banner-content {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;

    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;

    margin: 0 !important;
    padding-top: clamp(80px, 0vw, 150px) !important;
    padding-right: clamp(24px, 8vw, 42px) !important;
    padding-bottom: 24px !important;
    padding-left: clamp(24px, 8vw, 42px) !important;

    transform: none !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  /* Remove inherited positioning that can push the mobile copy down. */
  html[lang^="en"] body#about-attr-page
  #container-3494b00441 #about-cards-2 .treatment.banner-content > *,
  html[lang^="fr"] body#about-attr-page
  #container-3494b00441 #about-cards-2 .treatment.banner-content > * {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* Slightly tighter copy spacing on the narrowest devices. */
@media screen and (max-width: 374px) {
  html[lang^="en"] body#about-attr-page
  #container-3494b00441 #about-cards-2 .treatment.banner-content,
  html[lang^="fr"] body#about-attr-page
  #container-3494b00441 #about-cards-2 .treatment.banner-content {
    padding-top: 112px !important;
    padding-right: 22px !important;
    padding-bottom: 20px !important;
    padding-left: 22px !important;
  }
}

/* ================= END DEFINITIVE MOBILE HERO FIX ================= */

/* ========================================================================
   FINAL FR DESKTOP HERO — TEXT CLEAR OF FIXED HEADER
   Added 31 JUL 2026

   French About ATTR page only. The fixed desktop navigation overlaps the
   upper part of the hero, so the authored eyebrow and H1 are moved further
   down inside the existing 340px banner. Mobile rules remain unchanged.
   Keep this block at the absolute end of the stylesheet.
   ======================================================================== */

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

  html[lang^="fr"] body#about-attr-page
  #container-3494b00441 #about-cards-2 .treatment.banner-content {
    position: relative !important;
    inset: auto !important;

    display: block !important;
    width: 100% !important;
    max-width: 1265px !important;
    height: 100% !important;
    min-height: 0 !important;

    margin: 0 auto !important;
    padding-top: 104px !important;
    padding-right: 30px !important;
    padding-bottom: 24px !important;
    padding-left: 30px !important;

    transform: none !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  /* Remove older offsets from the two authored text elements. */
  html[lang^="fr"] body#about-attr-page
  #container-3494b00441 #about-cards-2 .treatment.banner-content .subheading-banner,
  html[lang^="fr"] body#about-attr-page
  #container-3494b00441 #about-cards-2 .treatment.banner-content h1 {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    margin-top: 0 !important;
    transform: none !important;
  }

  html[lang^="fr"] body#about-attr-page
  #container-3494b00441 #about-cards-2 .treatment.banner-content .subheading-banner {
    padding-top: 0 !important;
    margin-bottom: 12px !important;
  }
}

@media only screen and (min-width: 320px) and (max-width: 480px) {
    #about-attr .banner-content {
        padding-top: 0 !important;
        max-width: 100% !important;
        margin-left: 0 !important;
    }
}

@media only screen and (max-width: 991px) {
    #about-attr .banner-content {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-top: 0 !important;
        width: 100% !important;
    }
}

@media only screen and (max-width: 991px) {
  body#about-attr-page #about-cards-2 .treatment.banner-content {
    margin-top: 0 !important;
  }
}

/* ================= END FR DESKTOP HERO HEADER-CLEARANCE FIX ================= */

/* ========================================================================
   FR MOBILE HERO HEIGHT FIX — MATCH EN
   Added 31 JUL 2026

   French About ATTR only. The earlier shared mobile rule forces the FR hero
   to the tall 768 / 930 ratio and stretches the artwork to 100% 100%.
   This final override keeps EN unchanged and gives FR the same shorter
   mobile composition seen on the working EN page.
   ======================================================================== */

@media only screen and (max-width: 991px) {
  html[lang^="fr"] body#about-attr-page
  #about-cards-2 .treatment-diagnosis-banner {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    /* Match the working EN mobile hero height. */
    aspect-ratio: 768 / 640 !important;

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

    background-image: url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/internal_sky-header-mobile.jpg") !important;
    background-repeat: no-repeat !important;
    background-position: center top !important;
    background-size: cover !important;

    box-sizing: border-box !important;
    overflow: hidden !important;
  }
}

/* ================= END FR MOBILE HERO HEIGHT FIX ================= */

/* ========================================================================
   AT THE SOURCE DIAGRAM — DESKTOP SPACING FIX
   Added 04 AUG 2026

   Keeps the five stages in one row and adds consistent spacing around the
   four connecting arrows so the images and text do not appear crowded.
   Mobile and tablet layouts remain unchanged.
   ======================================================================== */

@media screen and (min-width: 992px) {
  #about-attr-page #about-cards-1 .diagnosis-cards-items {
    display: grid !important;
    grid-template-columns:
      minmax(0, 1fr) 28px
      minmax(0, 1fr) 28px
      minmax(0, 1fr) 28px
      minmax(0, 1fr) 28px
      minmax(0, 1fr) !important;
    column-gap: 10px !important;
    row-gap: 0 !important;
    align-items: start !important;
    justify-content: stretch !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  #about-attr-page #about-cards-1 .steps-card {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    text-align: center !important;
  }

  #about-attr-page #about-cards-1 .steps-card-icon {
    display: grid !important;
    grid-template-rows: 135px minmax(64px, auto) !important;
    align-items: end !important;
    justify-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  #about-attr-page #about-cards-1 .steps-card-icon > img.steps-icon {
    grid-row: 1 !important;
    display: block !important;
    align-self: center !important;
    justify-self: center !important;
    max-width: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #about-attr-page #about-cards-1 .steps-title {
    grid-row: 2 !important;
    align-self: start !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 4px !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  #about-attr-page
    #about-cards-1
    .diagnosis-cards-items
    > .alt-right-arrow {
    display: block !important;
    flex: none !important;
    width: 28px !important;
    max-width: 28px !important;
    height: auto !important;
    margin: 54px auto 0 !important;
    justify-self: center !important;
    align-self: start !important;
    object-fit: contain !important;
    transform: none !important;
  }

  #about-attr-page #about-cards-1 .arrow-down-card {
    display: none !important;
  }
}

/* ================= END AT THE SOURCE DESKTOP SPACING FIX ================= */

/* ========================================================================
   FINAL OVERRIDE — AT THE SOURCE DESKTOP SPACING
   Uses the same/highest selector specificity as the existing desktop rules.
   Keep this block at the absolute end of the CSS file.
   ======================================================================== */
@media screen and (min-width: 992px) {
  html[lang^="en"] body#about-attr-page
  #container-2a2a9d56d1
  #about-cards-1
  .diagnosis-cards-items {
    display: grid !important;
    grid-template-columns:
      minmax(0, 1fr) 28px
      minmax(0, 1fr) 28px
      minmax(0, 1fr) 28px
      minmax(0, 1fr) 28px
      minmax(0, 1fr) !important;
    column-gap: 12px !important;
    row-gap: 0 !important;
    align-items: start !important;
    justify-content: stretch !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 8px !important;
    box-sizing: border-box !important;
  }

  html[lang^="en"] body#about-attr-page
  #container-2a2a9d56d1
  #about-cards-1
  .diagnosis-cards-items > .steps-card {
    display: block !important;
    flex: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    text-align: center !important;
  }

  html[lang^="en"] body#about-attr-page
  #container-2a2a9d56d1
  #about-cards-1
  .diagnosis-cards-items > .steps-card .steps-card-icon {
    display: grid !important;
    grid-template-rows: 135px minmax(64px, auto) !important;
    align-items: end !important;
    justify-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  html[lang^="en"] body#about-attr-page
  #container-2a2a9d56d1
  #about-cards-1
  .diagnosis-cards-items > .steps-card img.steps-icon {
    grid-row: 1 !important;
    display: block !important;
    align-self: end !important;
    justify-self: center !important;
    width: auto !important;
    height: auto !important;
    max-width: 135px !important;
    max-height: 122px !important;
    margin: 0 auto 8px !important;
    object-fit: contain !important;
    object-position: center bottom !important;
    transform: none !important;
  }

  html[lang^="en"] body#about-attr-page
  #container-2a2a9d56d1
  #about-cards-1
  .diagnosis-cards-items > .steps-card:last-child img.steps-icon {
    max-width: 58px !important;
  }

  html[lang^="en"] body#about-attr-page
  #container-2a2a9d56d1
  #about-cards-1
  .diagnosis-cards-items > .steps-card .steps-title {
    grid-row: 2 !important;
    align-self: start !important;
    width: 100% !important;
    max-width: 160px !important;
    min-height: 58px !important;
    margin: 0 auto !important;
    padding: 0 3px !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }

  html[lang^="en"] body#about-attr-page
  #container-2a2a9d56d1
  #about-cards-1
  .diagnosis-cards-items > img.alt-right-arrow {
    display: block !important;
    flex: none !important;
    align-self: start !important;
    justify-self: center !important;
    width: 28px !important;
    max-width: 28px !important;
    height: auto !important;
    margin: 55px auto 0 !important;
    object-fit: contain !important;
    transform: none !important;
  }

  html[lang^="en"] body#about-attr-page
  #container-2a2a9d56d1
  #about-cards-1
  .arrow-down-card {
    display: none !important;
  }
}

/* =========================================================
   FINAL FR MOBILE ARROW FIX
   Smaller arrows with proper spacing between every stage
   ========================================================= */

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

  html[lang^="fr"] body#about-attr-page
  #container-f1c43da3c1
  #about-cards-1
  .diagnosis-cards-items {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    overflow: visible !important;
  }

  html[lang^="fr"] body#about-attr-page
  #container-f1c43da3c1
  #about-cards-1
  .steps-card {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: 430px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    transform: none !important;
  }

  html[lang^="fr"] body#about-attr-page
  #container-f1c43da3c1
  #about-cards-1
  .steps-card-icon {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  /* Hide the desktop horizontal arrows */
  html[lang^="fr"] body#about-attr-page
  #container-f1c43da3c1
  #about-cards-1
  .diagnosis-cards-items > img.alt-right-arrow {
    display: none !important;
  }

  /* Proper connector space between stages */
  html[lang^="fr"] body#about-attr-page
  #container-f1c43da3c1
  #about-cards-1
  .diagnosis-cards-items > .arrow-down-card {
    position: relative !important;
    display: flex !important;
    flex: 0 0 68px !important;
    align-items: center !important;
    justify-content: center !important;

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

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

    overflow: visible !important;
    box-sizing: border-box !important;
    transform: none !important;
  }

  /* Smaller complete downward arrow */
  html[lang^="fr"] body#about-attr-page
  #container-f1c43da3c1
  #about-cards-1
  .diagnosis-cards-items > .arrow-down-card > img {
    position: static !important;
    display: block !important;

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

    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;

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

    object-fit: contain !important;
    object-position: center !important;
    transform: none !important;
  }

  /* Prevent the next image from touching the arrow */
  html[lang^="fr"] body#about-attr-page
  #container-f1c43da3c1
  #about-cards-1
  .arrow-down-card + .steps-card {
    margin-top: 8px !important;
  }

  /* Reset image positioning without changing their intended size */
  html[lang^="fr"] body#about-attr-page
  #container-f1c43da3c1
  #about-cards-1
  .steps-card img.steps-icon {
    position: static !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    transform: none !important;
  }

  /* Extra clearance for the final body image */
  html[lang^="fr"] body#about-attr-page
  #container-f1c43da3c1
  #about-cards-1
  img.ab-icon-5 {
    margin-top: 6px !important;
  }
}

/* FR mobile only — centre the first nerve icon */
@media screen and (max-width: 990px) {
  html[lang^="fr"] body#about-attr-page
  #about-cards-2
  .diagnosis-cards-items
  > .steps-card:first-child
  .steps-card-icon
  > img.steps-icon {
    position: relative !important;
    left: 28px !important;
    transform: none !important;
  }
}

/* FR mobile only — move the first card text with the nerve icon */
@media screen and (max-width: 990px) {
  html[lang^="fr"] body#about-attr-page
  #about-cards-2
  .diagnosis-cards-items
  > .steps-card:first-child
  .steps-title {
    position: relative !important;
    left: 45px !important;
    transform: none !important;
  }
}


#about-attr-page #header .attr-header-nav > li > a {
/*  font-family: "Kanit", sans-serif !important;
  font-weight: 100 !important;*/
}

/* =========================================================
   FINAL MOBILE GLOBAL MENU / CTA STACKING FIX — V2
   Keeps the footer CTA buttons below the dark mobile menu + overlay.
   Keep this block at the absolute end of about-attr.css.
   ========================================================= */
@media screen and (max-width: 990px) {

  /* Do not let footer CTA elements create a layer above the menu overlay. */
  html[lang^="en"] body#about-attr-page #attr-cta-section,
  html[lang^="fr"] body#about-attr-page #attr-cta-section,
  html[lang^="en"] body#about-attr-page #attr-cta-section > .attr-cta-card,
  html[lang^="fr"] body#about-attr-page #attr-cta-section > .attr-cta-card {
    z-index: auto !important;
  }

  html[lang^="en"] body#about-attr-page #attr-cta-section .attr-cta-btn-wrap,
  html[lang^="fr"] body#about-attr-page #attr-cta-section .attr-cta-btn-wrap,
  html[lang^="en"] body#about-attr-page #attr-cta-section .attr-cta-btn,
  html[lang^="fr"] body#about-attr-page #attr-cta-section .attr-cta-btn {
    z-index: 0 !important;
  }

  /* The dark page overlay must sit above all normal page content. */
  body#about-attr-page #overlay {
    z-index: 999990 !important;
  }

  /* The actual mobile navigation stays above the dark overlay. */
  body#about-attr-page #header,
  body#about-attr-page #mobile-menu,
  body#about-attr-page .header-main-menu,
  body#about-attr-page .nav-bar.attr-header-nav {
   
  }
}

/* Mobile hotfix: force only "À propos de l'ATTR" (nth-child 2) to show
   the active underline in the mobile menu on this page — desktop is
   untouched. */

#about-attr-page #mobile-menu .header-main-menu .menu > ul > li:nth-child(1) a,
#about-attr-page #mobile-menu .header-main-menu .menu > ul > li:nth-child(1) a.active,
#about-attr-page #mobile-menu .header-main-menu .menu > ul > li:nth-child(3) a,
#about-attr-page #mobile-menu .header-main-menu .menu > ul > li:nth-child(3) a.active,
#about-attr-page #mobile-menu .header-main-menu .menu > ul > li:nth-child(4) a,
#about-attr-page #mobile-menu .header-main-menu .menu > ul > li:nth-child(4) a.active {
  text-decoration: none !important;
  border-bottom: 0px none !important;
  color: #ffffff !important;
}

#about-attr-page #mobile-menu .header-main-menu .menu > ul > li:nth-child(2) a {
  text-decoration: none !important;
  border-bottom: 2px solid #ff53ff !important;
  color: #ffffff !important;
}