:root {
        --font: 'Proxima Nova W05 Regular', Helvetica, Arial, sans-serif ;
        --alt-font: 'Proxima Nova W05 Regular', Helvetica, Arial, sans-serif;
        --accent-color: #000000;
        --secondary-color: #ea148c;
        --link-color: #ea148c;
        --accent-highlight-color: #000000;
        --accent-highlight-background-color: #cccccc;
        --accent-tinted-color-70: #b3b3b3;
        --accent-tinted-color-80: #cccccc;
        --accent-tinted-color-90: #e6e6e6;
        --accent-contrast-color: #fff;
        --accent-contrast-tinted-background-color: #b3b3b3;
        --accent-hover-color: #1a1a1a;
        --secondary-hover-color: #ef42a3;
        --secondary-contrast-color: #fff;
        --link-hover-color: #f371ba;
      }
      

.company__logo {text-indent: 100%;white-space: nowrap;overflow: hidden;background: url('https://d36ai2hkxl16us.cloudfront.net/thoughtindustries/image/upload/a_exif,c_fit,t_ti_company_logo_v4/v1/course-uploads/3283b56a-8236-4fc3-96db-e11fe829f291/24y56tkrji4g-ilearningplus-leader-in-print-training.png') no-repeat center left;background-size: contain;} .company__logo span.h4 {visibility: hidden;}
/*********defaults*/

body{
  font-family: 'Proxima Nova W05 Regular', Helvetica, Arial, sans-serif;
  font-size: 18px;
  background-color:#cbcbcb;
}

#learner h1,
#learner h2, #learner .h2,
#learner h3,
#learner h4,
#learner h5,
#learner h6,
h1, h2, h3, h4, h5, h6{
  font-family: 'Proxima Nova W05 Bold', Helvetica, Arial, sans-serif;
  color:black;
}

.home__content{
  padding-left:0;
  padding-right:0;
}

/*********font color*/
body,
.top-bar-section .dropdown li:not(.has-form):not(.active)>a:not(.button),
.top-bar-section .dropdown li a,
.footer__company__info,
.enroll__price,
.course__detail__content, 
.course__detail__header p,
.layout__content .widget--title .widget__subtitle,
.btn.catalog-aggregation__value,
.widget__subtitle,
.top-bar-section ul li>a{
  color:#000000;
}
.icon-navigateleft:before,
.icon-navigateright:before {
  color:#FFFFFF !important;
}


/*********hidden stuff*/

.catalog-grid-item__description,
.catalog-grid-item__price,
.catalog-grid-item__cta-container,
.enroll__secondary-actions,
.block-grid__item__button,
.hideOnFree,
hr{
  display: none;
}

/*********specifics*/

.nav--global-links{
  background-color:#000000;
}

.nav--global-links a{
  color:#ffffff;
}

h1, #learner .h2{
  font-size: 3.525rem;
  line-height:  3.525rem;
}

h3{
  font-size: 2.625rem;
  line-height:  2.625rem;
}

.featured-content-multi-carousel__nav-left{
  top: 45%;
}

.featured-content-multi-carousel__nav-right{
  right: -0.5em;
  top: 45%;
}

.featured-content-multi-carousel__nav-left .icon-navigateleft:before,
.featured-content-multi-carousel__nav-right .icon-navigateright:before{
  font-size:2em;
  opacity:60%;
}

/*********home page hero*/

.homePageHero .hero{
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  margin: 2rem auto;
}

.homePageHero .hero picture{
  flex-basis:40%;
  flex-grow:1;
}

.homePageHero .hero__caption{
  position:unset;
  background-color:#ffffff;
  flex-basis:60%;
  flex-grow:1;
}

.homePageHero h2.hero__title{
  color:#000000;
  font-size: 4rem !important;
  font-weight: 800;
}
  

.homePageHero span.h4{
  color:#000000;
  font-size: 2.5rem !important;
}


/*********catalog*/

.catalog-grid-item__title,
.featured-content-article-item__title,
.featured-content-multi-carousel-item__title{
  font-size: 1.3rem;
  font-weight: 700;
  line-height:  1.325rem;
}

.featured-content-article-item__description{
  font-size:1.25rem;
}

.catalog-grid-item__body,
.featured-content-article-item__body{
  background-color:#ffffff;
  height:auto;
  min-height:130px;
}

.catalog-grid-item__source{
  color:#ea148c;
}

.catalog-aggregation--expanded{
  background-color:#eaeaea;
}

.btn.catalog-aggregation__value{
  font-size:1rem;
}

.btn.catalog-aggregation__value:hover{
  color:#ea148c;
}

.catalog-active-filter__remove{
  background-color: #00bdf2 !important;
  font-size: 1rem;
  padding: 0.5rem !important;
  color: #000000 !important;
  border-radius: 6px;
  font-weight: 600;
}

.widget--one-column_standard.full-width  {
  max-width:100%;
}

/*********widgets*/

.shadedBackground{
  background-color:#eaeaea;
}

.widget--one-column,
.widget--two-column,
.widget--three-column,
.widget--four-column,
.widget--catalog_standard,
.padded{
  padding: 1rem 1rem 0;
}

.widget--one-column_standard,
.widget--three-column_standard{
  padding: 2rem 5rem 0;
}

.widget__title-cta{
  background-color: #ea148c;
  color: #ffffff;
  border: #ea148c;
  border-radius: 6px;
}

.widget__title-cta a{
  color: #ffffff;
  font-weight: 600;
}

.layout__content .widget--title .widget__subtitle{
  margin-bottom:2rem;
}

.showCertificationBadge .editor-content{
  display: flex;
  flex-wrap: wrap;
}

.showCertificationBadge .editor-content p:nth-of-type(1){
  flex-basis:100px;
}

.showCertificationBadge .editor-content p:nth-of-type(2){
  flex-basis: 75%;
  margin-left: 1rem;
}

/*********updated full-width*/
.showCertificationBadge.full-width .editor-content p:nth-of-type(2) {
  margin-left: 0;
}

.showCertificationBadge.full-width .editor-content p:nth-of-type(1) {
  flex-basis: 25%;
}

.showCertificationBadge.mid-width .editor-content p:nth-of-type(1) {
  flex-basis: 15%;
}

.showCertificationBadge.mid-width .editor-content div:nth-of-type(1) {
  margin-left: 1rem;
  flex-basis: 85%;
  flex-basis: calc(85% - 1rem);
}
.showCertificationBadge.mid-width .editor-content p:nth-of-type(2) {
  margin-left: 0;
}

.showCertificationBadge.full-width .editor-content div:nth-of-type(1) {
  margin-left: 1rem;
  flex-basis: 75%;
  flex-basis: calc(75% - 1rem);
}

@media only screen and (max-width: 640px) {
  .showCertificationBadge.full-width .editor-content {
    display:block !important;
  }
  .showCertificationBadge.full-width .editor-content p:nth-of-type(1),
  .showCertificationBadge.mid-width .editor-content p:nth-of-type(1) {
    width:100%;
    flex-basis:100%;
  }
  .showCertificationBadge.full-width .editor-content p:nth-of-type(1) img,
  .showCertificationBadge.mid-width .editor-content p:nth-of-type(1) img {
    margin-left:auto;
    margin-right:auto;
    max-width:200px;
  }
  .showCertificationBadge.full-width .editor-content p:nth-of-type(1),
  .showCertificationBadge.mid-width .editor-content p:nth-of-type(1) {
    text-align:center;
  }
  .showCertificationBadge.full-width .editor-content div p:nth-of-type(1)
  .showCertificationBadge.mid-width .editor-content div p:nth-of-type(1) {
    text-align:left;
  }
  .showCertificationBadge.mid-width .editor-content div:nth-of-type(1) {
    margin-left: 1rem;
    flex-basis: auto;
  }
}

.widget--three-column_standard .editor-content{
  max-width:100%;
}

/*********detail pages*/

.course__detail__content .section__list li .section__list__index>span,
.course__detail__content .section__list li .section__list__outline>span{
  font-size: 1.125rem;
  text-transform:uppercase;
}

.course__detail__content .section__list{
  margin-top:0px;
}

.course__instructor .h4{
  text-transform:uppercase;
}

.enroll__buy .btn{
  background-color: #ea148c;
  color: #ffffff;
  border: #ea148c;
  border-radius: 6px;
}

.enroll .interval .strikethrough, 
.enroll .srp .strikethrough{
  text-decoration:none;
}

.layout__content--sidebar .widget--one-column.offerProduct,
.layout__content--sidebar .widget--one-column.offerCourse{
  padding:2rem 0rem;
}

.layout__content--sidebar .widget--one-column.offerProduct .indent-list,
.layout__content--sidebar .widget--one-column.offerCourse .indent-list{
  max-width:100%;
}

/*********instructor profiles*/

.layout__content--our-instructors{
  display:flex;
  flex-wrap:wrap;
}

.layout__content--our-instructors .instructor-profile{
  flex-basis:50%;
}

.instructor-profile h3 {
  margin-bottom: 0px;
}

.instructor-profile .row .columns .editor-content{
  display:flex;
}

.instructor-profile .row .columns .editor-content p{
  flex-basis:fit-content;
  margin-right:20px;
}

/*********footer*/
.footer{
  background-color:#000000;
}

.footer .footer__company__info,
.footer .footer__links,
.footer a{
  color:#ffffff;
}

/*********responsiveness*/

@media (max-width: 1080px){
 
  .layout__content--our-instructors .instructor-profile{
    flex-basis:100%;
  }

  .instructor-profile .row .columns .editor-content{
    display:flex;
    flex-flow:wrap;
  }

}

@media (min-width: 640px){
  
  .global-nav__container{
    max-width: 640px;
    margin: 0 auto;
  }
  
}

@media (min-width: 768px){
  
  .global-nav__container{
    max-width: 768px;
    margin: 0 auto;
  }
  
}

@media (min-width: 1024px){

  .global-nav__container{
    max-width: 1024px;
    margin: 0 auto;
  }

}

@media (min-width: 1440px){

  .global-nav__container{
    max-width: 1440px;
    margin: 0 auto;
  }

  /* if any width issues, set this back to max-width 75% */
  .editor-content{
    max-width:100%;
  }

  .instructor-profile .editor-content {
    max-width: 95%;
  }

}


/******* STAGING CSS - including staging as a class name and toggle the display property for prodduction QA *******/
.staging{
  display:none;
}

/* ==========================================================================
   ==========================================================================
   ==                                                                      ==
   ==             ▼▼▼   START - DIGITAL INTELLECTIVE CSS   ▼▼▼             ==
   ==                                                                      ==
   ==========================================================================
   ========================================================================== */

/* Proxima Nova loads in TI via the Header Scripts <link> (Adobe web project nmf8sly). Inter below is local-preview/fallback. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&display=swap"); /* Inter, fallback */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&text=%E2%86%90%E2%86%92"); /* the two arrow glyphs only, neither font ships them */

/* HOW TO READ THIS FILE

   Five sections: VARIABLES, ELEMENTS, COMPONENTS, OVERRIDE CLASSES, TI OVERRIDES.
   Each overrides the one above it. ELEMENTS are the pieces several components share.

   Some selectors name the same class twice, like
   table.pua-compare-table.pua-compare-table. This is intentional. TI's own CSS
   targets these elements more specifically than a single class can, and naming
   the class twice raises ours to match. Custom CSS loads last, so a tie wins.
   Do not simplify them to one class or TI's styling takes over. The same reason
   explains the !important on headings and link colors.

   .pua-quote + .pua-quote is not this. It means a quote following a quote. */

/* ==============================================================
   VARIABLES
   ============================================================== */

/* --------------------------------------------------------------
   GLOBAL VARIABLES
   -------------------------------------------------------------- */

:root {

  /* --- Font Family --- */
  --pua-font-family: "proxima-nova", "Inter", "Helvetica Neue", Arial, sans-serif;

  /* ===== COLORS ===== */
  /* Each meets WCAG 2.1 AA for its own job: 3:1 for elements and 4.5:1 for text. */

  /* --- Magenta --- */
  --pua-magenta-brand:         #E91E8C; /* PUA brand value, untouched */
  --pua-magenta-element:       var(--pua-magenta-brand); /* lines, borders, icons on white (4.18:1) */
  --pua-magenta-txt:           #CA1477; /* deepened so it also passes on every tint (4.52:1 on the magenta tint, 5.42:1 on white) */
  --pua-magenta-txt-on-dark:   #EB3396; /* lightened for text on --pua-black-bg (4.51:1) */
  --pua-magenta-bg:            #E11684; /* deepened 3% so WHITE text passes on it (4.52:1) */
  --pua-magenta-contrast:      white; /* text on -bg (4.52:1) */
  --pua-magenta-tint-bg:       #FCE4F3;
  --pua-magenta-tint-contrast: #1A1A1A; /* text on -bg (14.53:1) */

  /* --- Yellow --- */
  --pua-yellow-brand:         #FFE600; /* PUA brand value, untouched */
  --pua-yellow-element:       #A69600; /* deepened for icons and list markers on white (3.01:1) */
  --pua-yellow-txt:           #766B00; /* deepened so it also passes on every tint (4.53:1 on the magenta tint, 5.42:1 on white) */
  --pua-yellow-txt-on-dark:   var(--pua-yellow-brand); /* text on --pua-black-bg (13.73:1) */
  --pua-yellow-bg:            var(--pua-yellow-brand); /* background fill */
  --pua-yellow-contrast:      #1A1A1A; /* text on -bg (13.73:1), takes DARK text not white */
  --pua-yellow-tint-bg:       #FFF8E1;
  --pua-yellow-tint-contrast: #1A1A1A; /* text on -bg (16.38:1) */

  /* --- Cyan (from the PUA corporate site) --- */
  --pua-cyan-brand:         #00AEEF; /* PUA brand value, untouched */
  --pua-cyan-element:       #009FDB; /* deepened for lines, borders, icons on white (3.01:1) */
  --pua-cyan-txt:           #00719C; /* deepened so it also passes on every tint (4.56:1 on the magenta tint, 5.47:1 on white) */
  --pua-cyan-txt-on-dark:   var(--pua-cyan-brand); /* text on --pua-black-bg (6.88:1) */
  --pua-cyan-bg:            var(--pua-cyan-brand); /* background fill */
  --pua-cyan-contrast:      #1A1A1A; /* text on -bg (6.88:1), takes DARK text not white */
  --pua-cyan-tint-bg:       #F2F7F9; /* tint of the corporate #00AEEF, matched to the design system's lightness */
  --pua-cyan-tint-contrast: #1A1A1A; /* text on -bg (16.12:1) */

  /* --- Near Black --- */
  --pua-black-brand:       #1A1A1A; /* added as this family's brand value */
  --pua-black-element:     var(--pua-black-brand); /* lines, borders, icons on white (17.40:1) */
  --pua-black-txt:         var(--pua-black-brand); /* body text on white (17.40:1) */
  --pua-black-txt-on-dark: #828282; /* body text on --pua-black-bg (4.53:1) */
  --pua-black-bg:          var(--pua-black-brand); /* background fill */
  --pua-black-contrast:    white; /* text on -bg (17.40:1) */

  /* --- Dark Gray --- */
  --pua-gray-dark-brand:       #333333; /* added as this family's brand value */
  --pua-gray-dark-element:     var(--pua-gray-dark-brand); /* lines, borders, icons on white (12.63:1) */
  --pua-gray-dark-txt:         var(--pua-gray-dark-brand); /* body text on white (12.63:1) */
  --pua-gray-dark-txt-on-dark: #828282; /* body text on --pua-black-bg (4.53:1) */
  --pua-gray-dark-bg:          var(--pua-gray-dark-brand); /* background fill */
  --pua-gray-dark-contrast:    white; /* text on -bg (12.63:1) */

  /* --- Mid Gray --- */
  --pua-gray-mid-brand:       #555555; /* added as this family's brand value */
  --pua-gray-mid-element:     var(--pua-gray-mid-brand); /* lines, borders, icons on white (7.46:1) */
  --pua-gray-mid-txt:         var(--pua-gray-mid-brand); /* body text on white (7.46:1) */
  --pua-gray-mid-txt-on-dark: #828282; /* body text on --pua-black-bg (4.53:1) */
  --pua-gray-mid-bg:          var(--pua-gray-mid-brand); /* background fill */
  --pua-gray-mid-contrast:    white; /* text on -bg (7.46:1) */

  /* --- Muted Gray --- */
  --pua-gray-muted-brand:       #888888; /* added as this family's brand value */
  --pua-gray-muted-element:     var(--pua-gray-muted-brand); /* lines, borders, icons on white (3.54:1) */
  --pua-gray-muted-txt:         #696969; /* deepened so it also passes on every tint (4.58:1 on the magenta tint, 5.49:1 on white) */
  --pua-gray-muted-txt-on-dark: var(--pua-gray-muted-brand); /* body text on --pua-black-bg (4.91:1) */
  --pua-gray-muted-bg:          var(--pua-gray-muted-brand); /* background fill */
  --pua-gray-muted-contrast:    #1A1A1A; /* text on -bg (4.91:1), takes DARK text not white */

  /* --- Light Gray --- */
  --pua-gray-light-brand:       #F2F2F2; /* added as this family's brand value */
  --pua-gray-light-element:     #949494; /* lines, borders, icons on white (3.03:1) */
  --pua-gray-light-txt:         #696969; /* same value as -gray-muted-txt: light gray is unusable as text, so both deepen to here */
  --pua-gray-light-txt-on-dark: var(--pua-gray-light-brand); /* body text on --pua-black-bg (15.55:1) */
  --pua-gray-light-bg:          var(--pua-gray-light-brand); /* background fill */
  --pua-gray-light-contrast:    #1A1A1A; /* text on -bg (15.55:1), takes DARK text not white */
  --pua-gray-tint-bg:           #F9F9F9;
  --pua-gray-tint-contrast:     #1A1A1A; /* text on -bg (15.96:1) */

  /* --- White --- */
  --pua-white-brand:       #FFFFFF; /* added as this family's brand value */
  --pua-white-txt-on-dark: var(--pua-white-brand); /* body text on --pua-black-bg (17.40:1). No -element/-txt role: white on white is unusable */
  --pua-white-bg:          var(--pua-white-brand); /* page background, card surfaces */
  --pua-white-contrast:    #333333; /* text on -bg (12.63:1) */

  /* --- Border grays. Outlines and hairlines only, never text or fill, so neither belongs to a color family above. --- */
  --pua-hairline:               #E8E8E8; /* Outline on cards and boxes. The design system's own line gray, its most used at 9. The mockups drift across #F0F0F0, #ECECEC and #E0E0E0. */
  --pua-btn-ghost-border-color: #CCCCCC; /* Ghost button outline, the design system's .btn-ghost value. Decorative, so the 3:1 rule does not apply. */

  /* ===== LAYOUT ===== */

  --pua-section-inset:         40px; /* the mockups' side inset. px, so it tracks the header and footer. */
  --pua-text-max-width:  996px; /* body copy. The mockups' 740px holds 84% of their page; this is the same share of ours. */
  --pua-intro-max-width: 780px; /* the intro block. The mockups' 580px, scaled the same way, a step narrower than body copy. */

  /* ===== SYSTEM ===== */

  /* --- Focus Ring --- */
  --pua-focus-ring-width:  2px;
  --pua-focus-ring-offset: 2px;
  --pua-focus-ring-color:  #1A1A1A; /* 17.40:1 on white. Deliberately not the button color */

  /* --- Border Radius --- */
  --pua-button-border-radius:  4px; /* buttons and form fields */
  --pua-element-border-radius: 3px; /* badges, tags and ribbons */
  --pua-panel-border-radius:   6px; /* cards, panels, heroes and icon chips */
  --pua-pill-border-radius:    999px; /* fully round */

}

