.top-heading{text-align:center;background:#dce7e3;margin:0 -40px;padding:55px 30px 95px}.top-heading h1{font-size:clamp(35px,4.3vw,57px);line-height:1.1;margin:0 0 22px}.top-heading>p:last-child{font-size:16px;max-width:760px;margin:auto}.circle-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:42px 22px;padding:0 0 55px;margin-top:-52px;position:relative}.circle-category{text-align:center;text-decoration:none;min-width:0;display:flex;flex-direction:column;align-items:center;gap:17px;font-size:13px;line-height:1.5}.circle-image{border-radius:50%;width:150px;max-width:100%;aspect-ratio:1;overflow:hidden;display:grid;place-items:center;background:#ede5d5;transition:transform .2s}.circle-image img{width:100%;height:100%;object-fit:contain;padding:15px;mix-blend-mode:multiply}.circle-image>span{font-family:Georgia,serif;font-size:60px}.tone-1{background:#e3e8dc}.tone-2{background:#eeddd9}.tone-3{background:#e0e3ec}.circle-category:hover .circle-image{transform:translateY(-5px)}.circle-category b{margin-left:7px}.post-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;padding-bottom:60px}.post-card{border:1px solid var(--line);text-decoration:none;background:#fffefb;display:block;overflow:hidden}.post-card>img,.post-placeholder{width:100%;height:230px;object-fit:contain;background:#f2f0e7;padding:20px}.post-placeholder{display:grid;place-items:center;font-family:Georgia,serif;font-size:28px}.post-card>div:not(.post-placeholder){padding:25px}.post-card h2{font-size:28px}.post-card p:not(.eyebrow){font-size:14px;color:var(--muted)}.post-card .eyebrow{margin-bottom:12px}.page-intro>.text-link{display:inline-block;margin-bottom:28px}.ranking-article{max-width:850px;margin:auto;padding:35px 0 65px}.breadcrumbs{font-size:12px;color:var(--muted);margin-bottom:40px}.article-heading h1{font-size:clamp(34px,4vw,54px);line-height:1.12;margin:0 0 25px;overflow-wrap:anywhere}.article-subtitle{font-size:21px;line-height:1.6;color:var(--muted)}.article-cover{margin:35px 0}.article-cover img{width:100%;height:420px;object-fit:contain;background:#fffefb;padding:25px;border:1px solid var(--line)}.article-cover figcaption{font-size:12px;color:var(--muted);margin-top:10px}.article-prose{font-family:Georgia,'Times New Roman',serif;font-size:20px;line-height:1.85;overflow-wrap:anywhere}.article-prose p{margin:0 0 1.4em}.article-index{background:#ecefe6;border-left:3px solid #67806a;padding:25px 35px;margin:40px 0}.article-index h2{font-size:26px}.article-index li{padding:5px 0}.ranking-entry{border-top:1px solid var(--line);padding:40px 0;scroll-margin-top:130px}.ranking-title{display:flex;gap:20px;align-items:baseline;margin-bottom:25px}.ranking-title>span{font-family:Georgia,serif;color:var(--accent);font-size:40px}.ranking-title h2{font-size:32px;overflow-wrap:anywhere}.ranking-image{width:100%;height:350px;object-fit:contain;background:#fffefb;padding:25px;margin:10px 0 25px}.pros-cons{display:grid;grid-template-columns:1fr 1fr;gap:25px;background:#f0eee4;padding:22px;margin-bottom:24px}.pros-cons h3{font-size:22px;margin:0 0 10px}.pros-cons ul{padding-left:20px;font-size:14px;line-height:1.8;margin:0}.article-product{border:1px solid var(--line);padding:22px;display:flex;flex-wrap:wrap;gap:20px;align-items:center;background:#fffefb}.article-product>div{flex:1}.article-product span{display:block;font-size:23px}.article-product strong{font-size:14px}.article-conclusion{margin:30px 0 40px}.article-conclusion h2{margin-bottom:20px}#articleSections fieldset{background:#f8f7f1}.post-grid>.empty{grid-column:1/-1}#topContent{min-height:60vh}.quiz-page{min-height:0}
@media(max-width:1100px){.circle-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:800px){.top-heading{margin:0 -28px;padding:40px 25px 90px}.circle-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 18px}.circle-image{width:140px}.post-grid{grid-template-columns:1fr}.article-prose{font-size:18px}.article-cover img{height:300px}.ranking-title h2{font-size:27px}}
@media(max-width:480px){.top-heading{margin:0 -18px}.top-heading>p:last-child{font-size:14px}.circle-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 18px}.circle-image{width:140px}.circle-category{font-size:12px}.ranking-image{height:250px}.pros-cons{grid-template-columns:1fr}.article-subtitle{font-size:18px}.article-index{padding:22px}.ranking-title{gap:12px}.article-product .btn{width:100%}}
@media(prefers-reduced-motion:reduce){.circle-image{transition:none}}