/* ============================================================================
   Slotmetry — public site (pre-login).
   Design system: Carbon x Telemetry, per the chosen template.

   Written from the template, not copied from it: the mock is a single 259 KB
   file with its CSS inline, its fonts on Google's CDN and its numbers invented.
   What is taken here is the design language — palette, type scale, spacing,
   the four Main Lobby bands — rebuilt as a stylesheet that can be cached,
   reviewed and changed.

   FONTS ARE SELF-HOSTED, deliberately. The template links fonts.googleapis.com,
   which sends every visitor's IP to a third party on first paint. This site
   publishes a privacy posture and cites the Garante; calling a foreign CDN to
   render its own headings contradicts that, and it is avoidable for 78 KB.
   Both families are variable fonts under the SIL Open Font License, so one file
   per family covers every weight the design uses.
   ========================================================================== */

@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('/assets/fonts/jetbrains-mono-var.woff2') format('woff2');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --base: #0b0e11;
  --surface: #12161b;
  --surface-2: #181d24;
  --border: #232a32;
  --text: #edf2f5;
  --muted: #84919e;

  --accent: #7c5cff;
  --signal: #2ee6a8;
  --gold: #f5b942;
  --down: #ff6b6b;

  /* The four Main Lobby bands. One vocabulary, used on every operator. */
  --band-featured: #f5b942;
  --band-prime: #7c5cff;
  --band-core: #2ee6a8;
  --band-extended: #4a5560;
  --band-fg: #0b0e11;

  --accent-bg: rgba(124, 92, 255, 0.12);
  --accent-bd: rgba(124, 92, 255, 0.35);
  --signal-bg: rgba(46, 230, 168, 0.1);
  --signal-bd: rgba(46, 230, 168, 0.3);
  --gold-bg: rgba(245, 179, 66, 0.1);
  --gold-bd: rgba(245, 179, 66, 0.3);

  --nav-bg: rgba(11, 14, 17, 0.85);
  --radius: 11px;
  --radius-btn: 9px;
  --shadow-card: 0 20px 60px rgba(0, 0, 0, 0.45);

  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: var(--font-display);
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --tracking-display: -0.035em;

  --wrap: 1160px;
  --gutter: 28px;
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* The header is sticky, so an anchor jump must not land under it. */
  scroll-padding-top: 84px;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--base);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  /* The one guard the report estate learned the hard way: nothing may push the
     document sideways. Vertical scrolling stays untouched. */
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Keyboard users reach the content without walking the whole nav. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 10px 16px;
  background: var(--accent);
  color: #fff;
  border-radius: 0 0 var(--radius-btn) 0;
}

.skip-link:focus {
  left: 0;
}

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.mono {
  font-family: var(--font-mono);
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  letter-spacing: var(--tracking-display);
  font-weight: 700;
  line-height: 1.14;
}

h1 {
  font-weight: 800;
  font-size: clamp(34px, 5.4vw, 58px);
}

h2 {
  font-size: clamp(26px, 3.4vw, 36px);
  margin: 12px 0 14px;
}

h3 {
  font-size: 17px;
}

p {
  overflow-wrap: break-word;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--signal);
  font-weight: 600;
}

.lead {
  color: var(--muted);
  max-width: 640px;
}

section {
  padding: 84px 0;
}

.sect-line {
  border-top: 1px solid var(--border);
}

/* ---------- header ---------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--nav-bg);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 66px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: var(--tracking-display);
  flex-shrink: 0;
}

.brand img {
  height: 30px;
  width: auto;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 26px;
  list-style: none;
  font-size: 14px;
  color: var(--muted);
}

.nav-links a:hover {
  color: var(--text);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ---------- buttons --------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--radius-btn);
  border: 1px solid transparent;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn-primary {
  background: var(--accent);
  color: #fff;
}

.btn-primary:hover {
  background: #6b4bf0;
}

.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}

.btn-ghost:hover {
  border-color: var(--accent);
  color: #fff;
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ---------- hero ------------------------------------------------------ */

.hero {
  padding: 76px 0 84px;
  background-image:
    linear-gradient(rgba(35, 42, 50, 0.35) 1px, transparent 1px),
    linear-gradient(90deg, rgba(35, 42, 50, 0.35) 1px, transparent 1px);
  background-size: 32px 32px;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}

.hero h1 {
  margin: 14px 0 18px;
}

.hero h1 .hero-line-2 {
  color: var(--muted);
  display: block;
}

.hero .lead {
  font-size: 16px;
}