/* --------------------------------------------------------------
   ICON VARIABLES
   -------------------------------------------------------------- */

/* Traced from the design system. Colored via .pua-icon background-color. */

:root {
  --pua-icon-arrow-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M5 12l7-7 7 7'/%3E%3C/svg%3E");
  --pua-icon-bolt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(0.5 0)'%3E%3Cpath d='M13 2L3 14h7l-1 8 11-13h-7l1-7z'/%3E%3C/g%3E%3C/svg%3E"); /* Print Speed */
  --pua-icon-briefcase: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(0 0.5)'%3E%3Crect x='3' y='7' width='18' height='13' rx='2'/%3E%3Cpath d='M8 7V5a2 2 0 014 0v2'/%3E%3C/g%3E%3C/svg%3E");
  --pua-icon-building: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18M5 21V7l7-4 7 4v14M9 9h1M9 13h1M14 9h1M14 13h1'/%3E%3C/svg%3E");
  --pua-icon-cart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(0 0.5)'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 002 1.61h9.72a2 2 0 002-1.61L23 6H6'/%3E%3C/g%3E%3C/svg%3E");
  --pua-icon-check-marker: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg transform='translate(5.333 5.333) scale(0.5556)'%3E%3Cpolyline points='20 6 9 17 4 12' fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E");
  --pua-icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E"); /* the mockup's tick */
  --pua-icon-check-circle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cmask id='t'%3E%3Crect width='24' height='24' fill='white'/%3E%3Cg transform='translate(5.333 5.333) scale(0.5556)'%3E%3Cpolyline points='20 6 9 17 4 12' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/mask%3E%3Ccircle cx='12' cy='12' r='12' fill='black' mask='url(%23t)'/%3E%3C/svg%3E");
  --pua-icon-check-circle-outline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 12l2 2 4-4M21 12c0 4.97-4.03 9-9 9s-9-4.03-9-9 4.03-9 9-9 9 4.03 9 9z'/%3E%3C/svg%3E"); /* Verified Confidence */
  --pua-icon-circle-quartered: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zM12 2v20M2 12h20'/%3E%3C/svg%3E"); /* Registration (Wide Format only) */
  --pua-icon-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E");
  --pua-icon-crosshair: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='7'/%3E%3Cpath d='M12 1v22M1 12h22'/%3E%3C/svg%3E"); /* Registration */
  --pua-icon-droplet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(0 1.5)'%3E%3Cpath d='M12 2C9 6 6 9.5 6 13a6 6 0 0012 0c0-3.5-3-7-6-11z'/%3E%3C/g%3E%3C/svg%3E"); /* Ink Consumption */
  --pua-icon-facebook: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cg transform='translate(-0.5 0)'%3E%3Cpath d='M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z'/%3E%3C/g%3E%3C/svg%3E");
  --pua-icon-file: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3C/svg%3E");
  --pua-icon-globe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M2 12h20M12 2a14 14 0 010 20 14 14 0 010-20z'/%3E%3C/svg%3E"); /* Global Markets */
  --pua-icon-grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='M3 9h18M9 21V9'/%3E%3C/svg%3E"); /* Uniformity */
  --pua-icon-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z'/%3E%3C/svg%3E");
  --pua-icon-layers: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2L2 7l10 5 10-5-10-5z'/%3E%3Cpath d='M2 12l10 5 10-5'/%3E%3Cpath d='M2 17l10 5 10-5'/%3E%3C/svg%3E");
  --pua-icon-linkedin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cg transform='translate(0 0.5)'%3E%3Cpath d='M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2 9h4v12H2z'/%3E%3Ccircle cx='4' cy='4' r='2'/%3E%3C/g%3E%3C/svg%3E");
  --pua-icon-magnifier: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(-0.5 -0.5)'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/g%3E%3C/svg%3E"); /* Public Listing / Discoverability */
  --pua-icon-message: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z'/%3E%3C/svg%3E");
  --pua-icon-monitor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='3' width='20' height='14' rx='2'/%3E%3Cpath d='M8 21h8M12 17v4'/%3E%3C/svg%3E");
  --pua-icon-people: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75'/%3E%3C/svg%3E");
  --pua-icon-person: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20c0-4 3.6-7 8-7s8 3 8 7'/%3E%3C/svg%3E");
  --pua-icon-person-add: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(0.5 -0.5)'%3E%3Ccircle cx='10' cy='8' r='4'/%3E%3Cpath d='M2 21c0-4 3.6-7 8-7'/%3E%3Cpath d='M17 8h4M19 6v4'/%3E%3C/g%3E%3C/svg%3E");
  --pua-icon-play-screen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(0 0.5)'%3E%3Crect x='2' y='4' width='20' height='13' rx='2'/%3E%3Cpath d='M9 19h6M12 17v2'/%3E%3Cpath d='M10 8.5l5 3-5 3z'/%3E%3C/g%3E%3C/svg%3E");
  --pua-icon-refresh: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 0115-6.7M21 12a9 9 0 01-15 6.7M3 5v6h6M21 19v-6h-6'/%3E%3C/svg%3E"); /* Repeatability */
  --pua-icon-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-11V5l-8-3-8 3v6c0 7 8 11 8 11z'/%3E%3C/svg%3E"); /* Durability */
  --pua-icon-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(0 -0.45)'%3E%3Cpath d='M12 2l2.4 7.2H22l-6 4.4 2.3 7.2L12 16.4 5.7 20.8 8 13.6 2 9.2h7.6z'/%3E%3C/g%3E%3C/svg%3E");
  --pua-icon-starburst: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 1v6M12 17v6M4.2 4.2l4.2 4.2M15.5 15.5l4.3 4.3M1 12h6M17 12h6M4.2 19.8l4.2-4.2M15.5 8.5l4.3-4.3'/%3E%3C/svg%3E"); /* Color Gamut (Wide Format only) */
  --pua-icon-sun: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Cpath d='M12 1v2M12 21v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M1 12h2M21 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4'/%3E%3C/svg%3E"); /* Lightfastness */
  --pua-icon-swap: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 1l4 4-4 4M21 5H9a4 4 0 00-4 4v1M7 23l-4-4 4-4M3 19h12a4 4 0 004-4v-1'/%3E%3C/svg%3E");
  --pua-icon-target: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); /* Color Accuracy */
  --pua-icon-trend-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(0 5)'%3E%3Cpath d='M3 12l5-5 4 4 9-9M15 2h6v6'/%3E%3C/g%3E%3C/svg%3E");
  --pua-icon-twitter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cg transform='translate(0 -0.5)'%3E%3Cpath d='M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z'/%3E%3C/g%3E%3C/svg%3E");
  --pua-icon-upload: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M17 8l-5-5-5 5M12 3v12'/%3E%3C/svg%3E");
  --pua-icon-video: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(0.5 2.5)'%3E%3Crect x='2' y='4' width='14' height='11' rx='1'/%3E%3Cpath d='M16 8l5-3v10l-5-3'/%3E%3C/g%3E%3C/svg%3E");


}

/* ==============================================================
   ELEMENTS
   ============================================================== */

/* --------------------------------------------------------------
   HEADINGS
   -------------------------------------------------------------- */

/* Headings. The tag sets the size. !important is needed to beat TI's ID selector. */
.pua-heading {
  display: block;
  font-family: var(--pua-font-family) !important;
  color: var(--pua-black-txt) !important;
  margin-top: 0;
}

h1.pua-heading { font-size: 2.625rem; line-height: 1.1; font-weight: 900; margin-bottom: 1.125rem; }
h2.pua-heading { font-size: 1.625rem; line-height: 1.2; font-weight: 700; margin-bottom: 1.75rem; }
h3.pua-heading { font-size: 1.25rem; line-height: 1.3; font-weight: 700; margin-bottom: 0.5rem; }
:is(h4, h5, h6).pua-heading { font-size: 1rem; line-height: 1.4; font-weight: 700; margin-bottom: 0.375rem; }

/* A border-bottom color class adds the underline. */
.pua-heading[class*="pua-border-bottom-"] {
  display: inline-block;
  border-bottom-style: solid;
  border-bottom-width: 3px;
  border-bottom-color: var(--pua-cyan-element);
  padding-bottom: 0.75rem;
}

/* --------------------------------------------------------------
   BODY TEXT
   -------------------------------------------------------------- */

.pua-body {
  display: block;
  font-family: var(--pua-font-family);
  font-size: 1rem; /* 16px */
  line-height: 1.75;
  font-weight: 400;
  color: var(--pua-gray-dark-txt);
  margin-top: 0;
  margin-bottom: 1rem;
}

.pua-body-sm {
  display: block;
  font-family: var(--pua-font-family);
  font-size: 0.875rem !important;
  line-height: 1.6 !important;
  font-weight: 400 !important;
  color: var(--pua-gray-mid-txt) !important;
}

.pua-body-sm strong {
  font-weight: 700;
  color: var(--pua-black-txt);
}

/* A question in a question-and-answer run. The answer follows as ordinary paragraphs. */
.pua-qa-question {
  display: block;
  font-family: var(--pua-font-family);
  font-size: 1.0625rem; /* 17px, one step above the answer */
  line-height: 1.4;
  font-weight: 700;
  color: var(--pua-black-txt);
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

/* The first question sits under the section heading, which supplies its own gap. */
.pua-section-header-row + .pua-qa-question {
  margin-top: 0;
}

/* --------------------------------------------------------------
   EYEBROWS
   -------------------------------------------------------------- */

.pua-eyebrow {
  display: block;
  font-family: var(--pua-font-family);
  font-size: 0.6875rem; /* 11px */
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pua-cyan-txt);
  margin-top: 0;
  margin-bottom: 0;
}

/* Smaller size, used above cards, CTA rows and tag lists. */
.pua-eyebrow-sm {
  font-size: 0.625rem;
  line-height: 1.4;
  letter-spacing: 0.09em;
}

/* Pill eyebrow. Approved change from the design system. */
.pua-eyebrow-pill {
  display: block;
  width: fit-content;
  background-color: var(--pua-magenta-bg);
  color: var(--pua-magenta-contrast);
  padding: 0.375rem 1rem;
  border-radius: var(--pua-pill-border-radius);
}

/* Gap below an eyebrow, by what follows it. */
.pua-section-header-row .pua-eyebrow {
  margin-bottom: 0.5rem;
}

/* Label sits directly above the list. */
.pua-eyebrow:has(+ .pua-best-for-pills) {
  margin-bottom: 10px;
}

.pua-cta-row .pua-eyebrow {
  margin-bottom: 0.5rem;
}

.pua-card-header .pua-eyebrow {
  margin-bottom: 0.5rem;
}

.pua-content-box .pua-eyebrow {
  margin-bottom: 0.875rem;
}

/* --------------------------------------------------------------
   BUTTONS
   -------------------------------------------------------------- */

/* Hover inverts fill and outline. Border at rest so nothing shifts. */

.pua-btn {
  display: inline-block;
  box-sizing: border-box;
  font-family: var(--pua-font-family);
  font-size: 0.875rem;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: calc(0.75rem - 2px)
           calc(1.5rem - 2px);
  border: 2px solid var(--pua-btn-edge, transparent);
  border-radius: var(--pua-button-border-radius);
  background-color: var(--pua-btn-fill, transparent);
  color: var(--pua-btn-label, inherit);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms ease,
              border-color 150ms ease,
              color 150ms ease;
}

/* Link color. */
a.pua-btn.pua-btn {
  color: var(--pua-btn-label, inherit);
}

/* TI colors link hover and focus at 0,3,1, so these go to 0,4,1. */
a.pua-btn.pua-btn.pua-btn:hover,
a.pua-btn.pua-btn.pua-btn:focus,
a.pua-btn.pua-btn.pua-btn:focus-visible {
  color: var(--pua-btn-label, inherit);
}

/* Buttons inside a component drop to 13px. Standalone stay 14px. */
.pua-callout-box .pua-btn,
.pua-card .pua-btn,
.pua-price-card .pua-btn {
  font-size: 0.8125rem;
}

/* Small size. Composes with any color variant. */
.pua-btn-sm {
  font-size: 0.8125rem;
  line-height: 1.2;
  border-width: 1.5px;
  padding: calc(0.5rem - 1.5px)
           calc(1rem - 1.5px);
}

/* Keyboard focus ring. */
.pua-btn:focus-visible {
  outline: var(--pua-focus-ring-width) solid var(--pua-focus-ring-color);
  outline-offset: var(--pua-focus-ring-offset);
}

/* Primary CTA. Solid at rest, outline on hover. */
.pua-btn-primary {
  --pua-btn-fill:  var(--pua-magenta-bg);
  --pua-btn-edge:  var(--pua-magenta-bg);
  --pua-btn-label: var(--pua-magenta-contrast);
}

/* Cyan. Solid at rest, outline on hover. */
.pua-btn-cyan {
  --pua-btn-fill:  var(--pua-cyan-bg);
  --pua-btn-edge:  var(--pua-cyan-bg);
  --pua-btn-label: var(--pua-cyan-contrast);
}

/* Dark. Solid at rest, outline on hover. */
.pua-btn-dark {
  --pua-btn-fill:  var(--pua-black-bg);
  --pua-btn-edge:  var(--pua-black-bg);
  --pua-btn-label: var(--pua-black-contrast);
}

/* Secondary. Outline at rest, solid on hover. */
.pua-btn-secondary {
  --pua-btn-fill:  transparent;
  --pua-btn-edge:  var(--pua-magenta-bg);
  --pua-btn-label: var(--pua-magenta-txt);
}

/* Cyan outline. Outline at rest, solid on hover. */
.pua-btn-cyan-outline {
  --pua-btn-fill:  transparent;
  --pua-btn-edge:  var(--pua-cyan-bg);
  --pua-btn-label: var(--pua-cyan-txt);
}

/* Ghost button. Fills with its border color on hover. */
.pua-btn-ghost {
  --pua-btn-fill:  transparent;
  --pua-btn-edge:  var(--pua-btn-ghost-border-color);
  --pua-btn-label: var(--pua-black-txt);
}

/* Hover, scoped so it cannot stick after a tap. */
@media (hover: hover) {

  .pua-btn-primary:hover {
    --pua-btn-fill:  transparent;
    --pua-btn-label: var(--pua-magenta-txt);
  }

  .pua-btn-cyan:hover {
    --pua-btn-fill:  transparent;
    --pua-btn-label: var(--pua-cyan-txt);
  }

  .pua-btn-dark:hover {
    --pua-btn-fill:  transparent;
    --pua-btn-label: var(--pua-black-txt);
  }

  .pua-btn-secondary:hover {
    --pua-btn-fill:  var(--pua-magenta-bg);
    --pua-btn-label: var(--pua-magenta-contrast);
  }

  .pua-btn-cyan-outline:hover {
    --pua-btn-fill:  var(--pua-cyan-bg);
    --pua-btn-label: var(--pua-cyan-contrast);
  }

  .pua-btn-ghost:hover {
    --pua-btn-fill: var(--pua-btn-ghost-border-color);
  }

}

/* --------------------------------------------------------------
   PRICE BLOCK
   -------------------------------------------------------------- */

/* Price block. Used on its own, in a price card or in a table cell. */
.pua-price-row {
  display: flex;
  align-items: baseline;
  gap: 0.625rem;
  margin-bottom: 0.25rem;
}

.pua-price {
  font-family: var(--pua-font-family);
  line-height: 1.2;
  font-size: 1.625rem;
  font-weight: 900;
  color: var(--pua-black-txt);
  margin: 0;
}

.pua-price-label {
  font-family: var(--pua-font-family);
  line-height: 1.2;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--pua-gray-muted-txt);
  margin: 0;
}

.pua-price-non {
  font-family: var(--pua-font-family);
  line-height: 1.2;
  font-size: 0.75rem; /* 12px */
  color: var(--pua-gray-muted-txt);
  margin: 0 0 1.125rem;
}

/* --------------------------------------------------------------
   LISTS
   -------------------------------------------------------------- */

/* Base list. Renders bullets. Add .pua-checkmark, .pua-numbered or .pua-numbered-lg for other markers. */
.pua-list {
  /* Marker color. Read by every marker below and set by the .pua-list-* color classes. */
  --pua-list-marker-color: var(--pua-magenta-element);
  font-family: var(--pua-font-family);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--pua-gray-dark-txt);
  list-style-position: inside;
  margin: 0;
  padding: 0;
}

/* Wrapped lines line up under the text. */
.pua-list > li {
  padding-left: 1.25rem;
  text-indent: -1.25rem;
}

.pua-list > li + li {
  margin-top: 10px;
}

/* Plain bullet: custom 7px round marker, sized and centered on the first text line. */
.pua-list:not(.pua-checkmark):not(.pua-numbered):not(.pua-numbered-lg) {
  list-style: none;
}

.pua-list:not(.pua-checkmark):not(.pua-numbered):not(.pua-numbered-lg) > li {
  display: grid;
  grid-template-columns: 7px 1fr;
  column-gap: 0.625rem;
  align-items: start;
  padding-left: 0;
  text-indent: 0;
}

.pua-list:not(.pua-checkmark):not(.pua-numbered):not(.pua-numbered-lg) > li::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--pua-list-marker-color);
  margin-top: calc((0.875rem * 1.6 - 7px) / 2);
}

/* --- Checkmark markers --- */
.pua-checkmark {
  list-style: none;
}

.pua-checkmark > li {
  display: grid;
  grid-template-columns: 18px 1fr;
  column-gap: 6px;
  align-items: start;
  padding-left: 0;
  text-indent: 0;
}

