:root{
  --ink:#191919;
  --muted:#66645f;
  --rule:#e4e1db;
  --paper:#ffffff;
  --cream:#fbf7f3;
  --rose:#fff0f4;
  --rose-2:#fde6ec;
  --pink:#ea718d;
  --pink-deep:#d95e7b;
  --green:#23834c;
  --green-soft:#eaf6ee;
  --gray-grade:#eeeeeb;
  --lav:#f6f0fb;
  --peach:#fff6ef;
  --serif:Georgia,"Times New Roman",serif;
  --sans:Arial,Helvetica,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:
    linear-gradient(180deg,#fff 0%,#fff9fb 16%,#fff 38%,#fff 100%);
  color:var(--ink);
  font-family:var(--sans);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
img{display:block;max-width:100%}
button{font:inherit}
.container{
  width:min(1080px,calc(100% - 34px));
  margin:auto;
}
[id]{scroll-margin-top:78px}

.desktop-header{
  border-bottom:1px solid #111;
  background:
    linear-gradient(180deg,#fff 0%,#fffafc 100%);
}
.desktop-header .container{
  min-height:62px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
.desktop-logo{width:214px;height:auto}
.desktop-disclosure{
  color:#6d6b66;
  font-size:11px;
  text-underline-offset:3px;
}
.mobile-bar{display:none}

.page-grid{
  display:grid;
  grid-template-columns:minmax(0,760px) 282px;
  gap:36px;
  align-items:start;
  padding:28px 0 58px;
}
.article{min-width:0}
.sidebar{position:sticky;top:20px}

.hero{padding:3px 0 20px}
.eyebrow{
  color:#77736e;
  font-size:10px;
  font-weight:800;
  letter-spacing:.12em;
}
.hero h1{
  max-width:730px;
  margin:10px 0 14px;
  font:700 clamp(40px,5.3vw,59px)/1.02 var(--serif);
  letter-spacing:-.036em;
}
.dek{
  max-width:720px;
  margin:0;
  color:#484640;
  font:18px/1.48 var(--serif);
}
.byline{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:17px;
  color:#77736e;
  font-size:12px;
}
.byline-mark{
  display:grid;
  width:32px;height:32px;
  place-items:center;
  border-radius:50%;
  background:var(--rose);
  color:#9b5364;
  font-size:10px;
  font-weight:800;
}

.jump-nav{
  margin:20px 0 24px;
  padding:12px;
  border:1px solid var(--rule);
  border-radius:12px;
  background:
    linear-gradient(180deg,#fff7fa 0%,#fff 100%);
  box-shadow:0 6px 18px rgba(237,113,141,.06);
}
.jump-label{
  margin:0 0 9px 2px;
  color:#918d86;
  font-size:9px;
  font-weight:800;
  letter-spacing:.11em;
}
.jump-links{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:7px;
}
.jump-links a{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:39px;
  padding:8px 9px;
  border:1px solid #e7dde1;
  border-radius:8px;
  background:#fff;
  color:#4e4b46;
  font-size:10px;
  font-weight:800;
  text-align:center;
  text-decoration:none;
  transition:.15s ease;
}
.jump-links a:hover{
  border-color:#d6b3bd;
  transform:translateY(-1px);
}
.jump-links span{
  margin-left:5px;
  color:var(--pink-deep);
}

.hero-compare{
  overflow:hidden;
  margin:0 0 26px;
  border:1px solid #ded9d1;
  border-radius:18px;
  background:#fff;
  box-shadow:0 10px 28px rgba(0,0,0,.055);
}
.hero-compare-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 15px;
  background:linear-gradient(90deg,var(--rose) 0%,#fff 100%);
  border-bottom:1px solid #eee3e6;
}
.hero-compare-head strong{
  font:700 18px/1.1 var(--serif);
}
.hero-compare-head span{
  color:#7a756e;
  font-size:11px;
}
.hero-compare img{
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  object-fit:cover;
}

.quick-pick{
  overflow:hidden;
  margin:0 0 26px;
  border:1px solid #ded9d1;
  border-radius:16px;
  background:#fff;
  box-shadow:0 10px 28px rgba(0,0,0,.055);
}
.quick-ribbon{
  padding:8px 14px;
  background:#111;
  color:#fff;
  font-size:9px;
  font-weight:800;
  letter-spacing:.1em;
  text-align:center;
}
.quick-grid{
  display:grid;
  grid-template-columns:190px 1fr;
}
.quick-image{
  display:grid;
  place-items:center;
  padding:19px;
  background:
    radial-gradient(circle at top left,#ffe7ef 0%,#fff7fa 45%,#fff 100%);
}
.quick-image img{
  max-height:178px;
  object-fit:contain;
}
.quick-copy{padding:20px 22px}
.quick-grade{
  display:flex;
  align-items:center;
  gap:10px;
}
.grade-big{
  display:grid;
  width:52px;height:52px;
  place-items:center;
  border-radius:12px;
  background:var(--green);
  color:#fff;
  font:700 27px var(--serif);
  box-shadow:0 5px 15px rgba(35,131,76,.18);
}
.quick-grade-copy strong{
  display:block;
  font:700 17px var(--serif);
}
.quick-grade-copy span{
  color:#77736e;
  font-size:11px;
}
.quick-copy h2{
  margin:10px 0 7px;
  font:700 27px/1.08 var(--serif);
}
.quick-copy p{
  margin:0 0 12px;
  color:#504d48;
  font-size:13px;
}
.offer-pill{
  display:inline-flex;
  align-items:center;
  margin:1px 0 11px;
  padding:6px 9px;
  border-radius:999px;
  background:var(--green-soft);
  color:#216d42;
  font-size:10px;
  font-weight:800;
}
.trust-row{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin:0 0 13px;
}
.trust-chip{
  padding:5px 8px;
  border:1px solid #eee2e6;
  border-radius:999px;
  background:linear-gradient(180deg,#fff 0%,#fff9fb 100%);
  color:#68645e;
  font-size:9px;
  font-weight:700;
}
.micro-note{
  margin-top:8px;
  color:#949089;
  font-size:9px;
}

.primary-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:43px;
  padding:11px 16px;
  border:1px solid #111;
  border-radius:8px;
  background:#111;
  color:#fff;
  font-size:10px;
  font-weight:800;
  letter-spacing:.07em;
  text-decoration:none;
  box-shadow:0 4px 12px rgba(0,0,0,.1);
}
.primary-btn span{font-size:15px;line-height:1}
.secondary-link{
  display:inline-flex;
  align-items:center;
  gap:5px;
  margin-top:3px;
  padding-bottom:2px;
  border-bottom:1px solid #cac6bf;
  color:#85817b;
  font-size:10px;
  font-weight:800;
  text-decoration:none;
}
.secondary-link span{font-size:13px}

.section{
  padding:28px 0;
  border-top:1px solid var(--rule);
}
.section.soft{
  margin-left:-16px;
  margin-right:-16px;
  padding-left:16px;
  padding-right:16px;
  background:
    linear-gradient(180deg,#fff9fb 0%,#fff 85%);
  border-radius:18px;
}
.section.color-wash{
  background:
    linear-gradient(180deg,#fff 0%,#fffaf4 65%,#fff 100%);
  border-radius:18px;
  padding-left:16px;
  padding-right:16px;
  margin-left:-16px;
  margin-right:-16px;
}
.section-head{
  display:grid;
  grid-template-columns:58px 1fr;
  gap:14px;
  align-items:start;
  margin-bottom:16px;
}
.section-number{
  display:grid;
  width:52px;height:52px;
  place-items:center;
  border-radius:14px;
  background:#111;
  color:#fff;
  font:700 18px var(--serif);
}
.section-number.blush{
  border:1px solid #f3d8df;
  background:var(--rose);
  color:#9d5366;
}
.section-title h2{
  margin:3px 0 5px;
  font:700 32px/1.08 var(--serif);
}
.section-title p{
  margin:0;
  color:#66625d;
  font-size:13px;
}
.criteria-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.criteria{
  position:relative;
  overflow:hidden;
  padding:16px 16px 15px;
  border:1px solid var(--rule);
  border-radius:12px;
  background:#fff;
}
.criteria:before{
  content:"";
  position:absolute;
  top:0;bottom:0;left:0;
  width:3px;
  background:#111;
}
.criteria.avoid:before{background:#c9c5bf}
.criteria .mini{
  margin-bottom:7px;
  color:#aaa49c;
  font-size:9px;
  font-weight:800;
  letter-spacing:.1em;
}
.criteria h3{
  margin:0 0 5px;
  font:700 17px/1.16 var(--serif);
}
.criteria p{
  margin:0;
  color:#595650;
  font-size:12px;
}

.editor-note{
  position:relative;
  overflow:hidden;
  margin:24px 0;
  padding:19px 21px;
  border-radius:14px;
  background:linear-gradient(135deg,#1d1d1d 0%,#2b2326 100%);
  color:#fff;
}
.editor-note:after{
  content:"";
  position:absolute;
  top:-45px;right:-35px;
  width:130px;height:130px;
  border:25px solid rgba(234,113,141,.22);
  border-radius:50%;
}
.editor-note .label{
  position:relative;
  z-index:1;
  color:#e3dfda;
  font-size:9px;
  font-weight:800;
  letter-spacing:.1em;
}
.editor-note p{
  position:relative;
  z-index:1;
  max-width:610px;
  margin:7px 0 0;
  font:20px/1.34 var(--serif);
}

.rankings{padding-top:29px}
.rankings-intro{
  margin-bottom:18px;
  text-align:center;
}
.rankings-intro h2{
  margin:5px 0;
  font:700 36px/1.05 var(--serif);
}
.rankings-intro p{
  margin:0;
  color:#6e6a64;
  font-size:12px;
}
.product-list{
  display:grid;
  gap:22px;
}
.product-card{
  position:relative;
  overflow:hidden;
  border:1px solid var(--rule);
  border-radius:15px;
  background:#fff;
  box-shadow:0 7px 24px rgba(0,0,0,.045);
  content-visibility:auto;
  contain-intrinsic-size:700px;
}
.product-card.winner{
  border:2px solid #171717;
  box-shadow:0 10px 34px rgba(0,0,0,.07);
}
.product-topline{
  position:absolute;
  z-index:3;
  top:0;right:0;left:0;
  display:flex;
  justify-content:space-between;
  pointer-events:none;
}
.rank-tag,.pick-tag{
  padding:7px 10px;
  font-size:9px;
  font-weight:800;
  letter-spacing:.08em;
}
.rank-tag{background:#111;color:#fff}
.pick-tag{background:var(--green);color:#fff}

.product-main{
  display:grid;
  grid-template-columns:205px 1fr;
}
.product-image{
  display:grid;
  min-height:245px;
  place-items:center;
  padding:24px;
  border-right:1px solid var(--rule);
  background:linear-gradient(180deg,#fbfbfb 0%,#fff 100%);
}
.winner .product-image{
  background:
    radial-gradient(circle at top left,#ffe6ee 0%,#fff7fa 45%,#fff 100%);
}
.product-image img{
  max-height:200px;
  object-fit:contain;
}
.product-info{
  padding:27px 25px 20px;
}
.grade-line{
  display:flex;
  align-items:center;
  gap:9px;
  margin-bottom:8px;
}
.grade{
  display:grid;
  min-width:50px;
  height:39px;
  place-items:center;
  padding:0 10px;
  border-radius:9px;
  font:700 23px var(--serif);
}
.grade-green{
  background:var(--green);
  color:#fff;
  box-shadow:0 4px 12px rgba(35,131,76,.16);
}
.grade-gray{
  background:var(--gray-grade);
  color:#74716c;
}
.grade-copy{
  color:#817d76;
  font-size:9px;
  font-weight:800;
  letter-spacing:.07em;
}
.winner .grade-copy{color:var(--green)}
.product-info h2{
  margin:6px 0;
  font:700 27px/1.08 var(--serif);
}
.summary{
  margin:8px 0;
  color:#4f4c47;
  font-size:13px;
}
.price-line{
  margin:8px 0 12px;
  color:#817d76;
  font-size:10px;
}

.pros-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  border-top:1px solid var(--rule);
  background:linear-gradient(180deg,#fcfcfb 0%,#fff 100%);
}
.pros{
  padding:17px 20px;
}
.pros + .pros{border-left:1px solid var(--rule)}
.pros h3{
  display:flex;
  align-items:center;
  gap:7px;
  margin:0 0 8px;
  font:700 15px var(--serif);
}
.good h3 span{
  display:grid;
  width:21px;height:21px;
  place-items:center;
  border-radius:50%;
  background:var(--green-soft);
  color:var(--green);
  font:700 11px var(--sans);
}
.caution h3 span{
  display:grid;
  width:21px;height:21px;
  place-items:center;
  border-radius:50%;
  background:#efeeeb;
  color:#77736e;
  font:700 13px var(--sans);
}
.pros ul{
  margin:0;
  padding-left:17px;
  color:#5e5a54;
  font-size:11px;
}
.pros li{margin:5px 0}

.closer{
  border-top:1px solid var(--rule);
  background:
    linear-gradient(180deg,#fffafc 0%,#fff 100%);
}
.closer summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:48px;
  padding:12px 20px;
  cursor:pointer;
  list-style:none;
  color:#2d2c2a;
}
.closer summary::-webkit-details-marker{display:none}
.closer-title{
  font:700 16px var(--serif);
}
.closer-icon{
  display:grid;
  width:26px;height:26px;
  place-items:center;
  border-radius:50%;
  background:#f1f0ed;
  color:#55514c;
  font-size:17px;
  transition:transform .2s ease;
}
.closer[open] .closer-icon{transform:rotate(45deg)}
.closer-body{
  padding:0 20px 20px;
  color:#4f4c47;
  font-size:13px;
}
.closer-body p{margin:0 0 10px}
.who{
  margin-top:13px;
  padding:12px 13px;
  border-radius:9px;
  background:linear-gradient(180deg,var(--cream) 0%,#fff 100%);
  color:#57534d;
  font-size:12px;
}
.closer-cta{margin-top:14px}

.winner-strip{
  margin:30px 0 0;
  padding:24px;
  border:1px solid #f0d7dd;
  border-radius:15px;
  background:linear-gradient(135deg,#fff2f5,#fff8fb 50%,#fff);
}
.winner-strip h2{
  margin:5px 0 10px;
  font:700 29px/1.08 var(--serif);
}
.winner-strip p{
  margin:0;
  color:#4f4b46;
  font-size:13px;
}
.winner-points{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:15px;
}
.winner-point{
  padding:11px;
  border:1px solid #f0dfe3;
  border-radius:10px;
  background:rgba(255,255,255,.78);
  color:#514d48;
  font-size:11px;
}
.winner-point strong{
  display:block;
  margin-bottom:2px;
  font:700 14px var(--serif);
}

.method{
  margin-top:28px;
  padding-top:28px;
  border-top:1px solid var(--rule);
}
.method h2{
  margin:4px 0 8px;
  font:700 31px/1.08 var(--serif);
}
.method-intro{
  margin:0 0 15px;
  color:#5d5953;
  font-size:13px;
}
.method-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:9px;
  margin:15px 0;
}
.method-card{
  padding:14px;
  border:1px solid var(--rule);
  border-radius:11px;
  background:
    linear-gradient(180deg,#fffaf7 0%,#fff 100%);
}
.method-card strong{
  display:block;
  margin-bottom:4px;
  font:700 15px var(--serif);
}
.method-card span{
  color:#625e58;
  font-size:11px;
}
.source-list{
  margin:15px 0 0;
  padding-left:18px;
  color:#68645e;
  font-size:11px;
}
.source-list li{margin:6px 0}
.source-list a{text-underline-offset:3px}

.final-offer{
  display:grid;
  grid-template-columns:1fr 175px;
  gap:20px;
  align-items:center;
  margin-top:27px;
  padding:24px;
  border-radius:15px;
  background:linear-gradient(135deg,#181818 0%,#241f21 100%);
  color:#fff;
}
.final-offer h2{
  margin:5px 0 8px;
  font:700 29px/1.08 var(--serif);
}
.final-offer p{
  margin:0 0 12px;
  color:#ddd8d2;
  font-size:12px;
}
.final-offer img{
  max-height:155px;
  margin:auto;
  padding:10px;
  border-radius:10px;
  background:#fff;
}
.final-offer .primary-btn{
  border-color:#fff;
  background:#fff;
  color:#111;
}

.sidebar-card{
  overflow:hidden;
  border:1px solid var(--rule);
  border-radius:15px;
  background:#fff;
  box-shadow:0 12px 34px rgba(0,0,0,.075);
}
.sidebar-head{
  padding:11px 15px;
  background:#111;
  color:#fff;
  font-size:9px;
  font-weight:800;
  letter-spacing:.1em;
  text-align:center;
}
.sidebar-body{padding:17px}
.sidebar-product{
  height:145px;
  margin:auto;
  object-fit:contain;
}
.sidebar-grade{
  display:flex;
  align-items:center;
  gap:10px;
  margin:9px 0;
}
.sidebar-grade strong{
  display:grid;
  width:46px;height:46px;
  place-items:center;
  border-radius:11px;
  background:var(--green);
  color:#fff;
  font:700 24px var(--serif);
}
.sidebar-grade span{
  color:#65615b;
  font-size:11px;
}
.sidebar-card h3{
  margin:8px 0 9px;
  font:700 20px/1.12 var(--serif);
}
.sidebar-price{
  margin:0 0 10px;
  color:#55514c;
  font-size:11px;
}
.sidebar-offer{
  margin:0 0 10px;
  padding:8px 9px;
  border-radius:8px;
  background:var(--green-soft);
  color:#216c41;
  font-size:10px;
  font-weight:800;
}
.sidebar-trust{
  margin:0 0 12px;
  padding:0;
  list-style:none;
}
.sidebar-trust li{
  padding:6px 0;
  border-bottom:1px solid #eeeae5;
  color:#5e5a54;
  font-size:11px;
}
.sidebar-trust li:before{
  content:"";
  display:inline-block;
  width:7px;
  height:7px;
  margin-right:8px;
  border-radius:999px;
  background:var(--green);
  vertical-align:middle;
}
.sidebar-note{
  margin-top:8px;
  color:#98938c;
  font-size:9px;
  text-align:center;
}

.footer{
  padding:26px 0 36px;
  border-top:1px solid var(--rule);
  text-align:center;
}
.sponsored{
  margin-bottom:12px;
  color:#9c9891;
  font-size:8px;
  letter-spacing:.12em;
}
.footer-actions{
  display:flex;
  justify-content:center;
  gap:24px;
}
.footer-actions button{
  appearance:none;
  padding:0;
  border:0;
  background:none;
  color:#55514c;
  cursor:pointer;
  font-size:10px;
  font-weight:800;
  letter-spacing:.06em;
  text-decoration:underline;
  text-underline-offset:4px;
}
.copyright{
  margin-top:17px;
  color:#aaa59d;
  font-size:9px;
}

.modal-backdrop{
  position:fixed;
  z-index:2000;
  inset:0;
  display:none;
  align-items:flex-end;
  justify-content:center;
  padding:18px;
  background:rgba(0,0,0,.5);
}
.modal-backdrop.open{display:flex}
.modal{
  width:min(560px,100%);
  max-height:78vh;
  overflow:auto;
  padding:21px;
  border-radius:16px;
  background:#fff;
  box-shadow:0 20px 60px rgba(0,0,0,.25);
}
.modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  padding-bottom:11px;
  border-bottom:1px solid var(--rule);
}
.modal h2{
  margin:0;
  font:700 23px var(--serif);
}
.modal-close{
  display:grid;
  width:32px;height:32px;
  place-items:center;
  border:0;
  border-radius:50%;
  background:#f1f0ed;
  cursor:pointer;
  font-size:18px;
}
.modal p{
  color:#55514c;
  font-size:12px;
}
.modal a{
  font-weight:700;
  text-underline-offset:3px;
}

@media (max-width:900px){
  body{padding-top:60px}
  .desktop-header{display:none}
  .mobile-bar{
    position:fixed;
    z-index:1000;
    top:0;right:0;left:0;
    display:flex;
    min-height:60px;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:7px 10px 7px 12px;
    border-bottom:1px solid #dcd8d2;
    background:rgba(255,255,255,.97);
    backdrop-filter:blur(10px);
    box-shadow:0 3px 14px rgba(0,0,0,.06);
  }
  .mobile-logo{width:116px;height:auto}
  .mobile-cta{
    display:flex;
    align-items:center;
    gap:7px;
    min-height:40px;
    padding:6px 11px 6px 8px;
    border:1px solid #efd5dd;
    border-radius:10px;
    background:linear-gradient(180deg,#fff7fa 0%,#fff 100%);
    color:#8f4960;
    text-decoration:none;
    box-shadow:0 3px 10px rgba(217,79,112,.08);
  }
  .mobile-grade{
    display:grid;
    width:28px;height:28px;
    place-items:center;
    border-radius:8px;
    background:var(--green);
    color:#fff;
    font:700 15px var(--serif);
  }
  .mobile-cta-copy{
    display:block;
    line-height:1.05;
  }
  .mobile-cta-copy small{
    display:block;
    margin-bottom:3px;
    font-size:6px;
    font-weight:800;
    letter-spacing:.08em;
    opacity:.82;
  }
  .mobile-cta-copy strong{
    display:block;
    font-size:9px;
    letter-spacing:.035em;
  }
  .page-grid{
    display:block;
    padding:19px 0 40px;
  }
  .sidebar{display:none}
  .article{
    width:min(680px,100%);
    margin:auto;
  }
  .hero h1{font-size:39px}
  .dek{font-size:17px}
  .hero-compare-head strong{font-size:17px}
  .quick-grid{grid-template-columns:125px 1fr}
  .quick-image{padding:11px}
  .quick-image img{max-height:130px}
  .quick-copy{padding:14px}
  .quick-copy h2{font-size:22px}
  .grade-big{width:44px;height:44px;font-size:23px}
  .trust-row{gap:5px}
  .product-main{grid-template-columns:132px 1fr}
  .product-image{min-height:205px;padding:15px}
  .product-image img{max-height:158px}
  .product-info{padding:24px 15px 15px}
  .product-info h2{font-size:22px}
  .grade{min-width:45px;height:34px;font-size:20px}
  .method-grid{grid-template-columns:1fr}
  .final-offer{grid-template-columns:1fr 125px}
}
@media (max-width:560px){
  .container{
    width:min(calc(100% - 24px),1080px);
  }
  .hero{padding-top:2px}
  .hero h1{font-size:35px}
  .jump-nav{margin-top:17px;padding:9px}
  .jump-links{
    grid-template-columns:1fr 1fr;
    gap:6px;
  }
  .jump-links a{
    min-height:38px;
    font-size:9px;
  }
  .hero-compare-head{
    flex-direction:column;
    align-items:flex-start;
  }
  .quick-grid{grid-template-columns:105px 1fr}
  .quick-ribbon{font-size:8px}
  .quick-copy{padding:13px 12px}
  .quick-copy h2{font-size:20px}
  .quick-copy p{font-size:12px}
  .offer-pill{font-size:9px}
  .trust-chip{font-size:8px}
  .section{padding:23px 0}
  .section-head{
    grid-template-columns:45px 1fr;
    gap:11px;
  }
  .section-number{
    width:43px;height:43px;
    border-radius:11px;
    font-size:15px;
  }
  .section-title h2{font-size:28px}
  .criteria-grid{grid-template-columns:1fr}
  .editor-note{padding:17px}
  .editor-note p{font-size:18px}
  .rankings-intro h2{font-size:31px}
  .product-main{grid-template-columns:108px 1fr}
  .product-image{min-height:182px;padding:11px}
  .product-image img{max-height:142px}
  .product-info{padding:21px 12px 13px}
  .product-info h2{font-size:20px}
  .summary{font-size:12px}
  .price-line{font-size:9px}
  .primary-btn{
    width:100%;
    min-height:42px;
    padding:10px 8px;
    text-align:center;
  }
  .secondary-link{font-size:9px}
  .pros-grid{grid-template-columns:1fr}
  .pros + .pros{
    border-top:1px solid var(--rule);
    border-left:0;
  }
  .pros{padding:15px 17px}
  .closer summary{padding:12px 17px}
  .closer-body{padding:0 17px 17px}
  .winner-points{grid-template-columns:1fr}
  .final-offer{grid-template-columns:1fr}
  .final-offer img{max-height:145px}
  .mobile-logo{width:110px}
}

/* ===== EDITORIAL / CONVERSION REFINEMENT ===== */
body{
  background:#fff;
  color:#202124;
  font-size:16px;
  line-height:1.65;
}
.container{
  width:min(1120px,calc(100% - 40px));
}
.desktop-header{
  background:#fff;
  border-bottom:1px solid #d9d9d9;
}
.desktop-header .container{min-height:58px}
.desktop-logo{width:196px}
.desktop-disclosure{
  font-size:12px;
  color:#555;
}
.page-grid{
  grid-template-columns:minmax(0,760px) 280px;
  gap:40px;
  padding-top:34px;
}
.hero{
  padding:0 0 18px;
}
.breadcrumb{
  margin-bottom:14px;
  color:#6b6b6b;
  font-size:13px;
}
.breadcrumb span{
  padding:0 5px;
  color:#aaa;
}
.hero .eyebrow{
  color:#5e6b62;
  font-size:11px;
  letter-spacing:.08em;
}
.hero h1{
  max-width:720px;
  margin:8px 0 14px;
  font-size:48px;
  line-height:1.05;
  letter-spacing:-.025em;
}
.dek{
  max-width:710px;
  color:#444;
  font-size:19px;
  line-height:1.5;
}
.byline{
  margin-top:16px;
  color:#626262;
  font-size:13px;
}
.byline-mark{
  width:30px;
  height:30px;
  border:1px solid #ddd;
  background:#fff;
  color:#444;
}
.byline a{
  color:#555;
  text-underline-offset:2px;
}

.jump-nav{
  margin:18px 0 24px;
  padding:10px 0;
  border:0;
  border-top:1px solid #ddd;
  border-bottom:1px solid #ddd;
  border-radius:0;
  background:#fff;
  box-shadow:none;
}
.jump-label{display:none}
.jump-links{gap:4px}
.jump-links a{
  min-height:36px;
  padding:7px;
  border:0;
  border-radius:0;
  background:#fff;
  color:#333;
  font-size:12px;
}
.jump-links a:hover{
  text-decoration:underline;
  transform:none;
}
.jump-links span{color:#2f6f49}

.hero-compare{
  margin-bottom:14px;
  border:1px solid #ddd;
  border-radius:4px;
  box-shadow:none;
}
.hero-compare-head{
  padding:10px 12px;
  background:#f7f7f7;
  border-bottom:1px solid #ddd;
}
.hero-compare-head strong{
  font-family:var(--sans);
  font-size:15px;
}
.hero-compare-head span{font-size:12px}

.quick-verdict{
  margin:0 0 30px;
  padding:12px 0;
  border-bottom:1px solid #ddd;
  color:#444;
  font-size:15px;
}
.quick-verdict strong{color:#202124}
.quick-verdict a{
  margin-left:5px;
  color:#2f6f49;
  font-weight:700;
  text-underline-offset:2px;
}

.section,
.section.soft,
.section.color-wash{
  margin-left:0;
  margin-right:0;
  padding:30px 0;
  border-top:1px solid #ddd;
  border-radius:0;
  background:#fff;
}
.section-head{
  grid-template-columns:46px 1fr;
  gap:12px;
}
.section-number{
  width:40px;
  height:40px;
  border-radius:3px;
  background:#333;
  font-family:var(--sans);
  font-size:14px;
}
.section-number.blush{
  border:0;
  background:#f1f1f1;
  color:#555;
}
.section-title h2{
  margin-top:0;
  font-size:30px;
}
.section-title p{
  color:#555;
  font-size:15px;
}
.criteria-grid{gap:0}
.criteria{
  padding:16px 18px;
  border:0;
  border-top:1px solid #e3e3e3;
  border-radius:0;
  background:#fff;
}
.criteria:nth-child(odd){
  border-right:1px solid #e3e3e3;
}
.criteria:before{display:none}
.criteria .mini{
  margin-bottom:4px;
  color:#6b6b6b;
  font-size:10px;
}
.criteria h3{
  font-size:17px;
}
.criteria p{
  color:#505050;
  font-size:14px;
}

.editor-note{
  margin:24px 0 30px;
  padding:18px 20px;
  border-left:4px solid #3b6f4d;
  border-radius:0;
  background:#f7f7f5;
  color:#222;
}
.editor-note:after{display:none}
.editor-note .label{
  color:#5b665e;
  font-size:10px;
}
.editor-note p{
  max-width:680px;
  font-size:18px;
  line-height:1.45;
}

.rankings{padding-top:12px}
.rankings-intro{
  margin-bottom:20px;
  text-align:left;
}
.rankings-intro h2{
  font-size:34px;
}
.rankings-intro p{
  color:#555;
  font-size:14px;
}

.product-list{gap:26px}
.product-card,
.product-card.winner{
  border:1px solid #d8d8d8;
  border-radius:5px;
  box-shadow:none;
}
.product-card.winner{
  border-top:4px solid #2f6f49;
}
.rank-tag,.pick-tag{
  padding:6px 9px;
  font-size:10px;
}
.pick-tag{background:#2f6f49}
.product-image{
  border-right:1px solid #ddd;
  background:#fafafa;
}
.winner .product-image{
  background:#fafafa;
}
.product-info{
  padding:28px 24px 20px;
}
.grade{
  border-radius:3px;
}
.grade-green{background:#2f6f49;box-shadow:none}
.grade-gray{background:#eee}
.grade-copy{font-size:10px}
.product-info h2{
  font-size:26px;
}
.summary{
  color:#414141;
  font-size:15px;
  line-height:1.55;
}
.price-line{
  color:#656565;
  font-size:12px;
}
.primary-btn{
  min-height:42px;
  border-radius:3px;
  font-size:12px;
  letter-spacing:.04em;
  box-shadow:none;
}
.secondary-link{
  color:#4f4f4f;
  font-size:12px;
}

.pros-grid{
  border-top:1px solid #ddd;
  background:#fff;
}
.pros{
  padding:18px 20px;
}
.pros + .pros{border-left:1px solid #ddd}
.pros h3{
  font-size:16px;
}
.pros ul{
  color:#444;
  font-size:14px;
  line-height:1.5;
}
.good h3 span{
  background:#edf6f0;
  color:#2f6f49;
}
.caution h3 span{
  background:#fff0f0;
  color:#c73b3b;
}

.closer{
  border-top:1px solid #ddd;
  background:#fff;
}
.closer summary{
  min-height:52px;
  padding:13px 20px;
}
.closer-title{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:16px;
}
.closer-magnify{
  width:17px;
  height:17px;
  fill:none;
  stroke:#333;
  stroke-width:1.8;
  stroke-linecap:round;
}
.closer-icon{
  background:#f1f1f1;
}
.closer-body{
  color:#404040;
  font-size:15px;
  line-height:1.6;
}
.who{
  border-radius:3px;
  background:#f7f7f7;
  font-size:14px;
}

.winner-strip{
  margin-top:34px;
  padding:22px 0;
  border:0;
  border-top:2px solid #333;
  border-bottom:1px solid #ddd;
  border-radius:0;
  background:#fff;
}
.winner-strip h2{font-size:28px}
.winner-strip p{font-size:15px}
.winner-points{gap:0}
.winner-point{
  padding:12px 14px;
  border:0;
  border-top:1px solid #e2e2e2;
  border-radius:0;
  background:#fff;
  font-size:13px;
}
.winner-point:nth-child(odd){
  border-right:1px solid #e2e2e2;
}

.method{
  border-top:1px solid #ddd;
}
.method h2{font-size:29px}
.method-intro{font-size:14px}
.method-grid{gap:0}
.method-card{
  border:1px solid #ddd;
  border-radius:0;
  background:#fff;
}
.method-card + .method-card{border-left:0}
.method-card span{font-size:12px}
.source-list{font-size:12px}

.sidebar-card{
  border:1px solid #d8d8d8;
  border-radius:5px;
  box-shadow:none;
}
.sidebar-head{
  background:#f1f1f1;
  color:#333;
}
.sidebar-grade strong{
  border-radius:3px;
  background:#2f6f49;
  box-shadow:none;
}
.sidebar-offer{
  border-radius:3px;
  background:#edf6f0;
}
.sidebar-note{font-size:10px}

.final-offer{
  border-radius:5px;
  background:#f5f5f3;
  color:#222;
}
.final-offer p{color:#444;font-size:14px}
.final-offer .eyebrow{color:#666 !important}
.final-offer .primary-btn{
  border-color:#2f6f49;
  background:#2f6f49;
  color:#fff;
}

.modal-backdrop{
  align-items:center;
}
.modal{
  width:min(600px,calc(100% - 28px));
  max-height:80vh;
  border-radius:6px;
}

@media (max-width:900px){
  body{
    padding-top:58px;
    font-size:16px;
  }
  .mobile-bar{
    min-height:58px;
    padding:8px 12px;
    border-bottom:1px solid #d7d7d7;
    background:#fff;
    box-shadow:none;
    backdrop-filter:none;
  }
  .mobile-logo{width:118px}
  .mobile-cta{
    display:inline-flex;
    min-height:36px;
    align-items:center;
    justify-content:center;
    padding:7px 12px;
    border:1px solid #2f6f49;
    border-radius:4px;
    background:#fff;
    color:#2f6f49;
    font-size:12px;
    font-weight:800;
    line-height:1;
    text-decoration:none;
    box-shadow:none;
  }
  .page-grid{padding-top:22px}
  .hero h1{font-size:39px}
  .dek{font-size:18px}
  .product-main{grid-template-columns:150px 1fr}
  .product-info h2{font-size:24px}
  .summary{font-size:15px}
  .pros ul{font-size:14px}
  .closer-body{font-size:15px}
}
@media (max-width:560px){
  .container{
    width:min(calc(100% - 28px),1080px);
  }
  .breadcrumb{
    margin-bottom:10px;
    font-size:12px;
  }
  .hero h1{
    font-size:34px;
    line-height:1.08;
  }
  .dek{
    font-size:18px;
    line-height:1.5;
  }
  .byline{
    align-items:flex-start;
    font-size:12px;
    line-height:1.45;
  }
  .jump-links{
    grid-template-columns:1fr 1fr;
  }
  .jump-links a{
    justify-content:flex-start;
    font-size:11px;
  }
  .hero-compare-head strong{font-size:14px}
  .hero-compare-head span{font-size:11px}
  .quick-verdict{
    font-size:14px;
    line-height:1.55;
  }
  .section-title h2{font-size:27px}
  .section-title p{font-size:15px}
  .criteria h3{font-size:17px}
  .criteria p{font-size:15px}
  .editor-note p{font-size:17px}
  .rankings-intro h2{font-size:30px}
  .rankings-intro p{font-size:14px}
  .product-main{
    grid-template-columns:1fr;
  }
  .product-image{
    min-height:220px;
    border-right:0;
    border-bottom:1px solid #ddd;
  }
  .product-image img{max-height:190px}
  .product-info{
    padding:24px 18px 17px;
  }
  .product-info h2{
    font-size:24px;
    line-height:1.12;
  }
  .summary{
    font-size:16px;
    line-height:1.55;
  }
  .price-line{font-size:12px}
  .primary-btn{
    width:auto;
    min-width:155px;
    font-size:12px;
  }
  .pros{padding:17px 18px}
  .pros h3{font-size:16px}
  .pros ul{
    padding-left:19px;
    font-size:15px;
  }
  .closer summary{padding:14px 18px}
  .closer-title{font-size:16px}
  .closer-body{
    padding:0 18px 18px;
    font-size:15px;
  }
  .who{font-size:14px}
  .winner-points{grid-template-columns:1fr}
  .winner-point:nth-child(odd){border-right:0}
  .method-intro{font-size:15px}
  .method-card strong{font-size:16px}
  .method-card span{font-size:14px}
  .source-list{font-size:13px}
  .final-offer{padding:20px}
  .final-offer h2{font-size:27px}
  .final-offer p{font-size:15px}
}


/* ===== FINAL MOBILE + ICON FIXES ===== */
.jump-links{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
}
.jump-links a{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  min-height:48px;
  padding:10px 12px;
  border:1px solid #dddddd;
  border-radius:6px;
  background:#fff;
  color:#2a2a2a;
  text-decoration:none;
}
.jump-links a:hover{
  border-color:#c9c9c9;
  text-decoration:none;
}
.jump-num{
  flex:0 0 28px;
  width:28px;
  height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:#2f6f49;
  color:#fff;
  font-size:11px;
  font-weight:800;
  line-height:1;
}
.jump-text{
  display:block;
  font-size:12px;
  font-weight:800;
  line-height:1.2;
  text-align:left;
}
.jump-links span{margin:0;color:inherit}

.pros h3{
  display:flex;
  align-items:center;
  gap:8px;
}
.pros-icon{
  width:22px;
  height:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  font-size:14px;
  font-weight:800;
  line-height:1;
}
.good-icon{
  background:#edf6f0;
  color:#2f6f49;
}
.caution-icon{
  background:#fff0f0;
  color:#c73b3b;
}

.winner-strip .eyebrow{
  margin-bottom:8px;
  color:#2f6f49;
  font-size:13px;
  font-weight:800;
  letter-spacing:.08em;
}
.winner-strip h2{
  margin:0 0 10px;
  font-size:34px;
  line-height:1.08;
}

.quick-verdict a{
  white-space:nowrap;
}

.primary-btn span,
.secondary-link span{
  display:none;
}

@media (max-width: 900px){
  .jump-links{
    grid-template-columns:1fr 1fr;
  }
  .jump-links a{
    min-height:54px;
    padding:12px;
  }
  .jump-num{
    width:30px;
    height:30px;
    font-size:11px;
  }
  .jump-text{
    font-size:12px;
  }
  .hero-compare-head{
    display:block;
  }
  .hero-compare-head span{
    display:block;
    margin-top:4px;
  }
  .quick-verdict{
    font-size:15px;
    line-height:1.6;
  }
  .winner-strip .eyebrow{
    font-size:12px;
  }
  .winner-strip h2{
    font-size:28px;
  }
  .sidebar-trust li{
    font-size:12px;
  }
}

@media (max-width: 560px){
  .jump-nav{
    margin:16px 0 20px;
  }
  .jump-links{
    grid-template-columns:1fr;
    gap:8px;
  }
  .jump-links a{
    min-height:52px;
    padding:11px 12px;
    border-radius:5px;
  }
  .jump-num{
    width:30px;
    height:30px;
  }
  .jump-text{
    font-size:13px;
  }
  .section-title .eyebrow,
  .rankings-intro .eyebrow,
  .method .eyebrow,
  .winner-strip .eyebrow{
    font-size:12px;
    letter-spacing:.08em;
  }
  .section-title h2,
  .winner-strip h2{
    line-height:1.12;
  }
  .criteria{
    padding:18px;
  }
  .criteria .mini{
    font-size:11px;
  }
  .criteria h3{
    font-size:18px;
    line-height:1.28;
  }
  .criteria p{
    font-size:15px;
    line-height:1.55;
  }
  .product-info h2{
    font-size:25px;
  }
  .primary-btn{
    width:100%;
    min-height:46px;
  }
  .secondary-link{
    font-size:13px;
  }
}


/* ===== FINAL CLEANUP V2 ===== */
.sponsored-trigger,
.sponsored-inline{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:30px;
  padding:6px 10px;
  border:1px solid #e7d6b2;
  border-radius:999px;
  background:#fff6df;
  color:#72561d;
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-decoration:none;
}
.sponsored-inline{margin:0 0 12px}
.desktop-disclosure.sponsored-trigger{font-size:10px}
.breadcrumb{
  font-size:13px;
}
.breadcrumb span{
  color:#a8a8a8;
}
.hero .eyebrow{
  margin-top:2px;
  font-size:14px;
  color:#7b6a56;
}
.byline{
  gap:12px;
  color:#5f656b;
  font-size:13px;
}
.byline-mark{
  border-color:#ead9df;
  background:#fff0f4;
  color:#a14d64;
}
.byline-sep{
  color:#a7adb2;
  padding:0 6px;
}
.byline a{color:#4b5965}

.jump-nav{
  border-radius:8px;
  background:#fcf8fa;
  border:1px solid #e7dee3;
}
.jump-label{
  display:block;
  margin-bottom:12px;
  color:#8a775d;
  font-size:12px;
  font-weight:800;
  letter-spacing:.12em;
}
.jump-links{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
}
.jump-links a{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:54px;
  padding:12px 14px;
  border:1px solid #ddd0d8;
  border-radius:14px;
  background:#fff;
  color:#2a2a2a;
  text-decoration:none;
}
.jump-links a:hover{border-color:#d0bfc9}
.jump-num{display:none!important}
.jump-text{
  display:inline-block;
  font-size:12px;
  font-weight:800;
  letter-spacing:.02em;
}
.jump-arrow{
  display:inline-block;
  color:#e06d8c;
  font-size:15px;
  line-height:1;
}

.criteria{
  display:grid;
  grid-template-columns:42px 1fr;
  gap:16px;
  align-items:flex-start;
}
.criteria-copy{min-width:0}
.criteria-index{
  width:42px;
  height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:#2f6f49;
  color:#fff;
  font-size:13px;
  font-weight:800;
  line-height:1;
}
.criteria.avoid .criteria-index{background:#2f6f49}
.criteria .mini{
  margin-bottom:6px;
}
.criteria h3{
  margin:0 0 8px;
}
.compare-at{
  margin-left:8px;
  color:#807a74;
  font-size:.92em;
  text-decoration:line-through;
}
.primary-btn-cta,
.mobile-cta{
  background:#2f6f49 !important;
  border-color:#2f6f49 !important;
  color:#fff !important;
}
.primary-btn-cta:hover,
.mobile-cta:hover{
  filter:brightness(.96);
}
.btn-arrow{display:inline-block;margin-left:8px}
.sidebar .primary-btn-cta{box-shadow:0 8px 18px rgba(47,111,73,.16)}

.modal p{font-size:15px;line-height:1.6}
.footer .sponsored{font-weight:800;letter-spacing:.08em}

@media (max-width:900px){
  .desktop-disclosure.sponsored-trigger{display:none}
  .jump-links{grid-template-columns:1fr 1fr}
  .jump-links a{min-height:50px;border-radius:12px}
  .criteria{grid-template-columns:38px 1fr;gap:14px}
  .criteria-index{width:38px;height:38px;font-size:12px}
}
@media (max-width:560px){
  .hero .eyebrow{font-size:13px}
  .sponsored-inline{font-size:10px;padding:6px 9px}
  .byline{gap:10px;font-size:12px;line-height:1.5}
  .byline-sep{padding:0 4px}
  .jump-nav{padding:14px}
  .jump-links{grid-template-columns:1fr;gap:8px}
  .jump-links a{justify-content:space-between;min-height:48px;padding:11px 14px;border-radius:10px}
  .jump-text{font-size:13px}
  .criteria{grid-template-columns:34px 1fr;gap:12px;padding:18px}
  .criteria-index{width:34px;height:34px;font-size:11px}
  .primary-btn-cta,.mobile-cta{min-height:46px}
}


/* ===== EDITORIAL COLOR + HIERARCHY PASS V4 ===== */
:root{
  --logo-pink:#e6849a;
  --logo-pink-deep:#c95f78;
  --logo-pink-soft:#fff1f4;
  --warm-cream:#fbf7ee;
  --warm-gold:#9b7544;
  --soft-lilac:#f8f3f8;
  --charcoal:#29272a;
}

/* Keep the masthead editorial and uncluttered. */
.desktop-header .container{
  justify-content:flex-start;
}

/* Disclosure remains prominent enough to notice, but reads like editorial metadata. */
.sponsored-inline{
  display:inline-block;
  min-height:0;
  margin:4px 0 18px;
  padding:7px 10px 7px 12px;
  border:0;
  border-left:3px solid var(--logo-pink);
  border-radius:0;
  background:#fffaf7;
  color:#7a6551;
  font-size:11px;
  font-weight:800;
  letter-spacing:.09em;
  line-height:1.25;
}

/* Eyebrows should read as real editorial labels, not tiny metadata. */
.eyebrow,
.section-title .eyebrow,
.rankings-intro .eyebrow,
.method .eyebrow,
.winner-strip .eyebrow{
  font-size:13px;
  font-weight:800;
  letter-spacing:.12em;
  line-height:1.25;
}
.hero .eyebrow{
  font-size:15px;
  color:#806a55;
}
.criteria .mini,
.editor-note .label{
  font-size:12px;
  font-weight:800;
  letter-spacing:.12em;
}

/* Quick jump: roomy, simple editorial utility navigation. */
.jump-nav{
  margin:22px 0 30px;
  padding:20px;
  border:1px solid #eadde2;
  border-radius:12px;
  background:linear-gradient(135deg,#fff8fa 0%,#fffdfb 100%);
}
.jump-label{
  margin:0 0 14px;
  color:#8a6e59;
  font-size:13px;
  letter-spacing:.13em;
}
.jump-links{
  gap:12px;
}
.jump-links a{
  min-height:58px;
  padding:14px 18px;
  border:1px solid #e4d5db;
  border-radius:12px;
  background:#fff;
  box-shadow:0 1px 0 rgba(33,25,28,.02);
}
.jump-links a:hover{
  border-color:#d9b9c3;
  background:#fffafb;
}
.jump-text{
  font-size:13px;
}
.jump-arrow{
  color:var(--logo-pink-deep);
  font-size:17px;
  font-weight:800;
}

/* Main section markers are intentionally larger than the numbered criteria beneath them. */
.section-number,
.section-number.blush{
  width:58px;
  height:58px;
  border-radius:7px;
  font-size:16px;
  font-weight:800;
  box-shadow:none;
}
.section-number{
  background:var(--charcoal);
  color:#fff;
}
.section-number.blush{
  background:var(--logo-pink-soft);
  border:1px solid #f1cad4;
  color:var(--logo-pink-deep);
}
.section-head{
  grid-template-columns:58px 1fr;
  gap:20px;
  align-items:flex-start;
}

/* Criterion numbers use the logo pink rather than the CTA green. */
.criteria-index,
.criteria.avoid .criteria-index{
  width:42px;
  height:42px;
  background:var(--logo-pink);
  color:#fff;
  box-shadow:0 0 0 4px var(--logo-pink-soft);
}
.criteria{
  grid-template-columns:46px 1fr;
  gap:18px;
  padding:22px 22px;
}
.criteria:nth-child(1),
.criteria:nth-child(4){
  background:#fffdfb;
}
.criteria:nth-child(2),
.criteria:nth-child(3){
  background:#fff9fb;
}
.criteria.avoid:nth-child(1),
.criteria.avoid:nth-child(4){
  background:#fffaf7;
}
.criteria.avoid:nth-child(2),
.criteria.avoid:nth-child(3){
  background:#fff6f8;
}
.criteria h3{
  font-size:18px;
}
.criteria p{
  color:#4d4a47;
}

/* Add restrained magazine color without turning the page into a landing page. */
.section.soft{
  background:linear-gradient(180deg,#fff 0%,#fffdfb 100%);
}
.section.color-wash{
  background:linear-gradient(180deg,#fff 0%,#fff9fb 100%);
}
.editor-note{
  border-left-color:var(--logo-pink-deep);
  background:#fff6f8;
}
.editor-note .label{
  color:var(--logo-pink-deep);
}
.rankings-intro .eyebrow{
  color:var(--logo-pink-deep);
}
.winner-strip{
  border-top:3px solid #2f6f49;
  background:linear-gradient(135deg,#f6fbf7 0%,#fff 70%);
}
.winner-strip .eyebrow{
  color:#2f6f49;
}
.method{
  background:linear-gradient(180deg,#fff 0%,#fbf8f2 100%);
}
.method .eyebrow{
  color:#8b6e49;
}
.method-card:nth-child(1){background:#fffaf4}
.method-card:nth-child(2){background:#fff7fa}
.method-card:nth-child(3){background:#f8fbf8}

/* Small polish. */
.breadcrumb{
  color:#666;
}
.byline-mark{
  background:var(--logo-pink-soft);
  border-color:#f1cad4;
  color:var(--logo-pink-deep);
}

/* Restore the darker editorial note treatment. */
.editor-note{
  position:relative;
  overflow:hidden;
  margin:24px 0 30px;
  padding:22px 28px;
  border:0;
  border-radius:18px;
  background:linear-gradient(135deg,#181617 0%,#262024 55%,#4a2e39 100%);
  color:#fff;
  box-shadow:0 10px 22px rgba(25,20,22,.10);
}
.editor-note:after{
  content:"";
  display:block;
  position:absolute;
  top:-34px;
  right:-18px;
  width:190px;
  height:190px;
  border:30px solid rgba(223,120,144,.22);
  border-radius:50%;
}
.editor-note .label{
  position:relative;
  z-index:1;
  color:#f0ece6;
}
.editor-note p{
  position:relative;
  z-index:1;
  max-width:930px;
  margin:8px 0 0;
  color:#fff;
  font-size:26px;
  line-height:1.35;
}
.editor-note p strong{font-weight:700}

/* Make formula stand apart more clearly. */
.method-card:nth-child(1){
  background:linear-gradient(180deg,#fff2d8 0%,#fff8ea 100%);
  border-color:#ecd7a7;
}

/* Softer top closer callout with experience-first framing. */
.mechanism-callout{
  padding:15px 17px;
  border-color:#eed7de;
  background:linear-gradient(135deg,#fff7f9 0%,#fff 100%);
}
.mechanism-callout span{color:#a05d70}
.mechanism-callout strong{
  font-size:20px;
  line-height:1.16;
}
.mechanism-callout p{
  font-size:15px;
  line-height:1.58;
}

.subtle-buy-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:12px;
  color:#2f6f49;
  font-size:15px;
  font-weight:700;
  text-decoration:none;
}
.subtle-buy-link:hover{text-decoration:underline}
.subtle-buy-link span{font-size:18px;line-height:1}

@media (max-width:900px){
  .section-head{
    grid-template-columns:52px 1fr;
    gap:16px;
  }
  .section-number,
  .section-number.blush{
    width:52px;
    height:52px;
    font-size:15px;
  }
  .criteria{
    grid-template-columns:42px 1fr;
    gap:15px;
  }
  .criteria-index,
  .criteria.avoid .criteria-index{
    width:38px;
    height:38px;
    font-size:12px;
  }
}

@media (max-width:560px){
  .sponsored-inline{
    margin-bottom:15px;
    padding:6px 8px 6px 10px;
    font-size:10px;
  }
  .hero .eyebrow{
    font-size:14px;
  }
  .eyebrow,
  .section-title .eyebrow,
  .rankings-intro .eyebrow,
  .method .eyebrow,
  .winner-strip .eyebrow{
    font-size:12px;
  }
  .jump-nav{
    margin:18px 0 24px;
    padding:16px;
  }
  .jump-label{
    margin-bottom:12px;
    font-size:12px;
  }
  .jump-links a{
    min-height:52px;
    padding:12px 14px;
  }
  .section-head{
    grid-template-columns:48px 1fr;
    gap:13px;
  }
  .section-number,
  .section-number.blush{
    width:48px;
    height:48px;
    font-size:14px;
  }
  .criteria{
    grid-template-columns:36px 1fr;
    gap:12px;
    padding:18px 16px;
  }
  .criteria-index,
  .criteria.avoid .criteria-index{
    width:34px;
    height:34px;
    font-size:11px;
    box-shadow:0 0 0 3px var(--logo-pink-soft);
  }
  .criteria .mini,
  .editor-note .label{
    font-size:11px;
  }
}


/* ===== V5 BLOG / MOBILE / MECHANISM REFINEMENT ===== */
:root{
  --look-green-bg:#f1f8f3;
  --look-green-bg-2:#f7fbf8;
  --look-green-border:#cfe3d5;
  --look-green-accent:#5f8f72;
  --avoid-red-bg:#fff3f2;
  --avoid-red-bg-2:#fff8f7;
  --avoid-red-border:#efd0cd;
  --avoid-red-accent:#b96762;
  --number-pink:#df7890;
  --number-pink-soft:#fff0f4;
  --ink-soft:#474247;
}

/* More readable editorial scale throughout. */
body{font-size:17px;line-height:1.68}
.dek{font-size:20px;line-height:1.55}
.byline{font-size:14px}
.quick-verdict{font-size:16px;line-height:1.65}
.section-title h2{font-size:34px;line-height:1.12}
.section-title p{font-size:17px;line-height:1.6}
.criteria h3{font-size:20px;line-height:1.25}
.criteria p{font-size:16.5px;line-height:1.62}
.summary{font-size:16.5px;line-height:1.62}
.pros ul{font-size:15.5px;line-height:1.58}
.closer-body{font-size:16px;line-height:1.65}
.winner-strip p,.method-intro{font-size:16.5px;line-height:1.62}
.winner-point{font-size:14.5px;line-height:1.5}

/* Larger editorial eyebrows. */
.eyebrow,
.section-title .eyebrow,
.rankings-intro .eyebrow,
.method .eyebrow,
.winner-strip .eyebrow{
  font-size:15px;
  letter-spacing:.11em;
}
.hero .eyebrow{font-size:16px}
.criteria .mini,.editor-note .label{font-size:13px}

/* Look-for and avoid become visually distinct editorial panels. */
#look-for.section{
  margin-top:32px;
  padding:34px 28px 30px;
  border:1px solid var(--look-green-border);
  border-left:5px solid var(--look-green-accent);
  border-radius:12px;
  background:linear-gradient(145deg,var(--look-green-bg) 0%,var(--look-green-bg-2) 72%);
}
#avoid.section{
  margin-top:34px;
  padding:34px 28px 30px;
  border:1px solid var(--avoid-red-border);
  border-left:5px solid var(--avoid-red-accent);
  border-radius:12px;
  background:linear-gradient(145deg,var(--avoid-red-bg) 0%,var(--avoid-red-bg-2) 72%);
}
#look-for .section-title .eyebrow{color:#4f7b61}
#avoid .section-title .eyebrow{color:#a65d58}
#look-for .section-number{
  background:#6e917a;
  color:#fff;
}
#avoid .section-number.blush{
  background:#bd746f;
  border-color:#bd746f;
  color:#fff;
}

/* Individual criteria read as blog modules within the green/red section. */
#look-for .criteria{
  border-color:#dbe9df;
  background:rgba(255,255,255,.62)!important;
}
#avoid .criteria{
  border-color:#f0d8d5;
  background:rgba(255,255,255,.60)!important;
}
.criteria-index,
.criteria.avoid .criteria-index{
  background:var(--number-pink)!important;
  color:#fff;
  box-shadow:0 0 0 4px var(--number-pink-soft);
}

/* Mechanism-first closer look: same text, much easier to scan. */
.closer-body{padding:18px 20px 22px}
.mechanism-callout{
  margin:0 0 16px;
  padding:16px 18px;
  border:1px solid #f0ccd5;
  border-radius:8px;
  background:linear-gradient(135deg,#fff1f4 0%,#fff9f8 100%);
}
.mechanism-callout span{
  display:block;
  margin-bottom:4px;
  color:#a6576b;
  font-size:11px;
  font-weight:800;
  letter-spacing:.12em;
}
.mechanism-callout strong{
  display:block;
  margin-bottom:5px;
  font-family:var(--serif);
  color:#222;
  font-size:22px;
  line-height:1.15;
}
.mechanism-callout p{
  margin:0;
  color:#5a5053;
  font-size:14.5px;
  line-height:1.55;
}
.closer-blocks{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.closer-block{
  padding:16px;
  border:1px solid #e7e1dc;
  border-radius:8px;
  background:#fff;
}
.closer-block:first-child{
  grid-column:1/-1;
  background:#fbfaf8;
}
.closer-block-label{
  margin-bottom:7px;
  color:#8b6b62;
  font-size:11px;
  font-weight:800;
  letter-spacing:.11em;
}
.closer-block p{margin:0;color:#474247}
.who{
  margin-top:14px;
  padding:14px 16px;
  border:1px solid #d7e5db;
  border-radius:8px;
  background:#f4faf6;
}
.who-label{
  display:block;
  margin-bottom:4px;
  color:#5f7f69;
  font-size:10px;
  font-weight:800;
  letter-spacing:.11em;
}
.who strong{font-size:14.5px;line-height:1.5}

/* Slightly richer blog/magazine color touches. */
.hero-compare-head{background:#fbf4f6}
.quick-verdict{
  padding:14px 16px;
  border-left:4px solid var(--logo-pink);
  background:#fff9fb;
}
.editor-note{border-radius:8px}
.rankings-intro{padding:4px 0 6px}
.product-card.winner{border-top-color:#6b9379}
.winner-strip{border-radius:10px;padding-left:24px;padding-right:24px}
.method{border-radius:10px;padding-left:22px;padding-right:22px}

@media (max-width:900px){
  body{font-size:17px}
  .hero h1{font-size:42px}
  .dek{font-size:19px}
  .section-title h2{font-size:31px}
  .criteria h3{font-size:19px}
  .criteria p,.summary{font-size:16.5px}
  .closer-blocks{grid-template-columns:1fr}
  .closer-block:first-child{grid-column:auto}
}

@media (max-width:560px){
  body{font-size:17px;line-height:1.7}
  .container{width:min(calc(100% - 24px),1080px)}
  .hero h1{font-size:36px;line-height:1.07}
  .dek{font-size:18.5px;line-height:1.55}
  .byline{font-size:13px;line-height:1.55}
  .quick-verdict{font-size:16px;padding:13px 14px}
  .eyebrow,
  .section-title .eyebrow,
  .rankings-intro .eyebrow,
  .method .eyebrow,
  .winner-strip .eyebrow{font-size:14px}
  .hero .eyebrow{font-size:15px}
  .criteria .mini,.editor-note .label{font-size:12px}
  .section-title h2{font-size:28px;line-height:1.13}
  .section-title p{font-size:16.5px}
  .rankings-intro h2{font-size:32px}
  .product-info h2{font-size:26px}
  .summary{font-size:17px}
  .pros h3{font-size:17px}
  .pros ul{font-size:16px}
  .closer-title{font-size:17px}
  .closer-body{font-size:16.5px;padding:14px}
  .closer-block{padding:15px}
  .closer-block-label{font-size:11.5px}
  .mechanism-callout{padding:15px}
  .mechanism-callout strong{font-size:21px}
  .mechanism-callout p{font-size:15.5px}
  .who strong{font-size:15px}
  .winner-strip p,.method-intro{font-size:16.5px}
  .editor-note{padding:18px 18px 20px}
  .editor-note p{font-size:18px;line-height:1.38}
  .subtle-buy-link{font-size:14.5px}

  /* Requested compact 2 x 2 mobile jump grid. */
  .jump-nav{padding:14px;margin:16px 0 22px}
  .jump-links{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .jump-links a{
    min-height:58px;
    padding:10px 11px;
    border-radius:9px;
    align-items:center;
    gap:5px;
  }
  .jump-text{font-size:12px;line-height:1.2}
  .jump-arrow{font-size:15px}

  #look-for.section,#avoid.section{
    margin-left:0;
    margin-right:0;
    padding:24px 15px 20px;
    border-radius:10px;
  }
  .section-head{grid-template-columns:50px 1fr;gap:12px}
  .section-number,.section-number.blush{width:50px;height:50px;font-size:15px}
  .criteria{grid-template-columns:36px 1fr;padding:17px 13px;gap:12px}
  .criteria-index,.criteria.avoid .criteria-index{width:34px;height:34px;font-size:11px}
}


/* ===== V7 EXPERIENCE + ANALYTICS REFINEMENT ===== */
.experience-callout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 220px;
  gap:20px;
  align-items:center;
  padding:18px 20px;
}
.experience-copy{min-width:0}
.experience-callout .experience-copy > span{
  margin-bottom:5px;
}
.experience-callout .experience-copy > strong{
  margin-bottom:8px;
  font-size:22px;
}
.experience-callout .experience-copy > p{
  font-size:16px;
  line-height:1.62;
}
.experience-gif{
  display:block;
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:10px;
  border:1px solid #efd7de;
  background:#f9ecef;
}
.winner .closer-blocks{
  grid-template-columns:1fr 1fr;
}
.winner .closer-block:first-child{
  grid-column:auto;
  background:#fbfaf8;
}
@media (max-width:700px){
  .experience-callout{
    grid-template-columns:1fr;
    gap:14px;
  }
  .experience-gif{
    width:min(100%,360px);
    margin:0 auto;
  }
  .winner .closer-blocks{
    grid-template-columns:1fr;
  }
}
@media (max-width:560px){
  .experience-callout{
    padding:15px;
  }
  .experience-callout .experience-copy > strong{
    font-size:21px;
  }
  .experience-callout .experience-copy > p{
    font-size:16px;
  }
}