/* RackRat pages only — restyle the Techs At Work site shell to the RackRat
   build's canonical RETRO TERMINAL surface (the RackRat app build
   /src/renderer/src/styles.css, rackrat-rename branch):
   monospace everywhere, phosphor-green chrome, achromatic paper-white accent,
   brand orange ONLY in the wordmark, animated hex-key rain ground, square
   hairline panels. */
:root {
  --bg: #03060a;
  --panel: #080e14;
  --ink: #dcffe8;
  --sub: #a8e6c0;
  --accent: #e8f4ff;
  --accent-ink: #03060a;
  --line: #22553a;
  --brand: #ff9e2c;
  --dim: #7cc196;
  --green: #39ff6a;
  --amber: #ffcc00;
  --raised: #101821;
  --phosphor-rgb: 57, 255, 106;
  --accent-rgb: 232, 244, 255;
  --scrim-rgb: 0, 0, 0;
  --overlay-rgb: 255, 255, 255;
}

/* Key-rain ground — radial glow + scanlines here; the animated AES-256 hex-key
   rain itself is the #keyrain canvas painted by rackrat/keyrain.js */
body {
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse 130% 62% at 50% -6%, rgba(var(--phosphor-rgb), 0.14), transparent 70%),
    repeating-linear-gradient(180deg, rgba(var(--scrim-rgb), 0.46) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(180deg, rgba(var(--overlay-rgb), 0.03) 0 1px, transparent 1px 2px);
  background-attachment: fixed;
  font-family: 'Cascadia Mono', 'JetBrains Mono', 'DejaVu Sans Mono', Consolas, monospace;
}

/* Key-rain canvas — fixed ground under the content; CRT vignette (z 99) stays on top */
#keyrain { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
header.site, .tabs, main, footer.site { position: relative; z-index: 1; }

/* CRT bezel vignette — verbatim from the app */
body::after {

  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 99;
  box-shadow:
    inset 0 0 140px 40px rgba(var(--scrim-rgb), 0.85),
    inset 0 0 40px rgba(var(--phosphor-rgb), 0.07);
}

a:hover { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Header — solid backing so rain doesn't run through the nav (as in app) */
header.site { background: var(--bg); box-shadow: 0 0 30px 22px var(--bg); border-bottom: 1px solid var(--line); }
.brand span { color: var(--brand); }
nav.site a:hover, nav.site a[aria-current="page"] { color: var(--ink); }
nav.site a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--accent); }

/* Product tab bar — square, like the app tabs */
.tabs { background: var(--bg); border-bottom: 1px solid var(--line); }
.tabs a[aria-current="page"] {
  color: var(--accent); border-color: var(--line); border-style: solid;
  background: var(--panel); border-radius: 0;
}

/* Hero — wordmark styled like the app h1; layout geometry left identical to
   the shared site.css so button spacing matches the BuildingSurvey pages. */
.hero { border-bottom: 1px solid var(--line); }
.kicker { color: var(--brand); border-color: var(--brand); }
.hero-lockup { display: flex; align-items: flex-end; gap: 28px; }
.hero-mascot {
  width: clamp(88px, 11vw, 148px); height: auto; flex: none;
  filter: drop-shadow(0 0 22px rgba(var(--phosphor-rgb), 0.30));
}
.hero h1 {
  font-family: 'Segoe UI Black', 'Arial Black', system-ui, sans-serif;
  font-weight: 900; letter-spacing: -0.02em;
  transform: skewX(-8deg); position: relative;
  text-shadow: 0 0 14px rgba(var(--phosphor-rgb), 0.45);
}
.hero h1::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -8px; height: 4px;
  background: linear-gradient(90deg, var(--accent), rgba(var(--accent-rgb), 0) 70%);
}
.hero h1 em { color: var(--brand); }

/* Sections */
section { border-bottom: 1px solid var(--line); }
h2 span { color: var(--green); }

/* Slabs + panels — square, hairline, phosphor scanline fill (app .panel) */
.slabs {
  border: 1px solid var(--line); border-radius: 0; overflow: hidden;
  background-color: var(--panel);
  background-image: repeating-linear-gradient(180deg, rgba(var(--phosphor-rgb), 0.022) 0 1px, transparent 1px 2px);
  box-shadow: inset 0 0 0 1px rgba(var(--phosphor-rgb), 0.06), 0 0 22px rgba(var(--phosphor-rgb), 0.05);
}
.slab { border-right: 1px solid var(--line); }
.slab .num { color: var(--green); }
.slab .fic { color: var(--green); }
@media (max-width: 820px) {
  .slab { border-right: none; border-bottom: 1px solid var(--line); }
  .hero-lockup { gap: 18px; }
  .tabs .wrap { flex-wrap: wrap; }
  .tabs a { padding: 12px 12px; }
  nav.site a { padding: 10px 0; }
  footer.site a { padding: 10px 0; }
}

@media (max-width: 480px) {
  .hero h1 { font-size: clamp(2rem, 10.5vw, 2.8rem); }
  .hero-mascot { width: clamp(56px, 16vw, 88px); }
  .hero-lockup { gap: 14px; }
}

.panel {
  border: 1px solid var(--line); border-radius: 0;
  background-color: var(--panel);
  background-image: repeating-linear-gradient(180deg, rgba(var(--phosphor-rgb), 0.022) 0 1px, transparent 1px 2px);
  box-shadow: inset 0 0 0 1px rgba(var(--phosphor-rgb), 0.06), 0 0 22px rgba(var(--phosphor-rgb), 0.05);
}
.panel .tagline { color: var(--green); }

/* Tags — status colors from the build */
.tag-free { color: var(--green); }
.tag-pro { color: var(--brand); }
.tag-ent { color: #c8dcec; }
.tag-beta { color: var(--amber); }

/* Notices — build amber */
.notice { border: 1px solid var(--amber); background: rgba(255, 204, 0, 0.06); color: #ffe9a8; }
.notice strong { color: var(--amber); }

/* Footer */
footer.site { border-top: 1px solid var(--line); }

/* Download lockup — Loopback leaning beside the download box; sized to stay
   clearly smaller than the panel on desktop and compact on mobile */
.download-lockup { display: flex; align-items: flex-end; gap: 34px; }
.download-lockup .download-box { flex: 1; }
.download-mascot {
  width: clamp(140px, 15vw, 200px); height: auto; flex: none;
  filter: drop-shadow(0 0 14px rgba(var(--phosphor-rgb), 0.25));
}
@media (max-width: 820px) {
  .download-lockup { flex-direction: column; align-items: center; gap: 18px; }
  .download-mascot { width: clamp(120px, 38vw, 160px); }
}

#savings h2 { text-wrap: balance; }