/*
Theme Name: Top Screen Recorder
Theme URI: https://topscreenrecorder.com
Author: Top Screen Recorder Editorial
Description: Custom theme for Top Screen Recorder — light premium design with signal-bar ratings and REC-motif branding.
Version: 1.0
Text Domain: tsr
*/

:root{
  --ink:#FAFAF9;
  --panel:#FFFFFF;
  --panel-2:#F1F2F1;
  --line: rgba(18,20,22,0.10);
  --line-strong: rgba(18,20,22,0.20);
  --text:#14161A;
  --muted:#5B616B;
  --muted-2:#8A9099;
  --accent:#E23A2E;
  --accent-dim: rgba(226,58,46,0.09);
  --accent-line: rgba(226,58,46,0.4);
  --good: #1F8A5B;
  --bad:#C23B2E;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--ink);
  color:var(--text);
  font-family:'Inter', system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}
.mono{ font-family:'JetBrains Mono', monospace; }
h1,h2,h3,.display{
  font-family:'Barlow Condensed', system-ui, sans-serif;
  font-weight:700;
  letter-spacing:0.01em;
  line-height:1.08;
}
.wrap{ max-width:1180px; margin:0 auto; padding:0 32px; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
::selection{ background:var(--accent); color:#FFFFFF; }

/* ---------- NAV ---------- */
header.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(250,250,249,0.86);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}
/* WordPress's admin toolbar (only visible to logged-in users) is 32px tall on desktop,
   46px on mobile, and sits fixed above everything else. Our own sticky header and sticky
   sidebar both need to sit below it, or they get tucked partially underneath it while scrolling. */
body.admin-bar header.site-header{ top:32px; }
@media screen and (max-width:782px){
  body.admin-bar header.site-header{ top:46px; }
}
.nav{ display:flex; align-items:center; justify-content:space-between; height:64px; }
.brand{ display:flex; align-items:center; gap:10px; }
.brand .dot{
  width:9px; height:9px; border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 3px var(--accent-dim);
  animation: pulse 2.4s ease-in-out infinite;
}
.brand-name{ font-family:'Barlow Condensed'; font-weight:700; font-size:19px; letter-spacing:0.02em; }
.brand-name span{ color:var(--muted); font-weight:500; }
nav.links{ display:flex; gap:2px; flex-wrap:wrap; }
nav.links a{
  font-size:13px; font-weight:500; color:var(--muted);
  padding:9px 14px; border-radius:6px; letter-spacing:0.02em;
  transition: color .15s ease, background .15s ease;
}
nav.links a:hover{ color:var(--text); background:var(--panel-2); }
nav.links a.active, nav.links a[aria-current="page"]{ color:var(--accent); background:var(--accent-dim); }
@keyframes pulse{
  0%,100%{ box-shadow:0 0 0 3px var(--accent-dim); }
  50%{ box-shadow:0 0 0 6px rgba(226,58,46,0.06); }
}

/* ---------- HERO (front page) ---------- */
.hero{ position:relative; padding:100px 0 70px; border-bottom:1px solid var(--line); overflow:hidden; }
.hero::before{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(600px 300px at 15% 0%, rgba(226,58,46,0.06), transparent 60%),
    radial-gradient(500px 260px at 85% 20%, rgba(18,20,22,0.03), transparent 60%);
  pointer-events:none;
}
.viewfinder{
  position:relative; border:1px solid var(--line); border-radius:14px; padding:56px 48px;
  background: var(--panel); box-shadow: 0 20px 50px -25px rgba(18,20,22,0.18);
  display:grid; grid-template-columns: 1.1fr 0.9fr; gap:48px; align-items:center;
}
.bracket{ position:absolute; width:22px; height:22px; opacity:0.55; }
.bracket::before, .bracket::after{ content:''; position:absolute; background:var(--text); }
.bracket.tl{ top:14px; left:14px; } .bracket.tr{ top:14px; right:14px; transform:scaleX(-1); }
.bracket.bl{ bottom:14px; left:14px; transform:scaleY(-1); } .bracket.br{ bottom:14px; right:14px; transform:scale(-1); }
.bracket::before{ width:22px; height:2px; top:0; left:0; }
.bracket::after{ width:2px; height:22px; top:0; left:0; }
.rec-tag{
  display:inline-flex; align-items:center; gap:8px; font-size:12px; letter-spacing:0.08em; color:var(--accent);
  padding:6px 10px; border:1px solid var(--accent-line); border-radius:100px; background:var(--accent-dim); margin-bottom:28px;
}
.rec-tag .dot{ width:6px; height:6px; border-radius:50%; background:var(--accent); animation:pulse 1.6s infinite; }
.hero h1{ font-size:clamp(40px, 6vw, 72px); margin-bottom:22px; }
.hero h1 em{ font-style:normal; color:var(--muted); }
.hero p.sub{ font-size:18px; color:var(--muted); max-width:560px; margin-bottom:36px; font-weight:400; }
.cta-row{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:56px; }
.btn{
  display:inline-flex; align-items:center; gap:8px; padding:13px 22px; border-radius:8px;
  font-size:14px; font-weight:600; letter-spacing:0.01em; transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.btn-primary{ background:var(--text); color:#fff; } .btn-primary:hover{ transform:translateY(-1px); background:#000; }
.btn-ghost{ border:1px solid var(--line-strong); color:var(--text); } .btn-ghost:hover{ border-color:var(--text); }
.stat-strip{ display:flex; flex-wrap:wrap; gap:0; border-top:1px solid var(--line); padding-top:26px; }
.stat-strip .stat{ flex:1; min-width:150px; padding-right:24px; }
.stat-strip .stat .num{ font-family:'JetBrains Mono'; font-size:13px; color:var(--text); font-weight:500; }
.stat-strip .stat .label{ font-size:12px; color:var(--muted-2); margin-top:3px; }
.hero-media{ position:relative; border-radius:12px; overflow:hidden; aspect-ratio:4/3; border:1px solid var(--line-strong); box-shadow:0 24px 60px -28px rgba(18,20,22,0.35); }
.hero-media img{ width:100%; height:100%; object-fit:cover; }
.hero-media::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(226,58,46,0.08), rgba(18,20,22,0.35)); mix-blend-mode:multiply; }
.hero-media .rec-chip{
  position:absolute; top:14px; left:14px; z-index:2; display:flex; align-items:center; gap:7px;
  font-family:'JetBrains Mono'; font-size:11px; letter-spacing:0.06em; color:#fff;
  background:rgba(18,20,22,0.55); border:1px solid rgba(255,255,255,0.25); padding:5px 10px; border-radius:100px; backdrop-filter: blur(4px);
}
.hero-media .rec-chip .dot{ width:6px; height:6px; border-radius:50%; background:var(--accent); animation:pulse 1.6s infinite; }
@media (max-width:900px){ .viewfinder{ grid-template-columns:1fr; } .hero-media{ order:-1; aspect-ratio:16/10; } }

/* ---------- SECTION SHARED ---------- */
section{ padding:88px 0; border-bottom:1px solid var(--line); }
.eyebrow{ font-family:'JetBrains Mono'; font-size:12px; letter-spacing:0.1em; color:var(--accent); text-transform:uppercase; margin-bottom:14px; }
.section-head{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:44px; gap:24px; flex-wrap:wrap; }
.section-head h2{ font-size:38px; max-width:560px; }
.section-head p{ color:var(--muted); max-width:360px; font-size:15px; }

/* ---------- CATEGORY GRID (front page) ---------- */
.cat-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden; box-shadow: 0 16px 40px -28px rgba(18,20,22,0.16); }
.cat{ background:var(--panel); padding:28px 20px; position:relative; transition: background .2s ease; }
.cat:hover{ background:var(--panel-2); }
.cat .icon{ width:26px; height:26px; color:var(--text); margin-bottom:18px; }
.cat h3{ font-size:20px; margin-bottom:6px; }
.cat p{ font-size:12.5px; color:var(--muted); margin-bottom:16px; line-height:1.45; }
.cat .go{ font-family:'JetBrains Mono'; font-size:11px; color:var(--muted-2); display:flex; align-items:center; gap:6px; }
.cat:hover .go{ color:var(--accent); }
@media (max-width:900px){ .cat-grid{ grid-template-columns:repeat(2,1fr); } }

