/* TopSEOTools — "Instrument" */
:root{
  --bg:#E8EAEB;        /* bench grey: page */
  --panel:#F3F4F4;     /* instrument face */
  --paper:#FAFAF9;     /* inputs, readouts */
  --line:#C3C8CC;      /* hairline */
  --line-2:#D8DCDF;    /* inner hairline */
  --ink:#17191B;       /* graphite */
  --ink-2:#3D4247;
  --mute:#5B6167;
  --amber:#F5B800;     /* signal */
  --amber-ink:#7A5200; /* amber as text on light */
  --amber-wash:#FBEFC4;
  --teal:#23685F;      /* positive, text */
  --teal-line:#3A8F84; /* positive, strokes */
  --teal-wash:#D7EAE6;
  --rust:#A8432A;      /* negative */
  --graphite:#22262A;  /* tray, dark bands */
  --on-graphite:#E4E7E9;
  --on-graphite-2:#9AA1A7;

  --f-display:"Space Grotesk", "IBM Plex Sans", sans-serif;
  --f-body:"IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --f-mono:"IBM Plex Mono", ui-monospace, Menlo, monospace;

  --gutter:16px;
  --max:1320px;
}
@media (min-width:768px){ :root{ --gutter:32px; } }

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:400 15px/1.5 var(--f-body);
  font-feature-settings:"ss01","tnum";
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration-thickness:1px; text-underline-offset:3px; }
a:hover{ text-decoration-color:var(--amber-ink); }
button{ font:inherit; color:inherit; cursor:pointer; }
:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; box-shadow:0 0 0 5px var(--amber); }
.sr{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.wrap{ max-width:var(--max); margin:0 auto; padding:0 var(--gutter); }
.mono{ font-family:var(--f-mono); }
.label{
  font:500 11px/1.3 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--mute);
}
kbd{
  font:500 11px/1 var(--f-mono); padding:3px 6px 2px; border:1px solid var(--line);
  border-bottom-width:2px; background:var(--paper); color:var(--ink-2); border-radius:3px;
}
.skip{ position:absolute; left:-9999px; top:0; }
.skip:focus{ left:var(--gutter); top:8px; z-index:99; background:var(--amber); padding:8px 12px; }

/* ---------- status strip + masthead ---------- */
.status{
  background:var(--graphite); color:var(--on-graphite-2);
  font:400 11px/1 var(--f-mono); letter-spacing:.06em; text-transform:uppercase;
}
.status .wrap{ display:flex; gap:20px; align-items:center; height:30px; overflow:hidden; white-space:nowrap; }
.status b{ color:var(--on-graphite); font-weight:500; }
.status .dot{ width:6px; height:6px; background:var(--amber); display:inline-block; margin-right:8px; vertical-align:1px; }
.status .hide-s{ display:none; }
@media (min-width:900px){ .status .hide-s{ display:inline; } }

.mast{ background:var(--panel); border-bottom:2px solid var(--ink); position:relative; z-index:20; }
.mast .wrap{ display:flex; align-items:center; gap:24px; height:64px; }
.logo{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); flex:none; }
.logo svg{ width:30px; height:30px; flex:none; }
.logo .wm{ font:700 21px/1 var(--f-display); letter-spacing:-.035em; }
.logo .wm span{ font-weight:400; }
.nav{ display:none; gap:2px; margin-left:8px; }
.nav a{
  text-decoration:none; font:500 14px/1 var(--f-body); color:var(--ink-2);
  padding:9px 10px; border-radius:2px;
}
.nav a:hover{ background:var(--bg); color:var(--ink); }
.nav a[aria-current]{ color:var(--ink); box-shadow:inset 0 -2px 0 var(--amber); }
@media (min-width:1080px){ .nav{ display:flex; } }
.mast-right{ margin-left:auto; display:flex; align-items:center; gap:10px; }
.searchbtn{
  display:none; align-items:center; gap:10px; height:36px; padding:0 8px 0 12px;
  background:var(--paper); border:1px solid var(--line); border-radius:3px; color:var(--mute);
  text-decoration:none; font-size:14px; min-width:200px; justify-content:space-between;
}
@media (min-width:768px){ .searchbtn{ display:flex; } }

/* stack popover */
.stack{ position:relative; }
.stack summary{
  list-style:none; display:flex; align-items:center; gap:8px; height:36px; padding:0 12px;
  border:1px solid var(--ink); border-radius:3px; background:var(--ink); color:var(--paper);
  font:500 13px/1 var(--f-body); cursor:pointer; user-select:none;
}
.stack summary::-webkit-details-marker{ display:none; }
.stack summary .n{
  font:600 12px/1 var(--f-mono); background:var(--amber); color:var(--ink);
  min-width:20px; height:20px; display:grid; place-items:center; border-radius:2px; padding:0 4px;
}
.stack .pop{
  position:absolute; right:0; top:44px; width:300px; max-width:calc(100vw - 32px);
  background:var(--paper); border:1px solid var(--ink); box-shadow:6px 6px 0 rgba(23,25,27,.12);
  padding:14px;
}
.stack .pop ul{ list-style:none; margin:10px 0 0; padding:0; }
.stack .pop li{ display:flex; justify-content:space-between; align-items:center; padding:7px 0; border-top:1px solid var(--line-2); font-size:14px; }
.stack .pop li button{ background:none; border:0; color:var(--mute); font:400 12px var(--f-mono); padding:2px 4px; }
.stack .pop .empty{ color:var(--mute); font-size:13px; margin:8px 0 0; }

