/* ============================================================
   CodingInABox — marketing.css  (RA01 design layer, 2026-08-13)
   The marketing design system: black-acrylic dark chapters,
   paper commerce bands, servo-orange accent. Linked by hand on
   marketing pages, BEFORE the stamped head marker (tokens.css /
   lms.css load after it — see verify-chrome.mjs css-order).
   Where lms.css styles the same class (.cta-cyber, .card-hover)
   the selectors here carry higher specificity on purpose.
   ============================================================ */

/* ── Design tokens (DESIGN.md palette) ─────────────────────── */
:root {
  --ink-black: #0E0E11;
  --ink-raised: #17171C;
  --paper: #F5F5F7;
  --paper-raised: #FFFFFF;
  --text-strong: #1D1D21;
  --text-body: #54545C;
  --text-inverse: #F2F2F4;
  --text-inverse-body: #A8A8B0;
  --servo: #E8622C;
  --servo-deep: #C64E1F;
  --board-blue: #3D6FA5;
  --line-dark: #2A2A31;
  --line-light: #D9D9DE;
  --font-display: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
}

::selection { background: var(--servo); color: var(--text-inverse); }

/* ── Section rhythm ────────────────────────────────────────── */
.section { padding-block: var(--section-pad, clamp(4rem, 9vw, 7rem)); }
.section-inner {
  max-width: var(--content-max, 1200px);
  margin-inline: auto;
}

/* ── Section bands: the "two gears" ────────────────────────── */
.band-dark { background: var(--ink-black); color: var(--text-inverse); }
.band-paper { background: var(--paper); color: var(--text-strong); }

/* ── Type scale ────────────────────────────────────────────── */
.hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
  font-weight: 600;
}
.section-title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.4vw, 2.25rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  font-weight: 600;
}
.lead {
  font-size: var(--fs-lead, 1.125rem);
  line-height: 1.55;
}
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
}

/* ── Heading accent: solid servo bar, no gradient ──────────── */
.heading-accent {
  color: inherit;
  text-shadow: none;
  position: relative;
  padding-bottom: 0.75rem;
}
.heading-accent::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 2.5rem;
  height: 2px;
  border-radius: 1px;
  background: var(--servo);
}
/* Centered headings (self-centered or centered by parent). */
.heading-accent.text-center::after,
.text-center .heading-accent::after {
  left: 50%;
  transform: translateX(-50%);
}

/* ── Primary CTA: the orange pill ──────────────────────────
   Same class name the old cyber CTA used, so every existing page
   keeps working. a/button-qualified so it outranks the legacy
   .cta-cyber gradient in lms.css, which loads after this file. */
a.cta-cyber, button.cta-cyber, .cta-cyber.cta-cyber {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: var(--servo);
  background-image: none;
  color: #FFF7F2;
  border-radius: 980px;
  font-weight: 600;
  box-shadow: none;
  text-shadow: none;
  transition: background-color .2s ease, transform .2s ease;
}
a.cta-cyber:hover, button.cta-cyber:hover, .cta-cyber.cta-cyber:hover {
  background: var(--servo-deep);
  background-image: none;
  transform: translateY(-1px);
  box-shadow: none;
}
a.cta-cyber:active, button.cta-cyber:active, .cta-cyber.cta-cyber:active { transform: translateY(0); }

/* ── Quiet secondary actions ───────────────────────────────── */
.btn-quiet-dark {
  display: inline-flex; align-items: center; gap: .5rem;
  color: var(--text-inverse); font-weight: 500;
  padding: .8rem .25rem;
}
.btn-quiet-dark svg { transition: transform .2s ease; }
.btn-quiet-dark:hover svg { transform: translateX(3px); }
.btn-outline-light {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border: 1px solid var(--line-light); color: var(--text-strong);
  border-radius: 980px; font-weight: 600;
  padding: .75rem 1.6rem;
  transition: border-color .2s ease;
}
.btn-outline-light:hover { border-color: var(--text-strong); }

/* ── Cards ─────────────────────────────────────────────────── */
.card-dark {
  background: var(--ink-raised);
  border: 1px solid var(--line-dark);
  border-radius: 12px;
}
.card-paper {
  background: var(--paper-raised);
  border: 1px solid var(--line-light);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(29, 29, 33, 0.06);
}

