/* SkinsMonkey Blog — theme stylesheet.
   Section 1: base design, kept in sync with the design prototypes. Section 2: what WordPress needs on top. Fonts: theme.json (@font-face, self-hosted). */

:root {
  /* neutral (DS) */
  --n000:#1d1c1a; --n100:#21201e; --n150:#2a2724; --n200:#302e2a; --n250:#393632; --n300:#3f3c38;
  --n350:#4a4642; --n400:#56524d; --n500:#7b776f; --n600:#9a958b; --n700:#aea89b; --n800:#ece6da; --n900:#fcf5e8;
  /* primary (DS) */
  --y900:#ffeca3; --y800:#ffe379; --y500:#f5c71b; --y400:#d7aa00; --y300:#a37e09; --y100:#3b2600;
  /* system */
  --red:#dc3030; --green:#81bd1b;
  /* float / wear bar */
  --f1:#3b818f; --f2:#83b135; --f3:#d7be47; --f4:#f08140; --f5:#ec4f3d;
  /* rarity */
  --r-consumer:#b0c3d9; --r-industrial:#5e98d9; --r-milspec:#4b69ff; --r-restricted:#8847ff;
  --r-classified:#d32ce6; --r-covert:#eb4b4b; --r-contraband:#e4ae39; --r-stattrak:#cf6a32;

  /* roles */
  --paper:var(--n900); --ink:var(--n100); --ink-2:var(--n400); --ink-3:var(--n500);
  --chrome:var(--n100); --chrome-ink:var(--n900); --chrome-head:var(--n800); --chrome-ink-2:var(--n700);
  --line:var(--n800); --line-dark:rgba(255,255,255,.1);
  --accent:var(--y500);

  --font-display:"Space Grotesk", "Source Sans 3", Arial, sans-serif;
  --font-body:"Source Sans 3", "Segoe UI", Arial, sans-serif;
  --font-num:"Inter", var(--font-display);

  --wide:1200px; --text:720px; --side:320px;
  --r-btn:4px; --r-card:8px; --r-tile:4px;
  --shadow:0 4px 6px -1px rgba(33,32,30,.08), 0 2px 4px -1px rgba(33,32,30,.05);
  --t-fast:175ms cubic-bezier(.2,.7,.2,1); --t:275ms cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-body);font-size:18px;line-height:1.6;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(163,126,9,.35);border-radius:var(--r-btn)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

.wrap{width:min(var(--wide),100% - 32px);margin-inline:auto}
.eyebrow{font-family:var(--font-display);font-size:.75rem;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2)}
.chrome .eyebrow{color:var(--chrome-ink-2)}
.num{font-family:var(--font-num);font-variant-numeric:tabular-nums}

/* ---------- buttons ---------- */
.btn{white-space:nowrap;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 20px;border-radius:var(--r-btn);border:1px solid transparent;
  font-family:var(--font-display);font-weight:500;font-size:.875rem;line-height:1;text-decoration:none;cursor:pointer;transition:background var(--t),color var(--t),border-color var(--t),transform var(--t-fast)}
.btn-primary{background:var(--y500);color:var(--n100)}
.btn-primary:hover{background:var(--y800)} .btn-primary:active{background:var(--y400)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--paper)}
.chrome .btn-ghost{color:var(--chrome-ink);border-color:var(--n400)} .chrome .btn-ghost:hover{background:var(--n900);color:var(--n100)}
.btn-sm{min-height:36px;padding:8px 14px;font-size:.8125rem}

/* ---------- header ---------- */
.chrome{background:var(--chrome);color:var(--chrome-ink)}
.site-header{height:64px;border-bottom:1px solid var(--line-dark)}
.site-header .wrap{height:100%;display:flex;align-items:center;gap:32px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--font-display);font-weight:700;font-size:1.125rem;color:var(--chrome-ink)}
.logo img{height:40px;width:auto;display:block}
.logo a{display:flex;align-items:center;text-decoration:none;color:inherit}
.logo .blog{opacity:.6;font-weight:400;padding:4px 6px;margin-left:-2px;border-radius:var(--r-btn);transition:opacity var(--t),background var(--t)}
.logo .blog:hover{opacity:1;background:rgba(255,255,255,.06)}
.nav{display:flex;gap:4px;margin-left:8px}
.nav a{font-family:var(--font-display);font-weight:500;font-size:.875rem;color:var(--chrome-ink-2);text-decoration:none;padding:8px 10px;border-radius:var(--r-btn);transition:color var(--t),background var(--t)}
.nav a:hover,.nav a[aria-current]{color:var(--chrome-ink);background:var(--n150)}
.header-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.lang{font-family:var(--font-display);font-size:.8125rem;font-weight:500;color:var(--chrome-ink-2);display:flex;align-items:center;gap:6px;padding:8px 10px;border:1px solid var(--n300);border-radius:var(--r-btn)}
.lang i{width:16px;height:12px;background:linear-gradient(#b22234 0 50%,#fff 50%);border-radius:2px;display:inline-block}
@media (max-width:960px){.nav{display:none}.lang{display:none}}

/* ---------- listing hero (chrome) ---------- */
.hero{position:relative;padding:48px 0 64px;overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px);background-size:14px 14px;opacity:.6;z-index:-1;
  mask-image:linear-gradient(to bottom,#000 30%,transparent)}
.ghost{position:absolute;left:0;top:12px;font-family:var(--font-display);font-weight:700;font-size:clamp(5rem,16vw,14rem);line-height:.9;text-transform:uppercase;letter-spacing:-.02em;
  color:transparent;-webkit-text-stroke:1px var(--n300);white-space:nowrap;pointer-events:none;user-select:none;z-index:-1}
.hero-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:32px}
.hero-head h1{color:var(--chrome-head);font-family:var(--font-display);font-weight:700;font-size:clamp(2rem,4vw,3rem);line-height:1;text-transform:uppercase;letter-spacing:-.25px;margin:0}
.hero-head p{margin:8px 0 0;color:var(--chrome-ink-2);max-width:48ch;font-size:1.0625rem}
.hero-grid{display:grid;grid-template-columns:2fr 1fr;gap:32px}
.feature{display:grid;gap:16px;text-decoration:none;color:inherit}
.feature .media{aspect-ratio:16/9;border-radius:var(--r-card);overflow:hidden;background:var(--n200)}
.feature .media img{width:100%;height:100%;object-fit:cover;transition:transform 300ms cubic-bezier(.2,.7,.2,1)}
.feature:hover .media img{transform:scale(1.02)}
.feature h2{color:var(--chrome-head);font-family:var(--font-display);font-weight:700;font-size:clamp(1.5rem,2.6vw,2rem);line-height:1.15;margin:0}
.feature:hover h2{text-decoration:underline 3px var(--y500);text-underline-offset:4px}
.meta{font-family:var(--font-display);font-size:.875rem;font-weight:500;color:var(--ink-2);display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.chrome .meta{color:var(--chrome-ink-2)}
.meta .dot::before{content:"·";margin:0 2px}
.latest{display:grid;gap:0;align-content:start}
.latest .eyebrow{padding-bottom:12px;border-bottom:1px solid var(--line-dark);margin-bottom:4px}
.latest a{display:grid;grid-template-columns:96px 1fr;gap:14px;padding:14px 0;border-bottom:1px solid var(--line-dark);text-decoration:none;color:inherit;align-items:center}
.latest a:last-child{border-bottom:0}
.latest img{aspect-ratio:16/10;object-fit:cover;border-radius:4px;width:100%}
.latest h3{color:var(--chrome-head);font-family:var(--font-display);font-weight:500;font-size:1rem;line-height:1.3;margin:0 0 4px}
.latest a:hover h3{text-decoration:underline 2px var(--y500);text-underline-offset:3px}
.latest .meta{font-size:.75rem}
@media (max-width:960px){.hero-grid{grid-template-columns:1fr}}

/* ---------- listing body (paper) ---------- */
.section{padding:64px 0}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px}
.section-head h2{font-family:var(--font-display);font-weight:700;font-size:1.5rem;margin:0;line-height:1.2}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{font-family:var(--font-display);font-size:.8125rem;font-weight:500;padding:8px 14px;border-radius:999px;border:1px solid var(--n800);background:transparent;color:var(--ink);text-decoration:none;min-height:36px;display:inline-flex;align-items:center;transition:background var(--t),color var(--t)}
.chip:hover{border-color:var(--ink)}
.chip[aria-current]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 32px}
.card{display:grid;gap:12px;text-decoration:none;color:inherit;align-content:start}
.card .media{aspect-ratio:16/9;border-radius:var(--r-card);overflow:hidden;background:var(--n200);box-shadow:var(--shadow)}
.card .media img{width:100%;height:100%;object-fit:cover;transition:transform 300ms cubic-bezier(.2,.7,.2,1)}
.card:hover .media img{transform:scale(1.02)}
.card h3{font-family:var(--font-display);font-weight:500;font-size:1.25rem;line-height:1.25;margin:0}
.card:hover h3{text-decoration:underline 3px var(--y500);text-underline-offset:4px}
.card p{margin:0;color:var(--ink-2);font-size:1rem;line-height:1.5}
@media (max-width:960px){.grid{grid-template-columns:1fr 1fr;gap:32px 24px}}
@media (max-width:640px){.grid{grid-template-columns:1fr}}

.promo{background:var(--chrome);color:var(--chrome-ink);border-radius:var(--r-card);padding:32px;display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;margin-top:64px}
.promo h2{font-family:var(--font-display);font-weight:700;font-size:1.5rem;margin:0 0 6px;line-height:1.15}
.promo p{margin:0;color:var(--chrome-ink-2)}
@media (max-width:640px){.promo{grid-template-columns:1fr}}

.pager{display:flex;justify-content:center;gap:8px;margin-top:48px}
.pager a{font-family:var(--font-display);font-weight:500;font-size:.875rem;min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r-btn);text-decoration:none;color:var(--ink);border:1px solid transparent}
.pager a[aria-current]{background:var(--ink);color:var(--paper)}
.pager a:hover:not([aria-current]){border-color:var(--ink)}

/* ---------- post hero (chrome) ---------- */
.post-hero{padding:32px 0 96px;position:relative;overflow:hidden;isolation:isolate}
.post-hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px);background-size:14px 14px;opacity:.5;z-index:-1;mask-image:linear-gradient(to bottom,#000 20%,transparent)}
.crumbs{display:flex;gap:8px;flex-wrap:wrap;font-family:var(--font-display);font-size:.8125rem;font-weight:500;color:var(--chrome-ink-2);margin-bottom:24px}
.crumbs a{color:inherit;text-decoration:none} .crumbs a:hover{color:var(--chrome-ink)}
.crumbs span::before{content:"/";margin:0 6px 0 0;opacity:.5}
.post-hero .inner{max-width:calc(var(--text) + var(--side) + 48px);margin-inline:auto}
.post-hero h1{color:var(--chrome-head);font-family:var(--font-display);font-weight:700;font-size:clamp(1.75rem,3.2vw,2.5rem);line-height:1.12;letter-spacing:-.25px;margin:12px 0 20px;max-width:34ch}
.byline{display:flex;align-items:center;gap:14px}
.avatar{width:44px;height:44px;border-radius:50%;background:var(--y500);color:var(--n100);display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:.9375rem;flex:none}
.author .avatar{width:64px;height:64px;font-size:1.25rem}
.byline img{width:44px;height:44px;border-radius:50%;object-fit:cover;background:var(--n200)}
.byline b{font-family:var(--font-display);font-weight:500;font-size:.9375rem;display:block}
.byline .meta{font-size:.8125rem}
.updated{display:inline-flex;align-items:center;gap:6px;background:var(--y900);color:var(--y100);font-family:var(--font-display);font-size:.75rem;font-weight:500;padding:4px 8px;border-radius:4px;margin-left:8px}

/* ---------- post layout (paper) ---------- */
.post-body{position:relative;margin-top:-56px;padding-bottom:96px}
.post-layout{display:grid;grid-template-columns:minmax(0,var(--text)) var(--side);gap:48px;justify-content:center}
.lead-media{border-radius:var(--r-card);overflow:hidden;box-shadow:var(--shadow);aspect-ratio:16/9;background:var(--n200);margin-bottom:32px}
.lead-media img{width:100%;height:100%;object-fit:cover}
@media (max-width:960px){.post-layout{grid-template-columns:1fr}.post-body{margin-top:-40px}}

/* TL;DR — dark island */
.tldr{background:var(--n000);color:var(--n900);border-radius:var(--r-card);padding:24px 28px;margin:0 0 40px}
.tldr .eyebrow{color:var(--y500);margin-bottom:8px}
.tldr p{margin:0;font-size:1.0625rem;line-height:1.55}
.tldr p+p{margin-top:10px}

/* article typography */
.article{font-size:18px;line-height:1.6}
.article>p{margin:0 0 24px}
.article h2{font-family:var(--font-display);font-weight:700;font-size:1.5rem;line-height:1.2;margin:48px 0 16px;scroll-margin-top:96px}
.article h3{font-family:var(--font-display);font-weight:500;font-size:1.25rem;line-height:1.3;margin:32px 0 12px}
.article a{color:var(--ink);text-decoration:underline 3px var(--y500);text-underline-offset:3px;transition:background var(--t)}
.article a:hover{background:var(--y500);text-decoration-color:var(--y500)}
.article ul,.article ol{padding-left:22px;margin:0 0 24px}
.article li{margin:0 0 8px}
.article li::marker{color:var(--ink-2)}
.article strong{font-weight:600}
.article figure{margin:32px 0}
.article figure img{border-radius:var(--r-card);width:100%}
.article figcaption{font-family:var(--font-display);font-size:.8125rem;color:var(--ink-2);margin-top:10px}
.article table{width:100%;border-collapse:collapse;margin:0 0 32px;font-size:1rem}
.article th{background:var(--n100);color:var(--n900);font-family:var(--font-display);font-weight:500;font-size:.8125rem;text-align:left;padding:10px 12px}
.article td{padding:10px 12px;border-bottom:1px solid var(--n800)}
.article tr:nth-child(even) td{background:rgba(236,230,218,.5)}
.article blockquote{margin:32px 0;padding:0 0 0 20px;border-left:3px solid var(--ink);font-family:var(--font-display);font-size:1.25rem;line-height:1.35;font-weight:500}
.sm-link{font-weight:600}

/* wiki cards (dark islands) */
.wiki-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin:8px 0 40px}
.wiki-grid-head{font-family:var(--font-display);font-size:.75rem;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2);margin:40px 0 12px}
.wc{display:block;position:relative;background:var(--n200);color:var(--n900);border-radius:var(--r-tile);padding:12px 12px 0;text-decoration:none;overflow:hidden;transition:transform var(--t-fast),background var(--t)}
.wc::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 50% at 50% 35%,rgba(255,255,255,.08),transparent 70%)}
.wc:hover{transform:translateY(-2px);background:var(--n250)}
.wc .img{position:relative;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center}
.wc .img img{max-height:100%;width:auto;object-fit:contain;filter:drop-shadow(0 8px 12px rgba(0,0,0,.4))}
.wc .k{position:relative;font-family:var(--font-display);font-size:.6875rem;font-weight:500;color:var(--n700);margin-top:4px;display:flex;justify-content:space-between}
.wc .k .st{color:var(--r-stattrak)}
.wc .n{position:relative;font-family:var(--font-display);font-weight:500;font-size:.875rem;line-height:1.25;margin:2px 0 6px}
.wc .p{position:relative;font-family:var(--font-num);font-weight:600;font-size:1rem;font-variant-numeric:tabular-nums}
.wc .p small{font-size:.75rem;font-weight:400;color:var(--n600);font-family:var(--font-display)}
.wc .p .c{color:var(--n600);font-weight:400}
.wc .wear{position:relative;height:3px;margin:10px -12px 0;background:linear-gradient(90deg,var(--f1) 0 7%,var(--f2) 7% 15%,var(--f3) 15% 38%,var(--f4) 38% 45%,var(--f5) 45% 100%)}
.wc .cta{position:relative;display:block;margin:0 -12px;background:var(--y500);color:var(--n100);font-family:var(--font-display);font-weight:500;font-size:.8125rem;text-align:center;padding:9px;opacity:0;transform:translateY(100%);transition:opacity var(--t),transform var(--t-fast);height:0}
.wc:hover .cta,.wc:focus-visible .cta{opacity:1;transform:none;height:auto}
.wc.show-cta .cta{opacity:1;transform:none;height:auto}
.rar-covert .n{color:var(--r-covert)} .rar-classified .n{color:var(--r-classified)} .rar-restricted .n{color:var(--r-restricted)}
.rar-milspec .n{color:var(--r-milspec)} .rar-contraband .n{color:var(--r-contraband)} .rar-industrial .n{color:var(--r-industrial)}

