/* ============================================================================
   Bytesweep — design system

   Principle: neutral chrome, colour only where it carries meaning. The pastels
   belong to the data (treemap blocks, category swatches), never to the page
   furniture. Structure comes from hairline borders and spacing rather than
   large shadows and gradients, which is what separates a tool people pay for
   from a landing-page template.

   4px base scale. Radii 6/10/14. One accent, used sparingly.
   Legacy aliases (--bg2, --radius, --p1..--p6) are kept at the end so older
   markup and the generated pages keep rendering.
   ============================================================================ */

:root {
  /* neutrals */
  --bg:        #ffffff;
  --subtle:    #f7f8fa;   /* alternating sections */
  --surface:   #ffffff;   /* cards */
  --line:      #e4e7ee;   /* hairlines */
  --line-2:    #d3d8e3;   /* stronger dividers */
  --ink:       #0f1219;   /* headings */
  --text:      #343b4a;   /* body */
  --muted:     #697084;   /* secondary */

  /* one accent */
  --accent:     #2454e6;
  --accent-ink: #ffffff;
  --accent-weak:#eef2fe;

  /* semantic */
  --ok: #15803d; --warn: #a16207; --danger: #b42318;

  /* data palette — charts, swatches, category chips only */
  --d1:#bfdcff; --d2:#ffd0e0; --d3:#c8f2d4; --d4:#ffe3b3; --d5:#dcd0ff; --d6:#b8ecf0;

  --r-sm: 6px; --r: 10px; --r-lg: 14px;
  --shadow: 0 1px 2px rgba(16,24,40,.04);
  --shadow-lg: 0 4px 6px -2px rgba(16,24,40,.03), 0 12px 24px -4px rgba(16,24,40,.08);

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, Roboto, Ubuntu, "Helvetica Neue", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, "Cascadia Mono", Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#0b0d12; --subtle:#0f121a; --surface:#12151d; --line:#20252f; --line-2:#2b323f;
    --ink:#f3f5f9; --text:#c6ccd9; --muted:#868ea0;
    --accent:#7093ff; --accent-ink:#0b0d12; --accent-weak:#151d33;
    --ok:#4ade80; --warn:#fbbf24; --danger:#f87171;
    --d1:#2f5586; --d2:#7d4460; --d3:#2f6b4c; --d4:#8a6b2e; --d5:#5b4d94; --d6:#2c6b73;
    --shadow: 0 1px 2px rgba(0,0,0,.4);
    --shadow-lg: 0 12px 28px -6px rgba(0,0,0,.5);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 15.5px/1.6 var(--font); -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* ---- type: hierarchy from weight and colour, not size ---- */
h1, h2, h3, h4 { color: var(--ink); margin: 0 0 .4em; letter-spacing: -.021em; line-height: 1.15; font-weight: 640; }
h1 { font-size: clamp(32px, 4.1vw, 48px); line-height: 1.08; letter-spacing: -.028em; }
h2 { font-size: clamp(23px, 2.5vw, 31px); letter-spacing: -.024em; }
h3 { font-size: 16.5px; font-weight: 620; }
p { margin: 0 0 1em; }
.lead { font-size: clamp(16.5px, 1.5vw, 18.5px); color: var(--muted); max-width: 62ch; line-height: 1.55; }
.fine { font-size: 13px; color: var(--muted); }
.muted { color: var(--muted); }
.mono { font-family: var(--mono); font-size: .92em; }
strong, b { font-weight: 620; color: var(--ink); }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 28px; }
section { padding: 84px 0; }
section.alt { background: var(--subtle); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.center { text-align: center; }
.center .lead { margin-left: auto; margin-right: auto; }

.eyebrow { display: block; font-size: 11.5px; font-weight: 660; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }

/* ---- icons ---- */
.ic { width: 20px; height: 20px; flex: none; }
.icon-box { width: 38px; height: 38px; border-radius: var(--r-sm); display: grid; place-items: center; border: 1px solid var(--line); background: var(--bg); color: var(--accent); margin-bottom: 14px; }

/* ---- buttons ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 16px; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); font: inherit; font-size: 14.5px; font-weight: 580; cursor: pointer; white-space: nowrap; transition: background .12s, border-color .12s; }
.btn:hover { background: var(--subtle); border-color: var(--muted); text-decoration: none; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.btn.primary:hover { filter: brightness(1.08); background: var(--accent); }
.btn.big { padding: 12px 22px; font-size: 15.5px; }
.btn.small { padding: 6px 12px; font-size: 13.5px; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; margin: 24px 0 16px; }

/* ---- header ---- */
.top { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--line); }
.nav { display: flex; align-items: center; justify-content: space-between; height: 60px; gap: 18px; }
.brand { display: flex; align-items: center; gap: 9px; font-weight: 650; font-size: 16.5px; color: var(--ink); letter-spacing: -.02em; }
.brand img { width: 26px; height: 26px; border-radius: 6px; }
.brand:hover { text-decoration: none; }
#nav-menu { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
#nav-menu a { display: block; padding: 7px 11px; border-radius: var(--r-sm); color: var(--text); font-size: 14.5px; font-weight: 520; }
#nav-menu a:hover { background: var(--subtle); color: var(--ink); text-decoration: none; }
#nav-menu a.btn { margin-left: 8px; }
#nav-toggle { display: none; background: none; border: 1px solid var(--line-2); border-radius: var(--r-sm); font-size: 17px; padding: 4px 10px; color: var(--ink); cursor: pointer; }
.test-badge { font-size: 10px; background: var(--warn); color: #fff; padding: 2px 7px; border-radius: 4px; font-weight: 680; letter-spacing: .05em; }

/* ---- hero ---- */
.hero { padding: 76px 0 64px; border-bottom: 1px solid var(--line); }
.hero-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); gap: 56px; align-items: center; }
h1 .hl { color: var(--accent); background: none; padding: 0; }
.platforms { color: var(--muted); font-size: 13.5px; margin: 0; }
.platforms b { color: var(--text); font-weight: 600; }

