/* sloptv.co — public stylesheet
   Editorial + data-forward. Numbers are the product, so tables and figures
   get monospace and real hierarchy. Light by default, dark honoured. */

:root{
  --bg:#ffffff; --bg-soft:#f7f7f8; --bg-sunk:#f0f0f2;
  --txt:#16171a; --txt-dim:#5f6470; --txt-faint:#8a90a0;
  --line:#e3e4e8; --line-soft:#eeeef1;
  --acc:#1a56db; --acc-soft:#eaf0fe;
  --ok:#0f7b45; --bad:#c0342b; --warn:#9a6206;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Helvetica,Arial,sans-serif;
  --serif:"Iowan Old Style","Charter",Georgia,serif;
  --w:min(100% - 2.5rem, 68rem);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0e0f12; --bg-soft:#16181d; --bg-sunk:#1c1f26;
    --txt:#e8eaee; --txt-dim:#a0a6b4; --txt-faint:#767d8c;
    --line:#262a33; --line-soft:#1e222a;
    --acc:#6b9bff; --acc-soft:#151d31;
    --ok:#4ec988; --bad:#ff8a80; --warn:#e0a33e;
  }
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--txt);font:17px/1.65 var(--sans);
  -webkit-font-smoothing:antialiased}
.wrap{width:var(--w);margin-inline:auto}
a{color:var(--acc);text-decoration:none}
a:hover{text-decoration:underline}
img,video{max-width:100%;height:auto;display:block}

/* ---------- header ---------- */
.site-head{border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--bg);z-index:50}
.site-head .wrap{display:flex;align-items:center;gap:1.6rem;height:58px}
.brand{font-weight:800;font-size:19px;letter-spacing:-.02em;color:var(--txt)}
.brand:hover{text-decoration:none}
.brand span{color:var(--acc)}
.nav{display:flex;gap:1.25rem;font-size:15px;font-weight:500}
.nav a{color:var(--txt-dim)}
.nav a:hover,.nav a[aria-current]{color:var(--txt);text-decoration:none}
.nav-right{margin-left:auto;font-size:14px;color:var(--txt-faint)}

/* ---------- typography ---------- */
h1{font-size:clamp(1.9rem,1.3rem + 2vw,2.7rem);line-height:1.12;letter-spacing:-.025em;margin:0 0 .5rem;font-weight:800}
h2{font-size:1.5rem;line-height:1.25;letter-spacing:-.015em;margin:2.6rem 0 .9rem;font-weight:700}
h3{font-size:1.17rem;margin:1.9rem 0 .6rem;font-weight:650}
p{margin:0 0 1.15rem}
.lede{font-size:1.2rem;line-height:1.55;color:var(--txt-dim);margin-bottom:1.6rem}
.eyebrow{font:600 12.5px/1 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--acc);margin-bottom:.7rem}
.meta{font-size:14px;color:var(--txt-faint);margin-bottom:1.8rem}
.meta a{color:var(--txt-dim)}

/* The 40-60 word block LLMs lift. Deliberately first and visually distinct. */
.answer{background:var(--acc-soft);border-left:3px solid var(--acc);padding:1.05rem 1.3rem;
  border-radius:0 8px 8px 0;margin:0 0 1.9rem;font-size:1.07rem;line-height:1.6}
.answer strong{font-weight:700}

article{font-size:1.06rem}
article h2{font-family:var(--serif)}
.prose>*+h2{margin-top:2.8rem}

/* ---------- layout blocks ---------- */
main{padding:2.6rem 0 4rem}
.hero{padding:3.2rem 0 2.4rem;border-bottom:1px solid var(--line)}
.grid-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:1.2rem}
.card{border:1px solid var(--line);border-radius:11px;padding:1.15rem 1.25rem;background:var(--bg-soft)}
.card h3{margin:.15rem 0 .4rem;font-size:1.05rem}
.card p{margin:0;font-size:.94rem;color:var(--txt-dim);line-height:1.55}
.card a.stretch::after{content:"";position:absolute;inset:0}
.card{position:relative}

/* ---------- tables: the product ---------- */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:11px;margin:1.4rem 0}
table{border-collapse:collapse;width:100%;font-size:15px}
th,td{padding:.62rem .85rem;text-align:right;white-space:nowrap;border-bottom:1px solid var(--line-soft)}
th{background:var(--bg-sunk);font-size:12.5px;font-weight:650;color:var(--txt-dim);
  letter-spacing:.03em;text-transform:uppercase}
th:first-child,td:first-child{text-align:left}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td{background:var(--bg-soft)}
td.num,th.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.score{font-family:var(--mono);font-weight:700;font-size:1.02em}
.rank{color:var(--txt-faint);font-family:var(--mono);width:2.4rem}

/* ---------- bits ---------- */
.tag{display:inline-block;font-size:11.5px;font-weight:650;padding:.14rem .55rem;border-radius:20px;
  background:var(--bg-sunk);color:var(--txt-dim);letter-spacing:.02em}
.tag.ok{background:rgba(15,123,69,.12);color:var(--ok)}
.tag.bad{background:rgba(192,52,43,.12);color:var(--bad)}
.tag.warn{background:rgba(154,98,6,.12);color:var(--warn)}
.dim{color:var(--txt-dim)}
.mono{font-family:var(--mono);font-size:.92em}
.note{font-size:14px;color:var(--txt-faint);line-height:1.55}
.btn{display:inline-block;background:var(--acc);color:#fff;padding:.62rem 1.25rem;border-radius:8px;
  font-weight:650;font-size:15px}
.btn:hover{text-decoration:none;filter:brightness(1.08)}
.btn.ghost{background:transparent;color:var(--acc);border:1px solid var(--line)}
hr{border:0;border-top:1px solid var(--line);margin:2.6rem 0}

/* Affiliate disclosure — visible, not buried. It is a differentiator. */
.disclosure{font-size:13.5px;color:var(--txt-faint);border:1px dashed var(--line);
  border-radius:8px;padding:.7rem .95rem;margin:1.6rem 0;line-height:1.5}

.empty-state{border:1px dashed var(--line);border-radius:11px;padding:2.4rem 1.5rem;
  text-align:center;color:var(--txt-dim)}

/* ---------- footer ---------- */
.site-foot{border-top:1px solid var(--line);margin-top:4rem;padding:2.2rem 0 3rem;
  font-size:14.5px;color:var(--txt-dim)}
.site-foot .wrap{display:flex;gap:2rem;flex-wrap:wrap}
.site-foot a{color:var(--txt-dim)}
.site-foot .fcol{min-width:150px}
.site-foot strong{display:block;color:var(--txt);font-size:13px;text-transform:uppercase;
  letter-spacing:.05em;margin-bottom:.55rem}
.site-foot ul{list-style:none;margin:0;padding:0}
.site-foot li{margin-bottom:.3rem}

@media (max-width:640px){
  body{font-size:16px}
  .nav{gap:.9rem;font-size:14px}
  .nav-right{display:none}
  main{padding:1.8rem 0 3rem}
}