.pua-checkmark > li::before {
  content: "";
  width: 18px;
  height: 18px;
  background-color: var(--pua-list-marker-color);
  margin-top: calc((0.875rem * 1.6 - 18px) / 2);
  -webkit-mask-image: var(--pua-icon-check-marker);
  mask-image: var(--pua-icon-check-marker);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* Filled circle with the tick knocked out. .pua-list-bg only works combined with a marker type. */
.pua-checkmark.pua-list-bg > li {
  column-gap: 10px;
}

.pua-checkmark.pua-list-bg > li::before {
  -webkit-mask-image: var(--pua-icon-check-circle);
  mask-image: var(--pua-icon-check-circle);
}

/* --- Numbered markers --- */
.pua-numbered {
  --pua-step-size: 26px;
  --pua-step-numeral: 0.6875rem;
  list-style: none;
  counter-reset: pua-item;
}

.pua-numbered > li {
  counter-increment: pua-item;
  display: grid;
  grid-template-columns: var(--pua-step-size) 1fr;
  column-gap: 12px;
  align-items: start;
  padding-left: 0;
  text-indent: 0;
}

.pua-numbered > li > * {
  grid-column: 2;
}

.pua-numbered > li + li {
  margin-top: 14px;
}

.pua-numbered > li::before {
  content: counter(pua-item);
  display: grid;
  place-items: center;
  grid-column: 1;
  width: var(--pua-step-size);
  height: var(--pua-step-size);
  color: var(--pua-list-marker-color);
  font-size: var(--pua-step-numeral);
  font-weight: 700;
  line-height: 1;
  margin-top: calc((0.875rem * 1.6 - var(--pua-step-size)) / 2);
}

/* Filled circle behind the numeral. */
.pua-numbered.pua-list-bg > li::before {
  background-color: var(--pua-list-marker-color);
  border-radius: 50%;
  color: var(--pua-white-bg);
}

/* Bigger circles joined by a line, so a numbered list reads as a sequence. */
.pua-numbered.pua-list-progression {
  --pua-step-size: 36px;
  --pua-step-numeral: 0.875rem;
  --pua-step-gap: 28px;
}

.pua-list-progression > li {
  position: relative;
}

/* The circle spans every row, so row one is sized by the title and not by the
   circle. Without this the circle's height opens a gap above the copy. */
.pua-list-progression > li::before {
  grid-row: 1 / span 99;
  margin-top: 0;
}

.pua-list-progression > li + li {
  margin-top: var(--pua-step-gap);
}

/* The connector runs from this circle to the next, and stops at the last. */
.pua-list-progression > li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: calc(var(--pua-step-size) / 2);
  top: var(--pua-step-size);
  bottom: calc(-1 * var(--pua-step-gap));
  width: 2px;
  transform: translateX(-50%);
  background-color: var(--pua-hairline);
}

.pua-list-progression > li > p {
  margin: 0;
}

/* Same type as the large-numeral list, pushed down to sit level with the circle. */
.pua-list-progression > li > p:first-child {
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--pua-black-txt);
  margin-top: calc((var(--pua-step-size) - 0.9375rem * 1.3) / 2);
}

/* Already 700, so bolder would step the title to 900. */
.pua-list-progression > li > p:first-child strong {
  font-weight: 700;
}

.pua-list-progression > li > p:first-child + p {
  margin-top: 0.4375rem;
}

/* Large numerals with a leading zero. .pua-list-bg does not apply. */
.pua-numbered-lg {
  list-style: none;
  counter-reset: pua-item;
}

.pua-numbered-lg > li {
  counter-increment: pua-item;
  display: grid;
  grid-template-columns: 36px 1fr;
  column-gap: 1.125rem;
  align-items: start;
  padding-left: 0;
  text-indent: 0;
}

/* Everything except the number stacks in the second column. */
.pua-numbered-lg > li > * {
  grid-column: 2;
}

.pua-numbered-lg > li + li {
  margin-top: 1.5rem;
}

.pua-numbered-lg > li::before {
  content: counter(pua-item, decimal-leading-zero);
  grid-column: 1;
  grid-row: 1 / span 99;
  font-family: var(--pua-font-family);
  color: var(--pua-list-marker-color);
  font-size: 1.75rem;
  font-weight: 900;
  line-height: 1;
}

.pua-numbered-lg :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--pua-font-family) !important;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--pua-black-txt) !important;
  margin: 0 0 0.4375rem;
}

/* Doubled so the component keeps its own paragraph spacing when nested in a content box. */
.pua-numbered-lg.pua-numbered-lg p {
  font-family: var(--pua-font-family);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--pua-gray-mid-txt);
  margin: 0;
}

/* Gap below the block. */
.pua-list { margin-bottom: 1.25rem; }

/* Gap below the block. */
.pua-numbered,
.pua-numbered-lg { margin-bottom: 1.125rem; }

/* --------------------------------------------------------------
   LIST MODIFIERS
   -------------------------------------------------------------- */

/* List modifiers. Load after the lists so they win. */

/* Marker color. Each points at a palette token. */
.pua-list-magenta     { --pua-list-marker-color: var(--pua-magenta-element); }
.pua-list-yellow      { --pua-list-marker-color: var(--pua-yellow-element); } /* markers carry meaning, so not the brand value */
.pua-list-cyan        { --pua-list-marker-color: var(--pua-cyan-element); }
.pua-list-black       { --pua-list-marker-color: var(--pua-black-element); }
.pua-list-gray-dark   { --pua-list-marker-color: var(--pua-gray-dark-element); }
.pua-list-gray-mid    { --pua-list-marker-color: var(--pua-gray-mid-element); }
.pua-list-gray-muted  { --pua-list-marker-color: var(--pua-gray-muted-element); }
.pua-list-gray-light  { --pua-list-marker-color: var(--pua-gray-light-element); }

/* Ordinary bullets and numbers take the same color classes. */
[class*="pua-list-"] > li::marker {
  color: var(--pua-list-marker-color);
}

/* Two columns. An odd last item stays in its own column. */
.pua-list-columns {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 1.75rem;
  row-gap: 10px;
}

.pua-list-columns > li + li {
  margin-top: 0;
}

/* Turns any list into a bordered two-column grid. */
.pua-list-blocks {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  background-color: var(--pua-hairline);
  border: 1px solid var(--pua-hairline);
  border-radius: var(--pua-panel-border-radius);
  overflow: hidden;
}

.pua-list-blocks > li {
  background-color: var(--pua-white-bg);
  padding: 1.75rem 1.625rem;
}

.pua-list-blocks > li + li {
  margin-top: 0;
}

/* An odd last item fills the row. */
.pua-list-blocks > *:last-child:nth-child(odd) {
  grid-column: span 2;
}

/* Hairline between items instead of a gap. A rule cannot span a two-column
   grid, so the columns class switches the dividers off. */
.pua-list-divided:not(.pua-list-columns) > li {
  padding: 1.1875rem 0;
}

.pua-list-divided:not(.pua-list-columns) > li + li {
  margin-top: 0;
  border-top: 1px solid var(--pua-hairline);
}

.pua-list-divided:not(.pua-list-columns) > li:first-child {
  padding-top: 0;
}

.pua-list-divided:not(.pua-list-columns) > li:last-child {
  padding-bottom: 0;
}

/* --------------------------------------------------------------
   CERTIFICATION BADGES
   -------------------------------------------------------------- */

/* Holds a badge or logo placed from TI's library. content-box pins the 108px to the image area,
   so the band is the same depth with or without TI's border-box reset. */
.pua-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: content-box;
  min-height: 108px;
  padding: 1.5rem 0 1.125rem;
  background-color: var(--pua-gray-tint-bg);
  border-bottom: 1px solid var(--pua-hairline);
}

/* TI wraps editor images in a figure, which carries a 16px 40px default margin. */
.pua-badge figure,
.pua-content-box-media figure {
  margin: 0;
}

/* Caps the height at 108px and the width to the column. Never stretches or distorts. */
.pua-badge img {
  display: block;
  max-width: 100%;
  max-height: 108px;
  width: auto;
  height: auto;
}

/* --------------------------------------------------------------
   LINK
   -------------------------------------------------------------- */

/* TI colors editor links at 0,2,1, so the class is repeated to match it. */
a.pua-link.pua-link {
  color: var(--pua-magenta-txt);
}

/* TI colors link hover at 0,3,1, so these go to 0,4,1. The color holds and an underline appears. */
a.pua-link.pua-link.pua-link:hover,
a.pua-link.pua-link.pua-link:focus,
a.pua-link.pua-link.pua-link:focus-visible {
  color: var(--pua-magenta-txt);
  text-decoration: underline;
}

/* Plain text link. Size follows its container. Swap color with any .pua-txt-* class. */
.pua-link {
  font-family: var(--pua-font-family);
  font-weight: 700;
  color: var(--pua-magenta-txt);
  text-decoration: none;
}

/* --------------------------------------------------------------
   ARROW LINK
   -------------------------------------------------------------- */

/* TI colors editor links at 0,2,1, so the class is repeated to match it. */
a.pua-arrow-link.pua-arrow-link {
  color: var(--pua-magenta-txt);
}

/* TI colors link hover at 0,3,1, so these go to 0,4,1. The color holds and an underline appears. */
a.pua-arrow-link.pua-arrow-link.pua-arrow-link:hover,
a.pua-arrow-link.pua-arrow-link.pua-arrow-link:focus,
a.pua-arrow-link.pua-arrow-link.pua-arrow-link:focus-visible {
  color: var(--pua-magenta-txt);
  text-decoration: underline;
}

/* Arrow link. Swap color with any .pua-txt-* class. */
.pua-arrow-link {
  font-family: var(--pua-font-family);
  font-size: 0.8125rem;
  line-height: 1.2;
  font-weight: 700;
  color: var(--pua-magenta-txt);
  text-decoration: none;
}

.pua-arrow-link::after {
  content: "\00a0\2192";
  color: var(--pua-arrow-color, currentColor);
  font-family: "Inter", sans-serif;
  font-weight: 900;
  vertical-align: -0.077em;
}

/* Back version. Arrow leads the text. Add alongside .pua-arrow-link. */
.pua-arrow-link-back::after {
  content: none;
}

.pua-arrow-link-back::before {
  content: "\2190\00a0";
  color: var(--pua-arrow-color, currentColor);
  font-family: "Inter", sans-serif;
  font-weight: 900;
  vertical-align: -0.077em;
}

/* Up version. Arrow points up and trails the text. Add alongside .pua-arrow-link. */
.pua-arrow-link-up::after { content: "\00a0\2191"; }

/* Gap below the block. */
p:has(> .pua-arrow-link) { margin-bottom: 2rem; }

/* --------------------------------------------------------------
   ICON CHIP
   -------------------------------------------------------------- */

/* Shape comes from .pua-icon in the ICON MASK UTILITY group. */
/* Colored square behind an icon. Pair with a .pua-bg-* class. */
.pua-icon-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: var(--pua-panel-border-radius);
}

.pua-icon-chip .pua-icon {
  width: 17px;
  height: 17px;
}

/* ==============================================================
   COMPONENTS
   ============================================================== */

/* --------------------------------------------------------------
   CALLOUT BOX
   -------------------------------------------------------------- */

/* Callout box. Only the background and border color change. */

/* Default text color. A .pua-bg-* class replaces it. */
:where(.pua-callout-box) {
  color: var(--pua-gray-dark-txt);
}

.pua-callout-box {
  padding: 1.75rem 2rem;
  border-radius: var(--pua-panel-border-radius);
}

/* No visible fill, so an outline makes it read as a box. */
.pua-callout-box:not([class*="pua-bg-"]),
.pua-callout-box.pua-bg-white {
  border: 1px solid var(--pua-hairline);
}

/* Row only when an action is present. */
.pua-callout-box:has(.pua-callout-box-action) {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6%;
}

.pua-callout-box-text {
  flex: 1;
}

/* Wraps its own children, so the gaps come from here rather than a margin class.
   Used on its own it stays left; only inside a callout does it sit right. */
.pua-callout-box-action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
}

.pua-callout-box .pua-callout-box-action {
  justify-content: flex-end;
}

/* Text links on their own sit tight when they wrap; a button needs more air. */
.pua-callout-box-action:not(:has(.pua-btn)) {
  row-gap: 6px;
}

/* Wrapping items in paragraphs turns the row into a column, so they always stack.
   A column sizes to its content, so the action can still shrink as the box narrows. */
.pua-callout-box-action:has(> p) {
  flex-direction: column;
  align-items: flex-start;
  row-gap: 10px;
}

/* Doubled so the component keeps its own paragraph spacing when nested in a content box. */
.pua-callout-box-action.pua-callout-box-action > p {
  margin: 0;
}

.pua-callout-box .pua-callout-box-action:has(> p) {
  align-items: flex-end;
  text-align: right;
}

/* Box headings are real headings, sized as a title. */
.pua-callout-box :is(h1, h2, h3, h4, h5, h6) {
  display: block;
  font-family: var(--pua-font-family) !important;
  font-size: 1.0625rem; /* 17px */
  font-weight: 700;
  line-height: 1.2;
  margin-top: 0;
  margin-bottom: 0.5rem;
}

.pua-callout-box p:not(.pua-eyebrow, .pua-body, .pua-body-sm, .pua-price-mention) {
  display: block;
  font-family: var(--pua-font-family);
  font-size: 0.875rem;
  line-height: 1.65;
  color: inherit;
  margin-top: 0;
  margin-bottom: 0;
}

.pua-callout-box p:not(.pua-eyebrow, .pua-body, .pua-body-sm, .pua-price-mention) + p:not(.pua-eyebrow, .pua-body, .pua-body-sm, .pua-price-mention) {
  margin-top: 1rem;
}

/* That rule is (0,3,2), so the action names its class twice to match it and
   loads after, letting its own 10px gap set the spacing instead. */
.pua-callout-box .pua-callout-box-action.pua-callout-box-action > p + p {
  margin-top: 0;
}

/* A paragraph or unclassed div holding a button becomes a row. */
.pua-callout-box :is(p, div:not([class])):has(> .pua-btn) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 2rem;
  row-gap: 12px;
}

/* An unclassed div inside that row keeps its links together. */
.pua-callout-box div:not([class]):has(> .pua-btn) > div {
  display: flex;
  flex-wrap: wrap;
  column-gap: 2rem;
  row-gap: 6px;
}

/* Equal-height cards: the body absorbs the slack so the buttons line up at the foot. */
.pua-callout-box.pua-callout-box-align-button {
  display: flex;
  flex-direction: column;
}

/* Both reach 0,3,2 to tie the component's p + p rule, and load after it. */
.pua-callout-box.pua-callout-box-align-button > p:first-child + p {
  margin-top: 10px;
  flex: 1;
}

.pua-callout-box.pua-callout-box-align-button > p:has(> a.pua-btn) {
  margin-top: 18px;
}

/* Title and body take their own colors. A solid fill keeps its own contrast color. */
/* Zero specificity so a pua-txt-* class overrides it, but !important still beats TI. */
:where(.pua-callout-box:is(:not([class*="pua-bg-"]), .pua-bg-white, .pua-bg-magenta-tint, .pua-bg-cyan-tint, .pua-bg-yellow-tint, .pua-bg-gray-tint)) :where(h1, h2, h3, h4, h5, h6) {
  color: var(--pua-black-txt) !important;
}

.pua-callout-box:is(:not([class*="pua-bg-"]), .pua-bg-white, .pua-bg-magenta-tint, .pua-bg-cyan-tint, .pua-bg-yellow-tint, .pua-bg-gray-tint):not(.pua-callout-box-sm) p:not(.pua-eyebrow, .pua-body, .pua-body-sm, .pua-price-mention) {
  color: var(--pua-gray-mid-txt);
}

/* Featured version. Add pua-border-left-magenta, -cyan, -yellow or -black to recolor the bar. */
.pua-callout-box.pua-callout-box-featured {
  padding: 2rem 2.25rem;
  border-left: 5px solid var(--pua-callout-line);
}

/* One colour class drives the bar, the eyebrow and the button.
   -line is decoration so it takes the brand value; -txt is text; -fill is a button background. */
.pua-callout-box-featured {
  --pua-callout-line:  var(--pua-magenta-brand);
  --pua-callout-txt:   var(--pua-magenta-txt);
  --pua-callout-fill:  var(--pua-magenta-bg);
  --pua-callout-label: var(--pua-magenta-contrast);
}

.pua-callout-box-featured.pua-border-left-magenta {
  --pua-callout-line:  var(--pua-magenta-brand);
  --pua-callout-txt:   var(--pua-magenta-txt);
  --pua-callout-fill:  var(--pua-magenta-bg);
  --pua-callout-label: var(--pua-magenta-contrast);
}

/* The brand fill cannot outline itself against the callout, so the button takes
   this family's text value; the bar keeps the brand value. */
.pua-callout-box-featured.pua-border-left-cyan {
  --pua-callout-line:  var(--pua-cyan-brand);
  --pua-callout-txt:   var(--pua-cyan-txt);
  --pua-callout-fill:  var(--pua-cyan-txt);
  --pua-callout-label: var(--pua-white-brand);
}

/* The brand fill cannot outline itself against the callout, so the button takes
   this family's text value; the bar keeps the brand value. The eyebrow takes the
   lightest compliant gray, since deepened yellow reads as olive. */
.pua-callout-box-featured.pua-border-left-yellow {
  --pua-callout-line:  var(--pua-yellow-brand);
  --pua-callout-txt:   var(--pua-gray-muted-txt);
  --pua-callout-fill:  var(--pua-yellow-txt);
  --pua-callout-label: var(--pua-white-brand);
}

/* Black has no readable text value of its own here, so the eyebrow takes the
   lightest gray that still passes on a tint (7.08:1 on the gray tint). */
.pua-callout-box-featured.pua-border-left-black {
  --pua-callout-line:  var(--pua-black-brand);
  --pua-callout-txt:   var(--pua-gray-mid-txt);
  --pua-callout-fill:  var(--pua-black-bg);
  --pua-callout-label: var(--pua-black-contrast);
}

.pua-callout-box-featured.pua-border-left-gray-dark {
  --pua-callout-line:  var(--pua-gray-dark-brand);
  --pua-callout-txt:   var(--pua-gray-dark-txt);
  --pua-callout-fill:  var(--pua-gray-dark-bg);
  --pua-callout-label: var(--pua-gray-dark-contrast);
}

.pua-callout-box-featured.pua-border-left-gray-mid {
  --pua-callout-line:  var(--pua-gray-mid-brand);
  --pua-callout-txt:   var(--pua-gray-mid-txt);
  --pua-callout-fill:  var(--pua-gray-mid-bg);
  --pua-callout-label: var(--pua-gray-mid-contrast);
}

.pua-callout-box-featured.pua-border-left-gray-muted {
  --pua-callout-line:  var(--pua-gray-muted-brand);
  --pua-callout-txt:   var(--pua-gray-muted-txt);
  --pua-callout-fill:  var(--pua-gray-muted-bg);
  --pua-callout-label: var(--pua-gray-muted-contrast);
}

/* The brand fill cannot outline itself against the callout, so the button takes
   this family's text value; the bar keeps the brand value. */
.pua-callout-box-featured.pua-border-left-gray-light {
  --pua-callout-line:  var(--pua-gray-light-brand);
  --pua-callout-txt:   var(--pua-gray-light-txt);
  --pua-callout-fill:  var(--pua-gray-light-txt);
  --pua-callout-label: var(--pua-white-brand);
}

/* The utility paints the bar with !important, so the component reclaims it. */
.pua-callout-box.pua-callout-box-featured[class*="pua-border-left-"] {
  border-left-color: var(--pua-callout-line) !important;
}

/* The button follows the callout unless it carries its own pua-btn-* class. */
:where(.pua-callout-box-featured) :where(.pua-btn) {
  --pua-btn-fill:  var(--pua-callout-fill);
  --pua-btn-edge:  var(--pua-callout-fill);
  --pua-btn-label: var(--pua-callout-label);
}

@media (hover: hover) {
  :where(.pua-callout-box-featured) :where(.pua-btn:hover) {
    --pua-btn-fill:  transparent;
    --pua-btn-label: var(--pua-callout-txt);
  }
}