.window { border-radius: var(--r); background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--shadow-lg); overflow: hidden; }
.window .bar { height: 30px; display: flex; align-items: center; gap: 6px; padding: 0 12px; border-bottom: 1px solid var(--line); background: var(--subtle); }
.window .bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); }
.window img { width: 100%; height: auto; aspect-ratio: 1380/851; object-fit: cover; object-position: top left; cursor: zoom-in; }
.hero-shot { transform: none; }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 56px; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--surface); }
.stat { padding: 20px 22px; border-right: 1px solid var(--line); }
.stat:last-child { border-right: 0; }
.stat b { display: block; font-size: 24px; font-weight: 640; color: var(--ink); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stat span { color: var(--muted); font-size: 13px; line-height: 1.45; display: block; margin-top: 3px; }

/* ---- cards and grids ---- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 22px; }
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 36px; }
.feature { padding: 22px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.feature h3 { margin-bottom: 5px; }
.feature p { color: var(--muted); font-size: 14.5px; margin: 0; }
.feature.hi { background: var(--subtle); }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 36px; }
.step { padding: 24px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.step .n { width: 26px; height: 26px; border-radius: 5px; display: grid; place-items: center; font-size: 12.5px; font-weight: 660; color: var(--accent); background: var(--accent-weak); border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); margin-bottom: 14px; }
.step p { color: var(--muted); margin: 0; font-size: 14.5px; }

/* ---- alternating feature rows ---- */
.view { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: 48px; align-items: center; padding: 36px 0; border-top: 1px solid var(--line); }
.view:first-of-type { border-top: 0; }
.view:nth-child(even) .view-text { order: 2; }
.view .num { font-family: var(--mono); font-size: 12px; color: var(--muted); margin-bottom: 8px; letter-spacing: .04em; }
.view h3 { font-size: 21px; letter-spacing: -.022em; }
.view p { color: var(--muted); margin: 0; }

/* ---- per-OS columns ---- */
.os-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 36px; }
.os { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); overflow: hidden; }
.os header { padding: 14px 18px; font-weight: 620; font-size: 15.5px; display: flex; align-items: center; gap: 9px; color: var(--ink); background: var(--subtle); border-bottom: 1px solid var(--line); }
.os header .ic { color: var(--muted); }
.os ul { list-style: none; margin: 0; padding: 6px 18px 18px; }
.os li { padding: 11px 0; border-top: 1px solid var(--line); font-size: 14.5px; }
.os li:first-child { border-top: 0; }
.os li b { display: block; font-weight: 600; margin-bottom: 2px; }
.os li span { color: var(--muted); font-size: 13.5px; }

