/* HEIST.ING — Canonical Styles */
/* Canonical Project Colors */
:root {
  --white:      #F1DDEE;
  --orange:     #FF5E00;
  --pink:       #FF3C78;
  --yellow:     #FFE66D;
  --red:        #D41210;
  --deep-blue:  #404378;
  --light-blue: #1793FE;
  --brown:      #893A10;
  --purple:     #6A0DAD;
  --green:      #20D4A7;
  --bg:         #0a0a0a;
  --bg-panel:   #0d0d0d;
  --border:     #1a1a1a;
  --border-lit: #2a2a2a;
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--green);
  font-family: 'Courier New', Courier, monospace;
  font-size: 15px;
  line-height: 1.7;
  min-height: 100vh;
  overflow-x: hidden;
}

/* SCANLINES */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.06) 2px,
    rgba(0,0,0,0.06) 4px
  );
  pointer-events: none;
  z-index: 999;
}

/* LAYOUT */
.container {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 24px;
}

/* HEADER */
.site-header {
  border-bottom: 1px solid var(--border-lit);
  padding: 16px 0;
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.site-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.site-logo img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}
.site-logo-text {
  font-size: 18px;
  letter-spacing: 0.2em;
  color: var(--orange);
  font-weight: bold;
}
.site-tagline {
  font-size: 10px;
  color: var(--deep-blue);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

/* BIPA BADGE */
.bipa-badge {
  font-size: 9px;
  color: var(--deep-blue);
  border: 1px solid var(--border-lit);
  padding: 4px 8px;
  letter-spacing: 0.1em;
  text-decoration: none;
  white-space: nowrap;
}
.bipa-badge:hover { border-color: var(--green); color: var(--green); }

/* MAIN ONBOARDING */
.onboard {
  padding: 48px 0 80px;
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* STATEMENT BLOCK */
.statement {
  margin-bottom: 40px;
  padding: 24px 28px;
  border-left: 3px solid var(--orange);
  background: var(--bg-panel);
}
.statement p {
  font-size: 13px;
  line-height: 1.9;
  color: var(--green);
  margin-bottom: 12px;
}
.statement p:last-child { margin-bottom: 0; }
.statement .accent { color: var(--white); }
.statement .highlight { color: var(--yellow); }

/* INPUT STEP */
.step {
  margin-bottom: 32px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s, transform 0.4s;
  pointer-events: none;
}
.step.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}
.step-prompt {
  font-size: 13px;
  color: var(--light-blue);
  letter-spacing: 0.08em;
  margin-bottom: 10px;
}
.step-input {
  background: var(--bg-panel);
  border: 1px solid var(--border-lit);
  border-bottom: 2px solid var(--orange);
  color: var(--green);
  font-family: 'Courier New', monospace;
  font-size: 16px;
  padding: 10px 14px;
  width: 100%;
  outline: none;
  letter-spacing: 0.05em;
}
.step-input:focus { border-bottom-color: var(--yellow); }
.step-input::placeholder { color: var(--border-lit); }
.step-hint {
  font-size: 10px;
  color: var(--deep-blue);
  letter-spacing: 0.08em;
  margin-top: 6px;
}

/* DEMONSTRATION PANEL */
.demo-panel {
  background: var(--bg-panel);
  border: 1px solid var(--border-lit);
  border-top: 2px solid var(--green);
  padding: 24px 28px;
  margin-top: 16px;
  display: none;
}
.demo-panel.visible { display: block; }

.demo-title {
  font-size: 10px;
  color: var(--green);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
}

.demo-subject {
  font-size: 22px;
  color: var(--yellow);
  letter-spacing: 0.08em;
  margin-bottom: 20px;
  font-weight: bold;
}

.demo-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  gap: 16px;
}
.demo-row:last-child { border-bottom: none; }

.demo-label {
  font-size: 10px;
  color: var(--white);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.demo-value {
  font-size: 14px;
  color: var(--white);
  text-align: right;
}
.demo-value.accent { color: var(--orange); }
.demo-value.highlight { color: var(--yellow); }
.demo-value.green { color: var(--green); }
.demo-value.red { color: var(--red); }

.demo-narrative {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border-lit);
  font-size: 12px;
  color: var(--green);
  line-height: 1.9;
}

/* CONTINUE BUTTON */
.continue-btn {
  background: var(--orange);
  color: var(--bg);
  border: none;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.2em;
  padding: 10px 24px;
  cursor: pointer;
  margin-top: 24px;
  text-transform: uppercase;
  display: none;
}
.continue-btn.visible { display: inline-block; }
.continue-btn:hover { background: var(--yellow); }

/* BIPA CONSENT */
.bipa-consent {
  background: var(--bg-panel);
  border: 1px solid var(--deep-blue);
  border-left: 3px solid var(--light-blue);
  padding: 20px 24px;
  margin-top: 32px;
  display: none;
}
.bipa-consent.visible { display: block; }
.bipa-consent-title {
  font-size: 10px;
  color: var(--light-blue);
  letter-spacing: 0.2em;
  margin-bottom: 12px;
}
.bipa-consent p {
  font-size: 11px;
  color: var(--deep-blue);
  line-height: 1.8;
  margin-bottom: 10px;
}
.bipa-consent label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 11px;
  color: var(--green);
  cursor: pointer;
  margin-top: 12px;
}
.bipa-consent input[type=checkbox] {
  accent-color: var(--orange);
  margin-top: 3px;
  flex-shrink: 0;
}

/* FOOTER */
footer {
  border-top: 1px solid var(--border-lit);
  padding: 20px 0;
  margin-top: 40px;
}
footer .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.footer-copy {
  font-size: 10px;
  color: var(--border-lit);
  letter-spacing: 0.08em;
}
.footer-bipa {
  display: flex;
  align-items: center;
  gap: 8px;
}
.bipa-logo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--deep-blue);
  padding: 4px 10px;
  text-decoration: none;
  font-size: 9px;
  color: var(--deep-blue);
  letter-spacing: 0.12em;
}
.bipa-logo:hover { border-color: var(--light-blue); color: var(--light-blue); }
.bipa-logo-mark {
  width: 12px;
  height: 12px;
  background: var(--deep-blue);
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.bipa-logo:hover .bipa-logo-mark { background: var(--light-blue); }

@media (max-width: 600px) {
  .site-tagline { display: none; }
  footer .container { flex-direction: column; align-items: flex-start; }
}