/* Shared Not Rented cinematic layer for the ChatbotX guide pages. */
.site-header {
  border-bottom-color: var(--muted);
  background: var(--fg);
  color: var(--bg);
}

.site-header a,
.site-header .progress-copy {
  color: var(--bg);
}

.site-header .wordmark b {
  background: var(--accent);
  color: var(--fg);
}

.site-header .progress-track {
  background: var(--muted);
}

.site-header .progress-fill {
  background: var(--bg);
}

.site-header .primary-nav a {
  position: relative;
  color: var(--bg);
}

.site-header .primary-nav a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 7px;
  left: 0;
  height: 2px;
  background: var(--bg);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .15s cubic-bezier(.2, 0, 0, 1);
}

.site-header .primary-nav a:hover {
  text-decoration: none;
}

.site-header .primary-nav a:hover::after,
.site-header .primary-nav a[aria-current="location"]::after {
  transform: scaleX(1);
}

.reader-mode-bar {
  border-bottom-color: var(--muted);
  background: var(--fg);
  color: var(--bg);
}

.reader-mode-copy,
.reader-mode-copy strong {
  color: var(--bg);
}

.reader-mode-bar .button {
  border-color: var(--bg);
  background: var(--fg);
  color: var(--bg);
}

.reader-mode-bar .button:hover {
  background: var(--bg);
  color: var(--fg);
}

#top {
  position: relative;
}

.hero {
  min-height: min(860px, calc(100vh - var(--header)));
  grid-template-columns: minmax(0, 1.05fr) minmax(380px, .95fr);
  grid-template-rows: auto auto;
  gap: clamp(48px, 7vw, 96px);
  background: var(--fg);
  color: var(--bg);
  box-shadow: 0 0 0 100vmax var(--fg);
  clip-path: inset(0 -100vmax);
}

.hero::before {
  position: relative;
  inset: auto;
  z-index: auto;
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  aspect-ratio: 1;
  background: transparent url("../notrented.webp") center / contain no-repeat;
  border-radius: 0;
  opacity: .38;
  filter: grayscale(1) contrast(1.15);
  pointer-events: none;
}

.hero-copy {
  grid-column: 1;
  grid-row: 1;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--bg);
  box-shadow: none;
  animation: cinematic-title-in .72s .08s cubic-bezier(.2, 0, 0, 1) both;
}

.hero h1,
.hero .hero-deck {
  color: var(--bg);
}

.hero .hero-note {
  color: var(--border);
}

.hero .stamp {
  border: 1px solid var(--muted);
  background: var(--fg);
  color: var(--border);
  transform: none;
}

.hero-actions > a:not(.button) {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--bg);
}

.hero-actions .button-primary:hover {
  border-color: var(--bg);
  background: var(--bg);
  color: var(--fg);
}

.hero .terminal {
  grid-column: 1 / -1;
  grid-row: 2;
  width: 100%;
  min-height: 0;
  background: var(--fg);
  border-color: var(--muted);
  box-shadow: none;
  animation: cinematic-frame-in .82s .16s cubic-bezier(.2, 0, 0, 1) both;
}

.ownership-manifesto {
  margin-top: 104px;
  box-shadow: none;
}

.section-head,
.build-header {
  position: relative;
}

.section-label,
.chapter-kicker,
.readiness-meta,
.micro-label,
.terminal-head,
.code-toolbar span {
  letter-spacing: .09em;
}

.chapter-number {
  color: var(--muted);
  font-size: clamp(5rem, 11vw, 9rem);
}

#step-1,
#step-3,
#step-5,
#step-7,
#step-9 {
  border-top-color: var(--muted);
  background: var(--fg);
  color: var(--bg);
  box-shadow: 0 0 0 100vmax var(--fg);
  clip-path: inset(0 -100vmax);
}

#step-1 h2, #step-1 h3,
#step-3 h2, #step-3 h3,
#step-5 h2, #step-5 h3,
#step-7 h2, #step-7 h3,
#step-9 h2, #step-9 h3,
#step-1 p, #step-1 li,
#step-3 p, #step-3 li,
#step-5 p, #step-5 li,
#step-7 p, #step-7 li,
#step-9 p, #step-9 li {
  color: var(--bg);
}

#step-1 .chapter-kicker, #step-1 .chapter-number,
#step-3 .chapter-kicker, #step-3 .chapter-number,
#step-5 .chapter-kicker, #step-5 .chapter-number,
#step-7 .chapter-kicker, #step-7 .chapter-number,
#step-9 .chapter-kicker, #step-9 .chapter-number {
  color: var(--border);
}

