/* ============================================================
   BESTBOIXP — one stylesheet for the whole site (~8KB, cached)
   industrial minimal · system fonts only · zero webfont loads
   accent (#ff4d00) is spent ONLY on money moments
   ============================================================ */

:root{
  --bg:#ffffff;
  --fg:#0a0a0a;
  --mut:#757575;
  --line:#e7e7e7;
  --acc:#ff4d00;
  --acc-fg:#ffffff;
  --maxw:620px;
  --sans:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}
@media (prefers-color-scheme:dark){
  :root{ --bg:#0a0a0a; --fg:#f2f2f2; --mut:#9a9a9a; --line:#222222; }
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }
html{ -webkit-text-size-adjust:100%; color-scheme:light dark }
body{
  background:var(--bg); color:var(--fg);
  font:16px/1.5 var(--sans);
  -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column;
  min-height:100vh; min-height:100svh;
}
a{ color:inherit; text-decoration:none }
img{ display:block; max-width:100% }
ul{ list-style:none }
::selection{ background:var(--acc); color:#fff }
:focus-visible{ outline:2px solid var(--acc); outline-offset:2px }

.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 20px }
main{ flex:1 }

/* ---- top bar (subpages) ---- */
.top{
  display:flex; justify-content:space-between; align-items:center;
  width:100%; max-width:var(--maxw); margin:0 auto; padding:18px 20px 4px;
}
.top .home{ font-weight:800; font-size:13px; letter-spacing:.1em }
.top .crumb{ font-family:var(--mono); font-size:12px; color:var(--mut) }

/* ---- the visor mark (nod to the SG-01s) ---- */
.visor{ width:64px; height:14px; background:var(--fg); border-radius:7px; margin:30px 0 18px; position:relative }
.visor::before,.visor::after{ content:""; position:absolute; top:5px; width:14px; height:3px; background:var(--fg) }
.visor::before{ left:-16px } .visor::after{ right:-16px }
.visor-sm{ transform:scale(.62); transform-origin:left center; margin:24px 0 8px }

/* ---- type ---- */
h1{
  font-size:clamp(36px,9.5vw,58px); line-height:.92; letter-spacing:-.03em;
  font-weight:800; text-transform:uppercase; margin:6px 0 12px;
}
.kick{ font-family:var(--mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--mut) }
.sub{ color:var(--mut); font-size:15px; max-width:48ch; margin-bottom:6px }
.sub a{ border-bottom:1px solid var(--mut) }
.fine{ color:var(--mut); font-size:12.5px; margin-top:10px }
.fine a{ border-bottom:1px solid var(--line) }

/* ---- hero ---- */
.hero{ padding:8px 0 10px }
.pic{
  width:min(100%,380px); aspect-ratio:1/1; object-fit:cover;
  border:1px solid var(--line);
  filter:grayscale(1) contrast(1.05);
  transition:filter .25s ease;
  margin-bottom:22px;
}
.pic:hover{ filter:none }

/* ---- buttons ---- */
.cta{ margin:22px 0 8px }
.btn{
  display:block; width:100%; text-align:center; padding:16px 18px; margin:10px 0;
  border:1px solid var(--fg);
  font-size:13px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  transition:background .12s ease,color .12s ease,border-color .12s ease;
}
.btn:hover{ background:var(--fg); color:var(--bg) }
.btn:active{ transform:translateY(1px) }
.btn-solid{ background:var(--fg); color:var(--bg) }
.btn-solid:hover{ background:var(--bg); color:var(--fg) }
.btn-acc{ background:var(--acc); border-color:var(--acc); color:var(--acc-fg) }
.btn-acc:hover{ background:var(--bg); color:var(--acc) }

/* ---- link rows (/links) ---- */
.rows{ margin:18px 0 6px }
.row{
  display:flex; justify-content:space-between; align-items:center; gap:14px;
  border:1px solid var(--line); padding:17px 16px; margin:10px 0;
  transition:border-color .12s ease;
}
.row:hover{ border-color:var(--fg) }
.row:active{ transform:translateY(1px) }
.row b{ font-size:13px; letter-spacing:.14em; font-weight:800; text-transform:uppercase; white-space:nowrap }
.row span{ color:var(--mut); font-size:12.5px; text-align:right }

/* ---- one-time / monthly tabs ---- */
.tabs{ display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--fg); margin:24px 0 16px }
.tabs a{
  text-align:center; padding:13px 8px;
  font-size:12px; font-weight:800; letter-spacing:.18em; text-transform:uppercase;
}
.tabs a.on{ background:var(--fg); color:var(--bg) }
.tabs a:not(.on):hover{ background:var(--line) }

