@font-face {
  font-family: 'GTF Solina';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/gtf-solina/GTFSolina-Bold.woff2') format('woff2'),
    url('../fonts/gtf-solina/GTFSolina-Bold.woff') format('woff'),
    url('../fonts/gtf-solina/GTFSolina-Bold.ttf') format('truetype');
}

@font-face {
  font-family: 'Aeonik';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/aeonik/Aeonik-Regular.woff2') format('woff2'),
    url('../fonts/aeonik/Aeonik-Regular.woff') format('woff'),
    url('../fonts/aeonik/Aeonik-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'Aeonik';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/aeonik/Aeonik-Medium.woff2') format('woff2'),
    url('../fonts/aeonik/Aeonik-Medium.woff') format('woff'),
    url('../fonts/aeonik/Aeonik-Medium.ttf') format('truetype');
}

@font-face {
  font-family: 'Aeonik';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/aeonik/Aeonik-Bold.woff2') format('woff2'),
    url('../fonts/aeonik/Aeonik-Bold.woff') format('woff'),
    url('../fonts/aeonik/Aeonik-Bold.ttf') format('truetype');
}









/* 1a. Containers */




/* 1b. Colors */







:root {
  --primary_color: #252627;
  --secondary_color: #193D57;
  --tertiary_color: #F26419;
  --quaternary_color: #E9DED8;
}
/* 1c. Typography */


































/* 1d. Buttons */













/* 1e. Forms */










































/* 1f. Tables */













/* 1g. Website header */








/* 1h. Website footer */







.content-wrapper {
  max-width: 1110px;
  margin: 0 auto;
  padding:0 30px;
}

.dnd-section,
.content-wrapper--vertical-spacing {
  padding-top: 80px 0px;
  padding-bottom: 80px 0px;
}

.dnd-section > .row-fluid {
  max-width: 1110px;
}

.dnd-section .dnd-column {
  padding: 0 40px;
}

.dnd-section[class*=force-full-width],.dnd-section[class*=force-full-width] .dnd-column {
  padding: 0
}





html {
  font-size: 18px;
  overflow-x:hidden;
}

body {
  font-weight: 700; font-family: Aeonik;
  color: #252627;
  font-size: 18px;
  font-family: 'Aeonik', sans-serif;
  overflow-x:hidden;
  line-height:1.2;
}



/* Paragraphs */

p {
  font-weight: 700; font-family: Aeonik;
  font-size: 18px;
  font-weight:500;
  line-height: 1.2;
}

/* Anchors */

a {
  font-weight: 700; font-family: 'GT Solina';
  color: #141414;
  font-size: 18.04px;
  text-transform: none;  
  text-decoration: none;
  font-weight:500;
  transition:all 0.2s ease-in-out;
}


a:hover,
a:focus{
  color: 

  
  
    
  


  rgba(25, 61, 87, 1.0)

;
}
a:active {
  font-weight: 700; font-family: 'GT Solina';
  color: 

  
  
    
  


  rgba(25, 61, 87, 1.0)

;
}

/* Headings */

h1,
.h1 {
  font-weight: 700; font-family: 'GT Solina';
  font-family: 'GTF Solina', sans-serif;
  color: #252627;
  font-size: 54px;
  text-transform: none;
  line-height:1.15;
  margin-bottom:15px;
  letter-spacing: -0.02em;
}