/* wiki cards inside article: isolate from link styles */
.article .wc,.article .wc:hover{text-decoration:none;color:var(--n900)}
.article .wc:hover{background:var(--n250)}
.article .wc .p{color:var(--n900)} .article .wc .p .c,.article .wc .p small{color:var(--n600)}
.wc .img{max-height:150px}
.side-wiki{display:grid;gap:10px}
.side-wiki .wc{display:grid;grid-template-columns:92px 1fr;gap:0 12px;align-items:center;padding:10px 12px}
.side-wiki .wc .img{aspect-ratio:4/3;max-height:70px;grid-row:1/4}
.side-wiki .wc .k{margin:0}
.side-wiki .wc .n{margin:2px 0 2px;font-size:.875rem}
.side-wiki .wc .p{font-size:.9375rem}
.side-wiki .wc .wear,.side-wiki .wc .cta{display:none}

/* FAQ */
.faq{margin:0 0 40px;border-top:1px solid var(--n800)}
.faq details{border-bottom:1px solid var(--n800)}
.faq summary{cursor:pointer;list-style:none;font-family:var(--font-display);font-weight:500;font-size:1.125rem;line-height:1.3;padding:16px 36px 16px 0;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:8px;top:22px;width:9px;height:9px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(45deg);transition:transform var(--t-fast)}
.faq details[open] summary::after{transform:rotate(-135deg);top:26px}
.faq details p{margin:0 0 18px;color:var(--ink);font-size:1.0625rem}

/* sources */
.sources{margin:0 0 40px;padding:18px 0 0;border-top:1px solid var(--n700);border-radius:0;background:transparent}
.sources .eyebrow{margin-bottom:8px;color:var(--ink-3)}
.sources ul{margin:0;padding-left:18px;font-size:.9375rem;color:var(--ink-2)}
.sources li{margin:0 0 4px}
.sources li::marker{color:var(--n600)}
.sources a{color:var(--ink);text-decoration:underline 1px var(--n600);text-underline-offset:3px}.sources a:hover{text-decoration-color:var(--ink)}

/* author box */
.author{display:grid;grid-template-columns:72px 1fr 200px;gap:20px 24px;padding:28px 28px;border:1px solid var(--n700);border-radius:var(--r-card);margin:0 0 48px;align-items:start;background:transparent}
.author .avatar{width:72px;height:72px;font-size:1.375rem}
.author img{width:72px;height:72px;border-radius:50%;object-fit:cover;background:var(--n200)}
.author .who .eyebrow{margin-bottom:4px}
.author .who>b{font-family:var(--font-display);font-weight:700;font-size:1.25rem;display:block;line-height:1.2}
.author .role{display:block;font-family:var(--font-display);font-size:.875rem;color:var(--ink-2);margin:2px 0 10px}
.author .who>p:not(.eyebrow){margin:0 0 14px;font-size:1rem;color:var(--ink);line-height:1.55}
.author .stats{list-style:none;margin:0 0 16px;padding:0;display:flex;gap:0;flex-wrap:wrap}
.author .stats li{font-family:var(--font-display);font-size:.8125rem;color:var(--ink-2);padding:0 18px 0 0;margin-right:18px;border-right:1px solid var(--n700);display:flex;flex-direction:column;gap:2px}
.author .stats li:last-child{border:0;margin:0;padding:0}
.author .stats b{font-size:1.25rem;font-weight:700;color:var(--ink);line-height:1;font-family:var(--font-digits,var(--font-display))}
.author .links{display:flex;align-items:center;gap:8px 18px;flex-wrap:wrap;font-family:var(--font-display);font-size:.875rem}
.author .links a:not(.btn){color:var(--ink);text-decoration:underline 1px var(--n600);text-underline-offset:3px}
.author .links a:not(.btn):hover{text-decoration-color:var(--ink)}
.author .amet{margin:0;padding:0 0 0 24px;border-left:1px solid var(--n700);display:flex;flex-direction:column;gap:14px;font-family:var(--font-display)}
.author .amet dt{font-size:.6875rem;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);margin-bottom:2px}
.author .amet dd{margin:0;font-size:.9375rem;color:var(--ink)}
.author .amet a{color:var(--ink);text-decoration:underline 1px var(--n600);text-underline-offset:3px}
@media (max-width:900px){.author{grid-template-columns:56px 1fr}.author .avatar,.author img{width:56px;height:56px;font-size:1.125rem}.author .amet{grid-column:1/-1;border-left:0;border-top:1px solid var(--n700);padding:16px 0 0;flex-direction:row;flex-wrap:wrap;gap:12px 28px}}
@media (max-width:640px){.author{padding:20px 18px}.author .stats li{padding-right:12px;margin-right:12px}}

/* related */
.related h2{font-family:var(--font-display);font-weight:700;font-size:1.5rem;margin:0 0 20px}
.related .grid{gap:24px}

/* sidebar */
.sidebar{position:relative;padding-top:72px}
@media (max-width:960px){.sidebar{padding-top:0}}
.sticky{position:sticky;top:24px;display:grid;gap:24px}
.toc{padding:0}
.toc .eyebrow{margin-bottom:10px}
.toc ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--n800)}
.toc a{display:block;padding:7px 0 7px 14px;font-family:var(--font-display);font-size:.875rem;font-weight:500;color:var(--ink-2);text-decoration:none;border-left:2px solid transparent;margin-left:-1px;transition:color var(--t)}
.toc a:hover{color:var(--ink)}
.toc a[aria-current]{color:var(--ink);font-weight:700;border-left-color:var(--y500)}
.side-cta{background:var(--n100);color:var(--n900);border-radius:var(--r-card);padding:24px;position:relative;overflow:hidden}
.side-cta::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px);background-size:12px 12px;mask-image:linear-gradient(to top,#000,transparent)}
.side-cta h3{font-family:var(--font-display);font-weight:700;font-size:1.25rem;margin:0 0 6px;line-height:1.15;position:relative}
.side-cta p{margin:0 0 16px;color:var(--n700);font-size:.9375rem;position:relative}
.side-cta .btn{position:relative}
.side-wiki .eyebrow{margin-bottom:10px}
.side-wiki .wc{margin-bottom:10px}
@media (max-width:960px){.sticky{position:static}.toc{order:-1}}

/* footer */
.site-footer{padding:48px 0 32px;border-top:1px solid var(--line-dark)}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;margin-bottom:40px}
.foot-grid h4{font-family:var(--font-display);font-weight:500;font-size:.8125rem;letter-spacing:.05em;text-transform:uppercase;color:var(--chrome-ink-2);margin:0 0 12px}
.foot-grid a{display:block;font-family:var(--font-display);font-size:.9375rem;color:var(--chrome-ink);text-decoration:none;padding:4px 0;opacity:.85}
.foot-grid a:hover{opacity:1;text-decoration:underline 2px var(--y500);text-underline-offset:3px}
.foot-grid p{margin:12px 0 0;color:var(--chrome-ink-2);font-size:.9375rem;max-width:36ch}
.foot-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:20px;border-top:1px solid var(--line-dark);font-family:var(--font-display);font-size:.8125rem;color:var(--chrome-ink-2)}
@media (max-width:960px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.foot-grid{grid-template-columns:1fr}}

/* =====================================================================
   COMPONENT LIBRARY v2 — rankings, tables, timeline, lists, FAQ, CTA
   ===================================================================== */

/* key facts (dark island, next to TL;DR) */
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--n300);border-radius:var(--r-card);overflow:hidden;margin:0 0 40px}
.facts div{background:var(--n100);color:var(--n900);padding:18px 20px}
.facts b{display:block;font-family:var(--font-num);font-weight:600;font-size:1.75rem;line-height:1;margin-bottom:6px;font-variant-numeric:tabular-nums}
.facts span{font-family:var(--font-display);font-size:.8125rem;color:var(--n700)}
@media (max-width:640px){.facts{grid-template-columns:1fr 1fr}}

/* ranking rows */
.rank{list-style:none;margin:0 0 40px;padding:0;counter-reset:rank}
.rank li{display:grid;grid-template-columns:40px 120px 1fr auto;gap:16px;align-items:center;padding:14px 0;border-bottom:1px solid var(--n800)}
.rank li::before{counter-increment:rank;content:"0" counter(rank);font-family:var(--font-display);font-weight:700;font-size:1.5rem;color:var(--ink);line-height:1}
.rank li:nth-child(n+10)::before{content:counter(rank)}
.rank li:first-child::before{color:var(--y400)}
.rank .thumb{background:var(--n200);border-radius:var(--r-tile);aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;padding:8px;position:relative;overflow:hidden}
.rank .thumb::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 50% at 50% 40%,rgba(255,255,255,.1),transparent 70%)}
.rank .thumb img{position:relative;max-height:100%;width:auto;filter:drop-shadow(0 6px 10px rgba(0,0,0,.4))}
.rank .name{font-family:var(--font-display);font-weight:500;font-size:1.0625rem;line-height:1.25;margin:0 0 4px;text-decoration:none;color:var(--ink);display:block}
.rank .name:hover{text-decoration:underline 3px var(--y500);text-underline-offset:3px}
.rank .sub{font-size:.9375rem;color:var(--ink-2);margin:0;line-height:1.45}
.rank .price{text-align:right;font-family:var(--font-num);font-weight:600;font-size:1.0625rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.rank .price small{display:block;font-family:var(--font-display);font-weight:500;font-size:.75rem;color:var(--ink-2);margin-top:2px}
.rank .price .btn{margin-top:8px}
.rank .rar{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:6px;vertical-align:middle}
@media (max-width:640px){.rank li{grid-template-columns:28px 84px 1fr;grid-template-rows:auto auto}.rank .price{grid-column:2/4;text-align:left;display:flex;align-items:center;gap:12px}.rank .price small{margin:0}.rank .price .btn{margin:0}}

/* data table */
.tbl{margin:0 0 40px;border-radius:var(--r-card);overflow:hidden;box-shadow:var(--shadow);background:#fff8ec}
.tbl-head{background:var(--n100);color:var(--n900);padding:14px 18px;font-family:var(--font-display);font-weight:500;font-size:.9375rem;display:flex;justify-content:space-between;align-items:center;gap:12px}
.tbl-head span{font-size:.75rem;color:var(--n700);font-weight:400}
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tbl table{width:100%;border-collapse:collapse;margin:0;font-size:1rem;min-width:520px}
.tbl th{background:var(--n150);color:var(--n700);font-family:var(--font-display);font-weight:500;font-size:.75rem;letter-spacing:.05em;text-transform:uppercase;text-align:left;padding:10px 16px;white-space:nowrap}
.tbl th.num,.tbl td.num{text-align:right;font-family:var(--font-num);font-variant-numeric:tabular-nums}
.tbl td{padding:11px 16px;border-bottom:1px solid var(--n800);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr:nth-child(even) td{background:rgba(236,230,218,.45)}
.tbl tbody tr:hover td{background:rgba(245,199,27,.12)}
.tbl td a{font-family:var(--font-display);font-weight:500;color:var(--ink);text-decoration:underline 2px var(--y500);text-underline-offset:3px}
.tbl td a:hover{background:var(--y500)}
.tbl td .btn-sm{min-height:30px;padding:6px 10px;font-size:.75rem}
.tbl .foot{padding:10px 16px;font-family:var(--font-display);font-size:.75rem;color:var(--ink-2);border-top:1px solid var(--n800)}
.article .tbl td a{font-size:1rem}

/* timeline */
.tl{margin:0 0 40px;padding:0;list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:12px;position:relative}
.tl::before{content:"";position:absolute;left:12px;right:12px;top:7px;height:2px;background:var(--n800)}
.tl li{position:relative;padding-top:24px}
.tl li::before{content:"";position:absolute;left:0;top:0;width:16px;height:16px;border-radius:50%;background:var(--paper);border:3px solid var(--ink)}
.tl li.now::before{background:var(--y500);border-color:var(--ink)}
.tl time{display:block;font-family:var(--font-display);font-size:.75rem;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2);margin-bottom:4px}
.tl b{display:block;font-family:var(--font-display);font-weight:500;font-size:1rem;line-height:1.25;margin-bottom:4px}
.tl p{margin:0;font-size:.9375rem;color:var(--ink-2);line-height:1.45}
@media (max-width:960px){.tl{grid-template-columns:1fr;gap:0;padding-left:28px}.tl::before{left:7px;top:8px;bottom:8px;right:auto;width:2px;height:auto}.tl li{padding:0 0 20px}.tl li::before{left:-28px;top:4px}}

/* check list / pros-cons */
.checks{list-style:none;padding:0;margin:0 0 32px}
.checks li{position:relative;padding-left:32px;margin:0 0 12px}
.checks li::before{content:"";position:absolute;left:0;top:5px;width:18px;height:18px;border-radius:3px;background:var(--y500)}
.checks li::after{content:"";position:absolute;left:6px;top:8px;width:5px;height:9px;border-right:2px solid var(--n100);border-bottom:2px solid var(--n100);transform:rotate(45deg)}
.checks.no li::before{background:var(--n800)} .checks.no li::after{border-color:var(--ink-2);width:8px;height:0;top:14px;left:5px;transform:none;border-right:0;border-bottom:2px solid var(--ink-2)}
.proscons{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:0 0 40px}
.proscons>div{padding:20px 24px;border:1px solid var(--n800);border-radius:var(--r-card)}
.proscons h4{font-family:var(--font-display);font-weight:500;font-size:.75rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2);margin:0 0 12px}
.proscons .checks{margin:0}
@media (max-width:640px){.proscons{grid-template-columns:1fr}}

/* steps (numbered) */
.steps{list-style:none;padding:0;margin:0 0 40px;counter-reset:step}
.steps li{position:relative;padding:0 0 20px 56px;counter-increment:step}
.steps li::before{content:counter(step);position:absolute;left:0;top:0;width:40px;height:40px;border-radius:var(--r-btn);background:var(--n100);color:var(--y500);font-family:var(--font-display);font-weight:700;font-size:1.125rem;display:flex;align-items:center;justify-content:center}
.steps b{display:block;font-family:var(--font-display);font-weight:500;font-size:1.125rem;margin-bottom:4px;line-height:1.3}
.steps p{margin:0;font-size:1.0625rem;color:var(--ink)}

/* definition cards (3-up with real content, not icon+title) */
.defs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:0 0 40px}
.defs div{border:1px solid var(--n800);border-radius:var(--r-card);padding:18px 20px;background:rgba(255,255,255,.35)}
.defs .eyebrow{margin-bottom:8px}
.defs b{display:block;font-family:var(--font-display);font-weight:500;font-size:1.0625rem;line-height:1.3;margin-bottom:6px}
.defs p{margin:0;font-size:.9375rem;color:var(--ink-2);line-height:1.5}
@media (max-width:640px){.defs{grid-template-columns:1fr}}

/* FAQ v2 */
.faq2{margin:0 0 48px;padding:0;list-style:none;counter-reset:q}
.faq2 details{border-bottom:1px solid var(--n800);counter-increment:q}
.faq2 summary{cursor:pointer;list-style:none;display:grid;grid-template-columns:40px 1fr 32px;gap:12px;align-items:start;padding:18px 0;font-family:var(--font-display);font-weight:500;font-size:1.125rem;line-height:1.3;transition:color var(--t)}
.faq2 summary::-webkit-details-marker{display:none}
.faq2 summary::before{content:counter(q,decimal-leading-zero);font-weight:700;color:var(--ink-2);font-size:.875rem;padding-top:4px}
.faq2 summary::after{content:"+";font-weight:400;font-size:1.5rem;line-height:1;color:var(--ink);text-align:right;transition:transform var(--t-fast)}
.faq2 details[open] summary::after{transform:rotate(45deg)}
.faq2 details[open] summary{color:var(--ink)}
.faq2 details[open] summary span{background:linear-gradient(transparent 60%,var(--y500) 60%)}
.faq2 .a{padding:0 0 20px 52px;font-size:1.0625rem;color:var(--ink)}
.faq2 .a p{margin:0 0 12px}
.faq2 .a a{text-decoration:underline 3px var(--y500);text-underline-offset:3px}

/* ---------- CTA family (from Figma: Subdomains › CTA) ---------- */
.cta-band{position:relative;overflow:hidden;background:var(--n100);color:var(--n900);border-radius:var(--r-card);padding:32px;margin:40px 0;display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;isolation:isolate}
.cta-band::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px);background-size:12px 12px;mask-image:linear-gradient(to right,transparent 40%,#000);z-index:-1}
.cta-band .ghost{top:auto;bottom:-10px;left:36%;font-size:7rem;-webkit-text-stroke-color:var(--n250)}
.cta-band h3{font-family:var(--font-display);font-weight:700;font-size:1.625rem;line-height:1.1;margin:0 0 6px}
.cta-band p{margin:0 0 16px;color:var(--n700);font-size:1rem}
.cta-band p em{font-style:normal;color:var(--y500)}
.cta-band .trust{display:flex;align-items:center;gap:8px;font-family:var(--font-display);font-size:.8125rem;color:var(--n700);margin-top:12px}
.cta-band .trust b{color:var(--n900);font-weight:500}
.avs{display:inline-flex}
.avs i{width:20px;height:20px;border-radius:50%;border:2px solid var(--n100);margin-left:-6px;background:linear-gradient(135deg,var(--n400),var(--n600))}
.avs i:first-child{margin-left:0}
.avs i:nth-child(2){background:linear-gradient(135deg,#8847ff,#d32ce6)} .avs i:nth-child(3){background:linear-gradient(135deg,#eb4b4b,#f08140)} .avs i:nth-child(4){background:linear-gradient(135deg,#4b69ff,#5e98d9)}
.cta-band .art{position:relative;display:flex;align-items:center;gap:12px;min-width:260px;justify-content:flex-end}
.cta-band .art img{height:110px;width:auto;filter:drop-shadow(0 10px 16px rgba(0,0,0,.5))}
.cta-band .art img+img{height:140px;margin-left:-20px;transform:rotate(-12deg)}
.cta-band .swap{width:28px;height:28px;color:var(--y500);flex:none}
.cta-band .tile{background:var(--n200);border-radius:var(--r-tile);padding:10px;width:120px;position:relative}
.cta-band .tile img{height:70px;margin:0 auto}
.cta-band .tile i{display:block;height:3px;margin-top:8px;background:linear-gradient(90deg,var(--f1) 0 7%,var(--f2) 7% 15%,var(--f3) 15% 38%,var(--f4) 38% 45%,var(--f5) 45% 100%)}
.cta-band .tile b{display:block;height:6px;width:60%;background:var(--n400);border-radius:3px;margin-top:8px}
.cta-band .tile.hi{background:var(--n250);outline:2px solid var(--y500);outline-offset:-2px}
.cta-band.compact{padding:20px 24px;margin:32px 0}
.cta-band.compact h3{font-size:1.25rem;margin:0}
.cta-band.compact .art{min-width:0}
.cta-band.compact .art img{height:64px}
@media (max-width:640px){.cta-band{grid-template-columns:1fr}.cta-band .art{justify-content:flex-start}.cta-band .ghost{display:none}}

/* marquee strip */
.marquee{display:block;overflow:hidden;max-width:100%;background:var(--n000);color:var(--y500);font-family:var(--font-display);font-weight:500;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;padding:10px 0;margin:40px 0;border-radius:4px;white-space:nowrap}
.marquee .track{display:inline-flex;gap:0;animation:mq 28s linear infinite}
.marquee span{padding:0 20px;display:inline-flex;align-items:center;gap:20px}
.marquee span b{font-weight:500;color:var(--n900)}
.marquee .m1{font-style:normal;color:var(--y500)}
.marquee a{color:inherit;text-decoration:none}
@keyframes mq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee .track{animation:none}}

/* inline price check */
.pc{display:inline-flex;align-items:center;gap:8px;background:var(--n100);color:var(--n900);border-radius:var(--r-btn);padding:6px 6px 6px 12px;font-family:var(--font-display);font-size:.875rem;font-weight:500;text-decoration:none;margin:4px 0;vertical-align:middle}
.pc .num{color:var(--y500)}
.pc .btn{min-height:30px;padding:6px 10px;font-size:.75rem}
.article a.pc{text-decoration:none;color:var(--n900)} .article a.pc:hover{background:var(--n150)}

/* entity related */
.ent{margin:48px 0 0;padding-top:32px;border-top:1px solid var(--n800)}
.ent h2{font-family:var(--font-display);font-weight:700;font-size:1.5rem;margin:0 0 6px}
.ent>p{margin:0 0 20px;color:var(--ink-2);font-size:1rem}
.ent-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:24px}
.ent-card{border:1px solid var(--n800);border-radius:var(--r-card);padding:16px 18px;background:rgba(255,255,255,.35)}
.ent-card .eyebrow{margin-bottom:6px}
.ent-card h3{font-family:var(--font-display);font-weight:500;font-size:1.0625rem;margin:0 0 10px;line-height:1.3}
.ent-card ul{list-style:none;margin:0;padding:0}
.ent-card li{font-size:.9375rem;line-height:1.4;margin:0 0 6px;padding-left:14px;position:relative}
.ent-card li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;background:var(--y500);border-radius:1px}
.ent-card a{color:var(--ink);text-decoration:none}
.ent-card a:hover{text-decoration:underline 2px var(--y500);text-underline-offset:3px}
.ent-card .wiki{display:inline-flex;margin-top:8px;font-family:var(--font-display);font-size:.8125rem;font-weight:500;color:var(--ink-2)}
.ent-chips{display:flex;flex-wrap:wrap;gap:8px}
@media (max-width:960px){.ent-grid{grid-template-columns:1fr}}

.faq2.bytype summary::before{display:none}
.faq2.bytype summary{grid-template-columns:1fr 32px}
.faq2.bytype .a{padding-left:0}
.faq2.bytype .a table{min-width:0}
/* overflow guard: grid/flex children never grow past their track */
.post-layout>*,.article,.article>*{min-width:0;max-width:100%}
.marquee{contain:inline-size}
@media (max-width:640px){.rank .price{flex-wrap:wrap;white-space:normal;row-gap:6px}.rank .price small{flex-basis:100%}}
.faq2 .a{overflow-x:auto}
.faq2 .a table{min-width:420px}
.faq2 details,.faq2 summary{min-width:0;max-width:100%}
.faq2 summary{overflow:hidden}
.faq2 summary span{display:block;min-width:0;overflow-wrap:anywhere}
/* table item cell with CDN thumbnail */
.tbl td.item{display:flex;align-items:center;gap:12px;min-width:220px}
.tbl td.item .th{flex:none;width:64px;height:48px;background:var(--n200);border-radius:var(--r-tile);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.tbl td.item .th::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 50% at 50% 40%,rgba(255,255,255,.12),transparent 70%)}
.tbl td.item .th img{position:relative;max-width:56px;max-height:40px;width:auto;height:auto;filter:drop-shadow(0 3px 5px rgba(0,0,0,.45))}
.tbl td.item .t{display:block;font-family:var(--font-display);font-size:.6875rem;color:var(--ink-2);margin-top:2px}

/* decorated item cells in plain article tables */
.article table td.item{display:flex;align-items:center;gap:12px}
.article table td.item .th{flex:none;width:64px;height:48px;background:var(--n200);border-radius:var(--r-tile);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.article table td.item .th::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 50% at 50% 40%,rgba(255,255,255,.12),transparent 70%)}
.article table td.item .th img{position:relative;max-width:56px;max-height:40px;width:auto;height:auto;filter:drop-shadow(0 3px 5px rgba(0,0,0,.45))}
.article table td.item .t{display:block;font-family:var(--font-display);font-size:.6875rem;color:var(--ink-2);margin-top:2px}
.article table td.item a{font-family:var(--font-display);font-weight:500}
.article table td{vertical-align:middle}

/* ---------- YouTube facade (.yt) ---------- */
.yt{margin:32px 0 40px;background:var(--n100);color:var(--n900);border-radius:var(--r-card);overflow:hidden}
.yt .frame{position:relative;aspect-ratio:16/9;background:var(--n000);cursor:pointer;display:block;width:100%;border:0;padding:0;overflow:hidden}
.yt .frame img{width:100%;height:100%;object-fit:cover;opacity:.9;transition:transform 400ms cubic-bezier(.2,.7,.2,1),opacity var(--t)}
.yt .frame:hover img{transform:scale(1.03);opacity:1}
.yt .frame::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(29,28,26,.75),transparent 55%)}
.yt .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:72px;height:72px;border-radius:50%;background:var(--y500);display:flex;align-items:center;justify-content:center;z-index:1;transition:transform var(--t-fast),background var(--t);box-shadow:0 12px 24px rgba(0,0,0,.35)}
.yt .play::before{content:"";margin-left:5px;border-style:solid;border-width:12px 0 12px 20px;border-color:transparent transparent transparent var(--n100)}
.yt .frame:hover .play{transform:translate(-50%,-50%) scale(1.06);background:var(--y800)}
.yt .frame:focus-visible{outline:none;box-shadow:inset 0 0 0 4px rgba(245,199,27,.6)}
.yt .dur{position:absolute;right:14px;bottom:14px;z-index:1;font-family:var(--font-num);font-size:.75rem;font-weight:600;background:rgba(29,28,26,.85);color:var(--n900);padding:3px 7px;border-radius:3px}
.yt .meta-bar{display:flex;align-items:center;gap:14px;padding:14px 18px}
.yt .ch{width:36px;height:36px;border-radius:50%;background:var(--y500);color:var(--n100);display:flex;align-items:center;justify-content:center;flex:none;overflow:hidden}
.yt .ch img{width:100%;height:100%;object-fit:cover}
.yt .meta-bar b{display:block;font-family:var(--font-display);font-weight:500;font-size:1rem;line-height:1.25}
.yt .meta-bar span{font-family:var(--font-display);font-size:.8125rem;color:var(--n700)}
.yt .meta-bar a.btn{margin-left:auto}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt figcaption{padding:0 18px 14px;font-family:var(--font-display);font-size:.8125rem;color:var(--n700)}
@media (max-width:640px){.yt .play{width:56px;height:56px}.yt .meta-bar a.btn{display:none}}

/* ---------- item entry (the pattern behind the top-traffic lists) ---------- */
.entry{display:grid;grid-template-columns:240px 1fr;gap:24px;padding:28px 0;border-top:1px solid var(--n800);align-items:start}
.entry:last-of-type{border-bottom:1px solid var(--n800);margin-bottom:40px}
.entry .pic{background:var(--n200);border-radius:var(--r-card);aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;padding:16px;position:relative;overflow:hidden}
.entry .pic::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 50% at 50% 40%,rgba(255,255,255,.1),transparent 70%)}
.entry .pic img{position:relative;max-width:100%;max-height:100%;width:auto;height:auto;filter:drop-shadow(0 10px 16px rgba(0,0,0,.45))}
.entry .pic .n{position:absolute;left:10px;top:10px;font-family:var(--font-display);font-weight:700;font-size:.8125rem;color:var(--y500);background:rgba(29,28,26,.8);padding:3px 7px;border-radius:3px}
.entry h3{margin:0 0 10px!important;font-size:1.375rem!important;line-height:1.2}
.entry h3 a{color:var(--ink);text-decoration:none}
.entry h3 a:hover{text-decoration:underline 3px var(--y500);text-underline-offset:4px}
.entry h3 .rar{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:8px;vertical-align:middle}
.entry .kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px 16px;margin:0 0 14px;padding:12px 0;border-top:1px solid var(--n800);border-bottom:1px solid var(--n800)}
.entry .kv div{display:grid;gap:2px}
.entry .kv dt{font-family:var(--font-display);font-size:.6875rem;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2)}
.entry .kv dd{margin:0;font-family:var(--font-display);font-weight:500;font-size:.9375rem}
.entry .kv dd.num{font-family:var(--font-num);font-weight:600}
.entry p{margin:0 0 12px;font-size:1.0625rem}
.entry .act{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.entry .act small{font-family:var(--font-display);font-size:.75rem;color:var(--ink-2)}
@media (max-width:640px){.entry{grid-template-columns:1fr}.entry .pic{aspect-ratio:16/10}}

/* ---------- hero slider ---------- */
.slider{position:relative}
.slider .feature{display:none}
.slider .feature.is-active{display:grid}
.slider .dots{display:flex;gap:6px;margin-top:16px}
.slider .dots button{width:28px;height:4px;border:0;border-radius:2px;background:var(--n300);cursor:pointer;padding:0;transition:background var(--t)}
.slider .dots button[aria-current]{background:var(--y500)}
.slider .dots button:focus-visible{box-shadow:0 0 0 3px rgba(245,199,27,.4)}
.slider .bar{position:absolute;left:0;right:0;top:0;height:3px;background:var(--y500);transform-origin:left;transform:scaleX(0);z-index:2;border-radius:3px 3px 0 0}
.slider.playing .bar{animation:sl 3s linear forwards}
@keyframes sl{to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.slider .bar{display:none}}

/* post hero ghost = primary entity */
.post-hero .ghost{top:16px;bottom:auto;right:-2%;left:auto;font-size:clamp(4rem,11vw,10rem);-webkit-text-stroke-color:var(--n250)}

/* ---------- agents band (before footer) ---------- */
.agents{position:relative;background:var(--n000);color:var(--n900);overflow:hidden;isolation:isolate}
.agents .monkey{position:absolute;left:50%;top:50%;width:min(820px,110vw);transform:translate(-50%,-46%);opacity:.055;z-index:-1;filter:grayscale(1) brightness(3);pointer-events:none}
.agents .ghost{left:-1%;top:28%;font-size:clamp(5rem,13vw,12rem);-webkit-text-stroke-color:var(--n200)}
.agents .wrap{display:grid;grid-template-columns:1fr 512px;gap:24px;align-items:end;min-height:0}
.agents .copy{padding:40px 0 36px}
.agents h2{color:var(--chrome-head);font-family:var(--font-display);font-weight:700;font-size:clamp(1.375rem,2.2vw,1.75rem);line-height:1.1;margin:0 0 8px;max-width:26ch}
.agents h2 em{font-style:normal;color:var(--y500)}
.agents p{margin:0 0 16px;color:var(--n700);max-width:60ch;font-size:.9375rem}
.agents .stats{display:flex;gap:24px;margin-top:20px;flex-wrap:wrap}
.agents .stats b{display:block;font-family:var(--font-num);font-weight:600;font-size:1.25rem;font-variant-numeric:tabular-nums;min-width:7ch}
.agents .stats span{font-family:var(--font-display);font-size:.8125rem;color:var(--n700)}
.agents .figure{position:relative;align-self:end;height:384px;display:flex;align-items:flex-end;justify-content:center}
.agents .figure img{height:384px;width:512px;max-width:none;filter:drop-shadow(0 20px 30px rgba(0,0,0,.6));transform:translateY(4%);image-rendering:auto}
.agents .figure .tag{position:absolute;right:0;bottom:10px;background:rgba(29,28,26,.75);padding:3px 8px;border-radius:4px;font-family:var(--font-display);font-size:.6875rem;color:var(--n500);letter-spacing:.05em;text-transform:uppercase}
@media (max-width:1100px){.agents .wrap{grid-template-columns:1fr 384px}.agents .figure{height:288px}.agents .figure img{height:288px;width:384px}}
@media (max-width:960px){.agents .wrap{grid-template-columns:1fr}.agents .figure{height:auto;justify-content:center}.agents .figure img{height:auto;width:min(400px,100%)}.agents .copy{padding:36px 0 0}.agents .stats b{min-width:0}}

/* ---------- Google preferred source ---------- */
.gsrc{display:inline-flex;align-items:center;gap:12px;background:var(--n000);border:1px solid var(--n300);border-radius:var(--r-card);padding:10px 14px 10px 10px;text-decoration:none;color:var(--n900);transition:border-color var(--t),transform var(--t-fast)}
.gsrc:hover{border-color:var(--y500);transform:translateY(-1px)}
.gsrc .g{width:32px;height:32px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;flex:none}
.gsrc .g svg{width:18px;height:18px}
.gsrc small{display:block;font-family:var(--font-display);font-size:.625rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--n600)}
.gsrc b{display:block;font-family:var(--font-display);font-weight:500;font-size:.875rem;line-height:1.2}
.gsrc .arr{margin-left:4px;color:var(--y500);font-size:1rem}
.post-hero .byrow{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.foot-bottom .gsrc{padding:6px 10px 6px 6px;border-color:var(--n250)} .foot-bottom .gsrc .g{width:24px;height:24px}.foot-bottom .gsrc .g svg{width:13px;height:13px}
@media (max-width:640px){.post-hero .gsrc{width:100%;justify-content:center}}

/* ---------- sticky CTA ---------- */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:50;transform:translateY(110%);transition:transform 320ms cubic-bezier(.2,.7,.2,1)}
.sticky-cta.show{transform:none}
.sticky-cta .in{width:min(var(--wide),100% - 32px);margin:0 auto 12px;display:flex;align-items:center;gap:16px;min-height:56px;padding:8px 8px 8px 16px;border-radius:var(--r-card);box-shadow:0 12px 32px rgba(0,0,0,.35)}
.sticky-cta.v-dark .in{background:var(--n000);color:var(--n900);border:1px solid var(--n300)}
.sticky-cta.v-yellow .in{background:var(--y500);color:var(--n100)}
.sticky-cta.v-item .in{background:var(--n100);color:var(--n900);border:1px solid var(--n300)}
.sticky-cta .msg{font-family:var(--font-display);font-weight:500;font-size:.9375rem;line-height:1.25;flex:1;min-width:0}
.sticky-cta .msg em{font-style:normal;color:var(--y500)} .sticky-cta.v-yellow .msg em{color:var(--n100);text-decoration:underline 2px var(--n100);text-underline-offset:3px}
.sticky-cta .msg small{display:block;font-weight:400;font-size:.8125rem;opacity:.75}
.sticky-cta .it{width:64px;height:44px;flex:none;display:flex;align-items:center;justify-content:center}
.sticky-cta .it img{max-height:40px;width:auto;filter:drop-shadow(0 4px 6px rgba(0,0,0,.5))}
.sticky-cta .btn{flex:none}
.sticky-cta.v-yellow .btn-primary{background:var(--n100);color:var(--y500)} .sticky-cta.v-yellow .btn-primary:hover{background:var(--n150)}
.sticky-cta .x{flex:none;width:36px;height:36px;border:0;background:transparent;color:inherit;opacity:.6;cursor:pointer;font-size:1.25rem;line-height:1;border-radius:var(--r-btn)}
.sticky-cta .x:hover{opacity:1}
@media (max-width:640px){.sticky-cta .in{margin-bottom:8px;gap:10px;padding:8px}.sticky-cta .msg small{display:none}.sticky-cta .it{display:none}.sticky-cta .btn{padding:10px 14px}}
@media (prefers-reduced-motion:reduce){.sticky-cta{transition:none}}

/* ---------- bottom line (verdict) ---------- */
.verdict{background:var(--n000);color:var(--n900);border-radius:var(--r-card);padding:28px 28px 24px;margin:48px 0 40px;display:grid;grid-template-columns:48px 1fr;gap:20px;position:relative;overflow:hidden}
.verdict::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px);background-size:12px 12px;mask-image:linear-gradient(to left,#000,transparent 60%)}
.verdict .avatar{width:48px;height:48px;font-size:1rem;position:relative}
.verdict .eyebrow{color:var(--y500);margin-bottom:8px;position:relative}
.verdict h2{font-family:var(--font-display);font-weight:700;font-size:1.375rem!important;line-height:1.2;margin:0 0 10px!important;color:var(--n900);position:relative}
.verdict p{margin:0 0 10px;font-size:1.0625rem;line-height:1.55;position:relative}
.verdict p:last-of-type{margin:0}
.verdict .act{margin-top:16px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;position:relative}
.verdict .act small{font-family:var(--font-display);font-size:.8125rem;color:var(--n700)}
@media (max-width:640px){.verdict{grid-template-columns:1fr;padding:22px 20px}.verdict .avatar{display:none}}

/* ---------- article rating ("Was this article helpful?") — dark block, like verdict ---------- */
.rate{margin:40px 0 8px;padding:22px 24px;background:var(--n000);color:var(--n900);border-radius:var(--r-card);display:flex;align-items:center;justify-content:space-between;gap:16px 24px;flex-wrap:wrap}
.rate .q{font-family:var(--font-display);font-weight:500;font-size:1rem;margin:0;color:var(--n900)}
.rate .q small{display:block;font-family:var(--font-body);font-weight:400;font-size:.875rem;color:var(--n700);margin-top:2px}
.rate .stars{display:inline-flex;gap:2px;direction:rtl}
.rate .stars button{appearance:none;border:0;background:transparent;padding:4px;width:40px;height:40px;cursor:pointer;color:var(--n300);border-radius:var(--r-btn);transition:color var(--t),transform var(--t)}
.rate .stars button svg{width:28px;height:28px;fill:currentColor}
.rate .stars button:hover,.rate .stars button:hover~button,.rate .stars button.on,.rate .stars button.on~button{color:var(--y500)}
.rate .stars button:hover{transform:scale(1.12)}
.rate .stars button:focus-visible{outline:2px solid var(--y500);outline-offset:2px}
.rate .agg{font-family:var(--font-display);font-size:.8125rem;color:var(--n700);margin:0;display:flex;align-items:center;gap:6px;flex-basis:100%}
.rate .agg b{color:var(--n900);font-weight:500}
.rate .agg .dot{width:4px;height:4px;border-radius:50%;background:var(--n400);display:inline-block}
.rate .why{flex-basis:100%;display:none;gap:8px;flex-wrap:wrap;align-items:center}
.rate.low .why{display:flex}
.rate .why span{font-family:var(--font-display);font-size:.8125rem;color:var(--n700);margin-right:4px}
.rate .why button{appearance:none;font-family:var(--font-display);font-size:.8125rem;font-weight:500;min-height:36px;padding:6px 12px;border-radius:999px;border:1px solid var(--n300);background:transparent;color:var(--n900);cursor:pointer;transition:background var(--t),color var(--t),border-color var(--t)}
.rate .why button:hover,.rate .why button.on{background:var(--y500);color:var(--n100);border-color:var(--y500)}
.rate .thanks{flex-basis:100%;display:none;font-family:var(--font-display);font-size:.875rem;color:var(--n900)}
.rate.done .thanks{display:block}
.rate.done .why{display:none}
@media (max-width:640px){.rate{padding:18px 16px}.rate .stars button{width:36px;height:36px}.rate .stars button svg{width:24px;height:24px}}

/* ---------- back to top ---------- */
.totop{position:fixed;right:20px;bottom:88px;z-index:49;width:44px;height:44px;border-radius:50%;background:var(--n000);color:var(--n900);border:1px solid var(--n300);box-shadow:0 8px 24px rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity var(--t),transform var(--t),background var(--t)}
.totop.show{opacity:1;transform:none;pointer-events:auto}
.totop svg{width:22px;height:22px;fill:currentColor}
.totop:hover{background:var(--y500);color:var(--n100);border-color:var(--y500)}
.totop:focus-visible{outline:2px solid var(--y500);outline-offset:2px}
@media (max-width:640px){.totop{right:12px;bottom:76px;width:40px;height:40px}}
@media (prefers-reduced-motion:reduce){.totop{transition:none}}

/* sticky CTA: on desktop sits under the article column only, never over the sidebar */
@media (min-width:961px){.sticky-cta .in{width:var(--text);margin-left:max(16px,calc(50% - (var(--text) + 48px + var(--side)) / 2))}}
@media (min-width:961px) and (max-width:1216px){.sticky-cta .in{width:calc(100% - var(--side) - 48px - 32px);margin-left:16px}}

.author .amet div{text-align:left}
@media (min-width:961px){.sticky-cta .msg small{display:none}.sticky-cta .in{min-height:52px}}


/* ===========================================================================
   2. WordPress layer
   ======================================================================== */

/* a11y */
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--y500);color:var(--n100);padding:10px 14px;border-radius:var(--r-btn);font-family:var(--font-display);font-weight:500}
.skip:focus{left:8px}
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal!important}

