/*css here */
/*banner css*/

.footer-strip span.no-bold {
  font-family: "Kanit";
}

.footer-strip span.no-breaking {
  white-space: nowrap;
}
.banner-block {
max-width: 1310px;
width: 1310px;
margin: 0px auto;
padding: 0 0 0px 75px;
}

.banner-txt1 {
font-family: "Kanit-SemiBold";
font-size: 16px;
color: #FFFFFF;
margin-bottom: 18px;
text-transform: uppercase;
margin-top: 20px;
/*font-family: "Kanit-Medium";
font-size: 18px;*/
}

.banner-txt2 {
font-family: "Kanit-Bold";
font-size: 45px;
color: #FFFFFF;
padding-bottom: 10px;
max-width: 440px;
}

.banner-txt2 span {
color: #e962e9;
}

.banner-txt3 {
font-family: "Kanit-Medium";
font-size: 18px;
color: #FFFFFF;
padding-top: 10px;
width: 420px;
line-height: 21px;
}

.attrwt {
margin: auto;
max-width: 1153px;
font-family: "Kanit-Regular";
font-size: 14px;/*font-size: 16px;*/
padding-bottom: 41px;
}

.scroll {
font-family: "Kanit";
font-size: 16px;
color: #FFFFFF;
margin-bottom: -20px;
text-transform: uppercase;
text-align: center;
position: relative;
top: -50px;
}

.scroll a {
color: #FFF;
padding-right: 80px;
}

.scroll a::after {
content: url(/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop/icon.svg);
position: relative;
top: 6px;
left: 15px;
}

.mob-line {
display: none;
}
/*css section1 */
.main-bg {
background-color: #FAFAFA;
z-index: -2;
position: relative;
padding-bottom: 25px;/*padding-bottom: 80px;*/
}

.attrsymptoms-sec1 {
text-align: center;
padding-top: 53px;
max-width: 1250px;
margin: auto;
padding-left: 238px;
}

.attrsymptoms-sec1 .text2 p {
    font-size: 20px;
    color: #00215F;
    font-family: "Kanit-Medium";
    padding-bottom: 15px;
    line-height: 40px;
    margin: auto;
    text-align: center;
}



.attrsymptoms-sec1 p span{
    color:#E34AEE;
    font-family: "Kanit-SemiBold";
}
.attrsymptoms-sec1 img {
width: 376px;
  /*height: 22px;*/
margin-bottom: 35px;
}

.attrsymptoms-block {
background-color: white;
border-radius: 30px 30px 30px 0;
max-width: 1153px;
height: 838px;
margin: auto;
display: flex;
padding: 22px 10px;
text-align: center;
justify-content: center;
position: relative;
}

.attrsymptoms-block::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 30px 30px 30px 0;
border:1px solid #E34AEE;
filter: blur(0.1px);
/*background: transparent linear-gradient(123deg, #F599FC 0%, #7D76FE 30%, #556AFF 49%, #619EFD 79%, #75F2FB 100%) 0% 0% no-repeat padding-box;*/
/*z-index: -1;
filter: blur(7px);*/
}

.attrsymptoms-col {
width: 282px;
border-right: 2px solid transparent;
border-image: url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop/Rectangle-10899.png");
border-image-slice: 1;
}

.no-border {
border-right: none!important;
}

.attrsub-block {
width: 182px;
text-align: center;
display: inline-block;
padding: 0 0px;
}

.desktop-only {
display: block;
}

.mobile-only {
display: none;
}

.block-title {
font-size: 24px;
line-height: 22px;
color: #00215F;
font-family: "Kanit-Medium";
margin-bottom: 30px;
padding-top: 13px;
}

#attr-symptoms .icon-text {
font-size: 18px;
line-height: 20px;
font-family: "Kanit" !important;
color: #151515;
padding: 8px 0 25px 0;
}

/*.bottom-blocktxt {
display: none;
font-size: 16px;
line-height: 20px;
font-family: 'Kanit' !important;
color: #151515;
visibility: hidden;
}*/
#attr-symptoms .bottom-blocktxt {
font-size: 18px;
line-height: 20px;
font-family: "Kanit" !important;
color: #00215F;
max-width: 1001px;
margin: auto;
margin-top: 19px;
/*margin-left: 21%;
    margin-top: 1em;*/
}

.small-icons {
border: 1px solid #000;
}
/* section two css */
.main-bg2 {
background-color: #fff;
text-align: center;
padding: 65px 0 25px;
}

.icon-border {
border: none;
}

.title-blue {
font-size: 30px;
line-height: 34px;
font-family: "Kanit-Bold";
text-align: center;
color: #00215F;
padding: 0 20px 5px;
max-width: 1160px;
margin: 0 auto;
padding-bottom: 15px;
}
#attr-symptoms .title-blue{
    font-family: "Kanit-SemiBold";
}
#attr-symptoms .title-blue span{
    color: #FF53FF;
}
#attr-symptoms .attrsymptoms-sec1 p sup {
    font-family: "Kanit-Medium";
    font-size: 60%;
}
#attr-symptoms .main-bg2 .title-txt sup {
    font-size: 60%;
    font-family: "Kanit-Regular";
}
.title-txt {
font-family: "Kanit";
font-size: 18px;
line-height: 16px;
padding: 0 20px 16px;
max-width: 980px;
width: 100%;
margin: 0 auto;
}

.line-img {
width: 376px;
  /*height: 19px;*/
margin-bottom: 40px;
}

.patient-txt {
font-size: 20px;
color: #00215F;
margin-bottom: 24px;
font-family: "Kanit-Medium";
padding: 0 10px;
}

.round-img-block {
width: 707px;
height: 287px;/*height: 245px;*/
margin: 0 0px 25px 0;
}

.m-right {
  /*margin-right: 130px;*/
;
}

.sec2-txt {
font-size: 20px;
line-height: 24px;
color: #000000;
font-family: "Kanit-Medium";
padding: 0 20px;
padding-bottom: 10px;
}

.sec2-span {
font-size: 15px;
line-height: 20px;
color: #151515;
font-family: "Kanit";
padding: 0 20px;
}

.d-flex {
width: 1073px;
margin: 0 auto;
padding: 0 20px;
padding-bottom: 10px;
}

/*css section3 */
.black-strip {
height: 56px;
background: #000000;
position: relative;
z-index: -2;
}
















.footer-block {
margin-top: 55px;
text-align: center;
  padding: 0 15px;
}

.rec-txt {
font-size: 40px;
line-height: 45px;
color: #FFFFFF;
font-family: "Kanit-Bold";
padding-bottom: 55px;
}

.rec-txt2 {
font-size: 20px;
color: #FFFFFF;
font-family: "Kanit-Medium";
padding-bottom: 25px;
display: none;
}

.attr-btn {
font-size: 16px;
color: #00215F;
font-family: "Kanit-Medium";
background: linear-gradient(to right, #FEFEFE 0%, #FCF6FE 18%, #EBF1FE 50%, #DFF5FE 87%, #E2FEFE 90%, #FEFEFE) padding-box, linear-gradient(to right, #F599FC 0%, #556AFF 50%, #75F2FB 100%) border-box;
border: 2px solid transparent;
border-radius: 21px;
padding: 8px 20px;
width: 202px;
align-items: center;
display: inline-block;
}

.footer-strip {
background: #000;
color: #fff;
font-family: "Kanit";
font-size: 14px;
line-height: 20px;
}

.footer-strip p {
    max-width: fit-content;
  width: 100%;
  margin: 0px auto;
  padding: 0 7px 0px 0px;
  padding-top: 20px;
  margin: 0px auto;
  max-width: 1158px;
}

.footer-strip span {
font-family: "Kanit-Bold";
}

.display-mob {
display: none;
margin-bottom: 20px;
}

.img-align {
width: 50px;
}

.align-img-fix {
width: 75px;
}

.fix-img-align {
width: 75px;
}

 
 
#attr-symptoms .rec-txt {
  font-family: "Kanit-Regular";
  font-size: 26px;
  line-height: 28px;
  width: 100%;
  margin: 40px auto;
  padding-bottom: 0;
}
#attr-symptoms .footer-block {
  margin-top: 0;
}
#attr-symptoms .attr-btn {
  max-width: 205px;
  margin: auto;
  background: #E2FCFD;
  border-radius: 19px;
  border: 1px solid #E34AEE;
  position: static;
  text-transform: uppercase;
} 

.icon21{
 width:84px;   
}
.icon22{
 width:100px;   
}
.icon23{
 width:72px;   
}
.icon24{
 width:75px;   
}
.icon25{
 width:75px;   
}
#attr-symptoms .only-mob{
    display: contents;
}

/*Media Queries CSS*/



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

/*#attr-symptoms .only-mob{
    display:block;
}*/
#attr-symptoms .bottom-blocktxt {
  margin-left: 2%;
  margin-top: 1em;
}
.attrsymptoms-block::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 30px 30px 30px 0;
    border: 1px solid transparent;
    filter: blur(7px);
    background: transparent linear-gradient(123deg, #F599FC 0%, #7D76FE 30%, #556AFF 49%, #619EFD 79%, #75F2FB 100%) 0% 0% no-repeat padding-box;
    z-index: -1;
}
  
.man {
  max-width: 60%;
  display: block;
  margin: 0 auto;
  margin-top: 30px;
}

.sec2-span br {
  display: none;
}

img[src="/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop/hypotension.png"] {
  width: 80px;
  position: relative;
  top: 21px;
}

.mobile-align {
      /*border: 1px solid red;*/
  height: 85px;
}

.desktop-only {
display:none;
  ;
}

p.scroll.attr-sm {
  display: none;
  padding-right: 0px;
}

.scroll.mobile-only a {
  color: #FFF;
  padding-right: 0px;
      position: relative;
      top: 68vh;
  /*top: 26px;*/

}

.mobile-only {
  display: block;
}

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

.attrwt {
  padding-left: 25px;
}
  
  /*.banner-img{*/
  /*    margin-top: 15px;*/
  /*}*/
.banner-img {
  background-image: url(/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/starry%20background.png);
  /* background-image: url(/content/dam/intelligentcontent/unbranded/attr-dsa/en/desktop/symptoms-bgmobile.png); */
  background-repeat: no-repeat;
      background-size: 100% 100%;
  width: 100%;
  min-height: 1110px;/*min-height: 990px;*/
  display: block;
  margin-top: 0px;
}

.banner-txt1 {
  font-size: 14px;
}

.banner-block {
  width: auto;
  margin: 0px 18px;
  padding: 95px 0 0;
}

.banner-txt2 {
  font-size: 30px;
  max-width: 343px;
}

.banner-txt3 {
  width: auto;
}

/*.scroll {
  display: none;
}*/

.mob-line {
  /* margin: 10px -8px; */
  display: none;
  margin: 10px 0 0 -10px;
  /* padding-right: 10px; */
  width: 105%;
}

.mob-line img {
  width: 100%;
}

.attrsymptoms-sec1 {
  padding-top: 38px;
}

.attrsymptoms-sec1 p {
  font-size: 25px;
  padding: 0 20px 16px;
  line-height:29px;
}

.attrsymptoms-sec1 img {
  width: 273px;
      /*height:18px;*/
  margin-bottom: 32px;
}

.attrsymptoms-block {
  width: auto;
  height: auto;
  margin: 0 20px;
  display: block;
  padding: 8px 0px 0px;
}
  /*.attrsymptoms-block::before{*/
  /*     background: transparent;*/
  /*}*/
.icon-border {
  width: 85%;
  border-bottom: 2px solid transparent;
  border-image: url(/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop/line-attr.svg);
  border-image-slice: 1;
  height: 20px;
  text-align: center;
  margin: 0 auto;
}

.attrsymptoms-col {
  border: none;
  width: auto;
      /*border-bottom: 2px solid transparent;*/
      /*border-image: url(/content/dam/intelligentcontent/unbranded/attr-dsa/en/desktop/line-attr.svg);*/
      /*border-image-slice: 1;*/
      /*margin-bottom: 30px;*/
  ;
}

.block-title {
  font-size: 24px;
  margin: 30px 24px 24px;
  padding-top: 0;
}

.responsive-icon-box {
      /*border: 1px solid red;*/
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
}

.main-bg {
  padding-bottom: 0px;/*padding-bottom: 51px;*/
  
}

.attrsub-block {
  display: inline-block;
      /*border: 1px solid;*/
  width: 153px;
  padding: 0 5px;
}

.icon-text {
  font-size: 18px;
}
#attr-symptoms sup{
        font-family: "Kanit-Medium";
}
.bottom-blocktxt {
  padding: 20px 15px 25px 21px;/*padding: 20px 15px 50px 21px;*/
  font-size: 16px;
}

.main-bg2 {
  padding: 28px 0;
}

.title-blue {
  font-size: 25px;
  padding: 0 30px 5px;
  width: 100%;
  line-height:29px;
}

.title-txt {
  padding: 0 18px 16px;
  font-size: 16px;
  width: 100%;
  letter-spacing: -0.03px;
}

.line-img {
  width: 300px;
  margin-bottom: 20px;
}

.m-right {
  margin-right: 23px;
}



.patient-txt {
  margin-bottom: 35px;
}

.round-img-block {
  width: 335px;
  height: 165px;
      /* width: 100%; */
  margin: 0px;
  display: none;
}

.display-mob {
  display: block;
  margin-bottom: 20px;
}

.mobileview-img {
  width: 293.59px;
  height: 287px;
  max-width:100%;
  max-height:100%;
  /*width: 157px;
  height: 170px;*/
  margin-right: 23px;
}

.mr-0 {
  margin-right: 0px !important;
  margin-top: 45px;
}


.sec2-txt {
  font-size: 16px;
  line-height: 20px;
}

.sec2-span {
  font-size: 16px;
  padding: 0 18px;
  letter-spacing: -0.2px;
  text-align: center;
  line-height: 18px;
}







.rec-txt {
  font-size: 38px;
  padding-bottom: 30px;
}

.footer-strip {
  padding: 15px;
}

.d-flex {
  width: 100%;
  margin: 0 auto;
  padding: 0 10px;
}

.footer-strip p {
  width: 100%;
  padding: 0;
}
.about-attr-reference a, .footer-strip a, .diagnosis-footer a{
    color:inherit !important;
    font-size:inherit !important;
}

.icon1 {
  width: 37px;
  height: 60px;
}

.icon2 {
  width: 68px;
  height: 46px;
  margin-top: 15px;
}

.icon3 {
  width: 63px;
  height: 60px;
}

.icon4 {
  width: 43px;
  height: 63px;
}

.icon5 {
  width: 45px;
  height: 65px;
}

.icon6 {
  width: 47px;
  height: 60px;
}

.icon7 {
  width: 32px;
  height: 57px;
}

.icon8 {
  width: 31px;
  height: 58px;
}

.icon9 {
  width: 61px;
  height: 52px;
}

.icon10 {
  width: 48px;
  height: 60px;
}

.icon11 {
  width: 62px;
  height: 49px;
}

.icon12 {
  width: 33px;
  height: 65px;
  margin-top: 8px;
}

.icon13 {
  width: 59px;
  height: 65px;
}
}

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

}

@media screen and (max-width: 480px) {
.man {
  max-width: 87%;
}
}
@media screen and (max-width: 392px){
    .scroll.mobile-only a{
        top: 82vh;
    }
}
@media screen and (max-width: 336px) {
.mr-0 {
  margin-right: 23px !important;
}
}

@media screen and (max-width: 290px) {
.mr-0 {
  margin-right: 0px !important;
}

.mobileview-img {
  margin-right: 0px;
}
}

@media only screen and (min-width: 320px) and (max-width: 375px) {
.banner-txt1 {
  font-size: 12px;
  margin-top: 0px;
}

#about-attr-page .banner-content h1 {
  font-size: 24px;
  line-height: 120%;
}
}

@media only screen and (min-width: 700px) and (max-width: 880px) {
.img-align.hear-beat {
  width: 54%;
  height: 48px;
}
}

@media only screen and (min-width: 1439px) and (max-width: 1650px) {
.banner-img {
  min-height: 700px;
  /*margin-top: 15px;*/
}
}

@media screen and (min-width: 2500px) {
.banner-img {
  min-height: 1162px;
  /*margin-top: 22px;*/
}
}

@media only screen and (min-width: 1100px) and (max-width: 1350px) {
.footer-strip p {
  padding: 0px 10px 0px 20px;
}
}

@media screen and (min-width: 992px) {
#page-1a38cc0b2e .banner-img {
  margin-top: 0px;
  min-height: 770px;
}

.banner-img {
  background-image: url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/banner.png");
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
  min-height: 764px;/*min-height: 730px;*/
  display: flex;
  align-items: center;
  z-index: -2;
  position: relative;
  top: 0px;
  /*margin-top: -57px;*/
}
  #attr-symptoms #header {
      background: transparent;
      /*position: relative;*/
      z-index: 9;
  }
}
@media (min-width:1500px){
.banner-img {
  /*background-size: 100% 100%;*/
    background-position: center center;/*background-position: center bottom;*/
    background-size: cover;
    width: 100%;
    height: 100%;
    min-height:1200px;
    /*margin-top: 26px;*/
}
}

@media (min-width: 992px) and (max-width: 1330px) {
.attr-symptoms .banner-img {
  background-position: 59%;
}

.attr-symptoms .banner-block {
  padding: 0 0 0px 34px;
}
}

@media (min-width: 992px) and (max-width: 1200px) {
#attr-symptoms .footer-strip p {
  margin: 0 15px;
  max-width: 97%;
}
#attr-symptoms .attrwt {
  margin: 0 15px;
}
#attr-symptoms .attrsymptoms-block {
  margin: 0 15px;
}
#attr-symptoms .banner-img {
  background-position: 64%;
}
#attr-symptoms .banner-block {
  padding: 0 0 0px 25px;
}
}
@media ( max-width: 767px){
/*#attr-symptoms .mobile-only {
     margin-top: 520px;
}*/
}
@media ( max-width: 374px){
#attr-symptoms .icon-border{
  width: 245px;
}
}
@media ( max-width: 767px){
#attr-symptoms .footer-container {
  padding-bottom: 30px;
}
}

@media only screen 
  and (device-width : 667px) 
  and (device-height : 375px) and (orientation: landscape)
{
.banner-img
{
      min-height: 1600px;
}
.scroll.mobile-only a
{
  top: 626px;
}
}

@media only screen 
  and (device-width : 664px) 
  and (device-height : 390px) and (orientation: landscape)
{
.banner-img
{
      min-height: 1600px;
}
.scroll.mobile-only a
{
  top: 626px;
}
}

/*new section*/



#attr-symptoms-section {
  background-color: #FAFAFA;
  width: 100%;
}

/* 2-column grid: sidebar + content */
#attr-symptoms #attr-symptoms-layout {
  max-width: 1250px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 224px 1001px;
  column-gap: 14px;
}

#attr-symptoms #attr-symptoms-layout > div:has(#attr-otp-nav) {
  grid-column: 1;
  grid-row: 1 / span 2;
}

#attr-symptoms #attr-symptoms-layout > div:has(#attr-otp-heading) {
  grid-column: 2;
  grid-row: 1;
}

#attr-symptoms #attr-symptoms-layout > div:has(#attr-body-figure) {
  grid-column: 2;
  grid-row: 2;
}

/* ==========================
   ON THIS PAGE SIDEBAR
========================== */

#attr-symptoms #attr-otp-nav {
    width: 224px;
    height: 304px;
    background-color: #E9EBF2;
    border-radius: 0 0 25px 0;
    box-sizing: border-box;

    /* !important is required because .cmp-text has padding: 0 !important */
    padding: 36px 17px 30px 29px !important;

    overflow: hidden;
}

#attr-symptoms #attr-otp-nav .attr-onthispage {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

/* ON THIS PAGE heading */
#attr-symptoms #attr-otp-nav .attr-onthispage__title {
    margin: 0 0 16px !important;
    padding: 0 !important;

    color: #00215F;
    font-family: "Kanit-SemiBold";
    font-size: 21px;
    line-height: 20px;
    font-weight: 600;
    text-align: left;
    text-transform: uppercase;
}

/* All sidebar links */
#attr-symptoms #attr-otp-nav .attr-onthispage__link {
    display: block;
    width: fit-content;
    max-width: 100%;

    margin: 0 0 16px !important;
    padding: 0 0 3px !important;

    color: #00215F;
    font-family: "Kanit-Regular";
    font-size: 18px;
    line-height: 18px;

    text-align: left;
    text-decoration: none;
    box-sizing: border-box;
}

/* Pink underline for active link */
#attr-symptoms #attr-otp-nav .attr-onthispage__link.is-active {
    border-bottom: 3px solid #E34AEE;
}

/* Remove bottom space from final link */
#attr-symptoms #attr-otp-nav .attr-onthispage__link:last-child {
    margin-bottom: 0 !important;
}

/* =====================================
   RECOGNIZING RED FLAGS HEADING SECTION
===================================== */

#attr-symptoms #attr-otp-heading {
    width: 100%;
    max-width: 1001px;
    min-height: 178px;
    margin: 0;
    padding: 43px 30px 24px !important;
    box-sizing: border-box;
    text-align: center;
    background-color: #FAFAFA;
}

#attr-symptoms #attr-otp-heading .attr-section-heading {
    width: 100%;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
}

/* Recognizing red flags */
#attr-symptoms #attr-otp-heading .attr-section-heading__title {
    margin: 0 0 12px !important;
    padding: 0 !important;
    color: #00215F;
    font-family: "Kanit-SemiBold";
    font-size: 26px;
    line-height: 31px;
    font-weight: 600;
    text-align: center;
}

/* Multi-systemic symptoms subtitle */
#attr-symptoms #attr-otp-heading .attr-section-heading__subtitle {
    margin: 0 0 12px !important;
    padding: 0 !important;
    color: #00215F;
    font-family: "Kanit-SemiBold";
    font-size: 17px;
    line-height: 21px;
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
}

/* Description — restricted width to produce three lines */
#attr-symptoms #attr-otp-heading .attr-section-heading__body {
    width: 100%;
    max-width: 720px;
    margin: 0 auto !important;
    padding: 0 !important;
    color: #151515;
    font-family: "Kanit-Regular";
    font-size: 16px;
    line-height: 18px;
    font-weight: 400;
    text-align: center;
}

/* Bold text */
#attr-symptoms #attr-otp-heading .attr-section-heading__body b,
#attr-symptoms #attr-otp-heading .attr-section-heading__body strong {
    font-family: "Kanit-SemiBold";
    font-weight: 600;
}

/* Underlined text */
#attr-symptoms #attr-otp-heading .attr-section-heading__body u {
    text-underline-offset: 2px;
}

/* Superscript references */
#attr-symptoms #attr-otp-heading sup {
    font-size: 60%;
    line-height: 0;
    position: relative;
    top: -0.35em;
}

.attrsymptoms-sec2 {
    text-align: center;
    padding-top: 53px;
    max-width: 1250px;
    padding-left: 238px;
    margin: auto;
	padding-bottom:30px;
}

#attr-symptoms .attrsymptoms-sec2 p {
    font-size: 20px;
    color: #00215F;
    font-family: "Kanit-Medium";
    padding-bottom: 30px;
    line-height: 40px;
    max-width: 1001px !important;
    width: 100% !important;
    margin: 0 auto !important;
    text-align: center !important;
    padding-left: 0 !important;
    box-sizing: border-box !important;
}

.block {
    max-width: 1250px;
    margin: auto;
    padding-left: 238px;
	padding-bottom:30px;
}

#attr-symptoms .attrsymptoms-sec1 .text4 p {
    font-size: 30px;
    color: #00215F;
    font-family: "Kanit-Medium";
    padding-bottom: 15px;
    line-height: 40px;
    max-width: 1001px !important;
    width: 100% !important;
    margin: 0 auto !important;
    text-align: center !important;
    padding-left: 0 !important;
    box-sizing: border-box !important;
}

.attrsymptoms-sec1 .text5 p {
    font-size: 20px;
    color: #00215F;
    font-family: "Kanit-Medium";
    padding-bottom: 15px;
    line-height: 40px;
    margin: auto;
    text-align: center;
}

/* =========================================================
   MIXED-PHENOTYPE ATTR RED-FLAGS PANEL
   ========================================================= */

#attr-symptoms #attr-body-figure {
  position: relative;
  display: grid !important;

  /* Silhouette | heading/tabs/content */
  grid-template-columns: 220px minmax(0, 1fr);
  grid-template-rows: 50px 46px minmax(258px, 1fr);

  column-gap: 18px;
  row-gap: 14px;

  width: 100%;
  max-width: 1000px;
  min-height: 470px;

  margin: 20px auto;
  padding: 20px 20px 48px;

  box-sizing: border-box;
  overflow: hidden;
  border-radius: 26px;
  color: #ffffff;

  /*
   * Replace only this DAM URL when your background is available.
   * The colour remains as a fallback.
   */
  background:
    url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/Multiple%20Layers%20(2)%20(1).png")
    center center / cover no-repeat,
    #001b45;
}

/* Keep AEM child components above the background */
#attr-symptoms #attr-body-figure > * {
  position: relative;
  z-index: 2;
  min-width: 0;
}

/* Reset direct AEM wrappers */
#attr-symptoms #attr-body-figure > .text,
#attr-symptoms #attr-body-figure > .tabs,
#attr-symptoms #attr-body-figure .cmp-text {
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
}

/* =========================================================
   WATCH-FOR-THESE-SIGNS HEADING
   ========================================================= */

#attr-symptoms #attr-body-figure > .text:has(#attr-panel-heading) {
  grid-column: 2;
  grid-row: 1;

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

  min-height: 50px;
  visibility: visible !important;
  opacity: 1 !important;
}

#attr-symptoms #attr-panel-heading,
#attr-symptoms #attr-panel-heading .attr-redflags-panel {
  display: block !important;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;

  visibility: visible !important;
  opacity: 1 !important;
}

#attr-symptoms #attr-panel-heading .attr-redflags-panel__heading {
  display: block !important;

  width: 100%;
  max-width: 540px;

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

  box-sizing: border-box;
  color: #ffffff !important;

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

  text-align: center;

  visibility: visible !important;
  opacity: 1 !important;
}

#attr-symptoms #attr-panel-heading .attr-redflags-panel__heading sup {
  position: relative;
  top: -0.35em;

  font-size: 60%;
  line-height: 0;
}

/* Disclaimer at the bottom, aligned with the right content area */
#attr-symptoms #attr-panel-heading .attr-redflags-panel__disclaimer {
  position: absolute !important;
  left: 0;
  bottom: -399px;

  width: 100%;
  margin: 0 !important;
  padding: 0 2px !important;

  box-sizing: border-box;
  color: #ffffff !important;

  font-family: "Kanit-Regular", Arial, sans-serif;
  font-size: 13px;
  line-height: 16px;
  text-align: left;
  white-space: nowrap;

  visibility: visible !important;
  opacity: 1 !important;
}

/* =========================================================
   LEFT SILHOUETTE
   ========================================================= */

#attr-symptoms #attr-body-figure > .text:has(#attr-body-image) {
  grid-column: 1;
  grid-row: 1 / 4;

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

  align-self: stretch;
  overflow: hidden;
}

#attr-symptoms #attr-body-image {
  width: 100%;
  height: 100%;
  margin: 0 !important;
  padding: 0 !important;
}

#attr-symptoms #attr-redflags-figure {
  position: relative;

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

  width: 100%;
  height: 100%;
  min-height: 390px;

  margin: 0;
  padding: 0;

  overflow: hidden;
}

/*
 * Natural image ratio is preserved.
 * max-width/max-height prevent oversized source files from overflowing.
 */
#attr-symptoms #attr-body-image .attr-redflags-body__image {
  display: block;

  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 410px;

  margin: 0 auto;

  object-fit: contain;
  object-position: center;
}

/* The labels are already built into the five silhouette images */
#attr-symptoms #attr-redflags-figure .attr-hotspot {
  display: none !important;
}

/* =========================================================
   AEM TABS
   ========================================================= */

#attr-symptoms #attr-body-figure > .tabs {
  grid-column: 2;
  grid-row: 2 / 4;

  display: block !important;

  width: 100%;
  height: 100%;

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

#attr-symptoms #attr-main-tabs {
  display: flex;
  flex-direction: column;

  width: 100%;
  height: 100%;

  margin: 0;
  padding: 0;
}

/* Tab row */
#attr-symptoms #attr-main-tabs .cmp-tabs__tablist {
  display: grid !important;

  grid-template-columns:
    1.05fr
    1.05fr
    1.25fr
    1.35fr
    0.95fr;

  flex: 0 0 46px;

  width: 100%;
  min-height: 46px;

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

  overflow: hidden;
  list-style: none;

  background-color: #ffffff;
  border-radius: 13px;
}

/* Use the real AEM-authored tab names */
#attr-symptoms #attr-main-tabs .cmp-tabs__tab {
  display: flex !important;
  align-items: center;
  justify-content: center;

  min-width: 0;
  min-height: 46px;

  margin: 0 !important;
  padding: 7px 9px !important;

  box-sizing: border-box;
  border: 0 !important;
  border-bottom: 0 !important;
  outline: 0;

  background-color: #ffffff;
  color: #00215f;

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

  text-align: center;
  text-transform: uppercase;
  white-space: normal;

  cursor: pointer;
}

/* Remove previously generated fake tab labels and active underline */
#attr-symptoms #attr-main-tabs .cmp-tabs__tab::before,
#attr-symptoms #attr-main-tabs .cmp-tabs__tab::after {
  content: none !important;
  display: none !important;
  border: 0 !important;
}

#attr-symptoms #attr-main-tabs .cmp-tabs__tab.cmp-tabs__tab--active {
  color: #ffffff !important;
  background-color: #637bff !important;
}

/* =========================================================
   WHITE TAB CONTENT PANEL
   ========================================================= */

#attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel {
  display: none;

  flex: 1 1 auto;

  width: 100%;
  min-height: 258px;

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

  box-sizing: border-box;
  overflow: hidden;

  color: #151515;
  background-color: #ffffff;
  border-radius: 13px;
}

#attr-symptoms
#attr-main-tabs
.cmp-tabs__tabpanel.cmp-tabs__tabpanel--active {
  display: block !important;
}

/* Reset AEM wrappers inside each tab */
#attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel .container,
#attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel .responsivegrid,
#attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel .cmp-container,
#attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel .aem-Grid {
  width: 100%;
  max-width: none;

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

  box-sizing: border-box;
}

/*
 * Expected tab content:
 * Image component followed by Text component.
 */
#attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel .aem-Grid {
  display: grid;
  grid-template-columns: 145px minmax(0, 1fr);
  column-gap: 26px;
  align-items: center;
}

#attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel .image {
  grid-column: 1;
  width: 100%;
}

#attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel .image img,
#attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel .cmp-image__image {
  display: block;

  width: auto;
  height: auto;
  max-width: 145px;
  max-height: 215px;

  margin: 0 auto;

  object-fit: contain;
}

#attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel .text {
  grid-column: 2;
  width: 100%;
  min-width: 0;
}

#attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel h3,
#attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel h4 {
  margin: 0 0 10px !important;

  color: #00215f;
  font-family: "Kanit-SemiBold", Arial, sans-serif;
  font-size: 17px;
  line-height: 21px;
}

#attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel p {
  margin: 0 0 5px !important;

  color: #151515;
  font-family: "Kanit-Regular", Arial, sans-serif;
  font-size: 15px;
  line-height: 20px;
}

#attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel ul {
  margin: 0;
  padding-left: 20px;
}

#attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel li {
  margin-bottom: 4px;

  color: #151515;
  font-family: "Kanit-Regular", Arial, sans-serif;
  font-size: 15px;
  line-height: 20px;
}

/* =========================================================
   TABLET
   ========================================================= */

@media screen and (max-width: 991px) {
  #attr-symptoms #attr-symptoms-layout {
    display: block;
    width: 100%;
    max-width: 100%;
  }

  #attr-symptoms #attr-body-figure {
    grid-template-columns: 190px minmax(0, 1fr);
    grid-template-rows: 54px 46px minmax(250px, 1fr);

    max-width: calc(100% - 30px);
    min-height: 450px;

    padding: 18px 16px 46px;
  }

  #attr-symptoms #attr-panel-heading .attr-redflags-panel__heading {
    max-width: 500px;
    font-size: 14px;
    line-height: 17px;
  }

  #attr-symptoms #attr-body-image .attr-redflags-body__image {
    max-height: 380px;
  }

  #attr-symptoms #attr-main-tabs .cmp-tabs__tablist {
    overflow-x: auto;
    grid-template-columns: repeat(5, minmax(145px, 1fr));
  }

  #attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel .aem-Grid {
    grid-template-columns: 125px minmax(0, 1fr);
    column-gap: 18px;
  }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media screen and (max-width: 700px) {
  #attr-symptoms #attr-body-figure {
    display: flex !important;
    flex-direction: column;

    max-width: calc(100% - 20px);
    min-height: auto;

    padding: 18px 12px 24px;
    border-radius: 18px;
  }

  #attr-symptoms #attr-body-figure > .text:has(#attr-panel-heading) {
    order: 1;
    min-height: auto;
    margin-bottom: 14px !important;
  }

  #attr-symptoms #attr-body-figure > .text:has(#attr-body-image) {
    order: 2;
    min-height: 315px;
    margin-bottom: 16px !important;
  }

  #attr-symptoms #attr-body-figure > .tabs {
    order: 3;
  }

  #attr-symptoms #attr-panel-heading .attr-redflags-panel__heading {
    max-width: 460px;
    font-size: 14px;
    line-height: 17px;
  }

  #attr-symptoms #attr-panel-heading .attr-redflags-panel__disclaimer {
    position: static !important;

    width: 100%;
    margin-top: 18px !important;
    padding: 0 !important;

    text-align: center;
    white-space: normal;
  }

  #attr-symptoms #attr-redflags-figure {
    min-height: 315px;
  }

  #attr-symptoms #attr-body-image .attr-redflags-body__image {
    max-width: 100%;
    max-height: 310px;
  }

  #attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel {
    min-height: 250px;
    padding: 18px 16px !important;
  }

  #attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel .aem-Grid {
    display: block;
  }

  #attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel .image,
  #attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel .text {
    grid-column: auto;
  }

  #attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel .image img,
  #attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel .cmp-image__image {
    max-width: 130px;
    max-height: 170px;
    margin-bottom: 16px;
  }
}

/* =========================================================
   FINAL REFERENCE-MATCH TAB CONTENT OVERRIDES
   Keep this section at the END of the stylesheet.
   ========================================================= */

/* White panel dimensions and alignment */
#attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel {
  display: none;
  width: 100%;
  height: 258px;
  min-height: 258px !important;

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

  box-sizing: border-box;
  overflow: hidden;

  color: #151515;
  background-color: #ffffff;
  border-radius: 13px;
}

#attr-symptoms
#attr-main-tabs
.cmp-tabs__tabpanel.cmp-tabs__tabpanel--active {
  display: flex !important;
  align-items: center;
}

/* Reset every AEM wrapper inside the active tab */
#attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel .container,
#attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel .responsivegrid,
#attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel .cmp-container,
#attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel .aem-Grid,
#attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel .text,
#attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel .cmp-text {
  width: 100%;
  max-width: none;

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

  box-sizing: border-box;
}

/*
 * Use one Text component inside each AEM tab.
 *
 * Required HTML:
 *
 * <div class="attr-tab-content attr-tab-content--autonomic">
 *   <div class="attr-tab-content__image">
 *     <img src="DAM_PATH" alt="">
 *   </div>
 *   <div class="attr-tab-content__copy">...</div>
 * </div>
 */
#attr-symptoms #attr-main-tabs .attr-tab-content {
  display: grid !important;
  grid-template-columns: 145px minmax(0, 1fr);
  column-gap: 28px;
  align-items: center;

  width: 100%;
  min-height: 220px;

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

  box-sizing: border-box;
}

/* Reserved image space remains even before the image is added */
#attr-symptoms #attr-main-tabs .attr-tab-content__image {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 145px;
  height: 220px;
  min-width: 145px;

  margin: 0;
  padding: 0;

  overflow: hidden;
  box-sizing: border-box;
}

/*
 * Once a valid DAM path is added, the image automatically fits here.
 * Native aspect ratio is preserved.
 */
#attr-symptoms #attr-main-tabs .attr-tab-content__image img {
  display: block;

  width: auto;
  height: auto;
  max-width: 145px;
  max-height: 215px;

  margin: 0 auto;

  object-fit: contain;
  object-position: center;
}

/* Hide an intentionally empty image element until a DAM path is added */
#attr-symptoms #attr-main-tabs .attr-tab-content__image img:not([src]),
#attr-symptoms #attr-main-tabs .attr-tab-content__image img[src=""] {
  visibility: hidden;
}

/* Per-tab image allowances */
#attr-symptoms
#attr-main-tabs
.attr-tab-content--autonomic
.attr-tab-content__image img {
  max-width: 140px;
  max-height: 210px;
}

#attr-symptoms
#attr-main-tabs
.attr-tab-content--peripheral
.attr-tab-content__image img {
  max-width: 155px;
  max-height: 195px;
}

#attr-symptoms
#attr-main-tabs
.attr-tab-content--cardiac
.attr-tab-content__image img {
  max-width: 145px;
  max-height: 220px;
}

#attr-symptoms
#attr-main-tabs
.attr-tab-content--musculoskeletal
.attr-tab-content__image img {
  max-width: 105px;
  max-height: 220px;
}

#attr-symptoms
#attr-main-tabs
.attr-tab-content--nephropathy
.attr-tab-content__image img {
  max-width: 155px;
  max-height: 175px;
}

/* Text column */
#attr-symptoms #attr-main-tabs .attr-tab-content__copy {
  align-self: center;

  width: 100%;
  min-width: 0;

  margin: 0;
  padding: 0;

  text-align: left;
  box-sizing: border-box;
}

/* Title */
#attr-symptoms #attr-main-tabs .attr-tab-content__copy h3 {
  margin: 0 0 10px !important;
  padding: 0 !important;

  color: #00215f;
  font-family: "Kanit-SemiBold", Arial, sans-serif;
  font-size: 17px;
  font-weight: 600;
  line-height: 21px;
  text-align: left;
}

/* Reference numbers */
#attr-symptoms #attr-main-tabs .attr-tab-content__copy h3 sup {
  position: relative;
  top: -0.35em;

  font-family: "Kanit-Medium", Arial, sans-serif;
  font-size: 60%;
  line-height: 0;
}

/* Symptom rows */
#attr-symptoms #attr-main-tabs .attr-tab-content__copy p {
  margin: 0 0 5px !important;
  padding: 0 !important;

  color: #151515;
  font-family: "Kanit-Regular", Arial, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 20px;
  text-align: left;
}

#attr-symptoms #attr-main-tabs .attr-tab-content__copy p:last-child {
  margin-bottom: 0 !important;
}

/* Prevent older .aem-Grid rules from splitting the single Text component */
#attr-symptoms
#attr-main-tabs
.cmp-tabs__tabpanel
.aem-Grid:has(.attr-tab-content) {
  display: block !important;
}

#attr-symptoms
#attr-main-tabs
.cmp-tabs__tabpanel
.text:has(.attr-tab-content) {
  grid-column: auto !important;
}

/* =========================================================
   TABLET
   ========================================================= */

@media screen and (max-width: 991px) {
  #attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel {
    height: 250px;
    min-height: 250px !important;
  }

  #attr-symptoms #attr-main-tabs .attr-tab-content {
    grid-template-columns: 125px minmax(0, 1fr);
    column-gap: 20px;
    min-height: 210px;
  }

  #attr-symptoms #attr-main-tabs .attr-tab-content__image {
    width: 125px;
    min-width: 125px;
    height: 205px;
  }

  #attr-symptoms #attr-main-tabs .attr-tab-content__image img {
    max-width: 125px;
    max-height: 195px;
  }

  #attr-symptoms
  #attr-main-tabs
  .attr-tab-content--peripheral
  .attr-tab-content__image img,
  #attr-symptoms
  #attr-main-tabs
  .attr-tab-content--nephropathy
  .attr-tab-content__image img {
    max-width: 135px;
  }

  #attr-symptoms
  #attr-main-tabs
  .attr-tab-content--musculoskeletal
  .attr-tab-content__image img {
    max-width: 95px;
    max-height: 195px;
  }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media screen and (max-width: 700px) {
  #attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel {
    display: none;
    height: auto;
    min-height: 250px !important;
    padding: 18px 16px !important;
  }

  #attr-symptoms
  #attr-main-tabs
  .cmp-tabs__tabpanel.cmp-tabs__tabpanel--active {
    display: block !important;
  }

  #attr-symptoms #attr-main-tabs .attr-tab-content {
    display: block !important;
    min-height: auto;
  }

  #attr-symptoms #attr-main-tabs .attr-tab-content__image {
    width: 100%;
    min-width: 0;
    height: 170px;

    margin-bottom: 16px;
  }

  #attr-symptoms #attr-main-tabs .attr-tab-content__image img {
    max-width: 140px;
    max-height: 170px;
  }

  #attr-symptoms #attr-main-tabs .attr-tab-content__copy h3 {
    font-size: 16px;
    line-height: 20px;
  }

  #attr-symptoms #attr-main-tabs .attr-tab-content__copy p {
    font-size: 14px;
    line-height: 19px;
  }
}


/* =========================================================
   AUTONOMIC DYSFUNCTION SECTION — REFERENCE MATCH
   Page scope: #attr-symptoms
   Keep this block at the END of the stylesheet.
   ========================================================= */



/* Top content */


/* Blue sub-heading */


/* Body paragraph */






/* Decorative divider */






/* Section title above card */


/* Main white rounded card */




/* 3-column symptom grid */




/* Remove divider under the last item in each column */












/* Bottom callout */






/* AEM wrapper reset */


/* Tablet */
@media screen and (max-width: 991px) {
  

  

  

  

  

  
}

/* Mobile */
@media screen and (max-width: 700px) {
  

  

  

  

  

  

  

  

  

  

  
}


/* =========================================================
   QUALITY-OF-LIFE IMPACT SECTION
   Page scope: #attr-symptoms
   Keep this block at the END of the stylesheet.
   ========================================================= */



/* Main heading */


/* Uppercase subheading */


/* White rounded card */


/* Card title */


/* 3-column grid */


/* Individual stat item */


/* Remove bottom line from final row */


/* Empty placeholders for last row alignment */












/* Bottom callout */






/* Superscripts */


/* AEM wrapper reset */


/* Tablet */
@media screen and (max-width: 991px) {
  

  

  

  

  

  
}

/* Mobile */
@media screen and (max-width: 700px) {
  

  

  

  

  

  

  

  

  

  
}


/* =========================================================
   INTERNAL FOOTER PROMO BOXES — FINAL OVERRIDE
   Page scope: #attr-symptoms
   Keep this block at the VERY END of the stylesheet.
   ========================================================= */



/* Both AEM wrappers that contain the cards */


/* Remove old shadow/layout behaviour */




/* Card */


/* Remove previous generated border layer */


/* Visible card text */


/* Keep duplicate paragraph hidden */


/* Superscripts */


/* Icon area — replace only these two DAM URLs */






/* CTA wrapper positioned below card */


/* Pill CTA */


/* Second CTA can be slightly narrower like the reference */


/* Tablet */
@media screen and (max-width: 991px) {
  

  

  

  
}

/* Mobile */
@media screen and (max-width: 700px) {
  

  

  

  

  
}


/* =========================================================
   FINAL ALIGNMENT OVERRIDE
   Align Importance + Quality-of-Life sections with the
   right-side Recognizing Red Flags content column.
   Keep this block at the VERY END of the stylesheet.
   ========================================================= */

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

  /*
   * Overall page grid:
   * 224px sidebar + 14px gap + 1001px right content.
   *
   * These two sections sit outside #attr-symptoms-layout,
   * so the same 238px left offset is applied here.
   */
  

  /*
   * Make both rounded content cards use the complete
   * 1001px right-column width instead of the old 760px width.
   */
  

  /*
   * Headings remain centred against the same right column.
   */
  
}

/* Tablet and mobile: remove desktop sidebar offset */
@media screen and (max-width: 991px) {
  

  
}

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


/* =========================================================
   ON-THIS-PAGE RESPONSIVE NAV + DESKTOP STICKY
   FINAL OVERRIDE — KEEP AT THE VERY END OF THIS FILE
   Desktop/laptop/iPad Pro: 992px and above
   Mobile/tablet: 991px and below
   ========================================================= */

/* Placeholder used by the JavaScript while the desktop nav is fixed */
#attr-symptoms .attr-otp-nav-placeholder {
  display: none;
  width: 224px;
  height: 304px;
}

/* Keep scrollbar subtle when the desktop navigation is taller than viewport */
#attr-symptoms #attr-otp-nav {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 33, 95, 0.35) transparent;
}

#attr-symptoms #attr-otp-nav::-webkit-scrollbar {
  width: 5px;
}

#attr-symptoms #attr-otp-nav::-webkit-scrollbar-thumb {
  background: rgba(0, 33, 95, 0.35);
  border-radius: 10px;
}

/* =========================
   DESKTOP / LAPTOP / IPAD PRO
   ========================= */
@media screen and (min-width: 992px) {
  #attr-symptoms #attr-symptoms-layout {
    grid-template-columns: 224px minmax(0, 1001px) !important;
    column-gap: 14px !important;
    align-items: start;
  }

  #attr-symptoms #attr-symptoms-layout > div:has(#attr-otp-nav) {
    width: 224px !important;
    min-width: 224px !important;
    align-self: stretch;
  }

  #attr-symptoms #attr-otp-nav {
    display: block !important;
    width: 224px !important;
    min-width: 224px !important;
    max-width: 224px !important;
    height: 304px !important;
    min-height: 304px !important;
    padding: 36px 17px 30px 29px !important;
    margin: 0 !important;
    overflow-x: hidden;
    box-sizing: border-box;
  }

  #attr-symptoms #attr-otp-nav .attr-onthispage__title {
    cursor: default;
  }

  #attr-symptoms #attr-otp-nav .attr-onthispage__title::after {
    content: none !important;
    display: none !important;
  }

  #attr-symptoms #attr-otp-nav .attr-onthispage__link {
    display: block !important;
  }
}

/* =========================
   MOBILE + TABLET
   ========================= */
@media screen and (max-width: 991px) {
  #attr-symptoms-section {
    overflow-x: hidden;
  }

  #attr-symptoms #attr-symptoms-layout {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Force the navigation wrapper to be the first item */
  #attr-symptoms #attr-symptoms-layout > div:has(#attr-otp-nav) {
    order: 1;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 14px 16px 0 !important;
    box-sizing: border-box !important;
  }

  #attr-symptoms #attr-symptoms-layout > div:has(#attr-otp-heading) {
    order: 2;
    width: 100% !important;
    min-width: 0 !important;
  }

  #attr-symptoms #attr-symptoms-layout > div:has(#attr-body-figure) {
    order: 3;
    width: 100% !important;
    min-width: 0 !important;
  }

  #attr-symptoms #attr-otp-nav {
    position: static !important;
    display: block !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 auto !important;
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
    z-index: auto !important;
  }

  #attr-symptoms #attr-otp-nav .attr-onthispage {
    display: block !important;
    width: 100% !important;
    height: auto !important;
  }

  /* Collapsed heading bar */
  #attr-symptoms #attr-otp-nav .attr-onthispage__title {
    position: relative;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: 100% !important;
    min-height: 42px;
    margin: 0 !important;
    padding: 9px 48px 9px 16px !important;
    box-sizing: border-box;
    color: #00215F;
    background: #E9EBF2;
    border-radius: 12px;
    font-family: "Kanit-SemiBold", Arial, sans-serif;
    font-size: 17px;
    line-height: 22px;
    text-align: left;
    text-transform: uppercase;
    cursor: pointer;
    user-select: none;
  }

  /* Chevron */
  #attr-symptoms #attr-otp-nav .attr-onthispage__title::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 18px;
    width: 12px;
    height: 12px;
    border-right: 3px solid #00215F;
    border-bottom: 3px solid #00215F;
    transform: translateY(-68%) rotate(45deg);
    transform-origin: center;
    transition: transform 0.2s ease;
  }

  #attr-symptoms #attr-otp-nav.mobile-nav-open .attr-onthispage__title {
    border-radius: 12px 12px 0 0;
  }

  #attr-symptoms #attr-otp-nav.mobile-nav-open .attr-onthispage__title::after {
    transform: translateY(-30%) rotate(225deg);
  }

  /* Links are hidden in the collapsed state */
  #attr-symptoms #attr-otp-nav .attr-onthispage__link {
    display: none !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 11px 16px !important;
    box-sizing: border-box;
    color: #00215F;
    background: #F2F3F8;
    border: 0 !important;
    border-top: 1px solid rgba(0, 33, 95, 0.12) !important;
    font-family: "Kanit-Medium", Arial, sans-serif;
    font-size: 16px;
    line-height: 20px;
    text-align: left;
    text-decoration: none;
  }

  #attr-symptoms #attr-otp-nav.mobile-nav-open .attr-onthispage__link {
    display: block !important;
  }

  #attr-symptoms #attr-otp-nav.mobile-nav-open .attr-onthispage__link:last-child {
    border-radius: 0 0 12px 12px;
  }

  #attr-symptoms #attr-otp-nav .attr-onthispage__link.is-active {
    color: #00215F;
    background: #E9EBF2;
    border-bottom: 0 !important;

  }

  /* Heading directly below the mobile dropdown */
  #attr-symptoms #attr-otp-heading {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 20px 18px 18px !important;
  }

  #attr-symptoms #attr-otp-heading .attr-section-heading__title {
    font-size: 24px;
    line-height: 29px;
    margin-bottom: 12px !important;
  }

  #attr-symptoms #attr-otp-heading .attr-section-heading__subtitle {
    font-size: 16px;
    line-height: 20px;
    margin-bottom: 14px !important;
  }

  #attr-symptoms #attr-otp-heading .attr-section-heading__body {
    max-width: 650px;
    font-size: 15px;
    line-height: 18px;
  }

  #attr-symptoms .attr-otp-nav-placeholder {
    display: none !important;
  }
}

@media screen and (max-width: 480px) {
  #attr-symptoms #attr-symptoms-layout > div:has(#attr-otp-nav) {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  #attr-symptoms #attr-otp-nav .attr-onthispage__title {
    min-height: 40px;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    font-size: 16px;
  }

  #attr-symptoms #attr-otp-heading {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  #attr-symptoms #attr-otp-heading .attr-section-heading__title {
    font-size: 22px;
    line-height: 27px;
  }

  #attr-symptoms #attr-otp-heading .attr-section-heading__subtitle {
    font-size: 15px;
    line-height: 19px;
  }

  #attr-symptoms #attr-otp-heading .attr-section-heading__body {
    font-size: 14px;
    line-height: 17px;
  }
}


/* =========================================================
   FINAL TYPOGRAPHY + MOBILE RED-FLAGS PANEL OVERRIDE
   KEEP THIS BLOCK AT THE VERY END OF THE CSS FILE
   ========================================================= */

/* ---------------------------------------------------------
   CONSISTENT SECTION TYPOGRAPHY
   Heading: 25px / #00215F
   Subheading: 20px / #00215F
   Supporting text: 18px / #151515
   --------------------------------------------------------- */








/* =========================================================
   MOBILE/TABLET RED-FLAGS PANEL
   Matches the supplied reference:
   heading -> body + vertical tabs -> white content -> disclaimer
   ========================================================= */

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

  /* Remove desktop-only offsets from sections below the main panel */
  #attr-symptoms .attrsymptoms-sec1,
  #attr-symptoms .attrsymptoms-sec2,
  #attr-symptoms .block {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }

  /* Main dark panel */
  #attr-symptoms #attr-body-figure {
    position: relative !important;
    display: grid !important;

    grid-template-columns: minmax(0, 42%) minmax(0, 58%) !important;
    grid-template-rows: auto auto auto auto !important;

    column-gap: 10px !important;
    row-gap: 14px !important;

    width: calc(100% - 32px) !important;
    max-width: 620px !important;
    min-height: 0 !important;

    margin: 12px auto 26px !important;
    padding: 18px 14px 18px !important;

    box-sizing: border-box !important;
    overflow: hidden !important;

    border-radius: 22px !important;
    background-color: #001B45 !important;
  }

  /*
   * Allow the heading and disclaimer to become independent
   * grid items of #attr-body-figure.
   */
  #attr-symptoms #attr-body-figure > .text:has(#attr-panel-heading),
  #attr-symptoms #attr-panel-heading,
  #attr-symptoms #attr-panel-heading .attr-redflags-panel {
    display: contents !important;
  }

  /* Main white panel heading */
  #attr-symptoms
  #attr-panel-heading
  .attr-redflags-panel__heading {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;

    display: block !important;
    width: 100% !important;
    max-width: 470px !important;

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

    color: #FFFFFF !important;

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

    text-align: center !important;
    box-sizing: border-box !important;
  }

  /* Body silhouette on the left */
  #attr-symptoms
  #attr-body-figure
  > .text:has(#attr-body-image) {
    grid-column: 1 !important;
    grid-row: 2 !important;

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

    width: 100% !important;
    min-width: 0 !important;
    min-height: 275px !important;

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

    overflow: visible !important;
    align-self: stretch !important;
  }

  #attr-symptoms #attr-body-image,
  #attr-symptoms #attr-redflags-figure {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

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

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

  #attr-symptoms
  #attr-body-image
  .attr-redflags-body__image {
    display: block !important;

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

    margin: 0 auto !important;

    object-fit: contain !important;
    object-position: center !important;
  }

  /* Expose tablist and active panel as grid items */
  #attr-symptoms #attr-body-figure > .tabs,
  #attr-symptoms #attr-main-tabs {
    display: contents !important;
  }

  /* Vertical tab selector on the right */
  #attr-symptoms #attr-main-tabs .cmp-tabs__tablist {
    grid-column: 2 !important;
    grid-row: 2 !important;

    display: flex !important;
    flex-direction: column !important;
    align-self: center !important;

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

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

    overflow: hidden !important;
    background: #FFFFFF !important;
    border-radius: 13px !important;
    box-sizing: border-box !important;
  }

  #attr-symptoms #attr-main-tabs .cmp-tabs__tab {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    min-width: 0 !important;
    min-height: 48px !important;

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

    box-sizing: border-box !important;

    color: #00215F !important;
    background: #FFFFFF !important;

    border: 0 !important;
    border-bottom: 1px solid #D8DDEA !important;
    border-radius: 0 !important;

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

    text-align: center !important;
    white-space: normal !important;
  }

  #attr-symptoms #attr-main-tabs .cmp-tabs__tab:last-child {
    border-bottom: 0 !important;
  }

  #attr-symptoms
  #attr-main-tabs
  .cmp-tabs__tab.cmp-tabs__tab--active {
    color: #FFFFFF !important;
    background: #637BFF !important;
  }

  /* Hide inactive content panels */
  #attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel {
    display: none !important;
  }

  /*
   * Active white content card below the silhouette and tabs.
   * This creates the same stacked card shown in image 1.
   */
  #attr-symptoms
  #attr-main-tabs
  .cmp-tabs__tabpanel.cmp-tabs__tabpanel--active {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;

    display: block !important;

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

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

    box-sizing: border-box !important;
    overflow: visible !important;

    color: #151515 !important;
    background: #FFFFFF !important;
    border-radius: 13px !important;
  }

  /* Reset all AEM wrappers inside active tab */
  #attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel .container,
  #attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel .responsivegrid,
  #attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel .cmp-container,
  #attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel .aem-Grid,
  #attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel .text,
  #attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel .cmp-text {
    display: block !important;

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

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

    box-sizing: border-box !important;
  }

  /*
   * Callout/tab content:
   * image above and text below.
   */
  #attr-symptoms #attr-main-tabs .attr-tab-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;

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

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

    box-sizing: border-box !important;
  }

  #attr-symptoms
  #attr-main-tabs
  .attr-tab-content__image {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    min-width: 0 !important;
    height: 125px !important;

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

    overflow: visible !important;
  }

  #attr-symptoms
  #attr-main-tabs
  .attr-tab-content__image img,
  #attr-symptoms
  #attr-main-tabs
  .cmp-tabs__tabpanel
  .image img,
  #attr-symptoms
  #attr-main-tabs
  .cmp-tabs__tabpanel
  .cmp-image__image {
    display: block !important;

    width: auto !important;
    height: auto !important;
    max-width: 125px !important;
    max-height: 120px !important;

    margin: 0 auto !important;

    object-fit: contain !important;
    object-position: center !important;
  }

  #attr-symptoms
  #attr-main-tabs
  .attr-tab-content__copy,
  #attr-symptoms
  #attr-main-tabs
  .cmp-tabs__tabpanel
  .text {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
  }

  #attr-symptoms
  #attr-main-tabs
  .attr-tab-content__copy h3,
  #attr-symptoms
  #attr-main-tabs
  .cmp-tabs__tabpanel h3,
  #attr-symptoms
  #attr-main-tabs
  .cmp-tabs__tabpanel h4 {
    margin: 0 0 10px !important;
    padding: 0 !important;

    color: #00215F !important;

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

    text-align: left !important;
  }

  #attr-symptoms
  #attr-main-tabs
  .attr-tab-content__copy p,
  #attr-symptoms
  #attr-main-tabs
  .cmp-tabs__tabpanel p,
  #attr-symptoms
  #attr-main-tabs
  .cmp-tabs__tabpanel li {
    margin: 0 0 6px !important;
    padding: 0 !important;

    color: #151515 !important;

    font-family: "Kanit-Regular", "Kanit", Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 21px !important;

    text-align: left !important;
  }

  /* Disclaimer at the bottom of the dark panel */
  #attr-symptoms
  #attr-panel-heading
  .attr-redflags-panel__disclaimer {
    grid-column: 1 / -1 !important;
    grid-row: 4 !important;

    position: static !important;

    display: block !important;
    width: 100% !important;

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

    box-sizing: border-box !important;

    color: #FFFFFF !important;

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

    text-align: center !important;
    white-space: normal !important;
  }
}


/* =========================================================
   PHONE REFINEMENTS
   ========================================================= */

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

  #attr-symptoms #attr-body-figure {
    grid-template-columns: minmax(0, 40%) minmax(0, 60%) !important;
    column-gap: 8px !important;

    width: calc(100% - 24px) !important;
    padding: 16px 12px 17px !important;

    border-radius: 20px !important;
  }

  #attr-symptoms
  #attr-panel-heading
  .attr-redflags-panel__heading {
    font-size: 15px !important;
    line-height: 18px !important;
  }

  #attr-symptoms
  #attr-body-figure
  > .text:has(#attr-body-image),
  #attr-symptoms #attr-body-image,
  #attr-symptoms #attr-redflags-figure {
    min-height: 255px !important;
  }

  #attr-symptoms
  #attr-body-image
  .attr-redflags-body__image {
    max-height: 270px !important;
  }

  #attr-symptoms #attr-main-tabs .cmp-tabs__tab {
    min-height: 45px !important;
    padding: 7px 5px !important;
    font-size: 12px !important;
    line-height: 14px !important;
  }

  #attr-symptoms
  #attr-main-tabs
  .cmp-tabs__tabpanel.cmp-tabs__tabpanel--active {
    padding: 15px 14px 17px !important;
  }

  #attr-symptoms
  #attr-main-tabs
  .attr-tab-content__image {
    height: 115px !important;
  }

  #attr-symptoms
  #attr-main-tabs
  .attr-tab-content__image img,
  #attr-symptoms
  #attr-main-tabs
  .cmp-tabs__tabpanel
  .image img,
  #attr-symptoms
  #attr-main-tabs
  .cmp-tabs__tabpanel
  .cmp-image__image {
    max-width: 115px !important;
    max-height: 110px !important;
  }

  /* Keep requested section font sizes on phone as well */
  

  

  
}


/* =========================================================
   FINAL MOBILE TAB CONTENT + AUTONOMIC TYPOGRAPHY OVERRIDE
   KEEP THIS BLOCK AT THE VERY END OF THE CSS FILE
   ========================================================= */

/* ---------------------------------------------------------
   AUTONOMIC SECTION TYPOGRAPHY
   --------------------------------------------------------- */

/* ROUTINELY ASSESSING AUTONOMIC DYSFUNCTION... */


/* Validated tests and questionnaires... */


/* Gastrointestinal, bladder, sexual, orthostatic intolerance, etc. */


/* Description after the blue category text */



/* =========================================================
   MOBILE RED-FLAGS PANEL
   IMAGE LEFT + TEXT RIGHT FOR EVERY TAB
   ========================================================= */

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

  /*
   * Overall dark panel:
   * 300px usable inner width + 14px padding on each side.
   */
  #attr-symptoms #attr-body-figure {
    grid-template-columns: 131px 169px !important;
    grid-template-rows:
      auto
      244px
      auto
      auto !important;

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

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

    margin-left: auto !important;
    margin-right: auto !important;
    padding: 15px 14px 16px !important;

    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  /* Left silhouette column */
  #attr-symptoms
  #attr-body-figure
  > .text:has(#attr-body-image),
  #attr-symptoms #attr-body-image,
  #attr-symptoms #attr-redflags-figure {
    width: 131px !important;
    min-width: 131px !important;
    height: 244px !important;
    min-height: 244px !important;
  }

  #attr-symptoms
  #attr-body-image
  .attr-redflags-body__image {
    max-width: 126px !important;
    max-height: 232px !important;
  }

  /* Keep the XD tab-list size */
  #attr-symptoms
  #attr-main-tabs
  .cmp-tabs__tablist {
    width: 169px !important;
    min-width: 169px !important;
    max-width: 169px !important;

    height: 244px !important;
    min-height: 244px !important;
    max-height: 244px !important;

    border: 1px solid #94A0CE !important;
    border-radius: 15px !important;
  }

  /*
   * White content panel below the image and tabs.
   * Inner width is exactly 300px.
   */
  #attr-symptoms
  #attr-main-tabs
  .cmp-tabs__tabpanel.cmp-tabs__tabpanel--active {
    width: 300px !important;
    min-width: 300px !important;
    max-width: 300px !important;

    height: auto !important;
    min-height: 250px !important;
    max-height: none !important;

    padding: 14px 13px 16px !important;

    border: 1px solid #94A0CE !important;
    border-radius: 15px !important;
    box-sizing: border-box !important;
  }

  /*
   * Every tab uses a two-column arrangement:
   * image on the left and copy on the right.
   */
  #attr-symptoms
  #attr-main-tabs
  .attr-tab-content {
    display: grid !important;
    grid-template-columns: 78px minmax(0, 1fr) !important;
    column-gap: 12px !important;
    align-items: start !important;

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

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

  /* Image area on the left */
  #attr-symptoms
  #attr-main-tabs
  .attr-tab-content__image {
    grid-column: 1 !important;

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

    width: 78px !important;
    min-width: 78px !important;
    height: auto !important;
    min-height: 92px !important;

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

    overflow: visible !important;
  }

  #attr-symptoms
  #attr-main-tabs
  .attr-tab-content__image img {
    display: block !important;

    width: auto !important;
    height: auto !important;
    max-width: 74px !important;
    max-height: 92px !important;

    margin: 0 auto !important;

    object-fit: contain !important;
    object-position: center top !important;
  }

  /* Text area on the right */
  #attr-symptoms
  #attr-main-tabs
  .attr-tab-content__copy {
    grid-column: 2 !important;

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

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

    text-align: left !important;
    box-sizing: border-box !important;
  }

  #attr-symptoms
  #attr-main-tabs
  .attr-tab-content__copy h3 {
    margin: 0 0 8px !important;
    padding: 0 !important;

    color: #00215F !important;

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

    text-align: left !important;
  }

  #attr-symptoms
  #attr-main-tabs
  .attr-tab-content__copy p {
    margin: 0 0 4px !important;
    padding: 0 !important;

    color: #151515 !important;

    font-family: "Kanit-Regular", "Kanit", Arial, sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 16px !important;

    text-align: left !important;
  }

  /*
   * Fallback for tabs authored with separate AEM Image + Text
   * components instead of .attr-tab-content.
   */
  #attr-symptoms
  #attr-main-tabs
  .cmp-tabs__tabpanel.cmp-tabs__tabpanel--active
  .aem-Grid:not(:has(.attr-tab-content)) {
    display: grid !important;
    grid-template-columns: 78px minmax(0, 1fr) !important;
    column-gap: 12px !important;
    align-items: start !important;
  }

  #attr-symptoms
  #attr-main-tabs
  .cmp-tabs__tabpanel.cmp-tabs__tabpanel--active
  .aem-Grid:not(:has(.attr-tab-content))
  > .image {
    grid-column: 1 !important;

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

    width: 78px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #attr-symptoms
  #attr-main-tabs
  .cmp-tabs__tabpanel.cmp-tabs__tabpanel--active
  .aem-Grid:not(:has(.attr-tab-content))
  > .image img,
  #attr-symptoms
  #attr-main-tabs
  .cmp-tabs__tabpanel.cmp-tabs__tabpanel--active
  .aem-Grid:not(:has(.attr-tab-content))
  > .image .cmp-image__image {
    width: auto !important;
    height: auto !important;
    max-width: 74px !important;
    max-height: 92px !important;

    margin: 0 auto !important;
    object-fit: contain !important;
  }

  #attr-symptoms
  #attr-main-tabs
  .cmp-tabs__tabpanel.cmp-tabs__tabpanel--active
  .aem-Grid:not(:has(.attr-tab-content))
  > .text {
    grid-column: 2 !important;

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

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

  /*
   * Disclaimer/list text at the bottom of the dark panel:
   * 16px white, 300px wide, minimum height 44px.
   */
  #attr-symptoms
  #attr-panel-heading
  .attr-redflags-panel__disclaimer {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

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

    min-height: 44px !important;

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

    box-sizing: border-box !important;

    color: #FFFFFF !important;

    font-family: "Kanit-Regular", "Kanit", Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 18px !important;

    text-align: center !important;
    white-space: normal !important;
  }

  /* Requested autonomic typography remains consistent on mobile */
  

  

  
}


/* Narrow-phone safeguard */
@media screen and (max-width: 350px) {
  #attr-symptoms #attr-body-figure {
    width: calc(100% - 16px) !important;
    min-width: 0 !important;
    max-width: 328px !important;

    grid-template-columns:
      minmax(0, 131px)
      minmax(0, 169px) !important;
  }
}


/* =========================================================
   FINAL QUALITY-OF-LIFE CALLOUT + STUDY + MOBILE FOOTER FIX
   KEEP THIS BLOCK AT THE VERY END OF THE CSS FILE
   ========================================================= */

/* ---------------------------------------------------------
   QUALITY-OF-LIFE STUDY TYPOGRAPHY
   --------------------------------------------------------- */

/* "One study showed that:" */


/* 80%, 54%, 64%, etc. */


/* "of patients" */


/* Other study description text */



/* =========================================================
   MOBILE/TABLET
   ========================================================= */

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

  /* -------------------------------------------------------
     BULB CALLOUT: IMAGE ABOVE, TEXT BELOW
     ------------------------------------------------------- */

  

  

  

  /* -------------------------------------------------------
     ONE STUDY SHOWED THAT SECTION
     ------------------------------------------------------- */

  

  

  

  

  /* Each percentage item remains readable in one column */
  

  

  

  

  /* -------------------------------------------------------
     INTERNAL FOOTER — MATCH MOBILE REFERENCE
     ------------------------------------------------------- */

  

  

  

  /* Footer card */
  

  /* Remove old pseudo icon implementation */
  

  /*
   * Use the actual AEM image as the left icon.
   * The image wrapper becomes the first grid column.
   */
  

  

  /* Footer text on the right */
  

  /* CTA overlaps bottom edge like the XD reference */
  

  
}


/* =========================================================
   EXTRA FALLBACK WHEN THE FOOTER ICON IS A DIRECT SIBLING
   OUTSIDE .border-box
   ========================================================= */

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

  

  

  

  
}


/* =========================================================
   FINAL 0–990PX QOL + STUDY + INTERNAL FOOTER OVERRIDE
   KEEP THIS BLOCK AT THE ABSOLUTE END OF THE CSS FILE
   Mobile/tablet structure applies through 990px.
   ========================================================= */

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

  /* =======================================================
     1. QUALITY-OF-LIFE BULB CALLOUT
     Bulb image above, text below
     ======================================================= */

  

  /* Support the authored image class */
  

  /* Support an AEM image component inside the callout */
  

  

  


  /* =======================================================
     2 + 3. ONE-STUDY CARD
     Compact rows, no huge vertical gaps
     Percentage on first line
     "of patients" begins on next line in same blue
     ======================================================= */

  

  

  

  

  

  

  

  

  

  /* 80%, 64%, 57%, etc. */
  

  /*
   * The first line is forced to be "of patients" and gets
   * the same blue as the percentage.
   */
  

  

  /* When "of patients" has its own authored span */
  


  /* =======================================================
     4. INTERNAL FOOTER PROMO CARDS
     Match the compact XD mobile structure
     ======================================================= */

  

  

  

  

  

  /* Actual card image/icon on the left */
  

  

  

  

  

  /* CTA sits below the text and overlaps the card bottom edge */
  

  

  /*
   * Fallback where the card icon is outside .border-box.
   * Reserve space in the card and position the icon correctly.
   */
  

  
}


/* =========================================================
   VERY NARROW PHONE SAFEGUARD
   ========================================================= */

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

  
}

/* =========================================================
   FINAL STRUCTURAL FIXES
   KEEP THIS BLOCK AT THE ABSOLUTE END OF THE CSS FILE
   ========================================================= */

/* 1. AUTONOMIC CALLOUT: icon above, text below */






/* 2. Remove empty QOL placeholder rows */


/* 3. Internal footer cards - shared structure */
















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

  

  

  

  
}

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

  

  

  

  

  

  

  
}

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


/* =========================================================
   FINAL CHART 1 + CHART 2 RESPONSIVE OVERRIDES
   Page scope: #attr-symptoms
   Desktop/laptop: 992px+
   Mobile/tablet: 0–990px
   KEEP THIS BLOCK AT THE ABSOLUTE END OF THE CSS FILE
   ========================================================= */

/* ---------- Shared headings ---------- */






/* =========================================================
   CHART 1 — AUTONOMIC
   ========================================================= */





















/* Center the final real item on desktop using empty placeholders */


/* Autonomic callout: icon above, text below */






/* =========================================================
   CHART 2 — QUALITY OF LIFE
   ========================================================= */





















/* Backward compatibility for older single-span markup */


/* Center final real item on desktop */


/* QOL callout: icon above, text below */






/* =========================================================
   MOBILE + TABLET — 0 to 990px
   ========================================================= */

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

  

  

  

  

  

  

  

  

  

  

  
}

/* =========================================================
   DESKTOP/LAPTOP ALIGNMENT WITH RIGHT CONTENT COLUMN
   ========================================================= */

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

/* =========================================================
   FINAL CORRECTION — 0–990px
   Restores all seven authored study items, fixes the bulb
   callout structure, and positions the internal-footer cards.
   Keep this block at the absolute end of the stylesheet.
   ========================================================= */

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

  /* ---------- Keep every authored QOL item visible ---------- */
  

  

  

  /*
   * Hide only genuinely empty layout placeholders.
   * Do not hide an authored item merely because it carries
   * the old --empty class.
   */
  

  

  

  

  /* ---------- Bulb callout: icon above, text below ---------- */
  

  

  

  

  /* ---------- Internal footer ---------- */
  #attr-symptoms .black-strip {
    height: 28px !important;
  }

  

  

  

  

  

  

  

  

  
}

/* Keep desktop/laptop layout unchanged from 991px upward. */
@media screen and (min-width: 991px) {
  
}


/* =========================================================
   FINAL AUTONOMIC SECTION — REFERENCE MATCH
   Keep this block at the absolute end of the stylesheet.
   ========================================================= */











































/* Tablet: same reference structure through 990px */
@media screen and (max-width: 990px) and (min-width: 701px) {
  

  

  

  

  

  

  

  
}

/* Mobile */
@media screen and (max-width: 700px) {
  

  

  

  

  

  

  

  

  

  
}

/* ...all your existing CSS above... */

/* FIX 1 — Autonomic card & callout full width */
@media screen and (min-width: 992px) {
  
}

/* FIX 2 — QOL callout full width, icon-then-text row */
@media screen and (min-width: 992px) {
  

  

  
}

/* FIX 3 — Footer promo boxes: CTA in normal flow, no overlap */
@media screen and (min-width: 992px) {
  

  

  
}

/* =========================================================
   INTERNAL FOOTER — DESKTOP / LAPTOP FIX
   Applies only from 991px upward
   Keep this block at the absolute end of the CSS file
   ========================================================= */

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

  

  /* Both footer-card wrappers */
  

  /* Remove old patient-box behaviour */
  

  

  /* Footer card */
  

  

  /* Real authored image */
  

  /* Card text */
  

  

  /* CTA row */
  

  /* CTA button */
  

  /* Slightly narrower second button */
  

  
}

/* =========================================================
   FOOTER PROMO CARDS — BUILT FROM ACTUAL MARKUP
   Keep at the very end of the stylesheet.
   ========================================================= */

/* Neutralize the structural mismatch: .image-shadow becomes
   invisible in the box model so both cards behave identically */


/* Card container — same width for both, regardless of wrapper */


/* The actual visible card */








/* CTA — normal flow, spans both columns, no more absolute positioning */




/* Mobile — stack the two cards, keep grid layout inside each */
@media screen and (max-width: 990px) {
  

  

  
}

/* =========================================================
   FOOTER PROMO CARDS — FINAL, HIGH-SPECIFICITY VERSION
   Paste at the ABSOLUTE end of the file, nothing after this.
   ========================================================= */

















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

  

  
}

/* =========================================================
   INTERNAL FOOTER PROMO CARDS
   Clean replacement for all previous footer-card rules
   ========================================================= */



/* ---------------- DESKTOP / LAPTOP: 991px AND ABOVE ---------------- */

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

  

  

  

  

  

  

  

  

  

  

  

  
}

/* ---------------- TABLET / MOBILE: 990px AND BELOW ---------------- */

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

  

  

  

  

  

  

  

  

  
}

/* =========================================================
   FINAL CLEAN AUTONOMIC + INTERNAL FOOTER
   Keep at the absolute end of the stylesheet.
   ========================================================= */

#attr-symptoms {
  --page-gutter: 24px;
  --content-max: 760px;
}

/* ---------------- AUTONOMIC SECTION ---------------- */





































/* Tablet and mobile: fluid card width, centered row content */
@media screen and (max-width: 992px) {
  

  

  

  

  

  

  

  

  

  
}

@media screen and (max-width: 480px) {
  #attr-symptoms {
    --page-gutter: 24px;
  }

  

  
}

/* ---------------- INTERNAL FOOTER ---------------- */

#attr-symptoms .sec3-mainbg {
  position: relative !important;
  width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  background-image: url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/Internal%20Footer%20image_desktop.jpg") !important;
  background-color: #020c2d !important;
  background-repeat: no-repeat !important;
  background-position: center bottom !important;
  background-size: cover !important;
}

@media screen and (min-width: 993px) {
  #attr-symptoms .sec3-mainbg {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 18px !important;
    height: 360px !important;
    min-height: 360px !important;
    padding: 28px 24px 0 !important;
    overflow: hidden !important;
  }

  #attr-symptoms .sec3-mainbg > .patient-box,
  #attr-symptoms .sec3-mainbg > .attr-footer-card {
    position: relative !important;
    flex: 0 0 360px !important;
    width: 360px !important;
    max-width: 360px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

@media screen and (max-width: 992px) {
  #attr-symptoms .sec3-mainbg {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 64px !important;
    height: auto !important;
    min-height: 620px !important;
    padding: 30px 0 145px !important;
    overflow: hidden !important;
  }

  #attr-symptoms .sec3-mainbg > .patient-box,
  #attr-symptoms .sec3-mainbg > .attr-footer-card {
    position: relative !important;
    width: calc(100% - (var(--page-gutter) * 2)) !important;
    max-width: 520px !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }
}

#attr-symptoms .sec3-mainbg .image-shadow {
  position: static !important;
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  overflow: visible !important;
}

#attr-symptoms .sec3-mainbg .border-box {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 64px minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  column-gap: 14px !important;

  width: 100% !important;
  min-height: 156px !important;
  margin: 0 !important;
  padding: 20px 20px 24px !important;
  box-sizing: border-box !important;

  background: #e9ebf2 !important;
  border: 1px solid #bfc8e6 !important;
  border-radius: 18px 18px 18px 0 !important;
  overflow: visible !important;
}

#attr-symptoms .sec3-mainbg .border-box::before,
#attr-symptoms .sec3-mainbg .smallbox-title::before {
  content: none !important;
  display: none !important;
}

#attr-symptoms .sec3-mainbg .smallbox-icon {
  grid-column: 1 !important;
  grid-row: 1 !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 58px !important;
  max-height: 76px !important;
  margin: 0 auto !important;
  object-fit: contain !important;
}

#attr-symptoms .sec3-mainbg .smallbox-title {
  grid-column: 2 !important;
  grid-row: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #151515 !important;
  font-family: "Kanit-Regular", "Kanit", Arial, sans-serif !important;
  font-size: clamp(15px, 2.2vw, 18px) !important;
  line-height: 1.25 !important;
  text-align: left !important;
}

#attr-symptoms .sec3-mainbg .smallbox-txt {
  display: none !important;
}

/* CTA is now part of the card grid, so it cannot jump to the top */
#attr-symptoms .sec3-mainbg .cta-bottom-home {
  position: static !important;
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  margin: 14px 0 -44px !important;
  padding: 0 !important;
  transform: none !important;
  z-index: 5 !important;
}

#attr-symptoms .sec3-mainbg .middle-bottom-cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: min(285px, calc(100vw - 96px)) !important;
  max-width: calc(100vw - 96px) !important;
  min-height: 48px !important;
  padding: 8px 20px !important;
  box-sizing: border-box !important;

  color: #fff !important;
  background: #637bff !important;
  border: 0 !important;
  border-radius: 28px !important;

  font-family: "Kanit-SemiBold", "Kanit", Arial, sans-serif !important;
  font-size: 16px !important;
  line-height: 20px !important;
  text-align: center !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  white-space: normal !important;
}

@media screen and (min-width: 993px) {
  #attr-symptoms .sec3-mainbg .border-box {
    grid-template-columns: 72px minmax(0, 1fr) !important;
    min-height: 132px !important;
    padding: 18px 20px 22px !important;
  }

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

  #attr-symptoms .sec3-mainbg .cta-bottom-home {
    margin: 12px 0 -39px !important;
  }

  #attr-symptoms .sec3-mainbg .middle-bottom-cta {
    min-width: 185px !important;
    max-width: 250px !important;
    min-height: 34px !important;
    padding: 7px 18px !important;
    font-size: 11px !important;
    line-height: 14px !important;
    white-space: nowrap !important;
  }

  #attr-symptoms .sec3-mainbg .home-cta-1 .middle-bottom-cta {
    min-width: 250px !important;
  }
}

@media screen and (max-width: 360px) {
  #attr-symptoms {
    --page-gutter: 18px;
  }

  #attr-symptoms .sec3-mainbg .border-box {
    grid-template-columns: 56px minmax(0, 1fr) !important;
    column-gap: 10px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  #attr-symptoms .sec3-mainbg .middle-bottom-cta {
    min-width: min(260px, calc(100vw - 72px)) !important;
    max-width: calc(100vw - 72px) !important;
    font-size: 14px !important;
    line-height: 18px !important;
  }
}

/* =========================================================
   FINAL AUTONOMIC + QUALITY-OF-LIFE RESPONSIVE SYSTEM
   Card width is fluid. Inner row content remains a stable,
   centred column on tablet and mobile.
   Keep this block at the absolute end of the stylesheet.
   ========================================================= */

#attr-symptoms {
  --attr-side-gap: 24px;
  --attr-card-max: 760px;
  --attr-mobile-content-width: 342px;
}

/* =========================================================
   SHARED SECTION LAYOUT
   ========================================================= */

#attr-symptoms .attr-autonomic,
#attr-symptoms .attr-qol {
  width: 100% !important;
  max-width: 1001px !important;
  margin: 0 auto !important;
  padding: 34px 24px 42px !important;
  box-sizing: border-box !important;
  background: #ffffff !important;
  text-align: center !important;
}

#attr-symptoms .attr-autonomic__heading,
#attr-symptoms .attr-qol__heading {
  margin: 0 0 14px !important;
  padding: 0 !important;
  color: #00215f !important;
  font-family: "Kanit-SemiBold", "Kanit", Arial, sans-serif !important;
  font-size: 25px !important;
  font-weight: 600 !important;
  line-height: 30px !important;
  text-align: center !important;
}

#attr-symptoms .attr-autonomic__lead,
#attr-symptoms .attr-autonomic__eyebrow,
#attr-symptoms .attr-qol__eyebrow {
  margin: 0 0 18px !important;
  padding: 0 !important;
  color: #00215f !important;
  font-family: "Kanit-SemiBold", "Kanit", Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 21px !important;
  text-align: center !important;
  text-transform: uppercase !important;
}

#attr-symptoms .attr-autonomic__overview {
  width: 100% !important;
  max-width: 760px !important;
  margin: 0 auto 16px !important;
  padding: 0 !important;
  color: #151515 !important;
  font-family: "Kanit-Regular", "Kanit", Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 19px !important;
  text-align: center !important;
}

#attr-symptoms .attr-autonomic__divider {
  width: 100% !important;
  max-width: 760px !important;
  height: 20px !important;
  margin: 0 auto 20px !important;
  padding: 0 !important;
  background: url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/SOFT%20separator%20line%20.png") center center / 100% 100% no-repeat !important;
}


#attr-symptoms .attr-autonomic__card,
#attr-symptoms .attr-qol__card {
  width: 100% !important;
  max-width: var(--attr-card-max) !important;
  margin: 0 auto 28px !important;
  padding: 18px 20px 16px !important;
  box-sizing: border-box !important;
  background: #ffffff !important;
  border: 1px solid #c8d1ea !important;
  border-radius: 22px !important;
  box-shadow: 0 2px 11px rgba(0, 33, 95, 0.16) !important;
  overflow: hidden !important;
}

#attr-symptoms .attr-autonomic__intro,
#attr-symptoms .attr-qol__card-title {
  width: 100% !important;
  max-width: 610px !important;
  margin: 0 auto 18px !important;
  padding: 0 !important;
  color: #00215f !important;
  font-family: "Kanit-Medium", "Kanit", Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 19px !important;
  text-align: center !important;
}

/* =========================================================
   DESKTOP: THREE-COLUMN LAYOUT
   ========================================================= */

#attr-symptoms .attr-autonomic__grid,
#attr-symptoms .attr-qol__grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  column-gap: 24px !important;
  row-gap: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

#attr-symptoms .attr-autonomic__item,
#attr-symptoms .attr-qol__item {
  display: grid !important;
  align-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  border-bottom: 1px solid #e2e5ee !important;
  text-align: left !important;
}

#attr-symptoms .attr-autonomic__item {
  grid-template-columns: 64px minmax(0, 1fr) !important;
  column-gap: 10px !important;
  min-height: 104px !important;
  padding: 10px 0 !important;
}

#attr-symptoms .attr-qol__item {
  grid-template-columns: 72px minmax(0, 1fr) !important;
  column-gap: 10px !important;
  min-height: 112px !important;
  padding: 12px 0 !important;
}

#attr-symptoms .attr-autonomic__item:nth-child(n + 4),
#attr-symptoms .attr-qol__item:nth-child(n + 7) {
  border-bottom: 0 !important;
}

#attr-symptoms .attr-autonomic__item--last {
  grid-column: 2 !important;
}

#attr-symptoms .attr-autonomic__item--empty,
#attr-symptoms .attr-qol__item--empty {
  visibility: hidden !important;
  pointer-events: none !important;
  border: 0 !important;
}

/* =========================================================
   ICONS AND COPY
   ========================================================= */

#attr-symptoms .attr-autonomic__icon-wrap,
#attr-symptoms .attr-qol__icon-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

#attr-symptoms .attr-autonomic__icon-wrap {
  width: 64px !important;
  min-width: 64px !important;
  height: 72px !important;
}

#attr-symptoms .attr-qol__icon-wrap {
  width: 72px !important;
  min-width: 72px !important;
  height: 78px !important;
}

#attr-symptoms .attr-autonomic__icon,
#attr-symptoms .attr-qol__icon {
  display: block !important;
  width: auto !important;
  height: auto !important;
  margin: 0 auto !important;
  object-fit: contain !important;
  visibility: visible !important;
  opacity: 1 !important;
}

#attr-symptoms .attr-autonomic__icon {
  max-width: 64px !important;
  max-height: 70px !important;
}

#attr-symptoms .attr-qol__icon {
  max-width: 70px !important;
  max-height: 76px !important;
}

#attr-symptoms .attr-autonomic__copy,
#attr-symptoms .attr-qol__copy {
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}

#attr-symptoms .attr-autonomic__name {
  display: block !important;
  margin: 0 0 1px !important;
  padding: 0 !important;
  color: #606eb4 !important;
  font-family: "Kanit-Medium", "Kanit", Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 17px !important;
}

#attr-symptoms .attr-autonomic__description {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #151515 !important;
  font-family: "Kanit-Regular", "Kanit", Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 16px !important;
}

#attr-symptoms .attr-qol__value,
#attr-symptoms .attr-qol__patients,
#attr-symptoms .attr-qol__description {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

#attr-symptoms .attr-qol__value {
  color: #606eb4 !important;
  font-family: "Kanit-SemiBold", "Kanit", Arial, sans-serif !important;
  font-size: 30px !important;
  font-weight: 600 !important;
  line-height: 32px !important;
}

#attr-symptoms .attr-qol__patients {
  color: #606eb4 !important;
  font-family: "Kanit-Medium", "Kanit", Arial, sans-serif !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  line-height: 21px !important;
}

#attr-symptoms .attr-qol__description {
  color: #151515 !important;
  font-family: "Kanit-Regular", "Kanit", Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 20px !important;
}

/* =========================================================
   CALLOUTS
   ========================================================= */

#attr-symptoms .attr-autonomic__callout,
#attr-symptoms .attr-qol__callout {
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) !important;
  align-items: center !important;
  column-gap: 12px !important;
  width: 100% !important;
  max-width: var(--attr-card-max) !important;
  min-height: 68px !important;
  margin: 0 auto !important;
  padding: 12px 18px !important;
  box-sizing: border-box !important;
  background: #f0f1f7 !important;
  border: 1px solid #bac7ff !important;
  border-radius: 14px 14px 14px 0 !important;
  text-align: left !important;
}

#attr-symptoms .attr-autonomic__callout-icon,
#attr-symptoms .attr-qol__callout-icon {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 38px !important;
  max-height: 42px !important;
  margin: 0 auto !important;
  object-fit: contain !important;
}

#attr-symptoms .attr-autonomic__callout-text,
#attr-symptoms .attr-qol__callout-text {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #00215f !important;
  font-family: "Kanit-SemiBold", "Kanit", Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 17px !important;
  text-align: left !important;
}

/* =========================================================
   TABLET + MOBILE: 0–992px
   Outer card grows with viewport.
   Inner rows stay at 342px and remain centred.
   ========================================================= */

@media screen and (max-width: 992px) {
  #attr-symptoms .attr-autonomic,
  #attr-symptoms .attr-qol {
    max-width: none !important;
    padding: 28px 0 34px !important;
  }

  #attr-symptoms .attr-autonomic__heading,
  #attr-symptoms .attr-autonomic__lead,
  #attr-symptoms .attr-autonomic__overview,
  #attr-symptoms .attr-autonomic__divider,
  #attr-symptoms .attr-autonomic__eyebrow,
  #attr-symptoms .attr-qol__heading,
  #attr-symptoms .attr-qol__eyebrow,
  #attr-symptoms .attr-autonomic__card,
  #attr-symptoms .attr-qol__card,
  #attr-symptoms .attr-autonomic__callout,
  #attr-symptoms .attr-qol__callout {
    width: calc(100% - (var(--attr-side-gap) * 2)) !important;
    max-width: var(--attr-card-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #attr-symptoms .attr-autonomic__intro,
  #attr-symptoms .attr-qol__card-title {
    width: min(100%, var(--attr-mobile-content-width)) !important;
    max-width: var(--attr-mobile-content-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #attr-symptoms .attr-autonomic__grid,
  #attr-symptoms .attr-qol__grid {
    display: block !important;
    width: 100% !important;
  }

  #attr-symptoms .attr-autonomic__item,
  #attr-symptoms .attr-qol__item {
    width: min(100%, var(--attr-mobile-content-width)) !important;
    max-width: var(--attr-mobile-content-width) !important;
    margin: 0 auto !important;
    border-bottom: 1px solid #e2e5ee !important;
  }

  #attr-symptoms .attr-autonomic__item {
    grid-template-columns: 82px minmax(0, 1fr) !important;
    column-gap: 12px !important;
    min-height: 96px !important;
    padding: 8px 0 !important;
  }

  #attr-symptoms .attr-qol__item {
    grid-template-columns: 82px minmax(0, 1fr) !important;
    column-gap: 12px !important;
    min-height: 108px !important;
    padding: 10px 0 !important;
  }

  #attr-symptoms .attr-autonomic__item--last {
    grid-column: auto !important;
  }

  #attr-symptoms .attr-autonomic__item:last-child,
  #attr-symptoms .attr-qol__item:not(.attr-qol__item--empty):last-of-type {
    border-bottom: 0 !important;
  }

  #attr-symptoms .attr-autonomic__item--empty,
  #attr-symptoms .attr-qol__item--empty {
    display: none !important;
  }

  #attr-symptoms .attr-autonomic__icon-wrap,
  #attr-symptoms .attr-qol__icon-wrap {
    width: 82px !important;
    min-width: 82px !important;
    height: 78px !important;
  }

  #attr-symptoms .attr-autonomic__icon,
  #attr-symptoms .attr-qol__icon {
    max-width: 76px !important;
    max-height: 76px !important;
  }

  #attr-symptoms .attr-autonomic__name {
    font-size: 16px !important;
    line-height: 19px !important;
  }

  #attr-symptoms .attr-autonomic__description {
    font-size: 15px !important;
    line-height: 18px !important;
  }

  #attr-symptoms .attr-qol__description {
    font-size: 15px !important;
    line-height: 18px !important;
  }

  #attr-symptoms .attr-autonomic__callout,
  #attr-symptoms .attr-qol__callout {
    grid-template-columns: 42px minmax(0, 1fr) !important;
    min-height: 82px !important;
    padding: 14px 16px !important;
  }
}

/* =========================================================
   PHONE: EXACT 342px CARD AT 390px VIEWPORT
   390 - 24 - 24 = 342
   ========================================================= */

@media screen and (max-width: 480px) {
  #attr-symptoms {
    --attr-side-gap: 24px;
  }

  #attr-symptoms .attr-autonomic__card,
  #attr-symptoms .attr-qol__card {
    padding: 16px 14px 8px !important;
  }

  #attr-symptoms .attr-autonomic__intro,
  #attr-symptoms .attr-qol__card-title {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 10px !important;
    font-size: 16px !important;
    line-height: 20px !important;
  }

  #attr-symptoms .attr-autonomic__item,
  #attr-symptoms .attr-qol__item {
    width: 100% !important;
    max-width: none !important;
  }

  #attr-symptoms .attr-autonomic__item {
    grid-template-columns: 86px minmax(0, 1fr) !important;
    column-gap: 10px !important;
    min-height: 94px !important;
  }

  #attr-symptoms .attr-qol__item {
    grid-template-columns: 86px minmax(0, 1fr) !important;
    column-gap: 10px !important;
    min-height: 106px !important;
  }

  #attr-symptoms .attr-autonomic__icon-wrap,
  #attr-symptoms .attr-qol__icon-wrap {
    width: 86px !important;
    min-width: 86px !important;
  }
}

/* Very narrow phone safeguard */
@media screen and (max-width: 350px) {
  #attr-symptoms {
    --attr-side-gap: 16px;
  }

  #attr-symptoms .attr-autonomic__item,
  #attr-symptoms .attr-qol__item {
    grid-template-columns: 72px minmax(0, 1fr) !important;
    column-gap: 8px !important;
  }

  #attr-symptoms .attr-autonomic__icon-wrap,
  #attr-symptoms .attr-qol__icon-wrap {
    width: 72px !important;
    min-width: 72px !important;
  }
}

/* =========================================================
   FINAL IPAD PRO + COMPACT MOBILE CONTENT FIX
   Keep this block at the absolute end of the stylesheet.
   ========================================================= */

#attr-symptoms {
  --attr-inner-row-width: 286px;
  --attr-inner-icon-width: 92px;
  --attr-inner-copy-width: 150px;
  --attr-inner-gap: 12px;
}

/* ---------------------------------------------------------
   IPAD PRO / SMALL LAPTOP: 993px–1199px
   Keep Autonomic and QOL sections out from under the sidebar.
   --------------------------------------------------------- */

@media screen and (min-width: 993px) and (max-width: 1199px) {
  #attr-symptoms .attr-autonomic,
  #attr-symptoms .attr-qol {
    width: calc(100% - 238px) !important;
    max-width: none !important;

    margin-left: 238px !important;
    margin-right: 0 !important;

    padding-left: 18px !important;
    padding-right: 18px !important;

    box-sizing: border-box !important;
  }

  #attr-symptoms .attr-autonomic__heading,
  #attr-symptoms .attr-autonomic__lead,
  #attr-symptoms .attr-autonomic__overview,
  #attr-symptoms .attr-autonomic__divider,
  #attr-symptoms .attr-autonomic__eyebrow,
  #attr-symptoms .attr-qol__heading,
  #attr-symptoms .attr-qol__eyebrow,
  #attr-symptoms .attr-autonomic__card,
  #attr-symptoms .attr-qol__card,
  #attr-symptoms .attr-autonomic__callout,
  #attr-symptoms .attr-qol__callout {
    width: 100% !important;
    max-width: 760px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /*
   * At this width use the same stacked layout as tablet,
   * but keep the outer card fluid.
   */
  #attr-symptoms .attr-autonomic__grid,
  #attr-symptoms .attr-qol__grid {
    display: block !important;
    width: 100% !important;
  }

  #attr-symptoms .attr-autonomic__item,
  #attr-symptoms .attr-qol__item {
    width: var(--attr-inner-row-width) !important;
    max-width: var(--attr-inner-row-width) !important;

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

    border-bottom: 1px solid #e2e5ee !important;
  }

  #attr-symptoms .attr-autonomic__item {
    grid-template-columns:
      var(--attr-inner-icon-width)
      var(--attr-inner-copy-width) !important;

    column-gap: var(--attr-inner-gap) !important;
    min-height: 96px !important;
    padding: 8px 0 !important;
  }

  #attr-symptoms .attr-qol__item {
    grid-template-columns:
      var(--attr-inner-icon-width)
      var(--attr-inner-copy-width) !important;

    column-gap: var(--attr-inner-gap) !important;
    min-height: 108px !important;
    padding: 10px 0 !important;
  }

  #attr-symptoms .attr-autonomic__item--last {
    grid-column: auto !important;
  }

  #attr-symptoms .attr-autonomic__item--empty,
  #attr-symptoms .attr-qol__item--empty {
    display: none !important;
  }

  #attr-symptoms .attr-autonomic__item:last-child,
  #attr-symptoms .attr-qol__item:not(.attr-qol__item--empty):last-of-type {
    border-bottom: 0 !important;
  }

  #attr-symptoms .attr-autonomic__icon-wrap,
  #attr-symptoms .attr-qol__icon-wrap {
    width: var(--attr-inner-icon-width) !important;
    min-width: var(--attr-inner-icon-width) !important;
    height: 78px !important;
  }

  #attr-symptoms .attr-autonomic__copy,
  #attr-symptoms .attr-qol__copy {
    width: var(--attr-inner-copy-width) !important;
    max-width: var(--attr-inner-copy-width) !important;
    text-align: left !important;
  }
}

/* ---------------------------------------------------------
   TABLET + MOBILE: 0–992px
   Card grows, inner icon/text group stays compact and centered.
   --------------------------------------------------------- */

@media screen and (max-width: 992px) {
  #attr-symptoms .attr-autonomic__item,
  #attr-symptoms .attr-qol__item {
    width: var(--attr-inner-row-width) !important;
    max-width: var(--attr-inner-row-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #attr-symptoms .attr-autonomic__item {
    grid-template-columns:
      var(--attr-inner-icon-width)
      var(--attr-inner-copy-width) !important;

    column-gap: var(--attr-inner-gap) !important;
    min-height: 96px !important;
    padding: 8px 0 !important;
  }

  #attr-symptoms .attr-qol__item {
    grid-template-columns:
      var(--attr-inner-icon-width)
      var(--attr-inner-copy-width) !important;

    column-gap: var(--attr-inner-gap) !important;
    min-height: 108px !important;
    padding: 10px 0 !important;
  }

  #attr-symptoms .attr-autonomic__icon-wrap,
  #attr-symptoms .attr-qol__icon-wrap {
    width: var(--attr-inner-icon-width) !important;
    min-width: var(--attr-inner-icon-width) !important;
  }

  #attr-symptoms .attr-autonomic__copy,
  #attr-symptoms .attr-qol__copy {
    width: var(--attr-inner-copy-width) !important;
    max-width: var(--attr-inner-copy-width) !important;
    min-width: 0 !important;
  }

  #attr-symptoms .attr-autonomic__name {
    font-size: 15px !important;
    line-height: 18px !important;
  }

  #attr-symptoms .attr-autonomic__description {
    font-size: 14px !important;
    line-height: 17px !important;
  }

  #attr-symptoms .attr-qol__value {
    font-size: 28px !important;
    line-height: 30px !important;
  }

  #attr-symptoms .attr-qol__patients {
    font-size: 16px !important;
    line-height: 19px !important;
  }

  #attr-symptoms .attr-qol__description {
    font-size: 14px !important;
    line-height: 17px !important;
  }
}

/* ---------------------------------------------------------
   PHONE REFINEMENT
   Keeps the compact reference proportions at 390px.
   --------------------------------------------------------- */

@media screen and (max-width: 480px) {
  #attr-symptoms {
    --attr-inner-row-width: 286px;
    --attr-inner-icon-width: 92px;
    --attr-inner-copy-width: 150px;
    --attr-inner-gap: 12px;
  }

  #attr-symptoms .attr-autonomic__card,
  #attr-symptoms .attr-qol__card {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  #attr-symptoms .attr-autonomic__intro,
  #attr-symptoms .attr-qol__card-title {
    width: 286px !important;
    max-width: calc(100% - 8px) !important;
  }
}

/* Very narrow phones */
@media screen and (max-width: 340px) {
  #attr-symptoms {
    --attr-inner-row-width: 260px;
    --attr-inner-icon-width: 82px;
    --attr-inner-copy-width: 140px;
    --attr-inner-gap: 10px;
  }
}

/* =========================================================
   FINAL IPAD PRO 1024px FIX
   Desktop-style cards at 993px–1199px and restore page scroll.
   Keep this block at the ABSOLUTE END of the stylesheet.
   ========================================================= */

@media screen and (min-width: 993px) and (max-width: 1199px) {

  /* -------------------------------------------------------
     1. RESTORE NORMAL DOCUMENT HEIGHT AND VERTICAL SCROLL
     ------------------------------------------------------- */

  html,
  body,
  #attr-symptoms,
  #attr-symptoms-section,
  #attr-symptoms .root,
  #attr-symptoms .container,
  #attr-symptoms .responsivegrid,
  #attr-symptoms .cmp-container,
  #attr-symptoms .aem-Grid,
  #attr-symptoms .aem-GridColumn,
  #attr-symptoms .text,
  #attr-symptoms .cmp-text {
    height: auto !important;
    max-height: none !important;
    overflow-y: visible !important;
  }

  html,
  body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  #attr-symptoms,
  #attr-symptoms-section {
    min-height: 0 !important;
    overflow: visible !important;
  }

  /* Do not clip the bottom of either section/card */
  #attr-symptoms .attr-autonomic,
  #attr-symptoms .attr-qol,
  #attr-symptoms .attr-autonomic__card,
  #attr-symptoms .attr-qol__card,
  #attr-symptoms .attr-autonomic__grid,
  #attr-symptoms .attr-qol__grid {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* -------------------------------------------------------
     2. PLACE BOTH SECTIONS IN THE RIGHT CONTENT COLUMN
     Sidebar = 224px, gap = 14px
     ------------------------------------------------------- */

  #attr-symptoms .attr-autonomic,
  #attr-symptoms .attr-qol {
    width: calc(100% - 238px) !important;
    max-width: 1001px !important;

    margin-left: 238px !important;
    margin-right: 0 !important;

    padding: 30px 18px 40px !important;
    box-sizing: border-box !important;
  }

  #attr-symptoms .attr-autonomic__heading,
  #attr-symptoms .attr-autonomic__lead,
  #attr-symptoms .attr-autonomic__overview,
  #attr-symptoms .attr-autonomic__divider,
  #attr-symptoms .attr-autonomic__eyebrow,
  #attr-symptoms .attr-qol__heading,
  #attr-symptoms .attr-qol__eyebrow,
  #attr-symptoms .attr-autonomic__card,
  #attr-symptoms .attr-qol__card,
  #attr-symptoms .attr-autonomic__callout,
  #attr-symptoms .attr-qol__callout {
    width: 100% !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* -------------------------------------------------------
     3. IPAD PRO USES DESKTOP-LIKE THREE-COLUMN CONTENT
     Slightly reduced dimensions to fit the available width.
     ------------------------------------------------------- */

  #attr-symptoms .attr-autonomic__grid,
  #attr-symptoms .attr-qol__grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    column-gap: 14px !important;
    row-gap: 0 !important;
    width: 100% !important;
  }

  #attr-symptoms .attr-autonomic__item,
  #attr-symptoms .attr-qol__item {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    text-align: left !important;
  }

  #attr-symptoms .attr-autonomic__item {
    display: grid !important;
    grid-template-columns: 50px minmax(0, 1fr) !important;
    align-items: center !important;
    column-gap: 7px !important;
    min-height: 100px !important;
    padding: 9px 0 !important;
  }

  #attr-symptoms .attr-qol__item {
    display: grid !important;
    grid-template-columns: 56px minmax(0, 1fr) !important;
    align-items: center !important;
    column-gap: 8px !important;
    min-height: 112px !important;
    padding: 10px 0 !important;
  }

  #attr-symptoms .attr-autonomic__item:nth-child(n + 4),
  #attr-symptoms .attr-qol__item:nth-child(n + 7) {
    border-bottom: 0 !important;
  }

  #attr-symptoms .attr-autonomic__item--last {
    grid-column: 2 !important;
  }

  #attr-symptoms .attr-autonomic__item--empty,
  #attr-symptoms .attr-qol__item--empty {
    display: block !important;
    visibility: hidden !important;
    pointer-events: none !important;
    min-height: 1px !important;
    border: 0 !important;
  }

  #attr-symptoms .attr-autonomic__icon-wrap {
    width: 50px !important;
    min-width: 50px !important;
    height: 64px !important;
  }

  #attr-symptoms .attr-qol__icon-wrap {
    width: 56px !important;
    min-width: 56px !important;
    height: 68px !important;
  }

  #attr-symptoms .attr-autonomic__icon {
    max-width: 50px !important;
    max-height: 62px !important;
  }

  #attr-symptoms .attr-qol__icon {
    max-width: 56px !important;
    max-height: 66px !important;
  }

  #attr-symptoms .attr-autonomic__copy,
  #attr-symptoms .attr-qol__copy {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    text-align: left !important;
  }

  #attr-symptoms .attr-autonomic__name {
    font-size: 13px !important;
    line-height: 16px !important;
  }

  #attr-symptoms .attr-autonomic__description {
    font-size: 12px !important;
    line-height: 15px !important;
  }

  #attr-symptoms .attr-qol__value {
    font-size: 25px !important;
    line-height: 27px !important;
  }

  #attr-symptoms .attr-qol__patients {
    font-size: 14px !important;
    line-height: 17px !important;
  }

  #attr-symptoms .attr-qol__description {
    font-size: 12px !important;
    line-height: 15px !important;
  }

  /* Card headings can be slightly smaller at 1024px */
  #attr-symptoms .attr-autonomic__intro,
  #attr-symptoms .attr-qol__card-title {
    max-width: 620px !important;
    font-size: 14px !important;
    line-height: 18px !important;
  }

  /* Callouts remain full-width and horizontal like desktop */
  #attr-symptoms .attr-autonomic__callout,
  #attr-symptoms .attr-qol__callout {
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) !important;
    min-height: 66px !important;
    padding: 11px 16px !important;
    overflow: visible !important;
  }
}

/* =========================================================
   FINAL IPAD MINI RED-FLAGS PANEL WIDTH FIX
   Applies to tablet widths only. Keep this block at the
   absolute end of the stylesheet.
   ========================================================= */

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

  /*
   * Remove width restrictions from the AEM wrappers that
   * contain #attr-body-figure.
   */
  #attr-symptoms .container:has(#attr-body-figure),
  #attr-symptoms .responsivegrid:has(#attr-body-figure),
  #attr-symptoms .cmp-container:has(#attr-body-figure),
  #attr-symptoms .aem-Grid:has(#attr-body-figure),
  #attr-symptoms .aem-GridColumn:has(#attr-body-figure),
  #attr-symptoms .text:has(#attr-body-figure),
  #attr-symptoms .cmp-text:has(#attr-body-figure) {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;

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

    padding-left: 0 !important;
    padding-right: 0 !important;

    box-sizing: border-box !important;
  }

  /*
   * Expand the complete navy panel across the available
   * tablet viewport while preserving small outer gutters.
   */
  #attr-symptoms #attr-body-figure {
    display: grid !important;

    grid-template-columns: 185px minmax(0, 1fr) !important;
    grid-template-rows: 54px 46px minmax(250px, 1fr) !important;

    column-gap: 16px !important;
    row-gap: 14px !important;

    width: calc(100% - 24px) !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 450px !important;

    margin: 20px auto !important;
    padding: 18px 16px 46px !important;

    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  /* Keep the silhouette column compact */
  #attr-symptoms #attr-body-figure > .text:has(#attr-body-image) {
    grid-column: 1 !important;
    grid-row: 1 / 4 !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  #attr-symptoms #attr-body-image,
  #attr-symptoms #attr-redflags-figure {
    width: 100% !important;
    max-width: 185px !important;
    min-width: 0 !important;
  }

  #attr-symptoms #attr-body-image .attr-redflags-body__image {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 380px !important;
    margin: 0 auto !important;
    object-fit: contain !important;
  }

  /* Allow the complete tab area to consume the remaining width */
  #attr-symptoms #attr-body-figure > .tabs {
    grid-column: 2 !important;
    grid-row: 2 / 4 !important;

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

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

  #attr-symptoms #attr-main-tabs {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  /*
   * Keep all five tabs inside the available width instead of
   * forcing a horizontally oversized tab row.
   */
  #attr-symptoms #attr-main-tabs .cmp-tabs__tablist {
    display: grid !important;
    grid-template-columns:
      1.05fr
      1.05fr
      1.25fr
      1.35fr
      0.95fr !important;

    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  #attr-symptoms #attr-main-tabs .cmp-tabs__tab {
    min-width: 0 !important;
    padding: 6px 5px !important;
    font-size: 11px !important;
    line-height: 13px !important;
    white-space: normal !important;
  }

  /* Expand the active white content panel with the tab area */
  #attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 250px !important;
    min-height: 250px !important;
    padding: 18px 18px !important;
    box-sizing: border-box !important;
  }

  #attr-symptoms #attr-main-tabs .attr-tab-content {
    display: grid !important;
    grid-template-columns: 112px minmax(0, 1fr) !important;
    column-gap: 18px !important;

    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 214px !important;

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

  #attr-symptoms #attr-main-tabs .attr-tab-content__image {
    width: 112px !important;
    min-width: 112px !important;
    height: 210px !important;
  }

  #attr-symptoms #attr-main-tabs .attr-tab-content__image img {
    max-width: 112px !important;
    max-height: 205px !important;
  }

  #attr-symptoms #attr-main-tabs .attr-tab-content__copy {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  #attr-symptoms #attr-main-tabs .attr-tab-content__copy h3 {
    font-size: 15px !important;
    line-height: 18px !important;
  }

  #attr-symptoms #attr-main-tabs .attr-tab-content__copy p {
    font-size: 13px !important;
    line-height: 17px !important;
  }
}

/* Slightly tighter layout for 701px–800px tablets */
@media screen and (min-width: 701px) and (max-width: 800px) {
  #attr-symptoms #attr-body-figure {
    grid-template-columns: 170px minmax(0, 1fr) !important;
    width: calc(100% - 20px) !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  #attr-symptoms #attr-body-image,
  #attr-symptoms #attr-redflags-figure {
    max-width: 170px !important;
  }

  #attr-symptoms #attr-main-tabs .cmp-tabs__tab {
    font-size: 10px !important;
    line-height: 12px !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  #attr-symptoms #attr-main-tabs .attr-tab-content {
    grid-template-columns: 100px minmax(0, 1fr) !important;
    column-gap: 14px !important;
  }

  #attr-symptoms #attr-main-tabs .attr-tab-content__image {
    width: 100px !important;
    min-width: 100px !important;
  }

  #attr-symptoms #attr-main-tabs .attr-tab-content__image img {
    max-width: 100px !important;
  }
}

/* =========================================================
   FINAL MOBILE–TABLET FLUID RED-FLAGS LAYOUT
   Same structure/content from 701px to 992px.
   Only the outer width and available columns grow.
   Keep this block at the absolute end of the stylesheet.
   ========================================================= */

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

  /* Remove AEM wrapper width restrictions */
  #attr-symptoms .container:has(#attr-body-figure),
  #attr-symptoms .responsivegrid:has(#attr-body-figure),
  #attr-symptoms .cmp-container:has(#attr-body-figure),
  #attr-symptoms .aem-Grid:has(#attr-body-figure),
  #attr-symptoms .aem-GridColumn:has(#attr-body-figure),
  #attr-symptoms .text:has(#attr-body-figure),
  #attr-symptoms .cmp-text:has(#attr-body-figure) {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  /*
   * Preserve the same two-column layout at every tablet width.
   * Only the panel width and the two columns grow fluidly.
   */
  #attr-symptoms #attr-body-figure {
    display: grid !important;

    grid-template-columns:
      clamp(150px, 22vw, 190px)
      minmax(0, 1fr) !important;

    grid-template-rows:
      auto
      auto
      minmax(280px, auto) !important;

    column-gap: clamp(14px, 2.2vw, 20px) !important;
    row-gap: 14px !important;

    width: calc(100% - 24px) !important;
    max-width: 940px !important;
    min-width: 0 !important;
    min-height: 470px !important;

    margin: 20px auto !important;
    padding:
      20px
      clamp(14px, 2vw, 20px)
      44px !important;

    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  /* Heading stays above the right-side tabs/content area */
  #attr-symptoms #attr-body-figure > .text:has(#attr-panel-heading) {
    grid-column: 2 !important;
    grid-row: 1 !important;

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

    width: 100% !important;
    min-width: 0 !important;
    min-height: 50px !important;

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

  #attr-symptoms
  #attr-panel-heading
  .attr-redflags-panel__heading {
    width: 100% !important;
    max-width: 540px !important;

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

    font-size: clamp(14px, 1.9vw, 17px) !important;
    line-height: 1.2 !important;
    text-align: center !important;
  }

  /* Silhouette remains in the left column */
  #attr-symptoms #attr-body-figure > .text:has(#attr-body-image) {
    grid-column: 1 !important;
    grid-row: 1 / 4 !important;

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

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

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

    overflow: hidden !important;
  }

  #attr-symptoms #attr-body-image,
  #attr-symptoms #attr-redflags-figure {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 390px !important;
  }

  #attr-symptoms
  #attr-body-image
  .attr-redflags-body__image {
    display: block !important;

    width: auto !important;
    height: auto !important;

    max-width: 100% !important;
    max-height: 410px !important;

    margin: 0 auto !important;

    object-fit: contain !important;
    object-position: center !important;
  }

  /* Tabs and white content stay in the right column */
  #attr-symptoms #attr-body-figure > .tabs {
    grid-column: 2 !important;
    grid-row: 2 / 4 !important;

    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 100% !important;

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

  #attr-symptoms #attr-main-tabs {
    display: flex !important;
    flex-direction: column !important;

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

  /*
   * Five tabs always remain in one row.
   * Their widths grow with the available space.
   */
  #attr-symptoms
  #attr-main-tabs
  .cmp-tabs__tablist {
    display: grid !important;

    grid-template-columns:
      1.05fr
      1.05fr
      1.25fr
      1.35fr
      0.95fr !important;

    width: 100% !important;
    min-width: 0 !important;
    min-height: 52px !important;

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

    overflow: hidden !important;
  }

  #attr-symptoms
  #attr-main-tabs
  .cmp-tabs__tab {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-width: 0 !important;
    min-height: 52px !important;

    padding: 6px 5px !important;

    font-size: clamp(10px, 1.45vw, 13px) !important;
    line-height: 1.15 !important;

    text-align: center !important;
    white-space: normal !important;
  }

  /* Active panel grows with the right column */
  #attr-symptoms
  #attr-main-tabs
  .cmp-tabs__tabpanel {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;

    height: auto !important;
    min-height: 280px !important;
    max-height: none !important;

    margin: 0 !important;
    padding:
      18px
      clamp(16px, 2.2vw, 24px) !important;

    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  #attr-symptoms
  #attr-main-tabs
  .cmp-tabs__tabpanel.cmp-tabs__tabpanel--active {
    display: flex !important;
    align-items: center !important;
  }

  /* Reset inner AEM wrappers */
  #attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel .container,
  #attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel .responsivegrid,
  #attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel .cmp-container,
  #attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel .aem-Grid,
  #attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel .aem-GridColumn,
  #attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel .text,
  #attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel .cmp-text {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;

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

    box-sizing: border-box !important;
  }

  /*
   * Keep image + copy in the same positions.
   * Their widths scale slightly but the structure never changes.
   */
  #attr-symptoms
  #attr-main-tabs
  .attr-tab-content {
    display: grid !important;

    grid-template-columns:
      clamp(95px, 15vw, 130px)
      minmax(0, 1fr) !important;

    align-items: center !important;
    column-gap: clamp(14px, 2.2vw, 24px) !important;

    width: 100% !important;
    min-width: 0 !important;
    min-height: 240px !important;

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

    box-sizing: border-box !important;
  }

  #attr-symptoms
  #attr-main-tabs
  .attr-tab-content__image {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: clamp(95px, 15vw, 130px) !important;
    min-width: clamp(95px, 15vw, 130px) !important;
    height: 225px !important;

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

    overflow: hidden !important;
  }

  #attr-symptoms
  #attr-main-tabs
  .attr-tab-content__image img {
    display: block !important;

    width: auto !important;
    height: auto !important;

    max-width: 100% !important;
    max-height: 220px !important;

    margin: 0 auto !important;

    object-fit: contain !important;
  }

  #attr-symptoms
  #attr-main-tabs
  .attr-tab-content__copy {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

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

    text-align: left !important;
  }

  #attr-symptoms
  #attr-main-tabs
  .attr-tab-content__copy h3 {
    margin: 0 0 10px !important;

    font-size: clamp(15px, 1.9vw, 18px) !important;
    line-height: 1.2 !important;
  }

  #attr-symptoms
  #attr-main-tabs
  .attr-tab-content__copy p {
    margin: 0 0 6px !important;

    font-size: clamp(13px, 1.65vw, 15px) !important;
    line-height: 1.25 !important;
  }

  /* Disclaimer stays inside the panel */
  #attr-symptoms
  #attr-panel-heading
  .attr-redflags-panel__disclaimer {
    position: absolute !important;

    left: 0 !important;
    bottom: -399px !important;

    width: 100% !important;

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

    font-size: 12px !important;
    line-height: 15px !important;

    text-align: left !important;
    white-space: normal !important;
  }
}

/* =========================================================
   FINAL AUTONOMIC + QUALITY-OF-LIFE DESKTOP ALIGNMENT
   KEEP THIS AT THE ABSOLUTE END OF THE CSS FILE
   ========================================================= */

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

  /* ---------------------------------------------------------
     1. ALIGN BOTH COMPLETE SECTIONS WITH THE RIGHT COLUMN
     Sidebar width: 224px
     Column gap: 14px
     Total left offset: 238px
     --------------------------------------------------------- */

  #attr-symptoms .attr-autonomic,
  #attr-symptoms .attr-qol {
    width: 100% !important;
    max-width: 1250px !important;

    margin: 0 auto !important;
    padding: 30px 0 38px 238px !important;

    box-sizing: border-box !important;
    text-align: center !important;
  }

  /* Both section headings use exactly the same width */
  #attr-symptoms .attr-autonomic__heading,
  #attr-symptoms .attr-autonomic__lead,
  #attr-symptoms .attr-autonomic__overview,
  #attr-symptoms .attr-autonomic__divider,
  #attr-symptoms .attr-autonomic__eyebrow,
  #attr-symptoms .attr-qol__heading,
  #attr-symptoms .attr-qol__eyebrow {
    width: 100% !important;
    max-width: 1001px !important;

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

    box-sizing: border-box !important;
  }

  /* ---------------------------------------------------------
     2. BOTH CARDS HAVE THE SAME WIDTH AND TOP ALIGNMENT
     --------------------------------------------------------- */

  #attr-symptoms .attr-autonomic__card,
  #attr-symptoms .attr-qol__card {
    display: block !important;

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

    margin: 0 auto 28px !important;
    padding: 20px 24px 18px !important;

    box-sizing: border-box !important;
    overflow: visible !important;

    background: #ffffff !important;
    border: 1px solid #c8d1ea !important;
    border-radius: 22px !important;
    box-shadow: 0 2px 11px rgba(0, 33, 95, 0.16) !important;
  }

  /* Same heading spacing inside both cards */
  #attr-symptoms .attr-autonomic__intro,
  #attr-symptoms .attr-qol__card-title {
    width: 100% !important;
    max-width: 680px !important;

    min-height: 38px !important;

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

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

    box-sizing: border-box !important;
    text-align: center !important;
  }

  /* ---------------------------------------------------------
     3. THREE EQUAL COLUMNS FOR BOTH CARDS
     --------------------------------------------------------- */

  #attr-symptoms .attr-autonomic__grid,
  #attr-symptoms .attr-qol__grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;

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

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

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

    box-sizing: border-box !important;
    overflow: visible !important;
  }

  /* ---------------------------------------------------------
     4. COMMON ITEM ALIGNMENT
     --------------------------------------------------------- */

  #attr-symptoms .attr-autonomic__item,
  #attr-symptoms .attr-qol__item {
    position: relative !important;

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

    margin: 0 !important;

    box-sizing: border-box !important;
    text-align: left !important;

    /* Remove the old CSS-created line */
    border: 0 !important;
    border-bottom: 0 !important;
    border-image: none !important;
  }

  #attr-symptoms .attr-autonomic__item {
    display: grid !important;
    grid-template-columns: 64px minmax(0, 1fr) !important;
    align-items: center !important;

    column-gap: 10px !important;

    min-height: 104px !important;
    padding: 10px 0 16px !important;
  }

  #attr-symptoms .attr-qol__item {
    display: grid !important;
    grid-template-columns: 72px minmax(0, 1fr) !important;
    align-items: center !important;

    column-gap: 10px !important;

    min-height: 112px !important;
    padding: 12px 0 17px !important;
  }

  /* ---------------------------------------------------------
     5. DAM IMAGE USED AS THE SEPARATOR LINE

     Replace the URL below with your actual DAM line image.
     The same image is currently used for both cards.
     --------------------------------------------------------- */

  #attr-symptoms .attr-autonomic__item::after,
  #attr-symptoms .attr-qol__item::after {
    content: "" !important;

    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    display: block !important;

    width: 100% !important;
    height: 2px !important;

    background-image:
      url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/SOFT%20separator%20line%20.png") !important;

    background-repeat: no-repeat !important;
    background-position: center bottom !important;
    background-size: 100% 2px !important;

    border: 0 !important;
    pointer-events: none !important;
  }

  /* ---------------------------------------------------------
     6. REMOVE THE LINE FROM THE FINAL AUTONOMIC ROW

     Items 1–3 = first row
     Items 4–6 = second row
     Item 7 = centred final row
     --------------------------------------------------------- */

  #attr-symptoms .attr-autonomic__item:nth-child(n + 7)::after {
    content: none !important;
    display: none !important;
    background-image: none !important;
  }

  /* ---------------------------------------------------------
     7. REMOVE THE LINE FROM THE FINAL QUALITY-OF-LIFE ROW

     Items 1–3 = first row
     Items 4–6 = second row
     Item 7 = centred final row
     --------------------------------------------------------- */

  #attr-symptoms .attr-qol__item:nth-child(n + 7)::after {
    content: none !important;
    display: none !important;
    background-image: none !important;
  }

  /* Centre the real seventh item in both cards */
  #attr-symptoms .attr-autonomic__item--last,
  #attr-symptoms .attr-autonomic__item:nth-child(7),
  #attr-symptoms .attr-qol__item:nth-child(7),
  #attr-symptoms
    .attr-qol__item:not(.attr-qol__item--empty):last-of-type {
    grid-column: 2 !important;
  }

  /* Keep layout placeholders hidden */
  #attr-symptoms .attr-autonomic__item--empty,
  #attr-symptoms .attr-qol__item--empty {
    display: block !important;
    visibility: hidden !important;
    pointer-events: none !important;

    min-height: 1px !important;

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

  #attr-symptoms .attr-autonomic__item--empty::after,
  #attr-symptoms .attr-qol__item--empty::after {
    content: none !important;
    display: none !important;
    background-image: none !important;
  }

  /* ---------------------------------------------------------
     8. ICON AND TEXT ALIGNMENT
     --------------------------------------------------------- */

  #attr-symptoms .attr-autonomic__icon-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 64px !important;
    min-width: 64px !important;
    height: 72px !important;

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

  #attr-symptoms .attr-qol__icon-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 72px !important;
    min-width: 72px !important;
    height: 78px !important;

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

  #attr-symptoms .attr-autonomic__icon {
    display: block !important;

    width: auto !important;
    height: auto !important;
    max-width: 64px !important;
    max-height: 70px !important;

    margin: 0 auto !important;
    object-fit: contain !important;
  }

  #attr-symptoms .attr-qol__icon {
    display: block !important;

    width: auto !important;
    height: auto !important;
    max-width: 70px !important;
    max-height: 76px !important;

    margin: 0 auto !important;
    object-fit: contain !important;
  }

  #attr-symptoms .attr-autonomic__copy,
  #attr-symptoms .attr-qol__copy {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

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

    text-align: left !important;
    box-sizing: border-box !important;
  }

  /* ---------------------------------------------------------
     9. CALLOUTS ALSO MATCH THE CARD WIDTH
     --------------------------------------------------------- */

  #attr-symptoms .attr-autonomic__callout,
  #attr-symptoms .attr-qol__callout {
    width: 100% !important;
    max-width: 1001px !important;

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

@media screen and (min-width: 992px) {
  #attr-symptoms .banner-img {
    background-image: url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/banner.png") !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
  }
}

/* =========================================================
   FINAL INTERNAL FOOTER DESKTOP ALIGNMENT
   Two equal 490px cards + 20px gap = 1000px total.
   Keep this block at the absolute end of the stylesheet.
   ========================================================= */

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

  #attr-symptoms .sec3-mainbg {
    position: relative !important;
    isolation: isolate !important;

    display: grid !important;
    grid-template-columns: repeat(2, 490px) !important;
    grid-auto-rows: auto !important;
    justify-content: center !important;
    align-items: start !important;
    column-gap: 20px !important;
    row-gap: 0 !important;

    width: 100% !important;
    min-height: 303px !important;
    height: auto !important;

    margin: 0 !important;
    padding: 28px 0 115px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;

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

  /* Keep the background visible behind all footer content */
  #attr-symptoms .sec3-mainbg::before {
    content: none !important;
    display: none !important;
  }

  #attr-symptoms .sec3-mainbg > .patient-box,
  #attr-symptoms .sec3-mainbg > .attr-footer-card {
    position: relative !important;
    z-index: 1 !important;

    grid-column: auto !important;

    flex: none !important;
    width: 490px !important;
    min-width: 490px !important;
    max-width: 490px !important;

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

    /* Align the 1000px footer row with the 1001px right content column */
    transform: translateX(119px) !important;
  }

  #attr-symptoms .sec3-mainbg .image-shadow {
    position: static !important;
    display: block !important;

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

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

    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  #attr-symptoms .sec3-mainbg .border-box {
    position: relative !important;

    display: grid !important;
    grid-template-columns: 72px minmax(0, 1fr) !important;
    grid-template-rows: minmax(88px, auto) auto !important;
    align-items: center !important;
    column-gap: 16px !important;

    width: 490px !important;
    min-width: 490px !important;
    max-width: 490px !important;
    min-height: 150px !important;
    height: auto !important;

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

    background: #e9ebf2 !important;
    border: 1px solid #bfc8e6 !important;
    border-radius: 18px 18px 18px 0 !important;
    overflow: visible !important;
  }

  #attr-symptoms .sec3-mainbg .smallbox-icon {
    grid-column: 1 !important;
    grid-row: 1 !important;

    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 62px !important;
    max-height: 76px !important;

    margin: 0 auto !important;
    object-fit: contain !important;
  }

  #attr-symptoms .sec3-mainbg .smallbox-title {
    grid-column: 2 !important;
    grid-row: 1 !important;

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

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

    color: #151515 !important;
    font-family: "Kanit-Regular", "Kanit", Arial, sans-serif !important;
    font-size: 15px !important;
    line-height: 18px !important;
    text-align: left !important;
  }

  #attr-symptoms .sec3-mainbg .cta-bottom-home {
    position: static !important;

    grid-column: 1 / -1 !important;
    grid-row: 2 !important;

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

    width: 100% !important;
    margin: 12px 0 -40px !important;
    padding: 0 !important;

    transform: none !important;
    z-index: 3 !important;
  }

  #attr-symptoms .sec3-mainbg .middle-bottom-cta {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    min-width: 210px !important;
    max-width: 310px !important;
    min-height: 34px !important;

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

    font-size: 11px !important;
    line-height: 14px !important;
    white-space: nowrap !important;
  }

  #attr-symptoms .sec3-mainbg .home-cta-1 .middle-bottom-cta {
    min-width: 275px !important;
  }
}

/* Tablet and mobile remain stacked and fluid */
@media screen and (max-width: 992px) {
  #attr-symptoms .sec3-mainbg {
    background-image: url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/Internal%20Footer%20image_desktop.jpg") !important;
    background-repeat: no-repeat !important;
    background-position: center bottom !important;
    background-size: cover !important;
  }
}

/* =========================================================
   FINAL DESKTOP HERO HEIGHT FIX
   Keep this at the absolute end of the stylesheet.
   The source image is 1443 × 303, so it is displayed at its
   native desktop height instead of filling the viewport.
   ========================================================= */

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

  #attr-symptoms .banner-img,
  #page-1a38cc0b2e .banner-img,
  .banner-img {
    background-image:
      url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/banner.png") !important;

    background-repeat: no-repeat !important;
    background-position: center top !important;

    /* Exact native image dimensions */
    background-size: 1443px 303px !important;

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

    aspect-ratio: auto !important;

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

    position: relative !important;
    top: 0 !important;
    z-index: 0 !important;

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

  /* Prevent the inner content from increasing the hero height */
  #attr-symptoms .banner-img > *,
  #page-1a38cc0b2e .banner-img > *,
  .banner-img > * {
    max-height: 303px !important;
    box-sizing: border-box !important;
  }

  /* Remove old scroll positioning based on a tall hero */
  #attr-symptoms .banner-img .scroll,
  #attr-symptoms p.scroll.attr-sm {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 12px !important;
    top: auto !important;
    margin: 0 !important;
  }
}

/* =========================================================
   FINAL HERO FULL-WIDTH + TEXT ALIGNMENT FIX
   Keep this block at the absolute end of the stylesheet.
   ========================================================= */

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

  /* Remove white side borders by breaking the hero out to full viewport width */
  #attr-symptoms .banner-img,
  #page-1a38cc0b2e .banner-img,
  .banner-img {
    width: 100vw !important;
    max-width: none !important;

    height: 303px !important;
    min-height: 303px !important;
    max-height: 303px !important;

    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;

    background-image:
      url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/banner.png") !important;

    background-repeat: no-repeat !important;
    background-position: center center !important;

    /* Fill the full width and remove the white side gaps */
    background-size: cover !important;

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

    position: relative !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  /* Main hero content wrapper */
  #attr-symptoms .banner-block,
  .banner-block {
    width: calc(100% - 80px) !important;
    max-width: 1250px !important;

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

    box-sizing: border-box !important;
  }

  /* Small heading */
  #attr-symptoms .banner-txt1,
  .banner-txt1 {
    width: 100% !important;
    max-width: 1000px !important;

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

    font-size: 14px !important;
    line-height: 17px !important;
    text-align: left !important;
  }

  /* Main title — wider so it matches the reference instead of stacking */
  #attr-symptoms .banner-txt2,
  .banner-txt2 {
    width: 100% !important;
    max-width: 1120px !important;

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

    font-size: 39px !important;
    line-height: 43px !important;
    letter-spacing: -0.4px !important;
    text-align: left !important;
  }

  /* Remove authored line breaks that force the narrow stacked layout */
  #attr-symptoms .banner-txt2 br,
  .banner-txt2 br {
    display: none !important;
  }

  /* Keep a controlled two-line title width */
  #attr-symptoms .banner-txt2 {
    max-width: 1080px !important;
  }

  /* Supporting copy */
  #attr-symptoms .banner-txt3,
  .banner-txt3 {
    width: 100% !important;
    max-width: 700px !important;

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

    font-size: 14px !important;
    line-height: 17px !important;
    text-align: left !important;
  }

  /* Keep the scroll CTA at the bottom centre */
  #attr-symptoms .banner-img .scroll,
  #attr-symptoms p.scroll.attr-sm,
  .banner-img .scroll {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    bottom: 12px !important;
    top: auto !important;

    margin: 0 !important;
    transform: translateX(-50%) !important;

    font-size: 12px !important;
    line-height: 15px !important;
    white-space: nowrap !important;
  }
}

#attr-symptoms .banner-txt2 span {
    color: #ffffff !important;
}

/* =========================================================
   FINAL MOBILE RED-FLAGS PANEL OVERRIDE
   Added at the end so no earlier site CSS needs to be edited.
   ========================================================= */

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

  #attr-symptoms #attr-body-figure {
    display: flex !important;
    flex-direction: column !important;

    width: calc(100% - 20px) !important;
    max-width: 620px !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 12px auto 26px !important;
    padding: 18px 14px 24px !important;

    box-sizing: border-box !important;
    overflow: hidden !important;
    border-radius: 22px !important;

    background-color: #001b45 !important;
    background-image:
      url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/Multiple%20Layers%20%282%29%20%283%29.png") !important;
    background-repeat: no-repeat !important;
    background-position: center top !important;

    /*
     * Preserve the mobile background's natural proportions.
     * Unlike cover, contain does not crop or stretch the image.
     */
    background-size: contain !important;
  }

  /* Mobile heading */
  #attr-symptoms #attr-body-figure > .text:has(#attr-panel-heading) {
    order: 1 !important;

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

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

  #attr-symptoms #attr-panel-heading,
  #attr-symptoms #attr-panel-heading .attr-redflags-panel {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

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

  #attr-symptoms #attr-panel-heading .attr-redflags-panel__heading {
    width: 100% !important;
    max-width: 340px !important;

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

    font-size: 14px !important;
    line-height: 18px !important;
    text-align: center !important;
  }

  /* Mobile body silhouette */
  #attr-symptoms #attr-body-figure > .text:has(#attr-body-image) {
    order: 2 !important;

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

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

  #attr-symptoms #attr-body-image,
  #attr-symptoms #attr-redflags-figure {
    width: 100% !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

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

  #attr-symptoms #attr-body-image .attr-redflags-body__image {
    display: block !important;

    width: auto !important;
    height: auto !important;

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

    margin: 0 auto !important;

    object-fit: contain !important;
    object-position: center top !important;
  }

  /* Mobile tabs */
  #attr-symptoms #attr-body-figure > .tabs {
    order: 3 !important;

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

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

  #attr-symptoms #attr-main-tabs {
    width: 100% !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  #attr-symptoms #attr-main-tabs .cmp-tabs__tablist {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  #attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel,
  #attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel.cmp-tabs__tabpanel--active {
    width: 100% !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    padding: 18px 16px !important;
    box-sizing: border-box !important;
  }

  #attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel .container,
  #attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel .responsivegrid,
  #attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel .cmp-container,
  #attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel .aem-Grid {
    width: 100% !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  #attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel .aem-Grid {
    display: block !important;
  }

  #attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel .image,
  #attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel .text {
    width: 100% !important;
    height: auto !important;
  }

  #attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel .image img,
  #attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel .cmp-image__image {
    display: block !important;

    width: auto !important;
    height: auto !important;

    max-width: 130px !important;
    max-height: none !important;

    margin: 0 auto 16px !important;

    object-fit: contain !important;
  }

  /* Disclaimer remains in normal document flow */
  #attr-symptoms #attr-panel-heading .attr-redflags-panel__disclaimer {
    position: static !important;

    width: 100% !important;

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

    text-align: center !important;
    white-space: normal !important;
  }
}

/* =========================================================
   FIX MOBILE HERO HEIGHT
   ========================================================= */

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

  #attr-symptoms .banner-img,
  .banner-img {
    width: 100% !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    aspect-ratio: auto !important;

    background-repeat: no-repeat !important;
    background-position: center top !important;
    background-size: contain !important;

    display: block !important;
    margin: 0 !important;
  }
}

/* =========================================================
   FINAL MOBILE CORRECTION
   - Restore the original mobile HERO background
   - Remove white side gutters
   - Keep the NEW background only on #attr-body-figure
   Keep this block at the absolute end of the stylesheet.
   ========================================================= */

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

  /* ---------------------------------------------------------
     MOBILE HERO: restore original starry background
     --------------------------------------------------------- */
  #attr-symptoms .banner-img,
  #page-1a38cc0b2e .banner-img,
  .banner-img {
    position: relative !important;

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

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

    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;

    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;

    background-image:
      url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/starry%20background.png") !important;

    background-repeat: no-repeat !important;
    background-position: center top !important;
    background-size: cover !important;

    border: 0 !important;
    border-radius: 0 !important;
    z-index: 0 !important;
  }

  /* Remove AEM wrapper side padding around the hero only */
  #attr-symptoms .text:has(.banner-img),
  #attr-symptoms .cmp-text:has(.banner-img),
  #attr-symptoms .cmp-text > div:has(> .banner-img) {
    width: 100% !important;
    max-width: none !important;

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

    box-sizing: border-box !important;
    overflow: visible !important;
  }

  /* Restore sensible mobile hero text positioning */
  #attr-symptoms .banner-img .banner-block,
  .banner-img .banner-block {
    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 105px 20px 70px !important;

    box-sizing: border-box !important;
  }

  #attr-symptoms .banner-txt1,
  .banner-txt1 {
    width: 100% !important;

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

    font-size: 14px !important;
    line-height: 18px !important;
    white-space: normal !important;
  }

  #attr-symptoms .banner-txt2,
  .banner-txt2 {
    width: 100% !important;

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

    font-size: 30px !important;
    line-height: 36px !important;
    white-space: normal !important;
  }

  #attr-symptoms .banner-txt3,
  .banner-txt3 {
    width: 100% !important;
    max-width: 335px !important;

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

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

  #attr-symptoms .banner-img .scroll.mobile-only,
  #attr-symptoms .banner-img .scroll,
  .banner-img .scroll.mobile-only {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 20px !important;
    top: auto !important;

    width: 100% !important;

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

    text-align: center !important;
  }

  #attr-symptoms .banner-img .scroll.mobile-only a,
  #attr-symptoms .banner-img .scroll a {
    position: static !important;
    top: auto !important;
    padding-right: 0 !important;
  }

  /* ---------------------------------------------------------
     RED-FLAGS PANEL: use the NEW mobile panel background here
     --------------------------------------------------------- */
  #attr-symptoms #attr-body-figure {
    background-color: #001b45 !important;
    background-image:
      url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/Multiple%20Layers%20%282%29%20%283%29.png") !important;

    background-repeat: no-repeat !important;
    background-position: center top !important;
    background-size: cover !important;
  }
}

/* =========================================================
   FINAL MOBILE RED-FLAGS PANEL RESTORE
   Restores: heading on top, body image left, tabs right.
   Keep this block at the absolute end of the stylesheet.
   ========================================================= */

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

  #attr-symptoms #attr-body-figure {
    display: grid !important;
    grid-template-columns: 132px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;

    column-gap: 10px !important;
    row-gap: 14px !important;

    width: calc(100% - 20px) !important;
    max-width: none !important;

    height: auto !important;
    min-height: 520px !important;
    max-height: none !important;

    margin: 12px auto 26px !important;
    padding: 16px 12px 22px !important;

    box-sizing: border-box !important;
    overflow: hidden !important;
    border-radius: 18px !important;

    background-color: #001b45 !important;
    background-image:
      url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/Multiple%20Layers%20%282%29%20%283%29.png") !important;
    background-repeat: no-repeat !important;
    background-position: center top !important;
    background-size: cover !important;
  }

  /* Heading spans the full panel width */
  #attr-symptoms #attr-body-figure > .text:has(#attr-panel-heading) {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;

    order: initial !important;

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

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

  #attr-symptoms #attr-panel-heading .attr-redflags-panel__heading {
    width: 100% !important;
    max-width: 330px !important;

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

    font-size: 14px !important;
    line-height: 18px !important;
    text-align: center !important;
  }

  /* Body silhouette stays in the left column */
  #attr-symptoms #attr-body-figure > .text:has(#attr-body-image) {
    grid-column: 1 !important;
    grid-row: 2 !important;

    order: initial !important;

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

    width: 132px !important;
    min-width: 132px !important;

    height: auto !important;
    min-height: 390px !important;
    max-height: none !important;

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

    overflow: hidden !important;
  }

  #attr-symptoms #attr-body-image,
  #attr-symptoms #attr-redflags-figure {
    width: 132px !important;

    height: auto !important;
    min-height: 390px !important;
    max-height: none !important;

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

  #attr-symptoms #attr-body-image .attr-redflags-body__image {
    display: block !important;

    width: 132px !important;
    max-width: 132px !important;

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

    margin: 0 auto !important;

    object-fit: contain !important;
    object-position: center top !important;
  }

  /* Tabs stay in the right column */
  #attr-symptoms #attr-body-figure > .tabs {
    grid-column: 2 !important;
    grid-row: 2 !important;

    order: initial !important;

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

    height: auto !important;
    min-height: 390px !important;
    max-height: none !important;

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

    overflow: hidden !important;
  }

  #attr-symptoms #attr-main-tabs {
    width: 100% !important;
    min-width: 0 !important;

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

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

  /* Vertical mobile tab buttons */
  #attr-symptoms #attr-main-tabs .cmp-tabs__tablist {
    display: flex !important;
    flex-direction: column !important;

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

    height: auto !important;
    min-height: 0 !important;

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

    overflow: visible !important;
    border-radius: 14px !important;
    background: #ffffff !important;
  }

  #attr-symptoms #attr-main-tabs .cmp-tabs__tab {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 50px !important;

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

    font-size: 12px !important;
    line-height: 15px !important;

    border-bottom: 1px solid #d4d8e5 !important;
    border-radius: 0 !important;
  }

  #attr-symptoms #attr-main-tabs .cmp-tabs__tab:first-child {
    border-radius: 14px 14px 0 0 !important;
  }

  #attr-symptoms #attr-main-tabs .cmp-tabs__tab:last-child {
    border-bottom: 0 !important;
    border-radius: 0 0 14px 14px !important;
  }

  /* Compact tab content so it does not overflow */
  #attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel,
  #attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel.cmp-tabs__tabpanel--active {
    width: 100% !important;
    min-width: 0 !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

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

    display: none !important;

    box-sizing: border-box !important;
    overflow: hidden !important;

    border-radius: 14px !important;
  }

  #attr-symptoms
    #attr-main-tabs
    .cmp-tabs__tabpanel.cmp-tabs__tabpanel--active {
    display: block !important;
  }

  #attr-symptoms #attr-main-tabs .attr-tab-content {
    display: block !important;

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

    min-height: 0 !important;

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

  #attr-symptoms #attr-main-tabs .attr-tab-content__image {
    width: 82px !important;
    height: auto !important;
    min-width: 0 !important;

    margin: 0 auto 10px !important;
    overflow: visible !important;
  }

  #attr-symptoms #attr-main-tabs .attr-tab-content__image img {
    width: auto !important;
    height: auto !important;

    max-width: 82px !important;
    max-height: 105px !important;

    margin: 0 auto !important;
  }

  #attr-symptoms #attr-main-tabs .attr-tab-content__copy {
    width: 100% !important;
    min-width: 0 !important;
  }

  #attr-symptoms #attr-main-tabs .attr-tab-content__copy h3 {
    margin: 0 0 8px !important;

    font-size: 13px !important;
    line-height: 16px !important;
    text-align: center !important;
  }

  #attr-symptoms #attr-main-tabs .attr-tab-content__copy p,
  #attr-symptoms #attr-main-tabs .attr-tab-content__copy li {
    font-size: 11px !important;
    line-height: 14px !important;
  }

  #attr-symptoms #attr-panel-heading .attr-redflags-panel__disclaimer {
    position: static !important;

    width: 100% !important;

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

    font-size: 10px !important;
    line-height: 13px !important;
    text-align: center !important;
    white-space: normal !important;
  }
}

/* =========================================================
   FINAL MOBILE RED-FLAGS LAYOUT — REFERENCE MATCH
   CSS only. Mobile body image source can be swapped later by JS.
   Keep this block at the absolute end of the stylesheet.
   ========================================================= */

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

  /* Main panel: heading / body+tabs / full-width content */
  #attr-symptoms #attr-body-figure {
    position: relative !important;

    display: grid !important;
    grid-template-columns: 104px minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto !important;

    column-gap: 10px !important;
    row-gap: 12px !important;

    width: calc(100% - 40px) !important;
    max-width: 320px !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 12px auto 28px !important;
    padding: 16px 14px 58px !important;

    box-sizing: border-box !important;
    overflow: hidden !important;

    border-radius: 22px !important;
    background-color: #001b45 !important;
    background-image:
      url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/Multiple%20Layers%20%282%29%20%283%29.png") !important;
    background-repeat: no-repeat !important;
    background-position: center top !important;
    background-size: cover !important;
  }

  /* ---------------------------------------------------------
     HEADING — full width at top
     --------------------------------------------------------- */
  #attr-symptoms #attr-body-figure > .text:has(#attr-panel-heading) {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;

    display: block !important;

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

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

  #attr-symptoms #attr-panel-heading,
  #attr-symptoms #attr-panel-heading .attr-redflags-panel {
    width: 100% !important;

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

  #attr-symptoms #attr-panel-heading .attr-redflags-panel__heading {
    width: 100% !important;
    max-width: 275px !important;

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

    font-size: 12px !important;
    line-height: 14px !important;
    text-align: center !important;
  }

  /* ---------------------------------------------------------
     BODY IMAGE — left side of the upper row
     --------------------------------------------------------- */
  #attr-symptoms #attr-body-figure > .text:has(#attr-body-image) {
    grid-column: 1 !important;
    grid-row: 2 !important;

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

    width: 104px !important;
    min-width: 104px !important;

    height: 200px !important;
    min-height: 200px !important;
    max-height: 200px !important;

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

    overflow: hidden !important;
  }

  #attr-symptoms #attr-body-image,
  #attr-symptoms #attr-redflags-figure {
    width: 104px !important;

    height: 200px !important;
    min-height: 200px !important;
    max-height: 200px !important;

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

    overflow: hidden !important;
  }

  #attr-symptoms #attr-body-image .attr-redflags-body__image {
    display: block !important;

    width: auto !important;
    height: 200px !important;

    max-width: 104px !important;
    max-height: 200px !important;

    margin: 0 auto !important;

    object-fit: contain !important;
    object-position: center top !important;
  }

  /* ---------------------------------------------------------
     Allow tab list and tab panel to become direct grid items.
     --------------------------------------------------------- */
  #attr-symptoms #attr-body-figure > .tabs,
  #attr-symptoms #attr-main-tabs {
    display: contents !important;
  }

  /* Vertical tabs — right side of upper row */
  #attr-symptoms #attr-main-tabs .cmp-tabs__tablist {
    grid-column: 2 !important;
    grid-row: 2 !important;

    display: flex !important;
    flex-direction: column !important;

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

    height: 200px !important;
    min-height: 200px !important;
    max-height: 200px !important;

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

    overflow: hidden !important;

    background: #ffffff !important;
    border-radius: 13px !important;
  }

  #attr-symptoms #attr-main-tabs .cmp-tabs__tab {
    flex: 1 1 20% !important;

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

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

    margin: 0 !important;
    padding: 5px 7px !important;

    box-sizing: border-box !important;

    font-size: 10px !important;
    line-height: 11px !important;
    text-align: center !important;

    border: 0 !important;
    border-bottom: 1px solid #d9dce8 !important;
    border-radius: 0 !important;
  }

  #attr-symptoms #attr-main-tabs .cmp-tabs__tab:last-child {
    border-bottom: 0 !important;
  }

  #attr-symptoms #attr-main-tabs .cmp-tabs__tab.cmp-tabs__tab--active {
    color: #ffffff !important;
    background-color: #637bff !important;
  }

  /* ---------------------------------------------------------
     ACTIVE CONTENT CARD — full width below body + tabs
     --------------------------------------------------------- */
  #attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;

    display: none !important;

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

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 14px 12px !important;

    box-sizing: border-box !important;
    overflow: hidden !important;

    color: #151515 !important;
    background: #ffffff !important;
    border-radius: 13px !important;
  }

  #attr-symptoms
    #attr-main-tabs
    .cmp-tabs__tabpanel.cmp-tabs__tabpanel--active {
    display: block !important;
  }

  #attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel .container,
  #attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel .responsivegrid,
  #attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel .cmp-container,
  #attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel .aem-Grid,
  #attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel .text,
  #attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel .cmp-text {
    width: 100% !important;
    min-width: 0 !important;

    height: auto !important;
    min-height: 0 !important;

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

  #attr-symptoms #attr-main-tabs .attr-tab-content {
    display: grid !important;
    grid-template-columns: 62px minmax(0, 1fr) !important;
    column-gap: 8px !important;
    align-items: start !important;

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

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

  #attr-symptoms #attr-main-tabs .attr-tab-content__image {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;

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

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

    overflow: visible !important;
  }

  #attr-symptoms #attr-main-tabs .attr-tab-content__image img {
    display: block !important;

    width: auto !important;
    height: auto !important;

    max-width: 58px !important;
    max-height: 88px !important;

    margin: 0 auto !important;

    object-fit: contain !important;
  }

  #attr-symptoms #attr-main-tabs .attr-tab-content__copy {
    width: 100% !important;
    min-width: 0 !important;

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

  #attr-symptoms #attr-main-tabs .attr-tab-content__copy h3 {
    margin: 0 0 7px !important;
    padding: 0 !important;

    font-size: 12px !important;
    line-height: 14px !important;
    text-align: left !important;
  }

  #attr-symptoms #attr-main-tabs .attr-tab-content__copy p,
  #attr-symptoms #attr-main-tabs .attr-tab-content__copy li {
    margin: 0 0 3px !important;

    font-size: 10px !important;
    line-height: 12px !important;
    text-align: left !important;
  }

  #attr-symptoms #attr-main-tabs .attr-tab-content__copy ul {
    margin: 0 !important;
    padding-left: 14px !important;
  }

  /* ---------------------------------------------------------
     DISCLAIMER — fixed to bottom of the blue panel
     --------------------------------------------------------- */
  #attr-symptoms #attr-panel-heading .attr-redflags-panel__disclaimer {
    position: absolute !important;
    left: 14px !important;
    right: 14px !important;
    bottom: 18px !important;

    width: auto !important;

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

    font-size: 9px !important;
    line-height: 11px !important;
    text-align: center !important;
    white-space: normal !important;
  }
}

/* =========================================================
   FINAL MOBILE PANEL BACKGROUND + DISCLAIMER FIX
   Keep this block at the absolute end of the stylesheet.
   ========================================================= */

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

  /* Use only the DAM image across the complete panel */
  #attr-symptoms #attr-body-figure {
    background-color: transparent !important;
    background-image:
      url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/container.png") !important;

    background-repeat: no-repeat !important;
    background-position: center center !important;

    /* Prevent the strange cropped patch visible in the screenshot */
    background-size: 100% 100% !important;

    /* Reserve space for the disclaimer at the bottom */
    padding-bottom: 62px !important;
  }

  /*
   * The disclaimer is authored inside the heading component.
   * Make its wrappers static so the disclaimer anchors to
   * #attr-body-figure rather than overlapping the heading.
   */
  #attr-symptoms #attr-panel-heading,
  #attr-symptoms #attr-panel-heading .attr-redflags-panel {
    position: static !important;
  }

  #attr-symptoms #attr-panel-heading .attr-redflags-panel__disclaimer {
    position: absolute !important;

    left: 16px !important;
    right: 16px !important;
    top: auto !important;
    bottom: 18px !important;

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

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

    color: #ffffff !important;
    font-size: 9px !important;
    line-height: 12px !important;
    text-align: center !important;
    white-space: normal !important;

    z-index: 5 !important;
  }
}


/* =========================================================
   FINAL STICKY SIDEBAR FIX
   Background and rounded card must stay on #attr-onthispage,
   because JavaScript moves that exact element while scrolling.
   KEEP THIS BLOCK AT THE VERY END OF THE FILE.
   ========================================================= */

/* Support the placeholder class created by the current JavaScript. */
#attr-symptoms .attr-sidebar-sticky-placeholder,
#attr-symptoms-section .attr-sidebar-sticky-placeholder,
#attr-symptoms .attr-otp-nav-placeholder,
#attr-symptoms-section .attr-otp-nav-placeholder {
  display: none;
  width: 224px;
  min-width: 224px;
  max-width: 224px;
  height: 304px;
  min-height: 304px;
  box-sizing: border-box;
}

@media screen and (min-width: 992px) {
  /*
   * AEM text component remains only as the grid wrapper.
   * Remove the card background from this stationary parent.
   */
  #attr-symptoms #attr-otp-nav,
  #attr-symptoms-section #attr-otp-nav {
    display: block !important;
    width: 224px !important;
    min-width: 224px !important;
    max-width: 224px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  /*
   * This is the element fixed by JavaScript, so the grey card,
   * dimensions, padding and rounded corner belong here.
   */
  #attr-symptoms #attr-onthispage,
  #attr-symptoms-section #attr-onthispage,
  #attr-symptoms #attr-otp-nav .attr-onthispage,
  #attr-symptoms-section #attr-otp-nav .attr-onthispage {
    display: flex !important;
    flex-direction: column !important;
    width: 224px !important;
    min-width: 224px !important;
    max-width: 224px !important;
    height: 304px !important;
    min-height: 304px !important;
    max-height: calc(100vh - 115px);
    margin: 0 !important;
    padding: 36px 17px 30px 29px !important;
    background-color: #E9EBF2 !important;
    border-radius: 0 0 25px 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 33, 95, 0.35) transparent;
  }

  #attr-symptoms #attr-onthispage::-webkit-scrollbar,
  #attr-symptoms-section #attr-onthispage::-webkit-scrollbar {
    width: 5px;
  }

  #attr-symptoms #attr-onthispage::-webkit-scrollbar-thumb,
  #attr-symptoms-section #attr-onthispage::-webkit-scrollbar-thumb {
    background: rgba(0, 33, 95, 0.35);
    border-radius: 10px;
  }

  #attr-symptoms #attr-onthispage .attr-onthispage__title,
  #attr-symptoms #attr-onthispage .attr-onthispage__link,
  #attr-symptoms-section #attr-onthispage .attr-onthispage__title,
  #attr-symptoms-section #attr-onthispage .attr-onthispage__link {
    background: transparent !important;
    box-sizing: border-box !important;
  }

  #attr-symptoms #attr-onthispage .attr-onthispage__title,
  #attr-symptoms-section #attr-onthispage .attr-onthispage__title {
    cursor: default !important;
  }

  #attr-symptoms #attr-onthispage .attr-onthispage__title::after,
  #attr-symptoms-section #attr-onthispage .attr-onthispage__title::after {
    content: none !important;
    display: none !important;
  }

  #attr-symptoms #attr-onthispage .attr-onthispage__link,
  #attr-symptoms-section #attr-onthispage .attr-onthispage__link {
    display: block !important;
  }
}

@media screen and (max-width: 991px) {
  /* Parent wrapper remains transparent on mobile/tablet. */
  #attr-symptoms #attr-otp-nav,
  #attr-symptoms-section #attr-otp-nav {
    background: transparent !important;
    border-radius: 0 !important;
  }

  /* Current JS adds mobile classes to #attr-onthispage. */
  #attr-symptoms #attr-onthispage,
  #attr-symptoms-section #attr-onthispage {
    position: static !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;
    border-radius: 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  #attr-symptoms #attr-onthispage.mobile-nav-enabled .attr-onthispage__link,
  #attr-symptoms-section #attr-onthispage.mobile-nav-enabled .attr-onthispage__link {
    display: none !important;
  }

  #attr-symptoms #attr-onthispage.mobile-nav-enabled.mobile-nav-open .attr-onthispage__link,
  #attr-symptoms-section #attr-onthispage.mobile-nav-enabled.mobile-nav-open .attr-onthispage__link {
    display: block !important;
  }

  #attr-symptoms #attr-onthispage.mobile-nav-open .attr-onthispage__title,
  #attr-symptoms-section #attr-onthispage.mobile-nav-open .attr-onthispage__title {
    border-radius: 12px 12px 0 0;
  }

  #attr-symptoms #attr-onthispage.mobile-nav-open .attr-onthispage__title::after,
  #attr-symptoms-section #attr-onthispage.mobile-nav-open .attr-onthispage__title::after {
    transform: translateY(-30%) rotate(225deg);
  }

  #attr-symptoms #attr-onthispage .attr-onthispage__link.is-active,
  #attr-symptoms #attr-onthispage .attr-onthispage__link[aria-current="true"],
  #attr-symptoms-section #attr-onthispage .attr-onthispage__link.is-active,
  #attr-symptoms-section #attr-onthispage .attr-onthispage__link[aria-current="true"] {
    border-bottom: 0 !important;

  }

  #attr-symptoms .attr-sidebar-sticky-placeholder,
  #attr-symptoms-section .attr-sidebar-sticky-placeholder,
  #attr-symptoms .attr-otp-nav-placeholder,
  #attr-symptoms-section .attr-otp-nav-placeholder {
    display: none !important;
  }
}
/* =========================================================
   FINAL FR MOBILE ALIGNMENT FIXES
   Added for:
   1. Red-flags heading vertical position
   2. Autonomic and QoL callout icon above centred text
   3. Mobile hero background aspect-ratio preservation
   4. Mobile item separators
   5. QoL ~30% card in row 3, centre column
   Keep this block at the absolute end of the stylesheet.
   ========================================================= */

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

  /* ---------------------------------------------------------
     1. MOVE THE RED-FLAGS HEADING DOWN
     --------------------------------------------------------- */

  #attr-symptoms #attr-body-figure > .text:has(#attr-panel-heading) {
    padding-top: 12px !important;
    margin-bottom: 8px !important;
  }

  #attr-symptoms #attr-panel-heading,
  #attr-symptoms #attr-panel-heading .attr-redflags-panel {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
  }

  #attr-symptoms #attr-panel-heading .attr-redflags-panel__heading {
    position: static !important;
    top: auto !important;
    transform: none !important;

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

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

    box-sizing: border-box !important;
    text-align: center !important;
  }


  /* ---------------------------------------------------------
     2. CALLOUTS: ICON TOP-CENTRE, TEXT BELOW
     Applies to autonomous and quality-of-life callouts.
     --------------------------------------------------------- */

  #attr-symptoms .attr-autonomic__callout,
  #attr-symptoms .attr-qol__callout {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 10px !important;

    width: calc(100% - 28px) !important;
    max-width: 328px !important;
    min-height: 178px !important;

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

    box-sizing: border-box !important;
    text-align: center !important;
  }

  #attr-symptoms .attr-autonomic__callout-icon,
  #attr-symptoms .attr-qol__callout-icon {
    display: block !important;
    flex: 0 0 auto !important;

    width: auto !important;
    height: auto !important;
    max-width: 44px !important;
    max-height: 48px !important;

    margin: 0 auto !important;

    object-fit: contain !important;
    object-position: center !important;
  }

  #attr-symptoms .attr-autonomic__callout-text,
  #attr-symptoms .attr-qol__callout-text {
    width: 100% !important;
    max-width: 276px !important;

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

    text-align: center !important;
    line-height: 18px !important;
  }


  /* ---------------------------------------------------------
     3. MOBILE HERO: PRESERVE IMAGE PROPORTIONS
     Do not stretch the starry image to 100% x 100%.
     --------------------------------------------------------- */

  #attr-symptoms .banner-img,
  #page-1a38cc0b2e .banner-img,
  .banner-img {
    height: 620px !important;
    min-height: 620px !important;
    max-height: 620px !important;

    background-repeat: no-repeat !important;
    background-position: center top !important;

    /*
     * Keeps the source image proportional.
     * Width is allowed to crop rather than distort.
     */
    background-size: auto 100% !important;
  }


  /* ---------------------------------------------------------
     4. MOBILE SEPARATORS
     Show a separator below every real item except the final
     real item in each list.
     --------------------------------------------------------- */

  #attr-symptoms .attr-autonomic__item,
  #attr-symptoms .attr-qol__item {
    position: relative !important;
  }

  #attr-symptoms
  .attr-autonomic__item:not(.attr-autonomic__item--last)::after,
  #attr-symptoms
  .attr-qol__item:not(.attr-qol__item--empty)::after {
    content: "" !important;
    display: block !important;

    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    width: 100% !important;
    height: 1px !important;

    background: #d9deec !important;
    border: 0 !important;
    pointer-events: none !important;
  }

  /* No separator under the final autonomous item */
  #attr-symptoms .attr-autonomic__item--last::after {
    content: none !important;
    display: none !important;
  }

  /*
   * QoL HTML order:
   * 1–6 real items, 7 empty placeholder,
   * 8 = ~30% real item, 9 empty placeholder.
   */
  #attr-symptoms .attr-qol__item:nth-child(8)::after,
  #attr-symptoms .attr-qol__item--empty::after {
    content: none !important;
    display: none !important;
  }


  /* ---------------------------------------------------------
     5. QoL ~30% CARD: THIRD ROW, CENTRE COLUMN
     --------------------------------------------------------- */

  #attr-symptoms .attr-qol__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  #attr-symptoms .attr-qol__item:nth-child(7) {
    display: block !important;
    visibility: hidden !important;
    grid-column: 1 !important;
    grid-row: 3 !important;
    min-height: 1px !important;
  }

  #attr-symptoms .attr-qol__item:nth-child(8) {
    display: grid !important;
    visibility: visible !important;
    grid-column: 2 !important;
    grid-row: 3 !important;
  }

  #attr-symptoms .attr-qol__item:nth-child(9) {
    display: block !important;
    visibility: hidden !important;
    grid-column: 3 !important;
    grid-row: 3 !important;
    min-height: 1px !important;
  }
}
/* =========================================================
   FINAL EN + FR CORRECTIONS
   1. Mobile hero uses a responsive aspect ratio instead of a
      forced 620px height.
   2. Disclaimer remains at the bottom of the red-flags panel.
   3. QoL ~30% item sits in the third-row middle column on
      desktop and mobile.
   Keep this block at the absolute end of the stylesheet.
   ========================================================= */

/* ---------------------------------------------------------
   QoL: third row, centre column — ALL VIEWPORTS
   --------------------------------------------------------- */

#attr-symptoms .attr-qol__grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

#attr-symptoms .attr-qol__item:nth-child(7) {
  display: block !important;
  visibility: hidden !important;
  grid-column: 1 !important;
  grid-row: 3 !important;
  min-height: 1px !important;
}

#attr-symptoms .attr-qol__item:nth-child(8) {
  display: grid !important;
  visibility: visible !important;
  grid-column: 2 !important;
  grid-row: 3 !important;
}

#attr-symptoms .attr-qol__item:nth-child(9) {
  display: block !important;
  visibility: hidden !important;
  grid-column: 3 !important;
  grid-row: 3 !important;
  min-height: 1px !important;
}


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

  /* -------------------------------------------------------
     1. MOBILE HERO — REMOVE FORCED HEIGHT / STRETCHING
     ------------------------------------------------------- */

  #attr-symptoms .banner-img,
  #page-1a38cc0b2e .banner-img,
  #attr-symptoms-section .banner-img {
    width: 100% !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    /*
     * Responsive image frame close to the source artwork shape.
     * The image remains proportional and crops only when needed.
     */
    aspect-ratio: 390 / 620 !important;

    background-repeat: no-repeat !important;
    background-position: center top !important;
    background-size: cover !important;

    box-sizing: border-box !important;
  }


  /* -------------------------------------------------------
     2. KEEP DISCLAIMER AT THE BOTTOM OF THE RED-FLAGS CARD
     Do not combine it with the heading.
     ------------------------------------------------------- */

  #attr-symptoms #attr-body-figure {
    position: relative !important;
    padding-bottom: 58px !important;
  }

  #attr-symptoms #attr-panel-heading,
  #attr-symptoms #attr-panel-heading .attr-redflags-panel {
    position: static !important;
  }

  #attr-symptoms
  #attr-panel-heading
  .attr-redflags-panel__disclaimer {
    position: absolute !important;

    left: 14px !important;
    right: 14px !important;
    bottom: 18px !important;

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

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

    box-sizing: border-box !important;

    color: #ffffff !important;
    text-align: center !important;
    white-space: normal !important;

    z-index: 5 !important;
  }


  /* -------------------------------------------------------
     3. MOBILE QoL GRID
     Keep 30% in third-row centre.
     ------------------------------------------------------- */

  #attr-symptoms .attr-qol__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  #attr-symptoms .attr-qol__item:nth-child(7) {
    grid-column: 1 !important;
    grid-row: 3 !important;
  }

  #attr-symptoms .attr-qol__item:nth-child(8) {
    grid-column: 2 !important;
    grid-row: 3 !important;
  }

  #attr-symptoms .attr-qol__item:nth-child(9) {
    grid-column: 3 !important;
    grid-row: 3 !important;
  }
}
/* =========================================================
   FINAL MOBILE QoL LAYOUT CORRECTION
   Keep the desktop 3-column layout unchanged.
   On mobile, return the QoL cards to a single vertical list
   like the autonomic symptom list.
   Keep this block at the absolute end of the stylesheet.
   ========================================================= */

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

  #attr-symptoms .attr-qol__grid {
    display: block !important;
    grid-template-columns: none !important;
  }

  #attr-symptoms .attr-qol__item,
  #attr-symptoms .attr-qol__item:nth-child(7),
  #attr-symptoms .attr-qol__item:nth-child(8),
  #attr-symptoms .attr-qol__item:nth-child(9) {
    display: grid !important;
    grid-template-columns: 82px minmax(0, 1fr) !important;
    grid-column: auto !important;
    grid-row: auto !important;

    align-items: center !important;
    column-gap: 14px !important;

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

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

    visibility: visible !important;
    box-sizing: border-box !important;
  }

  /* Hide only the authored empty placeholder rows */
  #attr-symptoms .attr-qol__item.attr-qol__item--empty {
    display: none !important;
    visibility: hidden !important;
    min-height: 0 !important;
    padding: 0 !important;
  }

  #attr-symptoms .attr-qol__icon-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 82px !important;
    min-width: 82px !important;
    height: 78px !important;

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

  #attr-symptoms .attr-qol__icon {
    display: block !important;

    width: auto !important;
    height: auto !important;
    max-width: 72px !important;
    max-height: 72px !important;

    margin: 0 auto !important;

    object-fit: contain !important;
    object-position: center !important;
  }

  #attr-symptoms .attr-qol__copy {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;

    min-width: 0 !important;

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

    text-align: left !important;
    box-sizing: border-box !important;
  }

  #attr-symptoms .attr-qol__value,
  #attr-symptoms .attr-qol__patients,
  #attr-symptoms .attr-qol__description {
    display: block !important;
    position: static !important;
    transform: none !important;

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

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

    white-space: normal !important;
    overflow: visible !important;
  }

  #attr-symptoms .attr-qol__value {
    font-size: 25px !important;
    line-height: 27px !important;
  }

  #attr-symptoms .attr-qol__patients {
    line-height: 17px !important;
  }

  #attr-symptoms .attr-qol__description {
    margin-top: 2px !important;
    line-height: 18px !important;
  }

  /* Divider below every real QoL item except the final real item */
  #attr-symptoms .attr-qol__item:not(.attr-qol__item--empty)::after {
    content: "" !important;
    display: block !important;

    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    width: 100% !important;
    height: 1px !important;

    background: #d9deec !important;
  }

  #attr-symptoms .attr-qol__item:nth-child(8)::after {
    content: none !important;
    display: none !important;
  }
}
/* =========================================================
   URGENT FINAL MOBILE FIXES
   1. Hero background uses native 390 x 309 ratio
   2. Red-flags disclaimer moves to the bottom of the dark panel
   Keep this block at the absolute end of the stylesheet.
   ========================================================= */

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

  /* -------------------------------------------------------
     1. HERO BACKGROUND — NATIVE 390 x 309 RATIO
     ------------------------------------------------------- */

  #attr-symptoms .banner-img,
  #page-1a38cc0b2e .banner-img,
  #attr-symptoms-section .banner-img {
    width: 100% !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    /* Native source ratio: 390 / 309 */
    aspect-ratio: 390 / 309 !important;

    background-repeat: no-repeat !important;
    background-position: center top !important;
    background-size: 100% auto !important;

    display: block !important;
    box-sizing: border-box !important;
  }

  /*
   * Prevent inner banner content from forcing the background
   * container taller than its native aspect ratio.
   */
  #attr-symptoms .banner-img > *,
  #page-1a38cc0b2e .banner-img > *,
  #attr-symptoms-section .banner-img > * {
    max-height: 100% !important;
  }


  /* -------------------------------------------------------
     2. DISCLAIMER — BOTTOM OF DARK RED-FLAGS PANEL
     ------------------------------------------------------- */

  #attr-symptoms #attr-body-figure {
    position: relative !important;

    /*
     * Reserve dedicated space below the white content panel
     * so the disclaimer sits at the bottom of the dark card.
     */
    padding-bottom: 64px !important;
  }

  #attr-symptoms
  #attr-panel-heading
  .attr-redflags-panel__disclaimer {
    position: absolute !important;

    left: 18px !important;
    right: 18px !important;
    bottom: 18px !important;
    top: auto !important;

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

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

    color: #ffffff !important;
    text-align: center !important;
    white-space: normal !important;

    transform: none !important;
    z-index: 10 !important;
  }

  /*
   * Ensure the heading area contains only the heading.
   */
  #attr-symptoms #attr-panel-heading,
  #attr-symptoms #attr-panel-heading .attr-redflags-panel {
    position: static !important;
    overflow: visible !important;
  }
}
/* =========================================================
   FINAL DISCLAIMER POSITION FIX — EN + FR
   The disclaimer is authored inside #attr-panel-heading.
   These rules make #attr-body-figure the positioning context
   so the disclaimer sits at the bottom of the dark panel.
   Keep this block at the absolute end of the stylesheet.
   ========================================================= */

#attr-symptoms #attr-body-figure {
  position: relative !important;
}

/*
 * Remove the positioning context from the heading wrappers.
 * Otherwise the absolutely positioned disclaimer remains
 * attached to the heading area at the top.
 */
#attr-symptoms
#attr-body-figure
> .text:has(#attr-panel-heading),
#attr-symptoms #attr-panel-heading,
#attr-symptoms #attr-panel-heading .attr-redflags-panel {
  position: static !important;
}

/* Keep only the main instruction text in the top heading area */
#attr-symptoms
#attr-panel-heading
.attr-redflags-panel__heading {
  position: static !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;

  margin: 0 auto !important;
  text-align: center !important;
}

/*
 * Position the disclaimer against #attr-body-figure,
 * below the white symptom panel.
 */
#attr-symptoms
#attr-panel-heading
.attr-redflags-panel__disclaimer {
  position: absolute !important;

  left: 20px !important;
  right: 20px !important;
  bottom: 14px !important;
  top: auto !important;

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

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

  box-sizing: border-box !important;

  color: #ffffff !important;
  font-family: "Kanit-Regular", Arial, sans-serif !important;
  font-size: 13px !important;
  line-height: 16px !important;
  text-align: center !important;
  white-space: normal !important;

  transform: none !important;
  z-index: 20 !important;
}

/* Reserve space for the disclaimer at the bottom */
@media screen and (min-width: 701px) {
  #attr-symptoms #attr-body-figure {
    padding-bottom: 52px !important;
  }
}

@media screen and (max-width: 700px) {
  #attr-symptoms #attr-body-figure {
    padding-bottom: 62px !important;
  }

  #attr-symptoms
  #attr-panel-heading
  .attr-redflags-panel__disclaimer {
    left: 16px !important;
    right: 16px !important;
    bottom: 16px !important;

    font-size: 12px !important;
    line-height: 15px !important;
  }
}

/* =========================================================
   FINAL TYPOGRAPHY + AUTONOMIC INTRO ALIGNMENT FIX
   KEEP THIS BLOCK AT THE ABSOLUTE END OF THE CSS FILE
   ========================================================= */


/* =========================================================
   1. RECOGNIZING RED FLAGS SUBHEADING
   Multi-systemic symptoms are a red flag for hATTR
   H3 Headlines: Kanit Regular, 20px
   ========================================================= */

#attr-symptoms
#attr-otp-heading
.attr-section-heading__subtitle {
  display: block !important;

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

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

  color: #00215f !important;

  font-family: "Kanit-Regular", "Kanit", Arial, sans-serif !important;
  font-size: 20px !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 24px !important;

  text-align: center !important;

  letter-spacing: 0 !important;
}


/* Keep the reference number regular as well */

#attr-symptoms
#attr-otp-heading
.attr-section-heading__subtitle sup {
  position: relative !important;
  top: -0.35em !important;

  font-family: "Kanit-Regular", "Kanit", Arial, sans-serif !important;
  font-size: 60% !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 0 !important;
}


/* =========================================================
   2. AUTONOMIC LEAD SUBHEADING
   AUTONOMIC SYMPTOMS ARE A HALLMARK...
   Kanit Medium, 20px, without browser-generated bold
   ========================================================= */

#attr-symptoms
.attr-autonomic__lead {
  display: block !important;

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

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

  box-sizing: border-box !important;

  color: #00215f !important;

  font-family: "Kanit-Medium", "Kanit", Arial, sans-serif !important;
  font-size: 20px !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 24px !important;

  text-align: center !important;
  text-transform: uppercase !important;
  letter-spacing: 0 !important;
}


/* Reference number must not become bold */

#attr-symptoms
.attr-autonomic__lead sup {
  position: relative !important;
  top: -0.35em !important;

  font-family: "Kanit-Regular", "Kanit", Arial, sans-serif !important;
  font-size: 60% !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 0 !important;
}


/* =========================================================
   3. AUTONOMIC EYEBROW SUBHEADING
   ROUTINELY ASSESSING AUTONOMIC DYSFUNCTION...
   H3 Headlines: Kanit Regular, 20px
   ========================================================= */

#attr-symptoms
.attr-autonomic__eyebrow {
  display: block !important;

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

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

  box-sizing: border-box !important;

  color: #00215f !important;

  font-family: "Kanit-Regular", "Kanit", Arial, sans-serif !important;
  font-size: 20px !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 24px !important;

  text-align: center !important;
  text-transform: uppercase !important;
  letter-spacing: 0 !important;

  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}


/* Remove bold from superscript 6 */

#attr-symptoms
.attr-autonomic__eyebrow sup {
  position: relative !important;
  top: -0.35em !important;

  font-family: "Kanit-Regular", "Kanit", Arial, sans-serif !important;
  font-size: 60% !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 0 !important;
}


/* =========================================================
   4. FIX CLUSTERED TEXT INSIDE AUTONOMIC CARD

   Validated tests and questionnaires assess...
   ========================================================= */

#attr-symptoms
.attr-autonomic__card
.attr-autonomic__intro {
  position: static !important;

  display: block !important;

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

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

  box-sizing: border-box !important;

  color: #00215f !important;

  font-family: "Kanit-Regular", "Kanit", Arial, sans-serif !important;
  font-size: 16px !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 20px !important;

  text-align: center !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  word-spacing: normal !important;

  white-space: normal !important;
  overflow: visible !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;

  flex: none !important;
  float: none !important;
  columns: auto !important;
  column-count: auto !important;
}


/* Remove bold from "multiple different domains" */

#attr-symptoms
.attr-autonomic__card
.attr-autonomic__intro b,
#attr-symptoms
.attr-autonomic__card
.attr-autonomic__intro strong {
  font-family: inherit !important;
  font-size: inherit !important;
  font-style: inherit !important;
  font-weight: 400 !important;
  line-height: inherit !important;
}


/* Keep reference 6–8 attached to the sentence */

#attr-symptoms
.attr-autonomic__card
.attr-autonomic__intro sup {
  position: relative !important;
  top: -0.35em !important;

  display: inline !important;

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

  font-family: "Kanit-Regular", "Kanit", Arial, sans-serif !important;
  font-size: 60% !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 0 !important;

  white-space: nowrap !important;
}


/* Prevent AEM wrappers from applying columns/flex splitting */

#attr-symptoms
.attr-autonomic__card {
  display: block !important;
}

#attr-symptoms
.attr-autonomic__card > .attr-autonomic__intro {
  grid-column: 1 / -1 !important;
}


/* =========================================================
   5. AUTONOMIC CALLOUT SUPERSCRIPT
   Remove bold only from reference 6
   ========================================================= */

#attr-symptoms
.attr-autonomic__callout-text sup {
  position: relative !important;
  top: -0.35em !important;

  font-family: "Kanit-Regular", "Kanit", Arial, sans-serif !important;
  font-size: 60% !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 0 !important;
}


/* =========================================================
   6. QUALITY-OF-LIFE SUBHEADING
   hATTR HAS A PROFOUND IMPACT...
   Kanit Medium, Regular appearance
   ========================================================= */

#attr-symptoms
.attr-qol__eyebrow {
  display: block !important;

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

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

  box-sizing: border-box !important;

  color: #00215f !important;

  font-family: "Kanit-Medium", "Kanit", Arial, sans-serif !important;
  font-size: 20px !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 24px !important;

  text-align: center !important;
  text-transform: uppercase !important;
  letter-spacing: 0 !important;

  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}


/* Quality-of-life superscript 9 must also remain regular */

#attr-symptoms
.attr-qol__eyebrow sup {
  position: relative !important;
  top: -0.35em !important;

  font-family: "Kanit-Regular", "Kanit", Arial, sans-serif !important;
  font-size: 60% !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 0 !important;
}


/* =========================================================
   TABLET
   ========================================================= */

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

  #attr-symptoms
  #attr-otp-heading
  .attr-section-heading__subtitle,
  #attr-symptoms
  .attr-autonomic__lead,
  #attr-symptoms
  .attr-autonomic__eyebrow,
  #attr-symptoms
  .attr-qol__eyebrow {
    width: calc(100% - 32px) !important;
    max-width: 760px !important;

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

    font-size: 20px !important;
    line-height: 24px !important;
  }

  #attr-symptoms
  .attr-autonomic__card
  .attr-autonomic__intro {
    width: 100% !important;
    max-width: 680px !important;

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

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


/* =========================================================
   MOBILE
   ========================================================= */

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

  #attr-symptoms
  #attr-otp-heading
  .attr-section-heading__subtitle,
  #attr-symptoms
  .attr-autonomic__lead,
  #attr-symptoms
  .attr-autonomic__eyebrow,
  #attr-symptoms
  .attr-qol__eyebrow {
    width: calc(100% - 32px) !important;
    max-width: none !important;

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

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

    white-space: normal !important;
    overflow-wrap: break-word !important;
  }

  #attr-symptoms
  .attr-autonomic__card
  .attr-autonomic__intro {
    display: block !important;

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

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

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

    text-align: center !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
  }
}

/* =========================================================
   FINAL AUTONOMIC BOLD + QOL SUPERSCRIPT + FOOTER RESTORE
   KEEP THIS BLOCK AT THE ABSOLUTE END OF THE CSS FILE
   ========================================================= */

/* ---------------------------------------------------------
   AUTONOMIC INTRO
   Keep normal text regular.
   --------------------------------------------------------- */

#attr-symptoms .attr-autonomic__card p.attr-autonomic__intro {
  display: block !important;
  position: static !important;

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

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

  box-sizing: border-box !important;

  color: #00215f !important;
  font-family: "Kanit-Regular", "Kanit", Arial, sans-serif !important;
  font-size: 16px !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 20px !important;

  text-align: center !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  word-spacing: normal !important;

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

/* Make only "multiple different domains" visibly bold. */
#attr-symptoms .attr-autonomic__card p.attr-autonomic__intro > b,
#attr-symptoms .attr-autonomic__card p.attr-autonomic__intro > strong,
#attr-symptoms .attr-autonomic__card .attr-autonomic__intro b,
#attr-symptoms .attr-autonomic__card .attr-autonomic__intro strong {
  display: inline !important;

  font-family: "Kanit-Bold", "Kanit-SemiBold", "Kanit", Arial, sans-serif !important;
  font-size: inherit !important;
  font-style: normal !important;
  font-weight: 700 !important;
  line-height: inherit !important;

  color: inherit !important;
}

/* Autonomic card reference 6–8. */
#attr-symptoms .attr-autonomic__card p.attr-autonomic__intro > sup,
#attr-symptoms .attr-autonomic__card .attr-autonomic__intro sup {
  display: inline !important;
  position: relative !important;

  top: -0.42em !important;
  vertical-align: baseline !important;

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

  font-family: "Kanit-Regular", "Kanit", Arial, sans-serif !important;
  font-size: 60% !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 0 !important;

  white-space: nowrap !important;
}

/* ---------------------------------------------------------
   QOL CARD TITLE
   "One study showed that:" with a real superscript 9.
   --------------------------------------------------------- */

#attr-symptoms .attr-qol__card p.attr-qol__card-title {
  display: block !important;
  position: static !important;

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

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

  box-sizing: border-box !important;

  color: #00215f !important;
  font-family: "Kanit-SemiBold", "Kanit", Arial, sans-serif !important;
  font-size: 16px !important;
  font-style: normal !important;
  font-weight: 600 !important;
  line-height: 20px !important;

  text-align: center !important;
}

/* Use native superscript alignment so 9 cannot sit on the baseline. */
#attr-symptoms .attr-qol__card p.attr-qol__card-title > sup,
#attr-symptoms .attr-qol__card .attr-qol__card-title sup {
  display: inline !important;
  position: static !important;

  top: auto !important;
  vertical-align: super !important;

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

  font-family: "Kanit-Regular", "Kanit", Arial, sans-serif !important;
  font-size: 60% !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 0 !important;

  white-space: nowrap !important;
}

/* ---------------------------------------------------------
   RESTORE REFERENCES / FOOTNOTES / FOOTER
   These rules intentionally preserve the earlier footer look.
   --------------------------------------------------------- */

#attr-symptoms .footer-strip {
  background: #000000 !important;
  color: #ffffff !important;

  font-family: "Kanit", Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 20px !important;

  text-align: left !important;
}

#attr-symptoms .footer-strip p {
  display: block !important;

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

  margin: 0 auto !important;
  padding: 20px 7px 0 0 !important;

  box-sizing: border-box !important;

  font-family: "Kanit", Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 20px !important;

  text-align: left !important;
  white-space: normal !important;
}

#attr-symptoms .footer-strip span {
  font-family: "Kanit-Bold", "Kanit", Arial, sans-serif !important;
  font-weight: 700 !important;
}

#attr-symptoms .footer-strip span.no-bold {
  font-family: "Kanit", Arial, sans-serif !important;
  font-weight: 400 !important;
}

#attr-symptoms .footer-strip span.no-breaking {
  white-space: nowrap !important;
}

#attr-symptoms .about-attr-reference a,
#attr-symptoms .footer-strip a,
#attr-symptoms .diagnosis-footer a {
  color: inherit !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  text-decoration: inherit !important;
}

/* Do not let section superscript rules affect footer/reference content. */
#attr-symptoms .footer-strip sup,
#attr-symptoms .diagnosis-footer sup,
#attr-symptoms .about-attr-reference sup {
  position: static !important;
  top: auto !important;
  vertical-align: super !important;

  font-family: inherit !important;
  font-size: 60% !important;
  font-weight: inherit !important;
  line-height: 0 !important;
}

/* Preserve the existing responsive footer spacing. */
@media screen and (max-width: 991px) {
  #attr-symptoms .footer-strip {
    padding: 15px !important;
  }

  #attr-symptoms .footer-strip p {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }
}

@media screen and (min-width: 992px) and (max-width: 1200px) {
  #attr-symptoms .footer-strip p {
    width: auto !important;
    max-width: 97% !important;
    margin: 0 15px !important;
    padding: 20px 0 0 !important;
  }
}

/* =========================================================
   FINAL CLEAN INTERNAL FOOTER + REFERENCES LAYOUT
   KEEP THIS SINGLE BLOCK AT THE ABSOLUTE END OF THE CSS FILE
   ========================================================= */

/* ---------------------------------------------------------
   Reset only the two AEM text components in this container.
   Do not alter the global website footer below this section.
   --------------------------------------------------------- */

#attr-symptoms #container-0d4b9a3a6b {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

#attr-symptoms #container-0d4b9a3a6b > .text,
#attr-symptoms #container-0d4b9a3a6b > .text > .cmp-text {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

/* =========================================================
   INTERNAL FOOTER BACKGROUND IMAGE
   ========================================================= */

#attr-symptoms #text-6d6939a24f,
#attr-symptoms #text-6d6939a24f.cmp-text {
  background: transparent !important;
}

#attr-symptoms .sec3-mainbg {
  position: relative !important;
  isolation: isolate !important;

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

  width: 100% !important;
  max-width: none !important;
  min-height: 303px !important;
  height: 303px !important;

  margin: 0 !important;
  padding: 34px 24px 72px !important;

  box-sizing: border-box !important;
  overflow: hidden !important;

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

#attr-symptoms .sec3-mainbg::before,
#attr-symptoms .sec3-mainbg::after {
  content: none !important;
  display: none !important;
}

/* =========================================================
   TWO FOOTER CARDS
   ========================================================= */

#attr-symptoms .sec3-mainbg > .patient-box,
#attr-symptoms .sec3-mainbg > .attr-footer-card {
  position: relative !important;
  z-index: 2 !important;

  display: block !important;
  flex: 0 1 460px !important;

  width: 460px !important;
  max-width: calc(50% - 10px) !important;
  min-width: 0 !important;

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

  box-sizing: border-box !important;
  transform: none !important;
}

#attr-symptoms .sec3-mainbg .image-shadow {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

#attr-symptoms .sec3-mainbg .border-box {
  position: relative !important;

  display: grid !important;
  grid-template-columns: 68px minmax(0, 1fr) !important;
  grid-template-rows: minmax(80px, auto) auto !important;
  align-items: center !important;

  column-gap: 16px !important;

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

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

  box-sizing: border-box !important;
  overflow: visible !important;

  background: #e9ebf2 !important;
  border: 1px solid #bfc8e6 !important;
  border-radius: 18px 18px 18px 0 !important;
}

#attr-symptoms .sec3-mainbg .smallbox-icon {
  grid-column: 1 !important;
  grid-row: 1 !important;

  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 58px !important;
  max-height: 66px !important;

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

  object-fit: contain !important;
}

#attr-symptoms .sec3-mainbg .smallbox-title {
  grid-column: 2 !important;
  grid-row: 1 !important;

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

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

  color: #151515 !important;
  background: transparent !important;

  font-family: "Kanit-Regular", "Kanit", Arial, sans-serif !important;
  font-size: 15px !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 18px !important;

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

#attr-symptoms .sec3-mainbg .smallbox-title sup {
  display: inline !important;
  position: relative !important;
  top: -0.38em !important;
  vertical-align: baseline !important;

  font-family: "Kanit-Regular", "Kanit", Arial, sans-serif !important;
  font-size: 60% !important;
  font-weight: 400 !important;
  line-height: 0 !important;
}

/* CTA sits centred across the complete card. */
#attr-symptoms .sec3-mainbg .cta-bottom-home {
  position: static !important;

  grid-column: 1 / -1 !important;
  grid-row: 2 !important;

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

  width: 100% !important;

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

  transform: none !important;
  z-index: 5 !important;
}

#attr-symptoms .sec3-mainbg .middle-bottom-cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: auto !important;
  min-width: 220px !important;
  max-width: 310px !important;
  min-height: 34px !important;

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

  box-sizing: border-box !important;

  color: #ffffff !important;
  background: #637bff !important;
  border: 0 !important;
  border-radius: 22px !important;

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

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

#attr-symptoms .sec3-mainbg .home-cta-1 .middle-bottom-cta {
  min-width: 270px !important;
}

/* =========================================================
   BLACK REFERENCES / FOOTNOTES BAND
   Content column is centred; copy remains left aligned.
   ========================================================= */

#attr-symptoms #text-002aaefa07,
#attr-symptoms #text-002aaefa07.cmp-text,
#attr-symptoms .container-about-attr-footer {
  display: block !important;

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

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

  box-sizing: border-box !important;
  overflow: visible !important;

  background: #000000 !important;
  color: #ffffff !important;
}

#attr-symptoms .about-attr-reference {
  display: block !important;

  width: calc(100% - 48px) !important;
  max-width: 1158px !important;
  height: auto !important;
  min-height: 0 !important;

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

  box-sizing: border-box !important;
  overflow: visible !important;

  background: transparent !important;
  color: #ffffff !important;

  font-family: "Kanit-Regular", "Kanit", Arial, sans-serif !important;
  font-size: 13px !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 17px !important;

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

#attr-symptoms .about-attr-reference p {
  display: block !important;

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

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

  color: #ffffff !important;
  background: transparent !important;

  font-family: "Kanit-Regular", "Kanit", Arial, sans-serif !important;
  font-size: 13px !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 17px !important;

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

/* Keep the authored blank line between abbreviations and References. */
#attr-symptoms .about-attr-reference br {
  display: block !important;
  content: "" !important;
  line-height: 17px !important;
}

/* Only the authored reference-bold spans are bold. */
#attr-symptoms .about-attr-reference .reference-bold {
  color: #ffffff !important;
  background: transparent !important;

  font-family: "Kanit-SemiBold", "Kanit", Arial, sans-serif !important;
  font-style: normal !important;
  font-weight: 600 !important;
}

/* Authored journal names remain italic. */
#attr-symptoms .about-attr-reference .reference-italic {
  color: #ffffff !important;
  background: transparent !important;

  font-family: "Kanit-Regular", "Kanit", Arial, sans-serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
}

#attr-symptoms .about-attr-reference a {
  color: inherit !important;
  background: transparent !important;

  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  text-decoration: inherit !important;
}

/* Do not globally make all descendants transparent—only these wrappers. */
#attr-symptoms .container-about-attr-footer,
#attr-symptoms .about-attr-reference,
#attr-symptoms .about-attr-reference p,
#attr-symptoms .about-attr-reference span {
  background-color: transparent !important;
}

/* =========================================================
   TABLET
   ========================================================= */

@media screen and (min-width: 701px) and (max-width: 992px) {
  #attr-symptoms .sec3-mainbg {
    gap: 16px !important;
    min-height: 285px !important;
    height: auto !important;
    padding: 30px 20px 72px !important;
  }

  #attr-symptoms .sec3-mainbg > .patient-box,
  #attr-symptoms .sec3-mainbg > .attr-footer-card {
    flex-basis: calc(50% - 8px) !important;
    width: calc(50% - 8px) !important;
    max-width: calc(50% - 8px) !important;
  }

  #attr-symptoms .sec3-mainbg .border-box {
    grid-template-columns: 54px minmax(0, 1fr) !important;
    column-gap: 10px !important;
    min-height: 142px !important;
    padding: 15px 14px 21px !important;
  }

  #attr-symptoms .sec3-mainbg .smallbox-icon {
    max-width: 48px !important;
    max-height: 58px !important;
  }

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

  #attr-symptoms .sec3-mainbg .middle-bottom-cta {
    min-width: 190px !important;
    max-width: 250px !important;
    font-size: 10px !important;
    white-space: normal !important;
  }

  #attr-symptoms .sec3-mainbg .home-cta-1 .middle-bottom-cta {
    min-width: 225px !important;
  }

  #attr-symptoms .about-attr-reference {
    width: calc(100% - 40px) !important;
    max-width: 900px !important;
    padding: 14px 0 18px !important;
    font-size: 12px !important;
    line-height: 16px !important;
  }

  #attr-symptoms .about-attr-reference p {
    font-size: 12px !important;
    line-height: 16px !important;
  }
}

/* =========================================================
   MOBILE
   ========================================================= */

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

    gap: 56px !important;

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

    padding: 28px 18px 120px !important;

    background-position: center bottom !important;
    background-size: cover !important;
  }

  #attr-symptoms .sec3-mainbg > .patient-box,
  #attr-symptoms .sec3-mainbg > .attr-footer-card {
    flex: none !important;

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

    margin: 0 auto !important;
  }

  #attr-symptoms .sec3-mainbg .border-box {
    grid-template-columns: 58px minmax(0, 1fr) !important;
    column-gap: 12px !important;

    min-height: 148px !important;
    padding: 17px 16px 22px !important;
  }

  #attr-symptoms .sec3-mainbg .smallbox-icon {
    max-width: 50px !important;
    max-height: 60px !important;
  }

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

  #attr-symptoms .sec3-mainbg .middle-bottom-cta {
    min-width: 210px !important;
    max-width: calc(100% - 20px) !important;
    white-space: normal !important;
  }

  #attr-symptoms .sec3-mainbg .home-cta-1 .middle-bottom-cta {
    min-width: 250px !important;
  }

  #attr-symptoms .about-attr-reference {
    width: calc(100% - 32px) !important;
    max-width: 600px !important;

    padding: 13px 0 17px !important;

    font-size: 11px !important;
    line-height: 15px !important;
  }

  #attr-symptoms .about-attr-reference p {
    font-size: 11px !important;
    line-height: 15px !important;
  }
}


/* =========================================================
   FINAL REFERENCES ALIGNMENT
   224px SIDEBAR + 14px GAP
   ========================================================= */

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

  #attr-symptoms .container-about-attr-footer{
      width:100% !important;
      max-width:none !important;
      background:#000 !important;
  }

  #attr-symptoms .about-attr-reference{

      width:auto !important;
      max-width:1000px !important;

      margin-top:0 !important;
      margin-bottom:0 !important;
      margin-left:calc((100% - 1250px)/2 + 238px) !important;
      margin-right:calc((100% - 1250px)/2 + 12px) !important;

      padding-top:14px !important;
      padding-bottom:18px !important;
      padding-left:0 !important;
      padding-right:0 !important;

      box-sizing:border-box !important;

      background:transparent !important;
      color:#fff !important;
      text-align:left !important;
  }

  #attr-symptoms .about-attr-reference p{
      margin:0 !important;
      padding:0 !important;
      text-align:left !important;
      color:#fff !important;
  }
}


/* =========================================================
   FINAL ISOLATED FOOTER CARD + REFERENCE ALIGNMENT
   This block deliberately scopes the cards and references
   separately so changing one cannot move the other.
   ========================================================= */

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

  /* -------------------------
     FOOTER IMAGE + TWO CARDS
     ------------------------- */

  #attr-symptoms #text-6d6939a24f .sec3-mainbg {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 20px !important;

    width: 100% !important;
    max-width: none !important;
    min-height: 303px !important;
    height: 303px !important;

    margin: 0 !important;

    padding-top: 34px !important;
    padding-right: calc((100% - 1250px) / 2 + 12px) !important;
    padding-bottom: 72px !important;
    padding-left: calc((100% - 1250px) / 2 + 238px) !important;

    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  #attr-symptoms #text-6d6939a24f .sec3-mainbg > .patient-box,
  #attr-symptoms #text-6d6939a24f .sec3-mainbg > .attr-footer-card {
    flex: 0 0 490px !important;

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

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

    box-sizing: border-box !important;
    transform: none !important;
  }

  #attr-symptoms #text-6d6939a24f .image-shadow {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #attr-symptoms #text-6d6939a24f .border-box {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  /* -------------------------
     REFERENCES ONLY
     ------------------------- */

  #attr-symptoms #text-002aaefa07,
  #attr-symptoms #text-002aaefa07 .container-about-attr-footer {
    width: 100% !important;
    max-width: none !important;

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

    background: #000000 !important;
  }

  #attr-symptoms #text-002aaefa07 .about-attr-reference {
    width: 1000px !important;
    max-width: 1000px !important;

    margin-top: 0 !important;
    margin-right: auto !important;
    margin-bottom: 0 !important;
    margin-left: calc((100% - 1250px) / 2 + 238px) !important;

    padding: 14px 0 18px !important;

    box-sizing: border-box !important;

    background: transparent !important;
    color: #ffffff !important;
    text-align: left !important;
  }

  #attr-symptoms #text-002aaefa07 .about-attr-reference p {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;

    color: #ffffff !important;
    text-align: left !important;
  }
}

/* =========================================================
   FINAL FR PAGE FIXES
   Added for:
   1. Preserve authored "LATTRh" casing
   2. Remove generated list bullets
   3. Align the two footer cards with the 238px content offset
   4. Keep mobile references on a black background
   KEEP THIS BLOCK AT THE ABSOLUTE END OF THE STYLESHEET.
   ========================================================= */

/* ---------------------------------------------------------
   1. PRESERVE AUTHORED FR CASING
   Prevent CSS from converting LATTRh into LATTRH.
   --------------------------------------------------------- */
#attr-symptoms .attr-autonomic__lead {
  text-transform: none !important;
}

/* Also preserve authored casing in related FR headings when required. */
html[lang="fr"] #attr-symptoms .attr-autonomic__lead {
  text-transform: none !important;
}

/* ---------------------------------------------------------
   2. REMOVE BULLET / MARKER STYLING
   Handles UL/LI markers and any CSS-generated pseudo bullets.
   --------------------------------------------------------- */
#attr-symptoms .attr-autonomic__card ul,
#attr-symptoms .attr-autonomic__grid,
#attr-symptoms .attr-autonomic__item,
#attr-symptoms .attr-autonomic__copy,
#attr-symptoms .attr-autonomic__name,
#attr-symptoms .attr-autonomic__description {
  list-style: none !important;
}

#attr-symptoms .attr-autonomic__card ul {
  margin-left: 0 !important;
  padding-left: 0 !important;
}

#attr-symptoms .attr-autonomic__item::marker,
#attr-symptoms .attr-autonomic__copy::marker,
#attr-symptoms .attr-autonomic__name::marker,
#attr-symptoms .attr-autonomic__description::marker {
  content: "" !important;
  font-size: 0 !important;
}

#attr-symptoms .attr-autonomic__item::before,
#attr-symptoms .attr-autonomic__copy::before,
#attr-symptoms .attr-autonomic__name::before,
#attr-symptoms .attr-autonomic__description::before {
  content: none !important;
  display: none !important;
}

/* ---------------------------------------------------------
   3. DESKTOP FOOTER CARDS
   490px + 20px + 490px = 1000px content width.
   The content begins after the 224px sidebar + 14px gap.
   --------------------------------------------------------- */
@media screen and (min-width: 1250px) {
  #attr-symptoms #text-6d6939a24f .sec3-mainbg,
  #attr-symptoms .sec3-mainbg {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 20px !important;

    width: 100% !important;
    max-width: none !important;
    min-height: 303px !important;
    height: 303px !important;

    margin: 0 !important;
    padding-top: 34px !important;
    padding-right: calc((100% - 1250px) / 2 + 12px) !important;
    padding-bottom: 72px !important;
    padding-left: calc((100% - 1250px) / 2 + 238px) !important;

    box-sizing: border-box !important;
    overflow: visible !important;
  }

  #attr-symptoms #text-6d6939a24f .sec3-mainbg > .patient-box,
  #attr-symptoms #text-6d6939a24f .sec3-mainbg > .attr-footer-card,
  #attr-symptoms .sec3-mainbg > .patient-box,
  #attr-symptoms .sec3-mainbg > .attr-footer-card {
    flex: 0 0 490px !important;
    width: 490px !important;
    min-width: 490px !important;
    max-width: 490px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    transform: none !important;
  }

  #attr-symptoms .sec3-mainbg .image-shadow,
  #attr-symptoms .sec3-mainbg .border-box {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* Keep CTA text completely inside the blue pill. */
  #attr-symptoms .sec3-mainbg .middle-bottom-cta {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: calc(100% - 36px) !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 38px !important;

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

    box-sizing: border-box !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    text-align: center !important;
    line-height: 16px !important;
  }

  #attr-symptoms .sec3-mainbg .home-cta-1 .middle-bottom-cta {
    width: calc(100% - 36px) !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}

/* ---------------------------------------------------------
   4. MOBILE REFERENCES
   Stop inherited white backgrounds from covering the text.
   --------------------------------------------------------- */
@media screen and (max-width: 700px) {
  #attr-symptoms #text-002aaefa07,
  #attr-symptoms #text-002aaefa07.cmp-text,
  #attr-symptoms #text-002aaefa07 .cmp-text,
  #attr-symptoms #text-002aaefa07 .container-about-attr-footer,
  #attr-symptoms #text-002aaefa07 .about-attr-reference,
  #attr-symptoms #text-002aaefa07 .about-attr-reference p,
  #attr-symptoms .container-about-attr-footer,
  #attr-symptoms .about-attr-reference,
  #attr-symptoms .about-attr-reference p {
    background: #000000 !important;
    background-color: #000000 !important;
  }

  #attr-symptoms #text-002aaefa07,
  #attr-symptoms #text-002aaefa07 *,
  #attr-symptoms .container-about-attr-footer,
  #attr-symptoms .container-about-attr-footer *,
  #attr-symptoms .about-attr-reference,
  #attr-symptoms .about-attr-reference * {
    color: #ffffff !important;
  }

  #attr-symptoms #text-002aaefa07 .about-attr-reference,
  #attr-symptoms .about-attr-reference {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 14px 16px 18px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  #attr-symptoms #text-002aaefa07 .about-attr-reference p,
  #attr-symptoms .about-attr-reference p {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 11px !important;
    line-height: 15px !important;
    text-align: left !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }
}

/* =========================================================
   FINAL FR TEXT CORRECTIONS — V2
   Keep this block at the absolute end of the stylesheet.
   ========================================================= */

/* ---------------------------------------------------------
   1. REMOVE THE LITERAL BULLET CHARACTERS FROM FR LABELS
   The bullets are actual characters inside the authored HTML,
   not UL/LI markers. Replace only the four affected labels.
   --------------------------------------------------------- */

html[lang="fr"] #attr-symptoms
.attr-autonomic__item:nth-child(1)
.attr-autonomic__name,

html[lang="fr"] #attr-symptoms
.attr-autonomic__item:nth-child(4)
.attr-autonomic__name,

html[lang="fr"] #attr-symptoms
.attr-autonomic__item:nth-child(5)
.attr-autonomic__name,

html[lang="fr"] #attr-symptoms
.attr-autonomic__item:nth-child(6)
.attr-autonomic__name {
  font-size: 0 !important;
  line-height: 0 !important;
}

/* Reinsert the same labels without the authored bullet character. */
html[lang="fr"] #attr-symptoms
.attr-autonomic__item:nth-child(1)
.attr-autonomic__name::after {
  content: "Intolérance orthostatique";
}

html[lang="fr"] #attr-symptoms
.attr-autonomic__item:nth-child(4)
.attr-autonomic__name::after {
  content: "Sexuel";
}

html[lang="fr"] #attr-symptoms
.attr-autonomic__item:nth-child(5)
.attr-autonomic__name::after {
  content: "Sécrétomoteur";
}

html[lang="fr"] #attr-symptoms
.attr-autonomic__item:nth-child(6)
.attr-autonomic__name::after {
  content: "Vasomoteur";
}

html[lang="fr"] #attr-symptoms
.attr-autonomic__item:nth-child(1)
.attr-autonomic__name::after,

html[lang="fr"] #attr-symptoms
.attr-autonomic__item:nth-child(4)
.attr-autonomic__name::after,

html[lang="fr"] #attr-symptoms
.attr-autonomic__item:nth-child(5)
.attr-autonomic__name::after,

html[lang="fr"] #attr-symptoms
.attr-autonomic__item:nth-child(6)
.attr-autonomic__name::after {
  display: inline !important;

  color: #6674c9 !important;
  font-family: "Kanit-SemiBold", "Kanit", Arial, sans-serif !important;
  font-size: 14px !important;
  font-style: normal !important;
  font-weight: 600 !important;
  line-height: 17px !important;

  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* Match the existing responsive label sizes. */
@media screen and (max-width: 992px) {
  html[lang="fr"] #attr-symptoms
  .attr-autonomic__item:nth-child(1)
  .attr-autonomic__name::after,

  html[lang="fr"] #attr-symptoms
  .attr-autonomic__item:nth-child(4)
  .attr-autonomic__name::after,

  html[lang="fr"] #attr-symptoms
  .attr-autonomic__item:nth-child(5)
  .attr-autonomic__name::after,

  html[lang="fr"] #attr-symptoms
  .attr-autonomic__item:nth-child(6)
  .attr-autonomic__name::after {
    font-size: 15px !important;
    line-height: 18px !important;
  }
}

@media screen and (max-width: 700px) {
  html[lang="fr"] #attr-symptoms
  .attr-autonomic__item:nth-child(1)
  .attr-autonomic__name::after,

  html[lang="fr"] #attr-symptoms
  .attr-autonomic__item:nth-child(4)
  .attr-autonomic__name::after,

  html[lang="fr"] #attr-symptoms
  .attr-autonomic__item:nth-child(5)
  .attr-autonomic__name::after,

  html[lang="fr"] #attr-symptoms
  .attr-autonomic__item:nth-child(6)
  .attr-autonomic__name::after {
    font-size: 13px !important;
    line-height: 16px !important;
  }
}

/* ---------------------------------------------------------
   2. PRESERVE THE LOWERCASE "h" IN L’ATTRh
   The HTML already contains the required casing; this prevents
   the stylesheet from converting the complete heading to uppercase.
   --------------------------------------------------------- */
html[lang="fr"] #attr-symptoms .attr-qol__eyebrow {
  text-transform: none !important;
}

/* Keep the autonomic FR lead casing authored in HTML as well. */
html[lang="fr"] #attr-symptoms .attr-autonomic__lead {
  text-transform: none !important;
}

/* =========================================================
   FINAL EN + FR hATTR CASING FIX — V3
   Keep this block at the absolute end of the stylesheet.
   ========================================================= */

/*
 * The eyebrow text already contains the correct authored casing:
 * EN: hATTR
 * FR: L’ATTRh
 *
 * Previous rules were applying text-transform: uppercase and changing
 * these to HATTR / L’ATTRH. Preserve the authored text for both languages.
 */
#attr-symptoms .attr-qol__eyebrow,
html[lang="en"] #attr-symptoms .attr-qol__eyebrow,
html[lang="fr"] #attr-symptoms .attr-qol__eyebrow {
  text-transform: none !important;
}

/* Preserve authored hATTR casing in the autonomic lead too. */
#attr-symptoms .attr-autonomic__lead,
html[lang="en"] #attr-symptoms .attr-autonomic__lead,
html[lang="fr"] #attr-symptoms .attr-autonomic__lead {
  text-transform: none !important;
}



/* =========================================================
   V4 - EN & FR FINAL POLISH
   ========================================================= */

/* 1. Preserve authored hATTR / ATTRh casing everywhere */
#attr-symptoms .attr-section-heading__subtitle,
#attr-symptoms .attr-autonomic__lead,
#attr-symptoms .attr-autonomic__eyebrow,
#attr-symptoms .attr-qol__eyebrow{
    text-transform:none !important;
}

/* 2. Add a little more breathing room */
#attr-symptoms .attr-autonomic,
#attr-symptoms .attr-qol{
    padding:44px 36px 52px !important;
}

/* Intro spacing */
#attr-symptoms .attr-autonomic__intro,
#attr-symptoms .attr-qol__card-title{
    margin-bottom:26px !important;
}

/* 3. Make Quality-of-life section light grey like autonomic */
#attr-symptoms .attr-qol{
    background:#f4f5f9 !important;
    border-radius:26px !important;
}

/* Slightly lighter autonomic background for consistency */
#attr-symptoms .attr-autonomic{
    background:#f4f5f9 !important;
    border-radius:26px !important;
}

/* Card padding */
#attr-symptoms .attr-autonomic__card,
#attr-symptoms .attr-qol__card{
    padding:20px 22px !important;
    box-sizing:border-box !important;
}

/* Grid breathing room */
#attr-symptoms .attr-autonomic__grid,
#attr-symptoms .attr-qol__grid{
    padding:8px 8px 12px !important;
}

/* Callout spacing */
#attr-symptoms .attr-autonomic__callout,
#attr-symptoms .attr-qol__callout{
    margin-top:30px !important;
}

/* Mobile */
@media (max-width:700px){

#attr-symptoms .attr-autonomic,
#attr-symptoms .attr-qol{
    padding:30px 18px 36px !important;
}

#attr-symptoms .attr-autonomic__card,
#attr-symptoms .attr-qol__card{
    padding:14px !important;
}

}

/* =========================================================
   V5 — FINAL EN + FR LAYOUT, BACKGROUND AND hATTR/ATTRh FIXES
   KEEP THIS BLOCK AT THE ABSOLUTE END OF THE STYLESHEET.
   ========================================================= */

/* ---------------------------------------------------------
   1. RESTORE AUTONOMIC SECTION TO WHITE AND CENTRE EVERYTHING
   --------------------------------------------------------- */
#attr-symptoms .attr-autonomic {
  position: relative !important;
  z-index: 1 !important;

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

  margin-left: auto !important;
  margin-right: auto !important;
  padding: 42px 24px 48px !important;

  box-sizing: border-box !important;
  background: #ffffff !important;
  border-radius: 0 !important;
  text-align: center !important;
}

#attr-symptoms .attr-autonomic__heading,
#attr-symptoms .attr-autonomic__lead,
#attr-symptoms .attr-autonomic__overview,
#attr-symptoms .attr-autonomic__divider,
#attr-symptoms .attr-autonomic__eyebrow,
#attr-symptoms .attr-autonomic__card,
#attr-symptoms .attr-autonomic__callout {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* More space around "Routinely assessing..." */
#attr-symptoms .attr-autonomic__eyebrow {
  width: 100% !important;
  max-width: 1001px !important;

  margin-top: 28px !important;
  margin-bottom: 18px !important;
  padding: 0 28px !important;

  box-sizing: border-box !important;
  text-align: center !important;
}

/* More inner padding for the autonomic white card */
#attr-symptoms .attr-autonomic__card {
  width: 100% !important;
  max-width: 1001px !important;

  margin-top: 0 !important;
  margin-bottom: 26px !important;
  padding: 28px 30px 30px !important;

  box-sizing: border-box !important;
}

/* ---------------------------------------------------------
   2. QUALITY-OF-LIFE: FULL-BLEED GREY BACKGROUND
   Content stays centred at the original 1001px width.
   --------------------------------------------------------- */
#attr-symptoms .attr-qol {
  position: relative !important;
  z-index: 1 !important;
  isolation: isolate !important;

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

  margin-left: auto !important;
  margin-right: auto !important;
  padding: 48px 24px 58px !important;

  box-sizing: border-box !important;
  background: transparent !important;
  border-radius: 0 !important;
  text-align: center !important;
}

/* Full viewport-width grey band without moving the inner content */
#attr-symptoms .attr-qol::before {
  content: "" !important;
  position: absolute !important;
  z-index: -1 !important;

  top: 0 !important;
  bottom: 0 !important;
  left: 50% !important;

  width: 100vw !important;
  transform: translateX(-50%) !important;

  background: #f4f5f9 !important;
  border-radius: 0 !important;
  pointer-events: none !important;
}

#attr-symptoms .attr-qol__heading,
#attr-symptoms .attr-qol__eyebrow,
#attr-symptoms .attr-qol__card,
#attr-symptoms .attr-qol__callout {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* More space around "hATTR has a profound impact..." */
#attr-symptoms .attr-qol__eyebrow {
  width: 100% !important;
  max-width: 1001px !important;

  margin-top: 18px !important;
  margin-bottom: 18px !important;
  padding: 0 28px !important;

  box-sizing: border-box !important;
  text-align: center !important;
}

/* More inner padding for the quality-of-life white card */
#attr-symptoms .attr-qol__card {
  width: 100% !important;
  max-width: 1001px !important;

  margin-top: 0 !important;
  margin-bottom: 28px !important;
  padding: 30px 32px 34px !important;

  box-sizing: border-box !important;
}

/* Keep both grids centred after the added padding */
#attr-symptoms .attr-autonomic__grid,
#attr-symptoms .attr-qol__grid {
  width: 100% !important;
  max-width: none !important;

  margin-left: auto !important;
  margin-right: auto !important;
  padding: 8px 0 12px !important;

  box-sizing: border-box !important;
}

/* ---------------------------------------------------------
   3. FORCE CORRECT ENGLISH hATTR TEXT
   The current HTML contains uppercase HATTR, so text-transform
   alone cannot selectively lowercase only the first letter.
   --------------------------------------------------------- */

/* Recognizing red flags subtitle */
html[lang="en"] #attr-symptoms .attr-section-heading__subtitle {
  font-size: 0 !important;
  line-height: 0 !important;
  text-transform: none !important;
}

html[lang="en"] #attr-symptoms .attr-section-heading__subtitle::before {
  content: "MULTI-SYSTEMIC SYMPTOMS ARE A RED FLAG FOR hATTR";
  display: inline !important;

  color: #00215f !important;
  font-family: "Kanit-Regular", "Kanit", Arial, sans-serif !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  line-height: 24px !important;
  text-transform: none !important;
}

/* Importance of autonomic dysfunction lead */
html[lang="en"] #attr-symptoms .attr-autonomic__lead {
  font-size: 0 !important;
  line-height: 0 !important;
  text-transform: none !important;
}

html[lang="en"] #attr-symptoms .attr-autonomic__lead::before {
  content: "AUTONOMIC SYMPTOMS ARE A HALLMARK OF hATTR, PRESENT IN ALMOST ALL MUTATIONS";
  display: inline !important;

  color: #00215f !important;
  font-family: "Kanit-Medium", "Kanit", Arial, sans-serif !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  line-height: 24px !important;
  text-transform: none !important;
}

/* Quality-of-life lead */
html[lang="en"] #attr-symptoms .attr-qol__eyebrow {
  font-size: 0 !important;
  line-height: 0 !important;
  text-transform: none !important;
}

html[lang="en"] #attr-symptoms .attr-qol__eyebrow::before {
  content: "hATTR HAS A PROFOUND IMPACT ON PATIENTS’ QUALITY OF LIFE";
  display: inline !important;

  color: #00215f !important;
  font-family: "Kanit-Medium", "Kanit", Arial, sans-serif !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  line-height: 24px !important;
  text-transform: none !important;
}

/* Restore authored superscript references after hiding original text */
html[lang="en"] #attr-symptoms .attr-section-heading__subtitle sup,
html[lang="en"] #attr-symptoms .attr-autonomic__lead sup,
html[lang="en"] #attr-symptoms .attr-qol__eyebrow sup {
  display: inline !important;
  position: relative !important;
  top: -0.35em !important;

  margin-left: 1px !important;

  font-family: "Kanit-Regular", "Kanit", Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 0 !important;
}

/* ---------------------------------------------------------
   4. FORCE CORRECT FRENCH ATTRh TEXT
   --------------------------------------------------------- */

/* Recognizing red flags subtitle */
html[lang="fr"] #attr-symptoms .attr-section-heading__subtitle {
  font-size: 0 !important;
  line-height: 0 !important;
  text-transform: none !important;
}

html[lang="fr"] #attr-symptoms .attr-section-heading__subtitle::before {
  content: "LES SYMPTÔMES MULTISYSTÉMIQUES SONT UN SIGNAL D’ALARME POUR L’ATTRh";
  display: inline !important;

  color: #00215f !important;
  font-family: "Kanit-Regular", "Kanit", Arial, sans-serif !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  line-height: 24px !important;
  text-transform: none !important;
}

/* Importance of autonomic dysfunction lead */
html[lang="fr"] #attr-symptoms .attr-autonomic__lead {
  font-size: 0 !important;
  line-height: 0 !important;
  text-transform: none !important;
}

html[lang="fr"] #attr-symptoms .attr-autonomic__lead::before {
  content: "LES SYMPTÔMES AUTONOMES SONT CARACTÉRISTIQUES DE L’ATTRh ET SONT PRÉSENTS DANS PRESQUE TOUTES LES MUTATIONS";
  display: inline !important;

  color: #00215f !important;
  font-family: "Kanit-Medium", "Kanit", Arial, sans-serif !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  line-height: 24px !important;
  text-transform: none !important;
}

/* Quality-of-life lead */
html[lang="fr"] #attr-symptoms .attr-qol__eyebrow {
  font-size: 0 !important;
  line-height: 0 !important;
  text-transform: none !important;
}

html[lang="fr"] #attr-symptoms .attr-qol__eyebrow::before {
  content: "L’ATTRh A DE PROFONDES RÉPERCUSSIONS SUR LA QUALITÉ DE VIE DES PATIENTS";
  display: inline !important;

  color: #00215f !important;
  font-family: "Kanit-Medium", "Kanit", Arial, sans-serif !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  line-height: 24px !important;
  text-transform: none !important;
}

html[lang="fr"] #attr-symptoms .attr-section-heading__subtitle sup,
html[lang="fr"] #attr-symptoms .attr-autonomic__lead sup,
html[lang="fr"] #attr-symptoms .attr-qol__eyebrow sup {
  display: inline !important;
  position: relative !important;
  top: -0.35em !important;

  margin-left: 1px !important;

  font-family: "Kanit-Regular", "Kanit", Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 0 !important;
}

/* ---------------------------------------------------------
   5. TABLET / MOBILE
   --------------------------------------------------------- */
@media screen and (max-width: 992px) {
  #attr-symptoms .attr-autonomic,
  #attr-symptoms .attr-qol {
    max-width: 100% !important;
    padding: 38px 20px 46px !important;
  }

  #attr-symptoms .attr-autonomic__eyebrow,
  #attr-symptoms .attr-qol__eyebrow {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  #attr-symptoms .attr-autonomic__card,
  #attr-symptoms .attr-qol__card {
    padding: 24px 20px 28px !important;
  }
}

@media screen and (max-width: 700px) {
  #attr-symptoms .attr-autonomic,
  #attr-symptoms .attr-qol {
    padding: 30px 16px 38px !important;
  }

  #attr-symptoms .attr-autonomic__eyebrow,
  #attr-symptoms .attr-qol__eyebrow {
    margin-top: 20px !important;
    margin-bottom: 14px !important;
    padding: 0 8px !important;
  }

  #attr-symptoms .attr-autonomic__card,
  #attr-symptoms .attr-qol__card {
    padding: 20px 14px 24px !important;
  }

  html[lang="en"] #attr-symptoms .attr-section-heading__subtitle::before,
  html[lang="en"] #attr-symptoms .attr-autonomic__lead::before,
  html[lang="en"] #attr-symptoms .attr-qol__eyebrow::before,
  html[lang="fr"] #attr-symptoms .attr-section-heading__subtitle::before,
  html[lang="fr"] #attr-symptoms .attr-autonomic__lead::before,
  html[lang="fr"] #attr-symptoms .attr-qol__eyebrow::before {
    font-size: 17px !important;
    line-height: 21px !important;
  }

  html[lang="en"] #attr-symptoms .attr-section-heading__subtitle sup,
  html[lang="en"] #attr-symptoms .attr-autonomic__lead sup,
  html[lang="en"] #attr-symptoms .attr-qol__eyebrow sup,
  html[lang="fr"] #attr-symptoms .attr-section-heading__subtitle sup,
  html[lang="fr"] #attr-symptoms .attr-autonomic__lead sup,
  html[lang="fr"] #attr-symptoms .attr-qol__eyebrow sup {
    font-size: 10px !important;
  }
}

/* =========================================================
   V6 — URGENT ALIGNMENT + DUPLICATE HEADING FIX
   KEEP THIS BLOCK AT THE ABSOLUTE END OF THE STYLESHEET.
   ========================================================= */

@media screen and (min-width: 993px) {
  #attr-symptoms .attr-autonomic,
  #attr-symptoms .attr-qol {
    width: 100% !important;
    max-width: 1250px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 238px !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }

  #attr-symptoms .attr-autonomic {
    padding-top: 42px !important;
    padding-bottom: 48px !important;
    background: #ffffff !important;
  }

  #attr-symptoms .attr-qol {
    padding-top: 48px !important;
    padding-bottom: 58px !important;
    background: transparent !important;
  }

  #attr-symptoms .attr-autonomic__heading,
  #attr-symptoms .attr-autonomic__lead,
  #attr-symptoms .attr-autonomic__overview,
  #attr-symptoms .attr-autonomic__divider,
  #attr-symptoms .attr-autonomic__eyebrow,
  #attr-symptoms .attr-autonomic__card,
  #attr-symptoms .attr-autonomic__callout,
  #attr-symptoms .attr-qol__heading,
  #attr-symptoms .attr-qol__eyebrow,
  #attr-symptoms .attr-qol__card,
  #attr-symptoms .attr-qol__callout {
    width: 100% !important;
    max-width: 1000px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }
}

#attr-symptoms .attr-section-heading__subtitle::before,
#attr-symptoms .attr-section-heading__subtitle::after {
  content: none !important;
  display: none !important;
}

html:lang(en) #attr-symptoms .attr-section-heading__subtitle,
html[lang^="en"] #attr-symptoms .attr-section-heading__subtitle,
html:lang(fr) #attr-symptoms .attr-section-heading__subtitle,
html[lang^="fr"] #attr-symptoms .attr-section-heading__subtitle {
  position: relative !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-transform: none !important;
}

html:lang(en) #attr-symptoms .attr-section-heading__subtitle::before,
html[lang^="en"] #attr-symptoms .attr-section-heading__subtitle::before {
  content: "MULTI-SYSTEMIC SYMPTOMS ARE A RED FLAG FOR hATTR" !important;
  display: inline !important;
  color: #00215f !important;
  font-family: "Kanit-Regular", "Kanit", Arial, sans-serif !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  line-height: 24px !important;
  text-transform: none !important;
}

html:lang(fr) #attr-symptoms .attr-section-heading__subtitle::before,
html[lang^="fr"] #attr-symptoms .attr-section-heading__subtitle::before {
  content: "LES SYMPTÔMES MULTISYSTÉMIQUES SONT UN SIGNAL D’ALARME POUR L’ATTRh" !important;
  display: inline !important;
  color: #00215f !important;
  font-family: "Kanit-Regular", "Kanit", Arial, sans-serif !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  line-height: 24px !important;
  text-transform: none !important;
}

#attr-symptoms .attr-section-heading__subtitle sup {
  display: inline !important;
  position: relative !important;
  top: -0.35em !important;
  margin-left: 1px !important;
  color: #00215f !important;
  font-family: "Kanit-Regular", "Kanit", Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 0 !important;
}

@media screen and (max-width: 992px) {
  #attr-symptoms .attr-autonomic,
  #attr-symptoms .attr-qol {
    max-width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

@media screen and (max-width: 700px) {
  #attr-symptoms .attr-autonomic,
  #attr-symptoms .attr-qol {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  html:lang(en) #attr-symptoms .attr-section-heading__subtitle::before,
  html[lang^="en"] #attr-symptoms .attr-section-heading__subtitle::before,
  html:lang(fr) #attr-symptoms .attr-section-heading__subtitle::before,
  html[lang^="fr"] #attr-symptoms .attr-section-heading__subtitle::before {
    font-size: 17px !important;
    line-height: 21px !important;
  }

  #attr-symptoms .attr-section-heading__subtitle sup {
    font-size: 10px !important;
  }
}

/* =========================================================
   FINAL V7 — REMOVE DUPLICATE SUBHEADING GENERATED BY CSS
   EN + FR
   KEEP THIS BLOCK AT THE ABSOLUTE END OF THE STYLESHEET.
   ========================================================= */

/*
 * The subtitle text is already authored correctly in the HTML:
 * EN: Multi-systemic symptoms are a red flag for hATTR
 * FR: equivalent authored ATTRh text
 *
 * Therefore, no CSS-generated replacement text is required.
 */

/* Remove every generated copy of the subtitle. */
#attr-symptoms .attr-section-heading__subtitle::before,
#attr-symptoms .attr-section-heading__subtitle::after,
html:lang(en) #attr-symptoms .attr-section-heading__subtitle::before,
html:lang(en) #attr-symptoms .attr-section-heading__subtitle::after,
html[lang^="en"] #attr-symptoms .attr-section-heading__subtitle::before,
html[lang^="en"] #attr-symptoms .attr-section-heading__subtitle::after,
html:lang(fr) #attr-symptoms .attr-section-heading__subtitle::before,
html:lang(fr) #attr-symptoms .attr-section-heading__subtitle::after,
html[lang^="fr"] #attr-symptoms .attr-section-heading__subtitle::before,
html[lang^="fr"] #attr-symptoms .attr-section-heading__subtitle::after {
  content: none !important;
  display: none !important;
}

/* Restore the real authored subtitle text. */
#attr-symptoms .attr-section-heading__subtitle,
html:lang(en) #attr-symptoms .attr-section-heading__subtitle,
html[lang^="en"] #attr-symptoms .attr-section-heading__subtitle,
html:lang(fr) #attr-symptoms .attr-section-heading__subtitle,
html[lang^="fr"] #attr-symptoms .attr-section-heading__subtitle {
  display: block !important;

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

  margin: 12px auto 16px !important;
  padding: 0 20px !important;

  box-sizing: border-box !important;

  color: #00215f !important;
  font-family: "Kanit-Regular", "Kanit", Arial, sans-serif !important;
  font-size: 20px !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 24px !important;

  text-align: center !important;
  text-transform: none !important;
  letter-spacing: 0 !important;

  white-space: normal !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
}

/* Keep the authored reference number visible and correctly positioned. */
#attr-symptoms .attr-section-heading__subtitle sup {
  display: inline !important;
  position: relative !important;
  top: -0.35em !important;

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

  color: inherit !important;
  font-family: "Kanit-Regular", "Kanit", Arial, sans-serif !important;
  font-size: 60% !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 0 !important;
}

/* ---------------------------------------------------------
   DESKTOP RIGHT-COLUMN ALIGNMENT
   224px sidebar + 14px gap = 238px.
   --------------------------------------------------------- */
@media screen and (min-width: 993px) {
  #attr-symptoms .attr-autonomic,
  #attr-symptoms .attr-qol {
    width: 100% !important;
    max-width: 1250px !important;

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

    padding-left: 238px !important;
    padding-right: 12px !important;

    box-sizing: border-box !important;
  }

  #attr-symptoms .attr-autonomic__heading,
  #attr-symptoms .attr-autonomic__lead,
  #attr-symptoms .attr-autonomic__overview,
  #attr-symptoms .attr-autonomic__divider,
  #attr-symptoms .attr-autonomic__eyebrow,
  #attr-symptoms .attr-autonomic__card,
  #attr-symptoms .attr-autonomic__callout,
  #attr-symptoms .attr-qol__heading,
  #attr-symptoms .attr-qol__eyebrow,
  #attr-symptoms .attr-qol__card,
  #attr-symptoms .attr-qol__callout {
    width: 100% !important;
    max-width: 1000px !important;

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

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

/* Tablet and mobile do not use the desktop sidebar offset. */
@media screen and (max-width: 992px) {
  #attr-symptoms .attr-autonomic,
  #attr-symptoms .attr-qol {
    max-width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  #attr-symptoms .attr-section-heading__subtitle {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

@media screen and (max-width: 700px) {
  #attr-symptoms .attr-autonomic,
  #attr-symptoms .attr-qol {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  #attr-symptoms .attr-section-heading__subtitle {
    margin-top: 10px !important;
    margin-bottom: 14px !important;

    padding-left: 12px !important;
    padding-right: 12px !important;

    font-size: 17px !important;
    line-height: 21px !important;
  }

  #attr-symptoms .attr-section-heading__subtitle sup {
    font-size: 60% !important;
  }
}

/* =========================================================
   FINAL V8 — RECOGNIZING RED FLAGS LINK COLOUR
   EN + FR
   KEEP THIS BLOCK AT THE ABSOLUTE END OF THE STYLESHEET.
   ========================================================= */

/*
 * Makes the linked underlined text use the same colour as the
 * surrounding sentence while preserving the underline.
 *
 * EN: Hereditary ATTR
 * FR: L’ATTR héréditaire
 */
#attr-symptoms #attr-otp-heading .attr-section-heading__body a,
#attr-symptoms #recognizing-red-flags .attr-section-heading__body a,
#attr-symptoms #attr-otp-heading .attr-section-heading__body a:link,
#attr-symptoms #recognizing-red-flags .attr-section-heading__body a:link,
#attr-symptoms #attr-otp-heading .attr-section-heading__body a:visited,
#attr-symptoms #recognizing-red-flags .attr-section-heading__body a:visited,
#attr-symptoms #attr-otp-heading .attr-section-heading__body a:hover,
#attr-symptoms #recognizing-red-flags .attr-section-heading__body a:hover,
#attr-symptoms #attr-otp-heading .attr-section-heading__body a:focus,
#attr-symptoms #recognizing-red-flags .attr-section-heading__body a:focus,
#attr-symptoms #attr-otp-heading .attr-section-heading__body a:active,
#attr-symptoms #recognizing-red-flags .attr-section-heading__body a:active {
  color: #151515 !important;
  background: transparent !important;

  font-family: inherit !important;
  font-size: inherit !important;
  font-style: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;

  text-decoration-line: underline !important;
  text-decoration-color: #151515 !important;
  text-decoration-thickness: auto !important;
  text-underline-offset: 2px !important;

  outline-color: currentColor;
}

/* The authored HTML contains a nested <u>; keep it black too. */
#attr-symptoms #attr-otp-heading .attr-section-heading__body a u,
#attr-symptoms #recognizing-red-flags .attr-section-heading__body a u {
  color: #151515 !important;
  background: transparent !important;

  font-family: inherit !important;
  font-size: inherit !important;
  font-style: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;

  text-decoration-line: underline !important;
  text-decoration-color: #151515 !important;
  text-underline-offset: 2px !important;
}



/* FINAL LIGHTBULB IMAGE OVERRIDE */
#attr-symptoms .bulb,
#attr-symptoms .callout-icon,
#attr-symptoms [class*="bulb"],
#attr-symptoms [class*="callout-icon"]{
 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;
 color:transparent !important;
 font-size:0 !important;
 text-indent:-9999px !important;
 overflow:hidden !important;
}
#attr-symptoms .bulb::before,
#attr-symptoms .bulb::after,
#attr-symptoms .callout-icon::before,
#attr-symptoms .callout-icon::after,
#attr-symptoms [class*="bulb"]::before,
#attr-symptoms [class*="bulb"]::after,
#attr-symptoms [class*="callout-icon"]::before,
#attr-symptoms [class*="callout-icon"]::after{
 content:none !important;
 display:none !important;
}


/* ==========================================================================
   FINAL AUTONOMIC CARD BOTTOM-SPACING + ITALIC "ALL"
   Keep this block at the absolute end of the stylesheet.
   ========================================================================== */

/* Reduce only the empty space below the final Pupillomotor row. */
#attr-symptoms .attr-autonomic__card {
  height: auto !important;
  min-height: 0 !important;
  padding-bottom: 14px !important;
}

#attr-symptoms .attr-autonomic__grid {
  height: auto !important;
  min-height: 0 !important;
  padding-bottom: 0 !important;
  align-content: start !important;
}

#attr-symptoms .attr-autonomic__item--last {
  min-height: 84px !important;
  padding-top: 6px !important;
  padding-bottom: 2px !important;
  align-self: start !important;
}

/* Preserve the centred third-row placement on desktop. */
@media screen and (min-width: 993px) {
  #attr-symptoms .attr-autonomic__item--last {
    grid-column: 2 !important;
  }
}

/* Tablet/mobile already use a single-column list. */
@media screen and (max-width: 992px) {
  #attr-symptoms .attr-autonomic__card {
    padding-bottom: 12px !important;
  }

  #attr-symptoms .attr-autonomic__item--last {
    grid-column: auto !important;
    min-height: 86px !important;
    padding-top: 6px !important;
    padding-bottom: 4px !important;
  }
}

/*
 * Wrap only the word ALL in <em>...</em>.
 * Example:
 * ... PRESENT IN ALMOST <em>ALL</em> MUTATIONS<sup>6</sup>
 */
#attr-symptoms .attr-autonomic__lead em,
#attr-symptoms .attr-autonomic__eyebrow em {
  font-family: inherit !important;
  font-size: inherit !important;
  font-style: italic !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  text-transform: inherit !important;
}


/* ==========================================================================
   FINAL AUTONOMIC + QUALITY-OF-LIFE CARD SPACING
   Keep this block at the absolute end of the stylesheet.
   ========================================================================== */

/* The authored heading uses <i>ALL</i>. */
#attr-symptoms .attr-autonomic__lead i {
  font-family: inherit !important;
  font-size: inherit !important;
  font-style: italic !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  text-transform: inherit !important;
}

/* ----------------------------------------------------------
   QUALITY-OF-LIFE CARD
   Reduce the empty area below the centred ~30% final item.
   ---------------------------------------------------------- */

#attr-symptoms .attr-qol__card {
  height: auto !important;
  min-height: 0 !important;
  padding-bottom: 14px !important;
}

#attr-symptoms .attr-qol__grid {
  height: auto !important;
  min-height: 0 !important;
  padding-bottom: 0 !important;
  align-content: start !important;
}

/*
 * The final desktop row contains:
 * empty placeholder | ~30% item | empty placeholder.
 * Reduce the height of all three cells equally so the item stays centred.
 */
#attr-symptoms .attr-qol__grid > .attr-qol__item:nth-last-child(-n + 3) {
  min-height: 88px !important;
  padding-top: 6px !important;
  padding-bottom: 2px !important;
  align-self: start !important;
}

/* Empty placeholders must reserve only the reduced final-row height. */
#attr-symptoms .attr-qol__item--empty {
  min-height: 88px !important;
  padding: 0 !important;
  border-bottom: 0 !important;
}

/* Keep the actual ~30% item in the middle desktop column. */
@media screen and (min-width: 993px) {
  #attr-symptoms .attr-qol__grid > .attr-qol__item:nth-last-child(2) {
    grid-column: 2 !important;
  }
}

/* On tablet/mobile, empty placeholders are not needed. */
@media screen and (max-width: 992px) {
  #attr-symptoms .attr-qol__card {
    padding-bottom: 12px !important;
  }

  #attr-symptoms .attr-qol__item--empty {
    display: none !important;
  }

  #attr-symptoms .attr-qol__grid > .attr-qol__item:nth-last-child(2) {
    grid-column: auto !important;
    min-height: 90px !important;
    padding-top: 6px !important;
    padding-bottom: 4px !important;
  }
}


/* ==========================================================================
   USE AEM HTML FOR AUTONOMIC LEAD TEXT
   Disable the CSS-generated heading text.
   ========================================================================== */

#attr-symptoms .attr-autonomic__lead::before,
.attr-autonomic__lead::before {
    content: none !important;
    display: none !important;
}


/* ==========================================================================
   FINAL FIX - USE AEM HTML FOR AUTONOMIC LEAD
   ========================================================================== */

/* Disable generated heading text */
#attr-symptoms .attr-autonomic__lead::before,
.attr-autonomic__lead::before{
    content:none !important;
    display:none !important;
}

/* Restore the authored HTML text */
#attr-symptoms .attr-autonomic__lead,
html[lang="en"] #attr-symptoms .attr-autonomic__lead,
html[lang="fr"] #attr-symptoms .attr-autonomic__lead{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;

    font-size:20px !important;
    line-height:1.35 !important;
    
    color:#072b6b !important;

    text-align:center !important;
   
    margin:0 0 12px !important;
    padding:0 !important;

    text-indent:0 !important;
    overflow:visible !important;
    white-space:normal !important;
}

/* Italic only for ALL */
#attr-symptoms .attr-autonomic__lead i{
    font-style:italic !important;
    font-weight:inherit !important;
    font-size:inherit !important;
    line-height:inherit !important;
}

/*css here */
/*banner css*/

.footer-strip span.no-bold {
  font-family: "Kanit";
}

.footer-strip span.no-breaking {
  white-space: nowrap;
}
.banner-block {
max-width: 1310px;
width: 1310px;
margin: 0px auto;
padding: 0 0 0px 75px;
}

.banner-txt1 {
font-family: "Kanit-SemiBold";
font-size: 16px;
color: #FFFFFF;
margin-bottom: 18px;
text-transform: uppercase;
margin-top: 20px;
/*font-family: "Kanit-Medium";
font-size: 18px;*/
}

.banner-txt2 {
font-family: "Kanit-Bold";
font-size: 45px;
color: #FFFFFF;
padding-bottom: 10px;
max-width: 440px;
}

.banner-txt2 span {
color: #e962e9;
}

.banner-txt3 {
font-family: "Kanit-Medium";
font-size: 18px;
color: #FFFFFF;
padding-top: 10px;
width: 420px;
line-height: 21px;
}

.attrwt {
margin: auto;
max-width: 1153px;
font-family: "Kanit-Regular";
font-size: 14px;/*font-size: 16px;*/
padding-bottom: 41px;
}

.scroll {
font-family: "Kanit";
font-size: 16px;
color: #FFFFFF;
margin-bottom: -20px;
text-transform: uppercase;
text-align: center;
position: relative;
top: -50px;
}

.scroll a {
color: #FFF;
padding-right: 80px;
}

.scroll a::after {
content: url(/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop/icon.svg);
position: relative;
top: 6px;
left: 15px;
}

.mob-line {
display: none;
}
/*css section1 */
.main-bg {
background-color: #FAFAFA;
z-index: -2;
position: relative;
padding-bottom: 25px;/*padding-bottom: 80px;*/
}

.attrsymptoms-sec1 {
text-align: center;
padding-top: 53px;
max-width: 1250px;
margin: auto;
padding-left: 238px;
}

.attrsymptoms-sec1 .text2 p {
    font-size: 20px;
    color: #00215F;
    font-family: "Kanit-Medium";
    padding-bottom: 15px;
    line-height: 40px;
    margin: auto;
    text-align: center;
}



.attrsymptoms-sec1 p span{
    color:#E34AEE;
    font-family: "Kanit-SemiBold";
}
.attrsymptoms-sec1 img {
width: 376px;
  /*height: 22px;*/
margin-bottom: 35px;
}

.attrsymptoms-block {
background-color: white;
border-radius: 30px 30px 30px 0;
max-width: 1153px;
height: 838px;
margin: auto;
display: flex;
padding: 22px 10px;
text-align: center;
justify-content: center;
position: relative;
}

.attrsymptoms-block::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 30px 30px 30px 0;
border:1px solid #E34AEE;
filter: blur(0.1px);
/*background: transparent linear-gradient(123deg, #F599FC 0%, #7D76FE 30%, #556AFF 49%, #619EFD 79%, #75F2FB 100%) 0% 0% no-repeat padding-box;*/
/*z-index: -1;
filter: blur(7px);*/
}

.attrsymptoms-col {
width: 282px;
border-right: 2px solid transparent;
border-image: url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop/Rectangle-10899.png");
border-image-slice: 1;
}

.no-border {
border-right: none!important;
}

.attrsub-block {
width: 182px;
text-align: center;
display: inline-block;
padding: 0 0px;
}

.desktop-only {
display: block;
}

.mobile-only {
display: none;
}

.block-title {
font-size: 24px;
line-height: 22px;
color: #00215F;
font-family: "Kanit-Medium";
margin-bottom: 30px;
padding-top: 13px;
}

#attr-symptoms .icon-text {
font-size: 18px;
line-height: 20px;
font-family: "Kanit" !important;
color: #151515;
padding: 8px 0 25px 0;
}

/*.bottom-blocktxt {
display: none;
font-size: 16px;
line-height: 20px;
font-family: 'Kanit' !important;
color: #151515;
visibility: hidden;
}*/
#attr-symptoms .bottom-blocktxt {
font-size: 18px;
line-height: 20px;
font-family: "Kanit" !important;
color: #00215F;
max-width: 1001px;
margin: auto;
margin-top: 19px;
/*margin-left: 21%;
    margin-top: 1em;*/
}

.small-icons {
border: 1px solid #000;
}
/* section two css */
.main-bg2 {
background-color: #fff;
text-align: center;
padding: 65px 0 25px;
}

.icon-border {
border: none;
}

.title-blue {
font-size: 30px;
line-height: 34px;
font-family: "Kanit-Bold";
text-align: center;
color: #00215F;
padding: 0 20px 5px;
max-width: 1160px;
margin: 0 auto;
padding-bottom: 15px;
}
#attr-symptoms .title-blue{
    font-family: "Kanit-SemiBold";
}
#attr-symptoms .title-blue span{
    color: #FF53FF;
}
#attr-symptoms .attrsymptoms-sec1 p sup {
    font-family: "Kanit-Medium";
    font-size: 60%;
}
#attr-symptoms .main-bg2 .title-txt sup {
    font-size: 60%;
    font-family: "Kanit-Regular";
}
.title-txt {
font-family: "Kanit";
font-size: 18px;
line-height: 16px;
padding: 0 20px 16px;
max-width: 980px;
width: 100%;
margin: 0 auto;
}

.line-img {
width: 376px;
  /*height: 19px;*/
margin-bottom: 40px;
}

.patient-txt {
font-size: 20px;
color: #00215F;
margin-bottom: 24px;
font-family: "Kanit-Medium";
padding: 0 10px;
}

.round-img-block {
width: 707px;
height: 287px;/*height: 245px;*/
margin: 0 0px 25px 0;
}

.m-right {
  /*margin-right: 130px;*/
;
}

.sec2-txt {
font-size: 20px;
line-height: 24px;
color: #000000;
font-family: "Kanit-Medium";
padding: 0 20px;
padding-bottom: 10px;
}

.sec2-span {
font-size: 15px;
line-height: 20px;
color: #151515;
font-family: "Kanit";
padding: 0 20px;
}

.d-flex {
width: 1073px;
margin: 0 auto;
padding: 0 20px;
padding-bottom: 10px;
}

/*css section3 */
.black-strip {
height: 56px;
background: #000000;
position: relative;
z-index: -2;
}
















.footer-block {
margin-top: 55px;
text-align: center;
  padding: 0 15px;
}

.rec-txt {
font-size: 40px;
line-height: 45px;
color: #FFFFFF;
font-family: "Kanit-Bold";
padding-bottom: 55px;
}

.rec-txt2 {
font-size: 20px;
color: #FFFFFF;
font-family: "Kanit-Medium";
padding-bottom: 25px;
display: none;
}

.attr-btn {
font-size: 16px;
color: #00215F;
font-family: "Kanit-Medium";
background: linear-gradient(to right, #FEFEFE 0%, #FCF6FE 18%, #EBF1FE 50%, #DFF5FE 87%, #E2FEFE 90%, #FEFEFE) padding-box, linear-gradient(to right, #F599FC 0%, #556AFF 50%, #75F2FB 100%) border-box;
border: 2px solid transparent;
border-radius: 21px;
padding: 8px 20px;
width: 202px;
align-items: center;
display: inline-block;
}

.footer-strip {
background: #000;
color: #fff;
font-family: "Kanit";
font-size: 14px;
line-height: 20px;
}

.footer-strip p {
    max-width: fit-content;
  width: 100%;
  margin: 0px auto;
  padding: 0 7px 0px 0px;
  padding-top: 20px;
  margin: 0px auto;
  max-width: 1158px;
}

.footer-strip span {
font-family: "Kanit-Bold";
}

.display-mob {
display: none;
margin-bottom: 20px;
}

.img-align {
width: 50px;
}

.align-img-fix {
width: 75px;
}

.fix-img-align {
width: 75px;
}

 
 
#attr-symptoms .rec-txt {
  font-family: "Kanit-Regular";
  font-size: 26px;
  line-height: 28px;
  width: 100%;
  margin: 40px auto;
  padding-bottom: 0;
}
#attr-symptoms .footer-block {
  margin-top: 0;
}
#attr-symptoms .attr-btn {
  max-width: 205px;
  margin: auto;
  background: #E2FCFD;
  border-radius: 19px;
  border: 1px solid #E34AEE;
  position: static;
  text-transform: uppercase;
} 

.icon21{
 width:84px;   
}
.icon22{
 width:100px;   
}
.icon23{
 width:72px;   
}
.icon24{
 width:75px;   
}
.icon25{
 width:75px;   
}
#attr-symptoms .only-mob{
    display: contents;
}

/*Media Queries CSS*/



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

/*#attr-symptoms .only-mob{
    display:block;
}*/
#attr-symptoms .bottom-blocktxt {
  margin-left: 2%;
  margin-top: 1em;
}
.attrsymptoms-block::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 30px 30px 30px 0;
    border: 1px solid transparent;
    filter: blur(7px);
    background: transparent linear-gradient(123deg, #F599FC 0%, #7D76FE 30%, #556AFF 49%, #619EFD 79%, #75F2FB 100%) 0% 0% no-repeat padding-box;
    z-index: -1;
}
  
.man {
  max-width: 60%;
  display: block;
  margin: 0 auto;
  margin-top: 30px;
}

.sec2-span br {
  display: none;
}

img[src="/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop/hypotension.png"] {
  width: 80px;
  position: relative;
  top: 21px;
}

.mobile-align {
      /*border: 1px solid red;*/
  height: 85px;
}

.desktop-only {
display:none;
  ;
}

p.scroll.attr-sm {
  display: none;
  padding-right: 0px;
}

.scroll.mobile-only a {
  color: #FFF;
  padding-right: 0px;
      position: relative;
      top: 68vh;
  /*top: 26px;*/

}

.mobile-only {
  display: block;
}

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

.attrwt {
  padding-left: 25px;
}
  
  /*.banner-img{*/
  /*    margin-top: 15px;*/
  /*}*/
.banner-img {
  background-image: url(/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/starry%20background.png);
  /* background-image: url(/content/dam/intelligentcontent/unbranded/attr-dsa/en/desktop/symptoms-bgmobile.png); */
  background-repeat: no-repeat;
      background-size: 100% 100%;
  width: 100%;
  min-height: 1110px;/*min-height: 990px;*/
  display: block;
  margin-top: 0px;
}

.banner-txt1 {
  font-size: 14px;
}

.banner-block {
  width: auto;
  margin: 0px 18px;
  padding: 95px 0 0;
}

.banner-txt2 {
  font-size: 30px;
  max-width: 343px;
}

.banner-txt3 {
  width: auto;
}

/*.scroll {
  display: none;
}*/

.mob-line {
  /* margin: 10px -8px; */
  display: none;
  margin: 10px 0 0 -10px;
  /* padding-right: 10px; */
  width: 105%;
}

.mob-line img {
  width: 100%;
}

.attrsymptoms-sec1 {
  padding-top: 38px;
}

.attrsymptoms-sec1 p {
  font-size: 25px;
  padding: 0 20px 16px;
  line-height:29px;
}

.attrsymptoms-sec1 img {
  width: 273px;
      /*height:18px;*/
  margin-bottom: 32px;
}

.attrsymptoms-block {
  width: auto;
  height: auto;
  margin: 0 20px;
  display: block;
  padding: 8px 0px 0px;
}
  /*.attrsymptoms-block::before{*/
  /*     background: transparent;*/
  /*}*/
.icon-border {
  width: 85%;
  border-bottom: 2px solid transparent;
  border-image: url(/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop/line-attr.svg);
  border-image-slice: 1;
  height: 20px;
  text-align: center;
  margin: 0 auto;
}

.attrsymptoms-col {
  border: none;
  width: auto;
      /*border-bottom: 2px solid transparent;*/
      /*border-image: url(/content/dam/intelligentcontent/unbranded/attr-dsa/en/desktop/line-attr.svg);*/
      /*border-image-slice: 1;*/
      /*margin-bottom: 30px;*/
  ;
}

.block-title {
  font-size: 24px;
  margin: 30px 24px 24px;
  padding-top: 0;
}

.responsive-icon-box {
      /*border: 1px solid red;*/
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
}

.main-bg {
  padding-bottom: 0px;/*padding-bottom: 51px;*/
  
}

.attrsub-block {
  display: inline-block;
      /*border: 1px solid;*/
  width: 153px;
  padding: 0 5px;
}

.icon-text {
  font-size: 18px;
}
#attr-symptoms sup{
        font-family: "Kanit-Medium";
}
.bottom-blocktxt {
  padding: 20px 15px 25px 21px;/*padding: 20px 15px 50px 21px;*/
  font-size: 16px;
}

.main-bg2 {
  padding: 28px 0;
}

.title-blue {
  font-size: 25px;
  padding: 0 30px 5px;
  width: 100%;
  line-height:29px;
}

.title-txt {
  padding: 0 18px 16px;
  font-size: 16px;
  width: 100%;
  letter-spacing: -0.03px;
}

.line-img {
  width: 300px;
  margin-bottom: 20px;
}

.m-right {
  margin-right: 23px;
}



.patient-txt {
  margin-bottom: 35px;
}

.round-img-block {
  width: 335px;
  height: 165px;
      /* width: 100%; */
  margin: 0px;
  display: none;
}

.display-mob {
  display: block;
  margin-bottom: 20px;
}

.mobileview-img {
  width: 293.59px;
  height: 287px;
  max-width:100%;
  max-height:100%;
  /*width: 157px;
  height: 170px;*/
  margin-right: 23px;
}

.mr-0 {
  margin-right: 0px !important;
  margin-top: 45px;
}


.sec2-txt {
  font-size: 16px;
  line-height: 20px;
}

.sec2-span {
  font-size: 16px;
  padding: 0 18px;
  letter-spacing: -0.2px;
  text-align: center;
  line-height: 18px;
}







.rec-txt {
  font-size: 38px;
  padding-bottom: 30px;
}

.footer-strip {
  padding: 15px;
}

.d-flex {
  width: 100%;
  margin: 0 auto;
  padding: 0 10px;
}

.footer-strip p {
  width: 100%;
  padding: 0;
}
.about-attr-reference a, .footer-strip a, .diagnosis-footer a{
    color:inherit !important;
    font-size:inherit !important;
}

.icon1 {
  width: 37px;
  height: 60px;
}

.icon2 {
  width: 68px;
  height: 46px;
  margin-top: 15px;
}

.icon3 {
  width: 63px;
  height: 60px;
}

.icon4 {
  width: 43px;
  height: 63px;
}

.icon5 {
  width: 45px;
  height: 65px;
}

.icon6 {
  width: 47px;
  height: 60px;
}

.icon7 {
  width: 32px;
  height: 57px;
}

.icon8 {
  width: 31px;
  height: 58px;
}

.icon9 {
  width: 61px;
  height: 52px;
}

.icon10 {
  width: 48px;
  height: 60px;
}

.icon11 {
  width: 62px;
  height: 49px;
}

.icon12 {
  width: 33px;
  height: 65px;
  margin-top: 8px;
}

.icon13 {
  width: 59px;
  height: 65px;
}
}

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

}

@media screen and (max-width: 480px) {
.man {
  max-width: 87%;
}
}
@media screen and (max-width: 392px){
    .scroll.mobile-only a{
        top: 82vh;
    }
}
@media screen and (max-width: 336px) {
.mr-0 {
  margin-right: 23px !important;
}
}

@media screen and (max-width: 290px) {
.mr-0 {
  margin-right: 0px !important;
}

.mobileview-img {
  margin-right: 0px;
}
}

@media only screen and (min-width: 320px) and (max-width: 375px) {
.banner-txt1 {
  font-size: 12px;
  margin-top: 0px;
}

#about-attr-page .banner-content h1 {
  font-size: 24px;
  line-height: 120%;
}
}

@media only screen and (min-width: 700px) and (max-width: 880px) {
.img-align.hear-beat {
  width: 54%;
  height: 48px;
}
}

@media only screen and (min-width: 1439px) and (max-width: 1650px) {
.banner-img {
  min-height: 700px;
  /*margin-top: 15px;*/
}
}

@media screen and (min-width: 2500px) {
.banner-img {
  min-height: 1162px;
  /*margin-top: 22px;*/
}
}

@media only screen and (min-width: 1100px) and (max-width: 1350px) {
.footer-strip p {
  padding: 0px 10px 0px 20px;
}
}

@media screen and (min-width: 992px) {
#page-1a38cc0b2e .banner-img {
  margin-top: 0px;
  min-height: 770px;
}

.banner-img {
  background-image: url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/banner.png");
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
  min-height: 764px;/*min-height: 730px;*/
  display: flex;
  align-items: center;
  z-index: -2;
  position: relative;
  top: 0px;
  /*margin-top: -57px;*/
}
  #attr-symptoms #header {
      background: transparent;
      /*position: relative;*/
      z-index: 9;
  }
}
@media (min-width:1500px){
.banner-img {
  /*background-size: 100% 100%;*/
    background-position: center center;/*background-position: center bottom;*/
    background-size: cover;
    width: 100%;
    height: 100%;
    min-height:1200px;
    /*margin-top: 26px;*/
}
}

@media (min-width: 992px) and (max-width: 1330px) {
.attr-symptoms .banner-img {
  background-position: 59%;
}

.attr-symptoms .banner-block {
  padding: 0 0 0px 34px;
}
}

@media (min-width: 992px) and (max-width: 1200px) {
#attr-symptoms .footer-strip p {
  margin: 0 15px;
  max-width: 97%;
}
#attr-symptoms .attrwt {
  margin: 0 15px;
}
#attr-symptoms .attrsymptoms-block {
  margin: 0 15px;
}
#attr-symptoms .banner-img {
  background-position: 64%;
}
#attr-symptoms .banner-block {
  padding: 0 0 0px 25px;
}
}
@media ( max-width: 767px){
/*#attr-symptoms .mobile-only {
     margin-top: 520px;
}*/
}
@media ( max-width: 374px){
#attr-symptoms .icon-border{
  width: 245px;
}
}
@media ( max-width: 767px){
#attr-symptoms .footer-container {
  padding-bottom: 30px;
}
}

@media only screen 
  and (device-width : 667px) 
  and (device-height : 375px) and (orientation: landscape)
{
.banner-img
{
      min-height: 1600px;
}
.scroll.mobile-only a
{
  top: 626px;
}
}

@media only screen 
  and (device-width : 664px) 
  and (device-height : 390px) and (orientation: landscape)
{
.banner-img
{
      min-height: 1600px;
}
.scroll.mobile-only a
{
  top: 626px;
}
}

/*new section*/



#attr-symptoms-section {
  background-color: #FAFAFA;
  width: 100%;
}

/* 2-column grid: sidebar + content */
#attr-symptoms #attr-symptoms-layout {
  max-width: 1250px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 224px 1001px;
  column-gap: 14px;
}

#attr-symptoms #attr-symptoms-layout > div:has(#attr-otp-nav) {
  grid-column: 1;
  grid-row: 1 / span 2;
}

#attr-symptoms #attr-symptoms-layout > div:has(#attr-otp-heading) {
  grid-column: 2;
  grid-row: 1;
}

#attr-symptoms #attr-symptoms-layout > div:has(#attr-body-figure) {
  grid-column: 2;
  grid-row: 2;
}

/* ==========================
   ON THIS PAGE SIDEBAR
========================== */

#attr-symptoms #attr-otp-nav {
    width: 224px;
    height: 304px;
    background-color: #E9EBF2;
    border-radius: 0 0 25px 0;
    box-sizing: border-box;

    /* !important is required because .cmp-text has padding: 0 !important */
    padding: 36px 17px 30px 29px !important;

    overflow: hidden;
}

#attr-symptoms #attr-otp-nav .attr-onthispage {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

/* ON THIS PAGE heading */
#attr-symptoms #attr-otp-nav .attr-onthispage__title {
    margin: 0 0 16px !important;
    padding: 0 !important;

    color: #00215F;
    font-family: "Kanit-SemiBold";
    font-size: 21px;
    line-height: 20px;
    font-weight: 600;
    text-align: left;
    text-transform: uppercase;
}

/* All sidebar links */
#attr-symptoms #attr-otp-nav .attr-onthispage__link {
    display: block;
    width: fit-content;
    max-width: 100%;

    margin: 0 0 16px !important;
    padding: 0 0 3px !important;

    color: #00215F;

    font-size: 18px;
    line-height: 18px;

    text-align: left;
    text-decoration: none;
    box-sizing: border-box;
}

/* Pink underline for active link */
#attr-symptoms #attr-otp-nav .attr-onthispage__link.is-active {
    border-bottom: 3px solid #E34AEE;
}

/* Remove bottom space from final link */
#attr-symptoms #attr-otp-nav .attr-onthispage__link:last-child {
    margin-bottom: 0 !important;
}

/* =====================================
   RECOGNIZING RED FLAGS HEADING SECTION
===================================== */

#attr-symptoms #attr-otp-heading {
    width: 100%;
    max-width: 1001px;
    min-height: 178px;
    margin: 0;
    padding: 43px 30px 24px !important;
    box-sizing: border-box;
    text-align: center;
    background-color: #FAFAFA;
}

#attr-symptoms #attr-otp-heading .attr-section-heading {
    width: 100%;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
}

/* Recognizing red flags */
#attr-symptoms #attr-otp-heading .attr-section-heading__title {
    margin: 0 0 12px !important;
    padding: 0 !important;
    color: #00215F;
    font-family: "Kanit-SemiBold";
    font-size: 26px;
    line-height: 31px;
    font-weight: 600;
    text-align: center;
}

/* Multi-systemic symptoms subtitle */
#attr-symptoms #attr-otp-heading .attr-section-heading__subtitle {
    margin: 0 0 12px !important;
    padding: 0 !important;
    color: #00215F;
    font-family: "Kanit-SemiBold";
    font-size: 17px;
    line-height: 21px;
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
}

/* Description — restricted width to produce three lines */
#attr-symptoms #attr-otp-heading .attr-section-heading__body {
    width: 100%;
    max-width: 720px;
    margin: 0 auto !important;
    padding: 0 !important;
    color: #151515;
    font-family: "Kanit-Regular";
    font-size: 16px;
    line-height: 18px;
    font-weight: 400;
    text-align: center;
}

/* Bold text */
#attr-symptoms #attr-otp-heading .attr-section-heading__body b,
#attr-symptoms #attr-otp-heading .attr-section-heading__body strong {
    font-family: "Kanit-SemiBold";
    font-weight: 600;
}

/* Underlined text */
#attr-symptoms #attr-otp-heading .attr-section-heading__body u {
    text-underline-offset: 2px;
}

/* Superscript references */
#attr-symptoms #attr-otp-heading sup {
    font-size: 60%;
    line-height: 0;
    position: relative;
    top: -0.35em;
}

.attrsymptoms-sec2 {
    text-align: center;
    padding-top: 53px;
    max-width: 1250px;
    padding-left: 238px;
    margin: auto;
	padding-bottom:30px;
}

#attr-symptoms .attrsymptoms-sec2 p {
    font-size: 20px;
    color: #00215F;
    font-family: "Kanit-Medium";
    padding-bottom: 30px;
    line-height: 40px;
    max-width: 1001px !important;
    width: 100% !important;
    margin: 0 auto !important;
    text-align: center !important;
    padding-left: 0 !important;
    box-sizing: border-box !important;
}

.block {
    max-width: 1250px;
    margin: auto;
    padding-left: 238px;
	padding-bottom:30px;
}

#attr-symptoms .attrsymptoms-sec1 .text4 p {
    font-size: 30px;
    color: #00215F;
    font-family: "Kanit-Medium";
    padding-bottom: 15px;
    line-height: 40px;
    max-width: 1001px !important;
    width: 100% !important;
    margin: 0 auto !important;
    text-align: center !important;
    padding-left: 0 !important;
    box-sizing: border-box !important;
}

.attrsymptoms-sec1 .text5 p {
    font-size: 20px;
    color: #00215F;
    font-family: "Kanit-Medium";
    padding-bottom: 15px;
    line-height: 40px;
    margin: auto;
    text-align: center;
}

/* =========================================================
   MIXED-PHENOTYPE ATTR RED-FLAGS PANEL
   ========================================================= */

#attr-symptoms #attr-body-figure {
  position: relative;
  display: grid !important;

  /* Silhouette | heading/tabs/content */
  grid-template-columns: 220px minmax(0, 1fr);
  grid-template-rows: 50px 46px minmax(258px, 1fr);

  column-gap: 18px;
  row-gap: 14px;

  width: 100%;
  max-width: 1000px;
  min-height: 470px;

  margin: 20px auto;
  padding: 20px 20px 48px;

  box-sizing: border-box;
  overflow: hidden;
  border-radius: 26px;
  color: #ffffff;

  /*
   * Replace only this DAM URL when your background is available.
   * The colour remains as a fallback.
   */
  background:
    url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/Multiple%20Layers%20(2)%20(1).png")
    center center / cover no-repeat,
    #001b45;
}

/* Keep AEM child components above the background */
#attr-symptoms #attr-body-figure > * {
  position: relative;
  z-index: 2;
  min-width: 0;
}

/* Reset direct AEM wrappers */
#attr-symptoms #attr-body-figure > .text,
#attr-symptoms #attr-body-figure > .tabs,
#attr-symptoms #attr-body-figure .cmp-text {
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
}

/* =========================================================
   WATCH-FOR-THESE-SIGNS HEADING
   ========================================================= */

#attr-symptoms #attr-body-figure > .text:has(#attr-panel-heading) {
  grid-column: 2;
  grid-row: 1;

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

  min-height: 50px;
  visibility: visible !important;
  opacity: 1 !important;
}

#attr-symptoms #attr-panel-heading,
#attr-symptoms #attr-panel-heading .attr-redflags-panel {
  display: block !important;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;

  visibility: visible !important;
  opacity: 1 !important;
}

#attr-symptoms #attr-panel-heading .attr-redflags-panel__heading {
  display: block !important;

  width: 100%;
  max-width: 540px;

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

  box-sizing: border-box;
  color: #ffffff !important;

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

  text-align: center;

  visibility: visible !important;
  opacity: 1 !important;
}

#attr-symptoms #attr-panel-heading .attr-redflags-panel__heading sup {
  position: relative;
  top: -0.35em;

  font-size: 60%;
  line-height: 0;
}

/* Disclaimer at the bottom, aligned with the right content area */
#attr-symptoms #attr-panel-heading .attr-redflags-panel__disclaimer {
  position: absolute !important;
  left: 0;
  bottom: -399px;

  width: 100%;
  margin: 0 !important;
  padding: 0 2px !important;

  box-sizing: border-box;
  color: #ffffff !important;

  font-family: "Kanit-Regular", Arial, sans-serif;
  font-size: 13px;
  line-height: 16px;
  text-align: left;
  white-space: nowrap;

  visibility: visible !important;
  opacity: 1 !important;
}

/* =========================================================
   LEFT SILHOUETTE
   ========================================================= */

#attr-symptoms #attr-body-figure > .text:has(#attr-body-image) {
  grid-column: 1;
  grid-row: 1 / 4;

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

  align-self: stretch;
  overflow: hidden;
}

#attr-symptoms #attr-body-image {
  width: 100%;
  height: 100%;
  margin: 0 !important;
  padding: 0 !important;
}

#attr-symptoms #attr-redflags-figure {
  position: relative;

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

  width: 100%;
  height: 100%;
  min-height: 390px;

  margin: 0;
  padding: 0;

  overflow: hidden;
}

/*
 * Natural image ratio is preserved.
 * max-width/max-height prevent oversized source files from overflowing.
 */
#attr-symptoms #attr-body-image .attr-redflags-body__image {
  display: block;

  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 410px;

  margin: 0 auto;

  object-fit: contain;
  object-position: center;
}

/* The labels are already built into the five silhouette images */
#attr-symptoms #attr-redflags-figure .attr-hotspot {
  display: none !important;
}

/* =========================================================
   AEM TABS
   ========================================================= */

#attr-symptoms #attr-body-figure > .tabs {
  grid-column: 2;
  grid-row: 2 / 4;

  display: block !important;

  width: 100%;
  height: 100%;

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

#attr-symptoms #attr-main-tabs {
  display: flex;
  flex-direction: column;

  width: 100%;
  height: 100%;

  margin: 0;
  padding: 0;
}

/* Tab row */
#attr-symptoms #attr-main-tabs .cmp-tabs__tablist {
  display: grid !important;

  grid-template-columns:
    1.05fr
    1.05fr
    1.25fr
    1.35fr
    0.95fr;

  flex: 0 0 46px;

  width: 100%;
  min-height: 46px;

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

  overflow: hidden;
  list-style: none;

  background-color: #ffffff;
  border-radius: 13px;
}

/* Use the real AEM-authored tab names */
#attr-symptoms #attr-main-tabs .cmp-tabs__tab {
  display: flex !important;
  align-items: center;
  justify-content: center;

  min-width: 0;
  min-height: 46px;

  margin: 0 !important;
  padding: 7px 9px !important;

  box-sizing: border-box;
  border: 0 !important;
  border-bottom: 0 !important;
  outline: 0;

  background-color: #ffffff;
  color: #00215f;

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

  text-align: center;
  text-transform: uppercase;
  white-space: normal;

  cursor: pointer;
}

/* Remove previously generated fake tab labels and active underline */
#attr-symptoms #attr-main-tabs .cmp-tabs__tab::before,
#attr-symptoms #attr-main-tabs .cmp-tabs__tab::after {
  content: none !important;
  display: none !important;
  border: 0 !important;
}

#attr-symptoms #attr-main-tabs .cmp-tabs__tab.cmp-tabs__tab--active {
  color: #ffffff !important;
  background-color: #637bff !important;
}

/* =========================================================
   WHITE TAB CONTENT PANEL
   ========================================================= */

#attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel {
  display: none;

  flex: 1 1 auto;

  width: 100%;
  min-height: 258px;

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

  box-sizing: border-box;
  overflow: hidden;

  color: #151515;
  background-color: #ffffff;
  border-radius: 13px;
}

#attr-symptoms
#attr-main-tabs
.cmp-tabs__tabpanel.cmp-tabs__tabpanel--active {
  display: block !important;
}

/* Reset AEM wrappers inside each tab */
#attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel .container,
#attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel .responsivegrid,
#attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel .cmp-container,
#attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel .aem-Grid {
  width: 100%;
  max-width: none;

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

  box-sizing: border-box;
}

/*
 * Expected tab content:
 * Image component followed by Text component.
 */
#attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel .aem-Grid {
  display: grid;
  grid-template-columns: 145px minmax(0, 1fr);
  column-gap: 26px;
  align-items: center;
}

#attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel .image {
  grid-column: 1;
  width: 100%;
}

#attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel .image img,
#attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel .cmp-image__image {
  display: block;

  width: auto;
  height: auto;
  max-width: 145px;
  max-height: 215px;

  margin: 0 auto;

  object-fit: contain;
}

#attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel .text {
  grid-column: 2;
  width: 100%;
  min-width: 0;
}

#attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel h3,
#attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel h4 {
  margin: 0 0 10px !important;

  color: #00215f;
  font-family: "Kanit-SemiBold", Arial, sans-serif;
  font-size: 17px;
  line-height: 21px;
}

#attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel p {
  margin: 0 0 5px !important;

  color: #151515;
  font-family: "Kanit-Regular", Arial, sans-serif;
  font-size: 15px;
  line-height: 20px;
}

#attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel ul {
  margin: 0;
  padding-left: 20px;
}

#attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel li {
  margin-bottom: 4px;

  color: #151515;
  font-family: "Kanit-Regular", Arial, sans-serif;
  font-size: 15px;
  line-height: 20px;
}

/* =========================================================
   TABLET
   ========================================================= */

@media screen and (max-width: 991px) {
  #attr-symptoms #attr-symptoms-layout {
    display: block;
    width: 100%;
    max-width: 100%;
  }

  #attr-symptoms #attr-body-figure {
    grid-template-columns: 190px minmax(0, 1fr);
    grid-template-rows: 54px 46px minmax(250px, 1fr);

    max-width: calc(100% - 30px);
    min-height: 450px;

    padding: 18px 16px 46px;
  }

  #attr-symptoms #attr-panel-heading .attr-redflags-panel__heading {
    max-width: 500px;
    font-size: 14px;
    line-height: 17px;
  }

  #attr-symptoms #attr-body-image .attr-redflags-body__image {
    max-height: 380px;
  }

  #attr-symptoms #attr-main-tabs .cmp-tabs__tablist {
    overflow-x: auto;
    grid-template-columns: repeat(5, minmax(145px, 1fr));
  }

  #attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel .aem-Grid {
    grid-template-columns: 125px minmax(0, 1fr);
    column-gap: 18px;
  }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media screen and (max-width: 700px) {
  #attr-symptoms #attr-body-figure {
    display: flex !important;
    flex-direction: column;

    max-width: calc(100% - 20px);
    min-height: auto;

    padding: 18px 12px 24px;
    border-radius: 18px;
  }

  #attr-symptoms #attr-body-figure > .text:has(#attr-panel-heading) {
    order: 1;
    min-height: auto;
    margin-bottom: 14px !important;
  }

  #attr-symptoms #attr-body-figure > .text:has(#attr-body-image) {
    order: 2;
    min-height: 315px;
    margin-bottom: 16px !important;
  }

  #attr-symptoms #attr-body-figure > .tabs {
    order: 3;
  }

  #attr-symptoms #attr-panel-heading .attr-redflags-panel__heading {
    max-width: 460px;
    font-size: 14px;
    line-height: 17px;
  }

  #attr-symptoms #attr-panel-heading .attr-redflags-panel__disclaimer {
    position: static !important;

    width: 100%;
    margin-top: 18px !important;
    padding: 0 !important;

    text-align: center;
    white-space: normal;
  }

  #attr-symptoms #attr-redflags-figure {
    min-height: 315px;
  }

  #attr-symptoms #attr-body-image .attr-redflags-body__image {
    max-width: 100%;
    max-height: 310px;
  }

  #attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel {
    min-height: 250px;
    padding: 18px 16px !important;
  }

  #attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel .aem-Grid {
    display: block;
  }

  #attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel .image,
  #attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel .text {
    grid-column: auto;
  }

  #attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel .image img,
  #attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel .cmp-image__image {
    max-width: 130px;
    max-height: 170px;
    margin-bottom: 16px;
  }
}

/* =========================================================
   FINAL REFERENCE-MATCH TAB CONTENT OVERRIDES
   Keep this section at the END of the stylesheet.
   ========================================================= */

/* White panel dimensions and alignment */
#attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel {
  display: none;
  width: 100%;
  height: 258px;
  min-height: 258px !important;

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

  box-sizing: border-box;
  overflow: hidden;

  color: #151515;
  background-color: #ffffff;
  border-radius: 13px;
}

#attr-symptoms
#attr-main-tabs
.cmp-tabs__tabpanel.cmp-tabs__tabpanel--active {
  display: flex !important;
  align-items: center;
}

/* Reset every AEM wrapper inside the active tab */
#attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel .container,
#attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel .responsivegrid,
#attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel .cmp-container,
#attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel .aem-Grid,
#attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel .text,
#attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel .cmp-text {
  width: 100%;
  max-width: none;

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

  box-sizing: border-box;
}

/*
 * Use one Text component inside each AEM tab.
 *
 * Required HTML:
 *
 * <div class="attr-tab-content attr-tab-content--autonomic">
 *   <div class="attr-tab-content__image">
 *     <img src="DAM_PATH" alt="">
 *   </div>
 *   <div class="attr-tab-content__copy">...</div>
 * </div>
 */
#attr-symptoms #attr-main-tabs .attr-tab-content {
  display: grid !important;
  grid-template-columns: 145px minmax(0, 1fr);
  column-gap: 28px;
  align-items: center;

  width: 100%;
  min-height: 220px;

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

  box-sizing: border-box;
}

/* Reserved image space remains even before the image is added */
#attr-symptoms #attr-main-tabs .attr-tab-content__image {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 145px;
  height: 220px;
  min-width: 145px;

  margin: 0;
  padding: 0;

  overflow: hidden;
  box-sizing: border-box;
}

/*
 * Once a valid DAM path is added, the image automatically fits here.
 * Native aspect ratio is preserved.
 */
#attr-symptoms #attr-main-tabs .attr-tab-content__image img {
  display: block;

  width: auto;
  height: auto;
  max-width: 145px;
  max-height: 215px;

  margin: 0 auto;

  object-fit: contain;
  object-position: center;
}

/* Hide an intentionally empty image element until a DAM path is added */
#attr-symptoms #attr-main-tabs .attr-tab-content__image img:not([src]),
#attr-symptoms #attr-main-tabs .attr-tab-content__image img[src=""] {
  visibility: hidden;
}

/* Per-tab image allowances */
#attr-symptoms
#attr-main-tabs
.attr-tab-content--autonomic
.attr-tab-content__image img {
  max-width: 140px;
  max-height: 210px;
}

#attr-symptoms
#attr-main-tabs
.attr-tab-content--peripheral
.attr-tab-content__image img {
  max-width: 155px;
  max-height: 195px;
}

#attr-symptoms
#attr-main-tabs
.attr-tab-content--cardiac
.attr-tab-content__image img {
  max-width: 145px;
  max-height: 220px;
}

#attr-symptoms
#attr-main-tabs
.attr-tab-content--musculoskeletal
.attr-tab-content__image img {
  max-width: 105px;
  max-height: 220px;
}

#attr-symptoms
#attr-main-tabs
.attr-tab-content--nephropathy
.attr-tab-content__image img {
  max-width: 155px;
  max-height: 175px;
}

/* Text column */
#attr-symptoms #attr-main-tabs .attr-tab-content__copy {
  align-self: center;

  width: 100%;
  min-width: 0;

  margin: 0;
  padding: 0;

  text-align: left;
  box-sizing: border-box;
}

/* Title */
#attr-symptoms #attr-main-tabs .attr-tab-content__copy h3 {
  margin: 0 0 10px !important;
  padding: 0 !important;

  color: #00215f;
  font-family: "Kanit-SemiBold", Arial, sans-serif;
  font-size: 17px;
  font-weight: 600;
  line-height: 21px;
  text-align: left;
}

/* Reference numbers */
#attr-symptoms #attr-main-tabs .attr-tab-content__copy h3 sup {
  position: relative;
  top: -0.35em;

  font-family: "Kanit-Medium", Arial, sans-serif;
  font-size: 60%;
  line-height: 0;
}

/* Symptom rows */
#attr-symptoms #attr-main-tabs .attr-tab-content__copy p {
  margin: 0 0 5px !important;
  padding: 0 !important;

  color: #151515;
  font-family: "Kanit-Regular", Arial, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 20px;
  text-align: left;
}

#attr-symptoms #attr-main-tabs .attr-tab-content__copy p:last-child {
  margin-bottom: 0 !important;
}

/* Prevent older .aem-Grid rules from splitting the single Text component */
#attr-symptoms
#attr-main-tabs
.cmp-tabs__tabpanel
.aem-Grid:has(.attr-tab-content) {
  display: block !important;
}

#attr-symptoms
#attr-main-tabs
.cmp-tabs__tabpanel
.text:has(.attr-tab-content) {
  grid-column: auto !important;
}

/* =========================================================
   TABLET
   ========================================================= */

@media screen and (max-width: 991px) {
  #attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel {
    height: 250px;
    min-height: 250px !important;
  }

  #attr-symptoms #attr-main-tabs .attr-tab-content {
    grid-template-columns: 125px minmax(0, 1fr);
    column-gap: 20px;
    min-height: 210px;
  }

  #attr-symptoms #attr-main-tabs .attr-tab-content__image {
    width: 125px;
    min-width: 125px;
    height: 205px;
  }

  #attr-symptoms #attr-main-tabs .attr-tab-content__image img {
    max-width: 125px;
    max-height: 195px;
  }

  #attr-symptoms
  #attr-main-tabs
  .attr-tab-content--peripheral
  .attr-tab-content__image img,
  #attr-symptoms
  #attr-main-tabs
  .attr-tab-content--nephropathy
  .attr-tab-content__image img {
    max-width: 135px;
  }

  #attr-symptoms
  #attr-main-tabs
  .attr-tab-content--musculoskeletal
  .attr-tab-content__image img {
    max-width: 95px;
    max-height: 195px;
  }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media screen and (max-width: 700px) {
  #attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel {
    display: none;
    height: auto;
    min-height: 250px !important;
    padding: 18px 16px !important;
  }

  #attr-symptoms
  #attr-main-tabs
  .cmp-tabs__tabpanel.cmp-tabs__tabpanel--active {
    display: block !important;
  }

  #attr-symptoms #attr-main-tabs .attr-tab-content {
    display: block !important;
    min-height: auto;
  }

  #attr-symptoms #attr-main-tabs .attr-tab-content__image {
    width: 100%;
    min-width: 0;
    height: 170px;

    margin-bottom: 16px;
  }

  #attr-symptoms #attr-main-tabs .attr-tab-content__image img {
    max-width: 140px;
    max-height: 170px;
  }

  #attr-symptoms #attr-main-tabs .attr-tab-content__copy h3 {
    font-size: 16px;
    line-height: 20px;
  }

  #attr-symptoms #attr-main-tabs .attr-tab-content__copy p {
    font-size: 14px;
    line-height: 19px;
  }
}


/* =========================================================
   AUTONOMIC DYSFUNCTION SECTION — REFERENCE MATCH
   Page scope: #attr-symptoms
   Keep this block at the END of the stylesheet.
   ========================================================= */



/* Top content */


/* Blue sub-heading */


/* Body paragraph */






/* Decorative divider */






/* Section title above card */


/* Main white rounded card */




/* 3-column symptom grid */




/* Remove divider under the last item in each column */












/* Bottom callout */






/* AEM wrapper reset */


/* Tablet */
@media screen and (max-width: 991px) {
  

  

  

  

  

  
}

/* Mobile */
@media screen and (max-width: 700px) {
  

  

  

  

  

  

  

  

  

  

  
}


/* =========================================================
   QUALITY-OF-LIFE IMPACT SECTION
   Page scope: #attr-symptoms
   Keep this block at the END of the stylesheet.
   ========================================================= */



/* Main heading */


/* Uppercase subheading */


/* White rounded card */


/* Card title */


/* 3-column grid */


/* Individual stat item */


/* Remove bottom line from final row */


/* Empty placeholders for last row alignment */












/* Bottom callout */






/* Superscripts */


/* AEM wrapper reset */


/* Tablet */
@media screen and (max-width: 991px) {
  

  

  

  

  

  
}

/* Mobile */
@media screen and (max-width: 700px) {
  

  

  

  

  

  

  

  

  

  
}


/* =========================================================
   INTERNAL FOOTER PROMO BOXES — FINAL OVERRIDE
   Page scope: #attr-symptoms
   Keep this block at the VERY END of the stylesheet.
   ========================================================= */



/* Both AEM wrappers that contain the cards */


/* Remove old shadow/layout behaviour */




/* Card */


/* Remove previous generated border layer */


/* Visible card text */


/* Keep duplicate paragraph hidden */


/* Superscripts */


/* Icon area — replace only these two DAM URLs */






/* CTA wrapper positioned below card */


/* Pill CTA */


/* Second CTA can be slightly narrower like the reference */


/* Tablet */
@media screen and (max-width: 991px) {
  

  

  

  
}

/* Mobile */
@media screen and (max-width: 700px) {
  

  

  

  

  
}


/* =========================================================
   FINAL ALIGNMENT OVERRIDE
   Align Importance + Quality-of-Life sections with the
   right-side Recognizing Red Flags content column.
   Keep this block at the VERY END of the stylesheet.
   ========================================================= */

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

  /*
   * Overall page grid:
   * 224px sidebar + 14px gap + 1001px right content.
   *
   * These two sections sit outside #attr-symptoms-layout,
   * so the same 238px left offset is applied here.
   */
  

  /*
   * Make both rounded content cards use the complete
   * 1001px right-column width instead of the old 760px width.
   */
  

  /*
   * Headings remain centred against the same right column.
   */
  
}

/* Tablet and mobile: remove desktop sidebar offset */
@media screen and (max-width: 991px) {
  

  
}

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


/* =========================================================
   ON-THIS-PAGE RESPONSIVE NAV + DESKTOP STICKY
   FINAL OVERRIDE — KEEP AT THE VERY END OF THIS FILE
   Desktop/laptop/iPad Pro: 992px and above
   Mobile/tablet: 991px and below
   ========================================================= */

/* Placeholder used by the JavaScript while the desktop nav is fixed */
#attr-symptoms .attr-otp-nav-placeholder {
  display: none;
  width: 224px;
  height: 304px;
}

/* Keep scrollbar subtle when the desktop navigation is taller than viewport */
#attr-symptoms #attr-otp-nav {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 33, 95, 0.35) transparent;
}

#attr-symptoms #attr-otp-nav::-webkit-scrollbar {
  width: 5px;
}

#attr-symptoms #attr-otp-nav::-webkit-scrollbar-thumb {
  background: rgba(0, 33, 95, 0.35);
  border-radius: 10px;
}

/* =========================
   DESKTOP / LAPTOP / IPAD PRO
   ========================= */
@media screen and (min-width: 992px) {
  #attr-symptoms #attr-symptoms-layout {
    grid-template-columns: 224px minmax(0, 1001px) !important;
    column-gap: 14px !important;
    align-items: start;
  }

  #attr-symptoms #attr-symptoms-layout > div:has(#attr-otp-nav) {
    width: 224px !important;
    min-width: 224px !important;
    align-self: stretch;
  }

  #attr-symptoms #attr-otp-nav {
    display: block !important;
    width: 224px !important;
    min-width: 224px !important;
    max-width: 224px !important;
    height: 304px !important;
    min-height: 304px !important;
    padding: 36px 17px 30px 29px !important;
    margin: 0 !important;
    overflow-x: hidden;
    box-sizing: border-box;
  }

  #attr-symptoms #attr-otp-nav .attr-onthispage__title {
    cursor: default;
  }

  #attr-symptoms #attr-otp-nav .attr-onthispage__title::after {
    content: none !important;
    display: none !important;
  }

  #attr-symptoms #attr-otp-nav .attr-onthispage__link {
    display: block !important;
  }
}

/* =========================
   MOBILE + TABLET
   ========================= */
@media screen and (max-width: 991px) {
  #attr-symptoms-section {
    overflow-x: hidden;
  }

  #attr-symptoms #attr-symptoms-layout {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Force the navigation wrapper to be the first item */
  #attr-symptoms #attr-symptoms-layout > div:has(#attr-otp-nav) {
    order: 1;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 14px 16px 0 !important;
    box-sizing: border-box !important;
  }

  #attr-symptoms #attr-symptoms-layout > div:has(#attr-otp-heading) {
    order: 2;
    width: 100% !important;
    min-width: 0 !important;
  }

  #attr-symptoms #attr-symptoms-layout > div:has(#attr-body-figure) {
    order: 3;
    width: 100% !important;
    min-width: 0 !important;
  }

  #attr-symptoms #attr-otp-nav {
    position: static !important;
    display: block !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 auto !important;
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
    z-index: auto !important;
  }

  #attr-symptoms #attr-otp-nav .attr-onthispage {
    display: block !important;
    width: 100% !important;
    height: auto !important;
  }

  /* Collapsed heading bar */
  #attr-symptoms #attr-otp-nav .attr-onthispage__title {
    position: relative;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: 100% !important;
    min-height: 42px;
    margin: 0 !important;
    padding: 9px 48px 9px 16px !important;
    box-sizing: border-box;
    color: #00215F;
    background: #E9EBF2;
    border-radius: 12px;
    font-family: "Kanit-SemiBold", Arial, sans-serif;
    font-size: 17px;
    line-height: 22px;
    text-align: left;
    text-transform: uppercase;
    cursor: pointer;
    user-select: none;
  }

  /* Chevron */
  #attr-symptoms #attr-otp-nav .attr-onthispage__title::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 18px;
    width: 12px;
    height: 12px;
    border-right: 3px solid #00215F;
    border-bottom: 3px solid #00215F;
    transform: translateY(-68%) rotate(45deg);
    transform-origin: center;
    transition: transform 0.2s ease;
  }

  #attr-symptoms #attr-otp-nav.mobile-nav-open .attr-onthispage__title {
    border-radius: 12px 12px 0 0;
  }

  #attr-symptoms #attr-otp-nav.mobile-nav-open .attr-onthispage__title::after {
    transform: translateY(-30%) rotate(225deg);
  }

  /* Links are hidden in the collapsed state */
  #attr-symptoms #attr-otp-nav .attr-onthispage__link {
    display: none !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 11px 16px !important;
    box-sizing: border-box;
    color: #00215F;
    background: #F2F3F8;
    border: 0 !important;
    border-top: 1px solid rgba(0, 33, 95, 0.12) !important;
    font-family: "Kanit-Medium", Arial, sans-serif;
    font-size: 16px;
    line-height: 20px;
    text-align: left;
    text-decoration: none;
  }

  #attr-symptoms #attr-otp-nav.mobile-nav-open .attr-onthispage__link {
    display: block !important;
  }

  #attr-symptoms #attr-otp-nav.mobile-nav-open .attr-onthispage__link:last-child {
    border-radius: 0 0 12px 12px;
  }

  #attr-symptoms #attr-otp-nav .attr-onthispage__link.is-active {
    color: #00215F;
    background: #E9EBF2;
    border-bottom: 0 !important;

  }

  /* Heading directly below the mobile dropdown */
  #attr-symptoms #attr-otp-heading {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 20px 18px 18px !important;
  }

  #attr-symptoms #attr-otp-heading .attr-section-heading__title {
    font-size: 24px;
    line-height: 29px;
    margin-bottom: 12px !important;
  }

  #attr-symptoms #attr-otp-heading .attr-section-heading__subtitle {
    font-size: 16px;
    line-height: 20px;
    margin-bottom: 14px !important;
  }

  #attr-symptoms #attr-otp-heading .attr-section-heading__body {
    max-width: 650px;
    font-size: 15px;
    line-height: 18px;
  }

  #attr-symptoms .attr-otp-nav-placeholder {
    display: none !important;
  }
}

@media screen and (max-width: 480px) {
  #attr-symptoms #attr-symptoms-layout > div:has(#attr-otp-nav) {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  #attr-symptoms #attr-otp-nav .attr-onthispage__title {
    min-height: 40px;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    font-size: 16px;
  }

  #attr-symptoms #attr-otp-heading {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  #attr-symptoms #attr-otp-heading .attr-section-heading__title {
    font-size: 22px;
    line-height: 27px;
  }

  #attr-symptoms #attr-otp-heading .attr-section-heading__subtitle {
    font-size: 15px;
    line-height: 19px;
  }

  #attr-symptoms #attr-otp-heading .attr-section-heading__body {
    font-size: 14px;
    line-height: 17px;
  }
}


/* =========================================================
   FINAL TYPOGRAPHY + MOBILE RED-FLAGS PANEL OVERRIDE
   KEEP THIS BLOCK AT THE VERY END OF THE CSS FILE
   ========================================================= */

/* ---------------------------------------------------------
   CONSISTENT SECTION TYPOGRAPHY
   Heading: 25px / #00215F
   Subheading: 20px / #00215F
   Supporting text: 18px / #151515
   --------------------------------------------------------- */








/* =========================================================
   MOBILE/TABLET RED-FLAGS PANEL
   Matches the supplied reference:
   heading -> body + vertical tabs -> white content -> disclaimer
   ========================================================= */

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

  /* Remove desktop-only offsets from sections below the main panel */
  #attr-symptoms .attrsymptoms-sec1,
  #attr-symptoms .attrsymptoms-sec2,
  #attr-symptoms .block {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }

  /* Main dark panel */
  #attr-symptoms #attr-body-figure {
    position: relative !important;
    display: grid !important;

    grid-template-columns: minmax(0, 42%) minmax(0, 58%) !important;
    grid-template-rows: auto auto auto auto !important;

    column-gap: 10px !important;
    row-gap: 14px !important;

    width: calc(100% - 32px) !important;
    max-width: 620px !important;
    min-height: 0 !important;

    margin: 12px auto 26px !important;
    padding: 18px 14px 18px !important;

    box-sizing: border-box !important;
    overflow: hidden !important;

    border-radius: 22px !important;
    background-color: #001B45 !important;
  }

  /*
   * Allow the heading and disclaimer to become independent
   * grid items of #attr-body-figure.
   */
  #attr-symptoms #attr-body-figure > .text:has(#attr-panel-heading),
  #attr-symptoms #attr-panel-heading,
  #attr-symptoms #attr-panel-heading .attr-redflags-panel {
    display: contents !important;
  }

  /* Main white panel heading */
  #attr-symptoms
  #attr-panel-heading
  .attr-redflags-panel__heading {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;

    display: block !important;
    width: 100% !important;
    max-width: 470px !important;

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

    color: #FFFFFF !important;

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

    text-align: center !important;
    box-sizing: border-box !important;
  }

  /* Body silhouette on the left */
  #attr-symptoms
  #attr-body-figure
  > .text:has(#attr-body-image) {
    grid-column: 1 !important;
    grid-row: 2 !important;

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

    width: 100% !important;
    min-width: 0 !important;
    min-height: 275px !important;

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

    overflow: visible !important;
    align-self: stretch !important;
  }

  #attr-symptoms #attr-body-image,
  #attr-symptoms #attr-redflags-figure {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

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

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

  #attr-symptoms
  #attr-body-image
  .attr-redflags-body__image {
    display: block !important;

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

    margin: 0 auto !important;

    object-fit: contain !important;
    object-position: center !important;
  }

  /* Expose tablist and active panel as grid items */
  #attr-symptoms #attr-body-figure > .tabs,
  #attr-symptoms #attr-main-tabs {
    display: contents !important;
  }

  /* Vertical tab selector on the right */
  #attr-symptoms #attr-main-tabs .cmp-tabs__tablist {
    grid-column: 2 !important;
    grid-row: 2 !important;

    display: flex !important;
    flex-direction: column !important;
    align-self: center !important;

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

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

    overflow: hidden !important;
    background: #FFFFFF !important;
    border-radius: 13px !important;
    box-sizing: border-box !important;
  }

  #attr-symptoms #attr-main-tabs .cmp-tabs__tab {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    min-width: 0 !important;
    min-height: 48px !important;

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

    box-sizing: border-box !important;

    color: #00215F !important;
    background: #FFFFFF !important;

    border: 0 !important;
    border-bottom: 1px solid #D8DDEA !important;
    border-radius: 0 !important;

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

    text-align: center !important;
    white-space: normal !important;
  }

  #attr-symptoms #attr-main-tabs .cmp-tabs__tab:last-child {
    border-bottom: 0 !important;
  }

  #attr-symptoms
  #attr-main-tabs
  .cmp-tabs__tab.cmp-tabs__tab--active {
    color: #FFFFFF !important;
    background: #637BFF !important;
  }

  /* Hide inactive content panels */
  #attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel {
    display: none !important;
  }

  /*
   * Active white content card below the silhouette and tabs.
   * This creates the same stacked card shown in image 1.
   */
  #attr-symptoms
  #attr-main-tabs
  .cmp-tabs__tabpanel.cmp-tabs__tabpanel--active {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;

    display: block !important;

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

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

    box-sizing: border-box !important;
    overflow: visible !important;

    color: #151515 !important;
    background: #FFFFFF !important;
    border-radius: 13px !important;
  }

  /* Reset all AEM wrappers inside active tab */
  #attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel .container,
  #attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel .responsivegrid,
  #attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel .cmp-container,
  #attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel .aem-Grid,
  #attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel .text,
  #attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel .cmp-text {
    display: block !important;

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

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

    box-sizing: border-box !important;
  }

  /*
   * Callout/tab content:
   * image above and text below.
   */
  #attr-symptoms #attr-main-tabs .attr-tab-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;

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

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

    box-sizing: border-box !important;
  }

  #attr-symptoms
  #attr-main-tabs
  .attr-tab-content__image {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    min-width: 0 !important;
    height: 125px !important;

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

    overflow: visible !important;
  }

  #attr-symptoms
  #attr-main-tabs
  .attr-tab-content__image img,
  #attr-symptoms
  #attr-main-tabs
  .cmp-tabs__tabpanel
  .image img,
  #attr-symptoms
  #attr-main-tabs
  .cmp-tabs__tabpanel
  .cmp-image__image {
    display: block !important;

    width: auto !important;
    height: auto !important;
    max-width: 125px !important;
    max-height: 120px !important;

    margin: 0 auto !important;

    object-fit: contain !important;
    object-position: center !important;
  }

  #attr-symptoms
  #attr-main-tabs
  .attr-tab-content__copy,
  #attr-symptoms
  #attr-main-tabs
  .cmp-tabs__tabpanel
  .text {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
  }

  #attr-symptoms
  #attr-main-tabs
  .attr-tab-content__copy h3,
  #attr-symptoms
  #attr-main-tabs
  .cmp-tabs__tabpanel h3,
  #attr-symptoms
  #attr-main-tabs
  .cmp-tabs__tabpanel h4 {
    margin: 0 0 10px !important;
    padding: 0 !important;

    color: #00215F !important;

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

    text-align: left !important;
  }

  #attr-symptoms
  #attr-main-tabs
  .attr-tab-content__copy p,
  #attr-symptoms
  #attr-main-tabs
  .cmp-tabs__tabpanel p,
  #attr-symptoms
  #attr-main-tabs
  .cmp-tabs__tabpanel li {
    margin: 0 0 6px !important;
    padding: 0 !important;

    color: #151515 !important;

    font-family: "Kanit-Regular", "Kanit", Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 21px !important;

    text-align: left !important;
  }

  /* Disclaimer at the bottom of the dark panel */
  #attr-symptoms
  #attr-panel-heading
  .attr-redflags-panel__disclaimer {
    grid-column: 1 / -1 !important;
    grid-row: 4 !important;

    position: static !important;

    display: block !important;
    width: 100% !important;

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

    box-sizing: border-box !important;

    color: #FFFFFF !important;

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

    text-align: center !important;
    white-space: normal !important;
  }
}


/* =========================================================
   PHONE REFINEMENTS
   ========================================================= */

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

  #attr-symptoms #attr-body-figure {
    grid-template-columns: minmax(0, 40%) minmax(0, 60%) !important;
    column-gap: 8px !important;

    width: calc(100% - 24px) !important;
    padding: 16px 12px 17px !important;

    border-radius: 20px !important;
  }

  #attr-symptoms
  #attr-panel-heading
  .attr-redflags-panel__heading {
    font-size: 15px !important;
    line-height: 18px !important;
  }

  #attr-symptoms
  #attr-body-figure
  > .text:has(#attr-body-image),
  #attr-symptoms #attr-body-image,
  #attr-symptoms #attr-redflags-figure {
    min-height: 255px !important;
  }

  #attr-symptoms
  #attr-body-image
  .attr-redflags-body__image {
    max-height: 270px !important;
  }

  #attr-symptoms #attr-main-tabs .cmp-tabs__tab {
    min-height: 45px !important;
    padding: 7px 5px !important;
    font-size: 12px !important;
    line-height: 14px !important;
  }

  #attr-symptoms
  #attr-main-tabs
  .cmp-tabs__tabpanel.cmp-tabs__tabpanel--active {
    padding: 15px 14px 17px !important;
  }

  #attr-symptoms
  #attr-main-tabs
  .attr-tab-content__image {
    height: 115px !important;
  }

  #attr-symptoms
  #attr-main-tabs
  .attr-tab-content__image img,
  #attr-symptoms
  #attr-main-tabs
  .cmp-tabs__tabpanel
  .image img,
  #attr-symptoms
  #attr-main-tabs
  .cmp-tabs__tabpanel
  .cmp-image__image {
    max-width: 115px !important;
    max-height: 110px !important;
  }

  /* Keep requested section font sizes on phone as well */
  

  

  
}


/* =========================================================
   FINAL MOBILE TAB CONTENT + AUTONOMIC TYPOGRAPHY OVERRIDE
   KEEP THIS BLOCK AT THE VERY END OF THE CSS FILE
   ========================================================= */

/* ---------------------------------------------------------
   AUTONOMIC SECTION TYPOGRAPHY
   --------------------------------------------------------- */

/* ROUTINELY ASSESSING AUTONOMIC DYSFUNCTION... */


/* Validated tests and questionnaires... */


/* Gastrointestinal, bladder, sexual, orthostatic intolerance, etc. */


/* Description after the blue category text */



/* =========================================================
   MOBILE RED-FLAGS PANEL
   IMAGE LEFT + TEXT RIGHT FOR EVERY TAB
   ========================================================= */

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

  /*
   * Overall dark panel:
   * 300px usable inner width + 14px padding on each side.
   */
  #attr-symptoms #attr-body-figure {
    grid-template-columns: 131px 169px !important;
    grid-template-rows:
      auto
      244px
      auto
      auto !important;

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

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

    margin-left: auto !important;
    margin-right: auto !important;
    padding: 15px 14px 16px !important;

    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  /* Left silhouette column */
  #attr-symptoms
  #attr-body-figure
  > .text:has(#attr-body-image),
  #attr-symptoms #attr-body-image,
  #attr-symptoms #attr-redflags-figure {
    width: 131px !important;
    min-width: 131px !important;
    height: 244px !important;
    min-height: 244px !important;
  }

  #attr-symptoms
  #attr-body-image
  .attr-redflags-body__image {
    max-width: 126px !important;
    max-height: 232px !important;
  }

  /* Keep the XD tab-list size */
  #attr-symptoms
  #attr-main-tabs
  .cmp-tabs__tablist {
    width: 169px !important;
    min-width: 169px !important;
    max-width: 169px !important;

    height: 244px !important;
    min-height: 244px !important;
    max-height: 244px !important;

    border: 1px solid #94A0CE !important;
    border-radius: 15px !important;
  }

  /*
   * White content panel below the image and tabs.
   * Inner width is exactly 300px.
   */
  #attr-symptoms
  #attr-main-tabs
  .cmp-tabs__tabpanel.cmp-tabs__tabpanel--active {
    width: 300px !important;
    min-width: 300px !important;
    max-width: 300px !important;

    height: auto !important;
    min-height: 250px !important;
    max-height: none !important;

    padding: 14px 13px 16px !important;

    border: 1px solid #94A0CE !important;
    border-radius: 15px !important;
    box-sizing: border-box !important;
  }

  /*
   * Every tab uses a two-column arrangement:
   * image on the left and copy on the right.
   */
  #attr-symptoms
  #attr-main-tabs
  .attr-tab-content {
    display: grid !important;
    grid-template-columns: 78px minmax(0, 1fr) !important;
    column-gap: 12px !important;
    align-items: start !important;

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

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

  /* Image area on the left */
  #attr-symptoms
  #attr-main-tabs
  .attr-tab-content__image {
    grid-column: 1 !important;

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

    width: 78px !important;
    min-width: 78px !important;
    height: auto !important;
    min-height: 92px !important;

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

    overflow: visible !important;
  }

  #attr-symptoms
  #attr-main-tabs
  .attr-tab-content__image img {
    display: block !important;

    width: auto !important;
    height: auto !important;
    max-width: 74px !important;
    max-height: 92px !important;

    margin: 0 auto !important;

    object-fit: contain !important;
    object-position: center top !important;
  }

  /* Text area on the right */
  #attr-symptoms
  #attr-main-tabs
  .attr-tab-content__copy {
    grid-column: 2 !important;

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

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

    text-align: left !important;
    box-sizing: border-box !important;
  }

  #attr-symptoms
  #attr-main-tabs
  .attr-tab-content__copy h3 {
    margin: 0 0 8px !important;
    padding: 0 !important;

    color: #00215F !important;

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

    text-align: left !important;
  }

  #attr-symptoms
  #attr-main-tabs
  .attr-tab-content__copy p {
    margin: 0 0 4px !important;
    padding: 0 !important;

    color: #151515 !important;

    font-family: "Kanit-Regular", "Kanit", Arial, sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 16px !important;

    text-align: left !important;
  }

  /*
   * Fallback for tabs authored with separate AEM Image + Text
   * components instead of .attr-tab-content.
   */
  #attr-symptoms
  #attr-main-tabs
  .cmp-tabs__tabpanel.cmp-tabs__tabpanel--active
  .aem-Grid:not(:has(.attr-tab-content)) {
    display: grid !important;
    grid-template-columns: 78px minmax(0, 1fr) !important;
    column-gap: 12px !important;
    align-items: start !important;
  }

  #attr-symptoms
  #attr-main-tabs
  .cmp-tabs__tabpanel.cmp-tabs__tabpanel--active
  .aem-Grid:not(:has(.attr-tab-content))
  > .image {
    grid-column: 1 !important;

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

    width: 78px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #attr-symptoms
  #attr-main-tabs
  .cmp-tabs__tabpanel.cmp-tabs__tabpanel--active
  .aem-Grid:not(:has(.attr-tab-content))
  > .image img,
  #attr-symptoms
  #attr-main-tabs
  .cmp-tabs__tabpanel.cmp-tabs__tabpanel--active
  .aem-Grid:not(:has(.attr-tab-content))
  > .image .cmp-image__image {
    width: auto !important;
    height: auto !important;
    max-width: 74px !important;
    max-height: 92px !important;

    margin: 0 auto !important;
    object-fit: contain !important;
  }

  #attr-symptoms
  #attr-main-tabs
  .cmp-tabs__tabpanel.cmp-tabs__tabpanel--active
  .aem-Grid:not(:has(.attr-tab-content))
  > .text {
    grid-column: 2 !important;

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

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

  /*
   * Disclaimer/list text at the bottom of the dark panel:
   * 16px white, 300px wide, minimum height 44px.
   */
  #attr-symptoms
  #attr-panel-heading
  .attr-redflags-panel__disclaimer {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

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

    min-height: 44px !important;

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

    box-sizing: border-box !important;

    color: #FFFFFF !important;

    font-family: "Kanit-Regular", "Kanit", Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 18px !important;

    text-align: center !important;
    white-space: normal !important;
  }

  /* Requested autonomic typography remains consistent on mobile */
  

  

  
}


/* Narrow-phone safeguard */
@media screen and (max-width: 350px) {
  #attr-symptoms #attr-body-figure {
    width: calc(100% - 16px) !important;
    min-width: 0 !important;
    max-width: 328px !important;

    grid-template-columns:
      minmax(0, 131px)
      minmax(0, 169px) !important;
  }
}


/* =========================================================
   FINAL QUALITY-OF-LIFE CALLOUT + STUDY + MOBILE FOOTER FIX
   KEEP THIS BLOCK AT THE VERY END OF THE CSS FILE
   ========================================================= */

/* ---------------------------------------------------------
   QUALITY-OF-LIFE STUDY TYPOGRAPHY
   --------------------------------------------------------- */

/* "One study showed that:" */


/* 80%, 54%, 64%, etc. */


/* "of patients" */


/* Other study description text */



/* =========================================================
   MOBILE/TABLET
   ========================================================= */

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

  /* -------------------------------------------------------
     BULB CALLOUT: IMAGE ABOVE, TEXT BELOW
     ------------------------------------------------------- */

  

  

  

  /* -------------------------------------------------------
     ONE STUDY SHOWED THAT SECTION
     ------------------------------------------------------- */

  

  

  

  

  /* Each percentage item remains readable in one column */
  

  

  

  

  /* -------------------------------------------------------
     INTERNAL FOOTER — MATCH MOBILE REFERENCE
     ------------------------------------------------------- */

  

  

  

  /* Footer card */
  

  /* Remove old pseudo icon implementation */
  

  /*
   * Use the actual AEM image as the left icon.
   * The image wrapper becomes the first grid column.
   */
  

  

  /* Footer text on the right */
  

  /* CTA overlaps bottom edge like the XD reference */
  

  
}


/* =========================================================
   EXTRA FALLBACK WHEN THE FOOTER ICON IS A DIRECT SIBLING
   OUTSIDE .border-box
   ========================================================= */

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

  

  

  

  
}


/* =========================================================
   FINAL 0–990PX QOL + STUDY + INTERNAL FOOTER OVERRIDE
   KEEP THIS BLOCK AT THE ABSOLUTE END OF THE CSS FILE
   Mobile/tablet structure applies through 990px.
   ========================================================= */

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

  /* =======================================================
     1. QUALITY-OF-LIFE BULB CALLOUT
     Bulb image above, text below
     ======================================================= */

  

  /* Support the authored image class */
  

  /* Support an AEM image component inside the callout */
  

  

  


  /* =======================================================
     2 + 3. ONE-STUDY CARD
     Compact rows, no huge vertical gaps
     Percentage on first line
     "of patients" begins on next line in same blue
     ======================================================= */

  

  

  

  

  

  

  

  

  

  /* 80%, 64%, 57%, etc. */
  

  /*
   * The first line is forced to be "of patients" and gets
   * the same blue as the percentage.
   */
  

  

  /* When "of patients" has its own authored span */
  


  /* =======================================================
     4. INTERNAL FOOTER PROMO CARDS
     Match the compact XD mobile structure
     ======================================================= */

  

  

  

  

  

  /* Actual card image/icon on the left */
  

  

  

  

  

  /* CTA sits below the text and overlaps the card bottom edge */
  

  

  /*
   * Fallback where the card icon is outside .border-box.
   * Reserve space in the card and position the icon correctly.
   */
  

  
}


/* =========================================================
   VERY NARROW PHONE SAFEGUARD
   ========================================================= */

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

  
}

/* =========================================================
   FINAL STRUCTURAL FIXES
   KEEP THIS BLOCK AT THE ABSOLUTE END OF THE CSS FILE
   ========================================================= */

/* 1. AUTONOMIC CALLOUT: icon above, text below */






/* 2. Remove empty QOL placeholder rows */


/* 3. Internal footer cards - shared structure */
















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

  

  

  

  
}

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

  

  

  

  

  

  

  
}

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


/* =========================================================
   FINAL CHART 1 + CHART 2 RESPONSIVE OVERRIDES
   Page scope: #attr-symptoms
   Desktop/laptop: 992px+
   Mobile/tablet: 0–990px
   KEEP THIS BLOCK AT THE ABSOLUTE END OF THE CSS FILE
   ========================================================= */

/* ---------- Shared headings ---------- */






/* =========================================================
   CHART 1 — AUTONOMIC
   ========================================================= */





















/* Center the final real item on desktop using empty placeholders */


/* Autonomic callout: icon above, text below */






/* =========================================================
   CHART 2 — QUALITY OF LIFE
   ========================================================= */





















/* Backward compatibility for older single-span markup */


/* Center final real item on desktop */


/* QOL callout: icon above, text below */






/* =========================================================
   MOBILE + TABLET — 0 to 990px
   ========================================================= */

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

  

  

  

  

  

  

  

  

  

  

  
}

/* =========================================================
   DESKTOP/LAPTOP ALIGNMENT WITH RIGHT CONTENT COLUMN
   ========================================================= */

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

/* =========================================================
   FINAL CORRECTION — 0–990px
   Restores all seven authored study items, fixes the bulb
   callout structure, and positions the internal-footer cards.
   Keep this block at the absolute end of the stylesheet.
   ========================================================= */

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

  /* ---------- Keep every authored QOL item visible ---------- */
  

  

  

  /*
   * Hide only genuinely empty layout placeholders.
   * Do not hide an authored item merely because it carries
   * the old --empty class.
   */
  

  

  

  

  /* ---------- Bulb callout: icon above, text below ---------- */
  

  

  

  

  /* ---------- Internal footer ---------- */
  #attr-symptoms .black-strip {
    height: 28px !important;
  }

  

  

  

  

  

  

  

  

  
}

/* Keep desktop/laptop layout unchanged from 991px upward. */
@media screen and (min-width: 991px) {
  
}


/* =========================================================
   FINAL AUTONOMIC SECTION — REFERENCE MATCH
   Keep this block at the absolute end of the stylesheet.
   ========================================================= */











































/* Tablet: same reference structure through 990px */
@media screen and (max-width: 990px) and (min-width: 701px) {
  

  

  

  

  

  

  

  
}

/* Mobile */
@media screen and (max-width: 700px) {
  

  

  

  

  

  

  

  

  

  
}

/* ...all your existing CSS above... */

/* FIX 1 — Autonomic card & callout full width */
@media screen and (min-width: 992px) {
  
}

/* FIX 2 — QOL callout full width, icon-then-text row */
@media screen and (min-width: 992px) {
  

  

  
}

/* FIX 3 — Footer promo boxes: CTA in normal flow, no overlap */
@media screen and (min-width: 992px) {
  

  

  
}

/* =========================================================
   INTERNAL FOOTER — DESKTOP / LAPTOP FIX
   Applies only from 991px upward
   Keep this block at the absolute end of the CSS file
   ========================================================= */

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

  

  /* Both footer-card wrappers */
  

  /* Remove old patient-box behaviour */
  

  

  /* Footer card */
  

  

  /* Real authored image */
  

  /* Card text */
  

  

  /* CTA row */
  

  /* CTA button */
  

  /* Slightly narrower second button */
  

  
}

/* =========================================================
   FOOTER PROMO CARDS — BUILT FROM ACTUAL MARKUP
   Keep at the very end of the stylesheet.
   ========================================================= */

/* Neutralize the structural mismatch: .image-shadow becomes
   invisible in the box model so both cards behave identically */


/* Card container — same width for both, regardless of wrapper */


/* The actual visible card */








/* CTA — normal flow, spans both columns, no more absolute positioning */




/* Mobile — stack the two cards, keep grid layout inside each */
@media screen and (max-width: 990px) {
  

  

  
}

/* =========================================================
   FOOTER PROMO CARDS — FINAL, HIGH-SPECIFICITY VERSION
   Paste at the ABSOLUTE end of the file, nothing after this.
   ========================================================= */

















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

  

  
}

/* =========================================================
   INTERNAL FOOTER PROMO CARDS
   Clean replacement for all previous footer-card rules
   ========================================================= */



/* ---------------- DESKTOP / LAPTOP: 991px AND ABOVE ---------------- */

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

  

  

  

  

  

  

  

  

  

  

  

  
}

/* ---------------- TABLET / MOBILE: 990px AND BELOW ---------------- */

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

  

  

  

  

  

  

  

  

  
}

/* =========================================================
   FINAL CLEAN AUTONOMIC + INTERNAL FOOTER
   Keep at the absolute end of the stylesheet.
   ========================================================= */

#attr-symptoms {
  --page-gutter: 24px;
  --content-max: 760px;
}

/* ---------------- AUTONOMIC SECTION ---------------- */





































/* Tablet and mobile: fluid card width, centered row content */
@media screen and (max-width: 992px) {
  

  

  

  

  

  

  

  

  

  
}

@media screen and (max-width: 480px) {
  #attr-symptoms {
    --page-gutter: 24px;
  }

  

  
}

/* ---------------- INTERNAL FOOTER ---------------- */

#attr-symptoms .sec3-mainbg {
  position: relative !important;
  width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  background-image: url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/Internal%20Footer%20image_desktop.jpg") !important;
  background-color: #020c2d !important;
  background-repeat: no-repeat !important;
  background-position: center bottom !important;
  background-size: cover !important;
}

@media screen and (min-width: 993px) {
  #attr-symptoms .sec3-mainbg {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 18px !important;
    height: 360px !important;
    min-height: 360px !important;
    padding: 28px 24px 0 !important;
    overflow: hidden !important;
  }

  #attr-symptoms .sec3-mainbg > .patient-box,
  #attr-symptoms .sec3-mainbg > .attr-footer-card {
    position: relative !important;
    flex: 0 0 360px !important;
    width: 360px !important;
    max-width: 360px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

@media screen and (max-width: 992px) {
  #attr-symptoms .sec3-mainbg {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 64px !important;
    height: auto !important;
    min-height: 620px !important;
    padding: 30px 0 145px !important;
    overflow: hidden !important;
  }

  #attr-symptoms .sec3-mainbg > .patient-box,
  #attr-symptoms .sec3-mainbg > .attr-footer-card {
    position: relative !important;
    width: calc(100% - (var(--page-gutter) * 2)) !important;
    max-width: 520px !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }
}

#attr-symptoms .sec3-mainbg .image-shadow {
  position: static !important;
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  overflow: visible !important;
}

#attr-symptoms .sec3-mainbg .border-box {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 64px minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  column-gap: 14px !important;

  width: 100% !important;
  min-height: 156px !important;
  margin: 0 !important;
  padding: 20px 20px 24px !important;
  box-sizing: border-box !important;

  background: #e9ebf2 !important;
  border: 1px solid #bfc8e6 !important;
  border-radius: 18px 18px 18px 0 !important;
  overflow: visible !important;
}

#attr-symptoms .sec3-mainbg .border-box::before,
#attr-symptoms .sec3-mainbg .smallbox-title::before {
  content: none !important;
  display: none !important;
}

#attr-symptoms .sec3-mainbg .smallbox-icon {
  grid-column: 1 !important;
  grid-row: 1 !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 58px !important;
  max-height: 76px !important;
  margin: 0 auto !important;
  object-fit: contain !important;
}

#attr-symptoms .sec3-mainbg .smallbox-title {
  grid-column: 2 !important;
  grid-row: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #151515 !important;
  font-family: "Kanit-Regular", "Kanit", Arial, sans-serif !important;
  font-size: clamp(15px, 2.2vw, 18px) !important;
  line-height: 1.25 !important;
  text-align: left !important;
}

#attr-symptoms .sec3-mainbg .smallbox-txt {
  display: none !important;
}

/* CTA is now part of the card grid, so it cannot jump to the top */
#attr-symptoms .sec3-mainbg .cta-bottom-home {
  position: static !important;
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  margin: 14px 0 -44px !important;
  padding: 0 !important;
  transform: none !important;
  z-index: 5 !important;
}

#attr-symptoms .sec3-mainbg .middle-bottom-cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: min(285px, calc(100vw - 96px)) !important;
  max-width: calc(100vw - 96px) !important;
  min-height: 48px !important;
  padding: 8px 20px !important;
  box-sizing: border-box !important;

  color: #fff !important;
  background: #637bff !important;
  border: 0 !important;
  border-radius: 28px !important;

  font-family: "Kanit-SemiBold", "Kanit", Arial, sans-serif !important;
  font-size: 16px !important;
  line-height: 20px !important;
  text-align: center !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  white-space: normal !important;
}

@media screen and (min-width: 993px) {
  #attr-symptoms .sec3-mainbg .border-box {
    grid-template-columns: 72px minmax(0, 1fr) !important;
    min-height: 132px !important;
    padding: 18px 20px 22px !important;
  }

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

  #attr-symptoms .sec3-mainbg .cta-bottom-home {
    margin: 12px 0 -39px !important;
  }

  #attr-symptoms .sec3-mainbg .middle-bottom-cta {
    min-width: 185px !important;
    max-width: 250px !important;
    min-height: 34px !important;
    padding: 7px 18px !important;
    font-size: 11px !important;
    line-height: 14px !important;
    white-space: nowrap !important;
  }

  #attr-symptoms .sec3-mainbg .home-cta-1 .middle-bottom-cta {
    min-width: 250px !important;
  }
}

@media screen and (max-width: 360px) {
  #attr-symptoms {
    --page-gutter: 18px;
  }

  #attr-symptoms .sec3-mainbg .border-box {
    grid-template-columns: 56px minmax(0, 1fr) !important;
    column-gap: 10px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  #attr-symptoms .sec3-mainbg .middle-bottom-cta {
    min-width: min(260px, calc(100vw - 72px)) !important;
    max-width: calc(100vw - 72px) !important;
    font-size: 14px !important;
    line-height: 18px !important;
  }
}

/* =========================================================
   FINAL AUTONOMIC + QUALITY-OF-LIFE RESPONSIVE SYSTEM
   Card width is fluid. Inner row content remains a stable,
   centred column on tablet and mobile.
   Keep this block at the absolute end of the stylesheet.
   ========================================================= */

#attr-symptoms {
  --attr-side-gap: 24px;
  --attr-card-max: 760px;
  --attr-mobile-content-width: 342px;
}

/* =========================================================
   SHARED SECTION LAYOUT
   ========================================================= */

#attr-symptoms .attr-autonomic,
#attr-symptoms .attr-qol {
  width: 100% !important;
  max-width: 1001px !important;
  margin: 0 auto !important;
  padding: 34px 24px 42px !important;
  box-sizing: border-box !important;
  background: #ffffff !important;
  text-align: center !important;
}

#attr-symptoms .attr-autonomic__heading,
#attr-symptoms .attr-qol__heading {
  margin: 0 0 14px !important;
  padding: 0 !important;
  color: #00215f !important;
  font-family: "Kanit-SemiBold", "Kanit", Arial, sans-serif !important;
  font-size: 25px !important;
  font-weight: 600 !important;
  line-height: 30px !important;
  text-align: center !important;
}

#attr-symptoms .attr-autonomic__lead,
#attr-symptoms .attr-autonomic__eyebrow,
#attr-symptoms .attr-qol__eyebrow {
  margin: 0 0 18px !important;
  padding: 0 !important;
  color: #00215f !important;
  font-family: "Kanit-SemiBold", "Kanit", Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 21px !important;
  text-align: center !important;
  text-transform: uppercase !important;
}

#attr-symptoms .attr-autonomic__overview {
  width: 100% !important;
  max-width: 760px !important;
  margin: 0 auto 16px !important;
  padding: 0 !important;
  color: #151515 !important;
  font-family: "Kanit", "Kanit", Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 19px !important;
  text-align: center !important;
}

#attr-symptoms .attr-autonomic__divider {
  width: 100% !important;
  max-width: 760px !important;
  height: 20px !important;
  margin: 0 auto 20px !important;
  padding: 0 !important;
  background: url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/SOFT%20separator%20line%20.png") center center / 100% 100% no-repeat !important;
}


#attr-symptoms .attr-autonomic__card,
#attr-symptoms .attr-qol__card {
  width: 100% !important;
  max-width: var(--attr-card-max) !important;
  margin: 0 auto 28px !important;
  padding: 18px 20px 16px !important;
  box-sizing: border-box !important;
  background: #ffffff !important;
  border: 1px solid #c8d1ea !important;
  border-radius: 22px !important;
  box-shadow: 0 2px 11px rgba(0, 33, 95, 0.16) !important;
  overflow: hidden !important;
}

#attr-symptoms .attr-autonomic__intro,
#attr-symptoms .attr-qol__card-title {
  width: 100% !important;
  max-width: 610px !important;
  margin: 0 auto 18px !important;
  padding: 0 !important;
  color: #00215f !important;
  font-family: "Kanit-Medium", "Kanit", Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 19px !important;
  text-align: center !important;
}

/* =========================================================
   DESKTOP: THREE-COLUMN LAYOUT
   ========================================================= */

#attr-symptoms .attr-autonomic__grid,
#attr-symptoms .attr-qol__grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  column-gap: 24px !important;
  row-gap: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

#attr-symptoms .attr-autonomic__item,
#attr-symptoms .attr-qol__item {
  display: grid !important;
  align-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  border-bottom: 1px solid #e2e5ee !important;
  text-align: left !important;
}

#attr-symptoms .attr-autonomic__item {
  grid-template-columns: 64px minmax(0, 1fr) !important;
  column-gap: 10px !important;
  min-height: 104px !important;
  padding: 10px 0 !important;
}

#attr-symptoms .attr-qol__item {
  grid-template-columns: 72px minmax(0, 1fr) !important;
  column-gap: 10px !important;
  min-height: 112px !important;
  padding: 12px 0 !important;
}

#attr-symptoms .attr-autonomic__item:nth-child(n + 4),
#attr-symptoms .attr-qol__item:nth-child(n + 7) {
  border-bottom: 0 !important;
}

#attr-symptoms .attr-autonomic__item--last {
  grid-column: 2 !important;
}

#attr-symptoms .attr-autonomic__item--empty,
#attr-symptoms .attr-qol__item--empty {
  visibility: hidden !important;
  pointer-events: none !important;
  border: 0 !important;
}

/* =========================================================
   ICONS AND COPY
   ========================================================= */

#attr-symptoms .attr-autonomic__icon-wrap,
#attr-symptoms .attr-qol__icon-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

#attr-symptoms .attr-autonomic__icon-wrap {
  width: 64px !important;
  min-width: 64px !important;
  height: 72px !important;
}

#attr-symptoms .attr-qol__icon-wrap {
  width: 72px !important;
  min-width: 72px !important;
  height: 78px !important;
}

#attr-symptoms .attr-autonomic__icon,
#attr-symptoms .attr-qol__icon {
  display: block !important;
  width: auto !important;
  height: auto !important;
  margin: 0 auto !important;
  object-fit: contain !important;
  visibility: visible !important;
  opacity: 1 !important;
}

#attr-symptoms .attr-autonomic__icon {
  max-width: 64px !important;
  max-height: 70px !important;
}

#attr-symptoms .attr-qol__icon {
  max-width: 70px !important;
  max-height: 76px !important;
}

#attr-symptoms .attr-autonomic__copy,
#attr-symptoms .attr-qol__copy {
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}

#attr-symptoms .attr-autonomic__name {
  display: block !important;
  margin: 0 0 1px !important;
  padding: 0 !important;
  color: #606eb4 !important;
  font-family: "Kanit-Medium", "Kanit", Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 17px !important;
}

#attr-symptoms .attr-autonomic__description {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #151515 !important;
  font-family: "Kanit-Regular", "Kanit", Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 16px !important;
}

#attr-symptoms .attr-qol__value,
#attr-symptoms .attr-qol__patients,
#attr-symptoms .attr-qol__description {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

#attr-symptoms .attr-qol__value {
  color: #606eb4 !important;
  font-family: "Kanit-SemiBold", "Kanit", Arial, sans-serif !important;
  font-size: 30px !important;
  font-weight: 600 !important;
  line-height: 32px !important;
}

#attr-symptoms .attr-qol__patients {
  color: #606eb4 !important;
  font-family: "Kanit-Medium", "Kanit", Arial, sans-serif !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  line-height: 21px !important;
}

#attr-symptoms .attr-qol__description {
  color: #151515 !important;
  font-family: "Kanit-Regular", "Kanit", Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 20px !important;
}

/* =========================================================
   CALLOUTS
   ========================================================= */

#attr-symptoms .attr-autonomic__callout,
#attr-symptoms .attr-qol__callout {
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) !important;
  align-items: center !important;
  column-gap: 12px !important;
  width: 100% !important;
  max-width: var(--attr-card-max) !important;
  min-height: 68px !important;
  margin: 0 auto !important;
  padding: 12px 18px !important;
  box-sizing: border-box !important;
  background: #f0f1f7 !important;
  border: 1px solid #bac7ff !important;
  border-radius: 14px 14px 14px 0 !important;
  text-align: left !important;
}

#attr-symptoms .attr-autonomic__callout-icon,
#attr-symptoms .attr-qol__callout-icon {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 38px !important;
  max-height: 42px !important;
  margin: 0 auto !important;
  object-fit: contain !important;
}

#attr-symptoms .attr-autonomic__callout-text,
#attr-symptoms .attr-qol__callout-text {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #00215f !important;
  font-family: "Kanit-SemiBold", "Kanit", Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 17px !important;
  text-align: left !important;
}

/* =========================================================
   TABLET + MOBILE: 0–992px
   Outer card grows with viewport.
   Inner rows stay at 342px and remain centred.
   ========================================================= */

@media screen and (max-width: 992px) {
  #attr-symptoms .attr-autonomic,
  #attr-symptoms .attr-qol {
    max-width: none !important;
    padding: 28px 0 34px !important;
  }

  #attr-symptoms .attr-autonomic__heading,
  #attr-symptoms .attr-autonomic__lead,
  #attr-symptoms .attr-autonomic__overview,
  #attr-symptoms .attr-autonomic__divider,
  #attr-symptoms .attr-autonomic__eyebrow,
  #attr-symptoms .attr-qol__heading,
  #attr-symptoms .attr-qol__eyebrow,
  #attr-symptoms .attr-autonomic__card,
  #attr-symptoms .attr-qol__card,
  #attr-symptoms .attr-autonomic__callout,
  #attr-symptoms .attr-qol__callout {
    width: calc(100% - (var(--attr-side-gap) * 2)) !important;
    max-width: var(--attr-card-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #attr-symptoms .attr-autonomic__intro,
  #attr-symptoms .attr-qol__card-title {
    width: min(100%, var(--attr-mobile-content-width)) !important;
    max-width: var(--attr-mobile-content-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #attr-symptoms .attr-autonomic__grid,
  #attr-symptoms .attr-qol__grid {
    display: block !important;
    width: 100% !important;
  }

  #attr-symptoms .attr-autonomic__item,
  #attr-symptoms .attr-qol__item {
    width: min(100%, var(--attr-mobile-content-width)) !important;
    max-width: var(--attr-mobile-content-width) !important;
    margin: 0 auto !important;
    border-bottom: 1px solid #e2e5ee !important;
  }

  #attr-symptoms .attr-autonomic__item {
    grid-template-columns: 82px minmax(0, 1fr) !important;
    column-gap: 12px !important;
    min-height: 96px !important;
    padding: 8px 0 !important;
  }

  #attr-symptoms .attr-qol__item {
    grid-template-columns: 82px minmax(0, 1fr) !important;
    column-gap: 12px !important;
    min-height: 108px !important;
    padding: 10px 0 !important;
  }

  #attr-symptoms .attr-autonomic__item--last {
    grid-column: auto !important;
  }

  #attr-symptoms .attr-autonomic__item:last-child,
  #attr-symptoms .attr-qol__item:not(.attr-qol__item--empty):last-of-type {
    border-bottom: 0 !important;
  }

  #attr-symptoms .attr-autonomic__item--empty,
  #attr-symptoms .attr-qol__item--empty {
    display: none !important;
  }

  #attr-symptoms .attr-autonomic__icon-wrap,
  #attr-symptoms .attr-qol__icon-wrap {
    width: 82px !important;
    min-width: 82px !important;
    height: 78px !important;
  }

  #attr-symptoms .attr-autonomic__icon,
  #attr-symptoms .attr-qol__icon {
    max-width: 76px !important;
    max-height: 76px !important;
  }

  #attr-symptoms .attr-autonomic__name {
    font-size: 16px !important;
    line-height: 19px !important;
  }

  #attr-symptoms .attr-autonomic__description {
    font-size: 15px !important;
    line-height: 18px !important;
  }

  #attr-symptoms .attr-qol__description {
    font-size: 15px !important;
    line-height: 18px !important;
  }

  #attr-symptoms .attr-autonomic__callout,
  #attr-symptoms .attr-qol__callout {
    grid-template-columns: 42px minmax(0, 1fr) !important;
    min-height: 82px !important;
    padding: 14px 16px !important;
  }
}

/* =========================================================
   PHONE: EXACT 342px CARD AT 390px VIEWPORT
   390 - 24 - 24 = 342
   ========================================================= */

@media screen and (max-width: 480px) {
  #attr-symptoms {
    --attr-side-gap: 24px;
  }

  #attr-symptoms .attr-autonomic__card,
  #attr-symptoms .attr-qol__card {
    padding: 16px 14px 8px !important;
  }

  #attr-symptoms .attr-autonomic__intro,
  #attr-symptoms .attr-qol__card-title {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 10px !important;
    font-size: 16px !important;
    line-height: 20px !important;
  }

  #attr-symptoms .attr-autonomic__item,
  #attr-symptoms .attr-qol__item {
    width: 100% !important;
    max-width: none !important;
  }

  #attr-symptoms .attr-autonomic__item {
    grid-template-columns: 86px minmax(0, 1fr) !important;
    column-gap: 10px !important;
    min-height: 94px !important;
  }

  #attr-symptoms .attr-qol__item {
    grid-template-columns: 86px minmax(0, 1fr) !important;
    column-gap: 10px !important;
    min-height: 106px !important;
  }

  #attr-symptoms .attr-autonomic__icon-wrap,
  #attr-symptoms .attr-qol__icon-wrap {
    width: 86px !important;
    min-width: 86px !important;
  }
}

/* Very narrow phone safeguard */
@media screen and (max-width: 350px) {
  #attr-symptoms {
    --attr-side-gap: 16px;
  }

  #attr-symptoms .attr-autonomic__item,
  #attr-symptoms .attr-qol__item {
    grid-template-columns: 72px minmax(0, 1fr) !important;
    column-gap: 8px !important;
  }

  #attr-symptoms .attr-autonomic__icon-wrap,
  #attr-symptoms .attr-qol__icon-wrap {
    width: 72px !important;
    min-width: 72px !important;
  }
}

/* =========================================================
   FINAL IPAD PRO + COMPACT MOBILE CONTENT FIX
   Keep this block at the absolute end of the stylesheet.
   ========================================================= */

#attr-symptoms {
  --attr-inner-row-width: 286px;
  --attr-inner-icon-width: 92px;
  --attr-inner-copy-width: 150px;
  --attr-inner-gap: 12px;
}

/* ---------------------------------------------------------
   IPAD PRO / SMALL LAPTOP: 993px–1199px
   Keep Autonomic and QOL sections out from under the sidebar.
   --------------------------------------------------------- */

@media screen and (min-width: 993px) and (max-width: 1199px) {
  #attr-symptoms .attr-autonomic,
  #attr-symptoms .attr-qol {
    width: calc(100% - 238px) !important;
    max-width: none !important;

    margin-left: 238px !important;
    margin-right: 0 !important;

    padding-left: 18px !important;
    padding-right: 18px !important;

    box-sizing: border-box !important;
  }

  #attr-symptoms .attr-autonomic__heading,
  #attr-symptoms .attr-autonomic__lead,
  #attr-symptoms .attr-autonomic__overview,
  #attr-symptoms .attr-autonomic__divider,
  #attr-symptoms .attr-autonomic__eyebrow,
  #attr-symptoms .attr-qol__heading,
  #attr-symptoms .attr-qol__eyebrow,
  #attr-symptoms .attr-autonomic__card,
  #attr-symptoms .attr-qol__card,
  #attr-symptoms .attr-autonomic__callout,
  #attr-symptoms .attr-qol__callout {
    width: 100% !important;
    max-width: 760px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /*
   * At this width use the same stacked layout as tablet,
   * but keep the outer card fluid.
   */
  #attr-symptoms .attr-autonomic__grid,
  #attr-symptoms .attr-qol__grid {
    display: block !important;
    width: 100% !important;
  }

  #attr-symptoms .attr-autonomic__item,
  #attr-symptoms .attr-qol__item {
    width: var(--attr-inner-row-width) !important;
    max-width: var(--attr-inner-row-width) !important;

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

    border-bottom: 1px solid #e2e5ee !important;
  }

  #attr-symptoms .attr-autonomic__item {
    grid-template-columns:
      var(--attr-inner-icon-width)
      var(--attr-inner-copy-width) !important;

    column-gap: var(--attr-inner-gap) !important;
    min-height: 96px !important;
    padding: 8px 0 !important;
  }

  #attr-symptoms .attr-qol__item {
    grid-template-columns:
      var(--attr-inner-icon-width)
      var(--attr-inner-copy-width) !important;

    column-gap: var(--attr-inner-gap) !important;
    min-height: 108px !important;
    padding: 10px 0 !important;
  }

  #attr-symptoms .attr-autonomic__item--last {
    grid-column: auto !important;
  }

  #attr-symptoms .attr-autonomic__item--empty,
  #attr-symptoms .attr-qol__item--empty {
    display: none !important;
  }

  #attr-symptoms .attr-autonomic__item:last-child,
  #attr-symptoms .attr-qol__item:not(.attr-qol__item--empty):last-of-type {
    border-bottom: 0 !important;
  }

  #attr-symptoms .attr-autonomic__icon-wrap,
  #attr-symptoms .attr-qol__icon-wrap {
    width: var(--attr-inner-icon-width) !important;
    min-width: var(--attr-inner-icon-width) !important;
    height: 78px !important;
  }

  #attr-symptoms .attr-autonomic__copy,
  #attr-symptoms .attr-qol__copy {
    width: var(--attr-inner-copy-width) !important;
    max-width: var(--attr-inner-copy-width) !important;
    text-align: left !important;
  }
}

/* ---------------------------------------------------------
   TABLET + MOBILE: 0–992px
   Card grows, inner icon/text group stays compact and centered.
   --------------------------------------------------------- */

@media screen and (max-width: 992px) {
  #attr-symptoms .attr-autonomic__item,
  #attr-symptoms .attr-qol__item {
    width: var(--attr-inner-row-width) !important;
    max-width: var(--attr-inner-row-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #attr-symptoms .attr-autonomic__item {
    grid-template-columns:
      var(--attr-inner-icon-width)
      var(--attr-inner-copy-width) !important;

    column-gap: var(--attr-inner-gap) !important;
    min-height: 96px !important;
    padding: 8px 0 !important;
  }

  #attr-symptoms .attr-qol__item {
    grid-template-columns:
      var(--attr-inner-icon-width)
      var(--attr-inner-copy-width) !important;

    column-gap: var(--attr-inner-gap) !important;
    min-height: 108px !important;
    padding: 10px 0 !important;
  }

  #attr-symptoms .attr-autonomic__icon-wrap,
  #attr-symptoms .attr-qol__icon-wrap {
    width: var(--attr-inner-icon-width) !important;
    min-width: var(--attr-inner-icon-width) !important;
  }

  #attr-symptoms .attr-autonomic__copy,
  #attr-symptoms .attr-qol__copy {
    width: var(--attr-inner-copy-width) !important;
    max-width: var(--attr-inner-copy-width) !important;
    min-width: 0 !important;
  }

  #attr-symptoms .attr-autonomic__name {
    font-size: 15px !important;
    line-height: 18px !important;
  }

  #attr-symptoms .attr-autonomic__description {
    font-size: 14px !important;
    line-height: 17px !important;
  }

  #attr-symptoms .attr-qol__value {
    font-size: 28px !important;
    line-height: 30px !important;
  }

  #attr-symptoms .attr-qol__patients {
    font-size: 16px !important;
    line-height: 19px !important;
  }

  #attr-symptoms .attr-qol__description {
    font-size: 14px !important;
    line-height: 17px !important;
  }
}

/* ---------------------------------------------------------
   PHONE REFINEMENT
   Keeps the compact reference proportions at 390px.
   --------------------------------------------------------- */

@media screen and (max-width: 480px) {
  #attr-symptoms {
    --attr-inner-row-width: 286px;
    --attr-inner-icon-width: 92px;
    --attr-inner-copy-width: 150px;
    --attr-inner-gap: 12px;
  }

  #attr-symptoms .attr-autonomic__card,
  #attr-symptoms .attr-qol__card {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  #attr-symptoms .attr-autonomic__intro,
  #attr-symptoms .attr-qol__card-title {
    width: 286px !important;
    max-width: calc(100% - 8px) !important;
  }
}

/* Very narrow phones */
@media screen and (max-width: 340px) {
  #attr-symptoms {
    --attr-inner-row-width: 260px;
    --attr-inner-icon-width: 82px;
    --attr-inner-copy-width: 140px;
    --attr-inner-gap: 10px;
  }
}

/* =========================================================
   FINAL IPAD PRO 1024px FIX
   Desktop-style cards at 993px–1199px and restore page scroll.
   Keep this block at the ABSOLUTE END of the stylesheet.
   ========================================================= */

@media screen and (min-width: 993px) and (max-width: 1199px) {

  /* -------------------------------------------------------
     1. RESTORE NORMAL DOCUMENT HEIGHT AND VERTICAL SCROLL
     ------------------------------------------------------- */

  html,
  body,
  #attr-symptoms,
  #attr-symptoms-section,
  #attr-symptoms .root,
  #attr-symptoms .container,
  #attr-symptoms .responsivegrid,
  #attr-symptoms .cmp-container,
  #attr-symptoms .aem-Grid,
  #attr-symptoms .aem-GridColumn,
  #attr-symptoms .text,
  #attr-symptoms .cmp-text {
    height: auto !important;
    max-height: none !important;
    overflow-y: visible !important;
  }

  html,
  body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  #attr-symptoms,
  #attr-symptoms-section {
    min-height: 0 !important;
    overflow: visible !important;
  }

  /* Do not clip the bottom of either section/card */
  #attr-symptoms .attr-autonomic,
  #attr-symptoms .attr-qol,
  #attr-symptoms .attr-autonomic__card,
  #attr-symptoms .attr-qol__card,
  #attr-symptoms .attr-autonomic__grid,
  #attr-symptoms .attr-qol__grid {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* -------------------------------------------------------
     2. PLACE BOTH SECTIONS IN THE RIGHT CONTENT COLUMN
     Sidebar = 224px, gap = 14px
     ------------------------------------------------------- */

  #attr-symptoms .attr-autonomic,
  #attr-symptoms .attr-qol {
    width: calc(100% - 238px) !important;
    max-width: 1001px !important;

    margin-left: 238px !important;
    margin-right: 0 !important;

    padding: 30px 18px 40px !important;
    box-sizing: border-box !important;
  }

  #attr-symptoms .attr-autonomic__heading,
  #attr-symptoms .attr-autonomic__lead,
  #attr-symptoms .attr-autonomic__overview,
  #attr-symptoms .attr-autonomic__divider,
  #attr-symptoms .attr-autonomic__eyebrow,
  #attr-symptoms .attr-qol__heading,
  #attr-symptoms .attr-qol__eyebrow,
  #attr-symptoms .attr-autonomic__card,
  #attr-symptoms .attr-qol__card,
  #attr-symptoms .attr-autonomic__callout,
  #attr-symptoms .attr-qol__callout {
    width: 100% !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* -------------------------------------------------------
     3. IPAD PRO USES DESKTOP-LIKE THREE-COLUMN CONTENT
     Slightly reduced dimensions to fit the available width.
     ------------------------------------------------------- */

  #attr-symptoms .attr-autonomic__grid,
  #attr-symptoms .attr-qol__grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    column-gap: 14px !important;
    row-gap: 0 !important;
    width: 100% !important;
  }

  #attr-symptoms .attr-autonomic__item,
  #attr-symptoms .attr-qol__item {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    text-align: left !important;
  }

  #attr-symptoms .attr-autonomic__item {
    display: grid !important;
    grid-template-columns: 50px minmax(0, 1fr) !important;
    align-items: center !important;
    column-gap: 7px !important;
    min-height: 100px !important;
    padding: 9px 0 !important;
  }

  #attr-symptoms .attr-qol__item {
    display: grid !important;
    grid-template-columns: 56px minmax(0, 1fr) !important;
    align-items: center !important;
    column-gap: 8px !important;
    min-height: 112px !important;
    padding: 10px 0 !important;
  }

  #attr-symptoms .attr-autonomic__item:nth-child(n + 4),
  #attr-symptoms .attr-qol__item:nth-child(n + 7) {
    border-bottom: 0 !important;
  }

  #attr-symptoms .attr-autonomic__item--last {
    grid-column: 2 !important;
  }

  #attr-symptoms .attr-autonomic__item--empty,
  #attr-symptoms .attr-qol__item--empty {
    display: block !important;
    visibility: hidden !important;
    pointer-events: none !important;
    min-height: 1px !important;
    border: 0 !important;
  }

  #attr-symptoms .attr-autonomic__icon-wrap {
    width: 50px !important;
    min-width: 50px !important;
    height: 64px !important;
  }

  #attr-symptoms .attr-qol__icon-wrap {
    width: 56px !important;
    min-width: 56px !important;
    height: 68px !important;
  }

  #attr-symptoms .attr-autonomic__icon {
    max-width: 50px !important;
    max-height: 62px !important;
  }

  #attr-symptoms .attr-qol__icon {
    max-width: 56px !important;
    max-height: 66px !important;
  }

  #attr-symptoms .attr-autonomic__copy,
  #attr-symptoms .attr-qol__copy {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    text-align: left !important;
  }

  #attr-symptoms .attr-autonomic__name {
    font-size: 13px !important;
    line-height: 16px !important;
  }

  #attr-symptoms .attr-autonomic__description {
    font-size: 12px !important;
    line-height: 15px !important;
  }

  #attr-symptoms .attr-qol__value {
    font-size: 25px !important;
    line-height: 27px !important;
  }

  #attr-symptoms .attr-qol__patients {
    font-size: 14px !important;
    line-height: 17px !important;
  }

  #attr-symptoms .attr-qol__description {
    font-size: 12px !important;
    line-height: 15px !important;
  }

  /* Card headings can be slightly smaller at 1024px */
  #attr-symptoms .attr-autonomic__intro,
  #attr-symptoms .attr-qol__card-title {
    max-width: 620px !important;
    font-size: 14px !important;
    line-height: 18px !important;
  }

  /* Callouts remain full-width and horizontal like desktop */
  #attr-symptoms .attr-autonomic__callout,
  #attr-symptoms .attr-qol__callout {
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) !important;
    min-height: 66px !important;
    padding: 11px 16px !important;
    overflow: visible !important;
  }
}

/* =========================================================
   FINAL IPAD MINI RED-FLAGS PANEL WIDTH FIX
   Applies to tablet widths only. Keep this block at the
   absolute end of the stylesheet.
   ========================================================= */

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

  /*
   * Remove width restrictions from the AEM wrappers that
   * contain #attr-body-figure.
   */
  #attr-symptoms .container:has(#attr-body-figure),
  #attr-symptoms .responsivegrid:has(#attr-body-figure),
  #attr-symptoms .cmp-container:has(#attr-body-figure),
  #attr-symptoms .aem-Grid:has(#attr-body-figure),
  #attr-symptoms .aem-GridColumn:has(#attr-body-figure),
  #attr-symptoms .text:has(#attr-body-figure),
  #attr-symptoms .cmp-text:has(#attr-body-figure) {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;

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

    padding-left: 0 !important;
    padding-right: 0 !important;

    box-sizing: border-box !important;
  }

  /*
   * Expand the complete navy panel across the available
   * tablet viewport while preserving small outer gutters.
   */
  #attr-symptoms #attr-body-figure {
    display: grid !important;

    grid-template-columns: 185px minmax(0, 1fr) !important;
    grid-template-rows: 54px 46px minmax(250px, 1fr) !important;

    column-gap: 16px !important;
    row-gap: 14px !important;

    width: calc(100% - 24px) !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 450px !important;

    margin: 20px auto !important;
    padding: 18px 16px 46px !important;

    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  /* Keep the silhouette column compact */
  #attr-symptoms #attr-body-figure > .text:has(#attr-body-image) {
    grid-column: 1 !important;
    grid-row: 1 / 4 !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  #attr-symptoms #attr-body-image,
  #attr-symptoms #attr-redflags-figure {
    width: 100% !important;
    max-width: 185px !important;
    min-width: 0 !important;
  }

  #attr-symptoms #attr-body-image .attr-redflags-body__image {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 380px !important;
    margin: 0 auto !important;
    object-fit: contain !important;
  }

  /* Allow the complete tab area to consume the remaining width */
  #attr-symptoms #attr-body-figure > .tabs {
    grid-column: 2 !important;
    grid-row: 2 / 4 !important;

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

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

  #attr-symptoms #attr-main-tabs {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  /*
   * Keep all five tabs inside the available width instead of
   * forcing a horizontally oversized tab row.
   */
  #attr-symptoms #attr-main-tabs .cmp-tabs__tablist {
    display: grid !important;
    grid-template-columns:
      1.05fr
      1.05fr
      1.25fr
      1.35fr
      0.95fr !important;

    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  #attr-symptoms #attr-main-tabs .cmp-tabs__tab {
    min-width: 0 !important;
    padding: 6px 5px !important;
    font-size: 11px !important;
    line-height: 13px !important;
    white-space: normal !important;
  }

  /* Expand the active white content panel with the tab area */
  #attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 250px !important;
    min-height: 250px !important;
    padding: 18px 18px !important;
    box-sizing: border-box !important;
  }

  #attr-symptoms #attr-main-tabs .attr-tab-content {
    display: grid !important;
    grid-template-columns: 112px minmax(0, 1fr) !important;
    column-gap: 18px !important;

    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 214px !important;

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

  #attr-symptoms #attr-main-tabs .attr-tab-content__image {
    width: 112px !important;
    min-width: 112px !important;
    height: 210px !important;
  }

  #attr-symptoms #attr-main-tabs .attr-tab-content__image img {
    max-width: 112px !important;
    max-height: 205px !important;
  }

  #attr-symptoms #attr-main-tabs .attr-tab-content__copy {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  #attr-symptoms #attr-main-tabs .attr-tab-content__copy h3 {
    font-size: 15px !important;
    line-height: 18px !important;
  }

  #attr-symptoms #attr-main-tabs .attr-tab-content__copy p {
    font-size: 13px !important;
    line-height: 17px !important;
  }
}

/* Slightly tighter layout for 701px–800px tablets */
@media screen and (min-width: 701px) and (max-width: 800px) {
  #attr-symptoms #attr-body-figure {
    grid-template-columns: 170px minmax(0, 1fr) !important;
    width: calc(100% - 20px) !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  #attr-symptoms #attr-body-image,
  #attr-symptoms #attr-redflags-figure {
    max-width: 170px !important;
  }

  #attr-symptoms #attr-main-tabs .cmp-tabs__tab {
    font-size: 10px !important;
    line-height: 12px !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  #attr-symptoms #attr-main-tabs .attr-tab-content {
    grid-template-columns: 100px minmax(0, 1fr) !important;
    column-gap: 14px !important;
  }

  #attr-symptoms #attr-main-tabs .attr-tab-content__image {
    width: 100px !important;
    min-width: 100px !important;
  }

  #attr-symptoms #attr-main-tabs .attr-tab-content__image img {
    max-width: 100px !important;
  }
}

/* =========================================================
   FINAL MOBILE–TABLET FLUID RED-FLAGS LAYOUT
   Same structure/content from 701px to 992px.
   Only the outer width and available columns grow.
   Keep this block at the absolute end of the stylesheet.
   ========================================================= */

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

  /* Remove AEM wrapper width restrictions */
  #attr-symptoms .container:has(#attr-body-figure),
  #attr-symptoms .responsivegrid:has(#attr-body-figure),
  #attr-symptoms .cmp-container:has(#attr-body-figure),
  #attr-symptoms .aem-Grid:has(#attr-body-figure),
  #attr-symptoms .aem-GridColumn:has(#attr-body-figure),
  #attr-symptoms .text:has(#attr-body-figure),
  #attr-symptoms .cmp-text:has(#attr-body-figure) {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  /*
   * Preserve the same two-column layout at every tablet width.
   * Only the panel width and the two columns grow fluidly.
   */
  #attr-symptoms #attr-body-figure {
    display: grid !important;

    grid-template-columns:
      clamp(150px, 22vw, 190px)
      minmax(0, 1fr) !important;

    grid-template-rows:
      auto
      auto
      minmax(280px, auto) !important;

    column-gap: clamp(14px, 2.2vw, 20px) !important;
    row-gap: 14px !important;

    width: calc(100% - 24px) !important;
    max-width: 940px !important;
    min-width: 0 !important;
    min-height: 470px !important;

    margin: 20px auto !important;
    padding:
      20px
      clamp(14px, 2vw, 20px)
      44px !important;

    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  /* Heading stays above the right-side tabs/content area */
  #attr-symptoms #attr-body-figure > .text:has(#attr-panel-heading) {
    grid-column: 2 !important;
    grid-row: 1 !important;

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

    width: 100% !important;
    min-width: 0 !important;
    min-height: 50px !important;

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

  #attr-symptoms
  #attr-panel-heading
  .attr-redflags-panel__heading {
    width: 100% !important;
    max-width: 540px !important;

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

    font-size: clamp(14px, 1.9vw, 17px) !important;
    line-height: 1.2 !important;
    text-align: center !important;
  }

  /* Silhouette remains in the left column */
  #attr-symptoms #attr-body-figure > .text:has(#attr-body-image) {
    grid-column: 1 !important;
    grid-row: 1 / 4 !important;

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

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

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

    overflow: hidden !important;
  }

  #attr-symptoms #attr-body-image,
  #attr-symptoms #attr-redflags-figure {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 390px !important;
  }

  #attr-symptoms
  #attr-body-image
  .attr-redflags-body__image {
    display: block !important;

    width: auto !important;
    height: auto !important;

    max-width: 100% !important;
    max-height: 410px !important;

    margin: 0 auto !important;

    object-fit: contain !important;
    object-position: center !important;
  }

  /* Tabs and white content stay in the right column */
  #attr-symptoms #attr-body-figure > .tabs {
    grid-column: 2 !important;
    grid-row: 2 / 4 !important;

    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 100% !important;

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

  #attr-symptoms #attr-main-tabs {
    display: flex !important;
    flex-direction: column !important;

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

  /*
   * Five tabs always remain in one row.
   * Their widths grow with the available space.
   */
  #attr-symptoms
  #attr-main-tabs
  .cmp-tabs__tablist {
    display: grid !important;

    grid-template-columns:
      1.05fr
      1.05fr
      1.25fr
      1.35fr
      0.95fr !important;

    width: 100% !important;
    min-width: 0 !important;
    min-height: 52px !important;

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

    overflow: hidden !important;
  }

  #attr-symptoms
  #attr-main-tabs
  .cmp-tabs__tab {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-width: 0 !important;
    min-height: 52px !important;

    padding: 6px 5px !important;

    font-size: clamp(10px, 1.45vw, 13px) !important;
    line-height: 1.15 !important;

    text-align: center !important;
    white-space: normal !important;
  }

  /* Active panel grows with the right column */
  #attr-symptoms
  #attr-main-tabs
  .cmp-tabs__tabpanel {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;

    height: auto !important;
    min-height: 280px !important;
    max-height: none !important;

    margin: 0 !important;
    padding:
      18px
      clamp(16px, 2.2vw, 24px) !important;

    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  #attr-symptoms
  #attr-main-tabs
  .cmp-tabs__tabpanel.cmp-tabs__tabpanel--active {
    display: flex !important;
    align-items: center !important;
  }

  /* Reset inner AEM wrappers */
  #attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel .container,
  #attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel .responsivegrid,
  #attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel .cmp-container,
  #attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel .aem-Grid,
  #attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel .aem-GridColumn,
  #attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel .text,
  #attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel .cmp-text {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;

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

    box-sizing: border-box !important;
  }

  /*
   * Keep image + copy in the same positions.
   * Their widths scale slightly but the structure never changes.
   */
  #attr-symptoms
  #attr-main-tabs
  .attr-tab-content {
    display: grid !important;

    grid-template-columns:
      clamp(95px, 15vw, 130px)
      minmax(0, 1fr) !important;

    align-items: center !important;
    column-gap: clamp(14px, 2.2vw, 24px) !important;

    width: 100% !important;
    min-width: 0 !important;
    min-height: 240px !important;

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

    box-sizing: border-box !important;
  }

  #attr-symptoms
  #attr-main-tabs
  .attr-tab-content__image {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: clamp(95px, 15vw, 130px) !important;
    min-width: clamp(95px, 15vw, 130px) !important;
    height: 225px !important;

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

    overflow: hidden !important;
  }

  #attr-symptoms
  #attr-main-tabs
  .attr-tab-content__image img {
    display: block !important;

    width: auto !important;
    height: auto !important;

    max-width: 100% !important;
    max-height: 220px !important;

    margin: 0 auto !important;

    object-fit: contain !important;
  }

  #attr-symptoms
  #attr-main-tabs
  .attr-tab-content__copy {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

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

    text-align: left !important;
  }

  #attr-symptoms
  #attr-main-tabs
  .attr-tab-content__copy h3 {
    margin: 0 0 10px !important;

    font-size: clamp(15px, 1.9vw, 18px) !important;
    line-height: 1.2 !important;
  }

  #attr-symptoms
  #attr-main-tabs
  .attr-tab-content__copy p {
    margin: 0 0 6px !important;

    font-size: clamp(13px, 1.65vw, 15px) !important;
    line-height: 1.25 !important;
  }

  /* Disclaimer stays inside the panel */
  #attr-symptoms
  #attr-panel-heading
  .attr-redflags-panel__disclaimer {
    position: absolute !important;

    left: 0 !important;
    bottom: -399px !important;

    width: 100% !important;

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

    font-size: 12px !important;
    line-height: 15px !important;

    text-align: left !important;
    white-space: normal !important;
  }
}

/* =========================================================
   FINAL AUTONOMIC + QUALITY-OF-LIFE DESKTOP ALIGNMENT
   KEEP THIS AT THE ABSOLUTE END OF THE CSS FILE
   ========================================================= */

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

  /* ---------------------------------------------------------
     1. ALIGN BOTH COMPLETE SECTIONS WITH THE RIGHT COLUMN
     Sidebar width: 224px
     Column gap: 14px
     Total left offset: 238px
     --------------------------------------------------------- */

  #attr-symptoms .attr-autonomic,
  #attr-symptoms .attr-qol {
    width: 100% !important;
    max-width: 1250px !important;

    margin: 0 auto !important;
    padding: 30px 0 38px 238px !important;

    box-sizing: border-box !important;
    text-align: center !important;
  }

  /* Both section headings use exactly the same width */
  #attr-symptoms .attr-autonomic__heading,
  #attr-symptoms .attr-autonomic__lead,
  #attr-symptoms .attr-autonomic__overview,
  #attr-symptoms .attr-autonomic__divider,
  #attr-symptoms .attr-autonomic__eyebrow,
  #attr-symptoms .attr-qol__heading,
  #attr-symptoms .attr-qol__eyebrow {
    width: 100% !important;
    max-width: 1001px !important;

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

    box-sizing: border-box !important;
  }

  /* ---------------------------------------------------------
     2. BOTH CARDS HAVE THE SAME WIDTH AND TOP ALIGNMENT
     --------------------------------------------------------- */

  #attr-symptoms .attr-autonomic__card,
  #attr-symptoms .attr-qol__card {
    display: block !important;

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

    margin: 0 auto 28px !important;
    padding: 20px 24px 18px !important;

    box-sizing: border-box !important;
    overflow: visible !important;

    background: #ffffff !important;
    border: 1px solid #c8d1ea !important;
    border-radius: 22px !important;
    box-shadow: 0 2px 11px rgba(0, 33, 95, 0.16) !important;
  }

  /* Same heading spacing inside both cards */
  #attr-symptoms .attr-autonomic__intro,
  #attr-symptoms .attr-qol__card-title {
    width: 100% !important;
    max-width: 680px !important;

    min-height: 38px !important;

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

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

    box-sizing: border-box !important;
    text-align: center !important;
  }

  /* ---------------------------------------------------------
     3. THREE EQUAL COLUMNS FOR BOTH CARDS
     --------------------------------------------------------- */

  #attr-symptoms .attr-autonomic__grid,
  #attr-symptoms .attr-qol__grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;

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

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

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

    box-sizing: border-box !important;
    overflow: visible !important;
  }

  /* ---------------------------------------------------------
     4. COMMON ITEM ALIGNMENT
     --------------------------------------------------------- */

  #attr-symptoms .attr-autonomic__item,
  #attr-symptoms .attr-qol__item {
    position: relative !important;

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

    margin: 0 !important;

    box-sizing: border-box !important;
    text-align: left !important;

    /* Remove the old CSS-created line */
    border: 0 !important;
    border-bottom: 0 !important;
    border-image: none !important;
  }

  #attr-symptoms .attr-autonomic__item {
    display: grid !important;
    grid-template-columns: 64px minmax(0, 1fr) !important;
    align-items: center !important;

    column-gap: 10px !important;

    min-height: 104px !important;
    padding: 10px 0 16px !important;
  }

  #attr-symptoms .attr-qol__item {
    display: grid !important;
    grid-template-columns: 72px minmax(0, 1fr) !important;
    align-items: center !important;

    column-gap: 10px !important;

    min-height: 112px !important;
    padding: 12px 0 17px !important;
  }

  /* ---------------------------------------------------------
     5. DAM IMAGE USED AS THE SEPARATOR LINE

     Replace the URL below with your actual DAM line image.
     The same image is currently used for both cards.
     --------------------------------------------------------- */

  #attr-symptoms .attr-autonomic__item::after,
  #attr-symptoms .attr-qol__item::after {
    content: "" !important;

    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    display: block !important;

    width: 100% !important;
    height: 2px !important;

    background-image:
      url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/SOFT%20separator%20line%20.png") !important;

    background-repeat: no-repeat !important;
    background-position: center bottom !important;
    background-size: 100% 2px !important;

    border: 0 !important;
    pointer-events: none !important;
  }

  /* ---------------------------------------------------------
     6. REMOVE THE LINE FROM THE FINAL AUTONOMIC ROW

     Items 1–3 = first row
     Items 4–6 = second row
     Item 7 = centred final row
     --------------------------------------------------------- */

  #attr-symptoms .attr-autonomic__item:nth-child(n + 7)::after {
    content: none !important;
    display: none !important;
    background-image: none !important;
  }

  /* ---------------------------------------------------------
     7. REMOVE THE LINE FROM THE FINAL QUALITY-OF-LIFE ROW

     Items 1–3 = first row
     Items 4–6 = second row
     Item 7 = centred final row
     --------------------------------------------------------- */

  #attr-symptoms .attr-qol__item:nth-child(n + 7)::after {
    content: none !important;
    display: none !important;
    background-image: none !important;
  }

  /* Centre the real seventh item in both cards */
  #attr-symptoms .attr-autonomic__item--last,
  #attr-symptoms .attr-autonomic__item:nth-child(7),
  #attr-symptoms .attr-qol__item:nth-child(7),
  #attr-symptoms
    .attr-qol__item:not(.attr-qol__item--empty):last-of-type {
    grid-column: 2 !important;
  }

  /* Keep layout placeholders hidden */
  #attr-symptoms .attr-autonomic__item--empty,
  #attr-symptoms .attr-qol__item--empty {
    display: block !important;
    visibility: hidden !important;
    pointer-events: none !important;

    min-height: 1px !important;

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

  #attr-symptoms .attr-autonomic__item--empty::after,
  #attr-symptoms .attr-qol__item--empty::after {
    content: none !important;
    display: none !important;
    background-image: none !important;
  }

  /* ---------------------------------------------------------
     8. ICON AND TEXT ALIGNMENT
     --------------------------------------------------------- */

  #attr-symptoms .attr-autonomic__icon-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 64px !important;
    min-width: 64px !important;
    height: 72px !important;

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

  #attr-symptoms .attr-qol__icon-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 72px !important;
    min-width: 72px !important;
    height: 78px !important;

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

  #attr-symptoms .attr-autonomic__icon {
    display: block !important;

    width: auto !important;
    height: auto !important;
    max-width: 64px !important;
    max-height: 70px !important;

    margin: 0 auto !important;
    object-fit: contain !important;
  }

  #attr-symptoms .attr-qol__icon {
    display: block !important;

    width: auto !important;
    height: auto !important;
    max-width: 70px !important;
    max-height: 76px !important;

    margin: 0 auto !important;
    object-fit: contain !important;
  }

  #attr-symptoms .attr-autonomic__copy,
  #attr-symptoms .attr-qol__copy {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

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

    text-align: left !important;
    box-sizing: border-box !important;
  }

  /* ---------------------------------------------------------
     9. CALLOUTS ALSO MATCH THE CARD WIDTH
     --------------------------------------------------------- */

  #attr-symptoms .attr-autonomic__callout,
  #attr-symptoms .attr-qol__callout {
    width: 100% !important;
    max-width: 1001px !important;

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

@media screen and (min-width: 992px) {
  #attr-symptoms .banner-img {
    background-image: url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/banner.png") !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
  }
}

/* =========================================================
   FINAL INTERNAL FOOTER DESKTOP ALIGNMENT
   Two equal 490px cards + 20px gap = 1000px total.
   Keep this block at the absolute end of the stylesheet.
   ========================================================= */

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

  #attr-symptoms .sec3-mainbg {
    position: relative !important;
    isolation: isolate !important;

    display: grid !important;
    grid-template-columns: repeat(2, 490px) !important;
    grid-auto-rows: auto !important;
    justify-content: center !important;
    align-items: start !important;
    column-gap: 20px !important;
    row-gap: 0 !important;

    width: 100% !important;
    min-height: 303px !important;
    height: auto !important;

    margin: 0 !important;
    padding: 28px 0 115px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;

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

  /* Keep the background visible behind all footer content */
  #attr-symptoms .sec3-mainbg::before {
    content: none !important;
    display: none !important;
  }

  #attr-symptoms .sec3-mainbg > .patient-box,
  #attr-symptoms .sec3-mainbg > .attr-footer-card {
    position: relative !important;
    z-index: 1 !important;

    grid-column: auto !important;

    flex: none !important;
    width: 490px !important;
    min-width: 490px !important;
    max-width: 490px !important;

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

    /* Align the 1000px footer row with the 1001px right content column */
    transform: translateX(119px) !important;
  }

  #attr-symptoms .sec3-mainbg .image-shadow {
    position: static !important;
    display: block !important;

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

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

    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  #attr-symptoms .sec3-mainbg .border-box {
    position: relative !important;

    display: grid !important;
    grid-template-columns: 72px minmax(0, 1fr) !important;
    grid-template-rows: minmax(88px, auto) auto !important;
    align-items: center !important;
    column-gap: 16px !important;

    width: 490px !important;
    min-width: 490px !important;
    max-width: 490px !important;
    min-height: 150px !important;
    height: auto !important;

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

    background: #e9ebf2 !important;
    border: 1px solid #bfc8e6 !important;
    border-radius: 18px 18px 18px 0 !important;
    overflow: visible !important;
  }

  #attr-symptoms .sec3-mainbg .smallbox-icon {
    grid-column: 1 !important;
    grid-row: 1 !important;

    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 62px !important;
    max-height: 76px !important;

    margin: 0 auto !important;
    object-fit: contain !important;
  }

  #attr-symptoms .sec3-mainbg .smallbox-title {
    grid-column: 2 !important;
    grid-row: 1 !important;

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

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

    color: #151515 !important;
    font-family: "Kanit-Regular", "Kanit", Arial, sans-serif !important;
    font-size: 15px !important;
    line-height: 18px !important;
    text-align: left !important;
  }

  #attr-symptoms .sec3-mainbg .cta-bottom-home {
    position: static !important;

    grid-column: 1 / -1 !important;
    grid-row: 2 !important;

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

    width: 100% !important;
    margin: 12px 0 -40px !important;
    padding: 0 !important;

    transform: none !important;
    z-index: 3 !important;
  }

  #attr-symptoms .sec3-mainbg .middle-bottom-cta {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    min-width: 210px !important;
    max-width: 310px !important;
    min-height: 34px !important;

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

    font-size: 11px !important;
    line-height: 14px !important;
    white-space: nowrap !important;
  }

  #attr-symptoms .sec3-mainbg .home-cta-1 .middle-bottom-cta {
    min-width: 275px !important;
  }
}

/* Tablet and mobile remain stacked and fluid */
@media screen and (max-width: 992px) {
  #attr-symptoms .sec3-mainbg {
    background-image: url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/Internal%20Footer%20image_desktop.jpg") !important;
    background-repeat: no-repeat !important;
    background-position: center bottom !important;
    background-size: cover !important;
  }
}

/* =========================================================
   FINAL DESKTOP HERO HEIGHT FIX
   Keep this at the absolute end of the stylesheet.
   The source image is 1443 × 303, so it is displayed at its
   native desktop height instead of filling the viewport.
   ========================================================= */

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

  #attr-symptoms .banner-img,
  #page-1a38cc0b2e .banner-img,
  .banner-img {
    background-image:
      url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/banner.png") !important;

    background-repeat: no-repeat !important;
    background-position: center top !important;

    /* Exact native image dimensions */
    background-size: 1443px 303px !important;

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

    aspect-ratio: auto !important;

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

    position: relative !important;
    top: 0 !important;
    z-index: 0 !important;

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

  /* Prevent the inner content from increasing the hero height */
  #attr-symptoms .banner-img > *,
  #page-1a38cc0b2e .banner-img > *,
  .banner-img > * {
    max-height: 303px !important;
    box-sizing: border-box !important;
  }

  /* Remove old scroll positioning based on a tall hero */
  #attr-symptoms .banner-img .scroll,
  #attr-symptoms p.scroll.attr-sm {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 12px !important;
    top: auto !important;
    margin: 0 !important;
  }
}

/* =========================================================
   FINAL HERO FULL-WIDTH + TEXT ALIGNMENT FIX
   Keep this block at the absolute end of the stylesheet.
   ========================================================= */

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

  /* Remove white side borders by breaking the hero out to full viewport width */
  #attr-symptoms .banner-img,
  #page-1a38cc0b2e .banner-img,
  .banner-img {
    width: 100vw !important;
    max-width: none !important;

    height: 397px !important;
    min-height: 303px !important;
    max-height: 397px !important;

    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;

    background-image:
      url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/banner.png") !important;

    background-repeat: no-repeat !important;
    background-position: center center !important;

    /* Fill the full width and remove the white side gaps */
    background-size: cover !important;

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

    position: relative !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  /* Main hero content wrapper */
  #attr-symptoms .banner-block,
  .banner-block {
    width: calc(100% - 80px) !important;
    max-width: 1250px !important;

    margin: 0 auto !important;
    padding: 20px 0 0 40px !important;

    box-sizing: border-box !important;
  }

  /* Small heading */
  #attr-symptoms .banner-txt1,
  .banner-txt1 {
    width: 100% !important;
    max-width: 1000px !important;

    margin: 80px 0 12px !important;
    padding: 0 !important;

    font-size: 14px !important;
    line-height: 17px !important;
    text-align: left !important;
  }

  /* Main title — wider so it matches the reference instead of stacking */
  #attr-symptoms .banner-txt2,
  .banner-txt2 {
    width: 100% !important;
    max-width: 1120px !important;

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

    font-size: 39px !important;
    line-height: 43px !important;
    letter-spacing: -0.4px !important;
    text-align: left !important;
  }

  /* Remove authored line breaks that force the narrow stacked layout */
  #attr-symptoms .banner-txt2 br,
  .banner-txt2 br {
    display: none !important;
  }

  /* Keep a controlled two-line title width */
  #attr-symptoms .banner-txt2 {
    max-width: 1080px !important;
  }

  /* Supporting copy */
  #attr-symptoms .banner-txt3,
  .banner-txt3 {
    width: 100% !important;
    max-width: 700px !important;

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

    font-size: 14px !important;
    line-height: 17px !important;
    text-align: left !important;
  }

  /* Keep the scroll CTA at the bottom centre */
  #attr-symptoms .banner-img .scroll,
  #attr-symptoms p.scroll.attr-sm,
  .banner-img .scroll {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    bottom: 12px !important;
    top: auto !important;

    margin: 0 !important;
    transform: translateX(-50%) !important;

    font-size: 12px !important;
    line-height: 15px !important;
    white-space: nowrap !important;
  }
}

#attr-symptoms .banner-txt2 span {
    color: #ffffff !important;
}

/* =========================================================
   FINAL MOBILE RED-FLAGS PANEL OVERRIDE
   Added at the end so no earlier site CSS needs to be edited.
   ========================================================= */

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

  #attr-symptoms #attr-body-figure {
    display: flex !important;
    flex-direction: column !important;

    width: calc(100% - 20px) !important;
    max-width: 620px !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 12px auto 26px !important;
    padding: 18px 14px 24px !important;

    box-sizing: border-box !important;
    overflow: hidden !important;
    border-radius: 22px !important;

    background-color: #001b45 !important;
    background-image:
      url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/Multiple%20Layers%20%282%29%20%283%29.png") !important;
    background-repeat: no-repeat !important;
    background-position: center top !important;

    /*
     * Preserve the mobile background's natural proportions.
     * Unlike cover, contain does not crop or stretch the image.
     */
    background-size: contain !important;
  }

  /* Mobile heading */
  #attr-symptoms #attr-body-figure > .text:has(#attr-panel-heading) {
    order: 1 !important;

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

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

  #attr-symptoms #attr-panel-heading,
  #attr-symptoms #attr-panel-heading .attr-redflags-panel {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

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

  #attr-symptoms #attr-panel-heading .attr-redflags-panel__heading {
    width: 100% !important;
    max-width: 340px !important;

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

    font-size: 14px !important;
    line-height: 18px !important;
    text-align: center !important;
  }

  /* Mobile body silhouette */
  #attr-symptoms #attr-body-figure > .text:has(#attr-body-image) {
    order: 2 !important;

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

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

  #attr-symptoms #attr-body-image,
  #attr-symptoms #attr-redflags-figure {
    width: 100% !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

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

  #attr-symptoms #attr-body-image .attr-redflags-body__image {
    display: block !important;

    width: auto !important;
    height: auto !important;

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

    margin: 0 auto !important;

    object-fit: contain !important;
    object-position: center top !important;
  }

  /* Mobile tabs */
  #attr-symptoms #attr-body-figure > .tabs {
    order: 3 !important;

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

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

  #attr-symptoms #attr-main-tabs {
    width: 100% !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  #attr-symptoms #attr-main-tabs .cmp-tabs__tablist {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  #attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel,
  #attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel.cmp-tabs__tabpanel--active {
    width: 100% !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    padding: 18px 16px !important;
    box-sizing: border-box !important;
  }

  #attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel .container,
  #attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel .responsivegrid,
  #attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel .cmp-container,
  #attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel .aem-Grid {
    width: 100% !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  #attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel .aem-Grid {
    display: block !important;
  }

  #attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel .image,
  #attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel .text {
    width: 100% !important;
    height: auto !important;
  }

  #attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel .image img,
  #attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel .cmp-image__image {
    display: block !important;

    width: auto !important;
    height: auto !important;

    max-width: 130px !important;
    max-height: none !important;

    margin: 0 auto 16px !important;

    object-fit: contain !important;
  }

  /* Disclaimer remains in normal document flow */
  #attr-symptoms #attr-panel-heading .attr-redflags-panel__disclaimer {
    position: static !important;

    width: 100% !important;

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

    text-align: center !important;
    white-space: normal !important;
  }
}

/* =========================================================
   FIX MOBILE HERO HEIGHT
   ========================================================= */

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

  #attr-symptoms .banner-img,
  .banner-img {
    width: 100% !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    aspect-ratio: auto !important;

    background-repeat: no-repeat !important;
    background-position: center top !important;
    background-size: contain !important;

    display: block !important;
    margin: 0 !important;
  }
}

/* =========================================================
   FINAL MOBILE CORRECTION
   - Restore the original mobile HERO background
   - Remove white side gutters
   - Keep the NEW background only on #attr-body-figure
   Keep this block at the absolute end of the stylesheet.
   ========================================================= */

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

  /* ---------------------------------------------------------
     MOBILE HERO: restore original starry background
     --------------------------------------------------------- */
  #attr-symptoms .banner-img,
  #page-1a38cc0b2e .banner-img,
  .banner-img {
    position: relative !important;

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

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

    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;

    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;

    background-image:
      url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/starry%20background.png") !important;

    background-repeat: no-repeat !important;
    background-position: center top !important;
    background-size: cover !important;

    border: 0 !important;
    border-radius: 0 !important;
    z-index: 0 !important;
  }

  /* Remove AEM wrapper side padding around the hero only */
  #attr-symptoms .text:has(.banner-img),
  #attr-symptoms .cmp-text:has(.banner-img),
  #attr-symptoms .cmp-text > div:has(> .banner-img) {
    width: 100% !important;
    max-width: none !important;

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

    box-sizing: border-box !important;
    overflow: visible !important;
  }

  /* Restore sensible mobile hero text positioning */
  #attr-symptoms .banner-img .banner-block,
  .banner-img .banner-block {
    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 105px 20px 70px !important;

    box-sizing: border-box !important;
  }

  #attr-symptoms .banner-txt1,
  .banner-txt1 {
    width: 100% !important;

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

    font-size: 14px !important;
    line-height: 18px !important;
    white-space: normal !important;
  }

  #attr-symptoms .banner-txt2,
  .banner-txt2 {
    width: 100% !important;
    

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

    font-size: 30px !important;
    line-height: 36px !important;
    white-space: normal !important;
  }

  #attr-symptoms .banner-txt3,
  .banner-txt3 {
    width: 100% !important;
    max-width: 335px !important;

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

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

  #attr-symptoms .banner-img .scroll.mobile-only,
  #attr-symptoms .banner-img .scroll,
  .banner-img .scroll.mobile-only {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 20px !important;
    top: auto !important;

    width: 100% !important;

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

    text-align: center !important;
  }

  #attr-symptoms .banner-img .scroll.mobile-only a,
  #attr-symptoms .banner-img .scroll a {
    position: static !important;
    top: auto !important;
    padding-right: 0 !important;
  }

  /* ---------------------------------------------------------
     RED-FLAGS PANEL: use the NEW mobile panel background here
     --------------------------------------------------------- */
  #attr-symptoms #attr-body-figure {
    background-color: #001b45 !important;
    background-image:
      url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/Multiple%20Layers%20%282%29%20%283%29.png") !important;

    background-repeat: no-repeat !important;
    background-position: center top !important;
    background-size: cover !important;
  }
}

/* =========================================================
   FINAL MOBILE RED-FLAGS PANEL RESTORE
   Restores: heading on top, body image left, tabs right.
   Keep this block at the absolute end of the stylesheet.
   ========================================================= */

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

  #attr-symptoms #attr-body-figure {
    display: grid !important;
    grid-template-columns: 132px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;

    column-gap: 10px !important;
    row-gap: 14px !important;

    width: calc(100% - 20px) !important;
    max-width: none !important;

    height: auto !important;
    min-height: 520px !important;
    max-height: none !important;

    margin: 12px auto 26px !important;
    padding: 16px 12px 22px !important;

    box-sizing: border-box !important;
    overflow: hidden !important;
    border-radius: 18px !important;

    background-color: #001b45 !important;
    background-image:
      url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/Multiple%20Layers%20%282%29%20%283%29.png") !important;
    background-repeat: no-repeat !important;
    background-position: center top !important;
    background-size: cover !important;
  }

  /* Heading spans the full panel width */
  #attr-symptoms #attr-body-figure > .text:has(#attr-panel-heading) {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;

    order: initial !important;

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

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

  #attr-symptoms #attr-panel-heading .attr-redflags-panel__heading {
    width: 100% !important;
    max-width: 330px !important;

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

    font-size: 14px !important;
    line-height: 18px !important;
    text-align: center !important;
  }

  /* Body silhouette stays in the left column */
  #attr-symptoms #attr-body-figure > .text:has(#attr-body-image) {
    grid-column: 1 !important;
    grid-row: 2 !important;

    order: initial !important;

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

    width: 132px !important;
    min-width: 132px !important;

    height: auto !important;
    min-height: 390px !important;
    max-height: none !important;

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

    overflow: hidden !important;
  }

  #attr-symptoms #attr-body-image,
  #attr-symptoms #attr-redflags-figure {
    width: 132px !important;

    height: auto !important;
    min-height: 390px !important;
    max-height: none !important;

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

  #attr-symptoms #attr-body-image .attr-redflags-body__image {
    display: block !important;

    width: 132px !important;
    max-width: 132px !important;

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

    margin: 0 auto !important;

    object-fit: contain !important;
    object-position: center top !important;
  }

  /* Tabs stay in the right column */
  #attr-symptoms #attr-body-figure > .tabs {
    grid-column: 2 !important;
    grid-row: 2 !important;

    order: initial !important;

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

    height: auto !important;
    min-height: 390px !important;
    max-height: none !important;

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

    overflow: hidden !important;
  }

  #attr-symptoms #attr-main-tabs {
    width: 100% !important;
    min-width: 0 !important;

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

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

  /* Vertical mobile tab buttons */
  #attr-symptoms #attr-main-tabs .cmp-tabs__tablist {
    display: flex !important;
    flex-direction: column !important;

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

    height: auto !important;
    min-height: 0 !important;

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

    overflow: visible !important;
    border-radius: 14px !important;
    background: #ffffff !important;
  }

  #attr-symptoms #attr-main-tabs .cmp-tabs__tab {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 50px !important;

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

    font-size: 12px !important;
    line-height: 15px !important;

    border-bottom: 1px solid #d4d8e5 !important;
    border-radius: 0 !important;
  }

  #attr-symptoms #attr-main-tabs .cmp-tabs__tab:first-child {
    border-radius: 14px 14px 0 0 !important;
  }

  #attr-symptoms #attr-main-tabs .cmp-tabs__tab:last-child {
    border-bottom: 0 !important;
    border-radius: 0 0 14px 14px !important;
  }

  /* Compact tab content so it does not overflow */
  #attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel,
  #attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel.cmp-tabs__tabpanel--active {
    width: 100% !important;
    min-width: 0 !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

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

    display: none !important;

    box-sizing: border-box !important;
    overflow: hidden !important;

    border-radius: 14px !important;
  }

  #attr-symptoms
    #attr-main-tabs
    .cmp-tabs__tabpanel.cmp-tabs__tabpanel--active {
    display: block !important;
  }

  #attr-symptoms #attr-main-tabs .attr-tab-content {
    display: block !important;

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

    min-height: 0 !important;

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

  #attr-symptoms #attr-main-tabs .attr-tab-content__image {
    width: 82px !important;
    height: auto !important;
    min-width: 0 !important;

    margin: 0 auto 10px !important;
    overflow: visible !important;
  }

  #attr-symptoms #attr-main-tabs .attr-tab-content__image img {
    width: auto !important;
    height: auto !important;

    max-width: 82px !important;
    max-height: 105px !important;

    margin: 0 auto !important;
  }

  #attr-symptoms #attr-main-tabs .attr-tab-content__copy {
    width: 100% !important;
    min-width: 0 !important;
  }

  #attr-symptoms #attr-main-tabs .attr-tab-content__copy h3 {
    margin: 0 0 8px !important;

    font-size: 13px !important;
    line-height: 16px !important;
    text-align: center !important;
  }

  #attr-symptoms #attr-main-tabs .attr-tab-content__copy p,
  #attr-symptoms #attr-main-tabs .attr-tab-content__copy li {
    font-size: 11px !important;
    line-height: 14px !important;
  }

  #attr-symptoms #attr-panel-heading .attr-redflags-panel__disclaimer {
    position: static !important;

    width: 100% !important;

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

    font-size: 10px !important;
    line-height: 13px !important;
    text-align: center !important;
    white-space: normal !important;
  }
}

/* =========================================================
   FINAL MOBILE RED-FLAGS LAYOUT — REFERENCE MATCH
   CSS only. Mobile body image source can be swapped later by JS.
   Keep this block at the absolute end of the stylesheet.
   ========================================================= */

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

  /* Main panel: heading / body+tabs / full-width content */
  #attr-symptoms #attr-body-figure {
    position: relative !important;

    display: grid !important;
    grid-template-columns: 104px minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto !important;

    column-gap: 10px !important;
    row-gap: 12px !important;

    width: calc(100% - 40px) !important;
    max-width: 320px !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 12px auto 28px !important;
    padding: 16px 14px 58px !important;

    box-sizing: border-box !important;
    overflow: hidden !important;

    border-radius: 22px !important;
    background-color: #001b45 !important;
    background-image:
      url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/Multiple%20Layers%20%282%29%20%283%29.png") !important;
    background-repeat: no-repeat !important;
    background-position: center top !important;
    background-size: cover !important;
  }

  /* ---------------------------------------------------------
     HEADING — full width at top
     --------------------------------------------------------- */
  #attr-symptoms #attr-body-figure > .text:has(#attr-panel-heading) {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;

    display: block !important;

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

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

  #attr-symptoms #attr-panel-heading,
  #attr-symptoms #attr-panel-heading .attr-redflags-panel {
    width: 100% !important;

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

  #attr-symptoms #attr-panel-heading .attr-redflags-panel__heading {
    width: 100% !important;
    max-width: 275px !important;

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

    font-size: 12px !important;
    line-height: 14px !important;
    text-align: center !important;
  }

  /* ---------------------------------------------------------
     BODY IMAGE — left side of the upper row
     --------------------------------------------------------- */
  #attr-symptoms #attr-body-figure > .text:has(#attr-body-image) {
    grid-column: 1 !important;
    grid-row: 2 !important;

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

    width: 104px !important;
    min-width: 104px !important;

    height: 200px !important;
    min-height: 200px !important;
    max-height: 200px !important;

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

    overflow: hidden !important;
  }

  #attr-symptoms #attr-body-image,
  #attr-symptoms #attr-redflags-figure {
    width: 104px !important;

    height: 200px !important;
    min-height: 200px !important;
    max-height: 200px !important;

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

    overflow: hidden !important;
  }

  #attr-symptoms #attr-body-image .attr-redflags-body__image {
    display: block !important;

    width: auto !important;
    height: 200px !important;

    max-width: 104px !important;
    max-height: 200px !important;

    margin: 0 auto !important;

    object-fit: contain !important;
    object-position: center top !important;
  }

  /* ---------------------------------------------------------
     Allow tab list and tab panel to become direct grid items.
     --------------------------------------------------------- */
  #attr-symptoms #attr-body-figure > .tabs,
  #attr-symptoms #attr-main-tabs {
    display: contents !important;
  }

  /* Vertical tabs — right side of upper row */
  #attr-symptoms #attr-main-tabs .cmp-tabs__tablist {
    grid-column: 2 !important;
    grid-row: 2 !important;

    display: flex !important;
    flex-direction: column !important;

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

    height: 200px !important;
    min-height: 200px !important;
    max-height: 200px !important;

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

    overflow: hidden !important;

    background: #ffffff !important;
    border-radius: 13px !important;
  }

  #attr-symptoms #attr-main-tabs .cmp-tabs__tab {
    flex: 1 1 20% !important;

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

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

    margin: 0 !important;
    padding: 5px 7px !important;

    box-sizing: border-box !important;

    font-size: 10px !important;
    line-height: 11px !important;
    text-align: center !important;

    border: 0 !important;
    border-bottom: 1px solid #d9dce8 !important;
    border-radius: 0 !important;
  }

  #attr-symptoms #attr-main-tabs .cmp-tabs__tab:last-child {
    border-bottom: 0 !important;
  }

  #attr-symptoms #attr-main-tabs .cmp-tabs__tab.cmp-tabs__tab--active {
    color: #ffffff !important;
    background-color: #637bff !important;
  }

  /* ---------------------------------------------------------
     ACTIVE CONTENT CARD — full width below body + tabs
     --------------------------------------------------------- */
  #attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;

    display: none !important;

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

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 14px 12px !important;

    box-sizing: border-box !important;
    overflow: hidden !important;

    color: #151515 !important;
    background: #ffffff !important;
    border-radius: 13px !important;
  }

  #attr-symptoms
    #attr-main-tabs
    .cmp-tabs__tabpanel.cmp-tabs__tabpanel--active {
    display: block !important;
  }

  #attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel .container,
  #attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel .responsivegrid,
  #attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel .cmp-container,
  #attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel .aem-Grid,
  #attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel .text,
  #attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel .cmp-text {
    width: 100% !important;
    min-width: 0 !important;

    height: auto !important;
    min-height: 0 !important;

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

  #attr-symptoms #attr-main-tabs .attr-tab-content {
    display: grid !important;
    grid-template-columns: 62px minmax(0, 1fr) !important;
    column-gap: 8px !important;
    align-items: start !important;

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

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

  #attr-symptoms #attr-main-tabs .attr-tab-content__image {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;

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

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

    overflow: visible !important;
  }

  #attr-symptoms #attr-main-tabs .attr-tab-content__image img {
    display: block !important;

    width: auto !important;
    height: auto !important;

    max-width: 58px !important;
    max-height: 88px !important;

    margin: 0 auto !important;

    object-fit: contain !important;
  }

  #attr-symptoms #attr-main-tabs .attr-tab-content__copy {
    width: 100% !important;
    min-width: 0 !important;

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

  #attr-symptoms #attr-main-tabs .attr-tab-content__copy h3 {
    margin: 0 0 7px !important;
    padding: 0 !important;

    font-size: 12px !important;
    line-height: 14px !important;
    text-align: left !important;
  }

  #attr-symptoms #attr-main-tabs .attr-tab-content__copy p,
  #attr-symptoms #attr-main-tabs .attr-tab-content__copy li {
    margin: 0 0 3px !important;

    font-size: 10px !important;
    line-height: 12px !important;
    text-align: left !important;
  }

  #attr-symptoms #attr-main-tabs .attr-tab-content__copy ul {
    margin: 0 !important;
    padding-left: 14px !important;
  }

  /* ---------------------------------------------------------
     DISCLAIMER — fixed to bottom of the blue panel
     --------------------------------------------------------- */
  #attr-symptoms #attr-panel-heading .attr-redflags-panel__disclaimer {
    position: absolute !important;
    left: 14px !important;
    right: 14px !important;
    bottom: 18px !important;

    width: auto !important;

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

    font-size: 9px !important;
    line-height: 11px !important;
    text-align: center !important;
    white-space: normal !important;
  }
}

/* =========================================================
   FINAL MOBILE PANEL BACKGROUND + DISCLAIMER FIX
   Keep this block at the absolute end of the stylesheet.
   ========================================================= */

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

  /* Use only the DAM image across the complete panel */
  #attr-symptoms #attr-body-figure {
    background-color: transparent !important;
    background-image:
      url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/container.png") !important;

    background-repeat: no-repeat !important;
    background-position: center center !important;

    /* Prevent the strange cropped patch visible in the screenshot */
    background-size: 100% 100% !important;

    /* Reserve space for the disclaimer at the bottom */
    padding-bottom: 62px !important;
  }

  /*
   * The disclaimer is authored inside the heading component.
   * Make its wrappers static so the disclaimer anchors to
   * #attr-body-figure rather than overlapping the heading.
   */
  #attr-symptoms #attr-panel-heading,
  #attr-symptoms #attr-panel-heading .attr-redflags-panel {
    position: static !important;
  }

  #attr-symptoms #attr-panel-heading .attr-redflags-panel__disclaimer {
    position: absolute !important;

    left: 16px !important;
    right: 16px !important;
    top: auto !important;
    bottom: 18px !important;

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

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

    color: #ffffff !important;
    font-size: 9px !important;
    line-height: 12px !important;
    text-align: center !important;
    white-space: normal !important;

    z-index: 5 !important;
  }
}


/* =========================================================
   FINAL STICKY SIDEBAR FIX
   Background and rounded card must stay on #attr-onthispage,
   because JavaScript moves that exact element while scrolling.
   KEEP THIS BLOCK AT THE VERY END OF THE FILE.
   ========================================================= */

/* Support the placeholder class created by the current JavaScript. */
#attr-symptoms .attr-sidebar-sticky-placeholder,
#attr-symptoms-section .attr-sidebar-sticky-placeholder,
#attr-symptoms .attr-otp-nav-placeholder,
#attr-symptoms-section .attr-otp-nav-placeholder {
  display: none;
  width: 224px;
  min-width: 224px;
  max-width: 224px;
  height: 304px;
  min-height: 304px;
  box-sizing: border-box;
}

@media screen and (min-width: 992px) {
  /*
   * AEM text component remains only as the grid wrapper.
   * Remove the card background from this stationary parent.
   */
  #attr-symptoms #attr-otp-nav,
  #attr-symptoms-section #attr-otp-nav {
    display: block !important;
    width: 224px !important;
    min-width: 224px !important;
    max-width: 224px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  /*
   * This is the element fixed by JavaScript, so the grey card,
   * dimensions, padding and rounded corner belong here.
   */
  #attr-symptoms #attr-onthispage,
  #attr-symptoms-section #attr-onthispage,
  #attr-symptoms #attr-otp-nav .attr-onthispage,
  #attr-symptoms-section #attr-otp-nav .attr-onthispage {
    display: flex !important;
    flex-direction: column !important;
    width: 224px !important;
    min-width: 224px !important;
    max-width: 224px !important;
    height: 304px !important;
    min-height: 304px !important;
    max-height: calc(100vh - 115px);
    margin: 0 !important;
    padding: 36px 17px 30px 29px !important;
    background-color: #E9EBF2 !important;
    border-radius: 0 0 25px 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 33, 95, 0.35) transparent;
  }

  #attr-symptoms #attr-onthispage::-webkit-scrollbar,
  #attr-symptoms-section #attr-onthispage::-webkit-scrollbar {
    width: 5px;
  }

  #attr-symptoms #attr-onthispage::-webkit-scrollbar-thumb,
  #attr-symptoms-section #attr-onthispage::-webkit-scrollbar-thumb {
    background: rgba(0, 33, 95, 0.35);
    border-radius: 10px;
  }

  #attr-symptoms #attr-onthispage .attr-onthispage__title,
  #attr-symptoms #attr-onthispage .attr-onthispage__link,
  #attr-symptoms-section #attr-onthispage .attr-onthispage__title,
  #attr-symptoms-section #attr-onthispage .attr-onthispage__link {
    background: transparent !important;
    box-sizing: border-box !important;
  }

  #attr-symptoms #attr-onthispage .attr-onthispage__title,
  #attr-symptoms-section #attr-onthispage .attr-onthispage__title {
    cursor: default !important;
  }

  #attr-symptoms #attr-onthispage .attr-onthispage__title::after,
  #attr-symptoms-section #attr-onthispage .attr-onthispage__title::after {
    content: none !important;
    display: none !important;
  }

  #attr-symptoms #attr-onthispage .attr-onthispage__link,
  #attr-symptoms-section #attr-onthispage .attr-onthispage__link {
    display: block !important;
  }
}

@media screen and (max-width: 991px) {
  /* Parent wrapper remains transparent on mobile/tablet. */
  #attr-symptoms #attr-otp-nav,
  #attr-symptoms-section #attr-otp-nav {
    background: transparent !important;
    border-radius: 0 !important;
  }

  /* Current JS adds mobile classes to #attr-onthispage. */
  #attr-symptoms #attr-onthispage,
  #attr-symptoms-section #attr-onthispage {
    position: static !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;
    border-radius: 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  #attr-symptoms #attr-onthispage.mobile-nav-enabled .attr-onthispage__link,
  #attr-symptoms-section #attr-onthispage.mobile-nav-enabled .attr-onthispage__link {
    display: none !important;
  }

  #attr-symptoms #attr-onthispage.mobile-nav-enabled.mobile-nav-open .attr-onthispage__link,
  #attr-symptoms-section #attr-onthispage.mobile-nav-enabled.mobile-nav-open .attr-onthispage__link {
    display: block !important;
  }

  #attr-symptoms #attr-onthispage.mobile-nav-open .attr-onthispage__title,
  #attr-symptoms-section #attr-onthispage.mobile-nav-open .attr-onthispage__title {
    border-radius: 12px 12px 0 0;
  }

  #attr-symptoms #attr-onthispage.mobile-nav-open .attr-onthispage__title::after,
  #attr-symptoms-section #attr-onthispage.mobile-nav-open .attr-onthispage__title::after {
    transform: translateY(-30%) rotate(225deg);
  }

  #attr-symptoms #attr-onthispage .attr-onthispage__link.is-active,
  #attr-symptoms #attr-onthispage .attr-onthispage__link[aria-current="true"],
  #attr-symptoms-section #attr-onthispage .attr-onthispage__link.is-active,
  #attr-symptoms-section #attr-onthispage .attr-onthispage__link[aria-current="true"] {
    border-bottom: 0 !important;

  }

  #attr-symptoms .attr-sidebar-sticky-placeholder,
  #attr-symptoms-section .attr-sidebar-sticky-placeholder,
  #attr-symptoms .attr-otp-nav-placeholder,
  #attr-symptoms-section .attr-otp-nav-placeholder {
    display: none !important;
  }
}
/* =========================================================
   FINAL FR MOBILE ALIGNMENT FIXES
   Added for:
   1. Red-flags heading vertical position
   2. Autonomic and QoL callout icon above centred text
   3. Mobile hero background aspect-ratio preservation
   4. Mobile item separators
   5. QoL ~30% card in row 3, centre column
   Keep this block at the absolute end of the stylesheet.
   ========================================================= */

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

  /* ---------------------------------------------------------
     1. MOVE THE RED-FLAGS HEADING DOWN
     --------------------------------------------------------- */

  #attr-symptoms #attr-body-figure > .text:has(#attr-panel-heading) {
    padding-top: 12px !important;
    margin-bottom: 8px !important;
  }

  #attr-symptoms #attr-panel-heading,
  #attr-symptoms #attr-panel-heading .attr-redflags-panel {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
  }

  #attr-symptoms #attr-panel-heading .attr-redflags-panel__heading {
    position: static !important;
    top: auto !important;
    transform: none !important;

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

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

    box-sizing: border-box !important;
    text-align: center !important;
  }


  /* ---------------------------------------------------------
     2. CALLOUTS: ICON TOP-CENTRE, TEXT BELOW
     Applies to autonomous and quality-of-life callouts.
     --------------------------------------------------------- */

  #attr-symptoms .attr-autonomic__callout,
  #attr-symptoms .attr-qol__callout {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 10px !important;

    width: calc(100% - 28px) !important;
    max-width: 328px !important;
    min-height: 178px !important;

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

    box-sizing: border-box !important;
    text-align: center !important;
  }

  #attr-symptoms .attr-autonomic__callout-icon,
  #attr-symptoms .attr-qol__callout-icon {
    display: block !important;
    flex: 0 0 auto !important;

    width: auto !important;
    height: auto !important;
    max-width: 44px !important;
    max-height: 48px !important;

    margin: 0 auto !important;

    object-fit: contain !important;
    object-position: center !important;
  }

  #attr-symptoms .attr-autonomic__callout-text,
  #attr-symptoms .attr-qol__callout-text {
    width: 100% !important;
    max-width: 276px !important;

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

    text-align: center !important;
    line-height: 18px !important;
  }


  /* ---------------------------------------------------------
     3. MOBILE HERO: PRESERVE IMAGE PROPORTIONS
     Do not stretch the starry image to 100% x 100%.
     --------------------------------------------------------- */

  #attr-symptoms .banner-img,
  #page-1a38cc0b2e .banner-img,
  .banner-img {
    height: 620px !important;
    min-height: 620px !important;
    max-height: 620px !important;

    background-repeat: no-repeat !important;
    background-position: center top !important;

    /*
     * Keeps the source image proportional.
     * Width is allowed to crop rather than distort.
     */
    background-size: auto 100% !important;
  }


  /* ---------------------------------------------------------
     4. MOBILE SEPARATORS
     Show a separator below every real item except the final
     real item in each list.
     --------------------------------------------------------- */

  #attr-symptoms .attr-autonomic__item,
  #attr-symptoms .attr-qol__item {
    position: relative !important;
  }

  #attr-symptoms
  .attr-autonomic__item:not(.attr-autonomic__item--last)::after,
  #attr-symptoms
  .attr-qol__item:not(.attr-qol__item--empty)::after {
    content: "" !important;
    display: block !important;

    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    width: 100% !important;
    height: 1px !important;

    background: #d9deec !important;
    border: 0 !important;
    pointer-events: none !important;
  }

  /* No separator under the final autonomous item */
  #attr-symptoms .attr-autonomic__item--last::after {
    content: none !important;
    display: none !important;
  }

  /*
   * QoL HTML order:
   * 1–6 real items, 7 empty placeholder,
   * 8 = ~30% real item, 9 empty placeholder.
   */
  #attr-symptoms .attr-qol__item:nth-child(8)::after,
  #attr-symptoms .attr-qol__item--empty::after {
    content: none !important;
    display: none !important;
  }


  /* ---------------------------------------------------------
     5. QoL ~30% CARD: THIRD ROW, CENTRE COLUMN
     --------------------------------------------------------- */

  #attr-symptoms .attr-qol__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  #attr-symptoms .attr-qol__item:nth-child(7) {
    display: block !important;
    visibility: hidden !important;
    grid-column: 1 !important;
    grid-row: 3 !important;
    min-height: 1px !important;
  }

  #attr-symptoms .attr-qol__item:nth-child(8) {
    display: grid !important;
    visibility: visible !important;
    grid-column: 2 !important;
    grid-row: 3 !important;
  }

  #attr-symptoms .attr-qol__item:nth-child(9) {
    display: block !important;
    visibility: hidden !important;
    grid-column: 3 !important;
    grid-row: 3 !important;
    min-height: 1px !important;
  }
}
/* =========================================================
   FINAL EN + FR CORRECTIONS
   1. Mobile hero uses a responsive aspect ratio instead of a
      forced 620px height.
   2. Disclaimer remains at the bottom of the red-flags panel.
   3. QoL ~30% item sits in the third-row middle column on
      desktop and mobile.
   Keep this block at the absolute end of the stylesheet.
   ========================================================= */

/* ---------------------------------------------------------
   QoL: third row, centre column — ALL VIEWPORTS
   --------------------------------------------------------- */

#attr-symptoms .attr-qol__grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

#attr-symptoms .attr-qol__item:nth-child(7) {
  display: block !important;
  visibility: hidden !important;
  grid-column: 1 !important;
  grid-row: 3 !important;
  min-height: 1px !important;
}

#attr-symptoms .attr-qol__item:nth-child(8) {
  display: grid !important;
  visibility: visible !important;
  grid-column: 2 !important;
  grid-row: 3 !important;
}

#attr-symptoms .attr-qol__item:nth-child(9) {
  display: block !important;
  visibility: hidden !important;
  grid-column: 3 !important;
  grid-row: 3 !important;
  min-height: 1px !important;
}


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

  /* -------------------------------------------------------
     1. MOBILE HERO — REMOVE FORCED HEIGHT / STRETCHING
     ------------------------------------------------------- */

  #attr-symptoms .banner-img,
  #page-1a38cc0b2e .banner-img,
  #attr-symptoms-section .banner-img {
    width: 100% !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    /*
     * Responsive image frame close to the source artwork shape.
     * The image remains proportional and crops only when needed.
     */
    aspect-ratio: 390 / 620 !important;

    background-repeat: no-repeat !important;
    background-position: center top !important;
    background-size: cover !important;

    box-sizing: border-box !important;
  }


  /* -------------------------------------------------------
     2. KEEP DISCLAIMER AT THE BOTTOM OF THE RED-FLAGS CARD
     Do not combine it with the heading.
     ------------------------------------------------------- */

  #attr-symptoms #attr-body-figure {
    position: relative !important;
    padding-bottom: 58px !important;
  }

  #attr-symptoms #attr-panel-heading,
  #attr-symptoms #attr-panel-heading .attr-redflags-panel {
    position: static !important;
  }

  #attr-symptoms
  #attr-panel-heading
  .attr-redflags-panel__disclaimer {
    position: absolute !important;

    left: 14px !important;
    right: 14px !important;
    bottom: 18px !important;

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

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

    box-sizing: border-box !important;

    color: #ffffff !important;
    text-align: center !important;
    white-space: normal !important;

    z-index: 5 !important;
  }


  /* -------------------------------------------------------
     3. MOBILE QoL GRID
     Keep 30% in third-row centre.
     ------------------------------------------------------- */

  #attr-symptoms .attr-qol__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  #attr-symptoms .attr-qol__item:nth-child(7) {
    grid-column: 1 !important;
    grid-row: 3 !important;
  }

  #attr-symptoms .attr-qol__item:nth-child(8) {
    grid-column: 2 !important;
    grid-row: 3 !important;
  }

  #attr-symptoms .attr-qol__item:nth-child(9) {
    grid-column: 3 !important;
    grid-row: 3 !important;
  }
}
/* =========================================================
   FINAL MOBILE QoL LAYOUT CORRECTION
   Keep the desktop 3-column layout unchanged.
   On mobile, return the QoL cards to a single vertical list
   like the autonomic symptom list.
   Keep this block at the absolute end of the stylesheet.
   ========================================================= */

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

  #attr-symptoms .attr-qol__grid {
    display: block !important;
    grid-template-columns: none !important;
  }

  #attr-symptoms .attr-qol__item,
  #attr-symptoms .attr-qol__item:nth-child(7),
  #attr-symptoms .attr-qol__item:nth-child(8),
  #attr-symptoms .attr-qol__item:nth-child(9) {
    display: grid !important;
    grid-template-columns: 82px minmax(0, 1fr) !important;
    grid-column: auto !important;
    grid-row: auto !important;

    align-items: center !important;
    column-gap: 14px !important;

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

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

    visibility: visible !important;
    box-sizing: border-box !important;
  }

  /* Hide only the authored empty placeholder rows */
  #attr-symptoms .attr-qol__item.attr-qol__item--empty {
    display: none !important;
    visibility: hidden !important;
    min-height: 0 !important;
    padding: 0 !important;
  }

  #attr-symptoms .attr-qol__icon-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 82px !important;
    min-width: 82px !important;
    height: 78px !important;

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

  #attr-symptoms .attr-qol__icon {
    display: block !important;

    width: auto !important;
    height: auto !important;
    max-width: 72px !important;
    max-height: 72px !important;

    margin: 0 auto !important;

    object-fit: contain !important;
    object-position: center !important;
  }

  #attr-symptoms .attr-qol__copy {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;

    min-width: 0 !important;

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

    text-align: left !important;
    box-sizing: border-box !important;
  }

  #attr-symptoms .attr-qol__value,
  #attr-symptoms .attr-qol__patients,
  #attr-symptoms .attr-qol__description {
    display: block !important;
    position: static !important;
    transform: none !important;

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

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

    white-space: normal !important;
    overflow: visible !important;
  }

  #attr-symptoms .attr-qol__value {
    font-size: 25px !important;
    line-height: 27px !important;
  }

  #attr-symptoms .attr-qol__patients {
    line-height: 17px !important;
  }

  #attr-symptoms .attr-qol__description {
    margin-top: 2px !important;
    line-height: 18px !important;
  }

  /* Divider below every real QoL item except the final real item */
  #attr-symptoms .attr-qol__item:not(.attr-qol__item--empty)::after {
    content: "" !important;
    display: block !important;

    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    width: 100% !important;
    height: 1px !important;

    background: #d9deec !important;
  }

  #attr-symptoms .attr-qol__item:nth-child(8)::after {
    content: none !important;
    display: none !important;
  }
}
/* =========================================================
   URGENT FINAL MOBILE FIXES
   1. Hero background uses native 390 x 309 ratio
   2. Red-flags disclaimer moves to the bottom of the dark panel
   Keep this block at the absolute end of the stylesheet.
   ========================================================= */

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

  /* -------------------------------------------------------
     1. HERO BACKGROUND — NATIVE 390 x 309 RATIO
     ------------------------------------------------------- */

  #attr-symptoms .banner-img,
  #page-1a38cc0b2e .banner-img,
  #attr-symptoms-section .banner-img {
    width: 100% !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    /* Native source ratio: 390 / 309 */
    aspect-ratio: 390 / 309 !important;

    background-repeat: no-repeat !important;
    background-position: center top !important;
    background-size: 100% auto !important;

    display: block !important;
    box-sizing: border-box !important;
  }

  /*
   * Prevent inner banner content from forcing the background
   * container taller than its native aspect ratio.
   */
  #attr-symptoms .banner-img > *,
  #page-1a38cc0b2e .banner-img > *,
  #attr-symptoms-section .banner-img > * {
    max-height: 100% !important;
  }


  /* -------------------------------------------------------
     2. DISCLAIMER — BOTTOM OF DARK RED-FLAGS PANEL
     ------------------------------------------------------- */

  #attr-symptoms #attr-body-figure {
    position: relative !important;

    /*
     * Reserve dedicated space below the white content panel
     * so the disclaimer sits at the bottom of the dark card.
     */
    padding-bottom: 64px !important;
  }

  #attr-symptoms
  #attr-panel-heading
  .attr-redflags-panel__disclaimer {
    position: absolute !important;

    left: 18px !important;
    right: 18px !important;
    bottom: 18px !important;
    top: auto !important;

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

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

    color: #ffffff !important;
    text-align: center !important;
    white-space: normal !important;

    transform: none !important;
    z-index: 10 !important;
  }

  /*
   * Ensure the heading area contains only the heading.
   */
  #attr-symptoms #attr-panel-heading,
  #attr-symptoms #attr-panel-heading .attr-redflags-panel {
    position: static !important;
    overflow: visible !important;
  }
}
/* =========================================================
   FINAL DISCLAIMER POSITION FIX — EN + FR
   The disclaimer is authored inside #attr-panel-heading.
   These rules make #attr-body-figure the positioning context
   so the disclaimer sits at the bottom of the dark panel.
   Keep this block at the absolute end of the stylesheet.
   ========================================================= */

#attr-symptoms #attr-body-figure {
  position: relative !important;
}

/*
 * Remove the positioning context from the heading wrappers.
 * Otherwise the absolutely positioned disclaimer remains
 * attached to the heading area at the top.
 */
#attr-symptoms
#attr-body-figure
> .text:has(#attr-panel-heading),
#attr-symptoms #attr-panel-heading,
#attr-symptoms #attr-panel-heading .attr-redflags-panel {
  position: static !important;
}

/* Keep only the main instruction text in the top heading area */
#attr-symptoms
#attr-panel-heading
.attr-redflags-panel__heading {
  position: static !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;

  margin: 0 auto !important;
  text-align: center !important;
}

/*
 * Position the disclaimer against #attr-body-figure,
 * below the white symptom panel.
 */
#attr-symptoms
#attr-panel-heading
.attr-redflags-panel__disclaimer {
  position: absolute !important;

  left: 20px !important;
  right: 20px !important;
  bottom: 14px !important;
  top: auto !important;

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

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

  box-sizing: border-box !important;

  color: #ffffff !important;
  font-family: "Kanit-Regular", Arial, sans-serif !important;
  font-size: 13px !important;
  line-height: 16px !important;
  text-align: center !important;
  white-space: normal !important;

  transform: none !important;
  z-index: 20 !important;
}

/* Reserve space for the disclaimer at the bottom */
@media screen and (min-width: 701px) {
  #attr-symptoms #attr-body-figure {
    padding-bottom: 52px !important;
  }
}

@media screen and (max-width: 700px) {
  #attr-symptoms #attr-body-figure {
    padding-bottom: 62px !important;
  }

  #attr-symptoms
  #attr-panel-heading
  .attr-redflags-panel__disclaimer {
    left: 16px !important;
    right: 16px !important;
    bottom: 16px !important;

    font-size: 12px !important;
    line-height: 15px !important;
  }
}

/* =========================================================
   FINAL TYPOGRAPHY + AUTONOMIC INTRO ALIGNMENT FIX
   KEEP THIS BLOCK AT THE ABSOLUTE END OF THE CSS FILE
   ========================================================= */


/* =========================================================
   1. RECOGNIZING RED FLAGS SUBHEADING
   Multi-systemic symptoms are a red flag for hATTR
   H3 Headlines: Kanit Regular, 20px
   ========================================================= */

#attr-symptoms
#attr-otp-heading
.attr-section-heading__subtitle {
  display: block !important;

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

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

  color: #00215f !important;

  font-family: "Kanit-Regular", "Kanit", Arial, sans-serif !important;
  font-size: 20px !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 24px !important;

  text-align: center !important;

  letter-spacing: 0 !important;
}


/* Keep the reference number regular as well */

#attr-symptoms
#attr-otp-heading
.attr-section-heading__subtitle sup {
  position: relative !important;
  top: -0.35em !important;

  font-family: "Kanit-Regular", "Kanit", Arial, sans-serif !important;
  font-size: 60% !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 0 !important;
}


/* =========================================================
   2. AUTONOMIC LEAD SUBHEADING
   AUTONOMIC SYMPTOMS ARE A HALLMARK...
   Kanit Medium, 20px, without browser-generated bold
   ========================================================= */

#attr-symptoms
.attr-autonomic__lead {
  display: block !important;

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

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

  box-sizing: border-box !important;

  color: #00215f !important;

  font-family: "Kanit-Medium", "Kanit", Arial, sans-serif !important;
  font-size: 20px !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 24px !important;

  text-align: center !important;
  text-transform: uppercase !important;
  letter-spacing: 0 !important;
}


/* Reference number must not become bold */

#attr-symptoms
.attr-autonomic__lead sup {
  position: relative !important;
  top: -0.35em !important;

  font-family: "Kanit-Regular", "Kanit", Arial, sans-serif !important;
  font-size: 60% !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 0 !important;
}


/* =========================================================
   3. AUTONOMIC EYEBROW SUBHEADING
   ROUTINELY ASSESSING AUTONOMIC DYSFUNCTION...
   H3 Headlines: Kanit Regular, 20px
   ========================================================= */

#attr-symptoms
.attr-autonomic__eyebrow {
  display: block !important;

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

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

  box-sizing: border-box !important;

  color: #00215f !important;

  font-family: "Kanit-Regular", "Kanit", Arial, sans-serif !important;
  font-size: 20px !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 24px !important;

  text-align: center !important;
  text-transform: uppercase !important;
  letter-spacing: 0 !important;

  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}


/* Remove bold from superscript 6 */

#attr-symptoms
.attr-autonomic__eyebrow sup {
  position: relative !important;
  top: -0.35em !important;

  font-family: "Kanit-Regular", "Kanit", Arial, sans-serif !important;
  font-size: 60% !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 0 !important;
}


/* =========================================================
   4. FIX CLUSTERED TEXT INSIDE AUTONOMIC CARD

   Validated tests and questionnaires assess...
   ========================================================= */

#attr-symptoms
.attr-autonomic__card
.attr-autonomic__intro {
  position: static !important;

  display: block !important;

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

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

  box-sizing: border-box !important;

  color: #00215f !important;

  font-family: "Kanit-Regular", "Kanit", Arial, sans-serif !important;
  font-size: 16px !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 20px !important;

  text-align: center !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  word-spacing: normal !important;

  white-space: normal !important;
  overflow: visible !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;

  flex: none !important;
  float: none !important;
  columns: auto !important;
  column-count: auto !important;
}


/* Remove bold from "multiple different domains" */

#attr-symptoms
.attr-autonomic__card
.attr-autonomic__intro b,
#attr-symptoms
.attr-autonomic__card
.attr-autonomic__intro strong {
  font-family: inherit !important;
  font-size: inherit !important;
  font-style: inherit !important;
  font-weight: 400 !important;
  line-height: inherit !important;
}


/* Keep reference 6–8 attached to the sentence */

#attr-symptoms
.attr-autonomic__card
.attr-autonomic__intro sup {
  position: relative !important;
  top: -0.35em !important;

  display: inline !important;

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

  font-family: "Kanit-Regular", "Kanit", Arial, sans-serif !important;
  font-size: 60% !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 0 !important;

  white-space: nowrap !important;
}


/* Prevent AEM wrappers from applying columns/flex splitting */

#attr-symptoms
.attr-autonomic__card {
  display: block !important;
}

#attr-symptoms
.attr-autonomic__card > .attr-autonomic__intro {
  grid-column: 1 / -1 !important;
}


/* =========================================================
   5. AUTONOMIC CALLOUT SUPERSCRIPT
   Remove bold only from reference 6
   ========================================================= */

#attr-symptoms
.attr-autonomic__callout-text sup {
  position: relative !important;
  top: -0.35em !important;

  font-family: "Kanit-Regular", "Kanit", Arial, sans-serif !important;
  font-size: 60% !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 0 !important;
}


/* =========================================================
   6. QUALITY-OF-LIFE SUBHEADING
   hATTR HAS A PROFOUND IMPACT...
   Kanit Medium, Regular appearance
   ========================================================= */

#attr-symptoms
.attr-qol__eyebrow {
  display: block !important;

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

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

  box-sizing: border-box !important;

  color: #00215f !important;

  font-family: "Kanit-Medium", "Kanit", Arial, sans-serif !important;
  font-size: 20px !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 24px !important;

  text-align: center !important;
  text-transform: uppercase !important;
  letter-spacing: 0 !important;

  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}


/* Quality-of-life superscript 9 must also remain regular */

#attr-symptoms
.attr-qol__eyebrow sup {
  position: relative !important;
  top: -0.35em !important;

  font-family: "Kanit-Regular", "Kanit", Arial, sans-serif !important;
  font-size: 60% !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 0 !important;
}


/* =========================================================
   TABLET
   ========================================================= */

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

  #attr-symptoms
  #attr-otp-heading
  .attr-section-heading__subtitle,
  #attr-symptoms
  .attr-autonomic__lead,
  #attr-symptoms
  .attr-autonomic__eyebrow,
  #attr-symptoms
  .attr-qol__eyebrow {
    width: calc(100% - 32px) !important;
    max-width: 760px !important;

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

    font-size: 20px !important;
    line-height: 24px !important;
  }

  #attr-symptoms
  .attr-autonomic__card
  .attr-autonomic__intro {
    width: 100% !important;
    max-width: 680px !important;

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

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


/* =========================================================
   MOBILE
   ========================================================= */

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

  #attr-symptoms
  #attr-otp-heading
  .attr-section-heading__subtitle,
  #attr-symptoms
  .attr-autonomic__lead,
  #attr-symptoms
  .attr-autonomic__eyebrow,
  #attr-symptoms
  .attr-qol__eyebrow {
    width: calc(100% - 32px) !important;
    max-width: none !important;

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

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

    white-space: normal !important;
    overflow-wrap: break-word !important;
  }

  #attr-symptoms
  .attr-autonomic__card
  .attr-autonomic__intro {
    display: block !important;

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

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

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

    text-align: center !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
  }
}

/* =========================================================
   FINAL AUTONOMIC BOLD + QOL SUPERSCRIPT + FOOTER RESTORE
   KEEP THIS BLOCK AT THE ABSOLUTE END OF THE CSS FILE
   ========================================================= */

/* ---------------------------------------------------------
   AUTONOMIC INTRO
   Keep normal text regular.
   --------------------------------------------------------- */

#attr-symptoms .attr-autonomic__card p.attr-autonomic__intro {
  display: block !important;
  position: static !important;

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

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

  box-sizing: border-box !important;

  color: #00215f !important;
  font-family: "Kanit-Regular", "Kanit", Arial, sans-serif !important;
  font-size: 16px !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 20px !important;

  text-align: center !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  word-spacing: normal !important;

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

/* Make only "multiple different domains" visibly bold. */
#attr-symptoms .attr-autonomic__card p.attr-autonomic__intro > b,
#attr-symptoms .attr-autonomic__card p.attr-autonomic__intro > strong,
#attr-symptoms .attr-autonomic__card .attr-autonomic__intro b,
#attr-symptoms .attr-autonomic__card .attr-autonomic__intro strong {
  display: inline !important;

  font-family: "Kanit-Bold", "Kanit-SemiBold", "Kanit", Arial, sans-serif !important;
  font-size: inherit !important;
  font-style: normal !important;
  font-weight: 700 !important;
  line-height: inherit !important;

  color: inherit !important;
}

/* Autonomic card reference 6–8. */
#attr-symptoms .attr-autonomic__card p.attr-autonomic__intro > sup,
#attr-symptoms .attr-autonomic__card .attr-autonomic__intro sup {
  display: inline !important;
  position: relative !important;

  top: -0.42em !important;
  vertical-align: baseline !important;

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

  font-family: "Kanit-Regular", "Kanit", Arial, sans-serif !important;
  font-size: 60% !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 0 !important;

  white-space: nowrap !important;
}

/* ---------------------------------------------------------
   QOL CARD TITLE
   "One study showed that:" with a real superscript 9.
   --------------------------------------------------------- */

#attr-symptoms .attr-qol__card p.attr-qol__card-title {
  display: block !important;
  position: static !important;

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

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

  box-sizing: border-box !important;

  color: #00215f !important;
  font-family: "Kanit-SemiBold", "Kanit", Arial, sans-serif !important;
  font-size: 16px !important;
  font-style: normal !important;
  font-weight: 600 !important;
  line-height: 20px !important;

  text-align: center !important;
}

/* Use native superscript alignment so 9 cannot sit on the baseline. */
#attr-symptoms .attr-qol__card p.attr-qol__card-title > sup,
#attr-symptoms .attr-qol__card .attr-qol__card-title sup {
  display: inline !important;
  position: static !important;

  top: auto !important;
  vertical-align: super !important;

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

  font-family: "Kanit-Regular", "Kanit", Arial, sans-serif !important;
  font-size: 60% !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 0 !important;

  white-space: nowrap !important;
}

/* ---------------------------------------------------------
   RESTORE REFERENCES / FOOTNOTES / FOOTER
   These rules intentionally preserve the earlier footer look.
   --------------------------------------------------------- */

#attr-symptoms .footer-strip {
  background: #000000 !important;
  color: #ffffff !important;

  font-family: "Kanit", Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 20px !important;

  text-align: left !important;
}

#attr-symptoms .footer-strip p {
  display: block !important;

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

  margin: 0 auto !important;
  padding: 20px 7px 0 0 !important;

  box-sizing: border-box !important;

  font-family: "Kanit", Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 20px !important;

  text-align: left !important;
  white-space: normal !important;
}

#attr-symptoms .footer-strip span {
  font-family: "Kanit-Bold", "Kanit", Arial, sans-serif !important;
  font-weight: 700 !important;
}

#attr-symptoms .footer-strip span.no-bold {
  font-family: "Kanit", Arial, sans-serif !important;
  font-weight: 400 !important;
}

#attr-symptoms .footer-strip span.no-breaking {
  white-space: nowrap !important;
}

#attr-symptoms .about-attr-reference a,
#attr-symptoms .footer-strip a,
#attr-symptoms .diagnosis-footer a {
  color: inherit !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  text-decoration: inherit !important;
}

/* Do not let section superscript rules affect footer/reference content. */
#attr-symptoms .footer-strip sup,
#attr-symptoms .diagnosis-footer sup,
#attr-symptoms .about-attr-reference sup {
  position: static !important;
  top: auto !important;
  vertical-align: super !important;

  font-family: inherit !important;
  font-size: 60% !important;
  font-weight: inherit !important;
  line-height: 0 !important;
}

/* Preserve the existing responsive footer spacing. */
@media screen and (max-width: 991px) {
  #attr-symptoms .footer-strip {
    padding: 15px !important;
  }

  #attr-symptoms .footer-strip p {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }
}

@media screen and (min-width: 992px) and (max-width: 1200px) {
  #attr-symptoms .footer-strip p {
    width: auto !important;
    max-width: 97% !important;
    margin: 0 15px !important;
    padding: 20px 0 0 !important;
  }
}

/* =========================================================
   FINAL CLEAN INTERNAL FOOTER + REFERENCES LAYOUT
   KEEP THIS SINGLE BLOCK AT THE ABSOLUTE END OF THE CSS FILE
   ========================================================= */

/* ---------------------------------------------------------
   Reset only the two AEM text components in this container.
   Do not alter the global website footer below this section.
   --------------------------------------------------------- */

#attr-symptoms #container-0d4b9a3a6b {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

#attr-symptoms #container-0d4b9a3a6b > .text,
#attr-symptoms #container-0d4b9a3a6b > .text > .cmp-text {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

/* =========================================================
   INTERNAL FOOTER BACKGROUND IMAGE
   ========================================================= */

#attr-symptoms #text-6d6939a24f,
#attr-symptoms #text-6d6939a24f.cmp-text {
  background: transparent !important;
}

#attr-symptoms .sec3-mainbg {
  position: relative !important;
  isolation: isolate !important;

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

  width: 100% !important;
  max-width: none !important;
  min-height: 303px !important;
  height: 303px !important;

  margin: 0 !important;
  padding: 34px 24px 72px !important;

  box-sizing: border-box !important;
  overflow: hidden !important;

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

#attr-symptoms .sec3-mainbg::before,
#attr-symptoms .sec3-mainbg::after {
  content: none !important;
  display: none !important;
}

/* =========================================================
   TWO FOOTER CARDS
   ========================================================= */

#attr-symptoms .sec3-mainbg > .patient-box,
#attr-symptoms .sec3-mainbg > .attr-footer-card {
  position: relative !important;
  z-index: 2 !important;

  display: block !important;
  flex: 0 1 460px !important;

  width: 460px !important;
  max-width: calc(50% - 10px) !important;
  min-width: 0 !important;

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

  box-sizing: border-box !important;
  transform: none !important;
}

#attr-symptoms .sec3-mainbg .image-shadow {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

#attr-symptoms .sec3-mainbg .border-box {
  position: relative !important;

  display: grid !important;
  grid-template-columns: 68px minmax(0, 1fr) !important;
  grid-template-rows: minmax(80px, auto) auto !important;
  align-items: center !important;

  column-gap: 16px !important;

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

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

  box-sizing: border-box !important;
  overflow: visible !important;

  background: #e9ebf2 !important;
  border: 1px solid #bfc8e6 !important;
  border-radius: 18px 18px 18px 0 !important;
}

#attr-symptoms .sec3-mainbg .smallbox-icon {
  grid-column: 1 !important;
  grid-row: 1 !important;

  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 58px !important;
  max-height: 66px !important;

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

  object-fit: contain !important;
}

#attr-symptoms .sec3-mainbg .smallbox-title {
  grid-column: 2 !important;
  grid-row: 1 !important;

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

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

  color: #151515 !important;
  background: transparent !important;

  font-family: "Kanit-Regular", "Kanit", Arial, sans-serif !important;
  font-size: 15px !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 18px !important;

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

#attr-symptoms .sec3-mainbg .smallbox-title sup {
  display: inline !important;
  position: relative !important;
  top: -0.38em !important;
  vertical-align: baseline !important;

  font-family: "Kanit-Regular", "Kanit", Arial, sans-serif !important;
  font-size: 60% !important;
  font-weight: 400 !important;
  line-height: 0 !important;
}

/* CTA sits centred across the complete card. */
#attr-symptoms .sec3-mainbg .cta-bottom-home {
  position: static !important;

  grid-column: 1 / -1 !important;
  grid-row: 2 !important;

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

  width: 100% !important;

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

  transform: none !important;
  z-index: 5 !important;
}

#attr-symptoms .sec3-mainbg .middle-bottom-cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: auto !important;
  min-width: 220px !important;
  max-width: 310px !important;
  min-height: 34px !important;

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

  box-sizing: border-box !important;

  color: #ffffff !important;
  background: #637bff !important;
  border: 0 !important;
  border-radius: 22px !important;

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

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

#attr-symptoms .sec3-mainbg .home-cta-1 .middle-bottom-cta {
  min-width: 270px !important;
}

/* =========================================================
   BLACK REFERENCES / FOOTNOTES BAND
   Content column is centred; copy remains left aligned.
   ========================================================= */

#attr-symptoms #text-002aaefa07,
#attr-symptoms #text-002aaefa07.cmp-text,
#attr-symptoms .container-about-attr-footer {
  display: block !important;

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

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

  box-sizing: border-box !important;
  overflow: visible !important;

  background: #000000 !important;
  color: #ffffff !important;
}

#attr-symptoms .about-attr-reference {
  display: block !important;

  width: calc(100% - 48px) !important;
  max-width: 1158px !important;
  height: auto !important;
  min-height: 0 !important;

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

  box-sizing: border-box !important;
  overflow: visible !important;

  background: transparent !important;
  color: #ffffff !important;

  font-family: "Kanit-Regular", "Kanit", Arial, sans-serif !important;
  font-size: 13px !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 17px !important;

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

#attr-symptoms .about-attr-reference p {
  display: block !important;

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

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

  color: #ffffff !important;
  background: transparent !important;

  font-family: "Kanit-Regular", "Kanit", Arial, sans-serif !important;
  font-size: 13px !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 17px !important;

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

/* Keep the authored blank line between abbreviations and References. */
#attr-symptoms .about-attr-reference br {
  display: block !important;
  content: "" !important;
  line-height: 17px !important;
}

/* Only the authored reference-bold spans are bold. */
#attr-symptoms .about-attr-reference .reference-bold {
  color: #ffffff !important;
  background: transparent !important;

  font-family: "Kanit-SemiBold", "Kanit", Arial, sans-serif !important;
  font-style: normal !important;
  font-weight: 600 !important;
}

/* Authored journal names remain italic. */
#attr-symptoms .about-attr-reference .reference-italic {
  color: #ffffff !important;
  background: transparent !important;

  font-family: "Kanit-Regular", "Kanit", Arial, sans-serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
}

#attr-symptoms .about-attr-reference a {
  color: inherit !important;
  background: transparent !important;

  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  text-decoration: inherit !important;
}

/* Do not globally make all descendants transparent—only these wrappers. */
#attr-symptoms .container-about-attr-footer,
#attr-symptoms .about-attr-reference,
#attr-symptoms .about-attr-reference p,
#attr-symptoms .about-attr-reference span {
  background-color: transparent !important;
}

/* =========================================================
   TABLET
   ========================================================= */

@media screen and (min-width: 701px) and (max-width: 992px) {
  #attr-symptoms .sec3-mainbg {
    gap: 16px !important;
    min-height: 285px !important;
    height: auto !important;
    padding: 30px 20px 72px !important;
  }

  #attr-symptoms .sec3-mainbg > .patient-box,
  #attr-symptoms .sec3-mainbg > .attr-footer-card {
    flex-basis: calc(50% - 8px) !important;
    width: calc(50% - 8px) !important;
    max-width: calc(50% - 8px) !important;
  }

  #attr-symptoms .sec3-mainbg .border-box {
    grid-template-columns: 54px minmax(0, 1fr) !important;
    column-gap: 10px !important;
    min-height: 142px !important;
    padding: 15px 14px 21px !important;
  }

  #attr-symptoms .sec3-mainbg .smallbox-icon {
    max-width: 48px !important;
    max-height: 58px !important;
  }

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

  #attr-symptoms .sec3-mainbg .middle-bottom-cta {
    min-width: 190px !important;
    max-width: 250px !important;
    font-size: 10px !important;
    white-space: normal !important;
  }

  #attr-symptoms .sec3-mainbg .home-cta-1 .middle-bottom-cta {
    min-width: 225px !important;
  }

  #attr-symptoms .about-attr-reference {
    width: calc(100% - 40px) !important;
    max-width: 900px !important;
    padding: 14px 0 18px !important;
    font-size: 12px !important;
    line-height: 16px !important;
  }

  #attr-symptoms .about-attr-reference p {
    font-size: 12px !important;
    line-height: 16px !important;
  }
}

/* =========================================================
   MOBILE
   ========================================================= */

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

    gap: 56px !important;

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

    padding: 28px 18px 120px !important;

    background-position: center bottom !important;
    background-size: cover !important;
  }

  #attr-symptoms .sec3-mainbg > .patient-box,
  #attr-symptoms .sec3-mainbg > .attr-footer-card {
    flex: none !important;

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

    margin: 0 auto !important;
  }

  #attr-symptoms .sec3-mainbg .border-box {
    grid-template-columns: 58px minmax(0, 1fr) !important;
    column-gap: 12px !important;

    min-height: 148px !important;
    padding: 17px 16px 22px !important;
  }

  #attr-symptoms .sec3-mainbg .smallbox-icon {
    max-width: 50px !important;
    max-height: 60px !important;
  }

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

  #attr-symptoms .sec3-mainbg .middle-bottom-cta {
    min-width: 210px !important;
    max-width: calc(100% - 20px) !important;
    white-space: normal !important;
  }

  #attr-symptoms .sec3-mainbg .home-cta-1 .middle-bottom-cta {
    min-width: 250px !important;
  }

  #attr-symptoms .about-attr-reference {
    width: calc(100% - 32px) !important;
    max-width: 600px !important;

    padding: 13px 0 17px !important;

    font-size: 11px !important;
    line-height: 15px !important;
  }

  #attr-symptoms .about-attr-reference p {
    font-size: 11px !important;
    line-height: 15px !important;
  }
}


/* =========================================================
   FINAL REFERENCES ALIGNMENT
   224px SIDEBAR + 14px GAP
   ========================================================= */

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

  #attr-symptoms .container-about-attr-footer{
      width:100% !important;
      max-width:none !important;
      background:#000 !important;
  }

  #attr-symptoms .about-attr-reference{

      width:auto !important;
      max-width:1000px !important;

      margin-top:0 !important;
      margin-bottom:0 !important;
      margin-left:calc((100% - 1250px)/2 + 238px) !important;
      margin-right:calc((100% - 1250px)/2 + 12px) !important;

      padding-top:14px !important;
      padding-bottom:18px !important;
      padding-left:0 !important;
      padding-right:0 !important;

      box-sizing:border-box !important;

      background:transparent !important;
      color:#fff !important;
      text-align:left !important;
  }

  #attr-symptoms .about-attr-reference p{
      margin:0 !important;
      padding:0 !important;
      text-align:left !important;
      color:#fff !important;
  }
}


/* =========================================================
   FINAL ISOLATED FOOTER CARD + REFERENCE ALIGNMENT
   This block deliberately scopes the cards and references
   separately so changing one cannot move the other.
   ========================================================= */

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

  /* -------------------------
     FOOTER IMAGE + TWO CARDS
     ------------------------- */

  #attr-symptoms #text-6d6939a24f .sec3-mainbg {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 20px !important;

    width: 100% !important;
    max-width: none !important;
    min-height: 303px !important;
    height: 303px !important;

    margin: 0 !important;

    padding-top: 34px !important;
    padding-right: calc((100% - 1250px) / 2 + 12px) !important;
    padding-bottom: 72px !important;
    padding-left: calc((100% - 1250px) / 2 + 238px) !important;

    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  #attr-symptoms #text-6d6939a24f .sec3-mainbg > .patient-box,
  #attr-symptoms #text-6d6939a24f .sec3-mainbg > .attr-footer-card {
    flex: 0 0 490px !important;

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

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

    box-sizing: border-box !important;
    transform: none !important;
  }

  #attr-symptoms #text-6d6939a24f .image-shadow {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #attr-symptoms #text-6d6939a24f .border-box {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  /* -------------------------
     REFERENCES ONLY
     ------------------------- */

  #attr-symptoms #text-002aaefa07,
  #attr-symptoms #text-002aaefa07 .container-about-attr-footer {
    width: 100% !important;
    max-width: none !important;

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

    background: #000000 !important;
  }

  #attr-symptoms #text-002aaefa07 .about-attr-reference {
    width: 1000px !important;
    max-width: 1000px !important;

    margin-top: 0 !important;
    margin-right: auto !important;
    margin-bottom: 0 !important;
    margin-left: calc((100% - 1250px) / 2 + 238px) !important;

    padding: 14px 0 18px !important;

    box-sizing: border-box !important;

    background: transparent !important;
    color: #ffffff !important;
    text-align: left !important;
  }

  #attr-symptoms #text-002aaefa07 .about-attr-reference p {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;

    color: #ffffff !important;
    text-align: left !important;
  }
}

/* =========================================================
   FINAL FR PAGE FIXES
   Added for:
   1. Preserve authored "LATTRh" casing
   2. Remove generated list bullets
   3. Align the two footer cards with the 238px content offset
   4. Keep mobile references on a black background
   KEEP THIS BLOCK AT THE ABSOLUTE END OF THE STYLESHEET.
   ========================================================= */

/* ---------------------------------------------------------
   1. PRESERVE AUTHORED FR CASING
   Prevent CSS from converting LATTRh into LATTRH.
   --------------------------------------------------------- */
#attr-symptoms .attr-autonomic__lead {
  text-transform: none !important;
}

/* Also preserve authored casing in related FR headings when required. */
html[lang="fr"] #attr-symptoms .attr-autonomic__lead {
  text-transform: none !important;
}

/* ---------------------------------------------------------
   2. REMOVE BULLET / MARKER STYLING
   Handles UL/LI markers and any CSS-generated pseudo bullets.
   --------------------------------------------------------- */
#attr-symptoms .attr-autonomic__card ul,
#attr-symptoms .attr-autonomic__grid,
#attr-symptoms .attr-autonomic__item,
#attr-symptoms .attr-autonomic__copy,
#attr-symptoms .attr-autonomic__name,
#attr-symptoms .attr-autonomic__description {
  list-style: none !important;
}

#attr-symptoms .attr-autonomic__card ul {
  margin-left: 0 !important;
  padding-left: 0 !important;
}

#attr-symptoms .attr-autonomic__item::marker,
#attr-symptoms .attr-autonomic__copy::marker,
#attr-symptoms .attr-autonomic__name::marker,
#attr-symptoms .attr-autonomic__description::marker {
  content: "" !important;
  font-size: 0 !important;
}

#attr-symptoms .attr-autonomic__item::before,
#attr-symptoms .attr-autonomic__copy::before,
#attr-symptoms .attr-autonomic__name::before,
#attr-symptoms .attr-autonomic__description::before {
  content: none !important;
  display: none !important;
}

/* ---------------------------------------------------------
   3. DESKTOP FOOTER CARDS
   490px + 20px + 490px = 1000px content width.
   The content begins after the 224px sidebar + 14px gap.
   --------------------------------------------------------- */
@media screen and (min-width: 1250px) {
  #attr-symptoms #text-6d6939a24f .sec3-mainbg,
  #attr-symptoms .sec3-mainbg {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 20px !important;

    width: 100% !important;
    max-width: none !important;
    min-height: 303px !important;
    height: 303px !important;

    margin: 0 !important;
    padding-top: 34px !important;
    padding-right: calc((100% - 1250px) / 2 + 12px) !important;
    padding-bottom: 72px !important;
    padding-left: calc((100% - 1250px) / 2 + 238px) !important;

    box-sizing: border-box !important;
    overflow: visible !important;
  }

  #attr-symptoms #text-6d6939a24f .sec3-mainbg > .patient-box,
  #attr-symptoms #text-6d6939a24f .sec3-mainbg > .attr-footer-card,
  #attr-symptoms .sec3-mainbg > .patient-box,
  #attr-symptoms .sec3-mainbg > .attr-footer-card {
    flex: 0 0 490px !important;
    width: 490px !important;
    min-width: 490px !important;
    max-width: 490px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    transform: none !important;
  }

  #attr-symptoms .sec3-mainbg .image-shadow,
  #attr-symptoms .sec3-mainbg .border-box {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* Keep CTA text completely inside the blue pill. */
  #attr-symptoms .sec3-mainbg .middle-bottom-cta {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: calc(100% - 36px) !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 38px !important;

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

    box-sizing: border-box !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    text-align: center !important;
    line-height: 16px !important;
  }

  #attr-symptoms .sec3-mainbg .home-cta-1 .middle-bottom-cta {
    width: calc(100% - 36px) !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}

/* ---------------------------------------------------------
   4. MOBILE REFERENCES
   Stop inherited white backgrounds from covering the text.
   --------------------------------------------------------- */
@media screen and (max-width: 700px) {
  #attr-symptoms #text-002aaefa07,
  #attr-symptoms #text-002aaefa07.cmp-text,
  #attr-symptoms #text-002aaefa07 .cmp-text,
  #attr-symptoms #text-002aaefa07 .container-about-attr-footer,
  #attr-symptoms #text-002aaefa07 .about-attr-reference,
  #attr-symptoms #text-002aaefa07 .about-attr-reference p,
  #attr-symptoms .container-about-attr-footer,
  #attr-symptoms .about-attr-reference,
  #attr-symptoms .about-attr-reference p {
    background: #000000 !important;
    background-color: #000000 !important;
  }

  #attr-symptoms #text-002aaefa07,
  #attr-symptoms #text-002aaefa07 *,
  #attr-symptoms .container-about-attr-footer,
  #attr-symptoms .container-about-attr-footer *,
  #attr-symptoms .about-attr-reference,
  #attr-symptoms .about-attr-reference * {
    color: #ffffff !important;
  }

  #attr-symptoms #text-002aaefa07 .about-attr-reference,
  #attr-symptoms .about-attr-reference {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 14px 16px 18px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  #attr-symptoms #text-002aaefa07 .about-attr-reference p,
  #attr-symptoms .about-attr-reference p {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 11px !important;
    line-height: 15px !important;
    text-align: left !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }
}

/* =========================================================
   FINAL FR TEXT CORRECTIONS — V2
   Keep this block at the absolute end of the stylesheet.
   ========================================================= */

/* ---------------------------------------------------------
   1. REMOVE THE LITERAL BULLET CHARACTERS FROM FR LABELS
   The bullets are actual characters inside the authored HTML,
   not UL/LI markers. Replace only the four affected labels.
   --------------------------------------------------------- */

html[lang="fr"] #attr-symptoms
.attr-autonomic__item:nth-child(1)
.attr-autonomic__name,

html[lang="fr"] #attr-symptoms
.attr-autonomic__item:nth-child(4)
.attr-autonomic__name,

html[lang="fr"] #attr-symptoms
.attr-autonomic__item:nth-child(5)
.attr-autonomic__name,

html[lang="fr"] #attr-symptoms
.attr-autonomic__item:nth-child(6)
.attr-autonomic__name {
  font-size: 0 !important;
  line-height: 0 !important;
}

/* Reinsert the same labels without the authored bullet character. */
html[lang="fr"] #attr-symptoms
.attr-autonomic__item:nth-child(1)
.attr-autonomic__name::after {
  content: "Intolérance orthostatique";
}

html[lang="fr"] #attr-symptoms
.attr-autonomic__item:nth-child(4)
.attr-autonomic__name::after {
  content: "Sexuel";
}

html[lang="fr"] #attr-symptoms
.attr-autonomic__item:nth-child(5)
.attr-autonomic__name::after {
  content: "Sécrétomoteur";
}

html[lang="fr"] #attr-symptoms
.attr-autonomic__item:nth-child(6)
.attr-autonomic__name::after {
  content: "Vasomoteur";
}

html[lang="fr"] #attr-symptoms
.attr-autonomic__item:nth-child(1)
.attr-autonomic__name::after,

html[lang="fr"] #attr-symptoms
.attr-autonomic__item:nth-child(4)
.attr-autonomic__name::after,

html[lang="fr"] #attr-symptoms
.attr-autonomic__item:nth-child(5)
.attr-autonomic__name::after,

html[lang="fr"] #attr-symptoms
.attr-autonomic__item:nth-child(6)
.attr-autonomic__name::after {
  display: inline !important;

  color: #6674c9 !important;
  font-family: "Kanit-SemiBold", "Kanit", Arial, sans-serif !important;
  font-size: 14px !important;
  font-style: normal !important;
  font-weight: 600 !important;
  line-height: 17px !important;

  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* Match the existing responsive label sizes. */
@media screen and (max-width: 992px) {
  html[lang="fr"] #attr-symptoms
  .attr-autonomic__item:nth-child(1)
  .attr-autonomic__name::after,

  html[lang="fr"] #attr-symptoms
  .attr-autonomic__item:nth-child(4)
  .attr-autonomic__name::after,

  html[lang="fr"] #attr-symptoms
  .attr-autonomic__item:nth-child(5)
  .attr-autonomic__name::after,

  html[lang="fr"] #attr-symptoms
  .attr-autonomic__item:nth-child(6)
  .attr-autonomic__name::after {
    font-size: 15px !important;
    line-height: 18px !important;
  }
}

@media screen and (max-width: 700px) {
  html[lang="fr"] #attr-symptoms
  .attr-autonomic__item:nth-child(1)
  .attr-autonomic__name::after,

  html[lang="fr"] #attr-symptoms
  .attr-autonomic__item:nth-child(4)
  .attr-autonomic__name::after,

  html[lang="fr"] #attr-symptoms
  .attr-autonomic__item:nth-child(5)
  .attr-autonomic__name::after,

  html[lang="fr"] #attr-symptoms
  .attr-autonomic__item:nth-child(6)
  .attr-autonomic__name::after {
    font-size: 13px !important;
    line-height: 16px !important;
  }
}

/* ---------------------------------------------------------
   2. PRESERVE THE LOWERCASE "h" IN L’ATTRh
   The HTML already contains the required casing; this prevents
   the stylesheet from converting the complete heading to uppercase.
   --------------------------------------------------------- */
html[lang="fr"] #attr-symptoms .attr-qol__eyebrow {
  text-transform: none !important;
}

/* Keep the autonomic FR lead casing authored in HTML as well. */
html[lang="fr"] #attr-symptoms .attr-autonomic__lead {
  text-transform: none !important;
}

/* =========================================================
   FINAL EN + FR hATTR CASING FIX — V3
   Keep this block at the absolute end of the stylesheet.
   ========================================================= */

/*
 * The eyebrow text already contains the correct authored casing:
 * EN: hATTR
 * FR: L’ATTRh
 *
 * Previous rules were applying text-transform: uppercase and changing
 * these to HATTR / L’ATTRH. Preserve the authored text for both languages.
 */
#attr-symptoms .attr-qol__eyebrow,
html[lang="en"] #attr-symptoms .attr-qol__eyebrow,
html[lang="fr"] #attr-symptoms .attr-qol__eyebrow {
  text-transform: none !important;
}

/* Preserve authored hATTR casing in the autonomic lead too. */
#attr-symptoms .attr-autonomic__lead,
html[lang="en"] #attr-symptoms .attr-autonomic__lead,
html[lang="fr"] #attr-symptoms .attr-autonomic__lead {
  text-transform: none !important;
}



/* =========================================================
   V4 - EN & FR FINAL POLISH
   ========================================================= */

/* 1. Preserve authored hATTR / ATTRh casing everywhere */
#attr-symptoms .attr-section-heading__subtitle,
#attr-symptoms .attr-autonomic__lead,
#attr-symptoms .attr-autonomic__eyebrow,
#attr-symptoms .attr-qol__eyebrow{
    text-transform:none !important;
}

/* 2. Add a little more breathing room */
#attr-symptoms .attr-autonomic,
#attr-symptoms .attr-qol{
    padding:44px 36px 52px !important;
}

/* Intro spacing */
#attr-symptoms .attr-autonomic__intro,
#attr-symptoms .attr-qol__card-title{
    margin-bottom:26px !important;
}

/* 3. Make Quality-of-life section light grey like autonomic */
#attr-symptoms .attr-qol{
    background:#f4f5f9 !important;
    border-radius:26px !important;
}

/* Slightly lighter autonomic background for consistency */
#attr-symptoms .attr-autonomic{
    background:#f4f5f9 !important;
    border-radius:26px !important;
}

/* Card padding */
#attr-symptoms .attr-autonomic__card,
#attr-symptoms .attr-qol__card{
    padding:20px 22px !important;
    box-sizing:border-box !important;
}

/* Grid breathing room */
#attr-symptoms .attr-autonomic__grid,
#attr-symptoms .attr-qol__grid{
    padding:8px 8px 12px !important;
}

/* Callout spacing */
#attr-symptoms .attr-autonomic__callout,
#attr-symptoms .attr-qol__callout{
    margin-top:30px !important;
}

/* Mobile */
@media (max-width:700px){

#attr-symptoms .attr-autonomic,
#attr-symptoms .attr-qol{
    padding:30px 18px 36px !important;
}

#attr-symptoms .attr-autonomic__card,
#attr-symptoms .attr-qol__card{
    padding:14px !important;
}

}

/* =========================================================
   V5 — FINAL EN + FR LAYOUT, BACKGROUND AND hATTR/ATTRh FIXES
   KEEP THIS BLOCK AT THE ABSOLUTE END OF THE STYLESHEET.
   ========================================================= */

/* ---------------------------------------------------------
   1. RESTORE AUTONOMIC SECTION TO WHITE AND CENTRE EVERYTHING
   --------------------------------------------------------- */
#attr-symptoms .attr-autonomic {
  position: relative !important;
  z-index: 1 !important;

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

  margin-left: auto !important;
  margin-right: auto !important;
  padding: 42px 24px 48px !important;

  box-sizing: border-box !important;
  background: #ffffff !important;
  border-radius: 0 !important;
  text-align: center !important;
}

#attr-symptoms .attr-autonomic__heading,
#attr-symptoms .attr-autonomic__lead,
#attr-symptoms .attr-autonomic__overview,
#attr-symptoms .attr-autonomic__divider,
#attr-symptoms .attr-autonomic__eyebrow,
#attr-symptoms .attr-autonomic__card,
#attr-symptoms .attr-autonomic__callout {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* More space around "Routinely assessing..." */
#attr-symptoms .attr-autonomic__eyebrow {
  width: 100% !important;
  max-width: 1001px !important;

  margin-top: 28px !important;
  margin-bottom: 18px !important;
  padding: 0 28px !important;

  box-sizing: border-box !important;
  text-align: center !important;
}

/* More inner padding for the autonomic white card */
#attr-symptoms .attr-autonomic__card {
  width: 100% !important;
  max-width: 1001px !important;

  margin-top: 0 !important;
  margin-bottom: 26px !important;
  padding: 28px 30px 30px !important;

  box-sizing: border-box !important;
}

/* ---------------------------------------------------------
   2. QUALITY-OF-LIFE: FULL-BLEED GREY BACKGROUND
   Content stays centred at the original 1001px width.
   --------------------------------------------------------- */
#attr-symptoms .attr-qol {
  position: relative !important;
  z-index: 1 !important;
  isolation: isolate !important;

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

  margin-left: auto !important;
  margin-right: auto !important;
  padding: 48px 24px 58px !important;

  box-sizing: border-box !important;
  background: transparent !important;
  border-radius: 0 !important;
  text-align: center !important;
}

/* Full viewport-width grey band without moving the inner content */
#attr-symptoms .attr-qol::before {
  content: "" !important;
  position: absolute !important;
  z-index: -1 !important;

  top: 0 !important;
  bottom: 0 !important;
  left: 50% !important;

  width: 100vw !important;
  transform: translateX(-50%) !important;

  background: #f4f5f9 !important;
  border-radius: 0 !important;
  pointer-events: none !important;
}

#attr-symptoms .attr-qol__heading,
#attr-symptoms .attr-qol__eyebrow,
#attr-symptoms .attr-qol__card,
#attr-symptoms .attr-qol__callout {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* More space around "hATTR has a profound impact..." */
#attr-symptoms .attr-qol__eyebrow {
  width: 100% !important;
  max-width: 1001px !important;

  margin-top: 18px !important;
  margin-bottom: 18px !important;
  padding: 0 28px !important;

  box-sizing: border-box !important;
  text-align: center !important;
}

/* More inner padding for the quality-of-life white card */
#attr-symptoms .attr-qol__card {
  width: 100% !important;
  max-width: 1001px !important;

  margin-top: 0 !important;
  margin-bottom: 28px !important;
  padding: 30px 32px 34px !important;

  box-sizing: border-box !important;
}

/* Keep both grids centred after the added padding */
#attr-symptoms .attr-autonomic__grid,
#attr-symptoms .attr-qol__grid {
  width: 100% !important;
  max-width: none !important;

  margin-left: auto !important;
  margin-right: auto !important;
  padding: 8px 0 12px !important;

  box-sizing: border-box !important;
}

/* ---------------------------------------------------------
   3. FORCE CORRECT ENGLISH hATTR TEXT
   The current HTML contains uppercase HATTR, so text-transform
   alone cannot selectively lowercase only the first letter.
   --------------------------------------------------------- */

/* Recognizing red flags subtitle */
html[lang="en"] #attr-symptoms .attr-section-heading__subtitle {
  font-size: 0 !important;
  line-height: 0 !important;
  text-transform: none !important;
}

html[lang="en"] #attr-symptoms .attr-section-heading__subtitle::before {
  content: "MULTI-SYSTEMIC SYMPTOMS ARE A RED FLAG FOR hATTR";
  display: inline !important;

  color: #00215f !important;
  font-family: "Kanit-Regular", "Kanit", Arial, sans-serif !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  line-height: 24px !important;
  text-transform: none !important;
}

/* Importance of autonomic dysfunction lead */
html[lang="en"] #attr-symptoms .attr-autonomic__lead {
  font-size: 0 !important;
  line-height: 0 !important;
  text-transform: none !important;
}

html[lang="en"] #attr-symptoms .attr-autonomic__lead::before {
  content: "AUTONOMIC SYMPTOMS ARE A HALLMARK OF hATTR, PRESENT IN ALMOST ALL MUTATIONS";
  display: inline !important;

  color: #00215f !important;
  font-family: "Kanit-Medium", "Kanit", Arial, sans-serif !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  line-height: 24px !important;
  text-transform: none !important;
}

/* Quality-of-life lead */
html[lang="en"] #attr-symptoms .attr-qol__eyebrow {
  font-size: 0 !important;
  line-height: 0 !important;
  text-transform: none !important;
}

html[lang="en"] #attr-symptoms .attr-qol__eyebrow::before {
  content: "hATTR HAS A PROFOUND IMPACT ON PATIENTS’ QUALITY OF LIFE";
  display: inline !important;

  color: #00215f !important;
  font-family: "Kanit-Medium", "Kanit", Arial, sans-serif !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  line-height: 24px !important;
  text-transform: none !important;
}

/* Restore authored superscript references after hiding original text */
html[lang="en"] #attr-symptoms .attr-section-heading__subtitle sup,
html[lang="en"] #attr-symptoms .attr-autonomic__lead sup,
html[lang="en"] #attr-symptoms .attr-qol__eyebrow sup {
  display: inline !important;
  position: relative !important;
  top: -0.35em !important;

  margin-left: 1px !important;

  font-family: "Kanit-Regular", "Kanit", Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 0 !important;
}

/* ---------------------------------------------------------
   4. FORCE CORRECT FRENCH ATTRh TEXT
   --------------------------------------------------------- */

/* Recognizing red flags subtitle */
html[lang="fr"] #attr-symptoms .attr-section-heading__subtitle {
  font-size: 0 !important;
  line-height: 0 !important;
  text-transform: none !important;
}

html[lang="fr"] #attr-symptoms .attr-section-heading__subtitle::before {
  content: "LES SYMPTÔMES MULTISYSTÉMIQUES SONT UN SIGNAL D’ALARME POUR L’ATTRh";
  display: inline !important;

  color: #00215f !important;
  font-family: "Kanit-Regular", "Kanit", Arial, sans-serif !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  line-height: 24px !important;
  text-transform: none !important;
}

/* Importance of autonomic dysfunction lead */
html[lang="fr"] #attr-symptoms .attr-autonomic__lead {
  font-size: 0 !important;
  line-height: 0 !important;
  text-transform: none !important;
}

html[lang="fr"] #attr-symptoms .attr-autonomic__lead::before {
  content: "LES SYMPTÔMES AUTONOMES SONT CARACTÉRISTIQUES DE L’ATTRh ET SONT PRÉSENTS DANS PRESQUE TOUTES LES MUTATIONS";
  display: inline !important;

  color: #00215f !important;
  font-family: "Kanit-Medium", "Kanit", Arial, sans-serif !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  line-height: 24px !important;
  text-transform: none !important;
}

/* Quality-of-life lead */
html[lang="fr"] #attr-symptoms .attr-qol__eyebrow {
  font-size: 0 !important;
  line-height: 0 !important;
  text-transform: none !important;
}

html[lang="fr"] #attr-symptoms .attr-qol__eyebrow::before {
  content: "L’ATTRh A DE PROFONDES RÉPERCUSSIONS SUR LA QUALITÉ DE VIE DES PATIENTS";
  display: inline !important;

  color: #00215f !important;
  font-family: "Kanit-Medium", "Kanit", Arial, sans-serif !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  line-height: 24px !important;
  text-transform: none !important;
}

html[lang="fr"] #attr-symptoms .attr-section-heading__subtitle sup,
html[lang="fr"] #attr-symptoms .attr-autonomic__lead sup,
html[lang="fr"] #attr-symptoms .attr-qol__eyebrow sup {
  display: inline !important;
  position: relative !important;
  top: -0.35em !important;

  margin-left: 1px !important;

  font-family: "Kanit-Regular", "Kanit", Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 0 !important;
}

/* ---------------------------------------------------------
   5. TABLET / MOBILE
   --------------------------------------------------------- */
@media screen and (max-width: 992px) {
  #attr-symptoms .attr-autonomic,
  #attr-symptoms .attr-qol {
    max-width: 100% !important;
    padding: 38px 20px 46px !important;
  }

  #attr-symptoms .attr-autonomic__eyebrow,
  #attr-symptoms .attr-qol__eyebrow {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  #attr-symptoms .attr-autonomic__card,
  #attr-symptoms .attr-qol__card {
    padding: 24px 20px 28px !important;
  }
}

@media screen and (max-width: 700px) {
  #attr-symptoms .attr-autonomic,
  #attr-symptoms .attr-qol {
    padding: 30px 16px 38px !important;
  }

  #attr-symptoms .attr-autonomic__eyebrow,
  #attr-symptoms .attr-qol__eyebrow {
    margin-top: 20px !important;
    margin-bottom: 14px !important;
    padding: 0 8px !important;
  }

  #attr-symptoms .attr-autonomic__card,
  #attr-symptoms .attr-qol__card {
    padding: 20px 14px 24px !important;
  }

  html[lang="en"] #attr-symptoms .attr-section-heading__subtitle::before,
  html[lang="en"] #attr-symptoms .attr-autonomic__lead::before,
  html[lang="en"] #attr-symptoms .attr-qol__eyebrow::before,
  html[lang="fr"] #attr-symptoms .attr-section-heading__subtitle::before,
  html[lang="fr"] #attr-symptoms .attr-autonomic__lead::before,
  html[lang="fr"] #attr-symptoms .attr-qol__eyebrow::before {
    font-size: 17px !important;
    line-height: 21px !important;
  }

  html[lang="en"] #attr-symptoms .attr-section-heading__subtitle sup,
  html[lang="en"] #attr-symptoms .attr-autonomic__lead sup,
  html[lang="en"] #attr-symptoms .attr-qol__eyebrow sup,
  html[lang="fr"] #attr-symptoms .attr-section-heading__subtitle sup,
  html[lang="fr"] #attr-symptoms .attr-autonomic__lead sup,
  html[lang="fr"] #attr-symptoms .attr-qol__eyebrow sup {
    font-size: 10px !important;
  }
}

/* =========================================================
   V6 — URGENT ALIGNMENT + DUPLICATE HEADING FIX
   KEEP THIS BLOCK AT THE ABSOLUTE END OF THE STYLESHEET.
   ========================================================= */

@media screen and (min-width: 993px) {
  #attr-symptoms .attr-autonomic,
  #attr-symptoms .attr-qol {
    width: 100% !important;
    max-width: 1250px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 238px !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }

  #attr-symptoms .attr-autonomic {
    padding-top: 42px !important;
    padding-bottom: 48px !important;
    background: #ffffff !important;
  }

  #attr-symptoms .attr-qol {
    padding-top: 48px !important;
    padding-bottom: 58px !important;
    background: transparent !important;
  }

  #attr-symptoms .attr-autonomic__heading,
  #attr-symptoms .attr-autonomic__lead,
  #attr-symptoms .attr-autonomic__overview,
  #attr-symptoms .attr-autonomic__divider,
  #attr-symptoms .attr-autonomic__eyebrow,
  #attr-symptoms .attr-autonomic__card,
  #attr-symptoms .attr-autonomic__callout,
  #attr-symptoms .attr-qol__heading,
  #attr-symptoms .attr-qol__eyebrow,
  #attr-symptoms .attr-qol__card,
  #attr-symptoms .attr-qol__callout {
    width: 100% !important;
    max-width: 1000px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }
}

#attr-symptoms .attr-section-heading__subtitle::before,
#attr-symptoms .attr-section-heading__subtitle::after {
  content: none !important;
  display: none !important;
}

html:lang(en) #attr-symptoms .attr-section-heading__subtitle,
html[lang^="en"] #attr-symptoms .attr-section-heading__subtitle,
html:lang(fr) #attr-symptoms .attr-section-heading__subtitle,
html[lang^="fr"] #attr-symptoms .attr-section-heading__subtitle {
  position: relative !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-transform: none !important;
}

html:lang(en) #attr-symptoms .attr-section-heading__subtitle::before,
html[lang^="en"] #attr-symptoms .attr-section-heading__subtitle::before {
  content: "MULTI-SYSTEMIC SYMPTOMS ARE A RED FLAG FOR hATTR" !important;
  display: inline !important;
  color: #00215f !important;
  font-family: "Kanit-Regular", "Kanit", Arial, sans-serif !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  line-height: 24px !important;
  text-transform: none !important;
}

html:lang(fr) #attr-symptoms .attr-section-heading__subtitle::before,
html[lang^="fr"] #attr-symptoms .attr-section-heading__subtitle::before {
  content: "LES SYMPTÔMES MULTISYSTÉMIQUES SONT UN SIGNAL D’ALARME POUR L’ATTRh" !important;
  display: inline !important;
  color: #00215f !important;
  font-family: "Kanit-Regular", "Kanit", Arial, sans-serif !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  line-height: 24px !important;
  text-transform: none !important;
}

#attr-symptoms .attr-section-heading__subtitle sup {
  display: inline !important;
  position: relative !important;
  top: -0.35em !important;
  margin-left: 1px !important;
  color: #00215f !important;
  font-family: "Kanit-Regular", "Kanit", Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 0 !important;
}

@media screen and (max-width: 992px) {
  #attr-symptoms .attr-autonomic,
  #attr-symptoms .attr-qol {
    max-width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

@media screen and (max-width: 700px) {
  #attr-symptoms .attr-autonomic,
  #attr-symptoms .attr-qol {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  html:lang(en) #attr-symptoms .attr-section-heading__subtitle::before,
  html[lang^="en"] #attr-symptoms .attr-section-heading__subtitle::before,
  html:lang(fr) #attr-symptoms .attr-section-heading__subtitle::before,
  html[lang^="fr"] #attr-symptoms .attr-section-heading__subtitle::before {
    font-size: 17px !important;
    line-height: 21px !important;
  }

  #attr-symptoms .attr-section-heading__subtitle sup {
    font-size: 10px !important;
  }
}

/* =========================================================
   FINAL V7 — REMOVE DUPLICATE SUBHEADING GENERATED BY CSS
   EN + FR
   KEEP THIS BLOCK AT THE ABSOLUTE END OF THE STYLESHEET.
   ========================================================= */

/*
 * The subtitle text is already authored correctly in the HTML:
 * EN: Multi-systemic symptoms are a red flag for hATTR
 * FR: equivalent authored ATTRh text
 *
 * Therefore, no CSS-generated replacement text is required.
 */

/* Remove every generated copy of the subtitle. */
#attr-symptoms .attr-section-heading__subtitle::before,
#attr-symptoms .attr-section-heading__subtitle::after,
html:lang(en) #attr-symptoms .attr-section-heading__subtitle::before,
html:lang(en) #attr-symptoms .attr-section-heading__subtitle::after,
html[lang^="en"] #attr-symptoms .attr-section-heading__subtitle::before,
html[lang^="en"] #attr-symptoms .attr-section-heading__subtitle::after,
html:lang(fr) #attr-symptoms .attr-section-heading__subtitle::before,
html:lang(fr) #attr-symptoms .attr-section-heading__subtitle::after,
html[lang^="fr"] #attr-symptoms .attr-section-heading__subtitle::before,
html[lang^="fr"] #attr-symptoms .attr-section-heading__subtitle::after {
  content: none !important;
  display: none !important;
}

/* Restore the real authored subtitle text. */
#attr-symptoms .attr-section-heading__subtitle,
html:lang(en) #attr-symptoms .attr-section-heading__subtitle,
html[lang^="en"] #attr-symptoms .attr-section-heading__subtitle,
html:lang(fr) #attr-symptoms .attr-section-heading__subtitle,
html[lang^="fr"] #attr-symptoms .attr-section-heading__subtitle {
  display: block !important;

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

  margin: 12px auto 16px !important;
  padding: 0 20px !important;

  box-sizing: border-box !important;

  color: #00215f !important;
  font-family: "Kanit-Regular", "Kanit", Arial, sans-serif !important;
  font-size: 20px !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 24px !important;

  text-align: center !important;
  text-transform: none !important;
  letter-spacing: 0 !important;

  white-space: normal !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
}

/* Keep the authored reference number visible and correctly positioned. */
#attr-symptoms .attr-section-heading__subtitle sup {
  display: inline !important;
  position: relative !important;
  top: -0.35em !important;

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

  color: inherit !important;
  font-family: "Kanit-Regular", "Kanit", Arial, sans-serif !important;
  font-size: 60% !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 0 !important;
}

/* ---------------------------------------------------------
   DESKTOP RIGHT-COLUMN ALIGNMENT
   224px sidebar + 14px gap = 238px.
   --------------------------------------------------------- */
@media screen and (min-width: 993px) {
  #attr-symptoms .attr-autonomic,
  #attr-symptoms .attr-qol {
    width: 100% !important;
    max-width: 1250px !important;

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

    padding-left: 238px !important;
    padding-right: 12px !important;

    box-sizing: border-box !important;
  }

  #attr-symptoms .attr-autonomic__heading,
  #attr-symptoms .attr-autonomic__lead,
  #attr-symptoms .attr-autonomic__overview,
  #attr-symptoms .attr-autonomic__divider,
  #attr-symptoms .attr-autonomic__eyebrow,
  #attr-symptoms .attr-autonomic__card,
  #attr-symptoms .attr-autonomic__callout,
  #attr-symptoms .attr-qol__heading,
  #attr-symptoms .attr-qol__eyebrow,
  #attr-symptoms .attr-qol__card,
  #attr-symptoms .attr-qol__callout {
    width: 100% !important;
    max-width: 1000px !important;

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

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

/* Tablet and mobile do not use the desktop sidebar offset. */
@media screen and (max-width: 992px) {
  #attr-symptoms .attr-autonomic,
  #attr-symptoms .attr-qol {
    max-width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  #attr-symptoms .attr-section-heading__subtitle {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

@media screen and (max-width: 700px) {
  #attr-symptoms .attr-autonomic,
  #attr-symptoms .attr-qol {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  #attr-symptoms .attr-section-heading__subtitle {
    margin-top: 10px !important;
    margin-bottom: 14px !important;

    padding-left: 12px !important;
    padding-right: 12px !important;

    font-size: 17px !important;
    line-height: 21px !important;
  }

  #attr-symptoms .attr-section-heading__subtitle sup {
    font-size: 60% !important;
  }
}

/* =========================================================
   FINAL V8 — RECOGNIZING RED FLAGS LINK COLOUR
   EN + FR
   KEEP THIS BLOCK AT THE ABSOLUTE END OF THE STYLESHEET.
   ========================================================= */

/*
 * Makes the linked underlined text use the same colour as the
 * surrounding sentence while preserving the underline.
 *
 * EN: Hereditary ATTR
 * FR: L’ATTR héréditaire
 */
#attr-symptoms #attr-otp-heading .attr-section-heading__body a,
#attr-symptoms #recognizing-red-flags .attr-section-heading__body a,
#attr-symptoms #attr-otp-heading .attr-section-heading__body a:link,
#attr-symptoms #recognizing-red-flags .attr-section-heading__body a:link,
#attr-symptoms #attr-otp-heading .attr-section-heading__body a:visited,
#attr-symptoms #recognizing-red-flags .attr-section-heading__body a:visited,
#attr-symptoms #attr-otp-heading .attr-section-heading__body a:hover,
#attr-symptoms #recognizing-red-flags .attr-section-heading__body a:hover,
#attr-symptoms #attr-otp-heading .attr-section-heading__body a:focus,
#attr-symptoms #recognizing-red-flags .attr-section-heading__body a:focus,
#attr-symptoms #attr-otp-heading .attr-section-heading__body a:active,
#attr-symptoms #recognizing-red-flags .attr-section-heading__body a:active {
  color: #151515 !important;
  background: transparent !important;

  font-family: inherit !important;
  font-size: inherit !important;
  font-style: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;

  text-decoration-line: underline !important;
  text-decoration-color: #151515 !important;
  text-decoration-thickness: auto !important;
  text-underline-offset: 2px !important;

  outline-color: currentColor;
}

/* The authored HTML contains a nested <u>; keep it black too. */
#attr-symptoms #attr-otp-heading .attr-section-heading__body a u,
#attr-symptoms #recognizing-red-flags .attr-section-heading__body a u {
  color: #151515 !important;
  background: transparent !important;

  font-family: inherit !important;
  font-size: inherit !important;
  font-style: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;

  text-decoration-line: underline !important;
  text-decoration-color: #151515 !important;
  text-underline-offset: 2px !important;
}



/* FINAL LIGHTBULB IMAGE OVERRIDE */
#attr-symptoms .bulb,
#attr-symptoms .callout-icon,
#attr-symptoms [class*="bulb"],
#attr-symptoms [class*="callout-icon"]{
 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;
 color:transparent !important;
 font-size:0 !important;
 text-indent:-9999px !important;
 overflow:hidden !important;
}
#attr-symptoms .bulb::before,
#attr-symptoms .bulb::after,
#attr-symptoms .callout-icon::before,
#attr-symptoms .callout-icon::after,
#attr-symptoms [class*="bulb"]::before,
#attr-symptoms [class*="bulb"]::after,
#attr-symptoms [class*="callout-icon"]::before,
#attr-symptoms [class*="callout-icon"]::after{
 content:none !important;
 display:none !important;
}


/* ==========================================================================
   FINAL AUTONOMIC CARD BOTTOM-SPACING + ITALIC "ALL"
   Keep this block at the absolute end of the stylesheet.
   ========================================================================== */

/* Reduce only the empty space below the final Pupillomotor row. */
#attr-symptoms .attr-autonomic__card {
  height: auto !important;
  min-height: 0 !important;
  padding-bottom: 14px !important;
}

#attr-symptoms .attr-autonomic__grid {
  height: auto !important;
  min-height: 0 !important;
  padding-bottom: 0 !important;
  align-content: start !important;
}

#attr-symptoms .attr-autonomic__item--last {
  min-height: 84px !important;
  padding-top: 6px !important;
  padding-bottom: 2px !important;
  align-self: start !important;
}

/* Preserve the centred third-row placement on desktop. */
@media screen and (min-width: 993px) {
  #attr-symptoms .attr-autonomic__item--last {
    grid-column: 2 !important;
  }
}

/* Tablet/mobile already use a single-column list. */
@media screen and (max-width: 992px) {
  #attr-symptoms .attr-autonomic__card {
    padding-bottom: 12px !important;
  }

  #attr-symptoms .attr-autonomic__item--last {
    grid-column: auto !important;
    min-height: 86px !important;
    padding-top: 6px !important;
    padding-bottom: 4px !important;
  }
}

/*
 * Wrap only the word ALL in <em>...</em>.
 * Example:
 * ... PRESENT IN ALMOST <em>ALL</em> MUTATIONS<sup>6</sup>
 */
#attr-symptoms .attr-autonomic__lead em,
#attr-symptoms .attr-autonomic__eyebrow em {
  font-family: inherit !important;
  font-size: inherit !important;
  font-style: italic !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  text-transform: inherit !important;
}


/* ==========================================================================
   FINAL AUTONOMIC + QUALITY-OF-LIFE CARD SPACING
   Keep this block at the absolute end of the stylesheet.
   ========================================================================== */

/* The authored heading uses <i>ALL</i>. */
#attr-symptoms .attr-autonomic__lead i {
  font-family: inherit !important;
  font-size: inherit !important;
  font-style: italic !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  text-transform: inherit !important;
}

/* ----------------------------------------------------------
   QUALITY-OF-LIFE CARD
   Reduce the empty area below the centred ~30% final item.
   ---------------------------------------------------------- */

#attr-symptoms .attr-qol__card {
  height: auto !important;
  min-height: 0 !important;
  padding-bottom: 14px !important;
}

#attr-symptoms .attr-qol__grid {
  height: auto !important;
  min-height: 0 !important;
  padding-bottom: 0 !important;
  align-content: start !important;
}

/*
 * The final desktop row contains:
 * empty placeholder | ~30% item | empty placeholder.
 * Reduce the height of all three cells equally so the item stays centred.
 */
#attr-symptoms .attr-qol__grid > .attr-qol__item:nth-last-child(-n + 3) {
  min-height: 88px !important;
  padding-top: 6px !important;
  padding-bottom: 2px !important;
  align-self: start !important;
}

/* Empty placeholders must reserve only the reduced final-row height. */
#attr-symptoms .attr-qol__item--empty {
  min-height: 88px !important;
  padding: 0 !important;
  border-bottom: 0 !important;
}

/* Keep the actual ~30% item in the middle desktop column. */
@media screen and (min-width: 993px) {
  #attr-symptoms .attr-qol__grid > .attr-qol__item:nth-last-child(2) {
    grid-column: 2 !important;
  }
}

/* On tablet/mobile, empty placeholders are not needed. */
@media screen and (max-width: 992px) {
  #attr-symptoms .attr-qol__card {
    padding-bottom: 12px !important;
  }

  #attr-symptoms .attr-qol__item--empty {
    display: none !important;
  }

  #attr-symptoms .attr-qol__grid > .attr-qol__item:nth-last-child(2) {
    grid-column: auto !important;
    min-height: 90px !important;
    padding-top: 6px !important;
    padding-bottom: 4px !important;
  }
}


/* ==========================================================================
   USE AEM HTML FOR AUTONOMIC LEAD TEXT
   Disable the CSS-generated heading text.
   ========================================================================== */

#attr-symptoms .attr-autonomic__lead::before,
.attr-autonomic__lead::before {
    content: none !important;
    display: none !important;
}


/* ==========================================================================
   FINAL FIX - USE AEM HTML FOR AUTONOMIC LEAD
   ========================================================================== */

/* Disable generated heading text */
#attr-symptoms .attr-autonomic__lead::before,
.attr-autonomic__lead::before{
    content:none !important;
    display:none !important;
}

/* Restore the authored HTML text */
#attr-symptoms .attr-autonomic__lead,
html[lang="en"] #attr-symptoms .attr-autonomic__lead,
html[lang="fr"] #attr-symptoms .attr-autonomic__lead{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;

    font-size:20px !important;
    line-height:1.35 !important;
    
    color:#072b6b !important;

    text-align:center !important;
   
    margin:0 0 12px !important;
    padding:0 !important;

    text-indent:0 !important;
    overflow:visible !important;
    white-space:normal !important;
}

/* Italic only for ALL */
#attr-symptoms .attr-autonomic__lead i{
    font-style:italic !important;
    font-weight:inherit !important;
    font-size:inherit !important;
    line-height:inherit !important;
}

#attr-symptoms .attr-autonomic__soft-separator img {
    width: 620px;
    max-width: 100%;
    display: block;
    margin: 0 auto;
}


/* =========================================================
   ATTR SYMPTOMS HERO — 350px TO 410px FINAL FIX
   Prevents the final “DIAGNOSIS” line from being clipped.
   Keep this block at the absolute end of the stylesheet.
   ========================================================= */
@media screen and (min-width: 350px) and (max-width: 410px) {

  /* Allow the mobile hero to grow with its text content. */
  #attr-symptoms .banner-img,
  #page-1a38cc0b2e .banner-img,
  #attr-symptoms-section .banner-img {
    width: 100% !important;
    height: auto !important;
    min-height: 360px !important;
    max-height: none !important;
    aspect-ratio: auto !important;

    display: block !important;
    overflow: hidden !important;
    box-sizing: border-box !important;

    background-repeat: no-repeat !important;
    background-position: center top !important;
    background-size: cover !important;
  }

  /* Remove the earlier max-height restriction from hero children. */
  #attr-symptoms .banner-img > *,
  #page-1a38cc0b2e .banner-img > *,
  #attr-symptoms-section .banner-img > * {
    height: auto !important;
    max-height: none !important;
  }

  /* Position the hero copy safely below the mobile header. */
  #attr-symptoms .banner-img .banner-block,
  #page-1a38cc0b2e .banner-img .banner-block,
  #attr-symptoms-section .banner-img .banner-block {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  /* Introductory heading. */
  #attr-symptoms .banner-txt1,
  #page-1a38cc0b2e .banner-txt1,
  #attr-symptoms-section .banner-txt1 {
    width: 100% !important;
    margin: 0 0 14px !important;
    padding: 0 !important;

    font-size: 12px !important;
    line-height: 15px !important;
    text-align: left !important;
    white-space: normal !important;
  }

  /* Main hero heading. */
  #attr-symptoms .banner-txt2,
  #page-1a38cc0b2e .banner-txt2,
  #attr-symptoms-section .banner-txt2 {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;

    font-size: clamp(25px, 7vw, 28px) !important;
    line-height: 1.16 !important;
    letter-spacing: -0.2px !important;
    text-align: left !important;

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

  /* Keep the reference number aligned with the final line. */
  #attr-symptoms .banner-txt2 sup,
  #page-1a38cc0b2e .banner-txt2 sup,
  #attr-symptoms-section .banner-txt2 sup {
    position: relative !important;
    top: -0.25em !important;
    font-size: 55% !important;
    line-height: 0 !important;
    vertical-align: baseline !important;
  }
}


/* ========================================================================
   ATTR SYMPTOMS — DESKTOP RED-FLAGS TABS: XD REFERENCE MATCH
   EN + FR

   Fixes:
   - Removes the fixed height/min-height that creates excessive white space.
   - Lets every tab panel grow from its own image/text content.
   - Keeps the five tabs aligned as one row.
   - Aligns the bottom disclaimer with the left edge of the tab/table area.
   - Does not change the mobile layout below 701px.
   Keep this block at the ABSOLUTE END of the stylesheet.
   ======================================================================== */

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

  /* ---------------------------------------------------------
     OUTER DARK PANEL
     --------------------------------------------------------- */
  #attr-symptoms #attr-body-figure {
    position: relative !important;
    height: auto !important;
    min-height: 470px !important;
    max-height: none !important;
    padding-bottom: 52px !important;
    overflow: hidden !important;
  }

  /* Tabs should size from their real content rather than stretching. */
  #attr-symptoms #attr-body-figure > .tabs,
  #attr-symptoms #attr-main-tabs {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    align-self: start !important;
    overflow: visible !important;
  }

  /* ---------------------------------------------------------
     TAB ROW
     --------------------------------------------------------- */
  #attr-symptoms #attr-main-tabs .cmp-tabs__tablist {
    display: grid !important;
    grid-template-columns:
      1.05fr
      1.05fr
      1.25fr
      1.35fr
      0.95fr !important;

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

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

    overflow: hidden !important;
    background: #ffffff !important;
    border-radius: 14px !important;
  }

  #attr-symptoms #attr-main-tabs .cmp-tabs__tab {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

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

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

    box-sizing: border-box !important;
    border: 0 !important;
    border-radius: 0 !important;

    color: #00215f !important;
    background: #ffffff !important;

    font-family: "Kanit-SemiBold", Kanit, Arial, sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 15px !important;
    text-align: center !important;
    text-transform: uppercase !important;
    white-space: normal !important;
  }

  #attr-symptoms #attr-main-tabs .cmp-tabs__tab:first-child {
    border-radius: 14px 0 0 14px !important;
  }

  #attr-symptoms #attr-main-tabs .cmp-tabs__tab:last-child {
    border-radius: 0 14px 14px 0 !important;
  }

  #attr-symptoms #attr-main-tabs .cmp-tabs__tab.cmp-tabs__tab--active {
    color: #ffffff !important;
    background: #637bff !important;
  }

  /* ---------------------------------------------------------
     ACTIVE WHITE CONTENT PANEL
     The previous fixed 258px/286px height caused empty padding.
     --------------------------------------------------------- */
  #attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel {
    display: none !important;

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

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

    box-sizing: border-box !important;
    overflow: visible !important;

    color: #151515 !important;
    background: #ffffff !important;
    border-radius: 14px !important;
  }

  #attr-symptoms
  #attr-main-tabs
  .cmp-tabs__tabpanel.cmp-tabs__tabpanel--active {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  /* Remove height/padding inherited from generated AEM wrappers. */
  #attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel .container,
  #attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel .responsivegrid,
  #attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel .cmp-container,
  #attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel .aem-Grid,
  #attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel .aem-GridColumn,
  #attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel .text,
  #attr-symptoms #attr-main-tabs .cmp-tabs__tabpanel .cmp-text {
    width: 100% !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;
  }

  /* Two-column image and text layout. */
  #attr-symptoms #attr-main-tabs .attr-tab-content {
    display: grid !important;
    grid-template-columns: 170px minmax(0, 1fr) !important;
    column-gap: 22px !important;
    align-items: center !important;

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

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

    box-sizing: border-box !important;
  }

  #attr-symptoms #attr-main-tabs .attr-tab-content__image {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

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

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

    overflow: visible !important;
    box-sizing: border-box !important;
  }

  #attr-symptoms #attr-main-tabs .attr-tab-content__image img {
    display: block !important;
    width: auto !important;
    height: auto !important;

    margin: 0 auto !important;

    object-fit: contain !important;
    object-position: center !important;
  }

  /* Match the different image proportions shown in XD. */
  #attr-symptoms #attr-main-tabs .attr-tab-content--autonomic
  .attr-tab-content__image img {
    max-width: 150px !important;
    max-height: 238px !important;
  }

  #attr-symptoms #attr-main-tabs .attr-tab-content--peripheral
  .attr-tab-content__image img {
    max-width: 165px !important;
    max-height: 125px !important;
  }

  #attr-symptoms #attr-main-tabs .attr-tab-content--cardiac
  .attr-tab-content__image img {
    max-width: 170px !important;
    max-height: 238px !important;
  }

  #attr-symptoms #attr-main-tabs .attr-tab-content--musculoskeletal
  .attr-tab-content__image img {
    max-width: 105px !important;
    max-height: 194px !important;
  }

  #attr-symptoms #attr-main-tabs .attr-tab-content--nephropathy
  .attr-tab-content__image img {
    max-width: 170px !important;
    max-height: 126px !important;
  }

  /* Content typography and compact vertical rhythm. */
  #attr-symptoms #attr-main-tabs .attr-tab-content__copy {
    align-self: center !important;
    width: 100% !important;
    min-width: 0 !important;

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

    text-align: left !important;
  }

  #attr-symptoms #attr-main-tabs .attr-tab-content__copy h3 {
    margin: 0 0 10px !important;
    padding: 0 !important;

    color: #00215f !important;
    font-family: "Kanit-SemiBold", Kanit, Arial, sans-serif !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    line-height: 21px !important;
    text-align: left !important;
  }

  #attr-symptoms #attr-main-tabs .attr-tab-content__copy h3 sup {
    position: relative !important;
    top: -0.35em !important;

    font-family: "Kanit-Regular", Kanit, Arial, sans-serif !important;
    font-size: 60% !important;
    font-weight: 400 !important;
    line-height: 0 !important;
  }

  #attr-symptoms #attr-main-tabs .attr-tab-content__copy p,
  #attr-symptoms #attr-main-tabs .attr-tab-content__copy li {
    margin: 0 0 5px !important;
    padding: 0 !important;

    color: #151515 !important;
    font-family: "Kanit-Regular", Kanit, Arial, sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 20px !important;
    text-align: left !important;
  }

  #attr-symptoms #attr-main-tabs .attr-tab-content__copy p:last-child,
  #attr-symptoms #attr-main-tabs .attr-tab-content__copy li:last-child {
    margin-bottom: 0 !important;
  }

  #attr-symptoms #attr-main-tabs .attr-tab-content__copy ul {
    margin: 0 !important;
    padding-left: 18px !important;
  }

  /* ---------------------------------------------------------
     DISCLAIMER
     Align its start with the white table/tab area, not the
     silhouette column and not the centre of the dark panel.
     --------------------------------------------------------- */
  #attr-symptoms #attr-panel-heading,
  #attr-symptoms #attr-panel-heading .attr-redflags-panel {
    position: static !important;
    overflow: visible !important;
  }

  #attr-symptoms
  #attr-panel-heading
  .attr-redflags-panel__disclaimer {
    position: absolute !important;
    top: auto !important;
    bottom: 16px !important;

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

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

    color: #ffffff !important;
    font-family: "Kanit-Regular", Kanit, Arial, sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 16px !important;
    text-align: left !important;
    white-space: normal !important;

    transform: none !important;
    z-index: 20 !important;
  }
}

/* Exact disclaimer alignment for the desktop grid:
   panel padding 20px + silhouette 220px + gap 18px = 258px. */
@media screen and (min-width: 992px) {
  #attr-symptoms
  #attr-panel-heading
  .attr-redflags-panel__disclaimer {
    left: 258px !important;
    right: 20px !important;
  }
}

/* Tablet grid:
   panel padding 16px + silhouette 190px + gap 18px = 224px. */
@media screen and (min-width: 701px) and (max-width: 991px) {
  #attr-symptoms
  #attr-panel-heading
  .attr-redflags-panel__disclaimer {
    left: 224px !important;
    right: 16px !important;
  }
}

/* ==========================================================================
   FINAL DESKTOP QOL TEXT-ROW ALIGNMENT — EN + FR
   Feedback fix: percentages, "of patients", and descriptions in each
   three-column row start on the same horizontal line.
   Mobile/tablet (992px and below) are intentionally unchanged.
   Keep this block at the absolute end of the stylesheet.
   ========================================================================== */

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

  /* Make every column fill the complete shared grid-row height. */
  #attr-symptoms .attr-qol__grid {
    align-items: stretch !important;
  }

  #attr-symptoms .attr-qol__item {
    align-self: stretch !important;
  }

  /*
   * The previous centre alignment vertically centred each copy block.
   * Items with longer descriptions therefore started higher than items
   * with shorter descriptions. Start every copy block at the row top.
   */
  #attr-symptoms .attr-qol__item .attr-qol__copy {
    align-self: start !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Keep all three text lines flush and consistent in every card. */
  #attr-symptoms .attr-qol__item .attr-qol__value,
  #attr-symptoms .attr-qol__item .attr-qol__patients,
  #attr-symptoms .attr-qol__item .attr-qol__description {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
  }

  /* Maintain a consistent gap between the blue lead text and description. */
  #attr-symptoms .attr-qol__item .attr-qol__description {
    margin-top: 2px !important;
  }

  /* Icons remain vertically centred while the text starts at the row top. */
  #attr-symptoms .attr-qol__item .attr-qol__icon-wrap {
    align-self: center !important;
  }
}

/* =========================================================
   HEADER CTA WIDTH FIX — "TENEZ-VOUS AU COURANT"
   Keeps the CTA at its intended 146px width inside the flex header.
   ========================================================= */
@media screen and (min-width: 992px) {
  .top-menu ul.us-healthcare li.bg-stay {
    flex: 0 0 146px !important;
    width: 146px !important;
    min-width: 146px !important;
    max-width: 146px !important;
    box-sizing: border-box !important;
  }

  .top-menu ul.us-healthcare li.bg-stay > a {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }
}

/* =========================================================
   HEADER CTA — ONE-LINE LABEL + REGULAR FONT
   EN and FR desktop only; mobile/tablet remain unchanged.
   ========================================================= */
@media screen and (min-width: 992px) {

  /* Both language versions: remove bold styling from the CTA label. */
  .top-menu ul.us-healthcare li.bg-stay > a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 10px !important;
    box-sizing: border-box !important;

    font-family: "Kanit-Regular", "Kanit", sans-serif !important;
    font-size: 13px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 1 !important;

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

  /* Keep the English CTA at the original compact width. */
  html[lang^="en"] .top-menu ul.us-healthcare li.bg-stay,
  body[data-language^="en"] .top-menu ul.us-healthcare li.bg-stay {
    flex: 0 0 146px !important;
    width: 146px !important;
    min-width: 146px !important;
    max-width: 146px !important;
  }

  /* French needs extra width so “Tenez-vous au courant” stays on one line. */
  html[lang^="fr"] .top-menu ul.us-healthcare li.bg-stay,
  body[data-language^="fr"] .top-menu ul.us-healthcare li.bg-stay {
    flex: 0 0 190px !important;
    width: 190px !important;
    min-width: 190px !important;
    max-width: 190px !important;
  }
}

/* ========================================================================== 
   FINAL FR MAC/SAFARI FONT-WEIGHT FIX — AUTONOMIC DYSFUNCTION SECTION
   Uses one Kanit family with numeric weights so Safari/macOS resolves the
   actual SemiBold/Bold font files instead of falling back to Regular.
   Keep this block at the absolute end of the stylesheet.
   ========================================================================== */

@font-face {
  font-family: "Kanit";
  src: url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/fonts/Kanit-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Kanit";
  src: url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/fonts/Kanit-Medium.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Kanit";
  src: url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/fonts/Kanit-SemiBold.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Kanit";
  src: url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/fonts/Kanit-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

/* French blue headings/lead lines shown in the supplied section. */
html[lang^="fr"] #attr-symptoms .attr-autonomic__heading,
html[lang^="fr"] #attr-symptoms .attr-autonomic__lead::before,
html[lang^="fr"] #attr-symptoms .attr-autonomic__eyebrow {
  font-family: "Kanit", Arial, sans-serif !important;
  font-style: normal !important;
  font-weight: 700 !important;
  font-synthesis: weight !important;
}

/* The French replacement lead previously used Kanit-Medium with weight 400. */
html[lang^="fr"] #attr-symptoms .attr-autonomic__lead::before {
  font-weight: 700 !important;
}

/* Preserve authored emphasis in the explanatory paragraph on macOS/Safari. */
html[lang^="fr"] #attr-symptoms .attr-autonomic__overview b,
html[lang^="fr"] #attr-symptoms .attr-autonomic__overview strong,
html[lang^="fr"] #attr-symptoms .attr-autonomic__overview .bold,
html[lang^="fr"] #attr-symptoms .attr-autonomic__overview [style*="font-weight"] {
  font-family: "Kanit", Arial, sans-serif !important;
  font-style: normal !important;
  font-weight: 700 !important;
  font-synthesis: weight !important;
}

/* Keep italic emphasis italic while inheriting the intended bold weight. */
html[lang^="fr"] #attr-symptoms .attr-autonomic__lead em,
html[lang^="fr"] #attr-symptoms .attr-autonomic__lead i,
html[lang^="fr"] #attr-symptoms .attr-autonomic__overview em,
html[lang^="fr"] #attr-symptoms .attr-autonomic__overview i {
  font-family: "Kanit", Arial, sans-serif !important;
  font-style: italic !important;
}

/* Reference numbers remain regular rather than becoming heavy. */
html[lang^="fr"] #attr-symptoms .attr-autonomic__heading sup,
html[lang^="fr"] #attr-symptoms .attr-autonomic__lead sup,
html[lang^="fr"] #attr-symptoms .attr-autonomic__overview sup,
html[lang^="fr"] #attr-symptoms .attr-autonomic__eyebrow sup {
  font-family: "Kanit", Arial, sans-serif !important;
  font-style: normal !important;
  font-weight: 400 !important;
}

/* ========================================================================== 
   FINAL FR-ONLY RESPONSIVE HERO FIX — 400px TO 991px

   Fixes:
   1. Keeps the mobile/tablet starry background at its native 390 × 309 ratio.
   2. Prevents the French text from increasing the hero height.
   3. Centres the complete French text group vertically inside the image.
   4. Restores the background in the 600px–991px range.

   Keep this block at the ABSOLUTE END of the stylesheet.
   ========================================================================== */

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

  /* Native responsive image size — no stretched or expanded background. */
  html[lang^="fr"] #attr-symptoms .banner-img,
  html[lang^="fr"] #page-1a38cc0b2e .banner-img,
  html[lang^="fr"] #attr-symptoms-section .banner-img,
  body[data-language^="fr"] #attr-symptoms .banner-img,
  body[data-language^="fr"] #page-1a38cc0b2e .banner-img,
  body[data-language^="fr"] #attr-symptoms-section .banner-img {
    position: relative !important;

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

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

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    /* Native mobile/tablet source-image proportion. */
    aspect-ratio: 390 / 309 !important;

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

    box-sizing: border-box !important;
    overflow: hidden !important;

    background-color: #001b45 !important;
    background-image:
      url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/starry%20background.png") !important;
    background-repeat: no-repeat !important;
    background-position: center top !important;
    background-size: cover !important;

    border: 0 !important;
    border-radius: 0 !important;
    z-index: 0 !important;
  }

  /* Stop inherited child heights from making the hero taller. */
  html[lang^="fr"] #attr-symptoms .banner-img > *,
  html[lang^="fr"] #page-1a38cc0b2e .banner-img > *,
  html[lang^="fr"] #attr-symptoms-section .banner-img > *,
  body[data-language^="fr"] #attr-symptoms .banner-img > *,
  body[data-language^="fr"] #page-1a38cc0b2e .banner-img > *,
  body[data-language^="fr"] #attr-symptoms-section .banner-img > * {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    box-sizing: border-box !important;
  }

  /* Vertically centred French copy without adding padding to the hero itself. */
  html[lang^="fr"] #attr-symptoms .banner-img .banner-block,
  html[lang^="fr"] #page-1a38cc0b2e .banner-img .banner-block,
  html[lang^="fr"] #attr-symptoms-section .banner-img .banner-block,
  body[data-language^="fr"] #attr-symptoms .banner-img .banner-block,
  body[data-language^="fr"] #page-1a38cc0b2e .banner-img .banner-block,
  body[data-language^="fr"] #attr-symptoms-section .banner-img .banner-block {
    display: block !important;

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

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 clamp(20px, 6vw, 60px) !important;

    box-sizing: border-box !important;
    overflow: visible !important;
    transform: none !important;
  }

  /* Introductory French text. */
  html[lang^="fr"] #attr-symptoms .banner-txt1,
  html[lang^="fr"] #page-1a38cc0b2e .banner-txt1,
  html[lang^="fr"] #attr-symptoms-section .banner-txt1,
  body[data-language^="fr"] #attr-symptoms .banner-txt1,
  body[data-language^="fr"] #page-1a38cc0b2e .banner-txt1,
  body[data-language^="fr"] #attr-symptoms-section .banner-txt1 {
    width: 100% !important;
    max-width: 860px !important;

    margin: 0 0 clamp(10px, 1.8vw, 18px) !important;
    padding: 0 !important;

    font-size: clamp(12px, 2vw, 16px) !important;
    line-height: 1.28 !important;
    text-align: left !important;

    white-space: normal !important;
    overflow: visible !important;
  }

  /* Main French heading — fluid enough to remain inside the native image. */
  html[lang^="fr"] #attr-symptoms .banner-txt2,
  html[lang^="fr"] #page-1a38cc0b2e .banner-txt2,
  html[lang^="fr"] #attr-symptoms-section .banner-txt2,
  body[data-language^="fr"] #attr-symptoms .banner-txt2,
  body[data-language^="fr"] #page-1a38cc0b2e .banner-txt2,
  body[data-language^="fr"] #attr-symptoms-section .banner-txt2 {
    display: block !important;

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

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

    font-size: clamp(22px, 4.7vw, 36px) !important;
    line-height: 1.12 !important;
    letter-spacing: -0.25px !important;
    text-align: left !important;

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

  /* Let the browser wrap the French title based on the available width. */
  html[lang^="fr"] #attr-symptoms .banner-txt2 br,
  html[lang^="fr"] #page-1a38cc0b2e .banner-txt2 br,
  html[lang^="fr"] #attr-symptoms-section .banner-txt2 br,
  body[data-language^="fr"] #attr-symptoms .banner-txt2 br,
  body[data-language^="fr"] #page-1a38cc0b2e .banner-txt2 br,
  body[data-language^="fr"] #attr-symptoms-section .banner-txt2 br {
    display: none !important;
  }

  /* Keep the reference number attached to the final line. */
  html[lang^="fr"] #attr-symptoms .banner-txt2 sup,
  html[lang^="fr"] #page-1a38cc0b2e .banner-txt2 sup,
  html[lang^="fr"] #attr-symptoms-section .banner-txt2 sup,
  body[data-language^="fr"] #attr-symptoms .banner-txt2 sup,
  body[data-language^="fr"] #page-1a38cc0b2e .banner-txt2 sup,
  body[data-language^="fr"] #attr-symptoms-section .banner-txt2 sup {
    position: relative !important;
    top: -1em !important;

    font-size: 55% !important;
    line-height: 0 !important;
    vertical-align: baseline !important;
  }
}

/* Small responsive widths: reduce copy only; never increase the image height. */
@media screen and (min-width: 400px) and (max-width: 520px) {
  html[lang^="fr"] #attr-symptoms .banner-img .banner-block,
  html[lang^="fr"] #page-1a38cc0b2e .banner-img .banner-block,
  html[lang^="fr"] #attr-symptoms-section .banner-img .banner-block,
  body[data-language^="fr"] #attr-symptoms .banner-img .banner-block,
  body[data-language^="fr"] #page-1a38cc0b2e .banner-img .banner-block,
  body[data-language^="fr"] #attr-symptoms-section .banner-img .banner-block {
    padding-right: 20px !important;
    padding-left: 20px !important;
  }

  html[lang^="fr"] #attr-symptoms .banner-txt1,
  html[lang^="fr"] #page-1a38cc0b2e .banner-txt1,
  html[lang^="fr"] #attr-symptoms-section .banner-txt1,
  body[data-language^="fr"] #attr-symptoms .banner-txt1,
  body[data-language^="fr"] #page-1a38cc0b2e .banner-txt1,
  body[data-language^="fr"] #attr-symptoms-section .banner-txt1 {
    margin-bottom: 9px !important;
    font-size: 12px !important;
    line-height: 15px !important;
  }

  html[lang^="fr"] #attr-symptoms .banner-txt2,
  html[lang^="fr"] #page-1a38cc0b2e .banner-txt2,
  html[lang^="fr"] #attr-symptoms-section .banner-txt2,
  body[data-language^="fr"] #attr-symptoms .banner-txt2,
  body[data-language^="fr"] #page-1a38cc0b2e .banner-txt2,
  body[data-language^="fr"] #attr-symptoms-section .banner-txt2 {
    font-size: 22px !important;
    line-height: 1.1 !important;
    letter-spacing: -0.2px !important;
  }
}

/* Tablet widths: keep the text centred and comfortably sized. */
@media screen and (min-width: 701px) and (max-width: 991px) {
  html[lang^="fr"] #attr-symptoms .banner-img .banner-block,
  html[lang^="fr"] #page-1a38cc0b2e .banner-img .banner-block,
  html[lang^="fr"] #attr-symptoms-section .banner-img .banner-block,
  body[data-language^="fr"] #attr-symptoms .banner-img .banner-block,
  body[data-language^="fr"] #page-1a38cc0b2e .banner-img .banner-block,
  body[data-language^="fr"] #attr-symptoms-section .banner-img .banner-block {
    padding-right: clamp(40px, 7vw, 70px) !important;
    padding-left: clamp(40px, 7vw, 70px) !important;
  }

  html[lang^="fr"] #attr-symptoms .banner-txt2,
  html[lang^="fr"] #page-1a38cc0b2e .banner-txt2,
  html[lang^="fr"] #attr-symptoms-section .banner-txt2,
  body[data-language^="fr"] #attr-symptoms .banner-txt2,
  body[data-language^="fr"] #page-1a38cc0b2e .banner-txt2,
  body[data-language^="fr"] #attr-symptoms-section .banner-txt2 {
    font-size: clamp(33px, 4.2vw, 38px) !important;
    line-height: 1.11 !important;
  }
}


/* ========================================================================== 
   FINAL FR DESKTOP HERO — RESTORE TEXT BELOW THE FIXED HEADER
   Added 31 JUL 2026

   Scope:
   - French ATTR Symptoms page only
   - Desktop/laptop only (992px and above)
   - EN, tablet and mobile remain unchanged

   Keep this block at the ABSOLUTE END of the stylesheet.
   ========================================================================== */

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

  /* The desktop hero begins behind the fixed navigation. Start its content
     below the header instead of vertically centring it inside the full image. */
  html[lang^="fr"] body#attr-symptoms .banner-img,
  html[lang^="fr"] #attr-symptoms .banner-img,
  html[lang^="fr"] #page-1a38cc0b2e .banner-img,
  body[data-language^="fr"]#attr-symptoms .banner-img,
  body[data-language^="fr"] #attr-symptoms .banner-img,
  body[data-language^="fr"] #page-1a38cc0b2e .banner-img {
    align-items: flex-start !important;
  }

  /* Place the complete FR copy below the fixed header while retaining the
     existing 303px desktop artwork height. */
  html[lang^="fr"] body#attr-symptoms .banner-img .banner-block,
  html[lang^="fr"] #attr-symptoms .banner-img .banner-block,
  html[lang^="fr"] #page-1a38cc0b2e .banner-img .banner-block,
  body[data-language^="fr"]#attr-symptoms .banner-img .banner-block,
  body[data-language^="fr"] #attr-symptoms .banner-img .banner-block,
  body[data-language^="fr"] #page-1a38cc0b2e .banner-img .banner-block {
    position: relative !important;
    z-index: 2 !important;

    display: block !important;
    width: calc(100% - 80px) !important;
    max-width: 1250px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 50px auto !important;
    padding: 112px 0 0 50px !important;

    box-sizing: border-box !important;
    overflow: visible !important;
    transform: none !important;
  }

  /* Restore the introductory line that was sitting behind the header. */
  html[lang^="fr"] body#attr-symptoms .banner-txt1,
  html[lang^="fr"] #attr-symptoms .banner-txt1,
  html[lang^="fr"] #page-1a38cc0b2e .banner-txt1,
  body[data-language^="fr"]#attr-symptoms .banner-txt1,
  body[data-language^="fr"] #attr-symptoms .banner-txt1,
  body[data-language^="fr"] #page-1a38cc0b2e .banner-txt1 {
    position: relative !important;
    top: auto !important;
    left: auto !important;

    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

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

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

    color: #FFFFFF !important;
    font-family: "Kanit-SemiBold", "Kanit", Arial, sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 17px !important;
    text-align: left !important;

    white-space: normal !important;
    overflow: visible !important;
    transform: none !important;
  }

  /* Keep the long FR title inside the remaining hero space. */
  html[lang^="fr"] body#attr-symptoms .banner-txt2,
  html[lang^="fr"] #attr-symptoms .banner-txt2,
  html[lang^="fr"] #page-1a38cc0b2e .banner-txt2,
  body[data-language^="fr"]#attr-symptoms .banner-txt2,
  body[data-language^="fr"] #attr-symptoms .banner-txt2,
  body[data-language^="fr"] #page-1a38cc0b2e .banner-txt2 {
    position: relative !important;
    top: auto !important;
    left: auto !important;

    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

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

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

    color: #FFFFFF !important;
    font-size: 38px !important;
    line-height: 41px !important;
    letter-spacing: -0.35px !important;
    text-align: left !important;

    white-space: normal !important;
    overflow: visible !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    transform: none !important;
  }

  html[lang^="fr"] body#attr-symptoms .banner-txt2 br,
  html[lang^="fr"] #attr-symptoms .banner-txt2 br,
  html[lang^="fr"] #page-1a38cc0b2e .banner-txt2 br,
  body[data-language^="fr"]#attr-symptoms .banner-txt2 br,
  body[data-language^="fr"] #attr-symptoms .banner-txt2 br,
  body[data-language^="fr"] #page-1a38cc0b2e .banner-txt2 br {
    display: none !important;
  }

  html[lang^="fr"] body#attr-symptoms .banner-txt2 sup,
  html[lang^="fr"] #attr-symptoms .banner-txt2 sup,
  html[lang^="fr"] #page-1a38cc0b2e .banner-txt2 sup,
  body[data-language^="fr"]#attr-symptoms .banner-txt2 sup,
  body[data-language^="fr"] #attr-symptoms .banner-txt2 sup,
  body[data-language^="fr"] #page-1a38cc0b2e .banner-txt2 sup {
    position: relative !important;
    top: -0.35em !important;
    font-size: 55% !important;
    line-height: 0 !important;
    vertical-align: baseline !important;
  }
}

/* ========================================================================== 
   FINAL 701PX–991PX HERO OVERRIDE — PAGE-SCOPED, EN + FR
   Fixes the global.css .banner-img min-height/background override.
   Keep this block at the absolute end of symptoms.css.
   ========================================================================== */
@media screen and (min-width: 701px) and (max-width: 991px) {

  /* Use page/body selectors that work even when lang/data-language is absent. */
  body#attr-symptoms .banner-img,
  #attr-symptoms .banner-img,
  #page-1a38cc0b2e .banner-img,
  .attr-symptoms .banner-img {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

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

    /* Remove global.css min-height: 1385px and retain mobile artwork ratio. */
    height: calc(100vw * 309 / 390) !important;
    min-height: 0 !important;
    max-height: calc(991px * 309 / 390) !important;
    aspect-ratio: 390 / 309 !important;

    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;

    background-color: #001b45 !important;
    background-image: url("/content/dam/intelligentcontent/unbranded/seethepattrns-ca/ca/en/desktop-update/starry%20background.png") !important;
    background-repeat: no-repeat !important;
    background-position: center top !important;
    background-size: cover !important;

    border: 0 !important;
    border-radius: 0 !important;
    z-index: 0 !important;
  }

  /* Prevent AEM wrappers from inheriting the global hero height. */
  body#attr-symptoms .banner-img > *,
  #attr-symptoms .banner-img > *,
  #page-1a38cc0b2e .banner-img > *,
  .attr-symptoms .banner-img > * {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    box-sizing: border-box !important;
  }

  /* Match the mobile copy positioning and keep all text inside the artwork. */
  body#attr-symptoms .banner-img .banner-block,
  #attr-symptoms .banner-img .banner-block,
  #page-1a38cc0b2e .banner-img .banner-block,
  .attr-symptoms .banner-img .banner-block {
    position: relative !important;
    inset: auto !important;
    display: block !important;

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

    margin: 0 !important;
    padding: 0 clamp(40px, 7vw, 70px) !important;
    box-sizing: border-box !important;

    color: #ffffff !important;
    text-align: left !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    z-index: 2 !important;
  }

  body#attr-symptoms .banner-txt1,
  #attr-symptoms .banner-txt1,
  #page-1a38cc0b2e .banner-txt1,
  .attr-symptoms .banner-txt1 {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    width: 100% !important;
    max-width: 860px !important;
    margin: 0 0 14px !important;
    padding: 0 !important;

    color: #ffffff !important;
    font-size: clamp(13px, 1.8vw, 16px) !important;
    line-height: 1.28 !important;
    text-align: left !important;
    white-space: normal !important;
    transform: none !important;
  }

  body#attr-symptoms .banner-txt2,
  #attr-symptoms .banner-txt2,
  #page-1a38cc0b2e .banner-txt2,
  .attr-symptoms .banner-txt2 {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    width: 100% !important;
    max-width: 900px !important;
    margin: 0 !important;
    padding: 0 !important;

    color: #ffffff !important;
    font-size: clamp(30px, 4.2vw, 38px) !important;
    line-height: 1.11 !important;
    letter-spacing: -0.25px !important;
    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    transform: none !important;
  }

  /* Allow natural wrapping, consistent with the smaller mobile layout. */
  body#attr-symptoms .banner-txt2 br,
  #attr-symptoms .banner-txt2 br,
  #page-1a38cc0b2e .banner-txt2 br,
  .attr-symptoms .banner-txt2 br {
    display: none !important;
  }
}