#step-1 .chapter-kicker span,
#step-3 .chapter-kicker span,
#step-5 .chapter-kicker span,
#step-7 .chapter-kicker span,
#step-9 .chapter-kicker span {
  border-color: var(--muted);
}

#step-1 .note, #step-1 .route-list li,
#step-3 .note, #step-3 .route-list li,
#step-5 .note, #step-5 .route-list li,
#step-7 .note, #step-7 .route-list li,
#step-9 .note, #step-9 .route-list li,
#step-1 .beginner-rundown, #step-1 .beginner-item, #step-1 .service-cta,
#step-3 .beginner-rundown, #step-3 .beginner-item, #step-3 .service-cta,
#step-5 .beginner-rundown, #step-5 .beginner-item, #step-5 .service-cta,
#step-7 .beginner-rundown, #step-7 .beginner-item, #step-7 .service-cta,
#step-9 .beginner-rundown, #step-9 .beginner-item, #step-9 .service-cta {
  border-color: var(--muted);
  background: var(--fg);
  color: var(--bg);
  box-shadow: none;
}

#step-1 .beginner-summary, #step-1 .beginner-next, #step-1 .service-cta p,
#step-3 .beginner-summary, #step-3 .beginner-next, #step-3 .service-cta p,
#step-5 .beginner-summary, #step-5 .beginner-next, #step-5 .service-cta p,
#step-7 .beginner-summary, #step-7 .beginner-next, #step-7 .service-cta p,
#step-9 .beginner-summary, #step-9 .beginner-next, #step-9 .service-cta p {
  color: var(--border) !important;
}

#step-1 .beginner-item p, #step-1 .beginner-term, #step-1 .beginner-item strong,
#step-3 .beginner-item p, #step-3 .beginner-term, #step-3 .beginner-item strong,
#step-5 .beginner-item p, #step-5 .beginner-term, #step-5 .beginner-item strong,
#step-7 .beginner-item p, #step-7 .beginner-term, #step-7 .beginner-item strong,
#step-9 .beginner-item p, #step-9 .beginner-term, #step-9 .beginner-item strong {
  color: var(--bg) !important;
}

#step-1 .step-complete,
#step-3 .step-complete,
#step-5 .step-complete,
#step-7 .step-complete,
#step-9 .step-complete {
  border-color: var(--bg);
  color: var(--bg);
}

#step-1 .step-complete input,
#step-3 .step-complete input,
#step-5 .step-complete input,
#step-7 .step-complete input,
#step-9 .step-complete input {
  accent-color: var(--bg);
}

#step-1 .step-complete:has(input:checked),
#step-3 .step-complete:has(input:checked),
#step-5 .step-complete:has(input:checked),
#step-7 .step-complete:has(input:checked),
#step-9 .step-complete:has(input:checked) {
  background: var(--bg);
  color: var(--fg);
}

#step-1 .step-complete:has(input:checked) input,
#step-3 .step-complete:has(input:checked) input,
#step-5 .step-complete:has(input:checked) input,
#step-7 .step-complete:has(input:checked) input,
#step-9 .step-complete:has(input:checked) input {
  accent-color: var(--fg);
}

#step-1 .service-button,
#step-3 .service-button,
#step-5 .service-button,
#step-7 .service-button,
#step-9 .service-button {
  border-color: var(--bg);
  background: var(--bg);
  color: var(--fg);
}

#step-1 .service-button:hover,
#step-3 .service-button:hover,
#step-5 .service-button:hover,
#step-7 .service-button:hover,
#step-9 .service-button:hover {
  background: var(--fg);
  color: var(--bg);
}

.cinematic-ready .cinematic-reveal {
  opacity: 0;
  transform: translateY(24px);
}

.cinematic-ready .cinematic-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .32s cubic-bezier(.2, 0, 0, 1), transform .32s cubic-bezier(.2, 0, 0, 1);
}

@keyframes cinematic-title-in {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes cinematic-frame-in {
  from { opacity: 0; clip-path: inset(0 0 100% 0); transform: scale(1.02); }
  to { opacity: 1; clip-path: inset(0); transform: scale(1); }
}

@media (max-width: 960px) {
  .hero {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }

  .hero::before {
    grid-column: 1;
    grid-row: 2;
    width: min(100%, 600px);
    justify-self: center;
    opacity: .32;
  }

  .hero .terminal {
    grid-row: 3;
  }
}

@media (max-width: 700px) {
  .hero {
    gap: 40px;
    padding: 48px 0 56px;
  }

  .ownership-manifesto {
    margin-top: 72px;
  }
}

@media (max-width: 430px) {
  .data-table-wrap td {
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-copy,
  .hero .terminal,
  .cinematic-ready .cinematic-reveal {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .site-header .primary-nav a::after {
    transition: none;
  }
}