/* nzbfast.com - THEME: Instrument / mono.
   Warm near-black, single amber signal accent (no gradient), monospace
   labels + data, hairline structure instead of soft cards, numbers as heroes.
   Drop-in for site.css: identical class contract, all 64 pages restyle. */
:root{
  --bg:#0b0a09;--card:#141210;--card2:#1c1813;--fg:#ece6da;--dim:#948b7b;
  --line:rgba(190,170,140,.16);--acc:#ff9e2c;--acc2:#ff9e2c;
  --ok:#57c98a;--warn:#f5b445;--bad:#ec5a5a;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --max:1120px;
}
@media (prefers-color-scheme:light){:root{
  --bg:#efece3;--card:#fbf9f4;--card2:#f3efe5;--fg:#1a1610;--dim:#6a6152;
  --line:rgba(60,45,20,.18);--acc:#b96200;--acc2:#b96200;
}}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font:16px/1.62 -apple-system,BlinkMacSystemFont,system-ui,"Segoe UI",sans-serif;
  background:var(--bg);color:var(--fg);-webkit-font-smoothing:antialiased;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:0 0}
a{color:var(--acc);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}

/* header - hairline, mono nav */
header{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--bg) 90%,transparent);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
header .wrap{display:flex;align-items:center;gap:20px;height:56px}
.logo{display:flex;align-items:center;gap:9px;font-weight:800;font-size:18px;color:var(--fg);letter-spacing:-.01em}
.logo:hover{text-decoration:none;opacity:.72}
.logo .bolt{color:var(--acc)}
nav{display:flex;gap:2px;margin-inline-start:auto;align-items:center}
nav a{color:var(--dim);font:600 12px/1 var(--mono);letter-spacing:.04em;text-transform:uppercase;padding:9px 12px;border-radius:0}
nav a:hover{color:var(--fg);text-decoration:none}
nav a.on{color:var(--acc)}
nav a.cta{border:1px solid var(--acc);color:var(--acc);font-weight:700}
nav a.cta:hover{background:var(--acc);color:var(--bg)}
.langsw{font-family:var(--mono)!important}

/* hero - left aligned, data strip. (No CSS-injected kicker: it would land on
   every .hero page and force an English string onto localized homepages.) */
.hero{padding:64px 0 34px;text-align:start;position:relative}
.hero h1{font-size:clamp(34px,6vw,60px);line-height:1.02;letter-spacing:-.03em;margin:0 0 20px;font-weight:850;max-width:22ch}
.hero h1 em{font-style:normal;color:var(--acc)}
.hero p.sub{font-size:18px;line-height:1.6;color:var(--dim);max-width:640px;margin:0 0 30px}
.hero p.sub b{color:var(--fg);font-weight:650}
/* chips -> a connected instrument readout strip */
.chips{display:flex;flex-wrap:wrap;gap:0;margin:0 0 30px;border:1px solid var(--line);width:fit-content;max-width:100%}
.chip{font:12.5px/1 var(--mono);border:0;border-inline-end:1px solid var(--line);background:transparent;
  border-radius:0;padding:12px 16px;color:var(--dim);display:flex;align-items:center;gap:7px}
.chip:last-child{border-inline-end:0}
.chip b{color:var(--acc);font-weight:700;font-size:14px}
.btnrow{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--acc);color:var(--bg);font:700 14px/1 var(--mono);
  letter-spacing:.02em;text-transform:uppercase;padding:14px 24px;border-radius:0;border:1px solid var(--acc);
  transition:transform .1s,box-shadow .15s}
.btn:hover{text-decoration:none;transform:translateY(-1px);box-shadow:0 6px 0 -2px color-mix(in srgb,var(--acc) 40%,transparent)}
.btn.ghost{background:transparent;color:var(--fg);border:1px solid var(--line)}
.btn.ghost:hover{border-color:var(--acc);color:var(--acc);box-shadow:none}
.note{font:12.5px/1.5 var(--mono);color:var(--dim);margin-top:14px}