h2,
.h2 {
  font-weight: 700; font-family: 'GT Solina';
  font-family: 'GTF Solina', sans-serif;
  color: #141414;
  font-size: 42px;
  text-transform: none;
  margin-bottom:15px;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

h3,
.h3 {
  font-weight: 700; font-family: 'GT Solina';
  font-family: 'GTF Solina', sans-serif;
  color: #141414;
  font-size: 29px;
  text-transform: none;
  margin-bottom:15px;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

h4,
.h4 {
  font-weight: 700; font-family: 'GT Solina';
  font-family: 'GTF Solina', sans-serif;
  color: #141414;
  font-size: 24px;
  text-transform: none;
  line-height:1.15;
  margin-bottom:15px;
  letter-spacing: -0.02em;
}

h5,
.h5 {
  text-decoration: none; font-weight: 500;
  font-family: 'GTF Solina', sans-serif;
  color: #252627;
  font-size: 18px;
  text-transform: none;
  margin-bottom:15px;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

h6,
.h6 {
  text-decoration: none; font-weight: 500;
  font-family: 'GTF Solina', sans-serif;
  color: #F26419;
  font-size: 15px;
  text-transform: none;
  margin-bottom:15px;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

/* Blockquote */

blockquote {
  border-left-color: var(--tertiary_color);
  font-size:24px;
  font-weight:500;
  padding:6px 30px;
  margin: 37px 0;
}


@media(max-width:1024px){
  .content-wrapper {
    padding:0px 20px; 
  }
  .h1, h1{
    font-size:50px; 
  }
  .h2, h2 {
    font-size: 40px;
  } 
  .h3, h3 {
    font-size: 28px;
  } 
  blockquote{
    font-size:20px; 
  }
}

@media(max-width:767px){

  .h1, h1{
    font-size:40px; 
  }
  .h2, h2 {
    font-size: 30px;
  } 
  .h3, h3 {
    font-size: 24px;
  } 
  .h4, h4 {
    font-size: 20px;
  }
  .h5, h5 {
    font-size: 18px;
  }
  blockquote{
    font-size:18px; 
  }
  p{
    font-size:16px; 
  }


}




button,
.button,
.hs-button,
a.cta_button,
.hs-blog-post-listing__post-button{
  border: 1px solid #F26419;

  padding-top: 12px;
padding-right: 18px;
padding-bottom: 12px;
padding-left: 15px;

  text-decoration: none; font-weight: 500;
  background-color: #170039;
  border-radius: 24px;
  color: #FFFFFF;
  font-size: 18.04px;
  text-transform: none;
  line-height:1.2;
}

button:hover,
button:focus,
a.cta_button:hover,
a.cta_button:focus,
.button:hover,
.button:focus,
.hs-button:hover,
.hs-button:focus,
.hs-blog-post-listing__post-button:hover,
.hs-blog-post-listing__post-button:focus{
  border: 1px solid #252627;
;
  color: 

  
  
    
  


  rgba(37, 38, 39, 1.0)

;
  background-color: 

  
  
    
  


  rgba(255, 255, 255, 0.0)

;
  border-radius: 24px;
}
.leopard-nav .button-group .cta-container .button:hover svg path{
  fill: 

  
  
    
  


  rgba(37, 38, 39, 1.0)

;
  stroke: 

  
  
    
  


  rgba(37, 38, 39, 1.0)

;
}
button:active,
.button:active,
.hs-button:active,
a.cta_button:active,
.hs-blog-post-listing__post-button:active {
  text-decoration: none; font-weight: 500;
  background-color: rgba(255, 140, 65, 1.0);
  border-color: #ff8c41;
}

/* Special styling for Request a Demo button in nav */
.leopard-nav .button-group .cta-container .button {
  background-color: #E3E300 !important;
  color: #170039 !important;
  padding: 10px 20px;
  border-radius: 24px;
  font-weight: 700;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.leopard-nav .button-group .cta-container .button:hover {
  opacity: 0.9;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.leopard-nav .button-group .cta-container .button:focus {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Update arrow color in Request a Demo button */
.leopard-nav .button-group .cta-container .button svg path {
  fill: #170039 !important;
  stroke: #170039 !important;
}

@media(max-width:991px){
  button,
  .button,
  .hs-button,
  .hs-blog-post-listing__post-button,
  .cta_button{
    font-size:16px;
  }
  a{
    font-size:16px; 
  }
}




form,
.submitted-message {
  font-weight: 700; font-family: Aeonik;
  border: 1px none #FFFFFF;
;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  background-color: 

  
  
    
  


  rgba(255, 255, 255, 0.0)

;
  padding: 0px;
;
}

/* Form title */

.form-title {
  border: 0px none #E9DED8;
;
  padding: 0px;
;
  font-weight: 700; font-family: Aeonik;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  font-size: 18px;
  color: #252627;
  background-color: 

  
  
    
  


  rgba(255, 255, 255, 0.0)

;
}


/* Labels */

form label {
  color: #252627;
  display: block;
  font-weight: 500;
  margin-bottom: 11px;
}

fieldset.form-columns-2, fieldset.form-columns-3 {
  display: flex;
  justify-content: space-between;
}
form fieldset {
  max-width: 100%!important;
}
fieldset.form-columns-2>div {
  width: Calc(50% - 16px)!important;
}
fieldset.form-columns-3>div {
  width: Calc(33.3337% - 21.33333px)!important;
}
form .hs-form-field {
  margin-bottom: 16px;
}

@media (max-width: 767px){
  fieldset.form-columns-2>div, fieldset.form-columns-3>div {
    width: 100% !important;
  }
}
/* Help text */

form legend {
  color: #252627;
}

/* Inputs */

form input[type=text],
form input[type=search],
form input[type=email],
form input[type=password],
form input[type=tel],
form input[type=number],
form input[type=file],
form select,
form textarea {
  border: 1px solid rgba(233, 222, 216, 0%);

  background-color: 

  
  
    
  


  rgba(233, 222, 216, 0.5)

;
  font-size: 18.04px;
  line-height:1.2;
  color: #252627;
  border-radius: 9px;
  min-height: 48px;
  padding: 10px;
  font-weight:500;
  outline: none;
}
form select {
  appearance: none;
  background-image: url(data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none'%3E%3Cpath fill='%23252627' d='m7 8.508.602-.63 5.25-5.25L13.48 2 12.25.77l-.629.628L7 6.02 2.352 1.398 1.75.77.492 2l.63.629 5.25 5.25z'/%3E%3C/svg%3E);
  background-position: right 15px center;
  background-repeat: no-repeat;
  padding: 10px 30px 10px 10px;
}
form textarea{
  min-height: 125px;
  resize: vertical; 
}
form ul li input[type=checkbox]+span:after, ul.inputs-list input[type=checkbox]+span:after, ul.inputs-list input[type=radio]+span:after {
  background-color: 

  
  
    
  


  rgba(233, 222, 216, 0.5)

;
}
ul.inputs-list input[type=radio]:checked+span:after,form ul li input[type=checkbox]:checked+span:after, ul.inputs-list input[type=checkbox]:checked+span:after{
  background-color: #252627;
}
/* Form placeholder text */

::-webkit-input-placeholder {
  color: #252627;
}

::-moz-placeholder {
  color: #252627;
}

:-ms-input-placeholder {
  color: #252627;
}

::placeholder {
  color: #252627;
}

/* Inputs - date picker */

.hs-fieldtype-date .input .hs-dateinput:before {
  color: #252627;
}

.fn-date-picker td.is-selected .pika-button {
  background: #252627;
}

.fn-date-picker td .pika-button:hover {
  background-color: #252627 !important;
}

.fn-date-picker td.is-today .pika-button {
  color: #252627;
}

/* Submit button */

form input[type=submit],
form .hs-button {
  border: 1px solid #F26419;
;
  padding-top: 12px;
padding-right: 18px;
padding-bottom: 12px;
padding-left: 18px;
;
  font-family: 'GT Solina';
  color: #FFFFFF;
  font-size: 18px;
  background-color: #170039;
  border-radius: 24px;
  text-transform: none;
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  font-weight:700;
  max-width: 100%;
  white-space: normal!important;
}

form input[type=submit]:hover,
form input[type=submit]:focus,
form .hs-button:hover,
form .hs-button:focus {
  background-color: 

  
  
    
  


  rgba(242, 100, 25, 0.0)

;
  color: #252627;
  border: 1px solid #252627;
;
  border-radius: 24px;
}

form input[type=submit]:active,
form .hs-button:active {
  background-color: rgba(255, 140, 65, 1.0);
  border-color: #ff8c41;
}


@media(max-width:767px){
  form input[type=email], form input[type=file], form input[type=number], form input[type=password], form input[type=search], form input[type=tel], form input[type=text], form select, form textarea,
  form .hs-button, form input[type=submit]{
    font-size:16px; 
  } 
}
@media(max-width:480px){
  form .hs-button, form input[type=email], form input[type=file], form input[type=number], form input[type=password], form input[type=search], form input[type=submit], form input[type=tel], form input[type=text], form select, form textarea{
    font-size:14px; 
  } 
}

@media(max-width:375px){
  form .hs-button, form input[type=email], form input[type=file], form input[type=number], form input[type=password], form input[type=search], form input[type=submit], form input[type=tel], form input[type=text], form select, form textarea{
    font-size:12px; 
  }
}




/* Table */

table {
  border: 1px solid #252627;

  background-color: 

  
  
    
  


  rgba(255, 255, 255, 1.0)

;
}

/* Table cells */

td,
th {
  border: 1px solid #252627;

  padding: 18px;

  color: #252627;
}

/* Table header */

thead th {
  background-color: 

  
  
    
  


  rgba(37, 38, 39, 1.0)

;
  color: #FFFFFF;
}

/* Table footer */

tfoot td {
  background-color: 

  
  
    
  


  rgba(255, 255, 255, 1.0)

;
  color: #252627;
}





.leopard-nav {
  background-color: #170039;
}

/* REMOVED: Logo CSS override - logos should be handled in HTML/HubL templates */

.leopard-nav .header-wrap .hs-menu-wrapper>ul>li>a,.leopard-nav .header-wrap .login>a {
  color: white;
}

.leopard-nav .header--group .header-menu-group>ul>li>a:hover,
.leopard-nav .header--group .header-menu-group>ul>li>a:focus{
  font-weight: 700; font-family: 'GT Solina';
  color: 

  
  
    
  


  rgba(25, 61, 87, 1.0)

;
}

.menu__child-toggle-icon {
  border-top-color: white;
}

.menu .menu__link:hover,
.menu .menu__link:focus,
.header__language-switcher-label-current:hover,
.header__language-switcher-label-current:focus,
.header__language-switcher .lang_list_class li:hover a,
.header__language-switcher .lang_list_class li a:focus {
  color: #000000;
}


.leopard-nav li.hs-menu-depth-1.active>a {
  position: relative;
} 

@media(min-width:768px){
  .leopard-nav .menu .hs-menu-depth-1>.hs-menu-children-wrapper, .leopard-nav .menu .hs-menu-depth-2>.hs-menu-children-wrapper{
    background-color: 

  
  
    
  


  rgba(255, 255, 255, 1.0)

 !important;
  }
  .leopard-nav .header--group .header-menu-group>ul>li.hs-menu-depth-1.active>a:hover,
  .leopard-nav .header--group .header-menu-group>ul>li.hs-menu-depth-1.active>a:focus{
    color: #252627;
  }
  .leopard-nav .header--group .header-menu-group>ul>li.hs-menu-depth-1.active a:after {
    position: absolute;
    content: "";
    width: 100%;
    height: 2px;
    background: #193D57;
    left: 0;
    right: 0;
    bottom: -5px;
    z-index: 9999;
  }

  .leopard-nav .left--menu .header-menu-group>ul>li:first-child>a{
    border: 1px solid #F26419;

    padding-top: 12px;
padding-right: 18px;
padding-bottom: 12px;
padding-left: 15px;

    text-decoration: none; font-weight: 500;
    background-color: #170039;
    border-radius: 24px;
    color: #FFFFFF;
    font-size: 18.04px;
    text-transform: none;
  }
  .leopard-nav .left--menu .header-menu-group>ul>li:first-child>a:hover,
  .leopard-nav .left--menu .header-menu-group>ul>li:first-child>a:focus{
    border: 1px solid #252627;
;
    color: 

  
  
    
  


  rgba(37, 38, 39, 1.0)

;
    background-color: 

  
  
    
  


  rgba(255, 255, 255, 0.0)

;
    border-radius: 24px;
  }
}

body .leopard-nav .header--group .header-menu-group>ul>li.hs-item-has-children>ul.hs-menu-children-wrapper *,.leopard-nav .menu .hs-menu-depth-2>a, .leopard-nav .menu .hs-menu-depth-3>a {
  color: #252627;
}


.header__language-switcher .lang_list_class:before {
  border-bottom-color: ;
}

.menu__submenu .menu__link:hover,
.menu__submenu .menu__link:focus,
.header__language-switcher .lang_list_class li:hover,
.menu__submenu--level-2 > .menu__item:first-child:hover:before,
.menu__submenu--level-2 > .menu__item:first-child.focus:before {
  background-color: #170039;
}

.header__language-switcher .lang_list_class.first-active::after {
  border-bottom-color: #170039;
}

.header__language-switcher-label-current,
.header__language-switcher .lang_list_class li a {
  font-family: 'Aeonik', sans-serif;
}

.header__language-switcher-label-current:after {
  border-top-color: white;
}

@media(max-width: 1024px) {
  .leopard-nav li.hs-menu-depth-1.active>a{color:#193D57 !important;}
  .leopard-nav .header--group .header-menu-group>ul>li>a:hover,
  .leopard-nav .header--group .header-menu-group>ul>li>a:focus{
    color:#fff;
  }
}





.footer {
  background-color: #170039;
}

/* REMOVED: Footer logo CSS override - logos should be handled in HTML/HubL templates */

/* Footer content */

.footer p,
.footer label,
.footer span,
.footer li,
.footer img,
.footer .footer-wrapper .right-col .menu--items ul li a,.footer *{
  color: #ffffff;
}
.footer .footer-wrapper .right-col .menu--items ul li a:hover,
.footer .footer-wrapper .right-col .menu--items ul li a:focus{
  font-weight: 700; font-family: 'GT Solina';
  color: 

  
  
    
  


  rgba(25, 61, 87, 1.0)

;
}
.footer h1,
.footer h2,
.footer h3,
.footer h4,
.footer h5,
.footer h6,{
  color: #193D57;
}
.footer .leopard-footer .hs-menu-wrapper ul li a:hover{
   color:var(--tertiary_color); 
}




.blog-post,
.blog-header__inner,
.blog-related-posts {
  padding:0;
}
.blog-listing .blog-pagination a,.hs-search-results__pagination__link{
 color:var(--primary_color); 
}
/* Blog post */

.blog-post__meta a {
  color: #252627;
}

.blog-post__tag-link {
  color: #252627;
}

.blog-post__tag-link:hover,
.blog-post__tag-link:focus {
  color: #000000;
}

.blog-post__tag-link:active {
  color: #4d4e4f;
}

/* Blog related posts */

.blog-related-posts__title-link,
.blog-related-posts__title-link:hover,
.blog-related-posts__title-link:focus,
.blog-related-posts__title-link:active {
  font-weight: 700; font-family: 'GT Solina';
  text-transform: none;
}

.blog-related-posts__title-link {
  color: #141414;
}

.blog-related-posts__title-link:hover,
.blog-related-posts__title-link:focus {
  color: #000000;
}

.blog-related-posts__title-link:active {
  color: #3c3c3c;
}

/* Blog comments */

.blog-comments {
  margin-bottom: 80px;
}

#comments-listing .comment-reply-to {
  color: #141414;
}

#comments-listing .comment-reply-to:hover,
#comments-listing .comment-reply-to:focus {
  color: #000000;
}

#comments-listing .comment-reply-to:active {
  color: #3c3c3c;
}

.blog-listing-hero {
  background-color: #F5F2EF !important;
}

.blog-post {
  background-color: #FAFAFA !important;
}





.hs-search-results__title {
  font-weight: 700; font-family: 'GT Solina';
  color: #252627;
}





/* Blog listing */

.hs-blog-post-listing__post-title-link,
.hs-blog-post-listing__post-title-link:hover,
.hs-blog-post-listing__post-title-link:focus,
.hs-blog-post-listing__post-title-link:active {
  font-weight: 700; font-family: 'GT Solina';
  text-transform: none;
}

.hs-blog-post-listing__post-title-link {
  color: #141414;
}

.hs-blog-post-listing__post-title-link:hover,
.hs-blog-post-listing__post-title-link:focus {
  color: #000000;
}

.hs-blog-post-listing__post-title-link:active {
  color: #3c3c3c;
}


.hs-blog-post-listing__post-tag,
.hs-blog-post-listing__post-author-name {
  color: #252627;
}

/* Blog pagination */

.hs-pagination__link-text,
.hs-pagination__link--number {
  color: #252627;
}

.hs-pagination__link:hover .hs-pagination__link-text,
.hs-pagination__link:focus .hs-pagination__link-text,
.hs-pagination__link--number:hover,
.hs-pagination__link--number:focus {
  color: #000000;
}

.hs-pagination__link:active .hs-pagination__link-text,
.hs-pagination__link--number:active {
  color: #4d4e4f;
}

.hs-pagination__link-icon svg {
  fill: #252627;
}

/* Subscription Preferences Page - Final Fix Based on Actual DOM Structure */

/* Page background */
.systems-page {
  background-color: #FAFAFA !important;
  padding: 40px 0 60px;
}

.systems-page .content-wrapper {
  max-width: 600px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Page Header */
.page-header {
  text-align: center;
  margin-bottom: 40px;
  margin-top: 60px; /* Add space above Communication Preferences title */
}

.page-header h1 {
  font-family: 'GTF Solina', sans-serif !important;
  font-weight: 700 !important;
  font-size: 32px !important;
  letter-spacing: -0.02em !important;
  color: #170039 !important;
  margin-bottom: 16px !important;
}

#hs-subscriptions-masked-email {
  font-family: 'Aeonik', sans-serif !important;
  font-size: 18px !important;
  color: #666 !important;
  margin-bottom: 12px !important;
}

/* Header text below email */
.page-header br + text,
.page-header > text:last-child {
  font-family: 'Aeonik', sans-serif !important;
  font-size: 14px !important;
  color: #888 !important;
  line-height: 1.4 !important;
}

/* Email Preferences List */
.email-prefs {
  margin-bottom: 30px;
}

.email-prefs .header {
  font-family: 'Aeonik', sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: #333 !important;
  margin-bottom: 20px !important;
}

/* Individual Subscription Items - COMPACT SPACING */
.email-prefs .item {
  background: white !important;
  border: 1px solid #E5E5E5 !important;
  border-radius: 8px !important;
  padding: 16px !important;
  margin-bottom: 8px !important; /* Much tighter spacing */
  transition: all 0.2s ease !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  cursor: pointer !important; /* Make entire box clickable */
}

.email-prefs .item:hover {
  border-color: #170039 !important;
  box-shadow: 0 2px 4px rgba(23, 0, 57, 0.1) !important;
}

/* Fix Typography Hierarchy - Target the actual DOM structure */
.email-prefs .item .fakelabel span {
  font-family: 'Aeonik', sans-serif !important;
  font-weight: 700 !important; /* Subscription names BOLD */
  font-size: 16px !important;
  color: #170039 !important;
  display: block !important;
  margin-bottom: 4px !important;
}

.email-prefs .item p {
  font-family: 'Aeonik', sans-serif !important;
  font-weight: 400 !important; /* Descriptions regular weight */
  font-size: 14px !important;
  color: #666 !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}

/* Checkbox Styling */
.email-prefs .item input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  accent-color: #170039 !important;
  border-radius: 4px !important;
  flex-shrink: 0 !important;
}

.email-prefs .item .checkbox-row {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  width: 100% !important;
}

.email-prefs .item .item-inner {
  flex: 1 !important;
}

/* Subscribe Options Section (Unsubscribe All) */
.subscribe-options {
  background: white !important;
  border: 1px solid #E5E5E5 !important;
  border-radius: 8px !important;
  padding: 20px !important;
  margin-bottom: 24px !important;
}

.subscribe-options .header {
  font-family: 'Aeonik', sans-serif !important;
  font-weight: 600 !important;
  color: #333 !important;
  margin-bottom: 12px !important;
}

.subscribe-options label {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  font-family: 'Aeonik', sans-serif !important;
  font-size: 14px !important;
  color: #666 !important;
}

.subscribe-options input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  accent-color: #170039 !important;
}

/* Update Button */
#submitbutton.hs-button.primary {
  background-color: #170039 !important;
  color: white !important;
  font-family: 'Aeonik', sans-serif !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  padding: 12px 24px !important;
  border-radius: 6px !important;
  border: none !important;
  cursor: pointer !important;
  transition: opacity 0.2s ease !important;
  margin-top: 20px !important;
}

#submitbutton.hs-button.primary:hover {
  opacity: 0.9 !important;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .systems-page .content-wrapper {
    padding: 0 16px !important;
  }
  
  .email-prefs .item {
    padding: 14px !important;
    flex-direction: column !important;
    gap: 8px !important;
  }
  
  .email-prefs .item .checkbox-row {
    flex-direction: column !important;
    gap: 8px !important;
  }
  
  .page-header h1 {
    font-size: 28px !important;
  }
  
  #hs-subscriptions-masked-email {
    font-size: 16px !important;
  }
}

/* JavaScript for clickable subscription boxes */
<script>
document.addEventListener('DOMContentLoaded', function() {
  // Make entire subscription item boxes clickable
  const subscriptionItems = document.querySelectorAll('.email-prefs .item');
  
  subscriptionItems.forEach(function(item) {
    item.addEventListener('click', function(e) {
      // Don't trigger if clicking directly on the checkbox
      if (e.target.type === 'checkbox') return;
      
      // Find the checkbox within this item
      const checkbox = item.querySelector('input[type="checkbox"]');
      if (checkbox) {
        // Toggle the checkbox
        checkbox.checked = !checkbox.checked;
        
        // Trigger change event for any form validation
        checkbox.dispatchEvent(new Event('change', { bubbles: true }));
      }
    });
    
    // Add visual feedback for clickable items
    item.style.cursor = 'pointer';
  });
});
</script>