/* Human-led desktop concept. Presentation only; page copy and examples are unchanged. */

.site-header {
  position: relative;
  z-index: 10;
  background: #071321;
}
.site-header nav a { color: #d3e0ed; }

.hero {
  min-height: 0;
  isolation: isolate;
  background: #071321;
}
.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  height: 690px;
  background:
    linear-gradient(90deg, rgba(5,14,26,.52) 0%, rgba(5,14,26,.18) 48%, rgba(5,14,26,0) 75%),
    linear-gradient(0deg, #071321 0%, rgba(7,19,33,0) 24%),
    url("human-hero.png") center 44% / cover no-repeat;
}
.hero-inner {
  display: block;
  width: min(1320px, calc(100% - 120px));
  min-height: 0;
  padding: 0 0 62px;
}
.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: min(650px, 55%);
  min-height: 665px;
  padding: 68px 0 86px;
}
.hero h1 {
  max-width: 680px;
  font-size: clamp(62px, 6.1vw, 94px);
  line-height: .99;
  margin-bottom: 24px;
}
.hero h1 em { color: #8ac2fb; }
.hero h1 > span {
  font-size: .48em;
  margin-top: 24px;
  line-height: 1.06;
  color: #fff;
}
.hero-deck {
  max-width: 520px;
  color: #e0e9f4;
  font-size: 17px;
  line-height: 1.58;
  text-shadow: 0 2px 8px rgba(0,0,0,.28);
}
.hero-actions { margin-top: 31px; }
.hero-figure {
  width: min(1100px, 100%);
  height: 435px;
  margin: -8px auto 0;
  background:
    linear-gradient(90deg, rgba(93,169,255,.045) 1px, transparent 1px),
    linear-gradient(rgba(93,169,255,.045) 1px, transparent 1px),
    #0b1d32;
  background-size: 60px 60px;
  border: 1px solid rgba(157,204,253,.28);
  box-shadow: 0 32px 70px rgba(0,0,0,.37);
}
.hero-rail { color: #b4c8df; top: 130px; bottom: 610px; }
.hero-bottom { background: #0a1c30; }

.premise { padding: 105px 0 110px; }
.premise h2 { max-width: 930px; }

.chapter { min-height: 620px; }
.chapter-contract { background: #071321; }
.chapter-contract .contract-paper { background: #fff; }
.chapter-watch { background: #eef5fb; }
.chapter-stop {
  position: relative;
  isolation: isolate;
  min-height: 670px;
  overflow: hidden;
}
.chapter-stop::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 calc((100vw - 100%) / -2);
  background:
    linear-gradient(90deg, #071321 0%, rgba(7,19,33,.96) 24%, rgba(7,19,33,.68) 48%, rgba(7,19,33,.18) 80%),
    linear-gradient(0deg, #071321 0%, transparent 29%),
    url("human-pause.png") center 43% / cover no-repeat;
}
.chapter-stop .chapter-index,
.chapter-stop .chapter-body { position: relative; z-index: 1; }
.chapter-stop .chapter-body > p { color: #d3e1ef; }
.chapter-stop .stop-poster {
  position: relative;
  z-index: 1;
  width: min(100%, 420px);
  min-height: 350px;
  padding: 24px;
  background: rgba(10,39,75,.88);
  border: 1px solid rgba(151,204,255,.56);
  backdrop-filter: blur(10px);
  box-shadow: 0 27px 60px rgba(0,0,0,.28);
}
.chapter-stop .stop-symbol { font-size: 80px; margin-top: 24px; }
.chapter-stop .stop-poster > strong { font-size: 28px; }
.chapter-stop .stop-poster > p { margin-bottom: 18px; }

.decision { background: #f5f8fc; }
.after { background: #071321; }
.layers { background: #f5f8fc; }
.guide-section { background: #0a1b2d; }
.closing { background: linear-gradient(110deg, #0c3763, #15518b); }

@media (max-width: 1100px) {
  .hero-inner { width: min(900px, calc(100% - 64px)); }
  .hero-copy { width: min(610px, 70%); }
  .hero::before { background-position: 57% 45%; }
}

@media (max-width: 760px) {
  .hero::before {
    height: 600px;
    background:
      linear-gradient(0deg, #071321 0%, rgba(7,19,33,.35) 52%, rgba(7,19,33,.18) 100%),
      linear-gradient(90deg, rgba(5,14,26,.62), rgba(5,14,26,.10)),
      url("human-hero.png") 64% center / cover no-repeat;
  }
  .hero-inner { width: calc(100% - 40px); padding-bottom: 44px; }
  .hero-copy { width: 100%; min-height: 570px; justify-content: flex-end; padding: 55px 0 45px; }
  .hero h1 { font-size: clamp(51px, 13vw, 70px); }
  .hero-deck { font-size: 15px; }
  .hero-figure { width: 100%; height: 350px; margin-top: 0; }
  .chapter-stop::before {
    background:
      linear-gradient(0deg, #071321 0%, rgba(7,19,33,.90) 50%, rgba(7,19,33,.28) 100%),
      url("human-pause.png") 38% top / auto 65% no-repeat;
  }
  .chapter-stop { padding-top: 300px; }
  .chapter-stop .stop-poster { width: calc(100% - 12px); }
}