/* screenshot frames - hard edge + corner ticks */
.shot{border:1px solid var(--line);border-radius:0;overflow:hidden;background:#0b0a09;position:relative}
.shot img{display:block;width:100%;height:auto}
.heroShot{margin:46px 0 0;max-width:100%}

/* sections */
section{padding:60px 0;border-top:1px solid var(--line)}
section.alt{background:var(--card)}
h2{font-size:clamp(24px,3.6vw,36px);letter-spacing:-.025em;margin:0 0 10px;font-weight:820}
p.lead{color:var(--dim);font-size:17px;max-width:720px;margin:0 0 34px}
.kicker{font:700 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--acc);margin:0 0 12px}
.kicker::before{content:"// "}

/* cards - hairline, hard corners, numbered */
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:0;border:1px solid var(--line)}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:18px}
.grid3 .card{border:0;border-inline-end:1px solid var(--line);border-top:1px solid var(--line);border-radius:0;background:transparent}
.grid3 .card:nth-child(-n+3){border-top:0}
.card{background:var(--card);border:1px solid var(--line);border-radius:0;padding:24px}
.card h3{margin:0 0 10px;font-size:16px;font-weight:750;letter-spacing:-.01em}
.card p{margin:0;color:var(--dim);font-size:14.5px;line-height:1.6}
.card .ic{font-size:15px;margin:0 0 14px;display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border:1px solid var(--line);filter:grayscale(.3)}

/* feature lists - mono markers */
ul.feat{list-style:none;padding:0;margin:0}
ul.feat li{padding:9px 0;padding-inline-start:26px;position:relative;font-size:15px;line-height:1.6;border-top:1px solid var(--line)}
ul.feat li:first-child{border-top:0}
ul.feat li::before{content:"\203A";position:absolute;inset-inline-start:2px;top:9px;color:var(--acc);font-family:var(--mono);font-weight:700}
ul.feat li b{font-weight:700}
ul.feat li .d{color:var(--dim)}
ul.plain{list-style:none;padding:0;margin:0}
ul.plain li{padding:6px 0;padding-inline-start:22px;position:relative;font-size:14.5px;color:var(--dim)}
ul.plain li::before{content:"\2013";position:absolute;inset-inline-start:4px;color:var(--acc);font-family:var(--mono)}
ul.plain li b{color:var(--fg);font-weight:650}

/* tables - squared, mono numerics */
.tblwrap{overflow-x:auto;border:1px solid var(--line);border-radius:0;background:var(--card)}
table{width:100%;border-collapse:collapse;font-size:14px;min-width:640px}
td,th{padding:11px 16px;text-align:start;border-top:1px solid var(--line);vertical-align:top}
thead th{border-top:none;color:var(--dim);font:600 11px/1 var(--mono);text-transform:uppercase;letter-spacing:.06em;background:var(--card2)}
td.win{color:var(--ok);font-weight:700;white-space:nowrap;font-family:var(--mono)}
td.lose{color:var(--dim)}
td.bad{color:var(--bad)}
td:first-child{color:var(--dim)}
tbody tr:hover{background:color-mix(in srgb,var(--card2) 70%,transparent)}
.num{font-variant-numeric:tabular-nums;font-family:var(--mono)}
.yes{color:var(--ok);font-weight:700}
.no{color:var(--dim)}
.half{color:var(--warn);font-weight:600}

/* bench bars - squared amber */
.bars{display:grid;gap:8px;margin:22px 0 6px}
.bar{display:grid;grid-template-columns:140px 1fr 130px;gap:14px;align-items:center;font:14px/1 var(--mono)}
.bar>span:first-child{color:var(--dim)}
.bar .trk{height:24px;border-radius:0;background:var(--card2);overflow:hidden;border:1px solid var(--line)}
.bar .trk i{display:block;height:100%;border-radius:0;background:var(--dim)}
.bar.me .trk i{background:var(--acc)}
.bar.me{font-weight:700}
.bar.me>span:first-child{color:var(--acc)}
.bar .t{text-align:end;font-variant-numeric:tabular-nums;color:var(--dim)}
.bar.me .t{color:var(--fg)}
.bar .dnf i{background:repeating-linear-gradient(45deg,var(--bad),var(--bad) 6px,transparent 6px,transparent 12px);opacity:.55}