/* header: language menu (button version of the prototype chip) + mobile nav row */
.site-header{height:auto}
.site-header>.wrap{height:64px}
.lang-switch{position:relative}
button.lang{appearance:none;background:transparent;cursor:pointer;line-height:1}
.lang .code{letter-spacing:.04em}
.lang svg{width:10px;height:7px;opacity:.7}
.lang[aria-expanded="true"]{color:var(--chrome-ink);border-color:var(--n400)}
.lang-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:60;min-width:200px;margin:0;padding:6px;list-style:none;background:var(--n100);border:1px solid var(--n300);border-radius:var(--r-card);box-shadow:0 12px 32px rgba(0,0,0,.35)}
.lang-menu[hidden]{display:none}
.lang-menu a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--r-btn);color:var(--chrome-ink);text-decoration:none;font-family:var(--font-display);font-size:.875rem}
.lang-menu a .code{width:28px;font-size:.75rem;font-weight:500;color:var(--chrome-ink-2)}
.lang-menu a:hover{background:var(--n150)}
.lang-menu a[aria-current]{background:var(--n200)} .lang-menu a[aria-current] .code{color:var(--y500)}
.nav-mobile{display:none}
@media (max-width:960px){
  .lang{display:flex}
  .nav-mobile{display:flex;gap:4px;margin:0;padding:0 16px 10px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .nav-mobile::-webkit-scrollbar{display:none}
  .nav-mobile a{flex:none}
}
@media (max-width:480px){
  .site-header>.wrap{gap:12px}
  .site-header .logo img{height:32px}
  .site-header .logo .blog{display:none}
  .site-header .header-right{gap:8px}
  .site-header .header-right .btn{min-height:36px;padding:8px 12px;font-size:.8125rem}
  .lang{padding:7px 8px}
}

/* byline name links to the author page */
.byline .name{color:inherit;text-decoration:none}
.byline .name:hover b{text-decoration:underline 2px var(--y500);text-underline-offset:3px}
img.avatar{border-radius:50%;object-fit:cover;background:var(--n200)}

/* compact hero (archives, paged home, 404, search) */
.hero-compact{padding:32px 0 48px}
.hero-compact .hero-head{margin-bottom:0}
.hero-compact .hero-head h1{font-size:clamp(1.75rem,3.4vw,2.5rem)}
.hero-compact .hero-head h1 small{font-size:.5em;font-weight:500;color:var(--chrome-ink-2);margin-left:8px;text-transform:none}
.hero-compact .desc{color:var(--chrome-ink-2);max-width:60ch;font-size:1.0625rem;margin-top:8px}
.hero-compact .desc p{margin:0 0 8px}
.hero-compact .crumbs{position:relative}
.page-hero{padding-bottom:64px}

/* listing states */
.empty{padding:48px 0;display:grid;gap:16px;justify-items:start;color:var(--ink-2);font-size:1.125rem}
.empty p{margin:0;max-width:60ch}
.latest .ph{display:block;aspect-ratio:16/10;border-radius:4px;background:var(--n200)}
.card .media:empty,.feature .media:empty{background:linear-gradient(135deg,var(--n150),var(--n250))}
.pager .dots{display:inline-flex;align-items:center;min-width:24px;justify-content:center;color:var(--ink-2)}
.section .promo{margin-top:56px}

/* footer languages */
.foot-langs{display:flex;flex-wrap:wrap;gap:4px 14px}
.foot-langs a{color:var(--chrome-ink-2);text-decoration:none}
.foot-langs a:hover,.foot-langs a[aria-current]{color:var(--chrome-ink)}

/* static pages */
.page-layout{max-width:var(--text);margin-inline:auto}

/* core blocks inside the article (Gutenberg output) */
.article .wp-block-image{margin:32px 0}
.article .wp-block-image img{border-radius:var(--r-card);height:auto}
.article .wp-block-image figcaption,.article .wp-element-caption{font-family:var(--font-display);font-size:.8125rem;color:var(--ink-2);margin-top:10px;text-align:left}
.article .aligncenter{margin-inline:auto;text-align:center}
.article .alignleft{float:left;margin:4px 24px 16px 0;max-width:50%}
.article .alignright{float:right;margin:4px 0 16px 24px;max-width:50%}
.article .wp-block-table{margin:0 0 32px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.article .wp-block-table table{margin:0;min-width:520px}
.article .wp-block-embed{margin:32px 0}
.article .wp-block-embed__wrapper{position:relative}
.article .wp-embed-aspect-16-9 .wp-block-embed__wrapper{aspect-ratio:16/9}
.article .wp-embed-aspect-16-9 iframe{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:var(--r-card)}
.article .wp-block-separator{border:0;border-top:1px solid var(--n800);margin:40px 0}
.article .wp-block-quote{margin:32px 0;padding:0 0 0 20px;border-left:3px solid var(--ink)}
.article .wp-block-quote p{font-family:var(--font-display);font-size:1.25rem;line-height:1.35;font-weight:500;margin:0 0 8px}
.article .wp-block-quote cite{font-family:var(--font-display);font-size:.8125rem;color:var(--ink-2);font-style:normal}
.article .has-text-align-center{text-align:center}
.article .wp-block-buttons{display:flex;gap:12px;flex-wrap:wrap;margin:24px 0}
.article .wp-block-button__link{display:inline-flex;align-items:center;min-height:44px;padding:10px 20px;border-radius:var(--r-btn);background:var(--y500);color:var(--n100);font-family:var(--font-display);font-weight:500;font-size:.875rem;text-decoration:none}
.article .wp-block-button__link:hover{background:var(--y800)}
.article h4{font-family:var(--font-display);font-weight:500;font-size:1.0625rem;margin:24px 0 8px}
.article code{font-size:.9em;background:var(--n800);padding:1px 5px;border-radius:3px}
.article::after{content:"";display:table;clear:both}

/* byline meta: symmetric dot spacing */
.meta .dot::before{margin:0 8px 0 0}

/* Wiki cards: pending state and single-card grid */
.wc-pending{padding:14px 12px}
.wiki-one{grid-template-columns:minmax(0,260px)}
.pc-wrap{margin:0 0 24px}
/* agents band: the agent name links to its wiki page */
.agents a.tag{text-decoration:none;transition:color var(--t),background var(--t)}
.agents a.tag:hover{color:var(--y500);background:rgba(29,28,26,.92)}

/* List block styles (skinsmonkey-blocks): editor-friendly versions of checks / steps / timeline.
   Steps: "<strong>Title</strong> text". Timeline: "<em>Nov 2016</em> <strong>Glove Case</strong> text"; last item = current. */
.wp-block-list.is-style-sm-timeline{margin:0 0 40px;padding:0;list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:12px;position:relative}
.wp-block-list.is-style-sm-timeline::before{content:"";position:absolute;left:12px;right:12px;top:7px;height:2px;background:var(--n800)}
.wp-block-list.is-style-sm-timeline li{position:relative;padding-top:24px}
.wp-block-list.is-style-sm-timeline li::before{content:"";position:absolute;left:0;top:0;width:16px;height:16px;border-radius:50%;background:var(--paper);border:3px solid var(--ink)}
.wp-block-list.is-style-sm-timeline li:last-child::before{background:var(--y500);border-color:var(--ink)}
.wp-block-list.is-style-sm-timeline em{display:block;font-family:var(--font-display);font-size:.75rem;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2);margin-bottom:4px}
.wp-block-list.is-style-sm-timeline strong{display:block;font-family:var(--font-display);font-weight:500;font-size:1rem;line-height:1.25;margin-bottom:4px}
.wp-block-list.is-style-sm-timeline p{margin:0;font-size:.9375rem;color:var(--ink-2);line-height:1.45}
@media (max-width:960px){.wp-block-list.is-style-sm-timeline{grid-template-columns:1fr;gap:0;padding-left:28px}.wp-block-list.is-style-sm-timeline::before{left:7px;top:8px;bottom:8px;right:auto;width:2px;height:auto}.wp-block-list.is-style-sm-timeline li{padding:0 0 20px}.wp-block-list.is-style-sm-timeline li::before{left:-28px;top:4px}}
.wp-block-list:is(.is-style-sm-checks,.is-style-sm-no){list-style:none;padding:0;margin:0 0 32px}
.wp-block-list:is(.is-style-sm-checks,.is-style-sm-no) li{position:relative;padding-left:32px;margin:0 0 12px}
.wp-block-list:is(.is-style-sm-checks,.is-style-sm-no) li::before{content:"";position:absolute;left:0;top:5px;width:18px;height:18px;border-radius:3px;background:var(--y500)}
.wp-block-list:is(.is-style-sm-checks,.is-style-sm-no) li::after{content:"";position:absolute;left:6px;top:8px;width:5px;height:9px;border-right:2px solid var(--n100);border-bottom:2px solid var(--n100);transform:rotate(45deg)}
.wp-block-list.is-style-sm-no li::before{background:var(--n800)} .wp-block-list.is-style-sm-no li::after{border-color:var(--ink-2);width:8px;height:0;top:14px;left:5px;transform:none;border-right:0;border-bottom:2px solid var(--ink-2)}
.wp-block-list.is-style-sm-steps{list-style:none;padding:0;margin:0 0 40px;counter-reset:step}
.wp-block-list.is-style-sm-steps li{position:relative;padding:0 0 20px 56px;counter-increment:step}
.wp-block-list.is-style-sm-steps li::before{content:counter(step);position:absolute;left:0;top:0;width:40px;height:40px;border-radius:var(--r-btn);background:var(--n100);color:var(--y500);font-family:var(--font-display);font-weight:700;font-size:1.125rem;display:flex;align-items:center;justify-content:center}
.wp-block-list.is-style-sm-steps strong{display:block;font-family:var(--font-display);font-weight:500;font-size:1.125rem;margin-bottom:4px;line-height:1.3}
.wp-block-list.is-style-sm-steps p{margin:0;font-size:1.0625rem;color:var(--ink)}
.wp-block-list:is(.is-style-sm-steps,.is-style-sm-timeline) strong{display:block}
.wp-block-list.is-style-sm-timeline em{display:block;font-style:normal}
.wp-block-list.is-style-sm-timeline li{font-size:.9375rem;color:var(--ink-2);line-height:1.45}
.wp-block-list.is-style-sm-timeline strong{color:var(--ink)}
.wp-block-list.is-style-sm-steps li{margin:0}
.wp-block-list:is(.is-style-sm-checks,.is-style-sm-no,.is-style-sm-steps,.is-style-sm-timeline) li::marker{content:none}
/* buttons inside the article never get the link marker */
.article a.btn,.article a.btn:hover{text-decoration:none}
.article a.btn-primary{color:var(--n100)} .article a.btn-primary:hover{background:var(--y800)}
.article a.btn-ghost{color:var(--ink)} .article a.btn-ghost:hover{background:var(--ink);color:var(--paper)}

/* ---------- slider, home and in-page navigation ---------- */
/* Hero slider: every slide has the same height. Title is always two lines (ellipsis on the second),
   eyebrow and meta stay on one line, so switching slides never moves the page. */
.slider .feature h2{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;min-height:2.3em;padding-bottom:.08em}
.slider .feature .eyebrow,.slider .feature .meta{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slider .feature .meta{flex-wrap:nowrap}
.slider .feature .meta span{flex:none} .slider .feature .meta span:last-child{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}

/* Home: fewer posts than the hero holds */
.empty-note{margin:8px 0 40px;color:var(--ink-2);font-family:var(--font-display);font-size:.9375rem}

/* Smooth in-page jumps (TOC, back to top) and headings never land under the top edge */
html{scroll-padding-top:96px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
.article :is(h2,h3,h4)[id]{scroll-margin-top:96px}
.toc a{transition:color var(--t),border-color var(--t),background var(--t)}
.toc a[aria-current]{background:linear-gradient(90deg,rgba(245,199,27,.14),transparent 85%)}

/* FAQ highlight follows the text, not the whole row (the span is a grid item, so it is always a block) */
.faq2 details[open] summary span{background:none;text-decoration:underline .42em rgba(245,199,27,.9);text-underline-offset:-.28em;text-decoration-skip-ink:none}

/* "Show all N … with prices" (faq2.bytype): stacked cards; open card gets the dark table header look */
.faq2.bytype{display:grid;gap:10px}
.faq2.bytype details{border:1px solid var(--n800);border-radius:var(--r-card);background:#fff8ec;overflow:hidden;transition:border-color var(--t),box-shadow var(--t)}
.faq2.bytype details:hover{border-color:var(--n600)}
.faq2.bytype details[open]{border-color:var(--n100);box-shadow:var(--shadow)}
.faq2.bytype summary{grid-template-columns:1fr 32px;align-items:center;gap:16px;padding:12px 12px 12px 18px;font-size:1rem;line-height:1.35}
.faq2.bytype summary span{text-decoration:none}
.faq2.bytype details[open] summary{background:var(--n100);color:var(--n900)}
.faq2.bytype details[open] summary span{text-decoration:none}
.faq2.bytype summary::after{content:"";width:32px;height:32px;border-radius:50%;background:var(--n800) no-repeat center/14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2321201e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");transition:transform var(--t-fast),background-color var(--t)}
.faq2.bytype summary:hover::after{background-color:var(--y500)}
.faq2.bytype details[open] summary::after{transform:rotate(180deg);background-color:var(--y500)}
.faq2.bytype summary:focus-visible{box-shadow:inset 0 0 0 3px rgba(245,199,27,.6);border-radius:0}
.faq2.bytype .a{padding:0}
.faq2.bytype .a table{margin:0;width:100%}
@media (max-width:640px){.faq2.bytype summary{padding:10px 10px 10px 14px;font-size:.9375rem}}

/* CTA band: real member avatars (same as the main site) */
.avs{display:inline-flex;align-items:center}
.avs img{width:24px;height:24px;border-radius:50%;border:2px solid var(--n100);margin-left:-6px;object-fit:cover;background:var(--n300);position:relative}
.avs img:first-child{margin-left:0}
.avs img:nth-child(1){z-index:5} .avs img:nth-child(2){z-index:4} .avs img:nth-child(3){z-index:3} .avs img:nth-child(4){z-index:2} .avs img:nth-child(5){z-index:1}

/* YouTube: channel bar like the prototype; the playing iframe sits above the gradient so every control works */
.yt .frame.is-on{cursor:auto}
.yt .frame.is-on::after{display:none}
.yt .frame.is-on iframe{z-index:2}
.yt.playing .meta-bar{border-top:1px solid var(--line-dark)}
.yt .ch{width:40px;height:40px}
.yt .ch-yt{background:#ff0033;color:#fff} .yt .ch-yt svg{width:22px;height:22px}
.yt .meta-bar > div{min-width:0}
.yt .meta-bar b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.yt .meta-bar .btn-ghost{color:var(--n900);border-color:var(--n400);text-decoration:none}
.yt .meta-bar .btn-ghost:hover{background:var(--n900);color:var(--n100)}
.yt figcaption{border-top:1px solid var(--line-dark);padding-top:12px}

/* Sticky CTA: "$5 free" coupon */
.sticky-cta .bonus{flex:none;display:grid;justify-items:center;line-height:1.1;padding:6px 12px;border:1.5px dashed var(--y500);border-radius:6px;color:var(--y500);font-family:var(--font-display);text-align:center;position:relative}
.sticky-cta .bonus b{font-weight:700;font-size:.875rem;letter-spacing:.02em;white-space:nowrap}
.sticky-cta .bonus small{font-size:.6875rem;font-weight:500;color:var(--n700);white-space:nowrap;margin-top:2px}
.sticky-cta .bonus code{font-family:var(--font-display);font-weight:700;color:var(--n900);letter-spacing:.06em}
.sticky-cta.v-yellow .bonus{border-color:var(--n100);color:var(--n100)} .sticky-cta.v-yellow .bonus small{color:var(--n300)} .sticky-cta.v-yellow .bonus code{color:var(--n100)}
.sticky-cta.v-item .bonus small{color:var(--n700)}
@media (max-width:640px){.sticky-cta .bonus{padding:4px 8px}.sticky-cta .bonus b{font-size:.75rem}.sticky-cta .bonus small{font-size:.625rem}.sticky-cta .msg{font-size:.8125rem}}
/* phones: no room for the sentence next to coupon + button, the coupon becomes the message */
@media (max-width:560px){.sticky-cta .msg{display:none}.sticky-cta .bonus{flex:1;justify-items:start;text-align:left;padding:6px 10px}.sticky-cta .bonus b{font-size:.875rem}.sticky-cta .bonus small{font-size:.6875rem}}

/* Marquee inside an article: never take the generic yellow link hover (yellow text on yellow) */
.article a.marquee,.article a.marquee:hover{background:var(--n000);color:var(--y500);text-decoration:none}
.marquee{transition:box-shadow var(--t)}
.marquee:hover,.marquee:focus-visible{box-shadow:inset 0 0 0 2px var(--y500)}
.marquee:hover .track{animation-play-state:paused}
.marquee span b{transition:color var(--t)}
.marquee:hover span b{color:var(--y500)}

/* Sticky CTA: coupon and button share one height */
.sticky-cta .bonus,.sticky-cta .btn{height:44px;min-height:44px;box-sizing:border-box}
.sticky-cta .bonus{align-content:center;padding-top:0;padding-bottom:0}
.sticky-cta .btn{padding-top:0;padding-bottom:0}

/* ---------- post: article on a white card, set deeper into the dark hero ---------- */
:root{--card:#fff;--sink:150px}
.post-hero{padding-bottom:calc(var(--sink) + 40px)}
.post-body{margin-top:calc(-1 * var(--sink))}
.post-card{background:var(--card);border-radius:12px;padding:16px 16px 8px;box-shadow:0 1px 2px rgba(33,32,30,.06),0 12px 32px -12px rgba(33,32,30,.18);margin-bottom:56px}
.post-card .lead-media{margin-bottom:36px;box-shadow:none}
.post-card>:not(.lead-media){margin-inline:24px}
.post-card .author{margin-bottom:32px}
/* Preferred source: sits in the dark niche next to the card, right above the table of contents */
.sidebar{padding-top:0}
.side-gsrc{height:var(--sink);display:flex;align-items:flex-end;padding-bottom:28px}
.side-gsrc .gsrc{width:100%}
.side-gsrc .gsrc .arr{margin-left:auto}
.sidebar .sticky{padding-top:0}
@media (min-width:961px){.post-hero .byrow .gsrc{display:none}}
@media (max-width:960px){:root{--sink:56px}.side-gsrc{display:none}.post-hero{padding-bottom:calc(var(--sink) + 32px)}}
@media (max-width:640px){
  .post-card{margin-inline:-16px;border-radius:0;padding:0 0 4px;box-shadow:none}
  .post-card .lead-media{border-radius:0;margin-bottom:28px}
  .post-card>:not(.lead-media){margin-inline:16px}
  :root{--sink:40px}
}

/* Ranking on the white card: cream panel like the price tables; every row reacts on hover and the whole row opens the item */
.rank{background:#fff8ec;border-radius:var(--r-card);box-shadow:var(--shadow);overflow:hidden}
.rank li{position:relative;padding:16px 20px;transition:background var(--t)}
.rank li:last-child{border-bottom:0}
.rank li::before{transition:color var(--t)}
.rank li:hover{background:rgba(245,199,27,.14)}
.rank li:hover::before{color:var(--y400)}
.rank li:hover .name{text-decoration:underline 3px var(--y500);text-underline-offset:3px}
.rank .thumb img{transition:transform var(--t)}
.rank li:hover .thumb img{transform:scale(1.06)}
.rank .name::after{content:"";position:absolute;inset:0}
.rank .price .btn{position:relative;z-index:1}
@media (max-width:640px){.rank li{padding:14px}}
.article .rank a.name,.article .rank a.name:hover{background:none;text-decoration:none} .article .rank li:hover a.name{text-decoration:underline 3px var(--y500);text-underline-offset:3px}

/* ---------- language switcher: main-site pattern (pill → "Language" dialog) ---------- */
button.lang{display:inline-flex;align-items:stretch;gap:0;height:36px;padding:0;border:1px solid var(--n400);border-radius:var(--r-btn);background:transparent;color:var(--n900);cursor:pointer;transition:background-color var(--t)}
button.lang:hover{background:var(--n300)}
button.lang .seg{display:flex;align-items:center;padding:0 12px;border-right:1px solid var(--n400)}
button.lang .seg:last-child{border-right:0}
button.lang .flag{width:24px;height:auto;border-radius:2px;display:block}
button.lang .code{font-family:var(--font-display);font-size:.875rem;font-weight:700;letter-spacing:.02em;color:var(--n900)}
.lang-dialog{padding:0;border:0;background:transparent;color:var(--n900);width:min(440px,100% - 32px);max-width:none;margin:auto}
.lang-dialog::backdrop{background:rgba(18,18,17,.8)}
.lang-core{position:relative;background:var(--n300);border-radius:8px;padding:24px 32px 24px;box-shadow:0 4px 6px -2px rgba(0,0,0,.05),0 10px 15px -3px rgba(0,0,0,.1);font-family:var(--font-display)}
.lang-core .head{display:flex;align-items:center;gap:10px;margin:0 0 16px;font-weight:700;font-size:1rem;color:#fff}
.lang-core .head .ico{width:20px;height:20px;color:var(--n500)}
.lang-core .close{position:absolute;right:16px;top:16px;width:24px;height:24px;padding:0;border:0;background:none;color:var(--n500);cursor:pointer;transition:color var(--t)}
.lang-core .close:hover{color:var(--n700)} .lang-core .close svg{width:20px;height:20px}
.lang-list{list-style:none;margin:0;padding:4px;background:var(--n400);border-radius:4px;box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06)}
.lang-list a{display:flex;align-items:center;gap:8px;height:36px;padding:0 8px;border-radius:4px;color:var(--n900);text-decoration:none;font-size:.875rem}
.lang-list a:hover,.lang-list a:focus-visible{background:var(--n500);color:#fff;box-shadow:none}
.lang-list a[aria-current]{box-shadow:inset 0 0 0 1px var(--n600);font-weight:700}
.lang-list .flag{width:24px;height:auto;border-radius:2px}
@media (max-width:960px){button.lang{display:inline-flex}}
@media (max-width:640px){button.lang .seg{padding:0 9px}.lang-core{padding:20px 20px 20px}}

/* ---------- footer: logo + Blog, preferred source under the blurb, languages column ---------- */
.site-footer .logo{display:flex}
.site-footer .logo a{display:flex;padding:0;opacity:1}
.site-footer .logo a:hover{text-decoration:none}
.site-footer .logo .blog{opacity:.6;padding:4px 6px;font-family:var(--font-display);font-size:1.125rem;font-weight:400;color:var(--chrome-ink)}
.site-footer .logo .blog:hover{opacity:1;background:rgba(255,255,255,.06)}
.foot-brand .gsrc{display:inline-flex;margin-top:20px;padding:8px 12px 8px 8px;border-color:var(--n300);opacity:1}
.foot-brand .gsrc:hover{text-decoration:none}
.foot-brand .gsrc .g{width:28px;height:28px}
.foot-langs a{display:flex;align-items:center;gap:10px}
.foot-langs .flag{width:20px;height:auto;border-radius:2px;flex:none}
.foot-langs a[aria-current]{opacity:1;font-weight:500}
.foot-bottom .foot-links{display:flex;gap:16px}
.foot-bottom .foot-links a{color:var(--chrome-ink-2);text-decoration:none}
.foot-bottom .foot-links a:hover{color:var(--chrome-ink)}
.foot-grid .foot-langs{display:block}
.article .rank li{margin:0}
.foot-grid .foot-langs a{color:var(--chrome-ink)}

/* 7 categories: never wrap a label; tighten between 961 and 1180 px */
.nav a{white-space:nowrap}
@media (min-width:961px) and (max-width:1180px){.site-header .wrap{gap:20px}.nav{margin-left:0;gap:0}.nav a{padding:8px 7px;font-size:.8125rem}.site-header .logo img{height:34px}}

/* Header CTA: 1:1 with the main site's "Sign in via Steam" (base-button primary + auth-button icon) */
.btn-head{display:inline-flex;align-items:center;justify-content:center;height:36px;padding:0 16px;border:1px solid transparent;border-radius:4px;background:#f5c71b;color:#3b2600;font-family:var(--font-display);font-size:.875rem;font-weight:700;letter-spacing:-.25px;white-space:nowrap;text-decoration:none;transition:background-color 275ms,color 275ms,transform 175ms,box-shadow 175ms}
.btn-head svg{width:24px;height:24px;margin-left:-8px;margin-right:8px;flex:none}
.btn-head:hover{background:#ffd845;box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06)}
.btn-head:active{background:#ffe379;box-shadow:none}
.btn-head:focus-visible{box-shadow:0 0 0 3px rgba(245,199,27,.4)}
@media (max-width:640px){.btn-head{padding:0 12px}.btn-head svg{width:20px;height:20px;margin-left:-4px;margin-right:6px}}

/* CTA band: "Trusted by N members" is one text run next to the avatars (it was split into flex items and wrapped) */
.cta-band .trust .tx{min-width:0}
.cta-band .trust .tx b{margin:0 2px}

/* Ranking: one header bar (title + price source/date) like the price table; rows flush with the panel */
.rank-box{margin:0 0 40px;border-radius:var(--r-card);overflow:hidden;box-shadow:var(--shadow);background:#fff8ec}
.rank-box .rank{margin:0;box-shadow:none;border-radius:0;background:transparent}
.article .rank,.article .rank-box .rank{padding:0;margin:0}
.rank-box .rank li:first-child{border-top:0}
.rank .sub{font-size:.875rem;line-height:1.45}
.rank .price .btn{margin-top:10px}
@media (max-width:640px){.rank .price .btn{margin-top:0}}
/* ranking: price and button stacked on the right (desktop) */
@media (min-width:641px){.rank .price{display:flex;flex-direction:column;align-items:flex-end}}
/* CTA band trust line: three avatars + one unbroken text run; wraps as a whole if it ever has to */
.cta-band .trust{flex-wrap:wrap;row-gap:6px}
.cta-band .trust .tx{white-space:nowrap}
.cta-band .avs img:nth-child(n+4){display:none}

/* Preferred source "ringing" on the first visit: yellow glow pulses + two short phone-ring wiggles */
.gsrc.ring{border-color:var(--y500);animation:sm-glow 2.4s ease-out 1}
.gsrc.ring .g{animation:sm-ring 2.4s ease-in-out 1}
.gsrc.ring .arr{animation:sm-nudge 2.4s ease-in-out 1}
@keyframes sm-glow{
  0%{box-shadow:0 0 0 0 rgba(245,199,27,.55)}
  25%{box-shadow:0 0 0 10px rgba(245,199,27,0),0 0 24px rgba(245,199,27,.35)}
  26%{box-shadow:0 0 0 0 rgba(245,199,27,.55)}
  55%{box-shadow:0 0 0 10px rgba(245,199,27,0),0 0 24px rgba(245,199,27,.35)}
  100%{box-shadow:0 0 0 0 rgba(245,199,27,0)}
}
@keyframes sm-ring{
  0%,40%,100%{transform:rotate(0)}
  3%,23%{transform:rotate(-14deg) scale(1.08)} 6%,26%{transform:rotate(14deg) scale(1.08)}
  9%,29%{transform:rotate(-12deg) scale(1.08)} 12%,32%{transform:rotate(12deg) scale(1.08)}
  15%,35%{transform:rotate(-6deg)} 18%,38%{transform:rotate(6deg)} 20%{transform:rotate(0)}
}
@keyframes sm-nudge{0%,100%{transform:none}10%,30%{transform:translate(2px,-2px)}20%,40%{transform:none}}
.gsrc.ring{animation-name:sm-glow,sm-shake;animation-duration:2.4s,2.4s;animation-timing-function:ease-out,ease-in-out}
@keyframes sm-shake{0%,40%,100%{transform:none}3%,23%{transform:translateX(-2px)}6%,26%{transform:translateX(2px)}9%,29%{transform:translateX(-2px)}12%,32%{transform:translateX(2px)}15%,35%{transform:translateX(-1px)}18%,38%{transform:translateX(1px)}20%{transform:none}}
@media (prefers-reduced-motion:reduce){.gsrc.ring,.gsrc.ring .g,.gsrc.ring .arr{animation:none}.gsrc.ring{box-shadow:0 0 0 2px rgba(245,199,27,.5)}}

/* Reveal on scroll (classes added by blog.js only to blocks that start below the fold) */
.rv{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.2,.7,.2,1) var(--rv-d,0ms),transform .7s cubic-bezier(.2,.7,.2,1) var(--rv-d,0ms)}
.rv.in{opacity:1;transform:none}
.cta-band.rv{transform:translateY(28px) scale(.98)} .cta-band.rv.in{transform:none}

/* "Bored of your inventory?" tiles: idle float + mouse/scroll parallax (--mx/--my/--sy set by blog.js, -1…1) */
.cta-band.floaty .tile{transition:box-shadow var(--t);will-change:transform}
.cta-band.floaty .tile:first-child{transform:translate3d(calc(var(--mx,0) * -10px),calc(var(--my,0) * -8px + var(--sy,0) * 14px),0) rotate(calc(var(--mx,0) * -2deg))}
.cta-band.floaty .tile.hi{transform:translate3d(calc(var(--mx,0) * 12px),calc(var(--my,0) * 10px + var(--sy,0) * -18px),0) rotate(calc(var(--mx,0) * 2deg))}
.cta-band.floaty .tile img{animation:sm-float 4.2s ease-in-out infinite}
.cta-band.floaty .tile.hi img{animation-duration:3.6s;animation-delay:-1.4s}
.cta-band.floaty .swap{animation:sm-swap 4.2s ease-in-out infinite}
.cta-band.floaty:hover .tile.hi{box-shadow:0 18px 36px rgba(0,0,0,.45),0 0 0 1px rgba(245,199,27,.35)}
@keyframes sm-float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-7px) rotate(-1.5deg)}}
@keyframes sm-swap{0%,100%{transform:translateX(0)}50%{transform:translateX(3px)}}
@media (prefers-reduced-motion:reduce){.cta-band.floaty .tile,.cta-band.floaty .tile img,.cta-band.floaty .swap{animation:none;transform:none}}

/* ---------- Preferred source: main-site footer button look (footer-preferred-source), two-line copy ---------- */
.gsrc,.side-gsrc .gsrc,.foot-brand .gsrc{--gs-bg:#302e2a;display:flex;align-items:center;gap:12px;min-height:36px;padding:9px 16px;background:var(--gs-bg);border:0;border-radius:4px;color:var(--n900);text-decoration:none;line-height:1;transition:background-color 275ms}
.foot-brand .gsrc{display:inline-flex;margin-top:20px}
.gsrc:hover{--gs-bg:#3f3c38;transform:none;text-decoration:none} .gsrc:active{--gs-bg:#4a4642}
.gsrc .g,.foot-brand .gsrc .g{position:relative;flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:20px;height:20px;aspect-ratio:1;border:1px solid var(--n500);border-radius:4px;background:transparent;transition:border-color 275ms}
.gsrc .g img{width:11px;height:auto;display:block}
.gsrc .g::after{content:"";position:absolute;right:-3px;top:-2px;width:8px;height:8px;color:var(--n700);background:linear-gradient(currentColor,currentColor) 50%/6px 1px no-repeat,linear-gradient(currentColor,currentColor) 50%/1px 6px no-repeat,var(--gs-bg);transition:background-color 275ms,color 275ms}
.gsrc:hover .g{border-color:var(--n700)} .gsrc:hover .g::after{color:var(--n900)}
.gsrc .lbl{flex:1 1 0%;min-width:0}
.gsrc small{display:block;font-family:var(--font-display);font-size:.625rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--n600);margin-bottom:4px}
.gsrc b{display:block;font-family:var(--font-display);font-size:.875rem;font-weight:700;white-space:nowrap}
.gsrc .plus{flex:none;width:16px;height:16px;margin-left:auto;color:var(--n700);transition:color 275ms}
.gsrc:hover .plus{color:var(--n900)}
/* "cat watching": every 2 s the icon takes a quick look around */
.gsrc .g{animation:sm-peek 2s ease-in-out infinite;transform-origin:50% 80%}
@keyframes sm-peek{0%,62%,100%{transform:none}68%{transform:rotate(-14deg) translateX(-1px)}76%{transform:rotate(-14deg) translateX(-1px)}84%{transform:rotate(10deg) translateX(1px)}92%{transform:rotate(0)}}
.gsrc.ring .g{animation:sm-ring 2.4s ease-in-out 1}
.gsrc.ring .plus{animation:sm-nudge 2.4s ease-in-out 1}
.gsrc.ring{outline:1px solid var(--y500);outline-offset:0}
@media (prefers-reduced-motion:reduce){.gsrc .g{animation:none}}
@media (max-width:640px){.post-hero .gsrc{width:100%}}

/* Slider progress bar: its own track 10px above the image (no longer glued to the rounded corners) */
.slider{padding-top:13px}
.slider::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;border-radius:2px;background:var(--n200)}
.slider .bar{top:0;border-radius:2px}
@media (prefers-reduced-motion:reduce){.slider::before{display:none}.slider{padding-top:0}}

/* Data tables in posts (core/table, migrated TablePress) — same look as the live price table */
.article .wp-block-table{display:flex;flex-direction:column;margin:0 0 40px;border-radius:var(--r-card);overflow:hidden;overflow-x:auto;box-shadow:var(--shadow);background:#fff8ec}
.article .wp-block-table table{width:100%;min-width:520px;margin:0;border:0;border-collapse:collapse;table-layout:auto;font-size:.9375rem}
.article .wp-block-table thead{border:0}
.article .wp-block-table th{background:var(--n150);color:var(--n700);font-family:var(--font-display);font-weight:500;font-size:.75rem;letter-spacing:.05em;text-transform:uppercase;text-align:left;padding:12px 16px;white-space:nowrap;border:0}
.article .wp-block-table td{padding:12px 16px;border:0;border-bottom:1px solid var(--n800);vertical-align:top;line-height:1.5;background:transparent}
.article .wp-block-table td:first-child{font-family:var(--font-display);font-weight:500;color:var(--ink);white-space:nowrap}
.article .wp-block-table tbody tr:last-child td{border-bottom:0}
.article .wp-block-table tbody tr:nth-child(even) td{background:rgba(236,230,218,.45)}
.article .wp-block-table tbody tr:hover td{background:rgba(245,199,27,.12)}
.article .wp-block-table figcaption{order:-1;margin:0;background:var(--n100);color:var(--n900);padding:14px 18px;font-family:var(--font-display);font-weight:500;font-size:.9375rem;text-align:left}
@media (max-width:640px){.article .wp-block-table td:first-child{white-space:normal;min-width:120px}}

/* Pattern tiers (skinsmonkey/patterns): lookup + seed chips per tier */
.pat{margin:0 0 40px;border-radius:var(--r-card);overflow:hidden;box-shadow:var(--shadow);background:#fff8ec}
.pat-item{display:grid;grid-template-columns:96px 1fr auto auto;gap:16px;align-items:center;padding:14px 20px;border-bottom:1px solid var(--n800)}
.pat-item .th{background:var(--n200);border-radius:var(--r-tile);aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;padding:6px}
.pat-item .th img{max-height:100%;width:auto;filter:drop-shadow(0 4px 8px rgba(0,0,0,.4))}
.pat-name a{font-family:var(--font-display);font-weight:500;font-size:1.0625rem;color:var(--ink);text-decoration:none}
.pat-name a:hover{text-decoration:underline 3px var(--y500);text-underline-offset:3px}
.pat-name small{display:block;font-family:var(--font-display);font-size:.75rem;color:var(--ink-2);margin-top:3px}
.pat-price{font-family:var(--font-num);font-weight:600;font-size:1.0625rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.pat-find{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding:18px 20px;border-bottom:1px solid var(--n800);background:rgba(245,199,27,.10)}
.pat-find label{font-family:var(--font-display);font-weight:500;font-size:.75rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink);flex-basis:100%}
.pat-in{display:inline-flex;align-items:center;background:#fff;border:2px solid var(--n100);border-radius:var(--r-btn);padding:0 4px 0 12px;height:48px}
.pat-in span{font-family:var(--font-num);font-weight:600;font-size:1.25rem;color:var(--ink-3)}
.pat-in input{border:0;outline:0;background:transparent;font-family:var(--font-num);font-weight:600;font-size:1.375rem;width:96px;padding:0 6px;color:var(--ink);-moz-appearance:textfield}
.pat-in input::-webkit-outer-spin-button,.pat-in input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.pat-in:focus-within{box-shadow:0 0 0 3px var(--y500)}
.pat-res{flex:1 1 260px;font-size:.9375rem;line-height:1.45;color:var(--ink-2)}
.pat-res.is-hit,.pat-res.is-miss{color:var(--ink);font-weight:600}
.pat-res.is-hit::before{content:"";display:inline-block;width:10px;height:10px;border-radius:2px;background:var(--y500);margin-right:8px;vertical-align:1px}
.pat-tiers{list-style:none;margin:0;padding:0}
.pat-tier{display:grid;grid-template-columns:190px 1fr;gap:20px;padding:20px;border-top:1px solid var(--n800)}
.pat-tier:first-child{border-top:0}
.pat-lbl b{display:inline-block;font-family:var(--font-display);font-weight:700;font-size:.8125rem;letter-spacing:.04em;text-transform:uppercase;padding:5px 10px;border-radius:var(--r-btn);background:var(--n100);color:var(--n900)}
.pat-tier.t1 .pat-lbl b{background:var(--y500);color:var(--y100)}
.pat-tier.t3 .pat-lbl b,.pat-tier.t4 .pat-lbl b{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--n100)}
.pat-lbl span{display:block;font-family:var(--font-display);font-size:.75rem;color:var(--ink-2);margin-top:8px}
.pat-lbl p{font-size:.875rem;line-height:1.5;color:var(--ink-2);margin:8px 0 0}
.pat-seeds{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px;align-content:flex-start}
.article .pat-seeds li{margin:0}
.pat-seeds li{display:inline-flex;align-items:center;justify-content:center;min-width:46px;height:32px;padding:0 8px;border-radius:var(--r-tile);font-family:var(--font-num);font-weight:600;font-size:.875rem;font-variant-numeric:tabular-nums;background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1px var(--n800);transition:transform var(--t-fast),background var(--t),color var(--t),opacity var(--t)}
.pat-tier.t1 .pat-seeds li{background:var(--y900);box-shadow:inset 0 0 0 1px var(--y500);color:var(--y100)}
.pat-tier.t2 .pat-seeds li{background:var(--n100);color:var(--n900);box-shadow:none}
.pat-tier.t3 .pat-seeds li,.pat-tier.t4 .pat-seeds li{background:transparent;color:var(--ink-2)}
.pat.is-search .pat-seeds li{opacity:.3}
.pat .pat-seeds li.hit{opacity:1;background:var(--n100);color:var(--y500);box-shadow:0 0 0 3px var(--y500);transform:scale(1.15);animation:pat-pop .5s ease}
@keyframes pat-pop{0%{transform:scale(.9)}60%{transform:scale(1.25)}100%{transform:scale(1.15)}}
.pat-foot{margin:0;padding:12px 20px;border-top:1px solid var(--n800);font-family:var(--font-display);font-size:.75rem;color:var(--ink-2)}
@media (max-width:640px){.pat-item{grid-template-columns:72px 1fr;row-gap:8px}.pat-price{grid-column:2}.pat-item .btn{grid-column:2;justify-self:start}.pat-tier{grid-template-columns:1fr;gap:12px;padding:18px 16px}.pat-find{padding:16px}}
@media (prefers-reduced-motion:reduce){.pat .pat-seeds li.hit{animation:none}}

/* Linked images: no text-link underline/yellow fill around the image; a quiet lift on hover instead */
.article .wp-block-image a,.article a:has(> img){display:block;background:none!important;text-decoration:none;box-shadow:none;border-radius:var(--r-card)}
.article .wp-block-image a img{transition:transform var(--t),box-shadow var(--t),filter var(--t)}
.article .wp-block-image a:hover img{transform:translateY(-2px);box-shadow:0 10px 24px -8px rgba(33,32,30,.35);filter:brightness(1.04)}
.article .wp-block-image a:focus-visible{outline:3px solid var(--y500);outline-offset:3px}
.tbl td.note{font-size:.9375rem;color:var(--ink-2);line-height:1.4;min-width:140px}
.pat-in input,.pat-in input:focus{border:0!important;box-shadow:none!important;outline:0;height:44px;min-height:0;margin:0;border-radius:0}
.tbl td.range small{display:block;font-family:var(--font-display);font-weight:400;font-size:.75rem;color:var(--ink-2);margin-top:2px;white-space:nowrap}
.tbl td.note{min-width:0;max-width:180px}
.sm-live{font-family:var(--font-num);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}

/* Long reads: every content H2 opens a numbered section (hairline + yellow number tab), H3 gets a small marker,
   so a 3,000-word post reads as chapters instead of one block of text. Only content headings (.wp-block-heading). */
.article{counter-reset:sec}
.article h2.wp-block-heading{counter-increment:sec;margin:72px 0 20px;padding-top:32px;border-top:1px solid var(--n800);font-size:clamp(1.5rem,1.2rem + 1vw,1.875rem);letter-spacing:-.01em;line-height:1.15}
.article h2.wp-block-heading::before{content:counter(sec,decimal-leading-zero);display:table;margin:0 0 14px;padding:4px 8px 3px;border-radius:var(--r-btn);background:var(--y500);color:var(--y100);font-family:var(--font-display);font-weight:700;font-size:.75rem;letter-spacing:.08em;line-height:1}
.article > h2.wp-block-heading:first-child{margin-top:8px;padding-top:0;border-top:0}
.article h3.wp-block-heading{font-weight:600;font-size:1.25rem;margin:40px 0 12px}
.article h3.wp-block-heading::before{content:"";display:inline-block;width:8px;height:8px;margin:0 10px 0 0;border-radius:2px;background:var(--y500);vertical-align:.18em}
.article h2.wp-block-heading + p,.article h2.wp-block-heading + .wp-block-image{margin-top:0}
@media (max-width:640px){.article h2.wp-block-heading{margin-top:56px;padding-top:26px}}

/* Listing cards: title max. 2 lines with an ellipsis, a touch smaller */
.card h2,.card h3{font-size:1.125rem;line-height:1.3;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;text-overflow:ellipsis}
@media (max-width:640px){.card h2,.card h3{font-size:1.0625rem}}

/* "Show all N … with prices" on phones: the three columns fit 320px+ without a sideways scroll */
@media (max-width:640px){
.faq2.bytype .a table th,.faq2.bytype .a table td{padding:8px 6px;font-size:.8125rem}
.faq2.bytype .a table th:first-child,.faq2.bytype .a table td:first-child{padding-left:10px}
.faq2.bytype .a table th:last-child,.faq2.bytype .a table td:last-child{padding-right:10px;text-align:right}
.faq2.bytype .a table td:not(.item){white-space:nowrap}
.article .faq2.bytype table td.item{gap:8px;min-width:0}
.article .faq2.bytype table td.item .th{width:40px;height:32px}
.article .faq2.bytype table td.item .th img{max-width:36px;max-height:28px}
.article .faq2.bytype table td.item .t{display:none}
.article .faq2.bytype table td.item a{font-size:.875rem;line-height:1.25}
}

/* ---- Phones: tables, rankings and price chips ---- */
/* Item cell stays a real table cell (flex on <td> broke the row stripes and separators) */
.tbl td.item,.article table td.item{display:table-cell}
.tbl td.item .th,.article table td.item .th{display:inline-flex;vertical-align:middle;margin-right:12px}
.tbl td.item>span:last-child,.article table td.item>span:last-child{display:inline-block;vertical-align:middle;max-width:calc(100% - 80px)}
@media (max-width:640px){
 /* price tables become compact rows: item left, live prices right, details under; the item name is the link */
 .tbl table{min-width:0}
 .tbl thead{display:none}
 .tbl tbody{display:block}
 .tbl tbody tr{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;row-gap:2px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--n800)}
 .tbl tbody tr:last-child{border-bottom:0}
 .tbl tbody tr:nth-child(even){background:rgba(236,230,218,.45)}
 .tbl tbody tr td{display:block;padding:0;border:0;background:none!important}
 .tbl td.item{grid-column:1;grid-row:1/span 2;min-width:0}
 .tbl td.item .th{width:48px;height:36px;margin-right:10px}
 .tbl td.item .th img{max-width:42px;max-height:30px}
 .tbl td.item>span:last-child{max-width:calc(100% - 62px)}
 .article .tbl td a{font-size:.9375rem;line-height:1.25}
 .tbl td.from{grid-column:2;grid-row:1;align-self:end}
 .tbl td.upto{grid-column:2;grid-row:2;align-self:start}
 .tbl td.range{grid-column:2;grid-row:1/span 2}
 .tbl td.num{white-space:nowrap;font-size:.9375rem}
 .tbl td.from::before,.tbl td.upto::before{content:attr(data-l);margin-right:5px;font-family:var(--font-display);font-size:.6875rem;font-weight:400;color:var(--ink-2);text-transform:lowercase}
 .tbl td.note{grid-column:1/-1;grid-row:3;max-width:none;font-size:.8125rem;margin-top:6px}
 .tbl td.note:empty{display:none}
 .tbl td.chk{display:none}
 .tbl-head{padding:12px 14px;flex-wrap:wrap;row-gap:2px}
 /* ranking: price range and button always on one line, same in every row */
 .rank .price{flex-wrap:nowrap;justify-content:space-between;font-size:.9375rem}
 .rank .price small{flex-basis:auto}
 /* inline price chip: name / price on the left, button on the right, never split mid-chip */
 .pc{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;row-gap:1px;width:100%;padding:8px 8px 8px 12px;line-height:1.3}
 .pc .n{grid-column:1}
 .pc .num{grid-column:1;grid-row:2;font-size:.8125rem}
 .pc .btn{grid-column:2;grid-row:1/span 2;align-self:center}
}
@media (max-width:640px){
 /* wide comparison tables (marked by blog.js): one card per row, "Column: value" lines */
 .article .wp-block-table table.is-stack{min-width:0}
 .article .wp-block-table table.is-stack thead{display:none}
 .article .wp-block-table table.is-stack tr{display:block;padding:12px 16px;border-bottom:1px solid var(--n800)}
 .article .wp-block-table table.is-stack tbody tr:last-child{border-bottom:0}
 .article .wp-block-table table.is-stack tbody tr:nth-child(even){background:rgba(236,230,218,.45)}
 .article .wp-block-table table.is-stack td{display:grid;grid-template-columns:40% 1fr;gap:10px;padding:3px 0;border:0;background:none!important;white-space:normal}
 .article .wp-block-table table.is-stack td::before{content:attr(data-label);font-family:var(--font-display);font-size:.6875rem;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--n700);padding-top:3px}
 .article .wp-block-table table.is-stack td:first-child{display:block;font-size:1.0625rem;padding-bottom:6px}
 .article .wp-block-table table.is-stack td:first-child::before{display:none}
}
/* TOC on phones/tablets: collapsible card under the TL;DR (the sidebar copy would sit below the article) */
.toc-m{display:none}
@media (max-width:960px){
 .sidebar .toc{display:none}
 .toc-m{display:block;margin:0 0 32px;border:1px solid var(--n800);border-radius:var(--r-card);background:#fff8ec}
 .toc-m summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;padding:14px 16px;font-family:var(--font-display);font-weight:500;font-size:.9375rem}
 .toc-m summary::-webkit-details-marker{display:none}
 .toc-m summary::after{content:"+";font-size:1.25rem;line-height:1}
 .toc-m[open] summary::after{content:"−"}
 .toc-m .toc{padding:0 16px 12px}
 .toc-m .toc .eyebrow{display:none}
 .toc-m .toc a[aria-current]{font-weight:500;color:var(--ink-2);background:none;border-left-color:transparent}
}
.rate{margin-bottom:32px}
.rate .agg:empty{display:none}
@media (max-width:640px){.facts>div:last-child:nth-child(odd){grid-column:1/-1}}
.meta>span{white-space:nowrap} /* the "·" never wraps away from its item (Updated chip on phones) */
/* Google source chip: long labels (DE "SkinsMonkey bei Google hinzufügen") wrap instead of running under the "+" */
.gsrc .lbl{min-width:0;flex:1 1 auto}
.gsrc .plus{flex:none;margin-left:auto}
.gsrc b{overflow-wrap:anywhere}
/* Listings */
.hero-grid{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.hero-grid>*{min-width:0}
@media (max-width:960px){.hero-grid{grid-template-columns:minmax(0,1fr)}}
.hero-grid.solo{grid-template-columns:minmax(0,1fr)}
@media (min-width:961px){.hero-grid.solo .feature{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:center;column-gap:40px}.hero-grid.solo .slider .feature h2{min-height:0}}
button.lang .flag{flex:none;min-width:24px}
@media (max-width:640px){.section-head{flex-direction:column;align-items:flex-start;gap:12px}}
/* agent name tag: solid plate so it stays readable over light outfits */
.agents .figure .tag{background:rgba(29,28,26,.94);color:var(--n700);z-index:1}
/* footer stats on phones: 2 × 2, never 3 + 1 */
@media (max-width:640px){.agents .stats{display:grid;grid-template-columns:1fr 1fr;gap:16px 24px}}
/* images placed inside list items (old posts): rounded like every other image, with room for the text under them */
.article li img{display:block;height:auto;border-radius:var(--r-tile);margin:12px 0 10px}
.feature{grid-template-columns:minmax(0,1fr)} /* long meta lines (PL/DE) must not widen the slide past the screen */
@media (min-width:961px){.hero-grid.solo .feature{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}}
.meta .dot:has(>.updated)::before{display:none} /* the Updated chip is its own visual unit: no leading "·" (which also ended up alone at line starts) */
.meta .dot>.updated{margin-left:4px}
.gsrc .lbl b{white-space:normal;line-height:1.2}
.facts b .sm-live{font:inherit;color:inherit}
/* pattern block inside articles: the article's list padding/margins must not leak into it */
.article .pat-tiers,.article .pat-seeds{padding:0;margin:0}
.article .pat-tiers>li,.article .pat-seeds>li{margin:0}
.article .pat-tiers>li::before,.article .pat-tiers>li::marker{content:none}
/* comparison tables: the first column may hold a long label ("Cash payout via a linked payment partner") — wrap it instead of pushing the last column out of view */
.article .wp-block-table td:first-child{white-space:normal;min-width:120px;max-width:240px}
/* long unbreakable strings (URLs written as text, e.g. help.steampowered.com/en/accountdata/AccountSpend) wrap instead of widening the page on phones */
.article{overflow-wrap:break-word}
/* Phones: long console commands wrap on phones; legacy in-text buttons ("Get X with a 35% Deposit Bonus") wrap instead of overflowing */
.article code{overflow-wrap:anywhere;word-break:break-word}
.article p>a.btn,.article .wp-block-button a,.article a.cta-button-skin{white-space:normal;max-width:100%;height:auto;text-align:center;justify-content:center}
.article pre,.article .wp-block-code{max-width:100%;overflow-x:auto;white-space:pre-wrap;overflow-wrap:anywhere}

/* Hero: "Latest" lists the same 4 posts the slider rotates through; the one on screen is marked. */
.latest a[data-i]{position:relative;transition:opacity var(--t)}
.latest a[data-i]:not([aria-current]){opacity:.62}
.latest a[data-i]:hover{opacity:1}
.latest a[aria-current] h3{color:var(--y500)}
.latest a[aria-current] img,.latest a[aria-current] .ph{box-shadow:0 0 0 2px var(--y500)}
@media (max-width:960px){.hero-grid .latest{display:none}}

/* "Since publication" box: newer facts added to a news post without re-dating it. Core Group, style sm-since. */
.article .is-style-sm-since{margin:28px 0;padding:16px 20px 16px 18px;border-left:3px solid var(--y500);background:rgba(245,199,27,.12);border-radius:0 8px 8px 0}
.article .is-style-sm-since>*{margin:0}
.article .is-style-sm-since>*+*{margin-top:8px}
.article .is-style-sm-since .sm-since-label{font-family:var(--font-display);font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--y300)}
/* Phones: rank numbers "02"/"03" wrapped in the 28px phone column; tables with up to 3 columns fit phones without side-scroll */
@media (max-width:640px){.rank li{grid-template-columns:34px 84px 1fr}.rank li::before{font-size:1.25rem;white-space:nowrap}}
.article .wp-block-table table:not(:has(th:nth-child(4))):not(:has(td:nth-child(4))){min-width:0}
@media (max-width:640px){.article .wp-block-table table:not(:has(th:nth-child(4))):not(:has(td:nth-child(4))) td:first-child{white-space:normal}}
/* table captions are a dark title bar: links in them (e.g. "All Glock-18 skins on SkinsMonkey") were dark-on-dark */
.article .wp-block-table figcaption a{color:var(--n900)}
.article .wp-block-table figcaption a:hover{color:var(--ink)}
/* TOC with H3s: H2 = outline; the section being read folds out its H3s (blog.js); the count pill opens any
   section by hand. Many short H3s (arenas, teams) render as chips so long sections stay compact. */
.toc li.has-sub{position:relative}
.toc li.has-sub>a{padding-right:44px}
.toc .toc-tg{position:absolute;right:0;top:6px;height:22px;min-width:34px;padding:0 7px;display:flex;align-items:center;justify-content:center;gap:4px;border:1px solid var(--n800);border-radius:999px;background:transparent;font-family:var(--font-display);font-size:.6875rem;font-weight:500;color:var(--ink-2);cursor:pointer;transition:color var(--t),border-color var(--t),background var(--t)}
.toc .toc-tg::after{content:"";width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform var(--t)}
.toc li.open>.toc-tg::after{transform:translateY(1px) rotate(-135deg)}
.toc .toc-tg:hover,.toc li.open>.toc-tg{color:var(--ink);border-color:var(--ink-2)}
.toc ol.sub{display:none;list-style:none;margin:0 0 6px;padding:0;border:0}
.toc li.open>ol.sub{display:block}
.toc ol.sub a{padding:5px 8px 5px 28px;font-size:.8125rem;font-weight:400;line-height:1.35}
.toc ol.sub a[aria-current]{font-weight:600;color:var(--ink);border-left-color:var(--y500)}
.toc a.in{color:var(--ink)}
.toc ol.sub.chips{padding:4px 0 10px 14px}
.toc li.open>ol.sub.chips{display:flex;flex-wrap:wrap;gap:6px}
.toc ol.sub.chips a{margin:0;padding:3px 9px;border:1px solid var(--n800);border-radius:999px;font-size:.75rem;line-height:1.3;background:transparent}
.toc ol.sub.chips a:hover{border-color:var(--ink-2)}
.toc ol.sub.chips a[aria-current]{background:var(--y500);border-color:var(--y500);color:var(--ink);font-weight:600}
.sidebar .toc>ol{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
.sidebar .toc>ol::-webkit-scrollbar{display:none}
/* long TOC scrolls without a scrollbar; soft edges show there is more above/below (classes set in blog.js) */
.sidebar .toc>ol.fade-b{-webkit-mask-image:linear-gradient(#000 calc(100% - 48px),transparent);mask-image:linear-gradient(#000 calc(100% - 48px),transparent)}
.sidebar .toc>ol.fade-t{-webkit-mask-image:linear-gradient(transparent,#000 40px);mask-image:linear-gradient(transparent,#000 40px)}
.sidebar .toc>ol.fade-t.fade-b{-webkit-mask-image:linear-gradient(transparent,#000 40px,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(transparent,#000 40px,#000 calc(100% - 48px),transparent)}
.toc-m .toc li.has-sub>a{padding-right:48px}
/* price table: "All Glock-18 skins on SkinsMonkey" button under the rows */
.tbl-more{display:flex;justify-content:flex-start;padding:12px 16px;border-top:1px solid var(--n800);background:#fff8ec}
.article .tbl-more a.btn{text-decoration:none}
/* numbered list posts keep their own numbers in the H2 (no second 01/02 badge) */
.sm-numbered .article h2.wp-block-heading::before{display:none}
/* phone category bar scrolls sideways: fade the right edge so the cut-off chip reads as "more" */
.nav-mobile{-webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);mask-image:linear-gradient(90deg,#000 82%,transparent)}

/* Author archive hero */
.hero-author .ah{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:32px 56px;align-items:start;position:relative}
.hero-author .ah-main{display:flex;gap:24px;align-items:flex-start;min-width:0}
.hero-author .avatar{width:96px;height:96px;font-size:1.75rem}
.hero-author h1{color:var(--chrome-head);font-family:var(--font-display);font-weight:700;font-size:clamp(2rem,4vw,3rem);line-height:1;text-transform:uppercase;letter-spacing:-.25px;margin:6px 0 0}
.hero-author h1 small{font-size:.45em;color:var(--chrome-ink-2);text-transform:none;letter-spacing:0}
.hero-author .role{display:block;font-family:var(--font-display);font-size:.9375rem;color:var(--chrome-ink);margin:12px 0 0}
.hero-author .bio{margin:12px 0 0;max-width:62ch;color:var(--chrome-ink-2);font-size:1.0625rem;line-height:1.55}
.hero-author .stats{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;row-gap:12px}
.hero-author .stats li{font-family:var(--font-display);font-size:.8125rem;color:var(--chrome-ink-2);padding:0 20px 0 0;margin-right:20px;border-right:1px solid var(--n300);display:flex;flex-direction:column;gap:4px}
.hero-author .stats li:last-child{border:0;margin:0;padding:0}
.hero-author .stats b{font-size:1.5rem;font-weight:700;color:var(--chrome-ink);line-height:1;font-family:var(--font-digits,var(--font-display))}
.hero-author .ah-latest{margin:20px 0 0;font-family:var(--font-display);font-size:.875rem;color:var(--chrome-ink-2)}
.hero-author .ah-latest a,.hero-author .links a{color:var(--chrome-ink);text-decoration:underline 1px var(--n400);text-underline-offset:3px}
.hero-author .ah-latest a:hover,.hero-author .links a:hover{text-decoration-color:var(--chrome-ink)}
.hero-author .links{display:flex;flex-wrap:wrap;gap:8px 18px;margin:14px 0 0;font-family:var(--font-display);font-size:.875rem}
.hero-author .ah-topics{border:1px solid var(--n300);border-radius:var(--r-card);padding:20px 22px 22px;background:rgba(255,255,255,.02);margin-top:28px}
.hero-author .ah-topics .eyebrow{margin:0 0 14px}
.hero-author .ah-topics .chips{padding:0;gap:8px}
.hero-author .ah-topics .chip{color:var(--chrome-ink);border-color:var(--n400);min-height:34px;padding:6px 12px}
.hero-author .ah-topics .chip:hover{border-color:var(--chrome-ink)}
.hero-author .ah-topics .chip span{margin-left:8px;color:var(--chrome-ink-2);font-family:var(--font-digits,var(--font-display));font-size:.75rem}
@media (max-width:980px){.hero-author .ah{grid-template-columns:1fr;gap:0}.hero-author .ah-topics{margin-top:24px}}
@media (max-width:600px){.hero-author .ah-main{flex-direction:column;gap:16px}.hero-author .avatar{width:72px;height:72px;font-size:1.375rem}.hero-author .stats b{font-size:1.25rem}.hero-author .stats li{padding-right:14px;margin-right:14px}}

/* Archive notice (Rust/TF2/Dota posts kept for reference) */
.article .sm-archive-note{margin:0 0 32px;padding:16px 20px 16px 18px;border-left:3px solid var(--n500);background:rgba(29,28,26,.06);border-radius:0 8px 8px 0;font-size:1rem}
.article .sm-archive-note>*{margin:0}
.article .sm-archive-note>*+*{margin-top:8px}
.article .sm-archive-note .sm-archive-label{font-family:var(--font-display);font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.article .sm-archive-note a{font-family:var(--font-display);font-size:.875rem;font-weight:500}

/* Category pages: start-here block and FAQ under the grid (page 1) */
.cat-hub{max-width:760px;margin:56px 0 0;padding-top:40px;border-top:1px solid var(--n800)}
.cat-hub h2{font-family:var(--font-display);font-weight:700;font-size:1.5rem;line-height:1.2;margin:0 0 14px}
.cat-hub .cat-hub-text p{margin:0 0 14px;font-size:1.0625rem;line-height:1.6;color:var(--ink)}
.cat-hub .cat-hub-text ul{margin:0 0 32px;padding-left:20px}
.cat-hub .cat-hub-text li{margin:0 0 8px;font-size:1.0625rem;line-height:1.5}
.cat-hub a{color:var(--ink);text-decoration:underline 1px var(--y500);text-underline-offset:3px}
.cat-hub .faq{margin-bottom:0}
.hero-compact .desc a{color:var(--chrome-ink);text-decoration:underline 1px var(--n400);text-underline-offset:3px}
/* Category/tag lead: one wide line block on desktop instead of a narrow 4-line column */
@media (min-width:961px){.hero-compact .hero-head>div{flex:1 1 auto;min-width:0}.hero-compact .desc,.hero-compact .hero-head .desc p{max-width:1000px}}

/* Pager on phones: arrows instead of Previous/Next, smaller buttons, neighbour pages fold away below 420 px */
.pager{flex-wrap:wrap}
.pager a.arr{color:var(--ink);border-color:var(--n800)}
@media (max-width:480px){.pager{gap:4px;margin-top:36px}.pager a{min-width:40px;min-height:40px}.pager .dots{min-width:20px}}
@media (max-width:420px){.pager a.nb{display:none}}

/* Underlines run straight under descenders (g, p, y, |, ]) instead of breaking around them */
body{text-decoration-skip-ink:none}

/* Check / minus lists: line up with the heading above (the article list indent pushed them 22px right) */
.article ul.checks{padding-left:0}

/* WIKI cards: a small lift on hover instead of a stiff 2px nudge */
.wc{transition:transform var(--t),background var(--t),box-shadow var(--t)}
.wc::before{transition:opacity var(--t);opacity:.7}
.wc .img img{transition:transform 420ms cubic-bezier(.2,.7,.2,1),filter var(--t);transform-origin:50% 60%}
.wc .cta{transition:opacity var(--t),transform var(--t-fast),background var(--t-fast)}
.wc .cta::after{content:"→";display:inline-block;margin-left:6px;transition:transform var(--t-fast)}
.wc:hover,.wc:focus-visible{transform:translateY(-4px);box-shadow:0 14px 28px rgba(0,0,0,.28)}
.wc:hover::before,.wc:focus-visible::before{opacity:1}
.wc:hover .img img,.wc:focus-visible .img img{transform:scale(1.07) rotate(-4deg);filter:drop-shadow(0 14px 16px rgba(0,0,0,.5))}
.wc:hover .cta,.wc:focus-visible .cta{background:var(--y800)}
.wc:hover .cta::after,.wc:focus-visible .cta::after{transform:translateX(4px)}
/* sidebar cards are small: lift only, no tilt */
.side-wiki .wc:hover,.side-wiki .wc:focus-visible{transform:translateY(-2px);box-shadow:0 10px 20px rgba(0,0,0,.22)}
.side-wiki .wc:hover .img img,.side-wiki .wc:focus-visible .img img{transform:scale(1.05)}
@media (prefers-reduced-motion:reduce){.wc:hover,.wc:focus-visible,.wc:hover .img img,.wc:focus-visible .img img{transform:none}}