/* Rackside waitlist — landing page. Mirrors src/theme (dark palette) +
   marketing/screenshots/shots.css. Dark-first, single deliberate theme. */

@font-face { font-family:'Barlow SC'; font-weight:500; font-display:swap;
  src:url('fonts/BarlowSemiCondensed-Medium.ttf') format('truetype'); }
@font-face { font-family:'Barlow SC'; font-weight:600; font-display:swap;
  src:url('fonts/BarlowSemiCondensed-SemiBold.ttf') format('truetype'); }
@font-face { font-family:'Plex Mono'; font-weight:400; font-display:swap;
  src:url('fonts/IBMPlexMono-Regular.ttf') format('truetype'); }
@font-face { font-family:'Plex Mono'; font-weight:500; font-display:swap;
  src:url('fonts/IBMPlexMono-Medium.ttf') format('truetype'); }

:root {
  --bg:#09090B; --surface:#0F0F12; --card:#141417; --cardEl:#1A1A1E;
  --border:#222226; --borderSub:#1A1A1E;
  --t1:#F2F2F4; --t2:#A1A1A8; --t3:#6E6E76;
  --accent:#86E07B; --accentSoft:rgba(134,224,123,0.10);
  --danger:#D14545; --ghost:rgba(242,242,244,0.42);
  --sys:-apple-system,'SF Pro Text','Helvetica Neue',Segoe UI,Roboto,sans-serif;
  --maxw:1080px;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body {
  background:var(--bg); color:var(--t1); font-family:var(--sys);
  line-height:1.5; -webkit-font-smoothing:antialiased; overflow-x:hidden;
  position:relative;
}

/* faint machinist ruler down the left edge — the brand signature */
body::before { content:''; position:fixed; left:22px; top:0; bottom:0; width:1px;
  background:rgba(242,242,244,0.06); z-index:0; pointer-events:none; }
body::after { content:''; position:fixed; left:22px; top:0; bottom:0; width:8px;
  background:repeating-linear-gradient(to bottom,
    rgba(242,242,244,0.09) 0 1px, transparent 1px 72px); z-index:0; pointer-events:none; }
@media (max-width:640px){ body::before,body::after{ display:none; } }

.wrap { max-width:var(--maxw); margin:0 auto; padding:0 32px; position:relative; z-index:1; }
@media (max-width:640px){ .wrap{ padding:0 22px; } }

/* type registers */
.mono { font-family:'Plex Mono'; font-weight:500; letter-spacing:0.32em;
  text-transform:uppercase; font-size:13px; }
.display { font-family:'Barlow SC'; font-weight:600; text-transform:uppercase;
  letter-spacing:0.004em; line-height:1.0; }

/* ---------- nav ---------- */
nav { display:flex; align-items:center; justify-content:space-between;
  padding:26px 0; }
.brand { display:flex; align-items:center; gap:14px; }
.brand svg { width:34px; height:34px; display:block; }
.brand .name { font-family:'Barlow SC'; font-weight:600; font-size:24px;
  letter-spacing:0.03em; text-transform:uppercase; color:var(--t1); }
.brand .name .app { color:var(--t3); }
nav .handle { font-family:'Plex Mono'; font-weight:400; font-size:13px;
  color:var(--t3); letter-spacing:0.06em; text-decoration:none; }
nav .handle:hover { color:var(--t2); }

/* ---------- hero ---------- */
.hero { padding:70px 0 40px; max-width:820px; }
.kick { color:var(--accent); margin-bottom:34px; }
.kick .idx { color:var(--t3); }
h1 { font-family:'Barlow SC'; font-weight:600; text-transform:uppercase;
  font-size:clamp(52px,9vw,110px); line-height:0.98; letter-spacing:0.004em;
  color:var(--t1); }
h1 .dim { color:var(--t3); }
.tagline { font-family:'Plex Mono'; font-weight:500; font-size:15px;
  letter-spacing:0.34em; text-transform:uppercase; color:var(--t2);
  margin-top:26px; }
.lede { font-size:clamp(18px,2.4vw,22px); color:var(--t2); margin-top:34px;
  max-width:640px; line-height:1.55; }
.lede strong { color:var(--t1); font-weight:600; }

/* ---------- waitlist form ---------- */
.signup { margin-top:44px; max-width:560px; }
.field { display:flex; gap:10px; }
@media (max-width:520px){ .field{ flex-direction:column; } }
input[type=email] {
  flex:1; min-width:0; background:var(--card); color:var(--t1);
  border:1px solid var(--border); border-radius:6px; padding:16px 18px;
  font-family:'Plex Mono'; font-weight:400; font-size:15px; letter-spacing:0.02em;
  outline:none; transition:border-color .15s;
}
input[type=email]::placeholder { color:var(--t3); }
input[type=email]:focus { border-color:var(--t3); }
button.cta {
  flex:none; background:var(--accent); color:#0B0B0D; border:none; border-radius:6px;
  padding:16px 26px; font-family:'Barlow SC'; font-weight:600; font-size:17px;
  text-transform:uppercase; letter-spacing:0.05em; cursor:pointer;
  transition:filter .15s, opacity .15s;
}
button.cta:hover { filter:brightness(1.06); }
button.cta:disabled { opacity:0.5; cursor:default; }
/* honeypot — visually hidden, off-screen, not display:none (bots skip those) */
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.formnote { font-family:'Plex Mono'; font-weight:400; font-size:12px;
  letter-spacing:0.04em; color:var(--t3); margin-top:16px; min-height:18px; }
.formnote.err { color:var(--danger); }
.formnote.ok { color:var(--accent); }
.privnote { font-size:12px; line-height:1.5; color:var(--t3); margin-top:8px; max-width:520px; }

/* success state */
.success { display:none; margin-top:44px; max-width:560px;
  border:1px solid var(--accent); border-radius:8px; padding:26px 28px;
  background:var(--accentSoft); }
.success.show { display:block; }
.success .pos { font-family:'Barlow SC'; font-weight:600; font-size:56px;
  line-height:1; color:var(--accent); font-variant-numeric:tabular-nums; }
.success .pos .hash { color:var(--t3); font-size:34px; }
.success .msg { color:var(--t1); font-size:16px; margin-top:14px; line-height:1.5; }
.success .msg span { color:var(--t2); }

/* live count line */
.count { margin-top:30px; font-family:'Plex Mono'; font-weight:500; font-size:13px;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--t3); min-height:18px; }
.count b { color:var(--t1); font-family:'Barlow SC'; font-weight:600; font-size:17px;
  letter-spacing:0.02em; font-variant-numeric:tabular-nums; margin:0 4px; }