/* ---------- the sample console ---------------------------------------
   Presented as a SAMPLE VIEW, never as live telemetry. The template framed
   this as a live console with real-looking totals; those numbers were
   invented, and a prospect cannot tell an invented total from a measured one.
   The frame below says what it is, and the figures are shaped like data
   without claiming to be today's. */

.console {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  min-width: 0;
}

.console-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.console-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--accent-bd);
  background: var(--accent-bg);
  color: var(--accent);
  font-weight: 600;
  white-space: nowrap;
}

.console-body {
  padding: 16px;
}

.console-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.metric {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 11px 12px;
  min-width: 0;
}

.metric-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.metric-value {
  font-family: var(--font-mono);
  font-size: 21px;
  font-weight: 600;
  margin-top: 4px;
  letter-spacing: -0.02em;
}

.metric-value.is-up {
  color: var(--signal);
}

.console-rows {
  border-top: 1px solid var(--border);
  padding-top: 12px;
}

.console-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  font-family: var(--font-mono);
  font-size: 12px;
  border-bottom: 1px solid rgba(35, 42, 50, 0.5);
}

.console-row:last-child {
  border-bottom: 0;
}

.console-row-name {
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.console-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 11px 16px;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- inside the reports: the screenshot reel --------------------
   A track wider than the viewport, clipped by its mask. The mask is what keeps
   this from widening the document — the estate's one hard layout rule — so the
   overflow:hidden below is load-bearing, not decoration. */

.reel-section {
  padding: 52px 0 58px;
  border-top: 1px solid var(--border);
}

.reel-mask {
  position: relative;
  overflow: hidden;
  margin-top: 16px;
}

/* Fades the strip into the page edges instead of cutting it off mid-screenshot. */
.reel-mask::before,
.reel-mask::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 90px;
  z-index: 4;
  pointer-events: none;
}

.reel-mask::before {
  left: 0;
  background: linear-gradient(90deg, var(--base), transparent);
}

.reel-mask::after {
  right: 0;
  background: linear-gradient(270deg, var(--base), transparent);
}

.reel-track {
  display: flex;
  align-items: center;
  gap: 22px;
  width: max-content;
  padding: 30px 0;
  animation: reel 70s linear infinite;
}

.reel-track:hover {
  animation-play-state: paused;
}

/* The set is duplicated in the markup, so -50% lands exactly on the copy. */
@keyframes reel {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.reel-shot {
  height: 300px;
  width: auto;
  max-width: none;
  border-radius: 10px;
  border: 1px solid var(--border);
  opacity: 0.8;
  display: block;
  user-select: none;
  pointer-events: none;
  transform-origin: center;
  will-change: transform, opacity;
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.3);
}

/* ---------- band pills ------------------------------------------------ */

.pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.pill-featured {
  background: var(--band-featured);
  color: var(--band-fg);
}

.pill-prime {
  background: var(--band-prime);
  color: #fff;
}

.pill-core {
  background: var(--band-core);
  color: var(--band-fg);
}

.pill-extended {
  background: var(--band-extended);
  color: #e2e8ed;
}

.pill-muted {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
}

/* ---------- generic cards -------------------------------------------- */

.card-grid {
  display: grid;
  gap: 18px;
  margin-top: 34px;
}

.cols-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.cols-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.cols-4 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  min-width: 0;
}

.card-index {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}

.card h3 {
  margin: 10px 0 8px;
}

.card p {
  color: var(--muted);
  font-size: 14.5px;
}

/* ---------- the band ladder ------------------------------------------ */

.ladder {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 30px 0 8px;
}

.ladder-step {
  border-radius: 8px;
  padding: 14px 12px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--band-fg);
}