/* ---- pricing ---- */
.price-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; margin-top: 36px; }
.price-card { padding: 28px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line-2); }
.price { font-size: 46px; font-weight: 650; letter-spacing: -.035em; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.price small { font-size: 14.5px; color: var(--muted); font-weight: 480; letter-spacing: 0; margin-left: 6px; }
.price-card ul { list-style: none; padding: 0; margin: 20px 0; }
.price-card li { padding: 8px 0; font-size: 14.5px; display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; color: var(--text); }
.price-card li::before { content: ""; width: 15px; height: 15px; margin-top: 3px; border-radius: 50%; background: var(--accent-weak); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.buy-form { display: flex; gap: 8px; margin: 18px 0 10px; }
.buy-form input { flex: 1; min-width: 0; padding: 9px 12px; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: var(--bg); font: inherit; font-size: 14.5px; color: var(--ink); }
.buy-form input::placeholder { color: var(--muted); }
.buy-form input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-weak); }
.pay-logos { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 14px; }
.pay-logos span { font-size: 11.5px; padding: 3px 8px; border-radius: 4px; background: var(--subtle); border: 1px solid var(--line); color: var(--muted); }
.howbuy { padding: 26px; border-radius: var(--r-lg); background: var(--subtle); border: 1px solid var(--line); }
.howbuy ol { margin: 14px 0 0; padding: 0; list-style: none; counter-reset: s; }
.howbuy li { counter-increment: s; display: grid; grid-template-columns: 26px 1fr; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); align-items: start; }
.howbuy li:first-child { border-top: 0; }
.howbuy li::before { content: counter(s); width: 22px; height: 22px; border-radius: 5px; display: grid; place-items: center; font-size: 12px; font-weight: 640; background: var(--bg); border: 1px solid var(--line-2); color: var(--muted); }
.howbuy li b { display: block; font-size: 14.5px; } .howbuy li span { color: var(--muted); font-size: 13.5px; }
.regional:not([hidden]) { display: inline-flex; align-items: center; gap: 8px; background: var(--accent-weak); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); padding: 5px 11px; border-radius: 5px; font-size: 13px; font-weight: 560; margin: 10px 0 0; }
.regional[hidden] { display: none !important; }
.regional s { opacity: .6; }

/* ---- downloads ---- */
.dl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 32px; }
.dl { padding: 24px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); text-align: left; }
.dl .os-ic { color: var(--muted); margin-bottom: 12px; }
.dl .os-ic .ic { width: 24px; height: 24px; }
.dl b { display: block; font-size: 16px; color: var(--ink); font-weight: 620; }
.dl span { color: var(--muted); font-size: 13.5px; display: block; margin: 3px 0 16px; }
.dl.is-lead { border-color: var(--accent); }
.dl.is-lead::before { content: "Recommended for you"; display: block; font-size: 11px; font-weight: 660; letter-spacing: .07em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }

/* ---- tables ---- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll table { min-width: 560px; }
@media (max-width: 700px) { .table-scroll::after { content: "Scroll to compare →"; display: block; font-size: 12.5px; color: var(--muted); padding-top: 10px; } }

/* ---- FAQ ---- */
.faq { max-width: 780px; margin: 28px auto 0; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; font-weight: 580; padding: 15px 0; list-style: none; display: flex; justify-content: space-between; gap: 20px; font-size: 15.5px; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--muted); font-weight: 400; font-size: 18px; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq p { color: var(--muted); padding-bottom: 16px; margin: 0; font-size: 14.5px; max-width: 70ch; }

