/* ===== bootstrap.min.css ===== */
/*!
 * Bootstrap v3.3.7 (http://getbootstrap.com)
 * Copyright 2011-2016 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 *//*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}details,footer,header,main,nav,section,summary{display:block}a{background-color:transparent}a:active,a:hover{outline:0}b,strong{font-weight:700}h1{margin:.67em 0;font-size:2em}small{font-size:80%}img{border:0}svg:not(:root){overflow:hidden}button,input{margin:0;font:inherit;color:inherit}button{overflow:visible}button{text-transform:none}button{-webkit-appearance:button;cursor:pointer}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}input{line-height:normal}input[type=radio]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:0}table{border-spacing:0;border-collapse:collapse}td,th{padding:0}/*! Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css */@media print{*,:after,:before{color:#000!important;text-shadow:none!important;background:0 0!important;-webkit-box-shadow:none!important;box-shadow:none!important}a,a:visited{text-decoration:underline}a[href]:after{content:" (" attr(href) ")"}thead{display:table-header-group}img,tr{page-break-inside:avoid}img{max-width:100%!important}h2,h3,p{orphans:3;widows:3}h2,h3{page-break-after:avoid}.navbar{display:none}}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}html{font-size:10px;-webkit-tap-highlight-color:rgba(0,0,0,0)}body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;line-height:1.42857143;color:#333;background-color:#fff}button,input{font-family:inherit;font-size:inherit;line-height:inherit}a{color:#337ab7;text-decoration:none}a:focus,a:hover{color:#23527c;text-decoration:underline}a:focus{outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}img{vertical-align:middle}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}h1,h2,h3,h4{font-family:inherit;font-weight:500;line-height:1.1;color:inherit}h1,h2,h3{margin-top:20px;margin-bottom:10px}h4{margin-top:10px;margin-bottom:10px}h1{font-size:36px}h2{font-size:30px}h3{font-size:24px}h4{font-size:18px}p{margin:0 0 10px}small{font-size:85%}ol,ul{margin-top:0;margin-bottom:10px}.list-inline{padding-left:0;margin-left:-5px;list-style:none}.list-inline>li{display:inline-block;padding-right:5px;padding-left:5px}.container{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}@media (min-width:768px){.container{width:750px}}@media (min-width:992px){.container{width:970px}}@media (min-width:1200px){.container{width:1170px}}.container-fluid{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}.row{margin-right:-15px;margin-left:-15px}.col-lg-12,.col-xs-12{position:relative;min-height:1px;padding-right:15px;padding-left:15px}.col-xs-12{float:left}.col-xs-12{width:100%}@media (min-width:1200px){.col-lg-12{float:left}.col-lg-12{width:100%}}table{background-color:transparent}th{text-align:left}table td[class*=col-],table th[class*=col-]{position:static;display:table-cell;float:none}label{display:inline-block;max-width:100%;margin-bottom:5px;font-weight:700}input[type=radio]{margin:4px 0 0;margin-top:1px\9;line-height:normal}input[type=radio]:focus{outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}.btn-primary{color:#fff;background-color:#337ab7;border-color:#2e6da4}.btn-primary:focus{color:#fff;background-color:#286090;border-color:#122b40}.btn-primary:hover{color:#fff;background-color:#286090;border-color:#204d74}.btn-primary:active{color:#fff;background-color:#286090;border-color:#204d74}.btn-primary:active:focus,.btn-primary:active:hover{color:#fff;background-color:#204d74;border-color:#122b40}.btn-primary:active{background-image:none}.fade{opacity:0;-webkit-transition:opacity .15s linear;-o-transition:opacity .15s linear;transition:opacity .15s linear}.navbar{position:relative;min-height:50px;margin-bottom:20px;border:1px solid transparent}@media (min-width:768px){.navbar{border-radius:4px}}@media (min-width:768px){.navbar-header{float:left}}.container-fluid>.navbar-header{margin-right:-15px;margin-left:-15px}@media (min-width:768px){.container-fluid>.navbar-header{margin-right:0;margin-left:0}}.navbar-brand{float:left;height:50px;padding:15px 15px;font-size:18px;line-height:20px}.navbar-brand:focus,.navbar-brand:hover{text-decoration:none}@media (min-width:768px){.navbar>.container-fluid .navbar-brand{margin-left:-15px}}.navbar-default{background-color:#f8f8f8;border-color:#e7e7e7}.navbar-default .navbar-brand{color:#777}.navbar-default .navbar-brand:focus,.navbar-default .navbar-brand:hover{color:#5e5e5e;background-color:transparent}.close{float:right;font-size:21px;font-weight:700;line-height:1;color:#000;text-shadow:0 1px 0 #fff;filter:alpha(opacity=20);opacity:.2}.close:focus,.close:hover{color:#000;text-decoration:none;cursor:pointer;filter:alpha(opacity=50);opacity:.5}.modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1050;display:none;overflow:hidden;-webkit-overflow-scrolling:touch;outline:0}.modal.fade .modal-dialog{-webkit-transition:-webkit-transform .3s ease-out;-o-transition:-o-transform .3s ease-out;transition:transform .3s ease-out;-webkit-transform:translate(0,-25%);-ms-transform:translate(0,-25%);-o-transform:translate(0,-25%);transform:translate(0,-25%)}.modal-dialog{position:relative;width:auto;margin:10px}.modal-content{position:relative;background-color:#fff;-webkit-background-clip:padding-box;background-clip:padding-box;border:1px solid #999;border:1px solid rgba(0,0,0,.2);border-radius:6px;outline:0;-webkit-box-shadow:0 3px 9px rgba(0,0,0,.5);box-shadow:0 3px 9px rgba(0,0,0,.5)}.modal-header{padding:15px;border-bottom:1px solid #e5e5e5}.modal-header .close{margin-top:-2px}.modal-title{margin:0;line-height:1.42857143}.modal-body{position:relative;padding:15px}@media (min-width:768px){.modal-dialog{width:600px;margin:30px auto}.modal-content{-webkit-box-shadow:0 5px 15px rgba(0,0,0,.5);box-shadow:0 5px 15px rgba(0,0,0,.5)}}.container-fluid:after,.container-fluid:before,.container:after,.container:before,.modal-header:after,.modal-header:before,.navbar-header:after,.navbar-header:before,.navbar:after,.navbar:before,.row:after,.row:before{display:table;content:" "}.container-fluid:after,.container:after,.modal-header:after,.navbar-header:after,.navbar:after,.row:after{clear:both}@-ms-viewport{width:device-width}

/* ===== base.css ===== */
@charset "UTF-8";

/*---------------------------------------- UNIVERSAL STYLES ----------------------------------------*/

html,body {
    background-color: #fdfdfd;
    color: #23292f;
    font-family: 'Lato', sans-serif;
    font-size: 18px;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
}

p {
    margin-bottom: 1rem;
    font-size: 16px;
	line-height: 30px;
}

h1,
h2,
h3,
h4 {
    color: #116696;
    font-family: 'Lato', sans-serif;
    letter-spacing: -0.025rem;
    text-transform: capitalize;
}

h1 {
    font-size: 40px;
}

h4 {
    font-size: 24px;
}

a {
    color: var(--blue);
    cursor: pointer;
}
a:focus,
a:hover {
    color: #116696;
    text-decoration: none;
}

/*----- Extra Small -----*/

.contentContainer p a {
    font-weight: 700;
}

.sectionContent {
    padding: 25px 0;
}

.sectionContent h1,.sectionContent h2,.sectionContent h3{
    margin-top: 0;
}

.sectionContent h2{
	font-size: 32px;
 	color: #000;
	font-weight: normal;
}

.sectionSiteInfo{
	padding:0;
    padding-bottom: 50px;
    
}

 .referralText{
	display: none;
}

/*----- Extra Small -----*/
@media(max-width: 767px){

    html,body {
        background-image: none;
    }

    h1 {
        font-size: 30px;
    }
    
    .container {
        max-width: 767px;
    }
    
    .sectionSiteInfo {
        padding:0;
    }

    .sectionSiteInfo {
        padding: 0;
    }
}

/*----- Small -----*/
@media(min-width: 768px) and (max-width: 991px){

    html,body {
        background-image: none;
    }

}

/*----- Medium -----*/
@media(min-width: 992px) and (max-width: 1199px){

    html,body {
        background-image: none;
    }

    .container {
        max-width:824px;
    }

}

/*----- Large -----*/
@media(min-width: 1200px){

    html,body {
        background-attachment: fixed;
        background-position: top center;
        background-repeat: no-repeat;
    }

    .container {
        max-width: 824px; 
    }

}

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

button {
    border: none;
    outline: none;
}

.sectionContent button {
    background-color: #006699;
    border-radius: 25px;
    color: #fff;
    font-family: 'Lato', sans-serif;
    font-size: 18px;
    font-weight: 700;
    outline: none;
    margin: 5px 0;
    padding: 8px 25px;
}

.sectionContent button:focus,
.sectionContent button:hover {
    background-color: #004c72;
}

/*---------------------------------------- NAV BAR ----------------------------------------*/

.navbar-brand {
	pointer-events: none;
}

.mfHeader {
    max-width: 906px;
    margin: auto;
    border-top: 1px solid #DDDDDD;
	border-bottom: 1px solid #DDDDDD;
    max-width: 100%;
}

.mfNavbar {
    background: none;
    border: none;
    margin: 0;
    padding: 10px 0;
}

.mfNavbarHeader {
    width: 100%;
}

.logo {
    background-image: url('assets/logo.png');
    background-size: 250px 46px;
    height: 46px;
    margin-top: -12px;
    width: 250px;
}

/*----- Extra Small -----*/
@media(max-width: 767px){

    .logo {
        background-size: 180px 34px;
        height: 34px;
        margin-top: -7px;
        width: 180px;
    }

    .mfNavbarHeader {
        width: auto;
    }

}

/*----- Almost Large -----*/
@media (min-width: 1192px){
	.navbar-header{
		padding-left: 15px;
	}
}

/*----- Large -----*/
@media(min-width: 1200px){

    .logo {
        margin-left: 30px;
    }

}

/*---------------------------------------- SITE INFO ----------------------------------------*/

.sectionContent{
	padding-top: 0;
}

.contentContainer p a{
	color: #213EFF;
	font-size: 16px;
	font-weight: normal;
       text-decoration: underline;
}

.logo{
	background-size: 120px 23px;
        height: 23px;
        width: 120px;
	margin-top: 0px;
}

.sectionSiteInfo {
    padding: 0 0 110px;
    padding-top: 7px;
}

.mfModal {
    outline: none;
}
.mfModal:active,
.mfModal:focus,
.mfModal:hover {
    outline: none;
    text-decoration: none;
}

.mfModalCopy {
    font-size: 0.75rem;
}

/*----- Extra Small -----*/
@media(max-width: 767px){

    .sectionSiteInfo {
        padding: 20px 0 25px;
    }
}

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

.footer {
    background-color: #eee;
    font-size: 10px;
    height: auto;
    padding-bottom: 50px;
    text-align: center;
    padding-top: 20px;
}

.footerNav {
    margin-top: 50px;
}

.footer a {
    color: #116696;
    font-size: 14px;
    letter-spacing: -0.025rem;
    text-decoration: none;
}
.footer a:hover {
    color: var(--blue);
    text-decoration: none;
}

.footer .referralText {
    margin-bottom: 10px;
}

.footer ul.copyright {
    margin-top: 10px;
}

.copyright a {
    font-family: 'Open Sans', sans-serif;
    font-size: 10px;
}

/*---------------------------------------- Hot Fixes For Theme ----------------------------------------*/

.mfHeader .row {
    max-width: 906px;
    margin: auto;
}

.sectionSiteInfo{
	padding-bottom: 50px;
}

/*Desktop theme CSS */

@media (min-width: 1024px){
    .sectionContent{
        display: flex;
        justify-content: center;
    }
    .container{
        margin-left: 0;
        margin-right: 0;
    }

    .footer .container{
        margin-left: auto;
        margin-right: auto;
    }

    h3{
        font-size: 22px;
        color: #000;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    h1{
        color: #000;
        font-size: 40px;
    }

    .sectionContent h2{
        font-size: 40px;
    }

    .mfHeader .row{
        max-width: 1110px;
    }
    p{
        font-size: 18px;
    }
}

@media(max-width: 1023px){
	body{
		min-width: unset;
	}
}

/* ---------------------------------------- Set of Patch V1 ---------------------------------------- */

h3{
	color: #000;
}
.sectionSiteInfo{
	padding-bottom: 0px;
}

.modal-dialog{
	max-width: 100%;
}

@media(max-width: 767px){
	.sectionSiteInfo{
		padding-top: 7px;
	}
}

p{
	font-size: 16px;
	line-height: 26px;
}

@media (max-width: 1023px) {

.sectionContent h2{
	padding-top: 15px;
}

}

@media(min-width: 1024px){
	p{
		font-size: 16px;
		
	}
}

/*----------------------------------------Patch Jun 30th ----------------------------------------*/

@media (max-width: 1023px){

	.sectionContent{
		margin-top: 25px;
	}

	
}

@media (min-width: 1024px){
	p{
		font-size: 18px;
	}
	
	.sectionContent{
		margin-top: 25px;
	}

}

/*----- Extra Small -----*/
@media(max-width: 767px){

    .mfNavbar {
        padding: 0;
    }

}

/* ===== page styles ===== */

body{
	font-family: "Inter", sans-serif;
}

header{
    	display: flex;
    	flex-direction: column;
}

.mfHeader {
    	width: 100%;
    	box-shadow: 0 0 #0000, 0 0 #0000, 0 0 20px 0 #ceced699;
	border:none;
}

.sectionSiteInfo {
    	padding: 0;
    	padding-top: 0;
}

.authorLine {
    font-size: 12px;
    color: #000;
    font-weight: 400;
}

.authorLine .publishedLabel{
    	font-weight: 700;
    	margin-right: 0;
	color:#000;
}

.publishedLabel{
	margin-left:5px;
}

.navbar-brand {
    	float: unset;
    	height: 50px;
    	padding: 0;
    	display: flex;
    	justify-content: center;
    	align-items: center;
}

/* Tooltip Arrow */

footer {
    color: #999;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 10px;
    padding-bottom: 40px;
    text-align: center;
}

.copyright a  {
    color: #000;
    font-family: 'Open Sans', sans-serif;
    font-size: 0.75rem;
    text-decoration: none;
}

.list-inline {
    padding-left: 0;
    margin-left: -5px;
    list-style: none;
}

footer ul {
    margin-bottom: 10px;
}

/* Mobile View */
        @media (max-width: 767px) {
            .btn-primary { max-width: 100%; }
        }

@media (max-width:767px){
.sectionContent h2 {
    	font-size: 30px;
}
h1{
	font-size:32px;
	color:#000;
}
}

@media (min-width:768px) and (max-width:991px){
h1{
	color:#000;
}
}

  /* =========================================================================
     GAMING APPS PAGE TEMPLATE — FinanceBuzz-style advertorial
     All offer content lives in the JS `offers` array near the bottom of
     this file. To add or remove an offer, edit ONLY that array.
     ========================================================================= */
 
  :root{
    --blue:#0049B8;
    --blue-hover:#003D9E;
    --blue-light:#0BA2FF;
    --green:#00B091;
    --yellow:#FFCB45;
    --yellow-bg:#F9EFD2;
    --yellow-text:#66511C;
    --ink:#0A0832;
    --muted:#47474D;
    --line:#CECED6;
    --bg-soft:#F8F9FA;
    --bg-section:#E4ECF5;
    --card:#ffffff;
  }
 
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{
    font-family:'Open Sans',-apple-system,BlinkMacSystemFont,sans-serif;
    color:var(--ink);background:#fff;line-height:1.5;font-size:16px;
    -webkit-font-smoothing:antialiased;
  }
  a{color:var(--blue);text-decoration:none}
  a:hover{color:var(--blue-hover)}
 
  h1,h2,h3,h4{font-family:'Inter',sans-serif;font-weight:700;color:var(--ink);margin:0 0 12px}
  h1{font-size:28px;line-height:1.2}
  h2{font-size:24px;line-height:1.36;margin-top:40px}
  h3{font-size:20px;line-height:1.36;margin-top:28px}
  h4{font-size:17px;line-height:1.6}
  p{margin:0 0 16px;line-height:1.6}
  @media (min-width:1024px){
    h1{font-size:40px}h2{font-size:30px}h3{font-size:24px;line-height:2rem}
  }
 
  /* Container */
  .container{max-width:880px;margin:0 auto;padding:24px 24px 60px}
 
  /* Subheadline */
  .subheadline{font-size:16px;line-height:1.56;margin:8px 0 24px}
 
  /* Meta strip */
  .meta-strip{display:flex;flex-wrap:wrap;align-items:center;gap:12px;font-size:12px;margin-bottom:28px}
  .authors{display:flex;align-items:center;gap:8px;flex-grow:1}
 
  /* Featured card */
  .featured-card{position:relative;background:#fff;box-shadow:0 0 20px 0 rgba(0,0,0,0.11);padding:48px 20px 36px;margin:60px 0 32px}
  .featured-card .blueRibbon{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);width:max-content;max-width:calc(100% - 32px)}
  .featured-card .blueRibbon a{display:inline-block;background:var(--blue);color:#fff;padding:10px 20px;font-family:'Inter',sans-serif;font-weight:700;font-size:14px;line-height:1.2;transform:skewX(-5deg);text-decoration:none}
  .featured-card .blueRibbon a span{display:inline-block;transform:skewX(5deg)}
  .featured-card-inner{display:flex;flex-direction:column;gap:20px}
  @media (min-width:1024px){
    .featured-card{padding:48px 40px 40px}
    .featured-card-inner{flex-direction:row-reverse;justify-content:space-between;gap:32px}
    .featured-card-image{width:260px;flex-shrink:0}
  }
  .featured-card-image{display:flex;align-items:center;justify-content:center;min-height:120px}
  .featured-card-image img{max-width:240px;max-height:140px;object-fit:contain}
  .rating-row{display:flex;align-items:center;justify-content:flex-start;gap:8px;margin:8px 0 16px;font-size:14px;font-weight:700}

 .sectionContent button {
    background-color: #E4E4E8;
    border-radius: 25px;
    color: #fff;
    outline: none;
    margin: 0;
    padding: 0;
    font: 700 10px / 1 'Open Sans', sans-serif;
}
  .info-icon{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;border-radius:999px;background:#E4E4E8;color:#666;
  font:700 10px/1 'Open Sans',sans-serif;text-align:center;
  cursor:pointer;border:0;padding:0;flex-shrink:0;
}
.info-icon::after,
.info-icon::before{opacity:0;pointer-events:none;transition:opacity .15s ease;z-index:50}
.info-icon::after{
  content:attr(data-tooltip);
  position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%);
  background:#0A0832;color:#fff;
  padding:10px 12px;border-radius:4px;
  font:400 12px/1.45 'Open Sans',sans-serif;
  white-space:normal;text-align:left;
  width:max-content;max-width:240px;
}
.info-icon::before{
  content:"";position:absolute;bottom:calc(100% + 4px);left:50%;
  transform:translateX(-50%);
  border:6px solid transparent;border-top-color:#0A0832;
}
.info-icon:hover::after,.info-icon:hover::before,
.info-icon:focus-visible::after,.info-icon:focus-visible::before{opacity:1;pointer-events:auto}
@media (max-width:520px){
  .info-icon::after{max-width:200px;font-size:11px;padding:8px 10px}
}
  .benefits-title{font-family:'Inter',sans-serif;font-weight:700;font-size:20px;margin:0 0 10px}
  .benefits-list{list-style:none;padding:0;margin:0 0 20px}
  .benefits-list li{position:relative;padding-left:20px;margin:8px 0;font-size:15px;line-height:1.5}
  .benefits-list li::before{content:"•";color:#949494;font-size:28px;line-height:0;position:absolute;left:4px;top:11px}
  .featured-cta{display:flex;align-items:center;gap:10px;color:var(--blue);font-weight:600;font-size:16px;text-decoration:none;margin-top:8px}
  .featured-cta .featured-cta-text{text-decoration:underline}
  .featured-cta::before{content:"👉";font-size:28px;line-height:1;display:inline-flex;align-items:center;flex-shrink:0;text-decoration:none;filter:drop-shadow(0 1px 1px rgba(0,0,0,.08))}
 
  /* TOC — collapsible */
  .toc{
    background:var(--bg-soft);border:1px solid var(--line);
    border-radius:4px;margin:24px 0 32px;overflow:hidden;
  }
  .toc-summary{
    list-style:none;cursor:pointer;
    display:flex;align-items:center;gap:12px;
    padding:18px 20px;
    font-family:'Inter',sans-serif;font-weight:700;font-size:18px;color:var(--ink);
    -webkit-user-select:none;user-select:none;
  }
  .toc-summary::-webkit-details-marker{display:none}
  .toc-icon{
    display:inline-flex;align-items:center;justify-content:center;
    width:24px;height:24px;flex-shrink:0;
  }
  .toc-title{flex:1}
  .toc-chevron{
    display:inline-flex;align-items:center;justify-content:center;
    transition:transform .25s ease;flex-shrink:0;
  }
  .toc[open] .toc-chevron{transform:rotate(180deg)}
  .toc-list{
    list-style:disc;margin:0;
    padding:0 24px 20px 44px;
  }
  .toc-list li{margin:8px 0;font-size:15px;line-height:1.5}
  .toc-list a{color:var(--ink);text-decoration:underline}
  .toc-list a:hover{color:var(--blue)}
 
  /* Offers summary table */
  .offers-table-wrap{margin:24px 0 32px;border:1px solid var(--line);border-radius:8px;overflow:hidden}
  table.offers-table{width:100%;border-collapse:collapse;font-size:14px;background:#fff;table-layout:fixed}
  table.offers-table thead{background:var(--bg-soft)}
  table.offers-table th{font-family:'Inter',sans-serif;font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.04em;padding:14px 10px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
  table.offers-table td{padding:14px 10px;border-bottom:1px solid var(--line);vertical-align:top;overflow-wrap:break-word;word-wrap:break-word;hyphens:auto}
  table.offers-table tbody tr:nth-child(even) td{background:#F8F9FA}
  table.offers-table tr:last-child td{border-bottom:none}
 
  /* Column widths */
  table.offers-table .col-best{width:26%}

table.offers-table th:not(:last-child),
table.offers-table td:not(:last-child){border-right:1px solid var(--line)}
 
  /* Tablet */
  @media (max-width:720px){
    table.offers-table th,table.offers-table td{padding:12px 8px;font-size:13px}
    table.offers-table th{font-size:11px;letter-spacing:.02em}
  }
  /* Phone */
  @media (max-width:520px){
    table.offers-table{font-size:12px}
    table.offers-table th,table.offers-table td{padding:10px 6px}
    table.offers-table th{font-size:10px;letter-spacing:0}
  }
 
  /* CTAs */
  .btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--blue);color:#fff;font-weight:700;font-size:14px;padding:12px 20px;border-radius:2px;text-decoration:none;box-shadow:inset 0 -3px 0 0 rgba(0,0,0,.2);transition:background .2s;text-align:center;line-height:1.2}
  .btn-primary:hover{background:#0982CC;color:#fff}
  .btn-primary.full{display:flex;width:100%;padding:14px 20px;font-size:15px}
 
  /* Pros & cons */
  .pros-cons-container{display:flex;flex-direction:column;gap:24px;background:var(--bg-soft);padding:24px;margin:20px 0 24px;border-radius:4px}
  @media (min-width:1024px){.pros-cons-container{flex-direction:row;padding:32px;gap:32px}}
  .pros-cons-box{flex:1}
  .pros-cons-title{border-bottom:1px solid var(--line);padding-bottom:8px;margin-bottom:14px;font-family:'Inter',sans-serif;font-weight:700;font-size:17px}
  .pros-cons-box ul{list-style:none;padding:0;margin:0}
  .pros-cons-box li{position:relative;padding-left:32px;margin:8px 0;font-size:14px;line-height:1.5}
  .pros-cons-box.pros li::before{content:"";position:absolute;left:0;top:2px;width:20px;height:20px;border-radius:999px;background:var(--green) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><polyline points='2,6 5,9 10,3' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/12px no-repeat}
  .pros-cons-box.cons li::before{content:"";position:absolute;left:0;top:2px;width:20px;height:20px;border-radius:999px;background:#D95B3E url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><line x1='3' y1='3' x2='9' y2='9' stroke='white' stroke-width='2' stroke-linecap='round'/><line x1='9' y1='3' x2='3' y2='9' stroke='white' stroke-width='2' stroke-linecap='round'/></svg>") center/12px no-repeat}
 
  .download-line{font-size:15px;margin:16px 0 32px}
  .download-line strong a{font-weight:700;text-decoration:underline}

  /* Image links — wrap logos/screenshots and keep them visually unchanged */
  .img-link{display:inline-block;color:inherit;text-decoration:none;line-height:0;max-width:100%}
  .img-link:hover{opacity:.92}
  .img-link img{display:block}
 
  /* Methodology */
  .methodology{background:var(--bg-soft);padding:24px;margin:32px 0;border-radius:4px}
  .methodology-head{display:flex;align-items:center;gap:14px;margin-bottom:14px}
  .methodology h2{font-size:17px;margin:0;font-family:'Inter',sans-serif}
  .methodology ul{margin:12px 0;padding-left:24px}
  .methodology li{margin:6px 0;font-size:15px;line-height:1.6}
 
  /* FAQ */
  .faq-item{background:var(--bg-soft);margin-bottom:12px;box-shadow:inset 0 -2px 0 0 var(--line)}
  .faq-q{cursor:pointer;list-style:none;display:flex;align-items:center;padding:20px 24px;font-family:'Inter',sans-serif;font-weight:700;font-size:16px}
  .faq-q::-webkit-details-marker{display:none}
  .faq-q::after{content:"";margin-left:auto;width:14px;height:14px;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><polyline points='3,6 8,11 13,6' stroke='%230A0832' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");background-repeat:no-repeat;background-position:center;transition:transform .2s}
  details[open] .faq-q::after{transform:rotate(180deg)}
  .faq-a{padding:0 24px 20px;font-size:15px;line-height:1.6}
 
  /* Bottom line card */
  .bottomline-card{background:var(--bg-soft);padding:24px;margin:32px 0}
  .bottomline-card .inner{background:#fff;box-shadow:0 12px 24px 0 rgba(0,0,0,0.12);padding:32px;display:grid;gap:24px}
  @media (min-width:1024px){.bottomline-card .inner{grid-template-columns:256px 1fr;gap:40px;align-items:center}}
  .bottomline-card .img-col{display:flex;flex-direction:column;align-items:center;gap:12px}
  .bottomline-card .img-col img{max-width:200px;max-height:100px;object-fit:contain}

  @media (max-width:520px){
	.container {
    		padding: 10px 24px 24px;
	}
  }

/* Square app icons in the featured card / bottom line card */
.featured-card-image img{border-radius:16px}
.bottomline-card .img-col img{border-radius:12px}

/* Bottom line: #1 and #2 cards stacked */
.bottomline-card .inner + .inner{margin-top:24px}

/* How We Rank / Advertiser Disclosure: opened by #anchor links via :target */
.modal:target{display:block;opacity:1;background:rgba(0,0,0,.5);overflow-y:auto}
.modal.fade:target .modal-dialog{-webkit-transform:none;transform:none}
.modal .modal-dialog{position:relative;z-index:2}
.modal-backdrop-link{position:fixed;inset:0;z-index:1;cursor:default}
.modal .modal-header .close{text-decoration:none;font-size:28px;line-height:1;color:#000;opacity:.4}
.modal .modal-header .close:hover{opacity:.8}

/* Anchored to the full-width meta strip (not the label) so it never sticks out past the screen edge */
.meta-strip{position:relative}
.meta-strip .authors,.meta-strip .authorLine{position:static}
.cssTip{position:static;display:inline-block;cursor:pointer;outline:none}
.cssTip-box{
  position:absolute;left:0;top:calc(100% + 6px);z-index:9999;
  width:100%;max-width:360px;
  background:#fff;color:#555;padding:14px 16px;border-radius:12px;
  box-shadow:0 12px 38px rgba(0,0,0,.18);border:1px solid rgba(0,0,0,.06);
  font-size:13px;font-weight:400;line-height:1.5;text-align:left;white-space:normal;
  opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .18s ease,transform .18s ease,visibility .18s;
}
.cssTip-box strong{display:block;color:#333;font-size:13.5px;font-weight:700;margin-bottom:6px}
.cssTip:hover .cssTip-box,.cssTip:focus .cssTip-box,.cssTip:focus-within .cssTip-box{opacity:1;visibility:visible;transform:translateY(0)}

/* Rating info icons: show tooltip on tap as well as hover */
.info-icon:focus::after,.info-icon:focus::before{opacity:1;pointer-events:auto}

/* Bigger CTA buttons */
.btn-primary,.btn-primary.full{font-size:18px;padding:16px 36px;min-width:260px;border-radius:4px}
.btn-primary.full{min-width:0}
@media (max-width:520px){.btn-primary{min-width:0;width:100%}}

/* Rating tooltips: take no space while hidden, so they can't widen the page on small phones */
.info-icon::after,.info-icon::before{display:none}
.info-icon:hover::after,.info-icon:hover::before,
.info-icon:focus::after,.info-icon:focus::before{display:block}
@media (max-width:520px){.info-icon::after{max-width:180px}}

/* =========================================================================
   HOME HUB LISTICLE — components layered on top of style.css
   (style.css is the untouched base from listicle-articles-apps-2)
   Offer content lives in the `OFFERS` array in home.js.
   ========================================================================= */

:root{
  --gold:#D4A017;
  --red:#D95B3E;
}

/* ---------- Trust bar under the intro ---------- */
.trust-bar{display:flex;flex-wrap:wrap;gap:8px 20px;margin:-14px 0 0;padding:12px 16px;background:var(--bg-soft);border-left:3px solid var(--green);font-size:13px;font-weight:600}
.trust-bar span{display:inline-flex;align-items:center;gap:6px}
.trust-bar span::before{content:"";width:14px;height:14px;border-radius:999px;flex-shrink:0;background:var(--green) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><polyline points='2,6 5,9 10,3' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/9px no-repeat}

/* ---------- Image / logo placeholders ---------- */
.ph{display:flex;align-items:center;justify-content:center;text-align:center;color:var(--muted);font:700 11px/1.3 'Inter',sans-serif;text-transform:uppercase;letter-spacing:.04em;background:repeating-linear-gradient(45deg,#EEF1F4 0,#EEF1F4 10px,#F6F8FA 10px,#F6F8FA 20px);border:1px dashed var(--line);border-radius:6px;padding:8px}
.featured-card-image .ph{width:240px;height:140px}

/* ---------- "What are you shopping for?" tiles ---------- */
.cat-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:16px 0 32px}
.cat-tile{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:18px 16px;background:#fff;border:1px solid var(--line);border-radius:6px;text-align:left;cursor:pointer;font:inherit;color:var(--ink);transition:border-color .15s,box-shadow .15s,transform .15s}
.cat-tile:hover{border-color:var(--blue);box-shadow:0 6px 18px rgba(0,73,184,.12);transform:translateY(-2px)}
.cat-tile svg{color:var(--blue)}
.cat-txt{display:flex;flex-direction:column;gap:6px}
.cat-tile strong{font:700 16px/1.3 'Inter',sans-serif}
.cat-tile small{font-size:13px;color:var(--muted);line-height:1.4}
@media (max-width:640px){
  .cat-tiles{grid-template-columns:1fr}
  .cat-tile{flex-direction:row;align-items:center;gap:12px}
  .cat-txt{gap:2px}
}

/* ---------- Category picks table (extends .offers-table) ---------- */
.picks-table .cat-name{font:700 13px 'Inter',sans-serif;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}

/* ---------- Sticky filter bar ---------- */
.filter-bar{background:#fff;margin:0 -24px 20px;padding:12px 24px 10px;border-bottom:1px solid var(--line)}
.filter-row{display:flex;align-items:center;gap:8px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.filter-row::-webkit-scrollbar{display:none}

.f-tab{flex-shrink:0;display:inline-flex;align-items:center;gap:6px;background:none;border:0;border-bottom:3px solid transparent;padding:6px 4px 8px;margin-right:10px;font:700 15px 'Inter',sans-serif;color:var(--muted);cursor:pointer;white-space:nowrap}
.f-tab .n{font:600 11px 'Inter',sans-serif;background:var(--bg-soft);border:1px solid var(--line);color:var(--muted);border-radius:999px;padding:1px 7px}

/* Tabs and sort on one row; sort drops under the tabs on phones */
.filter-controls{display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:13px}
.filter-controls #f-tabs{flex:1;min-width:0}
.sort-wrap{display:flex;align-items:center;gap:6px;flex-shrink:0}
@media (max-width:520px){
  .filter-bar{margin:0 -24px 16px;padding:10px 16px 8px}
  .f-tab{font-size:14px;margin-right:6px}
}

/* ---------- Offer boxes ---------- */
.results{display:flex;flex-direction:column;gap:28px}

/* Ribbon — same skewed tab as the template's .blueRibbon.
   Two colors only: blue for the top pick, navy for every other badge. */
.ob-ribbon{position:absolute;top:0;left:20px;transform:translateY(-50%) skewX(-5deg);background:var(--ink);color:#fff;padding:6px 14px;font:800 12px/1.2 'Inter',sans-serif;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.ob-ribbon span{display:inline-flex;align-items:center;gap:6px;transform:skewX(5deg)}

/* Card grid
   Desktop: logo | title, rating, best-for, bullets | price + CTA
   Mobile:  logo | title + rating, then best-for, bullets and CTA full width */
.ob-rating{display:flex;align-items:center;gap:6px;margin:4px 0 0;font-size:13px}

/* Action column */
.ob-save{align-self:center;display:inline-block;background:#FDECEA;color:var(--red);font:800 13px/1 'Inter',sans-serif;text-transform:uppercase;letter-spacing:.04em;border-radius:3px;padding:7px 12px}
.ob-micro{font-size:12px;color:var(--muted)}

/* ---------- Floating categories button + menu ---------- */
.cat-fab{position:fixed;right:16px;bottom:16px;z-index:70;display:flex;align-items:center;justify-content:center;gap:8px;height:56px;min-width:56px;padding:0 16px;border:0;border-radius:999px;background:var(--blue);color:#fff;box-shadow:0 8px 20px rgba(0,73,184,.35);font:700 15px 'Inter',sans-serif;cursor:pointer;opacity:0;transform:translateY(20px) scale(.9);pointer-events:none;transition:opacity .2s,transform .2s,background .15s}
.cat-fab:hover{background:var(--blue-hover)}
.cat-fab:focus-visible{outline:3px solid var(--blue-light);outline-offset:2px}
.cat-backdrop{position:fixed;inset:0;z-index:68;background:rgba(10,8,50,.35)}
.cat-menu{position:fixed;right:16px;bottom:84px;z-index:69;width:min(360px,calc(100vw - 32px));max-height:calc(100vh - 120px);overflow-y:auto;background:#fff;border-radius:12px;box-shadow:0 16px 40px rgba(10,8,50,.25);padding:16px;animation:cmIn .18s ease}
@keyframes cmIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.cat-menu-head{font:700 17px 'Inter',sans-serif;color:var(--ink);margin-bottom:10px}
.cm-group + .cm-group{border-top:1px solid var(--line);margin-top:12px;padding-top:12px}
.cm-subs{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.cm-item{background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 14px;font:600 13px 'Open Sans',sans-serif;color:var(--ink);cursor:pointer}
.cm-group > .cm-item{border:0;padding:4px 0;border-radius:0;font:700 14px 'Inter',sans-serif;color:var(--blue)}
.cm-item:hover{border-color:var(--blue)}
@media (max-width:760px){.cat-fab-label{display:none}.cat-fab{padding:0}}

/* ---------- Undo style.css `.sectionContent button` (grey pill, 10px white text) for our buttons ---------- */
.sectionContent .cat-tile{background:#fff;color:var(--ink);border-radius:6px;padding:18px 16px;font:inherit}
.sectionContent .f-tab{background:none;border-radius:0;color:var(--muted);padding:6px 4px 8px;margin:0 10px 0 0;font:700 15px 'Inter',sans-serif}
.sectionContent .info-icon{background:#E4E4E8;color:#666}
@media (max-width:520px){.sectionContent .f-tab{font-size:14px;margin-right:6px}}

/* ---------- Free-quote picks table (services) ---------- */
table.offers-table.picks-table .col-cat{width:30%}
table.offers-table.picks-table .col-best{width:40%}
table.offers-table.picks-table .col-more{width:30%}
table.offers-table.picks-table td{vertical-align:middle}
.picks-table .btn-primary{min-width:0;width:100%;font-size:14px;padding:10px 12px}

/* ---------- Product listing (ecom) — reuses .bottomline-card ----------
   Desktop: image + rating | name + bullets | price + save + CTA
   Mobile:  image | name + bullets, then price + CTA full width */
.product-listing .inner + .inner{margin-top:20px}
.bottomline-card.product-listing .inner{display:grid;grid-template-columns:170px 1fr 236px;gap:28px;align-items:center;padding:28px}
.product-listing .img-col{gap:10px}
.product-listing .pl-img{width:170px;height:140px}
.product-listing .pl-name{font:700 20px/1.3 'Inter',sans-serif;margin:0 0 10px}
.product-listing .pl-name a{color:var(--ink)}

.product-listing .pl-action{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.product-listing .pl-action .btn-primary.full{font-size:16px;padding:14px 12px}
@media (max-width:760px){
  .bottomline-card.product-listing{padding:12px}
  .bottomline-card.product-listing .inner{grid-template-columns:110px 1fr;gap:14px 16px;padding:18px 16px}
  .product-listing .pl-img{width:110px;height:100px}
  .product-listing .pl-name{font-size:17px;margin-bottom:6px}

  .product-listing .pl-action{grid-column:1/-1;border-top:1px solid var(--line);padding-top:14px}
  .product-listing .pl-action .btn-primary.full{flex-basis:100%}
}

/* Free-quote picks table: tighter on phones */
@media (max-width:520px){
  table.offers-table.picks-table .col-cat{width:32%}
  table.offers-table.picks-table .col-best{width:36%}
  .picks-table .btn-primary{font-size:12px;padding:8px 6px}
}

/* Undo style.css `.sectionContent button:hover/:focus` (dark teal #004c72) on all our buttons */
.sectionContent .f-tab:hover,.sectionContent .f-tab:focus{background:none}
.sectionContent .f-tab:hover{color:var(--ink)}
.sectionContent .cat-tile:hover,.sectionContent .cat-tile:focus{background:#fff}
.sectionContent .info-icon:hover,.sectionContent .info-icon:focus{background:#E4E4E8}
/* Keyboard focus ring instead of the colour change */
.sectionContent .f-tab:focus-visible,.sectionContent .cat-tile:focus-visible{outline:2px solid var(--blue-light);outline-offset:2px}

/* Category tabs: all four fit on one line on phones */
.f-tab .lbl-short{display:none}
@media (max-width:520px){
  #f-tabs{display:grid;grid-template-columns:repeat(4,auto);justify-content:space-between;overflow:visible}
  .sectionContent .f-tab{margin:0;padding:6px 0 8px;gap:3px;font-size:13px}
  .f-tab .n{font-size:10px;padding:0 4px}
  .f-tab .lbl-full{display:none}
  .f-tab .lbl-short{display:inline}
}
@media (max-width:359px){.f-tab .n{display:none}}

/* Product listing: category shown as a navy ribbon tab (same as "Editor's choice") */
.bottomline-card.product-listing .inner{position:relative;padding-top:36px}
.product-listing .inner + .inner{margin-top:32px}

/* Offer cards: category + badge tabs side by side at the top left */
@media (max-width:520px){
  .filter-controls{flex-direction:column;align-items:stretch;gap:8px}
  .sort-wrap{justify-content:flex-end}
}

/* ---------- Star ratings: exact fill ---------- */
.stars-rate{position:relative;display:inline-block;font-size:16px;line-height:1;letter-spacing:1px;white-space:nowrap}
.stars-bg{color:#D9DCE3}
.stars-fg{position:absolute;left:0;top:0;overflow:hidden;color:var(--yellow)}

/* ---------- Readability pass (older readers): bigger text and tap targets ---------- */
.trust-bar{font-size:14px}
.cat-tile small{font-size:15px}
.ob-rating{font-size:15px}
.ob-ribbon{font-size:13px}
.ob-micro{font-size:14px}
.ob-save{font-size:14px}
.info-icon,.sectionContent .info-icon{width:20px;height:20px;font-size:12px}
.cm-item{font-size:15px;padding:9px 16px}
.cm-group > .cm-item{font-size:16px}

table.offers-table.picks-table td{font-size:15px}

@media (max-width:520px){
  .sectionContent .f-tab{font-size:15px}
  .f-tab .n{display:none}
  table.offers-table.picks-table td{font-size:14px}
}

/* =========================================================================
   NO-JS FILTERS, SORT & CATEGORY MENU (generated from the offer data)
   - Filter: links to #cat-<key> (tabs, tiles, menu, deep links). The matching
     .cat-target span becomes :target and hides cards without class g-<key>/s-<key>.
   - Sort: radios #s-rec / #s-rating / #s-disc reorder cards with CSS "order"
     using each card's --or (rating rank) and --od (discount rank) values.
   ========================================================================= */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.offers-section{position:relative}
.cat-target{display:block;position:relative;top:-8px;height:0}

/* Tabs are links now */
a.f-tab,a.f-tab:hover,a.f-tab:focus{text-decoration:none}
.f-tab.t-all{color:var(--ink);border-bottom-color:var(--blue)}
.f-tab.t-all .n{background:var(--blue);border-color:var(--blue);color:#fff}
.cat-target:target ~ .filter-bar .f-tab.t-all{color:var(--muted);border-bottom-color:transparent}
.cat-target:target ~ .filter-bar .f-tab.t-all .n{background:var(--bg-soft);border-color:var(--line);color:var(--muted)}
#cat-all:target ~ .filter-bar .f-tab.t-all{color:var(--ink);border-bottom-color:var(--blue)}
#cat-all:target ~ .filter-bar .f-tab.t-all .n{background:var(--blue);border-color:var(--blue);color:#fff}
#cat-improve:target ~ .filter-bar .f-tab.t-improve,
#cat-roofing:target ~ .filter-bar .f-tab.t-improve,
#cat-gutters:target ~ .filter-bar .f-tab.t-improve,
#cat-windows:target ~ .filter-bar .f-tab.t-improve,
#cat-showers:target ~ .filter-bar .f-tab.t-improve,
#cat-tubs:target ~ .filter-bar .f-tab.t-improve,
#cat-security:target ~ .filter-bar .f-tab.t-improve,
#cat-stairlift:target ~ .filter-bar .f-tab.t-improve,
#cat-solar:target ~ .filter-bar .f-tab.t-improve{color:var(--ink);border-bottom-color:var(--blue)}
#cat-improve:target ~ .filter-bar .f-tab.t-improve .n,
#cat-roofing:target ~ .filter-bar .f-tab.t-improve .n,
#cat-gutters:target ~ .filter-bar .f-tab.t-improve .n,
#cat-windows:target ~ .filter-bar .f-tab.t-improve .n,
#cat-showers:target ~ .filter-bar .f-tab.t-improve .n,
#cat-tubs:target ~ .filter-bar .f-tab.t-improve .n,
#cat-security:target ~ .filter-bar .f-tab.t-improve .n,
#cat-stairlift:target ~ .filter-bar .f-tab.t-improve .n,
#cat-solar:target ~ .filter-bar .f-tab.t-improve .n{background:var(--blue);border-color:var(--blue);color:#fff}
#cat-shop:target ~ .filter-bar .f-tab.t-shop,
#cat-kitchen:target ~ .filter-bar .f-tab.t-shop,
#cat-cleaning:target ~ .filter-bar .f-tab.t-shop,
#cat-lawn:target ~ .filter-bar .f-tab.t-shop,
#cat-safety:target ~ .filter-bar .f-tab.t-shop,
#cat-bedbath:target ~ .filter-bar .f-tab.t-shop,
#cat-holiday:target ~ .filter-bar .f-tab.t-shop{color:var(--ink);border-bottom-color:var(--blue)}
#cat-shop:target ~ .filter-bar .f-tab.t-shop .n,
#cat-kitchen:target ~ .filter-bar .f-tab.t-shop .n,
#cat-cleaning:target ~ .filter-bar .f-tab.t-shop .n,
#cat-lawn:target ~ .filter-bar .f-tab.t-shop .n,
#cat-safety:target ~ .filter-bar .f-tab.t-shop .n,
#cat-bedbath:target ~ .filter-bar .f-tab.t-shop .n,
#cat-holiday:target ~ .filter-bar .f-tab.t-shop .n{background:var(--blue);border-color:var(--blue);color:#fff}

/* Sort options (pills); "Biggest discount" only on the Products tab */
.sort-wrap{display:flex;align-items:center;gap:6px;flex-shrink:0}
.sort-label{font-size:15px;font-weight:600;color:var(--muted);margin-right:2px}
.sort-opt{margin:0;padding:7px 14px;border:1px solid var(--line);border-radius:999px;background:#fff;font:600 14px 'Open Sans',sans-serif;color:var(--ink);cursor:pointer;white-space:nowrap}
.sort-opt:hover{border-color:var(--blue)}
.so-disc{display:none}
#cat-shop:target ~ .filter-bar .so-disc,
#cat-kitchen:target ~ .filter-bar .so-disc,
#cat-cleaning:target ~ .filter-bar .so-disc,
#cat-lawn:target ~ .filter-bar .so-disc,
#cat-safety:target ~ .filter-bar .so-disc,
#cat-bedbath:target ~ .filter-bar .so-disc,
#cat-holiday:target ~ .filter-bar .so-disc{display:block}
#s-rec:checked ~ .filter-bar .so-rec,
#s-rating:checked ~ .filter-bar .so-rating,
#s-disc:checked ~ .filter-bar .so-rec,
#s-disc:checked ~ #cat-shop:target ~ .filter-bar .so-disc,
#s-disc:checked ~ #cat-kitchen:target ~ .filter-bar .so-disc,
#s-disc:checked ~ #cat-cleaning:target ~ .filter-bar .so-disc,
#s-disc:checked ~ #cat-lawn:target ~ .filter-bar .so-disc,
#s-disc:checked ~ #cat-safety:target ~ .filter-bar .so-disc,
#s-disc:checked ~ #cat-bedbath:target ~ .filter-bar .so-disc,
#s-disc:checked ~ #cat-holiday:target ~ .filter-bar .so-disc{background:#EEF4FC;color:var(--blue);font-weight:700}
#s-disc:checked ~ #cat-shop:target ~ .filter-bar .so-rec,
#s-disc:checked ~ #cat-kitchen:target ~ .filter-bar .so-rec,
#s-disc:checked ~ #cat-cleaning:target ~ .filter-bar .so-rec,
#s-disc:checked ~ #cat-lawn:target ~ .filter-bar .so-rec,
#s-disc:checked ~ #cat-safety:target ~ .filter-bar .so-rec,
#s-disc:checked ~ #cat-bedbath:target ~ .filter-bar .so-rec,
#s-disc:checked ~ #cat-holiday:target ~ .filter-bar .so-rec{background:#fff;color:var(--ink);font-weight:600}
.sr-only:focus-visible ~ .filter-bar .sort-opt{outline-offset:2px}
/* Tabs and sort share a row when they fit; otherwise sort wraps underneath */
.filter-controls{flex-wrap:wrap;row-gap:10px}
.filter-controls #f-tabs{flex:0 0 auto;max-width:100%}
.sort-wrap{margin-left:auto;flex-wrap:wrap;row-gap:8px}
@media (max-width:760px){
  .filter-controls{flex-direction:column;align-items:stretch;gap:10px}
  .filter-controls #f-tabs{flex:none}
  .sort-wrap{margin-left:0;justify-content:flex-start}
  .sort-label{display:none}
}

/* Category tiles are links now */
a.cat-tile,a.cat-tile:hover,a.cat-tile:focus{text-decoration:none;color:var(--ink)}

/* Floating categories button + menu via :target */
.cat-fab{opacity:1;transform:none;pointer-events:auto;text-decoration:none}
.cat-fab:hover,.cat-fab:focus{color:#fff;text-decoration:none}
.cat-menu-wrap{display:none}
.cat-menu-wrap:target{display:block}
.cat-menu-wrap .cat-backdrop{display:block}
.cat-fab.is-close{z-index:71}
a.cm-item{display:inline-block;text-decoration:none}
a.cm-item:hover{text-decoration:none}

/* Categories menu: group headings ("All home services"…) read as links — full-width row with an arrow */
a.cm-item.cm-item{text-decoration:none}
.cm-group > a.cm-item{display:flex;align-items:center;justify-content:flex-start;gap:8px;width:100%;padding:6px 0;font-size:16px}
.cm-group > a.cm-item::after{content:"";flex-shrink:0;width:22px;height:22px;border-radius:999px;background:#EEF4FC url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><polyline points='6,3 11,8 6,13' stroke='%230049B8' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/12px no-repeat;transition:transform .15s}
.cm-group > a.cm-item:hover::after{transform:translateX(3px)}
.cm-group > a.cm-item:hover{text-decoration:underline}

/* Free-quote table: no highlighted first row, CTA text 14px on every device */
table.offers-table.picks-table .btn-primary.btn-primary{font-size:14px}

/* Top home products: drop the grey padded wrapper so cards line up with the headline and table */
.bottomline-card.product-listing,
.bottomline-card.product-listing.product-listing{background:none;padding:0;margin:28px 0 32px}

/* Sort: back to the dropdown look (CSS only).
   The face shows the checked option; the list opens on focus and closes when a label moves focus to its radio. */
.sort-wrap{gap:8px}
.sort-dd{position:relative;outline:none}
.sort-face{display:inline-flex;align-items:center;min-width:170px;border:1px solid var(--line);border-radius:4px;padding:8px 32px 8px 12px;background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><polyline points='3,6 8,11 13,6' stroke='%230A0832' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") right 10px center/12px no-repeat;font:600 15px 'Open Sans',sans-serif;color:var(--ink);cursor:pointer;white-space:nowrap}
.sort-dd:focus-within .sort-face{border-color:var(--blue)}
.cur{display:none}
#s-rec:checked ~ .filter-bar .cur-rec,
#s-rating:checked ~ .filter-bar .cur-rating,
#s-disc:checked ~ .filter-bar .cur-rec{display:inline}
#s-disc:checked ~ #cat-shop:target ~ .filter-bar .cur-rec,
#s-disc:checked ~ #cat-kitchen:target ~ .filter-bar .cur-rec,
#s-disc:checked ~ #cat-cleaning:target ~ .filter-bar .cur-rec,
#s-disc:checked ~ #cat-lawn:target ~ .filter-bar .cur-rec,
#s-disc:checked ~ #cat-safety:target ~ .filter-bar .cur-rec,
#s-disc:checked ~ #cat-bedbath:target ~ .filter-bar .cur-rec,
#s-disc:checked ~ #cat-holiday:target ~ .filter-bar .cur-rec{display:none}
#s-disc:checked ~ #cat-shop:target ~ .filter-bar .cur-disc,
#s-disc:checked ~ #cat-kitchen:target ~ .filter-bar .cur-disc,
#s-disc:checked ~ #cat-cleaning:target ~ .filter-bar .cur-disc,
#s-disc:checked ~ #cat-lawn:target ~ .filter-bar .cur-disc,
#s-disc:checked ~ #cat-safety:target ~ .filter-bar .cur-disc,
#s-disc:checked ~ #cat-bedbath:target ~ .filter-bar .cur-disc,
#s-disc:checked ~ #cat-holiday:target ~ .filter-bar .cur-disc{display:inline}
.sort-menu{display:none;position:absolute;right:0;top:calc(100% + 4px);z-index:50;min-width:100%;background:#fff;border:1px solid var(--line);border-radius:6px;box-shadow:0 10px 24px rgba(10,8,50,.15);padding:4px 0}
.sort-dd:focus-within .sort-menu{display:block}
.sort-menu .sort-opt{display:block;border:0;border-radius:0;background:#fff;padding:10px 14px;font:600 15px 'Open Sans',sans-serif;color:var(--ink)}
.sort-menu .sort-opt:hover{background:var(--bg-soft)}
.sort-menu .so-disc{display:none}
#s-rec:checked ~ .filter-bar .sort-menu .so-rec,
#s-rating:checked ~ .filter-bar .sort-menu .so-rating,
#s-disc:checked ~ .filter-bar .sort-menu .so-rec{background:#EEF4FC;color:var(--blue);font-weight:700}
.filter-bar{position:relative;z-index:5}
@media (max-width:760px){
  .sort-wrap{margin-left:auto;justify-content:flex-end}
  .sort-label{display:inline}
}

/* Featured top pick: rating sits under the headline; text link ends with » instead of the hand icon */
.featured-card .rating-row{margin:0 0 12px}
.featured-cta::before{content:none;display:none}
.featured-cta{font-weight:700}

/* =========================================================================
   Top home products: category filter (CSS only)
   ========================================================================= */
.pf-chips{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 8px}
.pf-chip{display:inline-flex;align-items:center;gap:6px;margin:0;padding:8px 16px;border:1px solid var(--line);border-radius:999px;background:#fff;font:600 15px 'Open Sans',sans-serif;color:var(--ink);cursor:pointer;white-space:nowrap}
.pf-chip:hover{border-color:var(--blue)}
.pf-chip .n{font:600 11px 'Inter',sans-serif;background:var(--bg-soft);border:1px solid var(--line);color:var(--muted);border-radius:999px;padding:1px 7px}
#pf-all:checked ~ .pf-chips .pf-chip[for="pf-all"],
#pf-kitchen:checked ~ .pf-chips .pf-chip[for="pf-kitchen"],
#pf-cleaning:checked ~ .pf-chips .pf-chip[for="pf-cleaning"],
#pf-lawn:checked ~ .pf-chips .pf-chip[for="pf-lawn"],
#pf-safety:checked ~ .pf-chips .pf-chip[for="pf-safety"],
#pf-bedbath:checked ~ .pf-chips .pf-chip[for="pf-bedbath"],
#pf-holiday:checked ~ .pf-chips .pf-chip[for="pf-holiday"]{background:var(--ink);border-color:var(--ink);color:#fff}
#pf-all:checked ~ .pf-chips .pf-chip[for="pf-all"] .n,
#pf-kitchen:checked ~ .pf-chips .pf-chip[for="pf-kitchen"] .n,
#pf-cleaning:checked ~ .pf-chips .pf-chip[for="pf-cleaning"] .n,
#pf-lawn:checked ~ .pf-chips .pf-chip[for="pf-lawn"] .n,
#pf-safety:checked ~ .pf-chips .pf-chip[for="pf-safety"] .n,
#pf-bedbath:checked ~ .pf-chips .pf-chip[for="pf-bedbath"] .n,
#pf-holiday:checked ~ .pf-chips .pf-chip[for="pf-holiday"] .n{background:#fff;border-color:#fff;color:var(--ink)}
#pf-kitchen:checked ~ .product-listing .inner:not(.p-kitchen){display:none}
#pf-cleaning:checked ~ .product-listing .inner:not(.p-cleaning){display:none}
#pf-lawn:checked ~ .product-listing .inner:not(.p-lawn){display:none}
#pf-safety:checked ~ .product-listing .inner:not(.p-safety){display:none}
#pf-bedbath:checked ~ .product-listing .inner:not(.p-bedbath){display:none}
#pf-holiday:checked ~ .product-listing .inner:not(.p-holiday){display:none}
.pl-filter .sr-only:focus-visible ~ .pf-chips{outline:2px solid var(--blue-light);outline-offset:4px;border-radius:8px}
/* even spacing however many products are showing */
.bottomline-card.product-listing.product-listing{display:flex;flex-direction:column;gap:32px}
.product-listing .inner + .inner{margin-top:0}
@media (max-width:520px){.pf-chip{font-size:14px;padding:7px 12px}}

/* Top home products: rating under the product name, image alone in its column, shipping line under the button */
.product-listing .pl-rating{margin:0 0 12px}
.product-listing .img-col{justify-content:center}
.bottomline-card.product-listing .inner{align-items:center}
.product-listing .pl-action .ob-micro{margin-top:2px}
@media (max-width:760px){
  .product-listing .img-col{align-self:start}
  .product-listing .pl-rating{font-size:14px;flex-wrap:wrap}
}

/* =========================================================================
   Top home products: same card look as the offer cards above
   (border, radius, shadow, 130px image, 236px action column; on phones a
   72px image beside name + rating, bullets and button full width)
   ========================================================================= */
.bottomline-card.product-listing .inner{
  display:grid;grid-template-columns:130px 1fr 236px;grid-template-areas:"img body action";
  column-gap:24px;align-items:start;
  background:#fff;border:1px solid var(--line);border-radius:6px;
  box-shadow:0 2px 0 rgba(10,8,50,.03);padding:28px 24px
}
.product-listing .img-col{grid-area:img;align-self:start;justify-content:flex-start;gap:0}
.product-listing .pl-img,.product-listing .img-col .ph{width:130px;height:130px}
.product-listing .pl-body{grid-area:body}
.product-listing .pl-name{font:700 20px/1.3 'Inter',sans-serif;margin:0}
.product-listing .pl-rating{margin:4px 0 0;flex-wrap:nowrap}

.product-listing .pl-action{grid-area:action;align-self:center;gap:10px}
.product-listing .pl-action .btn-primary.full{font-size:16px;padding:14px 16px}
@media (max-width:760px){
  .bottomline-card.product-listing .inner{
    grid-template-columns:72px 1fr;
    grid-template-areas:"img name" "img rating" "list list" "action action";
    column-gap:14px;padding:26px 16px 20px
  }
  .product-listing .pl-body{display:contents}
  .product-listing .pl-name{grid-area:name;align-self:end;font-size:19px}
  .product-listing .pl-rating{grid-area:rating;align-self:start;font-size:15px}

  .product-listing .pl-img,.product-listing .img-col .ph{width:72px;height:72px;font-size:9px}
  .product-listing .pl-action{grid-column:1/-1;margin-top:16px;border-top:0;padding-top:0}
}
/* keep the original soft drop shadow on the product cards */
.bottomline-card.product-listing .inner{box-shadow:0 12px 24px 0 rgba(0,0,0,.12)}

/* Main headline: show it exactly as written (template capitalises every word: "To", "Or", "In") */
.sectionContent main h1{text-transform:none}

/* More breathing room between offer cards (the ribbon tabs sit ~13px above each card) */
.results{gap:44px}
@media (max-width:760px){.results{gap:38px}}

/* Warranty & insurance now live under the Home Services tab */
#cat-warranty:target ~ .filter-bar .f-tab.t-improve,#cat-insurance:target ~ .filter-bar .f-tab.t-improve{color:var(--ink);border-bottom-color:var(--blue)}
#cat-warranty:target ~ .filter-bar .f-tab.t-improve .n,#cat-insurance:target ~ .filter-bar .f-tab.t-improve .n{background:var(--blue);border-color:var(--blue);color:#fff}

/* Product filter: selected pill in the page blue (matches buttons and tab underline) */
#pf-all:checked ~ .pf-chips .pf-chip[for="pf-all"],
#pf-kitchen:checked ~ .pf-chips .pf-chip[for="pf-kitchen"],
#pf-cleaning:checked ~ .pf-chips .pf-chip[for="pf-cleaning"],
#pf-lawn:checked ~ .pf-chips .pf-chip[for="pf-lawn"],
#pf-safety:checked ~ .pf-chips .pf-chip[for="pf-safety"],
#pf-bedbath:checked ~ .pf-chips .pf-chip[for="pf-bedbath"],
#pf-holiday:checked ~ .pf-chips .pf-chip[for="pf-holiday"]{background:var(--blue);border-color:var(--blue);color:#fff}
#pf-all:checked ~ .pf-chips .pf-chip[for="pf-all"] .n,
#pf-kitchen:checked ~ .pf-chips .pf-chip[for="pf-kitchen"] .n,
#pf-cleaning:checked ~ .pf-chips .pf-chip[for="pf-cleaning"] .n,
#pf-lawn:checked ~ .pf-chips .pf-chip[for="pf-lawn"] .n,
#pf-safety:checked ~ .pf-chips .pf-chip[for="pf-safety"] .n,
#pf-bedbath:checked ~ .pf-chips .pf-chip[for="pf-bedbath"] .n,
#pf-holiday:checked ~ .pf-chips .pf-chip[for="pf-holiday"] .n{background:#fff;border-color:#fff;color:var(--blue)}

/* =========================================================================
   Main category tabs: same pill style as the product filter
   ========================================================================= */
.sectionContent .filter-bar .f-tab{display:inline-flex;align-items:center;gap:6px;margin:0 8px 0 0;padding:8px 16px;border:1px solid var(--line);border-radius:999px;font:600 15px 'Open Sans',sans-serif;background:#fff;border-color:var(--line);color:var(--ink)}
.sectionContent .filter-bar .f-tab:hover{border-color:var(--blue)}
.sectionContent .filter-bar .f-tab .n{font:600 11px 'Inter',sans-serif;border:1px solid var(--line);border-radius:999px;padding:1px 7px;background:var(--bg-soft);border-color:var(--line);color:var(--muted)}
.sectionContent .filter-bar .f-tab.t-all{background:var(--blue);border-color:var(--blue);color:#fff}
.sectionContent .filter-bar .f-tab.t-all .n{background:#fff;border-color:#fff;color:var(--blue)}
.sectionContent .cat-target:target ~ .filter-bar .f-tab.t-all{background:#fff;border-color:var(--line);color:var(--ink)}
.sectionContent .cat-target:target ~ .filter-bar .f-tab.t-all .n{background:var(--bg-soft);border-color:var(--line);color:var(--muted)}
#cat-all:target ~ .filter-bar .f-tab.t-all,#cat-improve:target ~ .filter-bar .f-tab.t-improve,#cat-warranty:target ~ .filter-bar .f-tab.t-improve,#cat-insurance:target ~ .filter-bar .f-tab.t-improve,#cat-roofing:target ~ .filter-bar .f-tab.t-improve,#cat-gutters:target ~ .filter-bar .f-tab.t-improve,#cat-windows:target ~ .filter-bar .f-tab.t-improve,#cat-showers:target ~ .filter-bar .f-tab.t-improve,#cat-tubs:target ~ .filter-bar .f-tab.t-improve,#cat-security:target ~ .filter-bar .f-tab.t-improve,#cat-stairlift:target ~ .filter-bar .f-tab.t-improve,#cat-solar:target ~ .filter-bar .f-tab.t-improve,#cat-shop:target ~ .filter-bar .f-tab.t-shop,#cat-kitchen:target ~ .filter-bar .f-tab.t-shop,#cat-cleaning:target ~ .filter-bar .f-tab.t-shop,#cat-lawn:target ~ .filter-bar .f-tab.t-shop,#cat-safety:target ~ .filter-bar .f-tab.t-shop,#cat-bedbath:target ~ .filter-bar .f-tab.t-shop,#cat-holiday:target ~ .filter-bar .f-tab.t-shop{background:var(--blue);border-color:var(--blue);color:#fff}
#cat-all:target ~ .filter-bar .f-tab.t-all .n,#cat-improve:target ~ .filter-bar .f-tab.t-improve .n,#cat-warranty:target ~ .filter-bar .f-tab.t-improve .n,#cat-insurance:target ~ .filter-bar .f-tab.t-improve .n,#cat-roofing:target ~ .filter-bar .f-tab.t-improve .n,#cat-gutters:target ~ .filter-bar .f-tab.t-improve .n,#cat-windows:target ~ .filter-bar .f-tab.t-improve .n,#cat-showers:target ~ .filter-bar .f-tab.t-improve .n,#cat-tubs:target ~ .filter-bar .f-tab.t-improve .n,#cat-security:target ~ .filter-bar .f-tab.t-improve .n,#cat-stairlift:target ~ .filter-bar .f-tab.t-improve .n,#cat-solar:target ~ .filter-bar .f-tab.t-improve .n,#cat-shop:target ~ .filter-bar .f-tab.t-shop .n,#cat-kitchen:target ~ .filter-bar .f-tab.t-shop .n,#cat-cleaning:target ~ .filter-bar .f-tab.t-shop .n,#cat-lawn:target ~ .filter-bar .f-tab.t-shop .n,#cat-safety:target ~ .filter-bar .f-tab.t-shop .n,#cat-bedbath:target ~ .filter-bar .f-tab.t-shop .n,#cat-holiday:target ~ .filter-bar .f-tab.t-shop .n{background:#fff;border-color:#fff;color:var(--blue)}
@media (max-width:520px){
  .filter-controls #f-tabs{display:flex;gap:8px}
  .sectionContent .filter-bar .f-tab{margin:0;padding:8px 14px;font-size:15px}
}
@media (max-width:520px){
  .filter-controls #f-tabs{justify-content:flex-start}
  .sectionContent .filter-bar .f-tab{padding:8px 12px}
  .sectionContent .filter-bar .f-tab .n{display:inline-block}
}
@media (max-width:400px){.sectionContent .filter-bar .f-tab .n{display:none}}

/* "What are you shopping for?": two tiles now (services, products) */
.cat-tiles{grid-template-columns:repeat(2,1fr)}
@media (max-width:640px){.cat-tiles{grid-template-columns:1fr}}

/* Contrast: discount badge text 3.3:1 -> 5.6:1 on its pink background */
.ob-save{color:#B23A1C}

/* Touch targets: at least 44px tall */
.sectionContent .filter-bar .f-tab,
.pf-chip,
.sort-face,
.cm-item,
.picks-table .btn-primary{min-height:44px}
.pf-chip{padding-top:10px;padding-bottom:10px}
/* "i" rating icons: keep the 20px circle, enlarge the tap area to 44px with a transparent border */
.info-icon,.sectionContent .info-icon{box-sizing:content-box;border:12px solid transparent;background-clip:padding-box;margin:-12px -6px}

/* Visible keyboard focus everywhere */
.sectionContent a:focus-visible,
.sectionContent summary:focus-visible,
.sectionContent button:focus-visible,
.cat-fab:focus-visible,
.cm-item:focus-visible,
.sort-dd:focus-visible .sort-face,
#pf-all:focus-visible ~ .pf-chips .pf-chip[for="pf-all"],
#pf-kitchen:focus-visible ~ .pf-chips .pf-chip[for="pf-kitchen"],
#pf-cleaning:focus-visible ~ .pf-chips .pf-chip[for="pf-cleaning"],
#pf-lawn:focus-visible ~ .pf-chips .pf-chip[for="pf-lawn"],
#pf-safety:focus-visible ~ .pf-chips .pf-chip[for="pf-safety"],
#pf-bedbath:focus-visible ~ .pf-chips .pf-chip[for="pf-bedbath"],
#pf-holiday:focus-visible ~ .pf-chips .pf-chip[for="pf-holiday"]{outline:3px solid var(--blue-light);outline-offset:2px}
.sort-menu .sort-opt:focus-visible{outline:3px solid var(--blue-light);outline-offset:-3px}

/* Respect "reduce motion" system setting */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important;scroll-behavior:auto !important}
}
/* "Advertorial Published" disclosure trigger: 18px -> 26px tap height (WCAG 2.2 min 24px) */
.publishedLabel.cssTip{display:inline-block;padding:4px 0}
.publishedLabel.cssTip:focus-visible{outline:3px solid var(--blue-light);outline-offset:2px}

/* Home Equity Loans + Debt Relief (Home Services) filters */
#cat-equity:target ~ .filter-bar .f-tab.t-improve,
#cat-debt:target ~ .filter-bar .f-tab.t-improve{background:var(--blue);border-color:var(--blue);color:#fff}
#cat-equity:target ~ .filter-bar .f-tab.t-improve .n,
#cat-debt:target ~ .filter-bar .f-tab.t-improve .n{background:#fff;border-color:#fff;color:var(--blue)}

/* "How we chose these offers": same type as the FAQ questions */
.sectionContent .methodology h2{font:700 16px/1.4 'Inter',sans-serif;color:var(--ink);text-transform:none;margin:0}

/* ============ Listicle layout for "Compare all home offers" (home-2) ============ */
.li-index{margin:40px 0 0;border:1px solid var(--line);border-radius:6px;background:var(--bg-soft)}
.li-index summary{list-style:none;cursor:pointer;padding:14px 18px;font:700 18px/1.4 'Inter',sans-serif;color:var(--ink);display:flex;justify-content:space-between;align-items:center}
.li-index summary::-webkit-details-marker{display:none}
.li-index summary::after{content:"";width:16px;height:16px;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><polyline points='3,6 8,11 13,6' stroke='%230A0832' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;transition:transform .2s}
.li-index[open] summary::after{transform:rotate(180deg)}
.li-toc{list-style:none;margin:0;padding:0 18px 16px;columns:2;column-gap:24px}
.li-toc li{break-inside:avoid;margin:0}
.li-toc li{display:flex;align-items:center;gap:10px;border-bottom:1px dashed var(--line)}
.li-toc-jump{display:flex;align-items:center;gap:10px;flex:1;min-width:0;padding:7px 0;color:var(--ink);font-size:15px;line-height:1.35;text-decoration:none}
.li-toc-jump:hover{color:var(--blue)}
.li-toc-cta{flex-shrink:0;color:var(--blue);font:700 13px/1.2 'Inter',sans-serif;text-decoration:underline;white-space:nowrap}
.li-toc-cta:hover{color:var(--blue-hover)}
.li-toc-n{flex-shrink:0;min-width:22px;color:var(--ink);font:800 15px/1.35 'Inter',sans-serif;text-align:right}

.listicle{counter-reset:none}
.listicle{gap:0;counter-reset:rank}
.li-item{padding:32px 0 36px;border-bottom:1px solid var(--line);scroll-margin-top:16px;counter-increment:rank}
.li-item:last-child{border-bottom:0}
.li-head{display:block}
.li-rank::before{content:counter(rank) ". ";color:var(--ink)}
.li-title{font:800 26px/1.25 'Inter',sans-serif;margin:0;color:var(--ink);text-transform:none}
.li-title a{color:inherit;text-decoration:none}
.li-title a:hover{color:var(--blue)}
.li-head .ob-rating{margin-top:6px}
.li-body{margin-top:18px}
.li-body p{font-size:18px;line-height:1.6}
.li-body .pros-cons-container{margin:16px 0 0}
.li-body .download-line{margin:18px 0 0;font-size:20px}
.li-body .download-line a{color:var(--blue);font-size:20px;font-weight:700;text-decoration:underline}
.li-body .download-line a:hover{color:var(--blue-hover)}

@media (max-width:767px){
  .li-toc{columns:1}
  .li-title{font-size:21px}
}

/* Filtering */
#cat-improve:target ~ .results .li-item:not(.g-improve){display:none}

#cat-shop:target ~ .results .li-item:not(.g-shop){display:none}
#cat-warranty:target ~ .results .li-item:not(.s-warranty){display:none}
#cat-insurance:target ~ .results .li-item:not(.s-insurance){display:none}
#cat-roofing:target ~ .results .li-item:not(.s-roofing){display:none}
#cat-gutters:target ~ .results .li-item:not(.s-gutters){display:none}
#cat-windows:target ~ .results .li-item:not(.s-windows){display:none}
#cat-showers:target ~ .results .li-item:not(.s-showers){display:none}
#cat-tubs:target ~ .results .li-item:not(.s-tubs){display:none}
#cat-security:target ~ .results .li-item:not(.s-security){display:none}
#cat-stairlift:target ~ .results .li-item:not(.s-stairlift){display:none}
#cat-solar:target ~ .results .li-item:not(.s-solar){display:none}
#cat-kitchen:target ~ .results .li-item:not(.s-kitchen){display:none}
#cat-cleaning:target ~ .results .li-item:not(.s-cleaning){display:none}
#cat-lawn:target ~ .results .li-item:not(.s-lawn){display:none}
#cat-safety:target ~ .results .li-item:not(.s-safety){display:none}
#cat-bedbath:target ~ .results .li-item:not(.s-bedbath){display:none}
#cat-holiday:target ~ .results .li-item:not(.s-holiday){display:none}
/* Sorting */
#s-rating:checked ~ .results .li-item{order:var(--or)}
#s-disc:checked ~ #cat-shop:target ~ .results .li-item,
#s-disc:checked ~ #cat-kitchen:target ~ .results .li-item,
#s-disc:checked ~ #cat-cleaning:target ~ .results .li-item,
#s-disc:checked ~ #cat-lawn:target ~ .results .li-item,
#s-disc:checked ~ #cat-safety:target ~ .results .li-item,
#s-disc:checked ~ #cat-bedbath:target ~ .results .li-item,
#s-disc:checked ~ #cat-holiday:target ~ .results .li-item{order:var(--od)}
/* Home Equity Loans + Debt Relief (Home Services) filters */
#cat-equity:target ~ .results .li-item:not(.s-equity){display:none}
#cat-debt:target ~ .results .li-item:not(.s-debt){display:none}
/* the number follows the on-page order, which only matches the DOM order under Recommended */
#s-rating:checked ~ .results .li-rank,
#s-disc:checked ~ #cat-shop:target ~ .results .li-rank,
#s-disc:checked ~ #cat-kitchen:target ~ .results .li-rank,
#s-disc:checked ~ #cat-cleaning:target ~ .results .li-rank,
#s-disc:checked ~ #cat-lawn:target ~ .results .li-rank,
#s-disc:checked ~ #cat-safety:target ~ .results .li-rank,
#s-disc:checked ~ #cat-bedbath:target ~ .results .li-rank,
#s-disc:checked ~ #cat-holiday:target ~ .results .li-rank{display:none}

/* Consistent breathing room above each section headline */
.sectionContent main > h2{margin-top:56px}
@media (max-width:767px){.sectionContent main > h2{margin-top:44px}}

/* Second column = "Good to know" (as on listicle-articles-home): soft blue "i" instead of a red X */
.li-body .pros-cons-box li{font-size:18px}
.li-body .pros-cons-box.cons li::before{background:#E4ECF5 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><circle cx='6' cy='3' r='1.1' fill='%230049B8'/><rect x='5.1' y='5' width='1.8' height='5' rx='.9' fill='%230049B8'/></svg>") center/12px no-repeat}

/* Body copy at 18px everywhere (desktop and mobile); UI labels, tables and small print stay smaller */
.sectionContent main p,.sectionContent main p.subheadline,.sectionContent main .methodology li,.sectionContent main .benefits-list li{font-size:18px}

/* Mobile: sort sits on its own row under the tabs, so line it up on the left and let the dropdown fill the row */
@media (max-width:760px){
  .sectionContent .filter-controls .sort-wrap{margin-left:0;justify-content:flex-start;flex-wrap:nowrap;width:100%}
  .sectionContent .filter-controls .sort-dd{flex:1;min-width:0}
  .sectionContent .filter-controls .sort-face{display:flex;width:100%;box-sizing:border-box}
}

/* Product image slot under the title/rating (16:9, rounded, links to the offer) */
.li-media{display:block;margin:16px 0 0;border-radius:12px;overflow:hidden}
.li-media img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.li-media .li-ph{width:100%;height:auto;aspect-ratio:16/9;border-radius:12px;font-size:13px}

/* New categories: car insurance (s-auto), background checks (s-background), cash back cards (s-cards / p-cards) - cloned from debt / holiday rules */
#cat-cards:target ~ .filter-bar .f-tab.t-shop{color:var(--ink);border-bottom-color:var(--blue)}
#cat-cards:target ~ .filter-bar .f-tab.t-shop .n{background:var(--blue);border-color:var(--blue);color:#fff}
#cat-cards:target ~ .filter-bar .so-disc{display:block}
#s-disc:checked ~ #cat-cards:target ~ .filter-bar .so-disc{background:#EEF4FC;color:var(--blue);font-weight:700}
#s-disc:checked ~ #cat-cards:target ~ .filter-bar .so-rec{background:#fff;color:var(--ink);font-weight:600}
#s-disc:checked ~ #cat-cards:target ~ .filter-bar .cur-rec{display:none}
#s-disc:checked ~ #cat-cards:target ~ .filter-bar .cur-disc{display:inline}
#pf-cards:checked ~ .pf-chips .pf-chip[for="pf-cards"]{background:var(--ink);border-color:var(--ink);color:#fff}
#pf-cards:checked ~ .pf-chips .pf-chip[for="pf-cards"] .n{background:#fff;border-color:#fff;color:var(--ink)}
#pf-cards:checked ~ .product-listing .inner:not(.p-cards){display:none}
#pf-cards:checked ~ .pf-chips .pf-chip[for="pf-cards"]{background:var(--blue);border-color:var(--blue);color:#fff}
#pf-cards:checked ~ .pf-chips .pf-chip[for="pf-cards"] .n{background:#fff;border-color:#fff;color:var(--blue)}
#cat-cards:target ~ .filter-bar .f-tab.t-shop{background:var(--blue);border-color:var(--blue);color:#fff}
#cat-cards:target ~ .filter-bar .f-tab.t-shop .n{background:#fff;border-color:#fff;color:var(--blue)}
#pf-cards:focus-visible ~ .pf-chips .pf-chip[for="pf-cards"]{outline:3px solid var(--blue-light);outline-offset:2px}
#cat-auto:target ~ .filter-bar .f-tab.t-improve{background:var(--blue);border-color:var(--blue);color:#fff}
#cat-background:target ~ .filter-bar .f-tab.t-improve{background:var(--blue);border-color:var(--blue);color:#fff}
#cat-auto:target ~ .filter-bar .f-tab.t-improve .n{background:#fff;border-color:#fff;color:var(--blue)}
#cat-background:target ~ .filter-bar .f-tab.t-improve .n{background:#fff;border-color:#fff;color:var(--blue)}
#cat-cards:target ~ .results .li-item:not(.s-cards){display:none}
#s-disc:checked ~ #cat-cards:target ~ .results .li-item{order:var(--od)}
#cat-auto:target ~ .results .li-item:not(.s-auto){display:none}
#cat-background:target ~ .results .li-item:not(.s-background){display:none}
#s-disc:checked ~ #cat-cards:target ~ .results .li-rank{display:none}

/* Discount badge on the rating row (products) */
.li-head .ob-rating{flex-wrap:wrap}
.li-head .li-save{margin-left:10px;font-size:12px;padding:6px 10px}

/* Perks line under the rating (products) */
.li-head p.li-perks{margin:6px 0 0;font:500 15px/1.4 'Inter',sans-serif;color:var(--muted)}

/* UX audit fixes: 44px tap targets, focus rings outside the article, readable footer */
.li-toc li{min-height:45px;align-items:stretch}
.li-toc-jump{padding:10px 0}
.li-toc-cta{display:flex;align-items:center;padding-left:6px}
.toc-list li{margin:0}
.toc-list a{display:inline-block;padding:10px 0}
header a:focus-visible,footer a:focus-visible{outline:3px solid var(--blue-light);outline-offset:2px}
.footer .copyright,.footer .copyright a{color:#555;font-size:12px}
.footer ul.copyright a{color:var(--ink)}
.footer ul.copyright a:hover{color:var(--blue);text-decoration:underline}

/* Subheadline under the h1 */
.sectionContent main > h2.h1-sub{margin:10px 0 14px;font:500 20px/1.45 'Inter',sans-serif;color:var(--muted);text-transform:none;letter-spacing:0;text-wrap:balance;max-width:720px}
@media (max-width:767px){.sectionContent main > h2.h1-sub{font-size:17px}}

/* Top-pick card benefits: green check circles, same as the pros lists */
.featured-card .benefits-list li{padding-left:32px}
.featured-card .benefits-list li::before{content:"";position:absolute;left:0;top:calc(.75em - 10px);width:20px;height:20px;border-radius:999px;font-size:inherit;line-height:normal;background:var(--green) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><polyline points='2,6 5,9 10,3' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/12px no-repeat}

/* Top home products: one-sentence description instead of check-mark bullets */
.product-listing .pl-desc{margin:12px 0 0;font-size:18px;line-height:1.55;color:var(--ink)}
@media (max-width:760px){.product-listing .pl-desc{grid-area:list;margin-top:14px}}