/* ---------- hero: the bench ---------- */
.bench{
  border-bottom:1px solid var(--line);
  background-color:var(--bg);
  background-image:
    linear-gradient(to right, rgba(23,25,27,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(23,25,27,.055) 1px, transparent 1px);
  background-size:24px 24px;
}
.bench .wrap{ display:grid; gap:28px; padding-top:40px; padding-bottom:40px; }
@media (min-width:1000px){ .bench .wrap{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:48px; padding-top:64px; padding-bottom:56px; } }
.rev{ display:flex; gap:12px; align-items:center; margin-bottom:22px; flex-wrap:wrap; }
.rev .tag{ background:var(--ink); color:var(--amber); font:500 11px/1 var(--f-mono); padding:5px 7px; letter-spacing:.06em; }
h1.big{
  font:600 clamp(46px, 9vw, 104px)/.92 var(--f-display); letter-spacing:-.045em; margin:0 0 22px;
}
h1.big em{ font-style:normal; position:relative; white-space:nowrap; }
h1.big em::after{
  content:""; position:absolute; left:.02em; right:.04em; bottom:.17em; height:.17em; background:var(--amber); z-index:-1;
}
h1.big{ position:relative; z-index:0; }
.lede{ font-size:18px; line-height:1.5; color:var(--ink-2); max-width:56ch; margin:0 0 28px; }
@media (min-width:768px){ .lede{ font-size:19px; } }

.console{ background:var(--paper); border:1px solid var(--ink); box-shadow:4px 4px 0 var(--ink); max-width:640px; }
.console label{ display:block; padding:9px 14px 0; }
.console .field{ display:flex; align-items:center; gap:10px; padding:4px 14px 12px; }
.console .field svg{ flex:none; color:var(--mute); }
.console input{
  flex:1; min-width:0; border:0; background:transparent; outline:none;
  font:500 20px/1.3 var(--f-display); letter-spacing:-.01em; color:var(--ink); padding:6px 0;
}
.console input::placeholder{ color:#81878D; }
.console:focus-within{ box-shadow:4px 4px 0 var(--amber); border-color:var(--ink); }
.console .try{
  border-top:1px solid var(--line-2); padding:9px 14px; display:flex; gap:6px 14px; flex-wrap:wrap;
  font:400 13px/1.4 var(--f-body); color:var(--mute);
}
.console .try button{
  background:none; border:0; padding:0; font:500 13px/1.4 var(--f-mono); color:var(--ink-2);
  text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:3px;
}
.console .try button:hover{ text-decoration-color:var(--amber-ink); }

/* readout panel */
.readout{ background:var(--panel); border:1px solid var(--ink); align-self:start; }
.readout header{ display:flex; justify-content:space-between; align-items:center; padding:10px 14px; border-bottom:1px solid var(--ink); }
.readout .grid{ display:grid; grid-template-columns:1fr 1fr; }
.readout .cell{ padding:14px; border-right:1px solid var(--line-2); border-bottom:1px solid var(--line-2); min-width:0; }
.readout .cell:nth-child(2n){ border-right:0; }
.readout .val{ font:500 28px/1.1 var(--f-mono); letter-spacing:-.03em; margin-top:6px; }
.readout .val small{ font-size:13px; color:var(--mute); letter-spacing:0; margin-left:4px; }
.readout .bars{ padding:14px; }
.readout .bars ol{ list-style:none; margin:10px 0 0; padding:0; display:grid; gap:5px; }
.readout .bars li{ display:grid; grid-template-columns:minmax(0,150px) 1fr 30px; align-items:center; gap:10px; font-size:12.5px; }
.readout .bars li span:first-child{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--ink-2); }
.readout .bars .b{ height:8px; background:var(--line-2); position:relative; }
.readout .bars .b i{ position:absolute; inset:0 auto 0 0; background:var(--ink); }
.readout .bars li:first-child .b i{ background:var(--amber); }
.readout .bars .c{ font:500 12px/1 var(--f-mono); text-align:right; }

/* ---------- section heads ---------- */
.sec{ padding:48px 0; }
@media (min-width:768px){ .sec{ padding:72px 0; } }
.sechead{ display:grid; gap:10px; margin-bottom:24px; }
@media (min-width:900px){ .sechead{ grid-template-columns:200px 1fr auto; align-items:end; gap:24px; } }
.sechead .no{ font:500 12px/1 var(--f-mono); color:var(--mute); letter-spacing:.06em; border-top:2px solid var(--ink); padding-top:8px; align-self:start; }
.sechead h2{ font:600 clamp(28px,4.4vw,44px)/1 var(--f-display); letter-spacing:-.035em; margin:0; }
.sechead p{ margin:6px 0 0; color:var(--ink-2); max-width:60ch; }

/* ---------- index: filters ---------- */
.filters{ position:sticky; top:0; z-index:15; background:var(--bg); border-top:1px solid var(--ink); border-bottom:1px solid var(--line); }
.cats{ display:flex; gap:0; overflow-x:auto; scrollbar-width:thin; border-bottom:1px solid var(--line-2); }
.cats button{
  flex:none; border:0; background:none; padding:12px 14px 11px; font:500 13.5px/1 var(--f-body);
  color:var(--ink-2); border-right:1px solid var(--line-2); white-space:nowrap;
}
.cats button .c{ font:400 11px/1 var(--f-mono); color:var(--mute); margin-left:6px; }
.cats button:hover{ background:var(--panel); }
.cats button[aria-pressed="true"]{ background:var(--ink); color:var(--paper); }
.cats button[aria-pressed="true"] .c{ color:var(--amber); }
.subfilters{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; padding:10px 0; }
.price{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.chip{
  border:1px solid var(--line); background:var(--paper); padding:6px 10px; border-radius:2px;
  font:500 12.5px/1 var(--f-mono); color:var(--ink-2);
}
.chip[aria-pressed="true"]{ border-color:var(--ink); background:var(--amber); color:var(--ink); }
.note{ font:400 12px/1.4 var(--f-body); color:var(--mute); }
.note b{ font-weight:600; color:var(--amber-ink); font-family:var(--f-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; }
.sort{ margin-left:auto; display:flex; align-items:center; gap:8px; }
.sort select{
  font:500 13px/1 var(--f-body); background:var(--paper); border:1px solid var(--line); padding:7px 8px; border-radius:2px; color:var(--ink);
}
.count{ font:400 12px/1 var(--f-mono); color:var(--mute); }
@media (max-width:640px){ .sort{ margin-left:0; } }

/* ---------- index: rows ---------- */
.colhead, .row{
  display:grid; align-items:center; gap:16px;
  grid-template-columns:44px minmax(0,1fr) 128px 170px 86px 118px 168px;
}
.colhead{ padding:10px 12px; border-bottom:1px solid var(--ink); }
.colhead span{ font:500 10.5px/1 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--mute); }
.rows{ list-style:none; margin:0; padding:0; background:var(--panel); border:1px solid var(--line); border-top:0; }
.row{ padding:12px; border-bottom:1px solid var(--line-2); position:relative; }
.row:hover{ background:var(--paper); }
.row:hover::before{ content:""; position:absolute; left:-1px; top:-1px; bottom:-1px; width:3px; background:var(--amber); }
.row.is-cmp{ background:var(--amber-wash); }

.sym{
  width:44px; height:44px; border:1px solid var(--ink); background:var(--paper); position:relative;
  display:grid; place-items:center; font:600 18px/1 var(--f-display); letter-spacing:-.03em; color:var(--ink);
}
.sym i{ position:absolute; top:3px; left:4px; font:500 8.5px/1 var(--f-mono); font-style:normal; color:var(--mute); letter-spacing:0; }
.sym b{ position:absolute; bottom:3px; right:4px; font:500 7.5px/1 var(--f-mono); color:var(--mute); letter-spacing:.04em; }
.sym.top{ background:var(--ink); color:var(--amber); border-color:var(--ink); }
.sym.top i, .sym.top b{ color:var(--on-graphite-2); }

.nm{ min-width:0; }
.nm a{ font:600 16.5px/1.2 var(--f-display); letter-spacing:-.02em; text-decoration:none; }
.nm a:hover{ text-decoration:underline; }
.nm p{ margin:3px 0 0; font-size:13.5px; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nm .tags{ display:flex; gap:6px; margin-top:6px; flex-wrap:wrap; }
.nm .tags span{ font:400 10.5px/1 var(--f-mono); color:var(--mute); border:1px solid var(--line); padding:3px 5px; letter-spacing:.02em; }

.gauge{ display:flex; align-items:center; gap:9px; }
.gauge .v{ font:600 15px/1 var(--f-mono); width:28px; }
.gauge .bar{
  flex:1; height:10px; position:relative; background:var(--line-2); max-width:84px;
}
.gauge .bar i{ position:absolute; inset:0 auto 0 0; background:var(--ink); }
.gauge .bar.hi i{ background:var(--amber); box-shadow:inset 0 0 0 1px rgba(23,25,27,.25); }
.gauge .bar::after{ /* integer ticks */
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(to right, transparent 0, transparent calc(20% - 1px), var(--panel) calc(20% - 1px), var(--panel) 20%);
}
.row:hover .gauge .bar::after{ background:repeating-linear-gradient(to right, transparent 0, transparent calc(20% - 1px), var(--paper) calc(20% - 1px), var(--paper) 20%); }
.row.is-cmp .gauge .bar::after{ background:repeating-linear-gradient(to right, transparent 0, transparent calc(20% - 1px), var(--amber-wash) calc(20% - 1px), var(--amber-wash) 20%); }

.vis{ display:grid; grid-template-columns:auto 64px; grid-template-rows:auto auto; column-gap:10px; align-items:center; }
.vis .n{ font:600 15px/1 var(--f-mono); }
.vis .d{ font:500 11.5px/1 var(--f-mono); grid-column:1; margin-top:4px; }
.vis svg{ grid-row:1 / span 2; grid-column:2; overflow:visible; }
.up{ color:var(--teal); } .dn{ color:var(--rust); } .flat{ color:var(--mute); }

.cc{ font:500 12.5px/1 var(--f-mono); display:flex; align-items:center; gap:6px; }
.cc b{ border:1px solid var(--ink); padding:3px 4px 2px; font-weight:600; font-size:11px; letter-spacing:.04em; }
.cc span{ color:var(--ink-2); }

.rev3{ font:400 11.5px/1.55 var(--f-mono); color:var(--ink-2); }
.rev3 span{ display:block; white-space:nowrap; }
.rev3 em{ font-style:normal; color:var(--mute); }

.acts{ display:flex; gap:6px; justify-content:flex-end; }
.btn{
  display:inline-flex; align-items:center; gap:7px; height:32px; padding:0 10px;
  border:1px solid var(--line); background:var(--paper); border-radius:2px;
  font:500 12.5px/1 var(--f-body); color:var(--ink); text-decoration:none; white-space:nowrap;
}
.btn:hover{ border-color:var(--ink); }
.btn .box{ width:12px; height:12px; border:1.5px solid var(--ink); display:inline-block; position:relative; }
.btn[aria-pressed="true"] .box{ background:var(--ink); }
.btn[aria-pressed="true"] .box::after{ content:""; position:absolute; left:3px; top:0; width:3px; height:6px; border:solid var(--amber); border-width:0 2px 2px 0; transform:rotate(45deg); }
.btn.save svg{ width:12px; height:13px; }
.btn.save[aria-pressed="true"]{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.btn.save[aria-pressed="true"] svg path{ fill:var(--amber); stroke:var(--amber); }
.btn.solid{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.btn.solid:hover{ background:#000; }
.btn.amber{ background:var(--amber); border-color:var(--ink); color:var(--ink); }
.btn.lg{ height:42px; padding:0 16px; font-size:14px; }

.more{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 0; flex-wrap:wrap; }
.empty-row{ padding:28px 14px; color:var(--mute); }

/* rows: tablet / phone */
@media (max-width:1180px){
  .colhead{ display:none; }
  .rows{ border-top:1px solid var(--line); }
  .row{
    grid-template-columns:44px minmax(0,1fr) auto;
    grid-template-areas:"sym nm acts" "m m m";
    gap:10px 12px;
  }
  .row .sym{ grid-area:sym; align-self:start; }
  .row .nm{ grid-area:nm; }
  .row .acts{ grid-area:acts; align-self:start; }
  .row .meters{ grid-area:m; }
  .meters{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px; padding-top:10px; border-top:1px dashed var(--line); }
}
@media (min-width:1181px){ .meters{ display:contents; } }
@media (max-width:640px){
  .meters{ grid-template-columns:1fr 1fr; gap:12px 14px; }
  .nm p{ white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
  .row .acts{ flex-direction:column; }
  .row .acts .btn{ width:36px; padding:0; justify-content:center; }
  .row .acts .btn .t{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
}
.meters .mlabel{ display:none; }
@media (max-width:1180px){ .meters .mlabel{ display:block; margin-bottom:6px; font-size:10px; } }

/* ---------- finder band ---------- */
.finder{ background:var(--amber); border-top:2px solid var(--ink); border-bottom:2px solid var(--ink); }
.finder .wrap{ display:grid; gap:28px; padding-top:44px; padding-bottom:44px; }
@media (min-width:1000px){ .finder .wrap{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:56px; padding-top:64px; padding-bottom:64px; } }
.finder .label{ color:var(--ink); }
.finder h2{ font:600 clamp(36px,5.6vw,68px)/.95 var(--f-display); letter-spacing:-.045em; margin:12px 0 16px; }
.finder p{ font-size:17px; max-width:44ch; margin:0 0 24px; }
.steps{ list-style:none; margin:0; padding:0; border-top:2px solid var(--ink); }
.steps li{ display:grid; grid-template-columns:44px minmax(0,1fr); gap:12px; padding:14px 0; border-bottom:1px solid rgba(23,25,27,.35); }
.steps .k{ font:600 13px/1.5 var(--f-mono); }
.steps h3{ margin:0 0 8px; font:600 18px/1.25 var(--f-display); letter-spacing:-.02em; }
.steps .opts{ display:flex; flex-wrap:wrap; gap:6px; }
.steps .opts span{ font:500 12px/1 var(--f-mono); border:1px solid var(--ink); padding:5px 7px; background:rgba(250,250,249,.45); }

/* ---------- bench tools ---------- */
.mini{ display:grid; gap:0; grid-template-columns:1fr; border:1px solid var(--ink); background:var(--panel); }
@media (min-width:700px){ .mini{ grid-template-columns:1fr 1fr; } }
@media (min-width:1100px){ .mini{ grid-template-columns:repeat(4,1fr); } }
.mini a{ display:flex; flex-direction:column; gap:10px; padding:18px; text-decoration:none; border-bottom:1px solid var(--line); min-width:0; }
@media (min-width:700px){ .mini a{ border-right:1px solid var(--line); } }
.mini a:hover{ background:var(--paper); }
.mini a:hover .go{ background:var(--amber); }
.mini .top{ display:flex; justify-content:space-between; align-items:center; }
.mini h3{ margin:0; font:600 20px/1.15 var(--f-display); letter-spacing:-.025em; }
.mini p{ margin:0; font-size:14px; color:var(--ink-2); }
.mini .go{ font:500 12px/1 var(--f-mono); border:1px solid var(--ink); padding:5px 7px; }
.scope{
  margin-top:auto; background:var(--paper); border:1px solid var(--line); padding:12px;
  font:400 11.5px/1.6 var(--f-mono); color:var(--ink-2); min-height:132px; overflow:hidden;
}
.scope .serp-t{ font:400 15px/1.3 var(--f-body); color:#1a0dab; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.scope .serp-u{ color:var(--teal); font-size:11px; }
.scope .serp-d{ font:400 12px/1.45 var(--f-body); color:var(--ink-2); margin-top:3px; }
.scope .px{ display:flex; align-items:center; gap:8px; margin-top:8px; }
.scope .px .b{ flex:1; height:6px; background:var(--line-2); position:relative; }
.scope .px .b i{ position:absolute; inset:0 auto 0 0; width:88%; background:var(--teal-line); }
.scope .ok{ color:var(--teal); font-weight:600; } .scope .no{ color:var(--rust); font-weight:600; }
.scope .k{ color:var(--amber-ink); font-weight:600; }
.scope .line{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ---------- blog ledger ---------- */
.ledger{ list-style:none; margin:0; padding:0; border-top:2px solid var(--ink); }
.ledger li a{
  display:grid; grid-template-columns:96px minmax(0,1fr) 24px; gap:16px; align-items:baseline;
  padding:16px 0; border-bottom:1px solid var(--line); text-decoration:none;
}
.ledger li a:hover{ background:var(--panel); }
.ledger time{ font:500 12px/1.4 var(--f-mono); color:var(--mute); }
.ledger .t{ font:600 20px/1.2 var(--f-display); letter-spacing:-.025em; }
.ledger .s{ display:block; font:400 14px/1.45 var(--f-body); color:var(--ink-2); margin-top:4px; }
.ledger .ar{ font:500 16px/1 var(--f-mono); color:var(--mute); }
.ledger li a:hover .ar{ color:var(--ink); }
@media (max-width:640px){
  .ledger li a{ grid-template-columns:minmax(0,1fr) 20px; gap:4px 12px; }
  .ledger time{ grid-column:1 / -1; }
  .ledger .t{ font-size:18px; }
}
.blogwrap{ display:grid; gap:28px; }
@media (min-width:1000px){ .blogwrap{ grid-template-columns:200px 1fr; gap:24px; } }

/* ---------- footer ---------- */
.foot{ background:var(--panel); border-top:2px solid var(--ink); padding:44px 0 0; }
.foot .cols{ display:grid; gap:28px; grid-template-columns:1fr 1fr; }
@media (min-width:900px){ .foot .cols{ grid-template-columns:2fr 1fr 1fr 1fr; } }
.foot .brand{ grid-column:1 / -1; }
@media (min-width:900px){ .foot .brand{ grid-column:auto; } }
.foot .brand p{ color:var(--ink-2); max-width:38ch; font-size:14px; }
.foot h3{ font:500 11px/1 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--mute); margin:0 0 12px; }
.foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:2px; font-size:14px; }
.foot ul a{ text-decoration:none; display:inline-block; padding:3px 0; min-height:24px; }
.foot ul a:hover{ text-decoration:underline; }
.copy{
  margin-top:40px; border-top:1px solid var(--line); padding:16px 0 24px;
  font:400 12px/1.6 var(--f-mono); color:var(--mute); display:flex; flex-wrap:wrap; gap:4px 18px; justify-content:space-between;
}
.copy a{ color:var(--ink); }

/* ---------- compare tray ---------- */
.tray{
  position:fixed; left:0; right:0; bottom:0; z-index:40; background:var(--graphite); color:var(--on-graphite);
  border-top:3px solid var(--amber); transform:translateY(110%); transition:transform .22s ease;
}
.tray.on{ transform:none; }
.tray .wrap{ display:flex; align-items:center; gap:14px; min-height:68px; padding-top:10px; padding-bottom:10px; }
.tray .lab{ font:500 11px/1.3 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--on-graphite-2); flex:none; }
.tray .lab b{ display:block; color:var(--amber); font-size:16px; letter-spacing:0; }
.slots{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; flex:1; min-width:0; }
.slot{
  display:flex; align-items:center; gap:8px; min-width:0; border:1px solid #474D53; padding:6px 8px; height:44px;
}
.slot.empty{ border-style:dashed; color:var(--on-graphite-2); font:400 12px var(--f-mono); justify-content:center; }
.slot .sym{ width:30px; height:30px; font-size:13px; flex:none; }
.slot .sym i, .slot .sym b{ display:none; }
.slot span{ font:500 13.5px/1.2 var(--f-body); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; flex:1; }
.slot button{ background:none; border:0; color:var(--on-graphite-2); font:400 16px/1 var(--f-mono); padding:4px; flex:none; }
.slot button:hover{ color:var(--amber); }
.tray .go{ flex:none; }
.tray .btn.amber[disabled]{ opacity:.55; cursor:not-allowed; }
.tray .msg{ position:absolute; left:var(--gutter); top:-34px; background:var(--ink); color:var(--amber); font:500 12px/1 var(--f-mono); padding:8px 10px; opacity:0; transition:opacity .2s; pointer-events:none; }
.tray .msg.show{ opacity:1; }
@media (max-width:760px){
  .tray .lab{ display:none; }
  .slot .sym{ display:none; }
  .slot{ height:40px; padding:4px 6px; }
  .slot span{ font-size:12.5px; }
  .tray .btn.amber{ padding:0 10px; }
  .tray .btn.amber .t2{ display:none; }
}

/* ---------- tool page ---------- */
.crumbs{ font:400 12px/1 var(--f-mono); color:var(--mute); padding:18px 0; display:flex; flex-wrap:wrap; gap:6px; }
.crumbs a{ color:var(--ink-2); }
.crumbs span[aria-current]{ color:var(--ink); }
.thead{ display:grid; gap:24px; padding-bottom:36px; border-bottom:2px solid var(--ink); }
@media (min-width:1000px){ .thead{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:48px; } }
.idrow{ display:flex; gap:18px; align-items:flex-start; }
.sym.xl{ width:92px; height:92px; font-size:40px; flex:none; }
.sym.xl i{ font-size:11px; top:6px; left:7px; }
.sym.xl b{ font-size:9.5px; bottom:6px; right:7px; }
.thead h1{ font:600 clamp(48px,8vw,92px)/.9 var(--f-display); letter-spacing:-.05em; margin:4px 0 10px; }
.thead .one{ font-size:18px; color:var(--ink-2); max-width:52ch; margin:16px 0 18px; }
.thead .meta{ display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center; font:400 13px/1.4 var(--f-mono); color:var(--ink-2); }
.thead .acts{ justify-content:flex-start; margin-top:20px; flex-wrap:wrap; }

.ratings{ background:var(--panel); border:1px solid var(--ink); align-self:start; }
.ratings header{ padding:10px 14px; border-bottom:1px solid var(--ink); display:flex; justify-content:space-between; gap:8px; }
.rt{ display:grid; grid-template-columns:minmax(0,120px) minmax(0,1fr) auto; gap:14px; align-items:center; padding:14px; border-bottom:1px solid var(--line-2); }
.rt:last-child{ border-bottom:0; }
.rt .src{ font:600 14px/1.2 var(--f-display); }
.rt .src small{ display:block; font:400 11px/1.3 var(--f-mono); color:var(--mute); margin-top:3px; }
.rt .big{ font:600 30px/1 var(--f-mono); letter-spacing:-.03em; }
.rt .big small{ font-size:13px; color:var(--mute); letter-spacing:0; }
.rt .gauge .bar{ max-width:none; height:12px; }
.rt.ours{ background:var(--paper); }
.rt.na .big{ color:var(--mute); }
.rt.na .bar{ background:transparent; border:1px dashed var(--line); }
.rt.na .bar::after{ display:none; }
.rt a{ font:500 12px/1.3 var(--f-mono); }
/* editorial score: the how-it-is-made card under our row */
.rt.ours{ position:relative; }
.hs-btn{ all:unset; cursor:pointer; display:inline-flex; align-items:center; gap:4px; white-space:nowrap; font:500 11px/1.3 var(--f-mono); color:var(--ink-2); text-decoration:underline; text-decoration-style:dotted; text-underline-offset:3px; }
.hs-btn i{ flex:none; display:inline-grid; place-items:center; width:13px; height:13px; border:1px solid currentColor; border-radius:50%; font:600 9px/1 var(--f-mono); font-style:normal; text-decoration:none; }
.hs-btn:hover, .hs.open .hs-btn{ color:var(--ink); }
.hs-btn:hover i, .hs.open .hs-btn i{ background:var(--amber); border-color:var(--ink); color:var(--ink); }
.hs-btn:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
.hs-pop{ position:absolute; z-index:30; top:calc(100% - 6px); left:-1px; right:-1px; display:block; padding:16px 16px 14px; background:var(--paper); border:1px solid var(--ink); box-shadow:6px 6px 0 var(--ink); color:var(--ink); font:400 13.5px/1.5 var(--f-body);
  opacity:0; visibility:hidden; transform:translateY(-4px); transition:opacity .15s, transform .15s, visibility 0s linear .25s; }
.hs-btn:hover + .hs-pop, .hs-pop:hover, .hs:focus-within .hs-pop, .hs.open .hs-pop{ opacity:1; visibility:visible; transform:none; transition-delay:0s; }
.hs.shut .hs-pop{ opacity:0 !important; visibility:hidden !important; }
.hs-head{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.hs-head b{ white-space:nowrap; font:600 26px/1 var(--f-mono); letter-spacing:-.03em; }
.rt .hs-head b small{ display:inline; margin:0; font-size:12px; color:var(--mute); letter-spacing:0; }
.hs-scale{ position:relative; display:block; height:30px; margin:34px 0 4px; background:var(--panel); border:1px solid var(--line); }
.hs-band{ position:absolute; top:0; bottom:0; border-right:1px solid var(--line); display:flex; align-items:center; justify-content:center; }
.hs-band:last-of-type{ border-right:0; }
.hs-band em{ font:500 9.5px/1 var(--f-mono); font-style:normal; letter-spacing:.06em; text-transform:uppercase; color:var(--mute); white-space:nowrap; }
.hs-band.on{ background:var(--amber-wash); }
.hs-band.on em{ color:var(--ink); }
.hs-mark{ position:absolute; top:-5px; bottom:-5px; width:3px; margin-left:-1.5px; background:var(--ink); }
.hs-mark em{ position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%); padding:3px 6px 2px; background:var(--ink); color:var(--paper); font:600 9.5px/1 var(--f-mono); font-style:normal; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; }
.hs-mark em.r{ left:auto; right:-2px; transform:none; }
.hs-mark em.l{ left:-2px; transform:none; }
.hs-mark::before{ content:""; position:absolute; top:-6px; left:50%; margin-left:-5px; border:5px solid transparent; border-top-color:var(--ink); }
.hs-ticks{ display:flex; justify-content:space-between; font:400 10px/1 var(--f-mono); color:var(--mute); margin-bottom:12px; }
.hs-text{ display:block; color:var(--ink-2); }
.hs-pillars{ display:block; margin-top:12px; border-top:1px solid var(--ink); }
.hs-p{ display:grid; grid-template-columns:minmax(0,118px) minmax(0,1fr) 46px; gap:4px 10px; align-items:center; padding:8px 0; border-bottom:1px solid var(--line-2); }
.hs-pl{ display:flex; align-items:baseline; gap:6px; font:600 12.5px/1.2 var(--f-display); color:var(--ink); }
.hs-pl em{ font:400 10.5px/1 var(--f-mono); font-style:normal; color:var(--mute); }
.hs-pb{ position:relative; height:8px; background:var(--panel); border:1px solid var(--line); }
.hs-pb i{ position:absolute; inset:0 auto 0 0; background:var(--ink); }
.hs-p.na .hs-pb{ border-style:dashed; }
.hs-p.na .hs-pb i{ background:var(--line); }
.hs-pv{ font:600 12px/1 var(--f-mono); text-align:right; color:var(--ink); }
.hs-pn{ grid-column:1 / -1; font:400 11px/1.35 var(--f-mono); color:var(--mute); }
.hs-sum{ display:flex; justify-content:space-between; padding:9px 0 0; font:400 12px/1 var(--f-mono); color:var(--mute); }
.hs-sum b{ font-weight:600; color:var(--ink); font-size:13px; }
.rt .hs-more{ display:inline-block; margin-top:12px; font:500 12px/1.3 var(--f-mono); color:var(--ink); }
@media (prefers-reduced-motion:reduce){ .hs-pop{ transition:none; transform:none; } }

.tgrid{ display:grid; gap:40px; padding:40px 0 64px; }
@media (min-width:1000px){ .tgrid{ grid-template-columns:minmax(0,8fr) minmax(0,4fr); gap:48px; } }
.tgrid h2{ font:600 26px/1.1 var(--f-display); letter-spacing:-.03em; margin:0 0 14px; display:flex; align-items:baseline; gap:12px; }
.tgrid h2 .label{ font-size:11px; }
.block{ margin-bottom:44px; }

.verdict{ border-left:6px solid var(--amber); background:var(--panel); padding:20px 22px; }
.verdict p{ font:500 20px/1.45 var(--f-display); letter-spacing:-.015em; margin:8px 0 0; }
.verdict .draft{ font:500 10.5px/1 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--amber-ink); }

.fit{ display:grid; gap:0; border:1px solid var(--line); background:var(--panel); }
@media (min-width:700px){ .fit{ grid-template-columns:1fr 1fr; } }
.fit > div{ padding:18px; }
.fit > div + div{ border-top:1px solid var(--line); }
@media (min-width:700px){ .fit > div + div{ border-top:0; border-left:1px solid var(--line); } }
.fit h3{ margin:0 0 10px; font:500 11px/1 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; }
.fit ul{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.fit li{ display:grid; grid-template-columns:18px 1fr; font-size:15px; }
.fit li::before{ font:600 14px/1.5 var(--f-mono); }
.fit .yes li::before{ content:"+"; color:var(--teal); }
.fit .no li::before{ content:"\2212"; color:var(--rust); }

.feat{ display:grid; grid-template-columns:1fr; border-top:1px solid var(--ink); margin:0; }
@media (min-width:700px){ .feat{ grid-template-columns:1fr 1fr; column-gap:28px; } }
.feat > div{ position:relative; padding:12px 0 12px 34px; border-bottom:1px solid var(--line); }
.feat dt{ font:600 15px/1.3 var(--f-display); }
.feat dd{ margin:3px 0 0; color:var(--ink-2); font-size:14px; }
.feat .k{ position:absolute; left:0; top:12px; font:500 11px/1.6 var(--f-mono); color:var(--mute); }

.pricing{ border:1px solid var(--ink); background:var(--panel); position:relative; overflow:hidden; }
.pricing .ph{ display:flex; flex-wrap:wrap; gap:8px 16px; justify-content:space-between; align-items:center; padding:10px 14px; border-bottom:1px solid var(--ink);
  background:repeating-linear-gradient(-45deg, var(--amber-wash) 0 10px, var(--panel) 10px 20px); }
.pricing .ph b{ font:600 12px/1 var(--f-mono); letter-spacing:.06em; text-transform:uppercase; }
.pricing .ph .stamp{ font:600 11px/1 var(--f-mono); letter-spacing:.1em; border:1.5px solid var(--amber-ink); color:var(--amber-ink); padding:4px 6px; background:var(--paper); }
.ptable{ width:100%; border-collapse:collapse; font-size:14px; }
.ptable th, .ptable td{ padding:11px 14px; text-align:left; border-bottom:1px solid var(--line-2); vertical-align:top; }
.ptable thead th{ font:600 15px/1.2 var(--f-display); }
.ptable thead th small{ display:block; font:500 20px/1.3 var(--f-mono); margin-top:4px; letter-spacing:-.02em; }
.ptable tbody th{ font:400 12px/1.4 var(--f-mono); color:var(--mute); font-weight:400; width:28%; }
.ptable td{ font-family:var(--f-mono); font-size:13px; color:var(--ink-2); }
.ptable tr:last-child th, .ptable tr:last-child td{ border-bottom:0; }
.pscroll{ overflow-x:auto; }

.shot{ border:1px solid var(--ink); background:var(--paper); }
.shot .bar{ display:flex; gap:10px; align-items:center; padding:8px 12px; border-bottom:1px solid var(--ink); font:400 12px/1 var(--f-mono); color:var(--mute); }
.shot .bar i{ width:8px; height:8px; border:1px solid var(--mute); display:inline-block; }
.shot img{ width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; object-position:top; }
.shot figcaption{ font:400 12px/1.5 var(--f-mono); color:var(--mute); padding:8px 12px; border-top:1px solid var(--line); }

/* aside: traffic */
.side{ display:grid; gap:24px; align-content:start; }
@media (min-width:1000px){ .side{ position:sticky; top:16px; } }
.panel{ background:var(--panel); border:1px solid var(--ink); }
.panel > header{ padding:10px 14px; border-bottom:1px solid var(--ink); display:flex; justify-content:space-between; align-items:center; gap:8px; }
.panel .body{ padding:14px; }
.kpi{ font:600 40px/1 var(--f-mono); letter-spacing:-.04em; }
.kpi small{ font-size:13px; letter-spacing:0; color:var(--mute); font-weight:400; }
.chart{ margin-top:16px; }
.chart svg{ width:100%; height:auto; display:block; }
.chart text{ font-family:var(--f-mono); font-size:10px; fill:var(--mute); }
.chart .vl{ fill:var(--ink); font-weight:600; font-size:10.5px; }
.ctry{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.ctry li{ display:grid; grid-template-columns:34px 1fr 54px; gap:10px; align-items:center; font:500 12.5px/1 var(--f-mono); }
.ctry .b{ height:10px; background:var(--line-2); position:relative; }
.ctry .b i{ position:absolute; inset:0 auto 0 0; background:var(--ink); }
.ctry li.na{ color:var(--mute); }
.ctry li.na .b{ background:transparent; border:1px dashed var(--line); }
.alts{ list-style:none; margin:0; padding:0; }
.alts li{ display:grid; grid-template-columns:36px minmax(0,1fr) auto; gap:10px; align-items:center; padding:10px 14px; border-bottom:1px solid var(--line-2); }
.alts li:last-child{ border-bottom:0; }
.alts .sym{ width:36px; height:36px; font-size:15px; }
.alts .sym i, .alts .sym b{ display:none; }
.alts a{ font:600 15px/1.2 var(--f-display); text-decoration:none; }
.alts a:hover{ text-decoration:underline; }
.alts .m{ font:400 11.5px/1.4 var(--f-mono); color:var(--ink-2); display:flex; gap:10px; margin-top:2px; }
.alts .btn{ height:30px; }
.foot-space{ height:80px; }
.tgrid > *{ min-width:0; }
@media (max-width:767px){ .console .kb{ display:none; } }
@media (max-width:1180px){ .vis svg{ grid-row:2 / span 2; } }
@media (max-width:640px){ .nm .tags span:nth-child(n+2){ display:none; } .meters{ gap:10px 14px; } }
.tgrid h2.label{ font:500 11px/1.3 var(--f-mono); letter-spacing:.08em; display:block; margin:0; }
.verdict h2.label{ color:var(--ink); }
@media (max-width:640px){ .thead .acts .btn{ flex:1 1 auto; justify-content:center; } .ptable{ min-width:520px; } }
.sechead .btn{ justify-self:start; }

/* ===== theme additions (relaunch) ===== */
.cats a{ flex:none; border:0; background:none; padding:12px 14px 11px; font:500 13.5px/1 var(--f-body); color:var(--ink-2); border-right:1px solid var(--line-2); white-space:nowrap; text-decoration:none; }
.cats a .c{ font:400 11px/1 var(--f-mono); color:var(--mute); margin-left:6px; }
.cats a:hover{ background:var(--panel); }
.cats a[aria-current="true"]{ background:var(--ink); color:var(--paper); }
.cats a[aria-current="true"] .c{ color:var(--amber); }
.rows:not(.all) [data-more]{ display:none; }
.row[hidden]{ display:none!important; }
.nm .tags .pr{ border-color:var(--ink); color:var(--ink); }
.readout .bars li a{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--ink-2); text-decoration:none; }
.readout .bars li a:hover{ text-decoration:underline; }
.tray .go[aria-disabled="true"]{ opacity:.55; pointer-events:none; }
.muted{ color:var(--mute); }
.small{ font:400 12px/1.5 var(--f-body); color:var(--mute); margin:12px 0 0; }
.small a{ color:var(--ink-2); }
.lead{ font-size:17px; line-height:1.6; color:var(--ink-2); max-width:68ch; margin:0; }
.pill{ font:500 12px/1 var(--f-mono); border:1px solid var(--ink); padding:4px 6px; background:var(--paper); }
.pill.ok{ background:var(--teal-wash); border-color:var(--teal); color:var(--teal); }
.thead .meta a{ color:var(--ink-2); }
.pnote{ padding:12px 14px; margin:0; font-size:13.5px; color:var(--ink-2); border-top:1px solid var(--line-2); }
.pricing .ph a{ font:500 12px/1 var(--f-mono); }
.ptable tbody th{ font:600 14px/1.3 var(--f-display); color:var(--ink); width:auto; }
.ptable thead th{ font:500 11px/1.3 var(--f-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--mute); }
.ptable td:nth-child(2), .ptable td:nth-child(3){ font-weight:600; color:var(--ink); white-space:nowrap; }
.qa{ margin:0; border-top:1px solid var(--ink); }
.qa > div{ padding:14px 0; border-bottom:1px solid var(--line); }
.qa dt{ font:600 16px/1.3 var(--f-display); }
.qa dd{ margin:6px 0 0; color:var(--ink-2); }
.facts{ margin:0; padding:6px 14px 2px; }
.facts > div{ display:grid; grid-template-columns:110px 1fr; gap:10px; padding:8px 0; border-bottom:1px solid var(--line-2); font-size:14px; }
.facts > div:last-child{ border-bottom:0; }
.facts dt{ font:500 11px/1.6 var(--f-mono); text-transform:uppercase; letter-spacing:.06em; color:var(--mute); }
.facts dd{ margin:0; }
.panel .src{ padding:0 14px 14px; margin:0; word-break:break-word; }
.ctry li.wide{ grid-template-columns:96px 1fr 54px; }
.kpi .d{ font-size:13px; letter-spacing:0; margin-left:6px; }
.verdict p{ font:500 19px/1.5 var(--f-display); letter-spacing:-.015em; margin:10px 0 0; }

/* menu on narrow screens */
.burger{ position:relative; }
.burger summary{ list-style:none; width:40px; height:36px; border:1px solid var(--line); background:var(--paper); display:grid; place-content:center; gap:4px; cursor:pointer; border-radius:2px; }
.burger summary::-webkit-details-marker{ display:none; }
.burger summary span{ display:block; width:16px; height:2px; background:var(--ink); }
.burger .pop{ position:absolute; right:0; top:44px; width:230px; background:var(--paper); border:1px solid var(--ink); box-shadow:6px 6px 0 rgba(23,25,27,.12); display:grid; padding:6px; }
.burger .pop a{ padding:10px; text-decoration:none; font-weight:500; border-bottom:1px solid var(--line-2); }
.burger .pop a:last-child{ border-bottom:0; }
@media (min-width:1080px){ .burger{ display:none; } }
@media (max-width:420px){ .stack summary{ padding:0 8px; font-size:12px; } .logo .wm{ font-size:18px; } .mast .wrap{ gap:10px; } }
.stack .pop .btn{ margin-top:10px; }

/* page heads for lists and pages */
.cathead{ display:grid; gap:24px; padding:8px 0 36px; }
@media (min-width:1000px){ .cathead{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:48px; align-items:start; } }
.cathead h1{ font:600 clamp(36px,6vw,64px)/.98 var(--f-display); letter-spacing:-.045em; margin:10px 0 16px; }
.cathead .lede{ margin-bottom:0; }
.cathead.nf{ padding:72px 0 96px; }
.cathead.nf .btn{ margin:24px 8px 0 0; }
.catgrid{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); border-top:1px solid var(--ink); border-left:1px solid var(--line); }
.catgrid a{ display:grid; gap:6px; padding:16px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); text-decoration:none; background:var(--panel); height:100%; }
.catgrid a:hover{ background:var(--paper); }
.catgrid b{ font:600 18px/1.2 var(--f-display); letter-spacing:-.02em; }
.catgrid .c{ font:400 12px/1 var(--f-mono); color:var(--mute); }
.hub{ list-style:none; margin:0 0 64px; padding:0; display:grid; gap:0; grid-template-columns:1fr; border-top:2px solid var(--ink); }
@media (min-width:800px){ .hub{ grid-template-columns:1fr 1fr; } }
.hub > li{ padding:20px 0 22px; border-bottom:1px solid var(--line); }
@media (min-width:800px){ .hub > li:nth-child(odd){ padding-right:28px; border-right:1px solid var(--line); } .hub > li:nth-child(even){ padding-left:28px; } }
.hub .hh{ display:flex; align-items:baseline; gap:12px; text-decoration:none; flex-wrap:wrap; }
.hub h2{ font:600 26px/1.1 var(--f-display); letter-spacing:-.03em; margin:0; }
.hub .c{ font:500 12px/1 var(--f-mono); color:var(--mute); margin-left:auto; }
.hub p{ color:var(--ink-2); margin:10px 0 14px; max-width:60ch; }
.mini-list{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px 16px; }
.mini-list li{ display:flex; align-items:center; gap:8px; font-weight:500; }
.mini-list .sym{ width:28px; height:28px; font-size:12px; }
.mini-list .sym i, .mini-list .sym b{ display:none; }
.az{ display:flex; flex-wrap:wrap; gap:4px; margin-bottom:24px; position:sticky; top:0; background:var(--bg); padding:8px 0; z-index:5; border-bottom:1px solid var(--line); }
.az a{ font:600 13px/1 var(--f-mono); padding:7px 9px; border:1px solid var(--line); background:var(--paper); text-decoration:none; }
.az a:hover{ border-color:var(--ink); background:var(--amber); }
.azg{ margin-bottom:28px; scroll-margin-top:60px; }
.azg h2{ font:600 32px/1 var(--f-display); margin:0 0 8px; border-bottom:2px solid var(--ink); padding-bottom:6px; }
.azg ul{ list-style:none; margin:0; padding:0; }
.azg li{ display:grid; grid-template-columns:minmax(120px,220px) 56px 140px minmax(0,1fr); gap:12px; padding:9px 0; border-bottom:1px solid var(--line-2); align-items:baseline; }
.azg li a{ font:600 15px/1.3 var(--f-display); }
.azg .r, .azg .p{ font:500 12.5px/1 var(--f-mono); }
.azg .o{ font-size:13.5px; color:var(--ink-2); }
@media (max-width:760px){ .azg li{ grid-template-columns:1fr auto; } .azg .p, .azg .o{ grid-column:1 / -1; } }

/* articles and plain pages */
.post{ display:grid; gap:40px; padding:8px 0 72px; }
@media (min-width:1000px){ .post{ grid-template-columns:minmax(0,8fr) minmax(0,4fr); gap:56px; } }
.post > *{ min-width:0; }
.phead h1{ font:600 clamp(32px,5vw,52px)/1.04 var(--f-display); letter-spacing:-.04em; margin:10px 0 22px; max-width:22ch; }
.cover{ margin:0 0 28px; border:1px solid var(--ink); background:var(--paper); }
.cover img{ width:100%; height:auto; }
.prose{ font-size:17px; line-height:1.68; color:var(--ink); max-width:72ch; }
.prose.narrow{ margin:48px 0 72px; }
.prose h2{ font:600 28px/1.15 var(--f-display); letter-spacing:-.03em; margin:44px 0 12px; scroll-margin-top:16px; }
.prose h3{ font:600 21px/1.25 var(--f-display); letter-spacing:-.02em; margin:30px 0 8px; }
.prose h4{ font:600 17px/1.3 var(--f-display); margin:24px 0 6px; }
.prose p{ margin:0 0 18px; }
.prose ul, .prose ol{ padding-left:22px; margin:0 0 18px; }
.prose li{ margin:6px 0; }
.prose a{ color:var(--ink); text-decoration-color:var(--amber-ink); }
.prose img{ border:1px solid var(--line); margin:12px 0 20px; height:auto; }
.prose blockquote{ margin:20px 0; padding:14px 18px; border-left:5px solid var(--amber); background:var(--panel); }
.prose code{ font:500 .88em/1 var(--f-mono); background:var(--panel); border:1px solid var(--line-2); padding:2px 4px; }
.prose pre{ background:var(--graphite); color:var(--on-graphite); padding:14px; overflow-x:auto; font:400 13px/1.55 var(--f-mono); }
.prose pre code{ background:none; border:0; color:inherit; padding:0; }
.tscroll{ overflow-x:auto; margin:8px 0 22px; border:1px solid var(--ink); background:var(--panel); }
.tscroll table{ border-collapse:collapse; width:100%; font-size:14.5px; line-height:1.45; min-width:480px; }
.tscroll th, .tscroll td{ padding:10px 12px; border-bottom:1px solid var(--line-2); text-align:left; vertical-align:top; }
/* .prose sets overflow-wrap:anywhere for long URLs; inside a table it splits "$59.99" across lines
   instead of letting the wrapper scroll. Whole words in cells, the .tscroll box takes the overflow. */
.prose .tscroll th, .prose .tscroll td, .prose .tscroll a{ overflow-wrap:normal; word-break:normal; }
.tscroll th{ font:500 11px/1.3 var(--f-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--mute); background:var(--paper); }
.tscroll tr:last-child td{ border-bottom:0; }
.toc ol{ margin:0; padding:10px 14px 12px 34px; font-size:14px; display:grid; gap:6px; }
.toc a{ text-decoration:none; }
.toc a:hover{ text-decoration:underline; }
.plain{ list-style:none; margin:0; padding:6px 14px 10px; }
.plain li{ padding:8px 0; border-bottom:1px solid var(--line-2); font-size:14.5px; line-height:1.4; }
.plain li:last-child{ border-bottom:0; }
.plain a{ text-decoration:none; } .plain a:hover{ text-decoration:underline; }

/* apps */
.finder-app{ display:grid; gap:28px; margin-bottom:24px; }
@media (min-width:1000px){ .finder-app{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:40px; align-items:start; } }
.fq{ border:0; border-top:2px solid var(--ink); margin:0 0 18px; padding:14px 0 0; }
.fq legend{ font:600 20px/1.25 var(--f-display); letter-spacing:-.02em; padding:0; display:flex; gap:12px; align-items:baseline; }
.fq .k{ font:600 13px/1 var(--f-mono); }
.fq .opts{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.fq label{ position:relative; }
.fq input{ position:absolute; opacity:0; }
.fq label span{ display:inline-block; font:500 13px/1 var(--f-mono); border:1px solid var(--ink); padding:9px 11px; background:var(--paper); cursor:pointer; }
.fq input:checked + span{ background:var(--amber); }
.fq input:focus-visible + span{ outline:2px solid var(--ink); outline-offset:2px; }
.shortlist{ position:sticky; top:16px; }
.shortlist .alts li{ grid-template-columns:36px minmax(0,1fr) auto; }
.shortlist .why{ font:400 12px/1.4 var(--f-mono); color:var(--mute); margin-top:3px; }
.cmp-app{ margin-bottom:72px; min-height:420px; }
.cmp{ width:100%; border-collapse:collapse; background:var(--panel); border:1px solid var(--ink); min-width:640px; }
.cmp th, .cmp td{ padding:12px 14px; border-bottom:1px solid var(--line-2); text-align:left; vertical-align:top; font-size:14px; }
.cmp thead th{ border-bottom:1px solid var(--ink); }
.cmp thead th a{ font:600 22px/1.1 var(--f-display); letter-spacing:-.03em; }
.cmp tbody th{ font:500 11px/1.4 var(--f-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--mute); width:18%; }
.cmp td{ font-family:var(--f-mono); font-size:13px; }
.cmp .best{ background:var(--amber-wash); }
.cmp ul{ margin:0; padding-left:16px; font-family:var(--f-body); }
.tool-app{ background:var(--panel); border:1px solid var(--ink); box-shadow:4px 4px 0 var(--ink); padding:18px; display:grid; gap:16px; margin-bottom:40px; }
.tool-app.two{ grid-template-columns:1fr; }
@media (min-width:900px){ .tool-app.two{ grid-template-columns:minmax(0,6fr) minmax(0,5fr); } }
.tool-app label{ display:grid; gap:6px; font:500 11px/1.3 var(--f-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--mute); }
.tool-app label.inline{ display:inline-flex; align-items:center; gap:8px; text-transform:none; letter-spacing:0; font:400 14px var(--f-body); color:var(--ink-2); }
.tool-app input:not([type=checkbox]), .tool-app textarea, .tool-app select{ width:100%; font:400 15px/1.45 var(--f-body); color:var(--ink); background:var(--paper); border:1px solid var(--line); padding:9px 10px; border-radius:2px; text-transform:none; letter-spacing:0; }
.tool-app textarea{ font:400 13.5px/1.55 var(--f-mono); resize:vertical; }
.tool-app input:focus, .tool-app textarea:focus{ outline:none; border-color:var(--ink); box-shadow:0 0 0 3px var(--amber); }
.fields{ display:grid; gap:14px; }
.grid2{ grid-template-columns:1fr; }
@media (min-width:700px){ .grid2{ grid-template-columns:1fr 1fr; } .grid2 .span2{ grid-column:1 / -1; } }
.meter{ font:500 11px/1 var(--f-mono); padding:3px 5px; margin-left:6px; border:1px solid var(--line); text-transform:none; letter-spacing:0; }
.meter.ok{ color:var(--teal); border-color:var(--teal); } .meter.warn{ color:var(--amber-ink); border-color:var(--amber-ink); } .meter.bad{ color:var(--rust); border-color:var(--rust); }
.seg{ display:inline-flex; border:1px solid var(--ink); width:max-content; }
.seg button{ border:0; background:var(--paper); padding:8px 12px; font:500 12.5px/1 var(--f-mono); }
.seg button[aria-pressed="true"]{ background:var(--ink); color:var(--paper); }
.serp-out{ background:#fff; border:1px solid var(--line); padding:16px 18px; font-family:Arial, sans-serif; max-width:652px; }
.serp-out.mobile{ max-width:420px; }
.serp-out .serp-u{ font-size:14px; color:#202124; margin-bottom:4px; }
.serp-out .serp-t{ font-size:20px; line-height:1.3; color:#1a0dab; }
.serp-out .serp-d{ font-size:14px; line-height:1.58; color:#4d5156; margin-top:4px; }
.verdict-out{ border:1px solid var(--ink); background:var(--paper); padding:16px; margin-top:4px; }
.verdict-out .v{ font:600 28px/1 var(--f-display); letter-spacing:-.03em; }
.verdict-out .v.ok{ color:var(--teal); } .verdict-out .v.no{ color:var(--rust); }
.verdict-out p{ margin:8px 0 0; font:400 13px/1.5 var(--f-mono); color:var(--ink-2); }
.problems{ list-style:none; margin:10px 0 0; padding:0; font:400 12.5px/1.5 var(--f-mono); color:var(--amber-ink); }
.problems li{ padding:4px 0; }
.hl{ width:100%; border-collapse:collapse; }
.hl th{ font:500 11px/1.3 var(--f-mono); text-transform:uppercase; letter-spacing:.06em; color:var(--mute); text-align:left; padding:0 6px 6px 0; }
.hl td{ padding:0 6px 8px 0; }
.hl td:nth-child(1), .hl td:nth-child(2){ width:110px; }
.hl td:last-child{ width:36px; }
.hl button{ border:1px solid var(--line); background:var(--paper); width:34px; height:38px; }
@media (max-width:640px){ .hl thead{ display:none; } .hl tr{ display:grid; grid-template-columns:1fr 1fr 36px; gap:6px; margin-bottom:12px; } .hl td{ width:auto!important; padding:0; } .hl td:nth-child(3){ grid-column:1 / span 2; grid-row:2; } }
.row-acts{ display:flex; flex-wrap:wrap; gap:16px; align-items:center; }
.issues{ font:400 13px/1.5 var(--f-mono); color:var(--rust); }
.issues:empty{ display:none; }
.tool-app .btn.solid{ width:max-content; }
@media (max-width:640px){
  .ptable{ min-width:0!important; }
  .ptable thead{ display:none; }
  .ptable tr{ display:grid; grid-template-columns:1fr auto auto; gap:4px 14px; padding:12px 14px; border-bottom:1px solid var(--line-2); }
  .ptable th, .ptable td{ padding:0; border:0; }
  .ptable td:nth-child(3)::after{ content:" yearly"; font-weight:400; color:var(--mute); }
  .ptable td[data-none]{ display:none; }
  .ptable td:last-child{ grid-column:1 / -1; font-size:12.5px; }
}

.panel > header h2.label{ margin:0; font:500 11px/1.3 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--mute); }
.verdict h2.label{ text-transform:none; letter-spacing:.02em; font:600 12px/1.3 var(--f-mono); }
.chart-fig{ margin:20px 0 26px; border:1px solid var(--ink); background:var(--panel); }
.chart-fig svg{ display:block; width:100%; height:auto; }

/* hero instrument: the reading is taken when the page opens */
h1.big em .ruler{ position:absolute; left:.02em; right:.04em; bottom:.04em; height:.11em; pointer-events:none;
  background-image:repeating-linear-gradient(to right, rgba(23,25,27,.6) 0 2px, transparent 2px .5em), repeating-linear-gradient(to right, rgba(23,25,27,.35) 0 1px, transparent 1px .1em);
  background-size:100% 100%, 100% 55%; background-repeat:no-repeat; background-position:0 0, 0 0; }
@media (prefers-reduced-motion: no-preference){
  @keyframes onx-sweep{ from{ transform:scaleX(0) } to{ transform:scaleX(1) } }
  @keyframes onx-fade{ from{ opacity:0 } to{ opacity:1 } }
  h1.big em::after{ transform-origin:left center; animation:onx-sweep 1.1s cubic-bezier(.22,.8,.2,1) .2s both; }
  h1.big em .ruler{ transform-origin:left center; animation:onx-sweep 1.1s cubic-bezier(.22,.8,.2,1) .35s both; }
  .readout .bars li .b i{ transform-origin:left center; animation:onx-sweep .8s cubic-bezier(.22,.8,.2,1) both; animation-delay:calc(.45s + var(--i, 0) * 70ms); }
  .readout .bars li .c{ animation:onx-fade .4s ease-out both; animation-delay:calc(.75s + var(--i, 0) * 70ms); }
  /* tool page: the ratings are read on open, the demand charts when they come into view */
  @keyframes onx-rise{ from{ transform:scaleY(0) } to{ transform:scaleY(1) } }
  @keyframes onx-blink{ 0%,40%{ opacity:0 } 55%{ opacity:1 } 70%{ opacity:.25 } 100%{ opacity:1 } }
  .rt .gauge .bar i{ transform-origin:left center; animation:onx-sweep .9s cubic-bezier(.22,.8,.2,1) both; animation-delay:calc(.25s + var(--i, 0) * 140ms); }
  .rt .big{ animation:onx-fade .35s ease-out both; animation-delay:calc(.2s + var(--i, 0) * 140ms); }
  .panel .chart rect{ transform-box:fill-box; transform-origin:center bottom; animation:onx-rise .55s cubic-bezier(.22,.8,.2,1) both; animation-delay:calc(.15s + var(--i, 0) * 45ms); }
  .panel .chart rect.cap{ animation:onx-blink .9s linear both; animation-delay:calc(.35s + var(--i, 0) * 45ms); }
  .panel .chart.wait rect{ animation-play-state:paused; }
}
.readout .related{ border-bottom:1px solid var(--line-2); padding:10px 14px; display:grid; gap:6px; }
.readout .related a{ font:500 13px/1.35 var(--f-body); color:var(--ink); text-decoration-color:var(--amber-ink); }
.thead h1{ overflow-wrap:anywhere; hyphens:manual; }
@media (max-width:560px){ .thead h1{ font-size:clamp(34px, 10.5vw, 56px); } .idrow{ gap:12px; } .sym.xl{ width:64px; height:64px; font-size:28px; } }
.prose, .phead h1, .prose a{ overflow-wrap:anywhere; }
.idrow > div{ min-width:0; }
.thead h1.long{ font-size:clamp(34px, 5.4vw, 72px); }
/* sticky sidebar end + newsletter */
.post-side{ position:static!important; align-content:start; }
@media (min-width:1000px){ .post-side .stick{ position:sticky; top:16px; display:grid; gap:24px; } }
.post-side .stick{ display:grid; gap:24px; }
.toc a.on{ font-weight:600; text-decoration:underline; text-decoration-color:var(--amber); text-decoration-thickness:2px; }
.sub{ padding:14px; display:grid; gap:10px; }
.sub-t{ margin:0; font:500 15px/1.4 var(--f-display); letter-spacing:-.01em; }
.sub-f{ display:flex; gap:6px; }
.sub-f input{ flex:1; min-width:0; font:400 14px/1 var(--f-body); padding:9px 10px; border:1px solid var(--line); background:var(--paper); border-radius:2px; }
.sub-f input:focus{ outline:none; border-color:var(--ink); box-shadow:0 0 0 3px var(--amber); }
.sub-f .btn{ height:38px; }
.sub-n{ margin:0; font:400 11.5px/1.45 var(--f-mono); color:var(--mute); }
.sub-ok{ margin:0; font:600 14px/1.4 var(--f-body); color:var(--teal); }
.sub .hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.foot-sub{ margin-top:28px; max-width:520px; }
.foot-sub .sub{ padding:0; }

.vh{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.verdict .byline{ margin:14px 0 0; font:400 12px/1.4 var(--f-mono); color:var(--mute); letter-spacing:0; }
.verdict .byline a{ color:var(--ink-2); }
/* homepage: top 10 by score */
.top10{ list-style:none; margin:0; padding:0; display:grid; gap:0; border-top:2px solid var(--ink); }
@media (min-width:900px){ .top10{ grid-template-columns:1fr 1fr; column-gap:32px; } }
.top10 li{ display:grid; grid-template-columns:34px 40px minmax(0,1fr) minmax(110px,150px); gap:12px; align-items:center; padding:12px 0; border-bottom:1px solid var(--line); }
.top10 .k{ font:600 13px/1 var(--f-mono); color:var(--mute); }
.top10 li:first-child .k{ color:var(--ink); background:var(--amber); padding:4px 5px 3px; justify-self:start; }
.top10 .tn{ min-width:0; }
.top10 .tn a{ display:block; font:600 17px/1.2 var(--f-display); color:var(--ink); text-decoration:none; letter-spacing:-.01em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.top10 .tn a:hover{ text-decoration:underline; }
.top10 .tn span{ display:block; margin-top:3px; font:400 11.5px/1.3 var(--f-mono); color:var(--mute); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:520px){ .top10 li{ grid-template-columns:28px 36px minmax(0,1fr) 92px; gap:10px; } .top10 .tn a{ font-size:15.5px; white-space:normal; } }
@media (prefers-reduced-motion: no-preference){ .top10 .gauge .bar i{ transform-origin:left center; animation:onx-sweep .8s cubic-bezier(.22,.8,.2,1) both; animation-delay:calc(.3s + var(--i, 0) * 60ms); } }
.archive-link{ margin:28px 0 64px; font:400 13px/1.4 var(--f-mono); }
.archive-link a{ color:var(--mute); }
#top{ padding-bottom:16px; }