/* ---- trust / security ---- */
.trust { display: grid; grid-template-columns: repeat(2, 1fr); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; margin-top: 32px; background: var(--surface); }
.trust > div { padding: 22px 24px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.trust > div:nth-child(2n) { border-right: 0; }
.trust > div:nth-last-child(-n+2) { border-bottom: 0; }
.trust h3 { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; }
.trust h3 .ic { color: var(--muted); }
.trust p { color: var(--muted); font-size: 14px; margin: 0; }

/* ---- footer ---- */
footer { border-top: 1px solid var(--line); padding: 32px 0; color: var(--muted); font-size: 13.5px; background: var(--subtle); }
footer .wrap { display: flex; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; align-items: center; }
footer .links { display: flex; flex-wrap: wrap; gap: 6px 18px; min-width: 0; }
footer a { color: var(--muted); }
footer a:hover { color: var(--ink); }

/* ---- lightbox ---- */
.lightbox { position: fixed; inset: 0; background: rgba(8,10,15,.92); display: none; align-items: center; justify-content: center; z-index: 100; padding: 32px; cursor: zoom-out; }
.lightbox.open { display: flex; }
.lightbox figure { margin: 0; max-width: min(1500px, 96vw); max-height: 92vh; display: flex; flex-direction: column; align-items: center; gap: 12px; cursor: default; }
.lightbox img { max-width: 100%; max-height: 84vh; width: auto; border-radius: var(--r-sm); box-shadow: 0 24px 60px rgba(0,0,0,.5); object-fit: contain; aspect-ratio: auto; }
.lightbox figcaption { color: #aeb6c6; font-size: 13.5px; }
.lb-close { position: absolute; top: 20px; right: 24px; background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.16); border-radius: var(--r-sm); width: 36px; height: 36px; font-size: 16px; cursor: pointer; }
.lb-close:hover { background: rgba(255,255,255,.2); }

.shot-placeholder { aspect-ratio: 1380/851; display: grid; place-items: center; color: var(--muted); font-size: 13.5px; background: var(--subtle); }

@media (max-width: 960px) {
  section { padding: 60px 0; }
  .hero { padding: 44px 0 48px; }
  .hero-grid, .view, .price-wrap, .trust { grid-template-columns: 1fr; }
  .view { gap: 28px; } .view:nth-child(even) .view-text { order: 0; }
  .stats, .steps, .features, .os-grid, .dl-grid { grid-template-columns: 1fr 1fr; }
  .stat { border-bottom: 1px solid var(--line); } .stat:nth-child(2n) { border-right: 0; }
  .trust > div { border-right: 0; }
  #nav-toggle { display: block; }
  #nav-menu { display: none; position: absolute; left: 0; right: 0; top: 60px; flex-direction: column; align-items: stretch; background: var(--bg); border-bottom: 1px solid var(--line); padding: 8px 20px 16px; gap: 1px; }
  #nav-menu.open { display: flex; }
  #nav-menu a.btn { margin: 8px 0 0; }
}
@media (max-width: 560px) {
  .stats, .steps, .features, .os-grid, .dl-grid { grid-template-columns: 1fr; }
  .stat { border-right: 0; }
  .buy-form { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }

/* ---- legacy aliases: keep older markup and generated pages rendering ---- */
:root { --bg2: var(--subtle); --radius: var(--r); --p1: var(--d1); --p2: var(--d2); --p3: var(--d3); --p4: var(--d4); --p5: var(--d5); --p6: var(--d6); --accent2: var(--accent); }
#systemdata .feature.hi { grid-column: 1 / -1; }

/* Risk levels: the four answers, on the homepage. Weight carries the hierarchy, not colour —
   a wall of red and green would flatten exactly the distinction the list is making. */
.risk-levels { list-style: none; margin: 18px 0 14px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.risk-levels li { padding-left: 16px; border-left: 2px solid var(--border); line-height: 1.6; }
.risk-levels li:nth-child(1) { border-left-color: var(--danger, #b42318); }
.risk-levels li:nth-child(2) { border-left-color: var(--danger, #b42318); }
.risk-levels li:nth-child(3) { border-left-color: var(--warn, #a16207); }
.risk-levels li:nth-child(4) { border-left-color: var(--ok, #15803d); }
.risk-levels b { display: block; }
.risk-levels code { font-size: .92em; padding: 1px 5px; border-radius: 4px; background: var(--panel2, #f1f3f7); }

/* The three answers, directly under the hero. Colour lives on the rule so the cards keep equal
   visual weight — the point is that all three exist, not that one shouts loudest. */
.split { padding: 48px 0 8px; }
.split-intro { text-align: center; color: var(--muted); max-width: 640px; margin: 0 auto 26px; }
.split-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.split-card { padding: 20px 22px; border: 1px solid var(--border); border-radius: 14px;
  background: var(--panel); border-top: 3px solid var(--border); }
.split-h { font-weight: 700; font-size: 15px; margin-bottom: 7px; }
.split-card p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--muted); }
.split-card.is-safe   { border-top-color: #15803d; } .split-card.is-safe   .split-h { color: #15803d; }
.split-card.is-review { border-top-color: #a16207; } .split-card.is-review .split-h { color: #a16207; }
.split-card.is-keep   { border-top-color: #b42318; } .split-card.is-keep   .split-h { color: #b42318; }
.split-note { text-align: center; color: var(--muted); font-size: 12.5px; margin: 22px auto 0; max-width: 640px; }
@media (max-width: 860px) { .split-grid { grid-template-columns: 1fr; } }