@font-face {
    font-family: 'scale';
    src: url('font/scale.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Global Styles */
html {
    scroll-behavior: smooth;
}

body {
    font-family: "Arimo", sans-serif;
    font-size: 14pt;
    line-height: 1.4em;
    color: #444;
}

body.admin-bar #wpadminbar {
    display: none;
  }

div, p, span, h1, h2, h3, h4, h5, h6, i, img, sup, ol, li {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

.main {
    position: relative;
    padding: 40px 0 60px;
    background-color: #f2f4f7;
    font-size: 0;
}

.lp {
    position: relative;
    width: 780px;
    margin: 0 auto;
    padding: 0;
}

.lp .section-1 {
    padding: 24px 40px 30px;
    background-color: #fff;
    border-radius: 8px 8px 0 0;
}

.lp .disclosure-top {
    margin: 0 0 10px;
    padding: 0;
    font-family: "Open Sans", sans-serif;
    font-size: 18px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #2c3038;
    text-align: center;
}

.lp h1 {
    margin: 0 0 10px;
    padding: 0;
    font-family: 'Roboto', sans-serif;
    font-size: 44px;
    font-weight: 900;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #404347;
    text-align: center;
}

h1 {
    font-size: 36pt;
} 
/* git  */

h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
    text-rendering: optimizeLegibility;
    font-weight: normal;
}

.lp .nav-bar {
    display: flex;
    text-align: center;
    width: 600px;
    border: solid 1px #457ae6;
    background-color: #fff;
    margin: 20px auto 10px;
}

.lp .nav-bar a {
    text-decoration: none;
    vertical-align: middle;
    flex: 1;
    padding: 9px 10px;
    text-align: center;
    color: #5787eb;
    font-size: 20px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.lp .nav-bar a.active {
    background-color: #5787eb !important;
    color: #fff !important;
}

/* Always keep Key Ingredients (center nav item) with blue background - FORCE IT! */
.lp .nav-bar a[href="#key-ingredients"],
.lp .nav-bar a[href="#key-ingredients"]:visited,
.lp .nav-bar a[href="#key-ingredients"]:link,
.lp .nav-bar a[href="#key-ingredients"]:active,
.lp .nav-bar a[href="#key-ingredients"].active,
.lp .nav-bar a[href="#key-ingredients"]:not(.active) {
    background-color: #5787eb !important;
    color: #fff !important;
}

.lp .nav-bar a:hover {
    background-color: #457ae6;
    color: #fff;
    transition: all 0.3s ease;
}

/* Ensure spans inside nav links display properly */
.lp .nav-bar a span {
    display: inline-block;
    width: 100%;
}

.lp .disclosure {
    margin: 0 0 10px;
    padding: 0;
    font-family: "Open Sans", sans-serif;
    font-size: 16px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #2c3038;
    text-decoration: underline;
    text-align: right;
    cursor: pointer;
}

.lp h3 {
    margin: 0 0 20px;
    padding: 0;
    font-family: 'Roboto', sans-serif;
    font-size: 34px;
    font-weight: 700;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #404347;
}

/* Navigation target sections - ensure proper scroll positioning */
#benefits,
#key-ingredients,
#top-5,
#usage,
#ingredients-to-avoid,
#considerations {
    scroll-margin-top: 100px;
}

.lp .colored-table {
    margin: 0 0 30px;
    background-color: #f2f4f7;
}

.lp .colored-table.green h3 {
    background-color: #59b377;
    background-image: linear-gradient(to bottom, #5fb67c 10%, #4fa46c 92%);
}

.lp .colored-table h3 {
    margin: 0;
    padding: 12px 0;
    font-family: 'Roboto', sans-serif;
    font-size: 28px;
    font-weight: 700;
    text-align: center;
    color: #fff;
}

.lp .colored-table .table-body {
    margin: 0;
    padding: 20px 50px 42px;
}

/* Collapsible sections styling 
   JavaScript needed for functionality:
   
   document.addEventListener('DOMContentLoaded', function() {
       // Initialize all collapsible headers as collapsed
       const collapsibleHeaders = document.querySelectorAll('.lp .colored-table.collapsible-list h4');
       collapsibleHeaders.forEach(header => {
           header.classList.add('collapsed');
           header.addEventListener('click', function() {
               this.classList.toggle('collapsed');
           });
       });
   });
*/
.lp .colored-table.collapsible-list .table-body {
    padding: 20px 50px 20px;
}

.lp .colored-table.collapsible-list h4 {
    cursor: pointer;
    transition: color 0.3s ease;
    user-select: none;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;
}

.lp .colored-table.collapsible-list h4:hover {
    opacity: 0.8;
}

.lp .colored-table.collapsible-list h4.collapsed + p {
    display: none;
}

.lp .colored-table.collapsible-list h4::after {
    font-family: 'Arial', sans-serif;
    font-size: 20px;
    font-weight: bold;
    transition: all 0.3s ease;
    line-height: 1;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}

.lp .colored-table.collapsible-list h4.collapsed::after {
    content: '+';
}

.lp .colored-table.collapsible-list h4:not(.collapsed)::after {
    content: '−';
}

.lp .colored-table h4 span {
    padding: 2px 4px;
    border-radius: 2px;
    display: inline;
}

.lp .colored-table h4 {
    position: relative;
    margin: 0 0 15px;
    padding: 0;
    font-family: 'Roboto', sans-serif;
    font-size: 24px;
    font-weight: 700;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #2c3038;
}

.lp .colored-table .icon.green {
    color: #59b377;
}

.lp .colored-table .icon {
    margin: 0 5px 0 0;
    font-size: 24px;
    font-family: 'scale', sans-serif;
    display: inline-block;
    line-height: 1;
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
    vertical-align: baseline;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.lp .colored-table p {
    font-size: 20px;
}

.lp .colored-table.red h3 {
    background-color: #eb5757;
    background-image: linear-gradient(to bottom, #ed6565 10%, #e84444 92%);
}

.lp .colored-table .icon.red {
    color: #eb5757;
}

.icon-ok-circled2:before {
    content: '\2713';
    font-family: 'scale', 'Arial Unicode MS', Arial, sans-serif;
    font-style: normal;
    font-weight: bold;
    color: #fff;
    font-size: 0.9em;
    margin-right: 8px;
    display: inline-block;
    text-align: center;
    width: 1.5em;
    height: 1.5em;
    border-radius: 50%;
    background-color: #59b377;
    line-height: 1.5;
    vertical-align: middle;
}

.icon-cancel-circled2:before {
    content: '\2717';
    font-family: 'scale', 'Arial Unicode MS', Arial, sans-serif;
    font-style: normal;
    font-weight: bold;
    color: #fff;
    font-size: 0.9em;
    margin-right: 8px;
    display: inline-block;
    text-align: center;
    width: 1.5em;
    height: 1.5em;
    border-radius: 50%;
    background-color: #eb5757;
    line-height: 1.5;
    vertical-align: middle;
}

.lp .colored-table.blue h3 {
    background-color: #5787eb;
    background-image: linear-gradient(to bottom, #5f8ced 10%, #4f7ae6 92%);
}

.icon-ok-1:before {
    content: '\2713';
    font-family: 'scale', 'Arial Unicode MS', Arial, sans-serif;
    font-style: normal;
    font-weight: bold;
    color: #fff;
    font-size: 0.9em;
    margin-right: 8px;
    display: inline-block;
    text-align: center;
    width: 1.5em;
    height: 1.5em;
    border-radius: 50%;
    background-color: #5787eb;
    line-height: 1.5;
    vertical-align: middle;
}

.lp .section-2 {
    padding: 20px 40px 30px;
    background-color: #ebedf1;
}

.lp .review {
    background: #fff;
    padding: 35px 50px 98px;
    border: 1px solid #EFEFEF;
    border-top: 3px solid #5787eb;
    max-width: 760px;
    margin: 20px auto 50px;
    border-radius: 8px;
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
    transition: box-shadow 0.3s ease;
}

.lp .review:hover {
    box-shadow: 0 6px 25px 0 rgba(0, 0, 0, 0.12);
}

.review.test1 h4 {
    margin: 10px 0 0;
}

.lp .review h4 {
    font-family: "Roboto", sans-serif;
    font-size: 34px;
    margin: 4px 0 0;
    line-height: 1;
    padding-right: 250px;
    font-style: normal;
}

.lp .review h4 a {
    color: inherit;
    text-decoration: none;
    font-family: "Roboto", sans-serif;
    font-size: 28px;
    font-weight: bold;
    color: #404347;
}

a:link {
    -webkit-tap-highlight-color: #43bcdf;
}

sup {
    vertical-align: super;
    font-size: smaller;
}

.lp .review h4 sup a {
    font-family: "Open Sans", sans-serif;
    font-size: 14px;
    font-weight: normal;
    border-bottom: solid 1px #444;
}

.lp .byline {
    font-size: 18px;
    line-height: 1.56;
    color: #40394a;
    margin-bottom: 25px;
}

.lp .review .byline sup {
    margin: 0;
    padding: 0;
    font-family: "Open Sans", sans-serif;
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #40394a;
    display: none;
}

.define {
    margin: 0;
    padding: 0;
    font-family: "Open Sans", sans-serif;
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #40394a;
}

.lp .review .rating-image {
    position: absolute;
    top: 20px;
    right: 45px;
    width: 118px;
    height: 115px;
}

.review.test1 .product-image-box, .review.test1 .grade {
    width: 50%;
    border: none;
    height: 179px;
}

.review.test1 .product-image-box {
    padding: 0;
    padding-left: 20px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border-right: none;
}

.product-image-box, 
.circle-summary, 
.grade {
    width: 33%;
    border: 1px solid #F0F0F0;
    padding: 25px;
    text-align: center;
    vertical-align: top;
    float: left;
    height: 240px;
}

.circle-summary, .grade {
    border-left: 0;
}

.review.test1 .grade h1 {
    margin-top: 0;
}

.lp .grade h1 {
    font-family: "Open Sans", sans-serif;
    font-size: 72px;
    font-weight: normal;
    margin-top: 26px;
    line-height: 1.44;
}

.review.test1 .grade p {
    text-align: center;
    margin-top: -35px;
    margin-left: 8px;
}

.lp .review .circle-summary h4, .lp .review .grade p {
    font-family: "Open Sans", sans-serif;
    font-size: 16px;
    text-transform: uppercase;
    font-weight: bold;
    margin-bottom: 0;
    padding-right: 0;
}

.lp .grade p {
    position: relative;
    top: 40px;
}

.review.test1 .left {
    padding-top: 20px;
}

.lp .left, .lp .right {
    float: left;
    padding: 0 30px 5px;
    border-top: 1px solid #f0f0f0;
}

.lp .left {
    width: 61%;
    padding-left: 70px;
    margin-left: -70px;
    border-right: 1px solid #f0f0f0;
    padding-bottom: 10px;
}

ol, ul {
    list-style: none;
}

.lp .left .pros-cons li, .lp .right .pros-cons li {
    font-size: 16px;
    font-style: normal;
    line-height: 1.25;
    letter-spacing: normal;
    color: #2c3038;
    margin-bottom: 24px;
    padding-left: 40px;
    position: relative;
}

.lp .left .pros-cons li::before {
	font-family: "scale";
	display: inline-block;
	text-align: center;
	content: "\E899";
	color: #59b377;
	position: absolute;
	left: 0;
	top: 0;
	font-size: 25px;
	transform: translateY(-6px);
	-webkit-transform: translateY(-6px);
	-moz-transform: translateY(-6px);
	-ms-transform: translateY(-6px);
	-o-transform: translateY(-6px);
}

.lp .left .pros-cons ul:nth-of-type(2) li:before {
    content: "\E89A";
    color: #eb5757;
}

/* Enhanced checkmark styles for better display across different layouts */
/* Unicode-based checkmarks for broader compatibility */
.checkmark-icon {
    color: #59b377;
    font-weight: bold;
    font-size: 16px;
    margin-right: 8px;
    display: inline-block;
    width: 20px;
    text-align: center;
}

.checkmark-icon:before {
    content: '✓';
}

/* CSS-drawn circular checkmarks similar to Smarter Reviews style */
.checkmark-css {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid #59b377;
    border-radius: 50%;
    position: relative;
    margin-right: 8px;
    background-color: #59b377;
    vertical-align: middle;
}

.checkmark-css:after {
    content: '';
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* List styling with checkmarks */
.checkmark-list,
.checkmark-list ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.checkmark-list li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 12px;
    font-family: "Open Sans", sans-serif;
    font-size: 16px;
    line-height: 1.4;
    color: #2c3038;
}

.checkmark-list li:before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 0;
    color: #59b377;
    font-weight: bold;
    font-size: 18px;
    line-height: 1.4;
}

/* Enhanced styles for colored boxes/containers */
.benefits-box {
    background-color: #f9f9f9;
    border: 2px solid #59b377;
    border-radius: 8px;
    padding: 20px;
    margin: 20px 0;
}

.benefits-box h3,
.benefits-box h4 {
    color: #59b377;
    margin-bottom: 15px;
}

.feature-highlight {
    background-color: #f0f8f0;
    border-left: 4px solid #59b377;
    padding: 15px;
    margin: 15px 0;
}

/* Additional specific styles for clean-checkmark and clean-cross classes used in template */
.clean-checkmark, .clean-cross {
    font-size: 18px;
    font-weight: bold;
    margin-right: 8px;
    display: inline-block;
    width: 20px;
    text-align: center;
}

.clean-checkmark.green {
    color: #59b377;
}

.clean-cross.red {
    color: #eb5757;
}

.clean-checkmark.blue {
    color: #5787eb;
}

/* Apply checkmark styling to lists within colored sections */
.colored-table .table-body ul,
.colored-table .table-body ol {
    list-style: none;
    padding-left: 0;
}

.colored-table .table-body li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 12px;
    font-family: "Open Sans", sans-serif;
    line-height: 1.4;
}

.colored-table.green .table-body li:before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 0;
    color: #59b377;
    font-weight: bold;
    font-size: 16px;
    line-height: 1.4;
}

.colored-table.red .table-body li:before {
    content: '✗';
    position: absolute;
    left: 0;
    top: 0;
    color: #eb5757;
    font-weight: bold;
    font-size: 16px;
    line-height: 1.4;
}

.colored-table.blue .table-body li:before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 0;
    color: #5787eb;
    font-weight: bold;
    font-size: 16px;
    line-height: 1.4;
}

/* Override existing complex checkmark styles with clean simple ones */
/* Higher specificity to override existing .icon-ok-circled2 styles */
.lp .colored-table h4 .clean-checkmark,
.lp .colored-table h4 .clean-cross,
.clean-checkmark.green,
.clean-cross.red,
.clean-checkmark.blue {
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    width: auto !important;
    height: auto !important;
    line-height: normal !important;
    text-align: left !important;
    margin-right: 8px !important;
    vertical-align: baseline !important;
    font-family: Arial, sans-serif !important;
    font-weight: bold !important;
    font-size: 18px !important;
    display: inline !important;
}

/* Override any existing :before pseudo-elements on checkmarks */
.lp .colored-table h4 .clean-checkmark:before,
.lp .colored-table h4 .clean-cross:before {
    content: none !important;
}

/* Force clean checkmark colors */
.lp .colored-table h4 .clean-checkmark.green,
.clean-checkmark.green {
    color: #59b377 !important;
}

.lp .colored-table h4 .clean-cross.red,
.clean-cross.red {
    color: #eb5757 !important;
}

.lp .colored-table h4 .clean-checkmark.blue,
.clean-checkmark.blue {
    color: #5787eb !important;
}

/* Override the icon-ok-circled2 styles completely */
.lp .colored-table .icon-ok-circled2:before,
.lp .colored-table .icon-cancel-circled2:before,
.lp .colored-table .icon-ok-1:before {
    content: none !important;
    background-color: transparent !important;
    border-radius: 0 !important;
    width: auto !important;
    height: auto !important;
    margin-right: 0 !important;
}

/* Alternative approach - hide complex icons and show clean text */
.lp .colored-table h4 .icon-ok-circled2,
.lp .colored-table h4 .icon-cancel-circled2,
.lp .colored-table h4 .icon-ok-1 {
    display: none !important;
}

/* Mobile responsive adjustments for checkmarks */
@media (max-width: 768px) {
    .checkmark-icon,
    .checkmark-list li:before,
    .clean-checkmark,
    .clean-cross,
    .colored-table .table-body li:before {
        font-size: 16px;
    }
    
    .checkmark-css {
        width: 18px;
        height: 18px;
    }
    
    .checkmark-css:after {
        left: 5px;
        top: 1px;
        width: 4px;
        height: 8px;
    }
    
    .checkmark-list li {
        padding-left: 25px;
        margin-bottom: 10px;
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .checkmark-icon,
    .checkmark-list li:before,
    .clean-checkmark,
    .clean-cross,
    .colored-table .table-body li:before {
        font-size: 14px;
    }
    
    .checkmark-css {
        width: 16px;
        height: 16px;
    }
    
    .checkmark-css:after {
        left: 4px;
        top: 1px;
        width: 3px;
        height: 7px;
    }
    
    .checkmark-list li {
        padding-left: 22px;
        margin-bottom: 8px;
        font-size: 13px;
    }
}

.lp .left .pros-cons h3:last-of-type, .lp .right .pros-cons h3:last-of-type {
    margin-top: 46px;
}

.review.test1 .right {
    padding-top: 20px;
}

.lp .right {
    width: 60%;
    border-left: 1px solid #f0f0f0;
    margin-right: -70px;
    margin-left: -1px;
    padding-right: 70px;
}

.lp .right {
    font-size: 16px;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Rasa", serif;
    line-height: 1.3em;
    margin-bottom: 30px;
    color: #321E41;
    font-weight: bold;
}

.lp .right h5 {
    font-size: 26px;
    line-height: 1.54;
    letter-spacing: normal;
    color: #404347;
}

.lp .review .right p {
    font-size: 16px;
    letter-spacing: normal;
    color: #2c3038;
}

.lp .toggle {
    display: none;
}

button {
    width: auto;
    overflow: visible;
}

.lp .right a:last-of-type, a.top {
    background: #eb5757;
    background-image: linear-gradient(to bottom, #ed6565 10%, #e84444 92%);
    border-radius: 25.5px;
    display: inline-block;
    color: #fff;
    font-family: "Arimo", sans-serif;
    font-size: 18px;
    padding: 16px 76px;
    text-decoration: none;
    font-weight: bold;
    outline: none;
    box-shadow: 0 2px 8px 0 rgba(235, 87, 87, 0.3);
    border: none;
    text-align: center;
    min-width: 250px;
    line-height: 1;
    transition: all 0.3s ease;
}

.lp .right a:last-of-type:hover, a.top:hover {
    background-image: linear-gradient(to bottom, #e84444 10%, #d63333 92%);
    box-shadow: 0 4px 12px 0 rgba(235, 87, 87, 0.4);
    transform: translateX(-50%) translateY(-2px);
}

.lp .right a:last-of-type {
    white-space: nowrap;
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
}

.lp .right a:last-of-type i {
    margin-right: -10px;
}

.lp .right a:last-of-type i:before {
    margin-right: 0;
}


.product-image-box img {
    max-height: 148px;
}

/*---CITATIONS ---*/
.lp .citations h3, .lp .citations h4 {
    margin: 0;
    padding: 20px 40px;
    font-family: "Arimo", sans-serif;
    font-size: 16px;
    font-weight: 700;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #404347;
    background-color: #fff;
}

.lp .citations ol {
    padding: 20px 40px;
}

ol {
    margin-left: 30px;
    list-style-type: decimal;
}

.lp .citations ol li {
    margin: 0 0 24px;
    padding: 0;
    font-family: "Open Sans", sans-serif;
    font-size: 16px;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #404347;
}

/*--- Back To Top --- */
.lp .section-last {
    padding: 19px 0;
    background-color: #fff;
    text-align: center;
}

.lp .section-last a {
    margin: 0;
    padding: 0;
    font-family: "Open Sans", sans-serif;
    font-size: 16px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #2993fb;
}

/*--- Right Sidebar --- */
.lp p {
    margin: 0 0 20px;
    padding: 0;
    font-family: "Open Sans", sans-serif;
    font-size: 20px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #2c3038;
}

.lp .section-additional {
    background-color: #ebedf1;
}

.lp .right-sidebar {
    display: inline-block;
    height: auto;
    padding: 0px;
    margin: 0px;
    margin-right: 8em;
    position: absolute;
    top: 0;
    right: -37%;
}

.right-sidebar div.fixed {
    display: block;
    position: fixed;
    top: 0;
    margin: 0;
    z-index: 1;
}

.lp .right-panel:last-child {
    margin-bottom: 0;
}

.lp .right-panel {
    max-width: 250px;
    width: 100%;
    border-radius: 8px;
    border: solid 1px #c2c2c2;
    background-color: #fff;
    padding: 0px 0px 0px 0px;
    margin: 0 0 20px;
}

.lp .what-you-learn {
    font-family: "Roboto", sans-serif;
    text-align: center;
}

/* Sticky support for what-you-learn panel */
.lp .right-panel.what-you-learn.sticky-active {
    position: sticky !important;
    top: 20px !important;
    z-index: 15;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
}


.lp .right-panel h2 {
    font-family: "Open Sans", sans-serif;
    overflow: hidden;
    display: inline-block;
    text-align: center;
    width: 100%;
    background-image: linear-gradient(to bottom, #4585e6 10%, #457ae6 92%);
    font-size: 18px;
    font-weight: 600;
    line-height: normal;
    letter-spacing: normal;
    color: #fff;
    margin: 0px;
    padding: 7px 0px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.lp h2 {
    margin: 0 0 20px;
    padding: 0;
    font-family: "Roboto", sans-serif;
    font-size: 22px;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.3;
    letter-spacing: normal;
    color: #404347;
    text-align: center;
}

h2 {
    font-size: 24pt;
}

.lp .reading-time {
    margin: 0px 15px 0px 28px;
    max-height: 99px;
    overflow: hidden;
}

.reading-progress {
    top: -24px;
    right: 4px;
    position: relative;
    height: 80px;
    width: 80px;
    z-index: 999;
    display: inline-block;
    overflow: visible;
}

.reading-progress .percent {
    position: relative;
    top: 60px;
    right: -4px;
    font-size: 22px;
    font-weight: 500;
    font-style: normal;
    color: #404347;
    display: inline;
    text-align: center;
    color: #404347;
    line-height: normal;
    width: 100%;
}

.reading-progress svg {
    width: 100%;
    height: 100%;
}

.reading-progress circle {
    fill: none;
    stroke-width: 4;
}

.reading-progress circle:first-child {
    stroke: #ddd;
}

.reading-progress circle:last-child {
    stroke: #0056b3;
    stroke-dasharray: 214;
    stroke-dashoffset: 214;
    transform: rotate(-90deg);
    transform-origin: center;
    transition: stroke-dashoffset 0.3s;
}

.lp .what-you-learn .reading-time p:last-child {
    width: 114px;
    margin: 0px;
    float: right;
}

.lp .what-you-learn .reading-time p {
    display: inline;
    width: 106px;
    font-family: "Roboto", sans-serif;
    font-size: 22px;
    font-weight: 500;
    line-height: normal;
    letter-spacing: normal;
    color: #404347;
    text-decoration: none;
}

.lp .what-you-learn p:last-of-type {
    margin: 0px 0px 22px 0px;
}

.lp p:last-child {
    margin-bottom: 0;
}

.reading-time p:last-of-type {
    width: 50px;
}

.lp .what-you-learn p {
    text-align: left;
    font-size: 14px;
    font-weight: 600;
    color: #2c3038;
    margin: 0px 0px 19px 0px;
    display: inline-block;
    width: 68%;
    text-decoration: underline;
}

.lp .what-you-learn .reading-time #read-time {
    font-size: 24px;
    font-weight: 900;
}

.lp .what-you-learn hr {
    margin: 0px auto 12px;
    width: 80%;
    height: 1px;
    border: solid 1px #e6e6e6;
}

.lp .what-you-learn i {
    margin: 0px 8px 30px 11px;
    display: inline;
}

.icon-ok-circled2:before {
    content: '\e899';
}

.lp i.icon-ok::before {
    content: "";
    object-fit: contain;
    width: 29px;
    height: 29px;
    background: url(images/circle-check.svg) 0 0 no-repeat;
}

.lp i.icon-cancel::before {
    content: "";
    object-fit: contain;
    width: 29px;
    height: 29px;
    background: url(images/circle-x-close.svg) 0 0 no-repeat;
}


.icon-angle-double-right:before {
    content: '\f101';
}

[class^="icon-"]:before, [class*=" icon-"]:before {
    font-family: "scale";
    font-style: normal;
    font-weight: normal;
    speak: never;
    display: inline-block;
    text-decoration: inherit;
    width: 1em;
    margin-right: .2em;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
    margin-left: .2em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.lp .what-you-learn a {
    margin: 0;
    padding: 0;
    font-family: "Open Sans", sans-serif;
    font-size: 14px;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #2c3038;
}

a {
    cursor: pointer;
    margin: 0;
    padding: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

.lp .main-sources p {
    text-align: center;
    margin: 0 0 15px;
    font-size: 15px;
}

.lp .right-panel p:first-of-type img {
    margin-top: 30px;
}

.lp .right-panel p img {
    margin: 0 auto;
    width: 80%;
}

.lp img {
    display: block;
    width: auto;
    height: auto;
    margin: 0 auto;
    max-width: 100%;
}
[width="118"] {
	width: 118px !important;
	height: auto !important;
}

.lp .main-sources p:last-of-type {
    margin: 0px 20px 26px;
}

/* pkstyles */
.sidebar-two-subtitles {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 22px;
}
.lp .what-you-learn .sidebar-two-subtitles i,
.lp .what-you-learn .sidebar-two-subtitles p  {
    margin-bottom: 0;
    line-height: 1em;
}
.table-body li {
    font-size: 24px;
}

/* Responsive Design */
@media (max-width: 860px) {
    .main {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .lp .nav-bar {
        display: block;
        width: 100%;
        height: auto;
        margin: 0 0 20px;
    }

    .nav-bar {
        display: inline-block !important;
    }

    /* Only hide main-sources, keep what-you-learn sticky */
    .lp .right-sidebar .main-sources {
        display: none;
    }

    .lp .right-sidebar .what-you-learn {
        border: none;
        background-color: transparent;
    }

    .lp .right-sidebar .what-you-learn h2 {
        display: none;
    }

    .lp .right-sidebar .reading-progress {
        top: 14px;
        background-color: #fff;
        border-radius: 35px;
        transform: scale(.6);
    }

    .lp .what-you-learn .reading-progress {
        display: block;
        position: fixed;
        top: auto;
        bottom: 0;
        left: auto;
        right: 0;
        margin: 0;
        z-index: 1;
    }

    .lp .right-sidebar .reading-progress .percent {
        top: 28px;
    }

    .lp .right-sidebar svg {
        position: absolute;
        top: 0;
        left: 0;
    }

    .lp .right-sidebar .what-you-learn .reading-time p {
        display: none;
    }

    .lp .right-sidebar .what-you-learn p {
        display: none;
    }

    .lp .right-sidebar .what-you-learn i {
        display: none;
    }

    .lp .right-sidebar .what-you-learn p {
        display: none;
    }

    .lp .review {
        margin-bottom: 20px;
    }
}

@media only screen and (max-width: 600px) {
    body .main {
        padding: 5px 0 40px;
    }

    body .lp {
        width: 100%;
    }

    .lp {
        padding-top: 14px;
    }

    body .lp .section-1 {
        padding: 15px 10px 20px;
        border-radius: 0;
    }

    body .lp h1 {
        font-size: 28px;
    }

    body .lp h2 {
        font-size: 18px;
    }

    .lp .nav-bar.fixed {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        margin: 0;
        z-index: 10;
        box-shadow: 0px 10px 10px 0 rgba(74, 74, 74, 0.2);
    }

    .lp .right-panel.what-you-learn {
        position: static !important;
        top: auto !important;
    }

    .lp .nav-bar a {
        display: inline-block;
        width: 33%;
        height: 35px;
        font-size: 12px;
        font-weight: 600;
        padding: 7px 0px;
    }

    body .lp .disclosure {
        font-size: 14px;
    }
    
    body .lp p {
        margin-bottom: 15px;
        font-size: 16px;
    }

    body .lp h3 {
        font-size: 26px;
        font-weight: 900;
    }

    body .lp .colored-table h3 {
        padding: 10px 0;
        font-size: 22px;
        font-weight: 900;
    }

    .lp .colored-table p {
        font-size: 16px;
    }

    body .lp .colored-table h4 {
        font-size: 18px;
    }

    body .lp .colored-table .table-body {
        padding: 20px 15px 40px;
    }

    body .lp .section-2 {
        padding: 28px 5px 20px;
    }

    .lp .left h3, .lp .right h5 {
        font-size: 26px;
    }

    body .lp .citations {
        padding: 0;
        overflow: hidden;
    }

    body .lp .citations h3, body .lp .citations h4 {
        padding-left: 20px;
    }

    body .lp .citations ol {
        margin-left: 30px;
        padding: 20px 10px;
        list-style-position: outside;
    }
}

@media (max-width: 720px) {
    .lp div.citations, .lp .sidebar {
        padding: 20px 20px 35px;
    }

    .lp .review:first-of-type {
        margin-top: 26px;
    }

    .lp .review {
        padding: 38px 0 98px;
        overflow: inherit;
        margin-bottom: 80px;
    }

    .lp .review h4 {
        font-size: 22px;
        font-weight: bold;
        line-height: 1.23;
        letter-spacing: normal;
        text-align: center;
        color: #404347;
        text-align: center;
        margin-right: 0;
        padding: 0 20px;
    }

    .lp .review .byline {
        text-align: center;
        line-height: 1.56;
        color: #2c3038;
    }

    .lp .review .rating-image {
        top: 0;
        transform: translate(-50%, -50%);
        left: 50%;
        right: auto;
    }

    .review.test1 .product-image-box {
        padding: 0;
        justify-content: center;
        border-top: 1px solid #F0F0F0;
    }

    .review.test1 .product-image-box, .review.test1 .grade, .review.test2 .grade, .review.test3 .grade {
        height: 124px;
    }

    .product-image-box {
        padding: 15px;
    }

    .product-image-box, .circle-summary {
        width: 50%;
        height: 166px;
    }

    .review.test1 .product-image-box a img {
        max-width: 110px;
        padding: 5px;
    }

    .product-image-box img {
        max-height: 123px;
    }

    .lp .circle-summary {
        padding-top: 100px;
    }

    .product-image-box, .circle-summary {
        width: 50%;
        height: 166px;
    }

    .review.test1 .grade {
        display: inline-block;
        width: 50%;
        border-top: 1px solid #F0F0F0;
        border-left: 1px solid #F0F0F0;
        padding: 10px 35px;
        text-align: center;
        vertical-align: top;
        float: none;
    }

    .grade {
        float: none;
        display: block;
        width: auto;
        clear: left;
        overflow: hidden;
        height: auto;
        padding: 12px;
    }

    .review.test1 .grade h1 {
        font-size: 52px;
        display: block;
        margin-top: -2px;
    }

    .lp .grade h1 {
        font-size: 48px;
        display: inline-block;
        margin: 0;
        padding: 0;
        vertical-align: middle;
    }

    .lp .left h3, .lp .right h5 {
        margin-top: 0;
        font-size: 22px;
        color: #404347;
    }

    .review.test1 .grade p {
        font-size: 11px;
        position: unset;
        margin-top: unset;
        margin-left: 0px;
        margin-top: -15px;
    }

    .lp .grade p {
        display: inline-block;
        vertical-align: middle;
        margin: 0px;
        top: 0;
        line-height: 1.25;
        left: 18px;
    }

    .lp .left, .lp .right {
        display: block;
        width: auto;
        float: none;
        padding: 20px;
        margin: 0;
    }

    .lp .right {
        padding-bottom: 0;
    }

    .lp .right h5 {
        line-height: 1.82;
        margin-bottom: 10px;
    }

    .lp .right a:last-of-type {
        font-size: 18px;
        line-height: 1;
        white-space: nowrap;
    }
}

@media (max-width: 600px) {
    .lp .left, .lp .right {
        padding: 15px;
    }

    .lp .left .pros-cons li {
        padding-left: 30px;
        margin-bottom: 19px;
    }

    .lp .left .pros-cons li:before {
        font-size: 20px;
    }

    /* Ensure what-you-learn section is not sticky on small mobile devices */
    .lp .right-panel.what-you-learn,
    .lp .right-panel.what-you-learn.fixed-container {
        position: static !important;
        top: auto !important;
        right: auto !important;
        transform: none !important;
        z-index: auto !important;
        margin: 0 !important;
    }
}

@media screen and (max-width: 435px) {
    .review.test1 .grade {
        padding: 10px 30px;
    }
}

@media screen and (max-width: 480px) {
    body {
        font-size: 12pt;
    }
}