/* ── Card hover (shift-free lift, no glow) ─────────────────── */
.card-hover {
  transition: transform .2s ease, border-color .2s ease, box-shadow .3s ease;
}
.card-hover:hover {
  transform: translateY(-4px);
  border-color: var(--text-inverse-body);
  box-shadow: 0 12px 40px rgba(14, 14, 17, 0.45);
}

/* ── Marketing chrome: nav ─────────────────────────────────── */
.mk-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: rgba(14, 14, 17, 0.72);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-dark);
}
.mk-link {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-inverse-body);
  transition: color .2s ease;
}
.mk-link:hover { color: var(--text-inverse); }
.mk-link-active {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-inverse);
}

/* ── Marketing chrome: footer ──────────────────────────────── */
.mk-footer {
  background: var(--ink-black);
  border-top: 1px solid var(--line-dark);
  color: var(--text-inverse-body);
}
.mk-footer a { transition: color .2s ease; }

/* ── Hero video scrim ──────────────────────────────────────── */
.hero-scrim {
  background:
    linear-gradient(90deg, rgba(14,14,17,0.96) 0%, rgba(14,14,17,0.82) 28%, rgba(14,14,17,0.28) 58%, rgba(14,14,17,0.35) 100%),
    linear-gradient(0deg, rgba(14,14,17,0.92) 0%, rgba(14,14,17,0) 32%);
}
@media (max-width: 767px) {
  .hero-scrim {
    background:
      linear-gradient(0deg, rgba(14,14,17,0.96) 8%, rgba(14,14,17,0.62) 45%, rgba(14,14,17,0.35) 100%);
  }
}

/* ── Curriculum rail (scrollbar hidden, snap in markup) ────── */
.rail { scrollbar-width: none; -ms-overflow-style: none; }
.rail::-webkit-scrollbar { display: none; }

/* ── Code snippet colors (board blue = code labels only) ───── */
.code-comment { color: #6B6B75; }
.code-key { color: var(--board-blue); }

/* ── Scroll reveal (hidden state scoped to html.js so no-JS
      visitors always see the content) ───────────────────────── */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
}
html.js [data-reveal].revealed {
  opacity: 1;
  transform: none;
  transition: opacity .6s ease, transform .6s ease;
}
html.js [data-reveal-delay="1"].revealed { transition-delay: .1s; }
html.js [data-reveal-delay="2"].revealed { transition-delay: .2s; }
html.js [data-reveal-delay="3"].revealed { transition-delay: .3s; }

/* ── Icon sizing utils ─────────────────────────────────────── */
.icon-sm { font-size: 18px; }
.icon-md { font-size: 24px; }

/* ── Reduced motion: show everything, kill transforms ──────── */
@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal],
  html.js [data-reveal].revealed {
    opacity: 1;
    transform: none;
    transition: none;
  }
  a.cta-cyber, button.cta-cyber, .cta-cyber.cta-cyber, .card-hover, .btn-quiet-dark svg { transition: none; }
  a.cta-cyber:hover, button.cta-cyber:hover, .cta-cyber.cta-cyber:hover,
  a.cta-cyber:active, button.cta-cyber:active, .cta-cyber.cta-cyber:active,
  .card-hover:hover { transform: none; }
  .btn-quiet-dark:hover svg { transform: none; }
}

/* ── Form fields ────────────────────────────────────────────
   lms.css styles every input/textarea/select with !important and
   loads after this file, so marketing forms need the same weight to
   sit correctly on their band. Paper bands get light fields, dark
   bands get raised-ink fields; both take the servo focus ring rather
   than the legacy cyan one. */
.band-paper input,
.band-paper textarea,
.band-paper select {
  background: var(--paper-raised) !important;
  border: 1px solid var(--line-light) !important;
  color: var(--text-strong) !important;
}
.band-paper input::placeholder,
.band-paper textarea::placeholder { color: var(--text-body) !important; opacity: .65; }

.band-dark input,
.band-dark textarea,
.band-dark select {
  background: var(--ink-raised) !important;
  border: 1px solid var(--line-dark) !important;
  color: var(--text-inverse) !important;
}
.band-dark input::placeholder,
.band-dark textarea::placeholder { color: var(--text-inverse-body) !important; opacity: .8; }

.band-paper input:focus, .band-paper textarea:focus, .band-paper select:focus,
.band-dark input:focus, .band-dark textarea:focus, .band-dark select:focus {
  border-color: var(--servo) !important;
  box-shadow: 0 0 0 3px rgba(232, 98, 44, .18) !important;
  outline: none;
}