.ladder-featured { background: var(--band-featured); }
.ladder-prime { background: var(--band-prime); color: #fff; }
.ladder-core { background: var(--band-core); }
.ladder-extended { background: var(--band-extended); color: #e2e8ed; }

.ladder-scale {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- report families ------------------------------------------ */

.family {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.family-kicker {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--signal);
}

.family-inside {
  font-size: 13.5px;
  color: var(--muted);
  border-top: 1px solid var(--border);
  padding-top: 12px;
}

.family-inside strong {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
  font-weight: 600;
}

.cadence {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
}

/* ---------- sample tables (gap analysis / movers) --------------------- */

.sample {
  margin-top: 28px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.sample-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* A wide table scrolls INSIDE its own card. It must never widen the page. */
.sample-scroll {
  overflow-x: auto;
}

.sample table {
  width: 100%;
  border-collapse: collapse;
  min-width: 520px;
}

.sample th,
.sample td {
  text-align: left;
  padding: 11px 16px;
  border-bottom: 1px solid rgba(35, 42, 50, 0.6);
  font-size: 13.5px;
  white-space: nowrap;
}

.sample th {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}

.sample tr:last-child td {
  border-bottom: 0;
}

.sample td.num {
  font-family: var(--font-mono);
  color: var(--muted);
}

.state-missing {
  color: var(--down);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
}

.state-live {
  color: var(--signal);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
}

.band-move {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.band-move-arrow {
  color: var(--muted);
}

/* ---------- audiences ------------------------------------------------- */

.audience ul {
  list-style: none;
  margin-top: 12px;
  display: grid;
  gap: 9px;
}

.audience li {
  color: var(--muted);
  font-size: 14px;
  padding-left: 16px;
  position: relative;
}

.audience li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* ---------- FAQ ------------------------------------------------------- */

.faq {
  margin-top: 30px;
  display: grid;
  gap: 10px;
}

.faq details {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0 18px;
}

.faq summary {
  cursor: pointer;
  padding: 16px 0;
  font-weight: 600;
  font-size: 15px;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  font-family: var(--font-mono);
  color: var(--accent);
  font-size: 18px;
  flex-shrink: 0;
}

.faq details[open] summary::after {
  content: "\2013";
}

.faq details p {
  color: var(--muted);
  font-size: 14.5px;
  padding: 0 0 18px;
}

/* ---------- footer ---------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--border);
  padding: 46px 0 34px;
}

.footer-grid {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
}

.footer-brand p {
  color: var(--muted);
  font-size: 13.5px;
  max-width: 340px;
  margin-top: 10px;
}

.footer-links {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  font-size: 13.5px;
  color: var(--muted);
  align-items: flex-start;
}

.footer-links a:hover {
  color: var(--text);
}

.footer-bottom {
  margin-top: 30px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- login modal ----------------------------------------------
   Same contract as before the redesign: ids, the hidden attribute, the
   data-close-modal hooks and the aria-live error region are what the auth
   script binds to, and /reports/* still redirects here with ?login=required. */

.login-modal[hidden] {
  display: none;
}

.login-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.login-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 6, 8, 0.72);
  backdrop-filter: blur(4px);
}

.login-modal__panel {
  position: relative;
  width: min(420px, 100%);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 30px 28px 26px;
}

.login-modal__close {
  position: absolute;
  top: 12px;
  right: 14px;
  background: transparent;
  border: 0;
  color: var(--muted);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
}

.login-modal__close:hover {
  color: var(--text);
}

.login-modal__panel h2 {
  font-size: 22px;
  margin: 0 0 6px;
}

.login-modal__intro {
  color: var(--muted);
  font-size: 13.5px;
  margin-bottom: 20px;
}

.login-form {
  display: grid;
  gap: 14px;
}

.login-field {
  display: grid;
  gap: 6px;
}

.login-field span {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.login-field input {
  width: 100%;
  padding: 11px 13px;
  border-radius: var(--radius-btn);
  border: 1px solid var(--border);
  background: var(--base);
  color: var(--text);
  font: inherit;
  font-size: 14.5px;
}

.login-field input:focus {
  outline: none;
  border-color: var(--accent);
}

.login-link {
  justify-self: start;
  background: none;
  border: 0;
  padding: 0;
  color: var(--accent);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  text-decoration: underline;
}

.login-error {
  color: var(--down);
  font-size: 13px;
  min-height: 18px;
}

.login-actions {
  display: grid;
  gap: 10px;
}

.login-actions .btn {
  width: 100%;
  padding: 12px 18px;
}

/* ---------- responsive ------------------------------------------------ */

@media (max-width: 1000px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }

  section {
    padding: 66px 0;
  }
}

@media (max-width: 860px) {
  .nav-links {
    display: none;
  }

  .hero {
    padding: 54px 0 62px;
  }
}

@media (max-width: 640px) {
  :root {
    --gutter: 18px;
  }

  section {
    padding: 54px 0;
  }

  .reel-shot {
    height: 190px;
  }

  .reel-track {
    padding: 22px 0;
  }

  .reel-mask::before,
  .reel-mask::after {
    width: 44px;
  }

  .ladder {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .card {
    padding: 18px;
  }

  .nav-actions .btn {
    padding: 9px 14px;
    font-size: 13px;
  }

  .brand span {
    font-size: 18px;
  }

  .footer-links {
    gap: 14px 20px;
  }

  .login-modal__panel {
    padding: 26px 20px 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  /* Said outright rather than left to the blanket duration override below: the reel does not
     move at all here, and the strip stays where it starts. */
  .reel-track {
    animation: none;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}