/* ============================================================
   Atlas Machina — Marketing Page Styles
   Depends on: tokens.css (loaded first in index.html)
   ============================================================ */

/* ── Base Reset ───────────────────────────────────────────── */

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

:root {
  --marketing-footer-height: 2.25rem;
}

body {
  font-family:      var(--font-primary);
  font-size:        var(--font-size-base);
  font-weight:      var(--font-weight-normal);
  /* Fallback behind hero columns */
  background:       linear-gradient(to right, #000000 50%, #E9ECEF 50%);
  color:            var(--color-text-primary);
  overflow-x:       hidden;
  line-height:      1.6;
  padding-bottom:   var(--marketing-footer-height);
}

h1, h2, h3, h4 {
  font-weight:      var(--font-weight-bold);
  line-height:      1.15;
}

a {
  color:            var(--color-link);
  text-decoration:  none;
  transition:       color var(--transition-fast);
}
a:hover { color: var(--color-link-hover); }

/* ── Shared Utilities ─────────────────────────────────────── */

.section-label {
  display:          block;
  color:            var(--color-primary);
  /* 2× --font-size-xs */
  font-size:        clamp(1.3rem, 3vw, 1.5rem);
  font-weight:      var(--font-weight-bold);
  letter-spacing:   0.12em;
  text-transform:   uppercase;
  margin-bottom:    var(--spacing-md);
}

/* ── Buttons ──────────────────────────────────────────────── */

.btn-ghost-sm {
  display:          inline-block;
  border:           1px solid var(--color-primary);
  color:            var(--color-primary);
  padding:          0.4rem 1rem;
  border-radius:    var(--border-radius-md);
  font-size:        var(--font-size-sm);
  font-weight:      var(--font-weight-bold);
  text-decoration:  none;
  transition:       background var(--transition-fast), color var(--transition-fast);
}
.btn-ghost-sm:hover {
  background:       var(--color-primary);
  color:            var(--color-on-primary);
}

/* ── Hero: 50 / 50 split ──────────────────────────────────── */

#hero {
  min-height:       calc(100vh - var(--marketing-footer-height));
  display:          flex;
  align-items:      stretch;
  justify-content:  center;
  padding:          0;
  background:       transparent;
}

.hero-split {
  display:          flex;
  flex-direction:   row;
  width:            100%;
  min-height:       calc(100vh - var(--marketing-footer-height));
  align-items:      stretch;
}

.hero-col {
  flex:             1 1 50%;
  width:            50%;
  max-width:        50vw;
  min-height:       calc(100vh - var(--marketing-footer-height));
  padding:          var(--spacing-2xl) clamp(var(--spacing-lg), 4vw, var(--spacing-3xl));
  display:          flex;
  flex-direction:   column;
  justify-content:  center;
}

.hero-col-left {
  text-align:       left;
  background:       #000000;
  border-right:     1px solid rgba(255, 255, 255, 0.12);
}

.hero-col-right {
  text-align:       left;
  /* Full-column light grey (not only behind text) */
  background:       #E9ECEF;
}

/* Headline scaled for half viewport — white on black column */
.hero-headline {
  font-size:        clamp(2.8rem, 9vw, 5.5rem);
  color:            #FFFFFF;
  margin-bottom:    var(--spacing-2xl);
  letter-spacing:   -0.02em;
}

.hero-right-lead {
  /* 2× --font-size-lg */
  font-size:        clamp(2rem, 6vw, 2.25rem);
  font-weight:      var(--font-weight-bold);
  color:            var(--color-text-primary);
  line-height:      1.35;
  margin-bottom:    var(--spacing-xl);
}

/* Checkbox-style list bullets */
.feature-checklist {
  list-style:       none;
  padding:          0;
  margin:           0;
}

.feature-checklist li {
  display:          flex;
  align-items:      center;
  gap:              var(--spacing-md);
  margin-bottom:    var(--spacing-lg);
  font-size:        clamp(1.15rem, 2.8vw, 1.35rem);
  font-weight:      var(--font-weight-normal);
  color:            var(--color-text-secondary);
  line-height:      1.4;
}

.feature-checklist li:last-child {
  margin-bottom:    0;
}

.feature-checklist li::before {
  content:          "\2713";
  flex-shrink:      0;
  width:            1.5em;
  height:           1.5em;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  font-size:        0.65em;
  font-weight:      var(--font-weight-bold);
  line-height:      1;
  color:            var(--color-on-primary);
  background:       var(--color-primary);
  border:           2px solid var(--color-primary-dark);
  border-radius:    var(--border-radius-sm);
  box-shadow:       var(--shadow-sm);
}

/* ── Stealth Email Form ───────────────────────────────────── */

.stealth-form {
  position:         relative;
  width:            100%;
  max-width:        28rem;
}