/* ---------- proof strip (screenshots) ---------- */
.shots { margin:96px 0 40px; }
.sectionhd { display:flex; align-items:flex-end; justify-content:space-between;
  border-bottom:1px solid var(--border); padding-bottom:12px; margin-bottom:40px; }
.sectionhd .mono { color:var(--t3); }
.shotrow { display:flex; gap:22px; overflow-x:auto; padding-bottom:14px;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; }
.shotrow::-webkit-scrollbar { height:6px; }
.shotrow::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }
.shotrow figure { flex:none; width:232px; scroll-snap-align:start; }
.shotrow img { width:100%; height:auto; display:block; border-radius:22px;
  border:1px solid var(--border); background:var(--card); }
.shotrow figcaption { font-family:'Plex Mono'; font-weight:500; font-size:11px;
  letter-spacing:0.24em; text-transform:uppercase; color:var(--t3); margin-top:14px; }
.shotrow figcaption b { color:var(--accent); font-weight:500; }

/* ---------- pillars ---------- */
.pillars { margin:80px 0; display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
  background:var(--border); border:1px solid var(--border); border-radius:8px; overflow:hidden; }
@media (max-width:640px){ .pillars{ grid-template-columns:1fr; } }
.pillar { background:var(--bg); padding:30px 30px 34px; }
.pillar .n { font-family:'Plex Mono'; font-weight:500; font-size:12px;
  letter-spacing:0.24em; color:var(--accent); margin-bottom:16px; }
.pillar .n .idx { color:var(--t3); }
.pillar h3 { font-family:'Barlow SC'; font-weight:600; text-transform:uppercase;
  font-size:26px; letter-spacing:0.01em; color:var(--t1); margin-bottom:12px; }
.pillar p { color:var(--t2); font-size:15px; line-height:1.55; }

/* ---------- closing CTA ---------- */
.closer { margin:90px 0 60px; text-align:center; }
.closer h2 { font-family:'Barlow SC'; font-weight:600; text-transform:uppercase;
  font-size:clamp(34px,6vw,64px); line-height:1.02; letter-spacing:0.006em; }
.closer h2 .dim { color:var(--t3); }
.closer .lede { margin:26px auto 0; text-align:center; }
.closer a.jump { display:inline-block; margin-top:34px; background:var(--accent);
  color:#0B0B0D; text-decoration:none; border-radius:6px; padding:16px 34px;
  font-family:'Barlow SC'; font-weight:600; font-size:17px; text-transform:uppercase;
  letter-spacing:0.05em; }
.closer a.jump:hover { filter:brightness(1.06); }

/* ---------- footer ---------- */
footer { border-top:1px solid var(--border); padding:40px 0 60px; margin-top:40px;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:18px; }
footer .fbrand { font-family:'Barlow SC'; font-weight:600; font-size:18px;
  letter-spacing:0.03em; text-transform:uppercase; color:var(--t2); }
footer .links { display:flex; gap:24px; }
footer a { font-family:'Plex Mono'; font-weight:400; font-size:13px; letter-spacing:0.04em;
  color:var(--t3); text-decoration:none; }
footer a:hover { color:var(--t2); }
footer .fine { font-family:'Plex Mono'; font-weight:400; font-size:11px;
  letter-spacing:0.04em; color:var(--t3); width:100%; }