/* ---- amount tiles (/donate) ---- */
.tiles{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin:14px 0 6px }
@media (min-width:540px){ .tiles{ grid-template-columns:repeat(3,1fr) } }
.tile{
  position:relative; display:block;
  border:1px solid var(--line); padding:18px 14px 15px;
  transition:border-color .12s ease;
}
.tile:hover{ border-color:var(--fg) }
.tile:active{ transform:scale(.985) }
.tile .amt{ font-family:var(--mono); font-size:23px; font-weight:700; letter-spacing:-.02em }
.tile .lbl{ display:block; color:var(--mut); font-size:12px; line-height:1.35; margin-top:6px }
.tile-pop{ border-color:var(--acc) }
.tile-pop:hover{ border-color:var(--acc) }
.badge{
  position:absolute; top:-9px; right:10px;
  background:var(--acc); color:#fff;
  font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  padding:3px 7px;
}

/* ---- membership tiers (/subscribe) ---- */
.tier{
  position:relative; display:block;
  border:1px solid var(--line); padding:20px 18px 18px; margin:12px 0;
  transition:border-color .12s ease;
}
.tier:hover{ border-color:var(--fg) }
.tier-pop{ border-color:var(--acc) }
.tier-pop:hover{ border-color:var(--acc) }
.tier .name{ font-weight:800; font-size:13px; letter-spacing:.16em; text-transform:uppercase }
.tier .price{ font-family:var(--mono); font-size:23px; margin:5px 0 11px }
.tier .price em{ font-style:normal; font-size:12px; color:var(--mut) }
.tier li{
  position:relative; color:var(--mut); font-size:13.5px; padding:3px 0 3px 17px;
}
.tier li::before{ content:"+"; position:absolute; left:0; color:var(--fg); font-family:var(--mono) }
.tier .go{
  display:inline-block; margin-top:14px; padding-bottom:2px;
  border-bottom:2px solid var(--fg);
  font-size:12px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
}
.tier-pop .go{ border-color:var(--acc); color:var(--acc) }

/* ---- trust line ---- */
.trust{ display:flex; align-items:center; gap:9px; color:var(--mut); font-size:12.5px; margin:16px 0 4px }
.trust svg{ flex:none }

/* ---- ticker tape ---- */
.tape{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); overflow:hidden; padding:9px 0; margin:28px 0 0 }
.tape > div{ display:flex; width:max-content; animation:tape 26s linear infinite }
.tape span{
  white-space:nowrap; padding-right:32px;
  font-family:var(--mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--mut);
}
@keyframes tape{ to{ transform:translateX(-50%) } }
@media (prefers-reduced-motion:reduce){ .tape > div{ animation:none } }

/* ---- mini FAQ ---- */
.faq{ margin:34px 0 8px; border-top:1px solid var(--line) }
.faq > div{ padding:16px 0; border-bottom:1px solid var(--line) }
.faq b{ display:block; font-size:13px; letter-spacing:.08em; text-transform:uppercase }
.faq p{ color:var(--mut); font-size:14px; margin-top:5px }
.faq a{ border-bottom:1px solid var(--mut) }

/* ---- contact ---- */
.mailbox{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  border:1px solid var(--fg); padding:14px 14px 14px 16px; margin:20px 0 18px;
  font-family:var(--mono); font-size:clamp(13px,3.8vw,17px); overflow-wrap:anywhere;
}
.copy{
  background:var(--fg); color:var(--bg); border:0; cursor:pointer;
  font:800 11px/1 var(--sans); letter-spacing:.16em; text-transform:uppercase;
  padding:11px 14px; flex:none;
}
.copy:hover{ background:var(--acc); color:#fff }
.list{ margin:10px 0 } 
.list li{ position:relative; color:var(--mut); font-size:14px; padding:4px 0 4px 18px }
.list li::before{ content:"→"; position:absolute; left:0; color:var(--fg); font-family:var(--mono); font-size:12px }

/* ---- thanks ---- */
.mega{ font-size:clamp(130px,42vw,280px); font-weight:800; line-height:.78; letter-spacing:-.05em; margin:18px 0 6px }

/* ---- footer ---- */
.foot{
  display:flex; justify-content:space-between; gap:10px 18px; flex-wrap:wrap;
  padding-top:34px; padding-bottom:30px;
  color:var(--mut); font-size:12px;
}
.foot a{ border-bottom:1px solid var(--line) }