.form-field-wrap {
  display:          flex;
  background:       var(--color-surface);
  border:           1px solid var(--color-border);
  border-radius:    var(--border-radius-full);
  overflow:         hidden;
  box-shadow:       var(--shadow-sm);
  transition:       border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.form-field-wrap:focus-within {
  border-color:     var(--color-primary);
  box-shadow:       var(--shadow-primary);
}

/* Dark column: form field reads on black */
.hero-col-left .form-field-wrap {
  background:       rgba(255, 255, 255, 0.08);
  border-color:     rgba(255, 255, 255, 0.22);
  box-shadow:       none;
}
.hero-col-left .form-field-wrap:focus-within {
  box-shadow:       0 0 0 3px rgba(254, 189, 22, 0.25);
}

#contact-email {
  flex:             1;
  background:       transparent;
  border:           none;
  outline:          none;
  padding:          0.85rem 1.4rem;
  color:            var(--color-text-primary);
  font-size:        var(--font-size-base);
  font-family:      var(--font-primary);
  min-width:        0;
}
#contact-email::placeholder { color: var(--color-text-muted); }

.hero-col-left #contact-email {
  color:            #FFFFFF;
}
.hero-col-left #contact-email::placeholder {
  color:            rgba(255, 255, 255, 0.45);
}

.form-submit-btn {
  background:       var(--color-primary);
  color:            var(--color-on-primary);
  border:           none;
  cursor:           pointer;
  padding:          0 1.6rem;
  font-family:      var(--font-primary);
  font-weight:      var(--font-weight-bold);
  font-size:        var(--font-size-sm);
  border-radius:    0 var(--border-radius-full) var(--border-radius-full) 0;
  white-space:      nowrap;
  transition:       background var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast);
}
.form-submit-btn:not(:disabled):hover {
  background:       var(--color-primary-dark);
}
.form-submit-btn:disabled,
.form-submit-btn.form-submit-btn--disabled {
  background:       #4a5056;
  color:            rgba(255, 255, 255, 0.45);
  cursor:           not-allowed;
  opacity:          1;
  box-shadow:       none;
}

/* Honeypot (hidden — same pattern as app login) */
.form-honeypot {
  position:         absolute;
  left:             -9999px;
  width:            1px;
  height:           1px;
  overflow:         hidden;
  opacity:          0;
  pointer-events:   none;
}

/* “I am human.” checkbox row */
.human-confirm-row {
  display:          flex;
  align-items:      flex-start;
  gap:              var(--spacing-sm);
  margin-top:       var(--spacing-md);
  font-size:        var(--font-size-sm);
  line-height:      1.45;
  color:            rgba(255, 255, 255, 0.82);
}
.human-confirm-row input[type="checkbox"] {
  flex-shrink:      0;
  margin-top:       0.2rem;
  width:            1.15rem;
  height:           1.15rem;
  accent-color:     var(--color-primary);
  cursor:           pointer;
}
.human-confirm-row label {
  cursor:           pointer;
  font-weight:      var(--font-weight-normal);
  margin:           0;
}

/* ── Persistent footer (copyright only) ─────────────────── */

.site-footer {
  position:         fixed;
  bottom:           0;
  left:             0;
  right:            0;
  z-index:          1000;
  background:       var(--color-surface-dark);
  border-top:       1px solid rgba(255, 255, 255, 0.1);
  padding:          0.35rem var(--spacing-lg);
  text-align:       center;
  box-shadow:       0 -2px 6px rgba(0, 0, 0, 0.2);
}
.site-footer .footer-copyright {
  font-size:        var(--font-size-xs);
  color:            var(--color-secondary-light);
  font-weight:      var(--font-weight-normal);
  line-height:      1.3;
}

.form-success {
  color:            var(--color-success);
  font-size:        var(--font-size-sm);
  margin-top:       var(--spacing-md);
  text-align:       left;
}
.form-error {
  color:            var(--color-error);
  font-size:        var(--font-size-sm);
  margin-top:       var(--spacing-md);
  text-align:       left;
}

/* ── Responsive: stack columns ────────────────────────────── */

@media (max-width: 768px) {
  body {
    background:       #E9ECEF;
  }
  .hero-split {
    flex-direction:   column;
    min-height:       auto;
  }
  .hero-col {
    flex:             1 1 auto;
    width:            100%;
    max-width:        none;
    min-height:       auto;
    padding:          var(--spacing-2xl) var(--spacing-lg);
  }
  .hero-col-left {
    border-right:     none;
    border-bottom:    1px solid rgba(255, 255, 255, 0.15);
  }
  .hero-col-right {
    flex:             1 1 auto;
    min-height:       50vh;
  }
}

@media (max-width: 480px) {
  .form-field-wrap {
    flex-direction:   column;
    border-radius:    var(--border-radius-lg);
  }
  #contact-email {
    padding:          0.85rem 1.2rem;
    text-align:       center;
  }
  .form-submit-btn {
    border-radius:    0 0 var(--border-radius-lg) var(--border-radius-lg);
    padding:          0.75rem 1.6rem;
  }
}