@font-face{font-family:Poppins;src:url('/assets/fonts/poppins-400.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Poppins;src:url('/assets/fonts/poppins-600.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Poppins;src:url('/assets/fonts/poppins-700.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}

.reference-layout{
 --paper:oklch(.998 .002 160);
 --canvas:oklch(.961 .004 180);
 --ink:oklch(.245 .025 213);
 --petrol:oklch(.478 .076 190);
 --tint:oklch(.957 .019 178);
 --line:oklch(.844 .026 177);
 background:var(--canvas);color:var(--ink);
 font-family:Poppins,sans-serif;font-synthesis:none;
}
.reference-layout .wrap{width:calc(100% - 48px);max-width:1128px;margin:0 auto;padding:0 40px;background:var(--paper)}
.reference-layout .header{height:68px;border:0;gap:20px}
.reference-layout .header .logo img{width:220px;height:38px}
.reference-layout .publication-label{font:600 11px/1.5 Poppins,sans-serif;letter-spacing:.5px;color:var(--petrol)}
.reference-layout .intro{padding:0;display:flex;flex-direction:column}
.reference-layout .intro-offer{order:-2;display:block;background:var(--petrol);margin:0 -40px 26px;padding:22px 28px;text-align:center}
.reference-layout .intro-offer .primary{width:100%;max-width:650px;min-height:58px;margin:auto;font-size:22px;padding:12px 20px}
.reference-layout .intro-offer span{display:block;margin-top:11px;color:var(--paper);font:400 12px/1.5 Poppins,sans-serif}
.reference-layout .intro .eyebrow{order:-1;align-self:center;max-width:100%;margin:4px auto 18px;padding:7px 15px;border-radius:30px;background:var(--tint);color:var(--petrol);font:600 11px/1.5 Poppins,sans-serif;letter-spacing:.6px;text-align:center}
.reference-layout h1{max-width:1000px;margin:0 auto 16px;text-align:center;font:700 40px/1.22 Poppins,sans-serif;letter-spacing:-.7px;color:var(--ink)}
.reference-layout h1 em{font-style:normal;font-weight:700;color:inherit}
.reference-layout .subtitle{max-width:900px;margin:0 auto 16px;text-align:center;font:400 20px/1.6 Poppins,sans-serif}
.reference-layout .date{font:400 13px/1.6 Poppins,sans-serif;letter-spacing:0;text-align:center;margin:0 0 28px;padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.reference-layout .hero{display:flex;flex-direction:column;align-items:center;gap:28px}
.reference-layout .hero>figure{width:100%;max-width:550px;margin:0 auto}
.reference-layout .hero figure img{width:100%;height:auto;max-height:500px;object-fit:contain;aspect-ratio:auto}
.reference-layout figcaption{color:oklch(.48 .022 210);font:400 12px/1.65 Poppins,sans-serif;font-style:normal;text-align:center;margin-top:10px}
.reference-layout .verdict{width:100%;padding:28px 30px;background:var(--tint);border:2px solid var(--line);border-radius:12px}
.reference-layout .verdict h2{font:700 25px/1.3 Poppins,sans-serif;letter-spacing:-.2px;color:var(--petrol);margin:0 0 16px}
.reference-layout .verdict .accent{display:none}
.reference-layout .summary-lead{font:400 20px/1.65 Poppins,sans-serif;margin:0 0 16px}
.reference-layout .facts{margin:0 0 20px}
.reference-layout .fact{display:flex;gap:10px;align-items:baseline;min-height:0;border:0;margin:10px 0}
.reference-layout .fact dt{flex:0 0 auto;font:700 16px/1.6 Poppins,sans-serif}
.reference-layout .fact dt::after{content:':'}
.reference-layout .fact dd{border:0;padding:0;font:400 16px/1.6 Poppins,sans-serif}
.reference-layout .primary{font-family:Poppins,sans-serif;font-size:20px;font-weight:700;line-height:1.4;border-radius:8px;min-height:58px;padding:14px 22px}
.reference-layout .verdict .primary{max-width:520px;margin:22px auto 0;background:var(--petrol)}
.reference-layout .seller-button,.reference-layout article a.primary{background:#35752a;color:#fff;box-shadow:0 3px 0 #285e20}
.reference-layout .seller-button:hover,.reference-layout article a.primary:hover{background:#285e20}
.reference-layout .intro-offer .seller-button{display:inline-flex;width:auto;max-width:100%;gap:18px;padding:16px 28px;border:1px solid oklch(.72 .13 85);border-radius:12px;background:oklch(.88 .145 89);color:var(--ink);box-shadow:0 5px 0 oklch(.31 .045 190),0 8px 16px oklch(.23 .025 190 / .2);cursor:pointer}
.reference-layout .intro-offer .seller-button::after{content:'→';font-size:26px;line-height:1;font-weight:600}
.reference-layout .intro-offer .seller-button:hover{background:oklch(.92 .125 89);color:var(--ink);box-shadow:0 5px 0 oklch(.31 .045 190),0 10px 20px oklch(.23 .025 190 / .25)}
.reference-layout .intro-offer .seller-button:focus-visible{outline:3px solid var(--paper);outline-offset:5px}
.reference-layout .anchor-nav{display:none}
.reference-layout .layout{display:block;padding:36px 0 55px}
.reference-layout .sidebar{position:static;max-width:75ch;padding:22px 25px;margin:0 auto 38px;border:1px solid var(--line);border-radius:10px;display:grid;grid-template-columns:1fr 1fr;gap:0 24px;background:var(--paper)}
.reference-layout .side-label{grid-column:1/-1;font:700 17px/1.5 Poppins,sans-serif;font-style:normal;margin:0 0 10px;color:var(--petrol)}
.reference-layout .sidebar a{font:400 14px/1.6 Poppins,sans-serif;border:0;padding:8px 0;color:var(--ink);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:4px}
.reference-layout article{max-width:75ch;margin:auto;font:400 20px/1.65 Poppins,sans-serif;counter-reset:review-section;overflow-wrap:anywhere}
.reference-layout article p{margin:0 0 22px}
.reference-layout article strong{font-weight:700;color:var(--ink)}
.reference-layout article :is(h2):where(article>h2,article>section>h2),.reference-layout article>h2:first-child, .reference-layout article>section:first-child>h2{font:700 30px/1.3 Poppins,sans-serif;letter-spacing:-.35px;background:var(--petrol);color:var(--paper);padding:17px 22px;margin:38px -18px 24px;border:0;scroll-margin-top:20px}
.reference-layout article>h2:first-child, .reference-layout article>section:first-child>h2{margin-top:0}
.reference-layout article :is(h2):where(article>h2,article>section>h2)::before{counter-increment:review-section;content:counter(review-section) '. ';opacity:.85}
.reference-layout article h3{font:700 24px/1.35 Poppins,sans-serif;letter-spacing:-.15px;margin:27px 0 14px}
.reference-layout article ul,.reference-layout article ol{padding-left:26px}
.reference-layout article li{margin-bottom:14px}
.reference-layout .article-photo{max-width:650px;margin:32px auto}
.reference-layout .article-photo img{max-height:540px;height:auto;aspect-ratio:auto}
.reference-layout .article-photo.packshot{max-width:430px}
.reference-layout .article-photo.packshot img{max-height:510px}
.reference-layout .article-photo figcaption{font:400 12px/1.65 Poppins,sans-serif;text-align:center;color:oklch(.48 .022 210)}
.reference-layout article .buy-card{border:1px solid var(--line);border-radius:12px;background:var(--tint);padding:28px;margin:32px 0}
.reference-layout article .buy-card h3{color:var(--petrol);margin:0 0 12px;font-size:25px}
.reference-layout .buy-card .offer-note{font:400 12px/1.7 Poppins,sans-serif;margin:14px 0 0;text-align:center}
.reference-layout article details{padding:18px 0;border-bottom:1px solid var(--line)}
.reference-layout article details summary{font-weight:600;line-height:1.5;cursor:pointer}
.reference-layout article details p{margin:16px 0 0}
.reference-layout footer{max-width:75ch;margin:auto;padding:25px 0 36px;border-color:var(--line);font:400 12px/1.8 Poppins,sans-serif;color:oklch(.44 .02 210)}
.reference-layout footer summary{cursor:pointer;font-weight:600;color:var(--petrol)}
.reference-layout footer details{margin-top:12px}
.reference-layout .skip:focus{font:600 16px/1.5 Poppins,sans-serif}

@media(max-width:760px){
 .reference-layout .wrap{width:calc(100% - 24px);padding:0 18px}
 .reference-layout .header{height:62px;gap:12px}
 .reference-layout .header .logo img{width:180px;height:34px}
 .reference-layout .publication-label{font-size:9px;letter-spacing:0;text-align:right}
 .reference-layout .intro-offer{margin:0 -18px 22px;padding:18px}
 .reference-layout .intro-offer .primary{font-size:17px;min-height:54px;padding:12px}
 .reference-layout .intro-offer span{font-size:10px;line-height:1.6;margin-top:9px}
 .reference-layout .intro .eyebrow{font-size:9px;letter-spacing:.2px;padding:6px 10px;margin-bottom:16px}
 .reference-layout h1{font-size:30px;line-height:1.25;letter-spacing:-.45px;margin-bottom:14px}
 .reference-layout .subtitle{font-size:17px;line-height:1.65;margin-bottom:17px}
 .reference-layout .date{font-size:11px;margin-bottom:22px}
 .reference-layout .hero{gap:24px}
 .reference-layout .hero figure img{max-height:380px;aspect-ratio:auto}
 .reference-layout figcaption{font-size:10px}
 .reference-layout .verdict{padding:20px 18px}
 .reference-layout .verdict h2{font-size:23px;line-height:1.35}
 .reference-layout .summary-lead{font-size:17px;line-height:1.65}
 .reference-layout .fact{display:block;margin:14px 0}
 .reference-layout .fact dt,.reference-layout .fact dd{display:inline;font-size:15px}
 .reference-layout .fact dd{margin-left:5px}
 .reference-layout .primary{font-size:17px;min-height:55px;padding:13px 15px}
 .reference-layout .layout{padding-top:28px}
 .reference-layout .sidebar{display:block;padding:20px 18px;margin-bottom:30px}
 .reference-layout .side-label{font-size:16px}
 .reference-layout .sidebar a{font-size:13px;line-height:1.6;padding:8px 0}
 .reference-layout article{font-size:18px;line-height:1.7}
 .reference-layout article :is(h2):where(article>h2,article>section>h2),.reference-layout article>h2:first-child, .reference-layout article>section:first-child>h2{font-size:25px;line-height:1.35;padding:16px 18px;margin:32px -18px 20px}
 .reference-layout article>h2:first-child, .reference-layout article>section:first-child>h2{margin-top:0}
 .reference-layout article h3{font-size:22px;line-height:1.4}
 .reference-layout article .buy-card{padding:20px 18px}
 .reference-layout article .buy-card h3{font-size:23px}
 .reference-layout .article-photo{margin:28px auto}
 .reference-layout .article-photo img{max-height:420px}
 .reference-layout footer{font-size:11px}
}