/* The heading becomes an eyebrow. */
.pua-callout-box.pua-callout-box-featured :is(h1, h2, h3, h4, h5, h6) {
  font-size: 0.6875rem; /* 11px */
  line-height: 1.5;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

:where(.pua-callout-box.pua-callout-box-featured:is(:not([class*="pua-bg-"]), .pua-bg-white, .pua-bg-magenta-tint, .pua-bg-cyan-tint, .pua-bg-yellow-tint, .pua-bg-gray-tint)) :where(h1, h2, h3, h4, h5, h6) {
  color: var(--pua-callout-txt) !important;
}

.pua-callout-box.pua-callout-box-featured p:not(.pua-eyebrow, .pua-body, .pua-body-sm, .pua-price-mention) {
  font-size: 0.9375rem;
  line-height: 1.75;
}

/* Tighter size. Padding and body text only. */
.pua-callout-box-sm {
  padding: 0.875rem 1.25rem;
}

.pua-callout-box-sm p:not(.pua-eyebrow, .pua-body, .pua-body-sm, .pua-price-mention) {
  font-size: 0.8125rem;
  line-height: 1.6;
}

/* Gap below the block. */
.pua-callout-box { margin-bottom: 2rem; }

/* Gap below the block. */
.pua-callout-box-sm { margin-bottom: 1rem; }

/* --------------------------------------------------------------
   SECTION HEADER ROW
   -------------------------------------------------------------- */

/* Anchor targets leave the eyebrow visible with room above it. */
.pua-section [id] { scroll-margin-top: 3rem; }

.pua-section-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 1.75rem;
  gap: 1.5rem;
}

.pua-section-header-row .pua-heading {
  margin-bottom: 0;
}

/* Gap above the action, only when one exists. */
.pua-section-header-row > *:first-child + * {
  flex-shrink: 0;
  white-space: nowrap;
  margin-bottom: 0.875rem;
}

/* --------------------------------------------------------------
   BEST FOR PILLS
   -------------------------------------------------------------- */

/* Row of outlined link pills. */
.pua-best-for-pills {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0;
  padding: 0;
}

.pua-best-for-pills a {
  display: inline-block;
  font-family: var(--pua-font-family);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--pua-gray-dark-txt);
  background-color: transparent;
  border: 1px solid var(--pua-gray-muted-element);
  border-radius: var(--pua-button-border-radius);
  padding: 0.25rem 0.625rem;
  text-decoration: none;
  transition: background-color 150ms ease;
}

@media (hover: hover) {
  .pua-best-for-pills a:hover {
    background-color: var(--pua-gray-light-bg);
  }
}

.pua-best-for-pills a:focus-visible {
  outline: var(--pua-focus-ring-width) solid var(--pua-focus-ring-color);
  outline-offset: var(--pua-focus-ring-offset);
}

/* Gap below the block. */
.pua-best-for-pills { margin-bottom: 0.625rem; }

/* --------------------------------------------------------------
   PRICE MENTION
   -------------------------------------------------------------- */

/* Inline prices. Type a | between them; it takes the label color. */
.pua-price-mention {
  font-family: var(--pua-font-family);
  font-size: 0.8125rem !important;
  line-height: 1.2 !important;
  color: var(--pua-gray-muted-txt) !important;
  word-spacing: 0.15em;
  margin: 0;
}

.pua-price-mention b {
  font-weight: 700;
  color: var(--pua-black-txt);
}

/* --------------------------------------------------------------
   PRICE CARDS
   -------------------------------------------------------------- */

/* Bordered card: title, price block, optional button. */
.pua-price-card {
  background-color: var(--pua-white-bg);
  border: 1px solid var(--pua-hairline);
  border-radius: var(--pua-panel-border-radius);
  padding: 1.5rem 1.625rem;
}

.pua-price-card :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--pua-font-family) !important;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--pua-black-txt) !important;
  margin: 0 0 0.875rem;
}

/* The button supplies the gap above it. In the featured card the line supplies its own. */
.pua-price-card:not(.pua-price-card-featured) .pua-price-non {
  margin-bottom: 0;
}

/* A button in one of these always spans the card. */
.pua-price-card .pua-btn {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 1.25rem;
}

/* Featured version. A header and a body, each with its own padding and rule. */
.pua-price-card-featured {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}

.pua-price-card-featured .pua-price-card-header {
  position: relative;
  padding: 1.375rem 1.5rem 1.125rem;
  border-bottom: 1px solid var(--pua-hairline);
}

.pua-price-card-featured .pua-price-card-header :is(h1, h2, h3, h4, h5, h6) {
  margin-bottom: 0.375rem;
}

/* The line under the title. */
.pua-price-card-featured .pua-price-card-header p:last-of-type {
  font-family: var(--pua-font-family);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--pua-gray-muted-txt);
  margin: 0;
}

.pua-price-card-featured .pua-price-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.125rem 1.5rem 1.375rem;
}

/* Description absorbs the slack so prices sit level. */
.pua-price-card-featured .pua-price-card-body > p {
  flex: 1;
  font-family: var(--pua-font-family);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--pua-gray-mid-txt);
  margin: 0 0 1.125rem;
}

.pua-price-card-featured .pua-btn {
  margin-top: 0;
  padding: calc(0.75rem - 2px)
           calc(1.25rem - 2px);
}

/* Recommended card. A real border, so the header's rule stops at it instead of crossing it. */
.pua-price-card-recommended {
  border-color: var(--pua-magenta-brand);
  border-width: 2px;
}

/* The flag. Any wording works; the class names the treatment, not the word. */
.pua-price-card-recommended .pua-price-card-header p:first-child {
  position: absolute;
  top: -1px;
  right: 20px;
  margin: 0;
  padding: 5px 10px;
  line-height: 1;
  background-color: var(--pua-magenta-bg);
  color: var(--pua-magenta-contrast);
  border-radius: 0 0 var(--pua-element-border-radius) var(--pua-element-border-radius);
  font-family: var(--pua-font-family);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap; /* one line, so it stays clear of the title below it */
}


/* --------------------------------------------------------------
   CTA ROW
   -------------------------------------------------------------- */

/* Equal cells with a rule above, below and between. */
.pua-cta-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--pua-hairline);
  border-bottom: 1px solid var(--pua-hairline);
}

.pua-cta-row > * {
  padding: 1.375rem 1.375rem;
  border-left: 1px solid var(--pua-hairline);
}

.pua-cta-row > *:first-child {
  padding-left: 0;
  border-left: none;
}

/* Dark label, magenta arrow. */
.pua-cta-row a.pua-arrow-link.pua-arrow-link {
  --pua-arrow-color: var(--pua-magenta-txt);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--pua-black-txt);
}

.pua-cta-row a.pua-arrow-link.pua-arrow-link.pua-arrow-link:hover,
.pua-cta-row a.pua-arrow-link.pua-arrow-link.pua-arrow-link:focus,
.pua-cta-row a.pua-arrow-link.pua-arrow-link.pua-arrow-link:focus-visible {
  color: var(--pua-black-txt);
}

/* Gap below the block. */
.pua-cta-row { margin-bottom: 1rem; }

/* --------------------------------------------------------------
   QUOTE
   -------------------------------------------------------------- */

/* Add pua-quote-featured for the large version with a bar and quote mark. */
.pua-quote {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 1.5rem 1.5rem 1.25rem;
  background-color: var(--pua-gray-tint-bg);
  border: 1px solid var(--pua-hairline);
  border-radius: var(--pua-panel-border-radius);
}

.pua-quote blockquote {
  flex: 1;
  margin: 0 0 1rem;
  padding: 0;        /* TI adds padding + a left border to blockquote */
  border: 0;
}

/* Doubled so the component keeps its own paragraph spacing when nested in a content box. */
.pua-quote.pua-quote p {
  font-family: var(--pua-font-family);
  font-size: 0.875rem;
  line-height: 1.6;
  font-style: italic;
  color: var(--pua-gray-dark-txt);
  margin: 0;
}

/* The source line under the quote. TI applies nothing to figcaption, so no class is needed. */
.pua-quote > figcaption {
  font-family: var(--pua-font-family);
  font-size: 0.75rem;
  line-height: 1.4;
  font-weight: 400;
  color: var(--pua-gray-muted-txt);
}

.pua-quote > figcaption b {
  font-weight: 700;
  color: var(--pua-black-txt);
}

.pua-quote + .pua-quote {
  margin-top: 1.25rem;
}

/* Two columns for grey quotes. */
.pua-quote-columns {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}

/* An odd last quote fills the row. */
.pua-quote-columns > .pua-quote:last-child:nth-child(odd) {
  grid-column: span 2;
}

.pua-quote-columns > .pua-quote + .pua-quote {
  margin-top: 0;
}

/* The grid gap owns the spacing, so the quote's own bottom margin would double it. */
.pua-quote-columns > .pua-quote {
  margin-bottom: 0;
}

/* Featured version. Add pua-border-left-magenta, -cyan, -yellow or -black to recolor. */
.pua-quote.pua-quote-featured {
  --pua-quote-accent: var(--pua-magenta-brand);
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 1.75rem;
  padding: 1.75rem 1.75rem 1.5rem;
  background-color: var(--pua-white-bg);
  border-left: 4px solid var(--pua-quote-accent);
}

/* The bar and mark are decoration, so both take the brand value. */
.pua-quote-featured.pua-border-left-magenta    { --pua-quote-accent: var(--pua-magenta-brand); }
.pua-quote-featured.pua-border-left-cyan       { --pua-quote-accent: var(--pua-cyan-brand); }
.pua-quote-featured.pua-border-left-yellow     { --pua-quote-accent: var(--pua-yellow-brand); }
.pua-quote-featured.pua-border-left-black      { --pua-quote-accent: var(--pua-black-brand); }

/* The utility paints the bar with !important, so the component reclaims it to keep bar and mark alike. */
.pua-quote.pua-quote-featured[class*="pua-border-left-"] {
  border-left-color: var(--pua-quote-accent) !important;
}

.pua-quote.pua-quote-featured::before {
  content: "\0022";
  grid-column: 1;
  grid-row: 1 / span 99;
  font-family: var(--pua-font-family);
  font-size: 3.25rem;
  font-weight: 900;
  line-height: 0.8;
  color: var(--pua-quote-accent);
}

.pua-quote.pua-quote-featured > * {
  grid-column: 2;
}

.pua-quote.pua-quote-featured p {
  font-size: 1rem;
  line-height: 1.75;
}

.pua-quote.pua-quote-featured blockquote {
  margin-bottom: 0.875rem;
}

/* Gap below the block. */
.pua-quote { margin-bottom: 2rem; }

/* Gap below the block. */
.pua-quote-columns { margin-bottom: 1rem; }

/* --------------------------------------------------------------
   CARD
   -------------------------------------------------------------- */

/* Add a .pua-border-top-* pair for the colored bar along the top. */
.pua-card {
  display: flex;
  flex-direction: column;
  background-color: var(--pua-white-bg);
  border: 1px solid var(--pua-hairline);
  border-radius: var(--pua-panel-border-radius);
  overflow: hidden;
}

.pua-card-header {
  padding: 1.25rem 1.25rem 1rem;
  border-bottom: 1px solid var(--pua-hairline);
}

.pua-card-body {
  flex: 1;
  padding: 1rem 1.25rem;
}

.pua-card-footer {
  padding: 0.875rem 1.25rem 1.125rem;
  border-top: 1px solid var(--pua-hairline);
}

.pua-card :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--pua-font-family) !important;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--pua-black-txt) !important;
  margin: 0;
}

/* Paragraphs take the card treatment unless they are one of these components.
   Add a component here if a new one ever styles a paragraph itself. */
.pua-card p:not(.pua-eyebrow, .pua-body, .pua-body-sm, .pua-price-mention) {
  font-family: var(--pua-font-family);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--pua-gray-mid-txt);
  margin: 0;
}

/* Gap between stacked paragraphs, matching the callout. */
.pua-card p:not(.pua-eyebrow, .pua-body, .pua-body-sm, .pua-price-mention) + p:not(.pua-eyebrow, .pua-body, .pua-body-sm, .pua-price-mention) {
  margin-top: 1rem;
}

/* Badge on top, colored rule above it. Add a pua-border-top-* class to recolor the rule. */
.pua-card.pua-card-badge-top {
  --pua-card-rule: var(--pua-magenta-brand);
  border-top-style: solid;
  border-top-width: 4px;
  border-top-color: var(--pua-card-rule);
}

/* The rule is decoration, so it takes the brand value rather than the utility's element value.
   Every brand colour except white is here; anything else leaves the rule at the magenta default. */
.pua-card-badge-top.pua-border-top-magenta    { --pua-card-rule: var(--pua-magenta-brand); }
.pua-card-badge-top.pua-border-top-cyan       { --pua-card-rule: var(--pua-cyan-brand); }
.pua-card-badge-top.pua-border-top-yellow     { --pua-card-rule: var(--pua-yellow-brand); }
.pua-card-badge-top.pua-border-top-black      { --pua-card-rule: var(--pua-black-brand); }
.pua-card-badge-top.pua-border-top-gray-dark  { --pua-card-rule: var(--pua-gray-dark-brand); }
.pua-card-badge-top.pua-border-top-gray-mid   { --pua-card-rule: var(--pua-gray-mid-brand); }
.pua-card-badge-top.pua-border-top-gray-muted { --pua-card-rule: var(--pua-gray-muted-brand); }
.pua-card-badge-top.pua-border-top-gray-light { --pua-card-rule: var(--pua-gray-light-brand); }

/* The utility paints the rule with !important, so the component reclaims it. */
.pua-card.pua-card-badge-top[class*="pua-border-top-"] {
  border-top-color: var(--pua-card-rule) !important;
}

/* The label, which is a paragraph with a title after it. */
.pua-card:is(.pua-card-badge-top, .pua-card-badge-row) .pua-card-header p:has(~ *) {
  font-family: var(--pua-font-family);
  font-size: 0.625rem; /* 10px */
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--pua-gray-muted-txt);
  margin: 0 0 0.5rem;
}

/* The title, whether it is a heading or the last paragraph. */
.pua-card:is(.pua-card-badge-top, .pua-card-badge-row) .pua-card-header p:not(:has(~ *)) {
  font-family: var(--pua-font-family);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: normal;
  text-transform: none;
  color: var(--pua-black-txt);
  margin: 0;
}

/* The badge card laid out as a row: badge left, text centre, links right. */
.pua-card.pua-card-badge-row {
  display: grid;
  grid-template-columns: 70px 1fr auto;
  column-gap: 1.75rem;
  align-items: center;
  padding: 1.5rem 1.75rem;
  margin-bottom: 1.25rem;
}

.pua-card-badge-row > .pua-badge {
  grid-column: 1;
  grid-row: 1 / span 99;
  min-height: 0;
  padding: 0;
  background-color: transparent;
  border-bottom: none;
}

.pua-card-badge-row > .pua-badge img {
  max-width: 70px;
  max-height: 70px;
}

.pua-card-badge-row > :is(.pua-card-header, .pua-card-body) {
  grid-column: 2;
}

/* The links stack against the right edge. */
.pua-card-badge-row > .pua-card-footer {
  grid-column: 3;
  grid-row: 1 / span 99;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  text-align: right;
}

/* The row's own padding supplies the spacing, so the sections drop theirs. */
.pua-card-badge-row :is(.pua-card-header, .pua-card-body, .pua-card-footer) {
  padding: 0;
  border: none;
}

/* The shared label rule is (0,3,1), so this has to match it to win on order. */
.pua-card.pua-card-badge-row .pua-card-header p:has(~ *) {
  margin-bottom: 0.25rem;
}

.pua-card-badge-row .pua-card-header {
  margin-bottom: 0.5rem;
}

/* Holds a run of rows. The gap lives here so the group can take its own margins. */
.pua-card-group {
  display: grid;
  gap: 0.875rem; /* 14px */
  margin-bottom: 1.25rem;
}

.pua-card-group > .pua-card {
  margin-bottom: 0;
}

/* Icon beside the title in a tinted header. Sits alongside pua-card-icon-top, not with it. */
.pua-card.pua-card-icon-header .pua-card-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background-color: var(--pua-gray-light-bg);
}

/* Icon on top, centered, tight type. One block, no sections. */
.pua-card.pua-card-icon-top {
  padding: 1.125rem 0.875rem;
  text-align: center;
}

.pua-card-icon-top .pua-icon-chip {
  border-radius: var(--pua-pill-border-radius);
  margin: 0 auto 0.75rem;
}

.pua-card.pua-card-icon-top :is(h1, h2, h3, h4, h5, h6) {
  font-size: 0.8125rem;
  margin-bottom: 0.375rem;
}

.pua-card.pua-card-icon-top p {
  font-family: var(--pua-font-family);
  font-size: 0.6875rem;
  line-height: 1.5;
  color: var(--pua-gray-muted-txt);
  margin: 0;
}

/* --------------------------------------------------------------
   ICON ROW
   -------------------------------------------------------------- */

/* Holds a run of icon rows. Add pua-list-blocks to it for the bordered grid. */
.pua-icon-group {
  margin-bottom: 1.25rem;
}

/* Icon left, text right, rule above each row. A grid, so a second paragraph
   stacks under the first instead of sitting beside it. */
.pua-icon-row {
  --pua-icon-row-gap: 10px;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 1rem;
  padding: var(--pua-icon-row-gap) 0;
}

/* The chip holds column one for the whole row; everything else stacks in column two. */
.pua-icon-row > * {
  grid-column: 2;
}

.pua-icon-row > .pua-icon-chip {
  grid-column: 1;
  grid-row: 1 / span 99;
}

/* The first row has nothing above it to clear. */
.pua-icon-row:first-of-type {
  padding-top: 0;
}

/* Dividers are opt-in, the same way pua-list-divided works on a list. */
.pua-list-divided > .pua-icon-row + .pua-icon-row {
  border-top: 1px solid var(--pua-hairline);
}

/* The divider needs air around it, so divided rows open back up. */
.pua-list-divided > .pua-icon-row {
  --pua-icon-row-gap: 1.125rem;
}

/* A run of rows with a hairline between them and every other one filled. Works on
   any children. Needs a clipping shell such as pua-card so the fills reach the
   edges and the corners stay rounded. */
.pua-row-alternate {
  margin-bottom: 0;
}

.pua-row-alternate > * + * {
  border-top: 1px solid var(--pua-hairline);
}

.pua-row-alternate > *:nth-child(even) {
  background-color: var(--pua-gray-tint-bg);
}

/* An icon row's own padding is vertical only, so the fill needs side room. */
.pua-row-alternate > .pua-icon-row {
  --pua-icon-row-gap: 1.75rem;
  padding: var(--pua-icon-row-gap) 2.25rem;
}

.pua-icon-row strong {
  font-weight: 700;
  color: var(--pua-black-txt);
}

/* Doubled so the component keeps its own paragraph spacing when nested in a content box. */
.pua-icon-row.pua-icon-row p {
  font-family: var(--pua-font-family);
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--pua-gray-dark-txt);
  margin: 0;
}

/* Gap between stacked paragraphs. Doubled so it survives nesting inside a card. */
.pua-icon-row.pua-icon-row p + p {
  margin-top: 1rem;
}

