:root{
  --bg:#f3efe8;--paper:#fff;--ink:#111d3a;--text:#28313b;--muted:#6a7280;--line:#dad6ce;
  --navy:#12264e;--soft:#f8f6f1;--green:#198754;--green-dark:#11643d;--max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;line-height:1.72}
img{display:block;max-width:100%}
a{color:inherit}
.skip-link{position:absolute;left:-9999px;top:8px}
.skip-link:focus{left:12px;background:#fff;padding:10px 14px;border-radius:8px;z-index:1000}
main{max-width:var(--max);margin:0 auto;padding:56px 24px 76px}
.page-lead{padding:0 0 34px;margin-bottom:34px;border-bottom:1px solid var(--line)}
.page-lead h1{margin:0;max-width:1000px;color:var(--ink);font-size:clamp(2.35rem,5vw,4.5rem);line-height:1.04;letter-spacing:-.045em}
.content-grid{display:grid;grid-template-columns:245px minmax(0,1fr);gap:38px;align-items:start}
.toc{position:sticky;top:22px;max-height:calc(100vh - 44px);overflow:auto;padding:17px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.72)}
.toc-title{margin-bottom:8px;color:var(--ink);font-size:.82rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em}
.toc a{display:block;padding:8px 0;border-top:1px solid #e6e2da;text-decoration:none;color:#56606b;font-size:.88rem;line-height:1.35}
.toc a:hover{color:var(--navy)}
.article{min-width:0;padding:clamp(24px,4vw,48px);border:1px solid var(--line);border-radius:20px;background:var(--paper)}
.article h2{margin:2.15em 0 .65em;color:var(--ink);font-size:clamp(1.65rem,3vw,2.35rem);line-height:1.18;letter-spacing:-.025em}
.article h2:first-child{margin-top:0}
.article h3{margin:1.75em 0 .55em;color:var(--ink);font-size:1.27rem;line-height:1.32}
.article p{margin:0 0 1.1em}
.article ul,.article ol{padding-left:1.35rem;margin:1rem 0 1.35rem}
.article li{margin:.45rem 0}
.article blockquote{margin:1.5rem 0;padding:18px 21px;border-left:4px solid var(--navy);background:#f4f5f7;border-radius:0 12px 12px 0}
.article table{width:100%;border-collapse:collapse;margin:1.4rem 0 1.8rem;font-size:.92rem}
.article th,.article td{border:1px solid var(--line);padding:11px 12px;text-align:left;vertical-align:top}
.article th{background:#f3f2ee}
.article-image{width:100%;margin:1.55rem 0 2rem}
.article-image img{display:block;width:100%;height:auto;max-width:100%;object-fit:contain;object-position:center;border:1px solid var(--line);border-radius:16px;background:#f7f5ef}

/* Affiliate table */
.affiliate-top{margin:1.7rem 0 2.5rem;padding:22px;border:1px solid var(--line);border-radius:18px;background:#f6f7f9}
.affiliate-heading{margin-bottom:16px}
.affiliate-heading h2{margin:0 0 5px!important;font-size:1.45rem}
.affiliate-heading p{margin:0;color:var(--muted);font-size:.92rem}
.affiliate-list{display:grid;gap:12px}
.affiliate-card{position:relative;display:grid;grid-template-columns:42px 80px minmax(145px,.8fr) minmax(220px,1.25fr) 155px;gap:16px;align-items:center;min-height:112px;padding:16px;border:1px solid #dce1e6;border-radius:16px;background:#fff;box-shadow:0 4px 14px rgba(15,23,42,.045);transition:transform .18s ease,box-shadow .18s ease}
.affiliate-card:not(.skeleton-card):hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(15,23,42,.09)}
.affiliate-card.is-top{border:2px solid var(--navy);box-shadow:0 10px 28px rgba(18,38,78,.13)}
.top-badge{position:absolute;left:18px;top:-12px;padding:4px 9px;border-radius:999px;background:var(--navy);color:#fff;font-size:.68rem;font-weight:800;letter-spacing:.045em}
.rank-badge{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:#eef1f4;color:#344054;font-weight:800}
.is-top .rank-badge{background:var(--navy);color:#fff}
.logo-tile{width:80px;height:80px;display:grid;place-items:center;overflow:hidden;border-radius:14px;box-shadow:inset 0 0 0 1px rgba(15,23,42,.09)}
.logo-tile img{width:80%;height:80%;object-fit:contain}
.brand-name{margin-bottom:7px;color:var(--ink);font-size:1.08rem;font-weight:800}
.rating-row{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:.86rem}
.stars{--fill:100%;position:relative;display:inline-block;font-size:17px;line-height:1;letter-spacing:1px;color:#d5dbe4}
.stars::before{content:"★★★★★"}
.stars::after{content:"★★★★★";position:absolute;inset:0 auto 0 0;width:var(--fill);overflow:hidden;color:#f4b400;white-space:nowrap}
.bonus-label{margin-bottom:4px;color:#7a8290;font-size:.72rem;font-weight:800;letter-spacing:.065em;text-transform:uppercase}
.bonus-text{color:var(--ink);font-weight:750;line-height:1.34}
.cta-button{display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;border-radius:11px;background:var(--green);color:#fff!important;text-decoration:none;font-weight:800}
.cta-button:hover{background:var(--green-dark)}
.affiliate-error{padding:18px;border:1px solid #ead1d1;border-radius:12px;background:#fff7f7;color:#8b3434;text-align:center}
.skeleton-card{grid-template-columns:80px minmax(160px,.9fr) minmax(220px,1.3fr) 150px}
.skel{position:relative;overflow:hidden;border-radius:10px;background:#e7eaee}
.skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.68),transparent);animation:shimmer 1.25s infinite}
.skel-logo{width:80px;height:80px}.skel-lines{height:48px}.skel-bonus{height:54px}.skel-button{height:48px}
@keyframes shimmer{100%{transform:translateX(100%)}}

.site-footer{border-top:1px solid var(--line);background:#e8e4dc}
.footer-inner{max-width:var(--max);margin:0 auto;padding:28px 24px 34px;display:flex;justify-content:space-between;align-items:center;gap:24px;color:#606870;font-size:.92rem}
.site-footer nav{display:flex;flex-wrap:wrap;gap:12px 20px}
.site-footer a{text-decoration:none}.site-footer a:hover{text-decoration:underline}
.utility{max-width:820px;margin:0 auto;padding:64px 24px 80px}
.utility h1{margin:0 0 28px;color:var(--ink);font-size:clamp(2.2rem,5vw,3.8rem);line-height:1.05}
.utility h2{margin-top:32px;color:var(--ink)}
.utility-back{display:inline-block;margin-bottom:28px;text-decoration:none}
@media(max-width:980px){
  .content-grid{grid-template-columns:1fr}.toc{position:static;max-height:none}
  .affiliate-card{grid-template-columns:38px 72px 1fr 150px}.bonus-col{grid-column:3/5}.logo-tile{width:72px;height:72px}
}
@media(max-width:720px){
  main{padding:34px 16px 60px}.article{padding:21px 17px;border-radius:16px}.article table{display:block;overflow-x:auto}
  .affiliate-top{padding:16px;margin-left:-4px;margin-right:-4px}.affiliate-card{grid-template-columns:64px 1fr;gap:12px;padding:18px 14px 14px}
  .rank-badge{position:absolute;top:10px;right:10px;width:30px;height:30px}.logo-tile{width:64px;height:64px}.brand-col{padding-right:38px}
  .bonus-col{grid-column:1/-1;padding:12px;border-radius:11px;background:#f6f8f8;text-align:center}.cta-col{grid-column:1/-1}.cta-button{min-height:52px}
  .top-badge{left:14px}.skeleton-card{grid-template-columns:64px 1fr}.skel-logo{width:64px;height:64px}.skel-bonus,.skel-button{grid-column:1/-1}
  .footer-inner{align-items:flex-start;flex-direction:column}
}