/* TagHeckler — flat monochrome, black on white. Plain, no gradients, no glow. */
* { margin:0; padding:0; box-sizing:border-box; }

html { scroll-behavior:smooth; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color:#000;
  background:#fff;
  line-height:1.55;
}

a { color:#000; text-decoration:underline; text-underline-offset:3px; }
a:hover { text-decoration:none; }

.container { max-width:960px; margin:0 auto; padding:0 20px; }

/* ---------- Header ---------- */
.site-header {
  border-bottom:3px solid #000;
  padding:18px 0;
}
.header-inner { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; }
.logo { font-size:1.6rem; font-weight:900; letter-spacing:1px; text-transform:uppercase; text-decoration:none; }
.logo:hover { text-decoration:none; }
.tagline { font-size:0.85rem; opacity:.7; margin-top:2px; }

/* ---------- Stats strip (home) ---------- */
.stats-strip { border-bottom:3px solid #000; padding:28px 0; }
.stats-row { display:flex; gap:28px; flex-wrap:wrap; margin-top:10px; }
.stat { display:flex; flex-direction:column; }
.stat-n { font-size:2.4rem; font-weight:900; letter-spacing:1px; }
.stat-l { font-size:.8rem; opacity:.6; text-transform:uppercase; letter-spacing:.5px; }
.stats-note { margin-top:14px; font-size:.85rem; opacity:.6; }

.nav { display:flex; gap:18px; flex-wrap:wrap; font-weight:700; }
.nav a { text-decoration:none; border-bottom:2px solid transparent; padding:2px 0; }
.nav a:hover { border-bottom-color:#000; }

/* ---------- Hero ---------- */
.hero { padding:64px 0 40px; text-align:center; }
.hero h1 { font-size:2.8rem; font-weight:900; line-height:1.08; text-transform:uppercase; }
.hero .sub { font-size:1.15rem; margin:18px auto 0; max-width:680px; }
.hero .cta { margin-top:28px; }

/* ---------- Buttons ---------- */
.btn {
  display:inline-block; padding:14px 30px; background:#000; color:#fff;
  font-weight:800; text-decoration:none; border:2px solid #000;
  text-transform:uppercase; letter-spacing:1px;
}
.btn:hover { background:#fff; color:#000; text-decoration:none; }
.btn-outline { background:#fff; color:#000; }

/* ---------- Section ---------- */
.section { padding:48px 0; border-top:3px solid #000; }
.section .kicker { font-size:0.75rem; letter-spacing:2px; text-transform:uppercase; opacity:.6; margin-bottom:8px; }
.section h2 { font-size:2rem; font-weight:900; text-transform:uppercase; margin-bottom:18px; }
.section p { max-width:680px; margin-bottom:12px; }

/* ---------- 3-card row ---------- */
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px; margin-top:24px; }
.card { border:2px solid #000; padding:22px; }
.card h3 { font-size:1.15rem; text-transform:uppercase; margin-bottom:10px; }
.card p { font-size:0.95rem; opacity:.85; margin:0; }

/* ---------- Steps ---------- */
.steps { counter-reset:step; margin-top:24px; }
.step { display:flex; gap:16px; padding:16px 0; border-bottom:1px solid #000; }
.step:last-child { border-bottom:none; }
.step .num { font-weight:900; font-size:1.4rem; min-width:34px; }
.step .txt { flex:1; }
.step .txt strong { display:block; text-transform:uppercase; letter-spacing:1px; }

/* ---------- Shop ---------- */
.product-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px; margin-top:24px; }
.product { border:2px solid #000; padding:20px; display:flex; flex-direction:column; }
.product .pname { font-size:1.2rem; font-weight:900; text-transform:uppercase; margin-bottom:6px; }
.product .pdesc { font-size:0.9rem; opacity:.85; flex:1; }
.product .price { font-size:1.1rem; font-weight:800; margin:12px 0; }
.product .buy { text-align:center; }
.link-sm { font-size:0.8rem; opacity:.75; display:inline-block; }

/* ---------- Tracker gallery ---------- */
.gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:16px; margin-top:24px; }
.gallery-item { border:2px solid #000; padding:12px; }
.gallery-item img { width:100%; display:block; margin-bottom:8px; border:1px solid #000; }
.gallery-item .cap { font-size:0.85rem; opacity:.8; }
.gallery-empty { border:2px dashed #000; padding:34px; margin-top:24px; text-align:center; opacity:.75; }

/* upload */
.drop { border:3px dashed #000; padding:40px; text-align:center; margin-top:24px; cursor:pointer; }
.drop:hover { background:#f4f4f4; }
.drop input[type=file] { display:none; }

/* before/after pair */
.ba-pair { display:flex; flex-direction:column; gap:8px; }
.ba-imgs { display:flex; gap:10px; }
.ba-cell { flex:1; border:2px solid #000; }
.ba-lbl { padding:6px 8px; font-weight:800; font-size:0.75rem; letter-spacing:1px; border-bottom:2px solid #000; background:#f4f4f4; }
.ba-cell img { display:block; width:100%; height:auto; }
.ba-na { padding:40px 0; text-align:center; opacity:.4; font-size:1.4rem; }

/* ---------- Footer ---------- */
.site-footer { border-top:3px solid #000; padding:26px 0; margin-top:40px; font-size:0.85rem; }
.footer-inner { display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }
.footer-inner a { text-decoration:none; }

.legal-note { margin-top:18px; padding:14px; border:1px solid #000; font-size:0.8rem; opacity:.8; }