/* pipeline diagram */
.pipe{background:var(--card);border:1px solid var(--line);border-radius:0;padding:26px;overflow-x:auto}
.pipe pre{margin:0;font:13px/1.55 var(--mono);color:var(--dim)}
.pipe pre b{color:var(--acc);font-weight:600}
.pipe pre em{color:var(--ok);font-style:normal}

/* screenshot strip */
.strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px;align-items:start}
.strip figure{margin:0}
.strip figcaption{font:12.5px/1.5 var(--mono);color:var(--dim);margin-top:10px;text-align:start}

/* stacked screenshots - dense shots (settings tables, the queue) are unreadable
   at a third of the column, so they take the full width one under the other.
   A phone portrait next to a landscape shot never balances either: .phone gives
   it its own narrow, centred row. */
.shots{display:grid;gap:30px}
.shots figure{margin:0}
.shots figcaption{font:12.5px/1.5 var(--mono);color:var(--dim);margin-top:10px;text-align:start}
.shots figure.phone{max-width:300px;margin-inline:auto}
.shots figure.phone figcaption{text-align:center}

/* download cards */
.dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.dl .card{display:flex;flex-direction:column;gap:8px}
.dl h3{display:flex;align-items:center;gap:10px}
.dl .meta{font:12.5px/1.5 var(--mono);color:var(--dim)}
.dl .get{margin-top:auto;padding-top:14px}
.tag{display:inline-block;font:700 10.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;
  border-radius:0;padding:4px 8px;vertical-align:2px;border:1px solid currentColor}
.tag.now{color:var(--ok)}
.tag.soon{color:var(--warn)}
.tag.plan{color:var(--dim)}
code,kbd{font:13px var(--mono);background:var(--card2);border:1px solid var(--line);border-radius:0;padding:2px 7px}
pre.cmd{background:var(--card2);border:1px solid var(--line);border-radius:0;padding:14px 16px;overflow-x:auto;font:13.5px/1.6 var(--mono)}

/* callouts */
.callout{border:1px solid var(--line);border-inline-start:3px solid var(--acc);background:var(--card);
  border-radius:0;padding:16px 20px;font-size:14.5px;color:var(--dim);margin:20px 0}
.callout b{color:var(--fg)}
.callout.warn{border-inline-start-color:var(--warn)}

/* footer */
footer{border-top:1px solid var(--line);padding:38px 0 50px;margin-top:0;font:13px/1.6 var(--mono);color:var(--dim)}
footer .cols{display:flex;flex-wrap:wrap;gap:40px;justify-content:space-between}
footer a{color:var(--dim)}
footer a:hover{color:var(--acc)}
footer .fine{margin-top:22px;font-size:11.5px;max-width:760px;line-height:1.7}

@media (max-width:640px){
  .hero{padding:40px 0 20px}
  .chips{flex-direction:column;width:100%}
  .chip{border-inline-end:0;border-bottom:1px solid var(--line);justify-content:space-between}
  .chip:last-child{border-bottom:0}
  .bar{grid-template-columns:92px 1fr 96px;font-size:12px}
  nav a{padding:8px 8px;font-size:11px}
  /* the nav and the language picker, not the tables, are what used to push the
     page wider than the viewport. Let them wrap instead. */
  header .wrap{flex-wrap:wrap;height:auto;gap:6px 12px;padding-block:9px}
  nav{flex-wrap:wrap;margin-inline-start:0;row-gap:2px}
  select.langsw{max-width:84px;margin-inline-start:0}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
[dir=rtl] code,[dir=rtl] kbd{direction:ltr;unicode-bidi:isolate}
[dir=rtl] pre,[dir=rtl] pre.cmd,[dir=rtl] .pipe pre{direction:ltr;text-align:left}

/* benchmark tables: a group-header row that splits one table by machine */
.bars.wide .bar{grid-template-columns:150px 1fr 208px}
@media (max-width:640px){.bars.wide .bar{grid-template-columns:92px 1fr 132px}}
tbody td.grp{font:700 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--acc);background:var(--card2);padding-top:15px}