/* ---------- POST CARDS (front page picks + category archive) ---------- */
.post-grid, .picks, .guides{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media (max-width:900px){ .post-grid, .picks, .guides{ grid-template-columns:1fr; } }
.post-card{
  border:1px solid var(--line); border-radius:12px; background:var(--panel); overflow:hidden;
  box-shadow: 0 10px 28px -24px rgba(18,20,22,0.2);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.post-card:hover{ transform:translateY(-4px); box-shadow: 0 18px 36px -20px rgba(18,20,22,0.22); border-color:var(--line-strong); }
.post-media{ height:150px; position:relative; overflow:hidden; }
.post-media img{ width:100%; height:100%; object-fit:cover; }
.post-media::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(18,20,22,0.02), rgba(18,20,22,0.5)); }
.post-media .tag{
  position:absolute; top:12px; left:12px; z-index:2; font-family:'JetBrains Mono'; font-size:10.5px; letter-spacing:0.05em; color:#fff;
  background:rgba(18,20,22,0.5); border:1px solid rgba(255,255,255,0.2); padding:4px 9px; border-radius:100px;
}
.post-body{ padding:20px; }
.post-body h3{ font-size:20px; margin-bottom:10px; line-height:1.15; }
.bars{ display:flex; align-items:flex-end; gap:3px; height:14px; margin-bottom:12px; }
.bars i{ width:4px; display:block; background:var(--line-strong); border-radius:1px; }
.bars i.on{ background:var(--accent); }
.bars i:nth-child(1){ height:40%; } .bars i:nth-child(2){ height:55%; }
.bars i:nth-child(3){ height:70%; } .bars i:nth-child(4){ height:85%; } .bars i:nth-child(5){ height:100%; }
.post-body p{ font-size:13px; color:var(--muted); margin-bottom:14px; line-height:1.5; }
.post-foot{ display:flex; justify-content:space-between; align-items:center; border-top:1px solid var(--line); padding-top:12px; }
.post-foot .date{ font-family:'JetBrains Mono'; font-size:11px; color:var(--muted-2); }
.post-foot .link{ font-size:12.5px; font-weight:600; }
.post-foot .link:hover{ color:var(--accent); }