/* <strong> on its own marks the title, so the copy sits tight under it. Use <b> for bold inside copy. */
.pua-icon-row.pua-icon-row p:has(> strong:only-child) + p {
  margin-top: 0.25rem;
}

/* In the grid the cells supply the padding and the gaps supply the rules. */
.pua-list-blocks > .pua-icon-row {
  background-color: var(--pua-white-bg);
  padding: 1.75rem 1.625rem;
  border-top: none;
  margin-bottom: 0;
}

/* Gap below the block. Rows in a run are separated by their own padding and rule. */
.pua-icon-row { margin-bottom: 1.25rem; }
.pua-icon-row:has(+ .pua-icon-row) { margin-bottom: 0; }
.pua-icon-group > .pua-icon-row { margin-bottom: 0; }

/* --------------------------------------------------------------
   COMPARISON TABLE
   -------------------------------------------------------------- */

/* Column headings. Add a pua-bg-* class to one. Every td needs data-label for the stacked view. */
table.pua-compare-table.pua-compare-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--pua-font-family);
  font-size: 0.875rem;
  line-height: 1.6;
}

table.pua-compare-table.pua-compare-table thead th {
  padding: 0.875rem 1.125rem;
  background-color: var(--pua-gray-light-bg);
  color: var(--pua-black-txt);
  font-size: 0.75rem;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: left;
  border: none;
  border-bottom: 1px solid var(--pua-hairline);
}

/* A filled heading hides the hairline, so the fill runs to the first row. */
table.pua-compare-table.pua-compare-table thead th[class*="pua-bg-"] {
  border-bottom-color: transparent;
}

table.pua-compare-table.pua-compare-table td {
  padding: 0.8125rem 1.125rem;
  vertical-align: top;
  color: var(--pua-gray-dark-txt);
  border: none;
  border-bottom: 1px solid var(--pua-hairline);
}

/* Optional leading column naming each row. */
table.pua-compare-table.pua-compare-table thead td {
  width: 20%;
  background-color: var(--pua-gray-light-bg);
  border: none;
  border-bottom: 1px solid var(--pua-hairline);
}

table.pua-compare-table.pua-compare-table tbody th {
  padding: 0.8125rem 1.125rem;
  background-color: var(--pua-gray-tint-bg);
  color: var(--pua-black-txt);
  font-weight: 700;
  text-align: left;
  border: none;
  border-bottom: 1px solid var(--pua-hairline);
}

/* Price cell, using the format card price classes. */
table.pua-compare-table.pua-compare-table .pua-price-row {
  margin-bottom: 0.25rem;
}

table.pua-compare-table.pua-compare-table .pua-price-non {
  margin-bottom: 0;
}

/* Stacks into blocks, each value labelled by its column heading. */
@media (max-width: 680px) {

  table.pua-compare-table.pua-compare-table thead {
    display: none;
  }

  table.pua-compare-table.pua-compare-table,
  table.pua-compare-table.pua-compare-table tbody,
  table.pua-compare-table.pua-compare-table tr,
  table.pua-compare-table.pua-compare-table tbody th,
  table.pua-compare-table.pua-compare-table td {
    display: block;
    width: 100%;
  }

  table.pua-compare-table.pua-compare-table tr {
    margin-bottom: 0.75rem;
    border: 1px solid var(--pua-hairline);
    border-radius: var(--pua-panel-border-radius);
    overflow: hidden;
  }

  table.pua-compare-table.pua-compare-table td {
    padding: 0.75rem 1rem;
    border: none;
    border-bottom: 1px solid var(--pua-gray-light-bg);
  }

  table.pua-compare-table.pua-compare-table tr > *:last-child {
    border-bottom: none;
  }

  table.pua-compare-table.pua-compare-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 0.125rem;
    font-size: 0.625rem;
    line-height: 1.4;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--pua-gray-muted-txt);
  }

  table.pua-compare-table.pua-compare-table td.pua-compare-highlight::before {
    color: var(--pua-magenta-txt);
  }

}

/* Gap below the block. */
table.pua-compare-table.pua-compare-table { margin-bottom: 1rem; }

/* --------------------------------------------------------------
   DATA TABLE
   -------------------------------------------------------------- */

/* Reference table. The first column is the key value; the rest is plain copy. */
table.pua-data-table.pua-data-table {
  --pua-table-first-txt:  var(--pua-magenta-txt);
  --pua-table-first-fill: transparent;
  width: 100%;
  border-collapse: collapse;
  font-family: var(--pua-font-family);
  font-size: 0.875rem;
  line-height: 1.6;
}

table.pua-data-table.pua-data-table thead th {
  padding: 0.875rem 1.125rem;
  background-color: var(--pua-gray-light-bg);
  color: var(--pua-black-txt);
  font-size: 0.6875rem; /* 11px */
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: left;
  border: none;
  border-bottom: 2px solid var(--pua-magenta-brand);
}

table.pua-data-table.pua-data-table td {
  padding: 0.8125rem 1.125rem;
  vertical-align: top;
  color: var(--pua-gray-dark-txt);
  border: none;
  border-bottom: 1px solid var(--pua-hairline);
}

table.pua-data-table.pua-data-table tbody tr:nth-child(even) {
  background-color: var(--pua-gray-tint-bg);
}

/* The key column. pua-table-text-* and pua-table-fill-* set these two values. */
table.pua-data-table.pua-data-table td:first-child {
  width: 1%;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  color: var(--pua-table-first-txt);
  background-color: var(--pua-table-first-fill);
}

/* Text colour for the key column, used when there is no fill. */
table.pua-data-table.pua-data-table.pua-table-text-magenta     { --pua-table-first-txt: var(--pua-magenta-txt); }
table.pua-data-table.pua-data-table.pua-table-text-cyan        { --pua-table-first-txt: var(--pua-cyan-txt); }
table.pua-data-table.pua-data-table.pua-table-text-yellow      { --pua-table-first-txt: var(--pua-yellow-txt); }
table.pua-data-table.pua-data-table.pua-table-text-black       { --pua-table-first-txt: var(--pua-black-txt); }
table.pua-data-table.pua-data-table.pua-table-text-gray-dark   { --pua-table-first-txt: var(--pua-gray-dark-txt); }
table.pua-data-table.pua-data-table.pua-table-text-gray-mid    { --pua-table-first-txt: var(--pua-gray-mid-txt); }
table.pua-data-table.pua-data-table.pua-table-text-gray-muted  { --pua-table-first-txt: var(--pua-gray-muted-txt); }
table.pua-data-table.pua-data-table.pua-table-text-gray-light  { --pua-table-first-txt: var(--pua-gray-light-txt); }

/* Fill for the key column. The text takes that colour's contrast value, and these
   load after the text classes so a fill is never left with unreadable text on it. */
table.pua-data-table.pua-data-table.pua-table-fill-magenta {
  --pua-table-first-fill: var(--pua-magenta-bg);
  --pua-table-first-txt:  var(--pua-magenta-contrast);
}
table.pua-data-table.pua-data-table.pua-table-fill-cyan {
  --pua-table-first-fill: var(--pua-cyan-bg);
  --pua-table-first-txt:  var(--pua-cyan-contrast);
}
table.pua-data-table.pua-data-table.pua-table-fill-yellow {
  --pua-table-first-fill: var(--pua-yellow-bg);
  --pua-table-first-txt:  var(--pua-yellow-contrast);
}
table.pua-data-table.pua-data-table.pua-table-fill-black {
  --pua-table-first-fill: var(--pua-black-bg);
  --pua-table-first-txt:  var(--pua-black-contrast);
}
table.pua-data-table.pua-data-table.pua-table-fill-gray-dark {
  --pua-table-first-fill: var(--pua-gray-dark-bg);
  --pua-table-first-txt:  var(--pua-gray-dark-contrast);
}
table.pua-data-table.pua-data-table.pua-table-fill-gray-mid {
  --pua-table-first-fill: var(--pua-gray-mid-bg);
  --pua-table-first-txt:  var(--pua-gray-mid-contrast);
}
table.pua-data-table.pua-data-table.pua-table-fill-gray-muted {
  --pua-table-first-fill: var(--pua-gray-muted-bg);
  --pua-table-first-txt:  var(--pua-gray-muted-contrast);
}
table.pua-data-table.pua-data-table.pua-table-fill-gray-light {
  --pua-table-first-fill: var(--pua-gray-light-bg);
  --pua-table-first-txt:  var(--pua-gray-light-contrast);
}

/* Gap below the block. */
table.pua-data-table.pua-data-table { margin-bottom: 1rem; }

/* --------------------------------------------------------------
   CONTENT BOX
   -------------------------------------------------------------- */

.pua-content-box {
  display: block;
  font-family: var(--pua-font-family);
}

/* Becomes a row only when a media block is present. */
.pua-content-box:has(.pua-content-box-media) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

/* Lines the media up with the top of the copy instead of its middle. */
.pua-content-box.pua-content-box-align-top {
  align-items: flex-start;
}

/* Line one carries 9.15px of leading and ascender above its caps at 16px.
   Pulling that off puts the text top level with the media top. */
.pua-content-box-align-top .pua-content-box-text > p:first-child {
  margin-top: -0.572em;
}

.pua-content-box-text {
  flex: 1;
}

.pua-content-box-media {
  flex-shrink: 0;
  width: 269px; /* the mockups' 200px holds 23% of their row; this is the same share of ours. */
}

.pua-content-box-media img {
  display: block;
  width: 100%;
  height: auto;
}

/* No trailing space at the foot of the box. */
.pua-content-box > *:last-child,
.pua-content-box-text > *:last-child,
.pua-content-box > .pua-width-element > *:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
}

/* No leading space at the head of the box. */
.pua-content-box > *:first-child,
.pua-content-box-text > *:first-child,
.pua-content-box > .pua-width-element > *:first-child {
  margin-top: 0;
}

.pua-content-box p {
  font-size: 1rem;
  line-height: 1.75;
  font-weight: 400;
  color: var(--pua-gray-dark-txt);
  margin-bottom: 1.125rem;
}

/* Gap below the block. */
.pua-content-box { margin-bottom: 2rem; }

/* --------------------------------------------------------------
   LAST BLOCK
   -------------------------------------------------------------- */

/* No trailing space at the end of a widget. TI closes the editor region with script
   placeholders, so :last-child never reaches the last block and :has(+ script) does. */
:is(.pua-columns-2, .pua-columns-3, .pua-columns-4, .pua-columns-5,
    .pua-content-box, .pua-callout-box, .pua-callout-box-sm,
    .pua-list, .pua-card-group, .pua-card-badge-row,
    .pua-icon-row, .pua-quote, .pua-quote-columns, .pua-cta-row,
    .pua-best-for-pills):last-child,
:is(.pua-columns-2, .pua-columns-3, .pua-columns-4, .pua-columns-5,
    .pua-content-box, .pua-callout-box, .pua-callout-box-sm,
    .pua-list, .pua-card-group, .pua-card-badge-row,
    .pua-icon-row, .pua-quote, .pua-quote-columns, .pua-cta-row,
    .pua-best-for-pills):has(+ script) { margin-bottom: 0; }

/* Kept separate so this selector cannot invalidate the rule above. */
p:has(> .pua-arrow-link):last-child,
p:has(> .pua-arrow-link):has(+ script) { margin-bottom: 0; }

table.pua-compare-table.pua-compare-table:last-child,
table.pua-compare-table.pua-compare-table:has(+ script) { margin-bottom: 0; }

table.pua-data-table.pua-data-table:last-child,
table.pua-data-table.pua-data-table:has(+ script) { margin-bottom: 0; }

/* --------------------------------------------------------------
   BLOCKS IN A COLUMNS GRID
   -------------------------------------------------------------- */

/* The grid gap owns the spacing between cells, so a cell's own vertical margin doubles it. */
:is(.pua-columns-2, .pua-columns-3, .pua-columns-4, .pua-columns-5) > :is(.pua-callout-box, .pua-quote, .pua-content-box,
    .pua-list, .pua-numbered, .pua-numbered-lg, .pua-cta-row, .pua-best-for-pills,
    .pua-icon-group, .pua-icon-row, .pua-section-header-row,
    .pua-columns-2, .pua-columns-3, .pua-columns-4, .pua-columns-5) {
  margin-top: 0;
  margin-bottom: 0;
}

/* The table names its class twice, so this has to as well. */
:is(.pua-columns-2, .pua-columns-3, .pua-columns-4, .pua-columns-5) > table.pua-compare-table.pua-compare-table {
  margin-top: 0;
  margin-bottom: 0;
}

/* --------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------- */

/* Everything that stacks. Loads after the components it overrides. */

/* Stacks at the same width as the comparison table. The pua-columns-* grids
   stack in their own block, which has to sit after the utilities define them. */
@media (max-width: 680px) {

  .pua-quote-columns,
  .pua-list-blocks,
  .pua-list-columns { grid-template-columns: 1fr; }

  .pua-quote-columns > .pua-quote:last-child:nth-child(odd),
  .pua-list-blocks > *:last-child:nth-child(odd) { grid-column: span 1; }

  /* Two-part rows become stacks. */
  .pua-section-header-row,
  .pua-callout-box:has(.pua-callout-box-action),
  .pua-content-box:has(.pua-content-box-media) {
    display: block;
  }

  .pua-section-header-row > *:first-child + * {
    white-space: normal;
    margin-top: 1rem;
    margin-bottom: 0;
  }

  .pua-callout-box-action {
    margin-top: 1.25rem;
  }

  /* Stacked, the action is no longer a right-hand column. */
  .pua-callout-box .pua-callout-box-action {
    justify-content: flex-start;
  }

  .pua-callout-box .pua-callout-box-action:has(> p) {
    align-items: flex-start;
    text-align: left;
  }

  /* Image drops below the copy and spans the column. */
  .pua-content-box-media {
    width: 100%;
    margin-top: 1.5rem;
  }

  /* Unless it leads, in which case it clears the copy below it instead. */
  .pua-content-box-media:first-child {
    margin-top: 0;
    margin-bottom: 1.5rem;
  }

  /* Stacked, the copy is below the media, so the optical pull would run into it. */
  .pua-content-box-align-top .pua-content-box-text > p:first-child {
    margin-top: 0;
  }

  /* One column, so the pieces follow document order: badge, label, title, copy, links. */
  .pua-card.pua-card-badge-row {
    grid-template-columns: 1fr;
    row-gap: 1rem;
  }

  /* Every child returns to the single column. The placement rules above are (0,2,0),
     so these match that and win on order. */
  .pua-card.pua-card-badge-row > * {
    grid-column: 1;
    grid-row: auto;
  }

  .pua-card.pua-card-badge-row > .pua-badge {
    justify-content: flex-start;
  }

  .pua-card.pua-card-badge-row > .pua-card-footer {
    align-items: flex-start;
    text-align: left;
  }

  /* The row gap owns the spacing now. */
  .pua-card.pua-card-badge-row .pua-card-header {
    margin-bottom: 0;
  }

  /* Cells stack, so the rules move between rows. */
  .pua-cta-row {
    grid-template-columns: 1fr;
  }

  .pua-cta-row > * {
    padding-left: 0;
    padding-right: 0;
    border-left: none;
    border-top: 1px solid var(--pua-hairline);
  }

  .pua-cta-row > *:first-child {
    border-top: none;
  }

}

/* ==============================================================
   OVERRIDE CLASSES
   ============================================================== */

/* --------------------------------------------------------------
   WIDTH
   -------------------------------------------------------------- */

/* Narrows this element. For a whole widget use .pua-width-widget. */
.pua-width-element {
  max-width: var(--pua-text-max-width);
}

/* Inside an intro block it follows the intro width. */
.pua-content-box .pua-width-element {
  max-width: var(--pua-intro-max-width);
}

/* Shrinks this element to the width of its own content. */
.pua-width-content {
  max-width: fit-content;
}

/* --------------------------------------------------------------
   MEDIA WIDTH
   -------------------------------------------------------------- */

/* Width of a badge or image slot. The name is the rendered pixel width.
   Without one, pua-content-box-media stays at its 269px default. */
.pua-media-80  { width: 80px !important; }
.pua-media-120 { width: 120px !important; }
.pua-media-160 { width: 160px !important; }
.pua-media-200 { width: 200px !important; }
.pua-media-240 { width: 240px !important; }

/* --------------------------------------------------------------
   BACKGROUND COLOR UTILITIES
   -------------------------------------------------------------- */

/* Sets the background and its readable text color. */

.pua-bg-magenta {
  background-color: var(--pua-magenta-bg) !important;
  color: var(--pua-magenta-contrast) !important;
}
.pua-bg-cyan {
  background-color: var(--pua-cyan-bg) !important;
  color: var(--pua-cyan-contrast) !important;
}
.pua-bg-yellow {
  background-color: var(--pua-yellow-bg) !important;
  color: var(--pua-yellow-contrast) !important;
}
.pua-bg-black {
  background-color: var(--pua-black-bg) !important;
  color: var(--pua-black-contrast) !important;
}
.pua-bg-gray-dark {
  background-color: var(--pua-gray-dark-bg) !important;
  color: var(--pua-gray-dark-contrast) !important;
}
.pua-bg-gray-mid {
  background-color: var(--pua-gray-mid-bg) !important;
  color: var(--pua-gray-mid-contrast) !important;
}
.pua-bg-gray-muted {
  background-color: var(--pua-gray-muted-bg) !important;
  color: var(--pua-gray-muted-contrast) !important;
}
.pua-bg-gray-light {
  background-color: var(--pua-gray-light-bg) !important;
  color: var(--pua-gray-light-contrast) !important;
}
.pua-bg-white {
  background-color: var(--pua-white-bg) !important;
  color: var(--pua-white-contrast) !important;
}

/* Tints. Pale fills for callouts and content boxes. */
.pua-bg-magenta-tint {
  background-color: var(--pua-magenta-tint-bg) !important;
  color: var(--pua-magenta-tint-contrast) !important;
}
.pua-bg-cyan-tint {
  background-color: var(--pua-cyan-tint-bg) !important;
  color: var(--pua-cyan-tint-contrast) !important;
}
.pua-bg-yellow-tint {
  background-color: var(--pua-yellow-tint-bg) !important;
  color: var(--pua-yellow-tint-contrast) !important;
}
.pua-bg-gray-tint {
  background-color: var(--pua-gray-tint-bg) !important;
  color: var(--pua-gray-tint-contrast) !important;
}

/* --------------------------------------------------------------
   TEXT COLOR UTILITIES
   -------------------------------------------------------------- */

/* Use on white or any of our tints. Every value below clears 4.5:1 on all of them. */

.pua-txt-magenta { color: var(--pua-magenta-txt) !important; }
.pua-txt-cyan { color: var(--pua-cyan-txt) !important; }
.pua-txt-yellow { color: var(--pua-yellow-txt) !important; }
.pua-txt-black { color: var(--pua-black-txt) !important; }
.pua-txt-gray-dark { color: var(--pua-gray-dark-txt) !important; }
.pua-txt-gray-mid { color: var(--pua-gray-mid-txt) !important; }
.pua-txt-gray-muted { color: var(--pua-gray-muted-txt) !important; }
.pua-txt-gray-light { color: var(--pua-gray-light-txt) !important; }

/* Use on a dark background. */

.pua-txt-magenta-on-dark { color: var(--pua-magenta-txt-on-dark) !important; }
.pua-txt-cyan-on-dark { color: var(--pua-cyan-txt-on-dark) !important; }
.pua-txt-yellow-on-dark { color: var(--pua-yellow-txt-on-dark) !important; }
.pua-txt-black-on-dark { color: var(--pua-black-txt-on-dark) !important; }
.pua-txt-gray-dark-on-dark { color: var(--pua-gray-dark-txt-on-dark) !important; }
.pua-txt-gray-mid-on-dark { color: var(--pua-gray-mid-txt-on-dark) !important; }
.pua-txt-gray-muted-on-dark { color: var(--pua-gray-muted-txt-on-dark) !important; }
.pua-txt-gray-light-on-dark { color: var(--pua-gray-light-txt-on-dark) !important; }
.pua-txt-white-on-dark { color: var(--pua-white-txt-on-dark) !important; }

/* --------------------------------------------------------------
   TEXT SIZE UTILITIES
   -------------------------------------------------------------- */

/* Size only. The name is the rendered pixel size; the value is rem so text scales. */

.pua-text-size-10 { font-size: 0.625rem !important; }
.pua-text-size-11 { font-size: 0.6875rem !important; }
.pua-text-size-12 { font-size: 0.75rem !important; }
.pua-text-size-13 { font-size: 0.8125rem !important; }
.pua-text-size-14 { font-size: 0.875rem !important; }
.pua-text-size-15 { font-size: 0.9375rem !important; }
.pua-text-size-16 { font-size: 1rem !important; }
.pua-text-size-17 { font-size: 1.0625rem !important; }
.pua-text-size-18 { font-size: 1.125rem !important; }
.pua-text-size-20 { font-size: 1.25rem !important; }
.pua-text-size-22 { font-size: 1.375rem !important; }
.pua-text-size-26 { font-size: 1.625rem !important; }
.pua-text-size-28 { font-size: 1.75rem !important; }
.pua-text-size-42 { font-size: 2.625rem !important; }
.pua-text-size-52 { font-size: 3.25rem !important; }

/* --------------------------------------------------------------
   FONT WEIGHT UTILITIES
   -------------------------------------------------------------- */

.pua-weight-400 { font-weight: 400 !important; }
.pua-weight-500 { font-weight: 500 !important; }
.pua-weight-600 { font-weight: 600 !important; }
.pua-weight-700 { font-weight: 700 !important; }
.pua-weight-900 { font-weight: 900 !important; }

/* --------------------------------------------------------------
   BORDER UTILITIES
   -------------------------------------------------------------- */

/* Width class plus a color class. All-sides first, sides after. */
/* Yellow borders use the brand value. */

/* Width, all sides */
.pua-border-1 { border-style: solid !important; border-width: 1px !important; }
.pua-border-1-5 { border-style: solid !important; border-width: 1.5px !important; }
.pua-border-2 { border-style: solid !important; border-width: 2px !important; }
.pua-border-3 { border-style: solid !important; border-width: 3px !important; }
.pua-border-4 { border-style: solid !important; border-width: 4px !important; }
.pua-border-5 { border-style: solid !important; border-width: 5px !important; }
.pua-border-none { border: none !important; }

/* Width, one side */
.pua-border-top-1 { border-top-style: solid !important; border-top-width: 1px !important; }
.pua-border-top-1-5 { border-top-style: solid !important; border-top-width: 1.5px !important; }
.pua-border-top-2 { border-top-style: solid !important; border-top-width: 2px !important; }
.pua-border-top-3 { border-top-style: solid !important; border-top-width: 3px !important; }
.pua-border-top-4 { border-top-style: solid !important; border-top-width: 4px !important; }
.pua-border-top-5 { border-top-style: solid !important; border-top-width: 5px !important; }
.pua-border-top-none { border-top: none !important; }
.pua-border-right-1 { border-right-style: solid !important; border-right-width: 1px !important; }
.pua-border-right-1-5 { border-right-style: solid !important; border-right-width: 1.5px !important; }
.pua-border-right-2 { border-right-style: solid !important; border-right-width: 2px !important; }
.pua-border-right-3 { border-right-style: solid !important; border-right-width: 3px !important; }
.pua-border-right-4 { border-right-style: solid !important; border-right-width: 4px !important; }
.pua-border-right-5 { border-right-style: solid !important; border-right-width: 5px !important; }
.pua-border-right-none { border-right: none !important; }
.pua-border-bottom-1 { border-bottom-style: solid !important; border-bottom-width: 1px !important; }
.pua-border-bottom-1-5 { border-bottom-style: solid !important; border-bottom-width: 1.5px !important; }
.pua-border-bottom-2 { border-bottom-style: solid !important; border-bottom-width: 2px !important; }
.pua-border-bottom-3 { border-bottom-style: solid !important; border-bottom-width: 3px !important; }
.pua-border-bottom-4 { border-bottom-style: solid !important; border-bottom-width: 4px !important; }
.pua-border-bottom-5 { border-bottom-style: solid !important; border-bottom-width: 5px !important; }
.pua-border-bottom-none { border-bottom: none !important; }
.pua-border-left-1 { border-left-style: solid !important; border-left-width: 1px !important; }
.pua-border-left-1-5 { border-left-style: solid !important; border-left-width: 1.5px !important; }
.pua-border-left-2 { border-left-style: solid !important; border-left-width: 2px !important; }
.pua-border-left-3 { border-left-style: solid !important; border-left-width: 3px !important; }
.pua-border-left-4 { border-left-style: solid !important; border-left-width: 4px !important; }
.pua-border-left-5 { border-left-style: solid !important; border-left-width: 5px !important; }
.pua-border-left-none { border-left: none !important; }

/* Color, all sides */
.pua-border-magenta { border-color: var(--pua-magenta-element) !important; }
.pua-border-cyan { border-color: var(--pua-cyan-element) !important; }
.pua-border-yellow { border-color: var(--pua-yellow-brand) !important; }
.pua-border-black { border-color: var(--pua-black-element) !important; }
.pua-border-gray-dark { border-color: var(--pua-gray-dark-element) !important; }
.pua-border-gray-mid { border-color: var(--pua-gray-mid-element) !important; }
.pua-border-gray-muted { border-color: var(--pua-gray-muted-element) !important; }
.pua-border-gray-light { border-color: var(--pua-gray-light-element) !important; }
.pua-border-white { border-color: var(--pua-white-bg) !important; }
.pua-border-hairline { border-color: var(--pua-hairline) !important; }

/* Color, one side */
.pua-border-top-magenta { border-top-color: var(--pua-magenta-element) !important; }
.pua-border-top-cyan { border-top-color: var(--pua-cyan-element) !important; }
.pua-border-top-yellow { border-top-color: var(--pua-yellow-brand) !important; }
.pua-border-top-black { border-top-color: var(--pua-black-element) !important; }
.pua-border-top-gray-dark { border-top-color: var(--pua-gray-dark-element) !important; }
.pua-border-top-gray-mid { border-top-color: var(--pua-gray-mid-element) !important; }
.pua-border-top-gray-muted { border-top-color: var(--pua-gray-muted-element) !important; }
.pua-border-top-gray-light { border-top-color: var(--pua-gray-light-element) !important; }
.pua-border-top-white { border-top-color: var(--pua-white-bg) !important; }
.pua-border-top-hairline { border-top-color: var(--pua-hairline) !important; }
.pua-border-right-magenta { border-right-color: var(--pua-magenta-element) !important; }
.pua-border-right-cyan { border-right-color: var(--pua-cyan-element) !important; }
.pua-border-right-yellow { border-right-color: var(--pua-yellow-brand) !important; }
.pua-border-right-black { border-right-color: var(--pua-black-element) !important; }
.pua-border-right-gray-dark { border-right-color: var(--pua-gray-dark-element) !important; }
.pua-border-right-gray-mid { border-right-color: var(--pua-gray-mid-element) !important; }
.pua-border-right-gray-muted { border-right-color: var(--pua-gray-muted-element) !important; }
.pua-border-right-gray-light { border-right-color: var(--pua-gray-light-element) !important; }
.pua-border-right-white { border-right-color: var(--pua-white-bg) !important; }
.pua-border-right-hairline { border-right-color: var(--pua-hairline) !important; }
.pua-border-bottom-magenta { border-bottom-color: var(--pua-magenta-element) !important; }
.pua-border-bottom-cyan { border-bottom-color: var(--pua-cyan-element) !important; }
.pua-border-bottom-yellow { border-bottom-color: var(--pua-yellow-brand) !important; }
.pua-border-bottom-black { border-bottom-color: var(--pua-black-element) !important; }
.pua-border-bottom-gray-dark { border-bottom-color: var(--pua-gray-dark-element) !important; }
.pua-border-bottom-gray-mid { border-bottom-color: var(--pua-gray-mid-element) !important; }
.pua-border-bottom-gray-muted { border-bottom-color: var(--pua-gray-muted-element) !important; }
.pua-border-bottom-gray-light { border-bottom-color: var(--pua-gray-light-element) !important; }
.pua-border-bottom-white { border-bottom-color: var(--pua-white-bg) !important; }
.pua-border-bottom-hairline { border-bottom-color: var(--pua-hairline) !important; }
.pua-border-left-magenta { border-left-color: var(--pua-magenta-element) !important; }
.pua-border-left-cyan { border-left-color: var(--pua-cyan-element) !important; }
.pua-border-left-yellow { border-left-color: var(--pua-yellow-brand) !important; }
.pua-border-left-black { border-left-color: var(--pua-black-element) !important; }
.pua-border-left-gray-dark { border-left-color: var(--pua-gray-dark-element) !important; }
.pua-border-left-gray-mid { border-left-color: var(--pua-gray-mid-element) !important; }
.pua-border-left-gray-muted { border-left-color: var(--pua-gray-muted-element) !important; }
.pua-border-left-gray-light { border-left-color: var(--pua-gray-light-element) !important; }
.pua-border-left-white { border-left-color: var(--pua-white-bg) !important; }
.pua-border-left-hairline { border-left-color: var(--pua-hairline) !important; }

/* --------------------------------------------------------------
   CORNER UTILITIES
   -------------------------------------------------------------- */

.pua-corner-round { border-radius: 50% !important; } /* circular chips */
.pua-corner-6 { border-radius: var(--pua-panel-border-radius) !important; } /* 6px, the icon chip corner */
.pua-corner-none { border-radius: 0 !important; } /* square */

/* --------------------------------------------------------------
   IMAGE CROP UTILITIES
   -------------------------------------------------------------- */

/* Crops an image to a shape rather than letting it keep its own. aspect-ratio gives
   the box a height, which is what object-fit needs before it can do anything. */
.pua-crop-square { aspect-ratio: 1 !important; object-fit: cover !important; object-position: center center !important; }

/* --------------------------------------------------------------
   TEXT STYLE UTILITIES
   -------------------------------------------------------------- */

.pua-caps { text-transform: uppercase !important; }
.pua-no-caps { text-transform: none !important; }
.pua-italic { font-style: italic !important; }
.pua-no-italic { font-style: normal !important; }
.pua-underline { text-decoration: underline !important; }
.pua-no-underline { text-decoration: none !important; }

/* Keeps a phrase on one line, so it wraps as a whole instead of breaking mid-text. */
.pua-no-wrap { white-space: nowrap !important; }

/* --------------------------------------------------------------
   TEXT ALIGNMENT UTILITIES
   -------------------------------------------------------------- */

.pua-align-left { text-align: left !important; }
.pua-align-center { text-align: center !important; }
.pua-align-right { text-align: right !important; }

/* --------------------------------------------------------------
   LINE HEIGHT UTILITIES
   -------------------------------------------------------------- */

/* Line height. The name states the value. */
.pua-line-height-1 { line-height: 1 !important; }
.pua-line-height-1-1 { line-height: 1.1 !important; }
.pua-line-height-1-15 { line-height: 1.15 !important; }
.pua-line-height-1-2 { line-height: 1.2 !important; }
.pua-line-height-1-3 { line-height: 1.3 !important; }
.pua-line-height-1-4 { line-height: 1.4 !important; }
.pua-line-height-1-5 { line-height: 1.5 !important; }
.pua-line-height-1-6 { line-height: 1.6 !important; }
.pua-line-height-1-65 { line-height: 1.65 !important; }
.pua-line-height-1-7 { line-height: 1.7 !important; }
.pua-line-height-1-75 { line-height: 1.75 !important; }

/* --------------------------------------------------------------
   COLUMN UTILITIES
   -------------------------------------------------------------- */

/* Equal columns. Name states the count. Add to any card container. */
.pua-columns-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
.pua-columns-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.pua-columns-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.pua-columns-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.75rem; } /* tighter than 2-4 up, five cards leave less room */

/* Gap below the block. */
.pua-columns-2,
.pua-columns-3,
.pua-columns-4 { margin-bottom: 1rem; }

/* Gap below the block. */
.pua-columns-5 { margin-bottom: 1.375rem; }

/* Gap below the block. */
:is(.pua-columns-2, .pua-columns-3, .pua-columns-4):has(.pua-price-card) {
  margin-bottom: 1.125rem;
}

/* Stacking. These sit here, below the definitions above, so they win the tie. */

/* Three or more across is too many once the cards get narrow. */
@media (max-width: 900px) {
  .pua-columns-3,
  .pua-columns-4,
  .pua-columns-5 { grid-template-columns: repeat(2, 1fr); }

  /* An odd last card fills the row rather than sitting half width. */
  :is(.pua-columns-3, .pua-columns-5) > *:last-child:nth-child(odd) {
    grid-column: span 2;
  }
}

/* One column, matching the comparison table. */
@media (max-width: 680px) {
  .pua-columns-2,
  .pua-columns-3,
  .pua-columns-4,
  .pua-columns-5 { grid-template-columns: 1fr; }

  :is(.pua-columns-3, .pua-columns-5) > *:last-child:nth-child(odd) {
    grid-column: span 1;
  }
}

/* Grids of small items, such as a row of badges. The card breakpoints step down
   too early for these, so the declared count holds until the items stop fitting. */

/* Small items carry less negative space of their own, so they need more between them. */
:is(.pua-columns-2, .pua-columns-3, .pua-columns-4, .pua-columns-5).pua-columns-small {
  gap: 1.75rem;
}

@media (max-width: 900px) {
  .pua-columns-2.pua-columns-small { grid-template-columns: repeat(2, 1fr); }
  .pua-columns-3.pua-columns-small { grid-template-columns: repeat(3, 1fr); }
  .pua-columns-4.pua-columns-small { grid-template-columns: repeat(4, 1fr); }
  .pua-columns-5.pua-columns-small { grid-template-columns: repeat(5, 1fr); }
}

/* Four 120px cells and three 28px gaps need 564px, and the large-numeral list
   indents its content 54px, so they stop fitting just under 620px. */
@media (max-width: 640px) {
  :is(.pua-columns-2, .pua-columns-3, .pua-columns-4, .pua-columns-5).pua-columns-small {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* The odd-last-child rules above would stretch the final item across a column it
   still has, so a held grid keeps every item one column wide. */
:is(.pua-columns-3, .pua-columns-5).pua-columns-small > *:last-child:nth-child(odd) {
  grid-column: span 1;
}

/* --------------------------------------------------------------
   ICON MASK UTILITY
   -------------------------------------------------------------- */

/* Icon shape via mask-image; background-color sets the color. */

.pua-icon {
  display: block;
  background-color: currentColor;
  flex-shrink: 0;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
}

.pua-icon-check     { -webkit-mask-image: var(--pua-icon-check);     mask-image: var(--pua-icon-check); }
.pua-icon-person    { -webkit-mask-image: var(--pua-icon-person);    mask-image: var(--pua-icon-person); }
.pua-icon-briefcase { -webkit-mask-image: var(--pua-icon-briefcase); mask-image: var(--pua-icon-briefcase); }
.pua-icon-monitor   { -webkit-mask-image: var(--pua-icon-monitor);   mask-image: var(--pua-icon-monitor); }
.pua-icon-video     { -webkit-mask-image: var(--pua-icon-video);     mask-image: var(--pua-icon-video); }
.pua-icon-building  { -webkit-mask-image: var(--pua-icon-building);  mask-image: var(--pua-icon-building); }
.pua-icon-target      { -webkit-mask-image: var(--pua-icon-target); mask-image: var(--pua-icon-target); }
.pua-icon-grid          { -webkit-mask-image: var(--pua-icon-grid); mask-image: var(--pua-icon-grid); }
.pua-icon-refresh       { -webkit-mask-image: var(--pua-icon-refresh); mask-image: var(--pua-icon-refresh); }
.pua-icon-shield          { -webkit-mask-image: var(--pua-icon-shield); mask-image: var(--pua-icon-shield); }
.pua-icon-crosshair        { -webkit-mask-image: var(--pua-icon-crosshair); mask-image: var(--pua-icon-crosshair); }
.pua-icon-sun       { -webkit-mask-image: var(--pua-icon-sun); mask-image: var(--pua-icon-sun); }
.pua-icon-bolt         { -webkit-mask-image: var(--pua-icon-bolt); mask-image: var(--pua-icon-bolt); }
.pua-icon-droplet     { -webkit-mask-image: var(--pua-icon-droplet); mask-image: var(--pua-icon-droplet); }
.pua-icon-starburst         { -webkit-mask-image: var(--pua-icon-starburst); mask-image: var(--pua-icon-starburst); }
.pua-icon-circle-quartered   { -webkit-mask-image: var(--pua-icon-circle-quartered); mask-image: var(--pua-icon-circle-quartered); }
.pua-icon-check-circle-outline { -webkit-mask-image: var(--pua-icon-check-circle-outline); mask-image: var(--pua-icon-check-circle-outline); }
.pua-icon-globe      { -webkit-mask-image: var(--pua-icon-globe); mask-image: var(--pua-icon-globe); }
.pua-icon-magnifier      { -webkit-mask-image: var(--pua-icon-magnifier); mask-image: var(--pua-icon-magnifier); }
.pua-icon-arrow-up  { -webkit-mask-image: var(--pua-icon-arrow-up);  mask-image: var(--pua-icon-arrow-up); }
.pua-icon-star        { -webkit-mask-image: var(--pua-icon-star); mask-image: var(--pua-icon-star); }
.pua-icon-trend-up    { -webkit-mask-image: var(--pua-icon-trend-up); mask-image: var(--pua-icon-trend-up); }
.pua-icon-heart       { -webkit-mask-image: var(--pua-icon-heart); mask-image: var(--pua-icon-heart); }
.pua-icon-cart        { -webkit-mask-image: var(--pua-icon-cart); mask-image: var(--pua-icon-cart); }
.pua-icon-people      { -webkit-mask-image: var(--pua-icon-people); mask-image: var(--pua-icon-people); }
.pua-icon-clock       { -webkit-mask-image: var(--pua-icon-clock); mask-image: var(--pua-icon-clock); }
.pua-icon-person-add  { -webkit-mask-image: var(--pua-icon-person-add); mask-image: var(--pua-icon-person-add); }
.pua-icon-layers      { -webkit-mask-image: var(--pua-icon-layers); mask-image: var(--pua-icon-layers); }
.pua-icon-play-screen { -webkit-mask-image: var(--pua-icon-play-screen); mask-image: var(--pua-icon-play-screen); }
.pua-icon-swap        { -webkit-mask-image: var(--pua-icon-swap); mask-image: var(--pua-icon-swap); }
.pua-icon-message     { -webkit-mask-image: var(--pua-icon-message); mask-image: var(--pua-icon-message); }
.pua-icon-file        { -webkit-mask-image: var(--pua-icon-file); mask-image: var(--pua-icon-file); }
.pua-icon-upload      { -webkit-mask-image: var(--pua-icon-upload); mask-image: var(--pua-icon-upload); }
.pua-icon-facebook    { -webkit-mask-image: var(--pua-icon-facebook); mask-image: var(--pua-icon-facebook); }
.pua-icon-twitter     { -webkit-mask-image: var(--pua-icon-twitter); mask-image: var(--pua-icon-twitter); }
.pua-icon-linkedin    { -webkit-mask-image: var(--pua-icon-linkedin); mask-image: var(--pua-icon-linkedin); }

/* --------------------------------------------------------------
   SPACING UTILITIES
   -------------------------------------------------------------- */

/* Sides: (all), top-, bottom-, left-, right-, vert-, horiz-. */

/* --- Padding --- */

/* padding all sides */
.pua-padding-none { padding: 0 !important; }
.pua-padding-4 { padding: 0.25rem !important; }
.pua-padding-6 { padding: 0.375rem !important; }
.pua-padding-8 { padding: 0.5rem !important; }
.pua-padding-12 { padding: 0.75rem !important; }
.pua-padding-14 { padding: 0.875rem !important; }
.pua-padding-16 { padding: 1rem !important; }
.pua-padding-20 { padding: 1.25rem !important; }
.pua-padding-24 { padding: 1.5rem !important; }
.pua-padding-25 { padding: 1.5625rem !important; }
.pua-padding-28 { padding: 1.75rem !important; }
.pua-padding-32 { padding: 2rem !important; }
.pua-padding-34 { padding: 2.125rem !important; }
.pua-padding-36 { padding: 2.25rem !important; }
.pua-padding-40 { padding: 2.5rem !important; }
.pua-padding-44 { padding: 2.75rem !important; }
.pua-padding-48 { padding: 3rem !important; }
.pua-padding-52 { padding: 3.25rem !important; }
.pua-padding-56 { padding: 3.5rem !important; }
.pua-padding-60 { padding: 3.75rem !important; }
.pua-padding-64 { padding: 4rem !important; }
.pua-padding-68 { padding: 4.25rem !important; }
.pua-padding-72 { padding: 4.5rem !important; }
.pua-padding-76 { padding: 4.75rem !important; }
.pua-padding-80 { padding: 5rem !important; }

/* padding top only */
.pua-padding-top-none { padding-top: 0 !important; }
.pua-padding-top-4 { padding-top: 0.25rem !important; }
.pua-padding-top-6 { padding-top: 0.375rem !important; }
.pua-padding-top-8 { padding-top: 0.5rem !important; }
.pua-padding-top-12 { padding-top: 0.75rem !important; }
.pua-padding-top-14 { padding-top: 0.875rem !important; }
.pua-padding-top-16 { padding-top: 1rem !important; }
.pua-padding-top-20 { padding-top: 1.25rem !important; }
.pua-padding-top-24 { padding-top: 1.5rem !important; }
.pua-padding-top-25 { padding-top: 1.5625rem !important; }
.pua-padding-top-28 { padding-top: 1.75rem !important; }
.pua-padding-top-32 { padding-top: 2rem !important; }
.pua-padding-top-34 { padding-top: 2.125rem !important; }
.pua-padding-top-36 { padding-top: 2.25rem !important; }
.pua-padding-top-40 { padding-top: 2.5rem !important; }
.pua-padding-top-44 { padding-top: 2.75rem !important; }
.pua-padding-top-48 { padding-top: 3rem !important; }
.pua-padding-top-52 { padding-top: 3.25rem !important; }
.pua-padding-top-56 { padding-top: 3.5rem !important; }
.pua-padding-top-60 { padding-top: 3.75rem !important; }
.pua-padding-top-64 { padding-top: 4rem !important; }
.pua-padding-top-68 { padding-top: 4.25rem !important; }
.pua-padding-top-72 { padding-top: 4.5rem !important; }
.pua-padding-top-76 { padding-top: 4.75rem !important; }
.pua-padding-top-80 { padding-top: 5rem !important; }

/* padding bottom only */
.pua-padding-bottom-none { padding-bottom: 0 !important; }
.pua-padding-bottom-4 { padding-bottom: 0.25rem !important; }
.pua-padding-bottom-6 { padding-bottom: 0.375rem !important; }
.pua-padding-bottom-8 { padding-bottom: 0.5rem !important; }
.pua-padding-bottom-12 { padding-bottom: 0.75rem !important; }
.pua-padding-bottom-14 { padding-bottom: 0.875rem !important; }
.pua-padding-bottom-16 { padding-bottom: 1rem !important; }
.pua-padding-bottom-20 { padding-bottom: 1.25rem !important; }
.pua-padding-bottom-24 { padding-bottom: 1.5rem !important; }
.pua-padding-bottom-25 { padding-bottom: 1.5625rem !important; }
.pua-padding-bottom-28 { padding-bottom: 1.75rem !important; }
.pua-padding-bottom-32 { padding-bottom: 2rem !important; }
.pua-padding-bottom-34 { padding-bottom: 2.125rem !important; }
.pua-padding-bottom-36 { padding-bottom: 2.25rem !important; }
.pua-padding-bottom-40 { padding-bottom: 2.5rem !important; }
.pua-padding-bottom-44 { padding-bottom: 2.75rem !important; }
.pua-padding-bottom-48 { padding-bottom: 3rem !important; }
.pua-padding-bottom-52 { padding-bottom: 3.25rem !important; }
.pua-padding-bottom-56 { padding-bottom: 3.5rem !important; }
.pua-padding-bottom-60 { padding-bottom: 3.75rem !important; }
.pua-padding-bottom-64 { padding-bottom: 4rem !important; }
.pua-padding-bottom-68 { padding-bottom: 4.25rem !important; }
.pua-padding-bottom-72 { padding-bottom: 4.5rem !important; }
.pua-padding-bottom-76 { padding-bottom: 4.75rem !important; }
.pua-padding-bottom-80 { padding-bottom: 5rem !important; }

/* padding left only */
.pua-padding-left-none { padding-left: 0 !important; }
.pua-padding-left-4 { padding-left: 0.25rem !important; }
.pua-padding-left-6 { padding-left: 0.375rem !important; }
.pua-padding-left-8 { padding-left: 0.5rem !important; }
.pua-padding-left-12 { padding-left: 0.75rem !important; }
.pua-padding-left-14 { padding-left: 0.875rem !important; }
.pua-padding-left-16 { padding-left: 1rem !important; }
.pua-padding-left-20 { padding-left: 1.25rem !important; }
.pua-padding-left-24 { padding-left: 1.5rem !important; }
.pua-padding-left-25 { padding-left: 1.5625rem !important; }
.pua-padding-left-28 { padding-left: 1.75rem !important; }
.pua-padding-left-32 { padding-left: 2rem !important; }
.pua-padding-left-34 { padding-left: 2.125rem !important; }
.pua-padding-left-36 { padding-left: 2.25rem !important; }
.pua-padding-left-40 { padding-left: 2.5rem !important; }
.pua-padding-left-44 { padding-left: 2.75rem !important; }
.pua-padding-left-48 { padding-left: 3rem !important; }
.pua-padding-left-52 { padding-left: 3.25rem !important; }
.pua-padding-left-56 { padding-left: 3.5rem !important; }
.pua-padding-left-60 { padding-left: 3.75rem !important; }
.pua-padding-left-64 { padding-left: 4rem !important; }
.pua-padding-left-68 { padding-left: 4.25rem !important; }
.pua-padding-left-72 { padding-left: 4.5rem !important; }
.pua-padding-left-76 { padding-left: 4.75rem !important; }
.pua-padding-left-80 { padding-left: 5rem !important; }

/* padding right only */
.pua-padding-right-none { padding-right: 0 !important; }
.pua-padding-right-4 { padding-right: 0.25rem !important; }
.pua-padding-right-6 { padding-right: 0.375rem !important; }
.pua-padding-right-8 { padding-right: 0.5rem !important; }
.pua-padding-right-12 { padding-right: 0.75rem !important; }
.pua-padding-right-14 { padding-right: 0.875rem !important; }
.pua-padding-right-16 { padding-right: 1rem !important; }
.pua-padding-right-20 { padding-right: 1.25rem !important; }
.pua-padding-right-24 { padding-right: 1.5rem !important; }
.pua-padding-right-25 { padding-right: 1.5625rem !important; }
.pua-padding-right-28 { padding-right: 1.75rem !important; }
.pua-padding-right-32 { padding-right: 2rem !important; }
.pua-padding-right-34 { padding-right: 2.125rem !important; }
.pua-padding-right-36 { padding-right: 2.25rem !important; }
.pua-padding-right-40 { padding-right: 2.5rem !important; }
.pua-padding-right-44 { padding-right: 2.75rem !important; }
.pua-padding-right-48 { padding-right: 3rem !important; }
.pua-padding-right-52 { padding-right: 3.25rem !important; }
.pua-padding-right-56 { padding-right: 3.5rem !important; }
.pua-padding-right-60 { padding-right: 3.75rem !important; }
.pua-padding-right-64 { padding-right: 4rem !important; }
.pua-padding-right-68 { padding-right: 4.25rem !important; }
.pua-padding-right-72 { padding-right: 4.5rem !important; }
.pua-padding-right-76 { padding-right: 4.75rem !important; }
.pua-padding-right-80 { padding-right: 5rem !important; }

/* padding top and bottom */
.pua-padding-vert-none { padding-top: 0 !important; padding-bottom: 0 !important; }
.pua-padding-vert-4 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
.pua-padding-vert-6 { padding-top: 0.375rem !important; padding-bottom: 0.375rem !important; }
.pua-padding-vert-8 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
.pua-padding-vert-12 { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; }
.pua-padding-vert-14 { padding-top: 0.875rem !important; padding-bottom: 0.875rem !important; }
.pua-padding-vert-16 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.pua-padding-vert-20 { padding-top: 1.25rem !important; padding-bottom: 1.25rem !important; }
.pua-padding-vert-24 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.pua-padding-vert-25 { padding-top: 1.5625rem !important; padding-bottom: 1.5625rem !important; }
.pua-padding-vert-28 { padding-top: 1.75rem !important; padding-bottom: 1.75rem !important; }
.pua-padding-vert-32 { padding-top: 2rem !important; padding-bottom: 2rem !important; }
.pua-padding-vert-34 { padding-top: 2.125rem !important; padding-bottom: 2.125rem !important; }
.pua-padding-vert-36 { padding-top: 2.25rem !important; padding-bottom: 2.25rem !important; }
.pua-padding-vert-40 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
.pua-padding-vert-44 { padding-top: 2.75rem !important; padding-bottom: 2.75rem !important; }
.pua-padding-vert-48 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
.pua-padding-vert-52 { padding-top: 3.25rem !important; padding-bottom: 3.25rem !important; }
.pua-padding-vert-56 { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; }
.pua-padding-vert-60 { padding-top: 3.75rem !important; padding-bottom: 3.75rem !important; }
.pua-padding-vert-64 { padding-top: 4rem !important; padding-bottom: 4rem !important; }
.pua-padding-vert-68 { padding-top: 4.25rem !important; padding-bottom: 4.25rem !important; }
.pua-padding-vert-72 { padding-top: 4.5rem !important; padding-bottom: 4.5rem !important; }
.pua-padding-vert-76 { padding-top: 4.75rem !important; padding-bottom: 4.75rem !important; }
.pua-padding-vert-80 { padding-top: 5rem !important; padding-bottom: 5rem !important; }

/* padding left and right */
.pua-padding-horiz-none { padding-left: 0 !important; padding-right: 0 !important; }
.pua-padding-horiz-4 { padding-left: 0.25rem !important; padding-right: 0.25rem !important; }
.pua-padding-horiz-6 { padding-left: 0.375rem !important; padding-right: 0.375rem !important; }
.pua-padding-horiz-8 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
.pua-padding-horiz-12 { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }
.pua-padding-horiz-14 { padding-left: 0.875rem !important; padding-right: 0.875rem !important; }
.pua-padding-horiz-16 { padding-left: 1rem !important; padding-right: 1rem !important; }
.pua-padding-horiz-20 { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
.pua-padding-horiz-24 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
.pua-padding-horiz-25 { padding-left: 1.5625rem !important; padding-right: 1.5625rem !important; }
.pua-padding-horiz-28 { padding-left: 1.75rem !important; padding-right: 1.75rem !important; }
.pua-padding-horiz-32 { padding-left: 2rem !important; padding-right: 2rem !important; }
.pua-padding-horiz-34 { padding-left: 2.125rem !important; padding-right: 2.125rem !important; }
.pua-padding-horiz-36 { padding-left: 2.25rem !important; padding-right: 2.25rem !important; }
.pua-padding-horiz-40 { padding-left: 2.5rem !important; padding-right: 2.5rem !important; }
.pua-padding-horiz-44 { padding-left: 2.75rem !important; padding-right: 2.75rem !important; }
.pua-padding-horiz-48 { padding-left: 3rem !important; padding-right: 3rem !important; }
.pua-padding-horiz-52 { padding-left: 3.25rem !important; padding-right: 3.25rem !important; }
.pua-padding-horiz-56 { padding-left: 3.5rem !important; padding-right: 3.5rem !important; }
.pua-padding-horiz-60 { padding-left: 3.75rem !important; padding-right: 3.75rem !important; }
.pua-padding-horiz-64 { padding-left: 4rem !important; padding-right: 4rem !important; }
.pua-padding-horiz-68 { padding-left: 4.25rem !important; padding-right: 4.25rem !important; }
.pua-padding-horiz-72 { padding-left: 4.5rem !important; padding-right: 4.5rem !important; }
.pua-padding-horiz-76 { padding-left: 4.75rem !important; padding-right: 4.75rem !important; }
.pua-padding-horiz-80 { padding-left: 5rem !important; padding-right: 5rem !important; }

/* --- Margin --- */

/* margin all sides */
.pua-margin-none { margin: 0 !important; }
.pua-margin-4 { margin: 0.25rem !important; }
.pua-margin-6 { margin: 0.375rem !important; }
.pua-margin-8 { margin: 0.5rem !important; }
.pua-margin-12 { margin: 0.75rem !important; }
.pua-margin-14 { margin: 0.875rem !important; }
.pua-margin-16 { margin: 1rem !important; }
.pua-margin-20 { margin: 1.25rem !important; }
.pua-margin-24 { margin: 1.5rem !important; }
.pua-margin-25 { margin: 1.5625rem !important; }
.pua-margin-28 { margin: 1.75rem !important; }
.pua-margin-32 { margin: 2rem !important; }
.pua-margin-34 { margin: 2.125rem !important; }
.pua-margin-36 { margin: 2.25rem !important; }
.pua-margin-40 { margin: 2.5rem !important; }
.pua-margin-44 { margin: 2.75rem !important; }
.pua-margin-48 { margin: 3rem !important; }
.pua-margin-52 { margin: 3.25rem !important; }
.pua-margin-56 { margin: 3.5rem !important; }
.pua-margin-60 { margin: 3.75rem !important; }
.pua-margin-64 { margin: 4rem !important; }
.pua-margin-68 { margin: 4.25rem !important; }
.pua-margin-72 { margin: 4.5rem !important; }
.pua-margin-76 { margin: 4.75rem !important; }
.pua-margin-80 { margin: 5rem !important; }

/* Centres a fixed-width block in its column. */
.pua-margin-horiz-auto { margin-left: auto !important; margin-right: auto !important; }

/* margin top only */
.pua-margin-top-none { margin-top: 0 !important; }
.pua-margin-top-4 { margin-top: 0.25rem !important; }
.pua-margin-top-6 { margin-top: 0.375rem !important; }
.pua-margin-top-8 { margin-top: 0.5rem !important; }
.pua-margin-top-12 { margin-top: 0.75rem !important; }
.pua-margin-top-14 { margin-top: 0.875rem !important; }
.pua-margin-top-16 { margin-top: 1rem !important; }
.pua-margin-top-20 { margin-top: 1.25rem !important; }
.pua-margin-top-24 { margin-top: 1.5rem !important; }
.pua-margin-top-25 { margin-top: 1.5625rem !important; }
.pua-margin-top-28 { margin-top: 1.75rem !important; }
.pua-margin-top-32 { margin-top: 2rem !important; }
.pua-margin-top-34 { margin-top: 2.125rem !important; }
.pua-margin-top-36 { margin-top: 2.25rem !important; }
.pua-margin-top-40 { margin-top: 2.5rem !important; }
.pua-margin-top-44 { margin-top: 2.75rem !important; }
.pua-margin-top-48 { margin-top: 3rem !important; }
.pua-margin-top-52 { margin-top: 3.25rem !important; }
.pua-margin-top-56 { margin-top: 3.5rem !important; }
.pua-margin-top-60 { margin-top: 3.75rem !important; }
.pua-margin-top-64 { margin-top: 4rem !important; }
.pua-margin-top-68 { margin-top: 4.25rem !important; }
.pua-margin-top-72 { margin-top: 4.5rem !important; }
.pua-margin-top-76 { margin-top: 4.75rem !important; }
.pua-margin-top-80 { margin-top: 5rem !important; }

/* margin bottom only */
.pua-margin-bottom-none { margin-bottom: 0 !important; }
.pua-margin-bottom-4 { margin-bottom: 0.25rem !important; }
.pua-margin-bottom-6 { margin-bottom: 0.375rem !important; }
.pua-margin-bottom-8 { margin-bottom: 0.5rem !important; }
.pua-margin-bottom-12 { margin-bottom: 0.75rem !important; }
.pua-margin-bottom-14 { margin-bottom: 0.875rem !important; }
.pua-margin-bottom-16 { margin-bottom: 1rem !important; }
.pua-margin-bottom-20 { margin-bottom: 1.25rem !important; }
.pua-margin-bottom-24 { margin-bottom: 1.5rem !important; }
.pua-margin-bottom-25 { margin-bottom: 1.5625rem !important; }
.pua-margin-bottom-28 { margin-bottom: 1.75rem !important; }
.pua-margin-bottom-32 { margin-bottom: 2rem !important; }
.pua-margin-bottom-34 { margin-bottom: 2.125rem !important; }
.pua-margin-bottom-36 { margin-bottom: 2.25rem !important; }
.pua-margin-bottom-40 { margin-bottom: 2.5rem !important; }
.pua-margin-bottom-44 { margin-bottom: 2.75rem !important; }
.pua-margin-bottom-48 { margin-bottom: 3rem !important; }
.pua-margin-bottom-52 { margin-bottom: 3.25rem !important; }
.pua-margin-bottom-56 { margin-bottom: 3.5rem !important; }
.pua-margin-bottom-60 { margin-bottom: 3.75rem !important; }
.pua-margin-bottom-64 { margin-bottom: 4rem !important; }
.pua-margin-bottom-68 { margin-bottom: 4.25rem !important; }
.pua-margin-bottom-72 { margin-bottom: 4.5rem !important; }
.pua-margin-bottom-76 { margin-bottom: 4.75rem !important; }
.pua-margin-bottom-80 { margin-bottom: 5rem !important; }

/* margin left only */
.pua-margin-left-none { margin-left: 0 !important; }
.pua-margin-left-4 { margin-left: 0.25rem !important; }
.pua-margin-left-6 { margin-left: 0.375rem !important; }
.pua-margin-left-8 { margin-left: 0.5rem !important; }
.pua-margin-left-12 { margin-left: 0.75rem !important; }
.pua-margin-left-14 { margin-left: 0.875rem !important; }
.pua-margin-left-16 { margin-left: 1rem !important; }
.pua-margin-left-20 { margin-left: 1.25rem !important; }
.pua-margin-left-24 { margin-left: 1.5rem !important; }
.pua-margin-left-25 { margin-left: 1.5625rem !important; }
.pua-margin-left-28 { margin-left: 1.75rem !important; }
.pua-margin-left-32 { margin-left: 2rem !important; }
.pua-margin-left-34 { margin-left: 2.125rem !important; }
.pua-margin-left-36 { margin-left: 2.25rem !important; }
.pua-margin-left-40 { margin-left: 2.5rem !important; }
.pua-margin-left-44 { margin-left: 2.75rem !important; }
.pua-margin-left-48 { margin-left: 3rem !important; }
.pua-margin-left-52 { margin-left: 3.25rem !important; }
.pua-margin-left-56 { margin-left: 3.5rem !important; }
.pua-margin-left-60 { margin-left: 3.75rem !important; }
.pua-margin-left-64 { margin-left: 4rem !important; }
.pua-margin-left-68 { margin-left: 4.25rem !important; }
.pua-margin-left-72 { margin-left: 4.5rem !important; }
.pua-margin-left-76 { margin-left: 4.75rem !important; }
.pua-margin-left-80 { margin-left: 5rem !important; }

/* margin right only */
.pua-margin-right-none { margin-right: 0 !important; }
.pua-margin-right-4 { margin-right: 0.25rem !important; }
.pua-margin-right-6 { margin-right: 0.375rem !important; }
.pua-margin-right-8 { margin-right: 0.5rem !important; }
.pua-margin-right-12 { margin-right: 0.75rem !important; }
.pua-margin-right-14 { margin-right: 0.875rem !important; }
.pua-margin-right-16 { margin-right: 1rem !important; }
.pua-margin-right-20 { margin-right: 1.25rem !important; }
.pua-margin-right-24 { margin-right: 1.5rem !important; }
.pua-margin-right-25 { margin-right: 1.5625rem !important; }
.pua-margin-right-28 { margin-right: 1.75rem !important; }
.pua-margin-right-32 { margin-right: 2rem !important; }
.pua-margin-right-34 { margin-right: 2.125rem !important; }
.pua-margin-right-36 { margin-right: 2.25rem !important; }
.pua-margin-right-40 { margin-right: 2.5rem !important; }
.pua-margin-right-44 { margin-right: 2.75rem !important; }
.pua-margin-right-48 { margin-right: 3rem !important; }
.pua-margin-right-52 { margin-right: 3.25rem !important; }
.pua-margin-right-56 { margin-right: 3.5rem !important; }
.pua-margin-right-60 { margin-right: 3.75rem !important; }
.pua-margin-right-64 { margin-right: 4rem !important; }
.pua-margin-right-68 { margin-right: 4.25rem !important; }
.pua-margin-right-72 { margin-right: 4.5rem !important; }
.pua-margin-right-76 { margin-right: 4.75rem !important; }
.pua-margin-right-80 { margin-right: 5rem !important; }

/* margin top and bottom */
.pua-margin-vert-none { margin-top: 0 !important; margin-bottom: 0 !important; }
.pua-margin-vert-4 { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; }
.pua-margin-vert-6 { margin-top: 0.375rem !important; margin-bottom: 0.375rem !important; }
.pua-margin-vert-8 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; }
.pua-margin-vert-12 { margin-top: 0.75rem !important; margin-bottom: 0.75rem !important; }
.pua-margin-vert-14 { margin-top: 0.875rem !important; margin-bottom: 0.875rem !important; }
.pua-margin-vert-16 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
.pua-margin-vert-20 { margin-top: 1.25rem !important; margin-bottom: 1.25rem !important; }
.pua-margin-vert-24 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
.pua-margin-vert-25 { margin-top: 1.5625rem !important; margin-bottom: 1.5625rem !important; }
.pua-margin-vert-28 { margin-top: 1.75rem !important; margin-bottom: 1.75rem !important; }
.pua-margin-vert-32 { margin-top: 2rem !important; margin-bottom: 2rem !important; }
.pua-margin-vert-34 { margin-top: 2.125rem !important; margin-bottom: 2.125rem !important; }
.pua-margin-vert-36 { margin-top: 2.25rem !important; margin-bottom: 2.25rem !important; }
.pua-margin-vert-40 { margin-top: 2.5rem !important; margin-bottom: 2.5rem !important; }
.pua-margin-vert-44 { margin-top: 2.75rem !important; margin-bottom: 2.75rem !important; }
.pua-margin-vert-48 { margin-top: 3rem !important; margin-bottom: 3rem !important; }
.pua-margin-vert-52 { margin-top: 3.25rem !important; margin-bottom: 3.25rem !important; }
.pua-margin-vert-56 { margin-top: 3.5rem !important; margin-bottom: 3.5rem !important; }
.pua-margin-vert-60 { margin-top: 3.75rem !important; margin-bottom: 3.75rem !important; }
.pua-margin-vert-64 { margin-top: 4rem !important; margin-bottom: 4rem !important; }
.pua-margin-vert-68 { margin-top: 4.25rem !important; margin-bottom: 4.25rem !important; }
.pua-margin-vert-72 { margin-top: 4.5rem !important; margin-bottom: 4.5rem !important; }
.pua-margin-vert-76 { margin-top: 4.75rem !important; margin-bottom: 4.75rem !important; }
.pua-margin-vert-80 { margin-top: 5rem !important; margin-bottom: 5rem !important; }

/* margin left and right */
.pua-margin-horiz-none { margin-left: 0 !important; margin-right: 0 !important; }
.pua-margin-horiz-4 { margin-left: 0.25rem !important; margin-right: 0.25rem !important; }
.pua-margin-horiz-6 { margin-left: 0.375rem !important; margin-right: 0.375rem !important; }
.pua-margin-horiz-8 { margin-left: 0.5rem !important; margin-right: 0.5rem !important; }
.pua-margin-horiz-12 { margin-left: 0.75rem !important; margin-right: 0.75rem !important; }
.pua-margin-horiz-14 { margin-left: 0.875rem !important; margin-right: 0.875rem !important; }
.pua-margin-horiz-16 { margin-left: 1rem !important; margin-right: 1rem !important; }
.pua-margin-horiz-20 { margin-left: 1.25rem !important; margin-right: 1.25rem !important; }
.pua-margin-horiz-24 { margin-left: 1.5rem !important; margin-right: 1.5rem !important; }
.pua-margin-horiz-25 { margin-left: 1.5625rem !important; margin-right: 1.5625rem !important; }
.pua-margin-horiz-28 { margin-left: 1.75rem !important; margin-right: 1.75rem !important; }
.pua-margin-horiz-32 { margin-left: 2rem !important; margin-right: 2rem !important; }
.pua-margin-horiz-34 { margin-left: 2.125rem !important; margin-right: 2.125rem !important; }
.pua-margin-horiz-36 { margin-left: 2.25rem !important; margin-right: 2.25rem !important; }
.pua-margin-horiz-40 { margin-left: 2.5rem !important; margin-right: 2.5rem !important; }
.pua-margin-horiz-44 { margin-left: 2.75rem !important; margin-right: 2.75rem !important; }
.pua-margin-horiz-48 { margin-left: 3rem !important; margin-right: 3rem !important; }
.pua-margin-horiz-52 { margin-left: 3.25rem !important; margin-right: 3.25rem !important; }
.pua-margin-horiz-56 { margin-left: 3.5rem !important; margin-right: 3.5rem !important; }
.pua-margin-horiz-60 { margin-left: 3.75rem !important; margin-right: 3.75rem !important; }
.pua-margin-horiz-64 { margin-left: 4rem !important; margin-right: 4rem !important; }
.pua-margin-horiz-68 { margin-left: 4.25rem !important; margin-right: 4.25rem !important; }
.pua-margin-horiz-72 { margin-left: 4.5rem !important; margin-right: 4.5rem !important; }
.pua-margin-horiz-76 { margin-left: 4.75rem !important; margin-right: 4.75rem !important; }
.pua-margin-horiz-80 { margin-left: 5rem !important; margin-right: 5rem !important; }

/* --------------------------------------------------------------
   ROW GAP UTILITIES
   -------------------------------------------------------------- */

/* Overrides the row spacing a grid or flex container sets for itself.
   The name is the rendered pixel gap. */
.pua-row-gap-4  { row-gap: 0.25rem !important; }
.pua-row-gap-8  { row-gap: 0.5rem !important; }
.pua-row-gap-12 { row-gap: 0.75rem !important; }
.pua-row-gap-16 { row-gap: 1rem !important; }
.pua-row-gap-20 { row-gap: 1.25rem !important; }
.pua-row-gap-24 { row-gap: 1.5rem !important; }
.pua-row-gap-28 { row-gap: 1.75rem !important; }
.pua-row-gap-32 { row-gap: 2rem !important; }
.pua-row-gap-40 { row-gap: 2.5rem !important; }
.pua-row-gap-48 { row-gap: 3rem !important; }
.pua-row-gap-56 { row-gap: 3.5rem !important; }
.pua-row-gap-64 { row-gap: 4rem !important; }

/* --------------------------------------------------------------
   COLUMN GAP UTILITIES
   -------------------------------------------------------------- */

/* Overrides the side-by-side spacing a grid or flex container sets for itself.
   The name is the rendered pixel gap. */
.pua-column-gap-4  { column-gap: 0.25rem !important; }
.pua-column-gap-8  { column-gap: 0.5rem !important; }
.pua-column-gap-12 { column-gap: 0.75rem !important; }
.pua-column-gap-16 { column-gap: 1rem !important; }
.pua-column-gap-20 { column-gap: 1.25rem !important; }
.pua-column-gap-24 { column-gap: 1.5rem !important; }
.pua-column-gap-28 { column-gap: 1.75rem !important; }
.pua-column-gap-32 { column-gap: 2rem !important; }
.pua-column-gap-40 { column-gap: 2.5rem !important; }
.pua-column-gap-48 { column-gap: 3rem !important; }
.pua-column-gap-56 { column-gap: 3.5rem !important; }
.pua-column-gap-64 { column-gap: 4rem !important; }

/* ==============================================================
   TI OVERRIDES
   ============================================================== */

/* --------------------------------------------------------------
   TI WIDGET LEVEL CLASSES
   -------------------------------------------------------------- */

/* Enter these in the widget's Add Custom CSS field in TI admin. Several can be combined. */

/* One section per widget. Enter alongside pua-width-widget. */
.home__content .widget.pua-section {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
  border-bottom: 1px solid var(--pua-hairline);
}

/* The last section carries no rule. */
.home__content .widget.pua-section:last-child {
  border-bottom: none;
}

/* A widget holding only a heading for the widget below it. */
.home__content .widget.pua-section.pua-heading-only {
  padding-bottom: 0;
  border-bottom: none;
}

/* Heading margins are dropped. */
.pua-heading-only .pua-section-header-row,
.pua-heading-only .editor-content > *:last-child,
.pua-heading-only .editor-content > *:has(+ script) {
  margin-bottom: 0;
}

/* Paragraphs typed straight into a section. Override classes compose on top;
   the components listed here bring their own type and are left alone. */
.pua-section .editor-content > p:not(.pua-eyebrow, .pua-body, .pua-body-sm, .pua-price-mention, .pua-qa-question) {
  font-family: var(--pua-font-family);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--pua-gray-dark-txt);
  margin-bottom: 1.125rem;
}

/* A paragraph inside a pua-columns block takes the body default. The column
   spacing already separates the cells, so the paragraph carries no margin.
   :where() keeps this to our pages without adding weight, so a card or callout
   around it still wins and keeps its own smaller type. */
:where(.pua-section) :is(.pua-columns-2, .pua-columns-3, .pua-columns-4, .pua-columns-5) > p {
  font-family: var(--pua-font-family);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--pua-gray-dark-txt);
  margin: 0;
}

/* A plain list reads as body copy. Without this the items keep the browser's
   own black and tighter leading, which reads heavier than the copy around them.
   Only our two list components are excluded by name, so a plain list still reads
   correctly after a utility class is added to it. TI sets font-size: inherit on
   lists, so the list element is pinned alongside its items. */
:where(.pua-section) :is(ul, ol):not(.pua-list, .pua-best-for-pills) {
  font-family: var(--pua-font-family);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--pua-gray-dark-txt);
}

/* TI styles list items directly, so inheritance alone never reaches them. The item
   takes everything from its list, which lets a utility on the list reach the text
   the same way it does on a paragraph. */
:where(.pua-section) :is(ul, ol):not(.pua-list, .pua-best-for-pills) > li {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

/* No trailing space at the foot of the widget. */
.pua-section .editor-content > p:not(.pua-eyebrow, .pua-body, .pua-body-sm, .pua-price-mention, .pua-qa-question):last-child,
.pua-section .editor-content > p:not(.pua-eyebrow, .pua-body, .pua-body-sm, .pua-price-mention, .pua-qa-question):has(+ script) {
  margin-bottom: 0;
}

/* Support page. Its structure and sheer volume of copy want a denser setting than
   the section default, so the whole question-and-answer run steps down one size. */
.pua-section.pua-support .pua-qa-question {
  font-size: 1rem;
  line-height: 1.3;
}

.pua-section.pua-support .editor-content > p:not(.pua-eyebrow, .pua-body, .pua-body-sm, .pua-price-mention, .pua-qa-question) {
  font-size: 0.9375rem;
}

/* A list is answer text too, so it follows the answers down. */
.pua-section.pua-support :is(ul, ol):not(.pua-list, .pua-best-for-pills) {
  font-size: 0.9375rem;
}

/* Lists sit flush with the copy on this page. Matched to the editor list indent at 0,2,1 so it wins. */
.pua-section.pua-support :is(ul, ol):not(.pua-list, .pua-best-for-pills) {
  padding-left: 0;
}

/* The markers sit in the margin. Numerals are wider than bullets, so the ol gets more room. */
.pua-section.pua-support ul:not(.pua-list, .pua-best-for-pills) { margin-left: 1rem; }
.pua-section.pua-support ol:not(.pua-list, .pua-best-for-pills) { margin-left: 1.2rem; }

/* Put this on the last visible widget. TI's hidden widgets sit after it, so :last-child cannot find it. */
.pua-last-widget {
  border-bottom: none !important;
}

/* Caps everything in the widget. The cap sits on the content container, so a new
   component or tag needs no change here. For one element use .pua-width-element.
   The widget itself stays full width, so the section rule still spans the page. */
.pua-width-widget .editor-content {
  max-width: var(--pua-text-max-width);
}

/* The intro block sits a step narrower than the body copy around it. */
.pua-width-widget .pua-content-box :is(p, h1, h2, h3, h4, h5, h6, ul, ol, blockquote) {
  max-width: var(--pua-intro-max-width);
}

/* --------------------------------------------------------------
   TI COURSE GRID
   -------------------------------------------------------------- */

/* Course grid. Add pua-course-grid to the featured content widget, on its own. */
.home__content .widget.pua-course-grid {
  padding-top: 1.75rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--pua-hairline);
}

.home__content .widget.pua-course-grid:last-child {
  border-bottom: none;
}

/* Course grid. Add pua-course-grid to the featured content widget in TI. */
.widget--featured-content.widget--featured-content_standard.pua-course-grid .catalog-grid-item__title {
  font-family: var(--pua-font-family);
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--pua-black-txt);
}

.widget--featured-content.widget--featured-content_standard.pua-course-grid .catalog-grid-item__source {
  font-family: var(--pua-font-family);
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pua-cyan-txt);
}

/* Every rating, not just five. */
.pua-course-grid .catalog-grid-item__stars .stars[class*="stars-"] i {
  color: var(--pua-magenta-element);
}

.widget--featured-content.widget--featured-content_standard.pua-course-grid .catalog-grid-item__cta-container {
  display: none;
}

/* TI hardcodes 130px here, which leaves a gap under short titles. */
.widget--featured-content.widget--featured-content_standard.pua-course-grid .catalog-grid-item__body {
  min-height: auto;
}

/* Tiles match height across a row. */
.pua-course-grid .featured-content-block-grid {
  display: flex;
  flex-wrap: wrap;
}

.pua-course-grid .catalog-item {
  display: flex;
  height: 100%;
}

.pua-course-grid .catalog-grid-item {
  flex: 1;
}

/* Ribbon moves to the top left and loses its folded corner. */
.pua-course-grid .catalog__ribbon {
  top: 8px;
  right: auto;
  left: 8px;
  font-family: var(--pua-font-family);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  padding: 3px 8px;
  border-radius: var(--pua-element-border-radius);
}

.pua-course-grid .catalog__ribbon-corner {
  display: none;
}

/* A trailing single tile reflows into a row of two rather than sitting alone. */
@media (min-width: 769px) {
  .pua-course-grid .medium-block-grid-4 > li:nth-of-type(4n+3):nth-last-of-type(3) {
    margin-right: 25%;
  }
}

/* --------------------------------------------------------------
   TI EDITOR FIXES
   -------------------------------------------------------------- */

/* Beat TI's editor styles on our own content classes. */

/* TI's Foundation floats the last of two adjacent elements whose class contains
   "column", which catches every pua-*columns* class. */
:is(.pua-columns-2, .pua-columns-3, .pua-columns-4, .pua-columns-5,
    .pua-list-columns, .pua-quote-columns) {
  float: none !important;
}

/* TI wraps editor images in a figure carrying a 40px side margin, which shrinks
   the image inside any of our components. */
[class*="pua-"] > figure {
  margin: 0;
}

/* List reset for our own list components. Ties TI's specificity, and TI loads
   first. Named rather than matched on "pua-", so a plain list wearing only a
   utility class keeps the body type it gets elsewhere. */
:is(ul, ol):is(.pua-list, .pua-best-for-pills) {
  padding-left: 0;
}

:is(ul, ol):is(.pua-list, .pua-best-for-pills) > li {
  margin-bottom: 0;
  line-height: 1.6;
}

/* ==========================================================================
   ==========================================================================
   ==                                                                      ==
   ==              ▲▲▲   END - DIGITAL INTELLECTIVE CSS   ▲▲▲              ==
   ==                                                                      ==
   ==========================================================================
   ========================================================================== */