/* ---------- ARCHIVE / CATEGORY HEADER ---------- */
.archive-head{ padding:56px 0 40px; border-bottom:1px solid var(--line); }
.crumbs{ font-family:'JetBrains Mono'; font-size:11.5px; color:var(--muted-2); margin-bottom:20px; display:flex; gap:8px; align-items:center; }
.crumbs a:hover{ color:var(--accent); }
.archive-icon{
  width:52px; height:52px; border-radius:12px; background:var(--panel); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; margin-bottom:22px; box-shadow: 0 10px 26px -18px rgba(18,20,22,0.25);
}
.archive-icon svg{ width:26px; height:26px; }
.archive-head h1{ font-size:44px; margin-bottom:12px; }
.archive-head p{ color:var(--muted); max-width:560px; font-size:15px; margin-bottom:28px; }
.archive-meta{ display:flex; gap:28px; flex-wrap:wrap; }
.archive-meta .m{ font-family:'JetBrains Mono'; font-size:12px; color:var(--muted-2); }
.archive-meta .m b{ color:var(--text); font-weight:500; }
.grid-section{ padding:44px 0 80px; }

/* ---------- PAGINATION ---------- */
.pagination{ display:flex; justify-content:center; align-items:center; gap:6px; margin-top:48px; }
.pagination a, .pagination span{
  min-width:36px; height:36px; padding:0 10px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line-strong); border-radius:8px; font-family:'JetBrains Mono'; font-size:12.5px; color:var(--muted);
  transition: all .15s ease;
}
.pagination a:hover{ border-color:var(--accent-line); color:var(--accent); }
.pagination .current, .pagination span.current{ background:var(--text); color:#fff; border-color:var(--text); }

/* ---------- SINGLE POST ---------- */
.post-head{ padding:48px 0 0; }
.post-head h1{ font-size:clamp(32px,4.5vw,52px); max-width:820px; margin-bottom:18px; }
.post-meta{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-bottom:32px; }
.author{ display:flex; align-items:center; gap:9px; font-size:13px; color:var(--muted); }
.author .avatar{
  width:26px; height:26px; border-radius:50%;
  background:var(--accent); border:1px solid var(--line);
  display:inline-flex; align-items:center; justify-content:center;
  font-family:'JetBrains Mono'; font-size:10px; font-weight:500; color:#fff;
  vertical-align:middle;
}
.post-meta .dot-sep{ width:3px; height:3px; border-radius:50%; background:var(--muted-2); }
.post-meta .m{ font-family:'JetBrains Mono'; font-size:11.5px; color:var(--muted-2); }
.tag{ font-family:'JetBrains Mono'; font-size:10.5px; letter-spacing:0.05em; color:var(--accent); background:var(--accent-dim); padding:4px 9px; border-radius:100px; }
.hero-frame{ position:relative; border-radius:14px; overflow:hidden; border:1px solid var(--line); box-shadow:0 24px 60px -30px rgba(18,20,22,0.3); }
.hero-frame img{ width:100%; height:400px; object-fit:cover; }
.score-card{
  position:absolute; bottom:20px; right:20px; background:rgba(255,255,255,0.92); backdrop-filter:blur(8px);
  border:1px solid var(--line); border-radius:12px; padding:16px 20px; box-shadow:0 14px 30px -16px rgba(18,20,22,0.3);
  display:flex; align-items:center; gap:14px;
}
.score-num{ font-family:'Barlow Condensed'; font-weight:700; font-size:38px; line-height:1; }
.score-num span{ font-size:16px; color:var(--muted); font-family:'JetBrains Mono'; }
.bars-lg{ display:flex; align-items:flex-end; gap:4px; height:22px; }
.bars-lg i{ width:6px; display:block; background:var(--line-strong); border-radius:1px; }
.bars-lg i.on{ background:var(--accent); }
.bars-lg i:nth-child(1){ height:40%; } .bars-lg i:nth-child(2){ height:55%; }
.bars-lg i:nth-child(3){ height:70%; } .bars-lg i:nth-child(4){ height:85%; } .bars-lg i:nth-child(5){ height:100%; }

.post-layout{ display:grid; grid-template-columns:1fr 320px; gap:56px; padding:44px 0 80px; align-items:start; }
@media (max-width:900px){ .post-layout{ grid-template-columns:1fr; } }
article{ max-width:720px; min-width:0; }
.author-bio-box{
  display:flex; gap:14px; align-items:flex-start;
  background:var(--panel-2); border:1px solid var(--line); border-radius:12px;
  padding:20px 22px; margin:36px 0 8px;
}
.author-bio-box .avatar-lg{
  width:40px; height:40px; border-radius:50%; flex-shrink:0;
  background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center;
  font-family:'JetBrains Mono'; font-size:13px; font-weight:600;
}
.author-bio-box p{ margin:0; font-size:14.5px; color:#2A2D33; }
.author-bio-box a{ font-weight:600; color:var(--text); }
.author-bio-box a:hover{ color:var(--accent); }
article h2{ font-size:28px; margin:44px 0 16px; }
article h2:first-child{ margin-top:0; }
article p{ font-size:16px; color:#2A2D33; margin-bottom:18px; }
article p.lead{ font-size:18.5px; color:var(--text); line-height:1.65; }
article ul, article ol{ margin:0 0 20px 20px; }
article li{ font-size:15.5px; color:#2A2D33; margin-bottom:8px; }

.verdict-box{ background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:24px 26px; margin:28px 0; box-shadow:0 10px 26px -22px rgba(18,20,22,0.2); }
.verdict-box .eyebrow{ margin-bottom:10px; }
.verdict-box p{ margin-bottom:0; font-size:15px; }

.pros-cons{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:28px 0; }
@media (max-width:900px){ .pros-cons{ grid-template-columns:1fr; } }
.pc-box{ border:1px solid var(--line); border-radius:12px; padding:20px 22px; background:var(--panel); }
.pc-box h4{ font-family:'JetBrains Mono'; font-size:11.5px; letter-spacing:0.06em; margin-bottom:14px; }
.pc-box.pros h4{ color:var(--good); } .pc-box.cons h4{ color:var(--bad); }
.pc-box ul{ margin:0; list-style:none; }
.pc-box li{ font-size:14px; padding:7px 0 7px 20px; position:relative; border-top:1px solid var(--line); }
.pc-box li:first-child{ border-top:none; }
.pc-box.pros li::before{ content:'+'; position:absolute; left:0; color:var(--good); font-weight:700; }
.pc-box.cons li::before{ content:'–'; position:absolute; left:0; color:var(--bad); font-weight:700; }

.cta-block{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; background:var(--text); color:#fff; border-radius:12px; padding:22px 26px; margin:32px 0; }
.cta-block .l div:first-child{ font-family:'Barlow Condensed'; font-weight:600; font-size:19px; }
.cta-block .l div:last-child{ font-size:13px; color:rgba(255,255,255,0.6); margin-top:2px; }
.cta-btn{ background:var(--accent); color:#fff; padding:11px 20px; border-radius:8px; font-size:13.5px; font-weight:600; white-space:nowrap; }

.callout{
  display:flex; gap:14px; align-items:flex-start; background:var(--accent-dim); border:1px solid var(--accent-line); border-left:3px solid var(--accent);
  border-radius:8px; padding:18px 20px; margin:26px 0;
}
.callout .icon{ flex-shrink:0; width:20px; height:20px; color:var(--accent); margin-top:2px; }
.callout .body b{ display:block; font-family:'JetBrains Mono'; font-size:11px; letter-spacing:0.06em; color:var(--accent); text-transform:uppercase; margin-bottom:6px; }
.callout .body p{ margin-bottom:0; font-size:14.5px; color:#2A2D33; }

.takeaway{ background:var(--panel-2); border-radius:8px; padding:18px 20px; margin:26px 0; border-left:3px solid var(--text); }
.takeaway b{ display:block; font-family:'JetBrains Mono'; font-size:11px; letter-spacing:0.06em; color:var(--muted-2); text-transform:uppercase; margin-bottom:6px; }
.takeaway p{ margin-bottom:0; font-size:14.5px; color:#2A2D33; }

article blockquote{
  margin:32px 0; padding:0 0 0 22px; border-left:3px solid var(--accent);
  font-family:'Barlow Condensed'; font-weight:600; font-size:22px; line-height:1.3; color:var(--text);
}
article blockquote cite{ display:block; font-family:'JetBrains Mono'; font-size:11.5px; font-style:normal; color:var(--muted-2); margin-top:8px; }

article table{ width:100%; border-collapse:collapse; margin:44px 0 26px; font-size:14px; border:1px solid var(--line); border-radius:10px; display:block; overflow-x:auto; max-width:100%; position:relative; -webkit-overflow-scrolling:touch; }
article table::before{
  content:'← Scroll to see all columns →';
  display:block; position:absolute; top:-28px; left:0;
  font-family:'JetBrains Mono'; font-size:10.5px; letter-spacing:0.04em; color:var(--muted-2);
  text-transform:uppercase;
}
/* Custom scrollbar so the scroll affordance is actually visible, not hidden */
article table::-webkit-scrollbar{ height:8px; }
article table::-webkit-scrollbar-track{ background:var(--panel-2); border-radius:10px; }
article table::-webkit-scrollbar-thumb{ background:var(--accent); border-radius:10px; }
article table{ scrollbar-width:thin; scrollbar-color:var(--accent) var(--panel-2); }
article th{ background:var(--panel-2); text-align:left; padding:12px 16px; font-family:'JetBrains Mono'; font-size:11px; letter-spacing:0.04em; color:var(--muted); text-transform:uppercase; }
article td{ padding:12px 16px; border-top:1px solid var(--line); color:#2A2D33; }
article tr:first-child td{ border-top:none; }

.keyword-strip{ margin:44px 0 0; padding-top:24px; border-top:1px solid var(--line); }
.keyword-strip .label{ font-family:'JetBrains Mono'; font-size:11px; letter-spacing:0.06em; color:var(--muted-2); text-transform:uppercase; margin-bottom:12px; }
.keyword-strip .tags{ display:flex; flex-wrap:wrap; gap:8px; }
.keyword-strip .tags a{ font-size:12.5px; color:var(--muted); background:var(--panel-2); border:1px solid var(--line); padding:6px 12px; border-radius:100px; transition: all .15s ease; }
.keyword-strip .tags a:hover{ color:var(--accent); border-color:var(--accent-line); background:var(--accent-dim); }

/* ---------- SIDEBAR ---------- */
aside{ position:sticky; top:88px; align-self:start; }
body.admin-bar aside{ top:120px; }
@media screen and (max-width:782px){
  body.admin-bar aside{ top:134px; }
}
.cta-card{ border:1px solid var(--line); border-radius:12px; background:var(--panel); padding:22px; margin-bottom:20px; box-shadow:0 10px 26px -22px rgba(18,20,22,0.18); }
.cta-card .head{ display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.cta-card .head .name{ font-family:'Barlow Condensed'; font-weight:600; font-size:19px; line-height:1.15; }
.cta-card .head .price{ font-family:'JetBrains Mono'; font-size:12.5px; color:var(--muted); line-height:1.4; }
.cta-card .price b{ color:var(--text); font-size:15px; }
.cta-card .bars-sm{ display:flex; align-items:flex-end; gap:3px; height:14px; margin-bottom:16px; }
.cta-card .bars-sm i{ width:4px; display:block; background:var(--line-strong); border-radius:1px; }
.cta-card .bars-sm i.on{ background:var(--accent); }
.cta-card .bars-sm i:nth-child(1){ height:40%; } .cta-card .bars-sm i:nth-child(2){ height:55%; }
.cta-card .bars-sm i:nth-child(3){ height:70%; } .cta-card .bars-sm i:nth-child(4){ height:85%; } .cta-card .bars-sm i:nth-child(5){ height:100%; }
.cta-card .score-sm{ font-family:'JetBrains Mono'; font-size:11.5px; color:var(--muted-2); margin-left:5px; }
.cta-buttons{ display:flex; flex-direction:column; gap:10px; }
.btn-buy{ display:flex; align-items:center; justify-content:center; gap:8px; background:var(--accent); color:#fff; padding:13px 18px; border-radius:8px; font-size:14px; font-weight:600; transition: background .15s ease, transform .15s ease; }
.btn-buy:hover{ background:#C82F24; transform:translateY(-1px); }
.btn-download{ display:flex; align-items:center; justify-content:center; gap:8px; background:var(--panel); color:var(--text); padding:13px 18px; border-radius:8px; font-size:14px; font-weight:600; border:1px solid var(--line-strong); transition: border-color .15s ease, background .15s ease; }
.btn-download:hover{ border-color:var(--text); background:var(--panel-2); }
.cta-card .fine-print{ font-family:'JetBrains Mono'; font-size:10.5px; color:var(--muted-2); text-align:center; margin-top:12px; }
.spec-card{ border:1px solid var(--line); border-radius:12px; background:var(--panel); padding:22px; margin-bottom:20px; box-shadow:0 10px 26px -22px rgba(18,20,22,0.18); }
.spec-card h4{ font-family:'JetBrains Mono'; font-size:11px; letter-spacing:0.06em; color:var(--muted-2); text-transform:uppercase; margin-bottom:16px; }
.spec-row{ display:flex; justify-content:space-between; padding:9px 0; border-top:1px solid var(--line); font-size:13.5px; }
.spec-row:first-child{ border-top:none; }
.spec-row .k{ color:var(--muted); } .spec-row .v{ font-weight:500; text-align:right; }
.related-card a{ display:block; padding:12px 0; border-top:1px solid var(--line); font-size:13.5px; font-weight:500; }
.related-card a:first-child{ border-top:none; }
.related-card a:hover{ color:var(--accent); }

/* ---------- FOOTER ---------- */
footer.site-footer{ padding:56px 0 40px; background:var(--panel-2); border-top:1px solid var(--line); }
.foot-grid{ display:grid; grid-template-columns:1.1fr repeat(4,1fr); gap:28px; margin-bottom:56px; }
@media (max-width:900px){ .foot-grid{ grid-template-columns:1fr 1fr; } }

.best-of-banner{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  background:var(--text); color:#fff; border-radius:12px; padding:20px 26px;
  margin:0 0 32px; text-decoration:none; transition: transform .15s ease;
}
.best-of-banner:hover{ transform:translateY(-2px); }
.best-of-banner .tag{ background:var(--accent); color:#fff; }
.best-of-banner-title{
  font-family:'Barlow Condensed'; font-weight:600; font-size:19px; flex:1; min-width:200px;
}
.best-of-banner-arrow{ font-family:'JetBrains Mono'; font-size:12px; color:rgba(255,255,255,0.7); white-space:nowrap; }
.foot-brand p{ color:var(--muted); font-size:13.5px; margin-top:14px; max-width:260px; line-height:1.6; }
.foot-col h4{ font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted-2); margin-bottom:16px; font-family:'JetBrains Mono'; font-weight:500; }
.foot-col a{ display:block; font-size:13.5px; color:var(--muted); padding:6px 0; transition:color .15s ease; }
.foot-col a:hover{ color:var(--text); }
.foot-bottom{ display:flex; justify-content:space-between; align-items:center; border-top:1px solid var(--line); padding-top:24px; font-size:12px; color:var(--muted-2); flex-wrap:wrap; gap:12px; }

@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } }