/* Untilted visual concept. This stylesheet changes presentation only. */
:root {
  --bg: #071321;
  --ink: #f7fbff;
  --blue: #71b8ff;
  --line: rgba(180, 209, 240, .16);
}

body { background: #071321; }
.wrap { width: min(1240px, calc(100% - 96px)); }

.site-header {
  height: 78px;
  padding: 0 max(48px, calc((100vw - 1320px) / 2));
  border-bottom: 1px solid rgba(255,255,255,.10);
  background: #071321;
}
.brand strong { font-size: 22px; font-weight: 800; letter-spacing: -.065em; }
.brand span { opacity: .65; }
.site-header nav { gap: 30px; }
.site-header nav a { font-size: 13px; color: #c0d1e2; }
.header-cta, .action {
  border-radius: 999px;
  background: #74baff;
  color: #061527;
  box-shadow: 0 12px 32px rgba(74, 157, 255, .18);
}
.header-cta { padding: 13px 20px; font-size: 12px; }
.header-exit { display: none; }

.hero {
  min-height: 740px;
  background: radial-gradient(circle at 76% 38%, #173d68 0, #0b223b 27%, #071321 65%);
}
.hero:after { display: none; }
.hero-rail { opacity: .55; }
.hero-inner {
  width: min(1320px, calc(100% - 120px));
  min-height: 682px;
  grid-template-columns: 43% 57%;
  gap: 26px;
}
.hero-copy { padding: 80px 10px 88px 0; }
.eyebrow { font-size: 11px; color: #a7d2fc; letter-spacing: .16em; }
.hero h1 {
  font-size: clamp(65px, 6.25vw, 104px);
  line-height: .96;
  letter-spacing: -.078em;
  margin-bottom: 32px;
}
.hero h1 em { color: #7ec0ff; }
.hero h1 > span {
  font-size: .44em;
  line-height: 1.07;
  margin-top: 24px;
  color: #f7fbff;
  font-weight: 650;
}
.hero-deck { max-width: 440px; font-size: 17px; line-height: 1.64; color: #c4d7eb; }
.hero-actions { gap: 24px; margin-top: 35px; }
.action { padding: 17px 24px; font-size: 13px; }
.quiet-link { font-size: 12px; }
.hero-figure {
  height: 500px;
  margin-left: 0;
  clip-path: none;
  border-radius: 28px;
  border: 1px solid rgba(172,213,255,.30);
  background:
    linear-gradient(90deg,rgba(117,186,255,.045) 1px,transparent 1px),
    linear-gradient(rgba(117,186,255,.045) 1px,transparent 1px),
    linear-gradient(145deg,#0b2038,#071827 70%);
  background-size: 56px 56px, 56px 56px, auto;
  box-shadow: 0 35px 75px rgba(0,0,0,.3), 0 0 70px rgba(53,142,246,.10);
}
.chart-label { left: 34px; top: 30px; color: #b6d4f2; }
.chart-grid { inset: 85px 30px 55px 32px; }
.hero-stamp {
  right: 5%; top: 7%; transform: none;
  border-radius: 17px;
  padding: 15px 18px;
  background: rgba(19,44,70,.86);
  box-shadow: 0 16px 35px rgba(0,0,0,.23);
}
.hero-stamp strong { font-size: 25px; }
.hero-bottom {
  height: 58px;
  color: #bdd5ed;
  background: rgba(4,15,27,.55);
  font-size: 10px;
}

.premise {
  padding: 118px 0 126px;
  border: 0;
  background: #f4f8fc;
  color: #102034;
}
.premise-layout { grid-template-columns: 22% 78%; }
.premise .section-code { color: #2677c3; }
.premise h2 { max-width: 850px; font-size: clamp(52px, 5vw, 80px); letter-spacing: -.075em; }
.premise h2 em { color: #287ac7; }
.premise-layout > div > p { color: #50647c; font-size: 18px; max-width: 620px; }

.chapters { padding-top: 0; padding-bottom: 0; }
.chapter {
  min-height: 650px;
  padding: 100px 0;
  border-bottom: 1px solid rgba(144,187,228,.15);
  grid-template-columns: 13% 40% 47%;
}
.chapter:nth-child(2) {
  position: relative;
  background: #eef5fb;
  color: #0d2036;
  box-shadow: 0 0 0 100vmax #eef5fb;
  clip-path: inset(0 -100vmax);
}
.chapter:nth-child(2) .chapter-index span:first-child,
.chapter:nth-child(2) .chapter-body h2,
.chapter:nth-child(2) .chapter-detail strong { color: #0d2036; }
.chapter:nth-child(2) .chapter-body > p { color: #52667b; }
.chapter:nth-child(2) .chapter-index { color: #2778c3; }
.chapter-index span:first-child { font-size: 42px; font-weight: 650; }
.chapter-body { padding-right: 60px; }
.chapter-body h2 { font-size: clamp(42px, 3.6vw, 60px); line-height: 1.03; }
.chapter-body > p { font-size: 16px; line-height: 1.7; }
.chapter-detail { margin-top: 30px; border-left-width: 3px; }
.chapter-detail strong { font-size: 14px; }
.contract-paper, .signal-board, .stop-poster {
  border-radius: 23px;
  transform: none;
  box-shadow: 0 30px 65px rgba(0,0,0,.20);
}
.contract-paper { background: #fff; padding: 32px 36px 38px; }
.signal-board { background: #fff; color: #132741; border-color: #c6d9ed; }
.signal-top { color: #526d89; }
.signal-row { border-top-color: #e2ebf4; }
.signal-row p small { color: #61758b; }
.signal-caption { color: #657d94; }
.stop-poster { background: linear-gradient(145deg,#1b5b9c,#0e2e59); border-color: #579dec; }

.decision { background: #f4f8fc; color: #102034; border: 0; }
.decision-head > p { color: #576c83; }
.decision-layout { border-color: #bdd2e8; border-radius: 26px; overflow: hidden; }
.scenario-list { border-color: #bdd2e8; }
.scenario-list button { color: #536b84; border-color: #d6e3f0; }
.scenario-list button.active { color: #fff; background: #1c5f9f; }
.scenario-list button:hover { background: #dbeaf8; color: #102034; }
.scenario-list button.active:hover { background: #1c5f9f; color: #fff; }
.response-panel { background: #071e36; }

.after { padding-block: 130px; }
.layers { background: #f4f8fc; color: #102034; border: 0; }
.layer-row { border-color: #c8d8e8; }
.layer-row:last-of-type { border-color: #c8d8e8; }
.layer-row p, .layer-note { color: #52667b; }
.guide-section { background: #0a1d33; }
.guide-preview { border-radius: 22px; overflow: hidden; box-shadow: 0 30px 70px rgba(0,0,0,.27); }
.closing { background: linear-gradient(120deg,#154a81,#0b2a50); }

@media (max-width: 1100px) {
  .hero-inner { grid-template-columns: 1fr; width: min(760px, calc(100% - 64px)); padding-bottom: 80px; }
  .hero-copy { padding-bottom: 0; }
  .hero-figure { margin: 0; }
  .chapter { grid-template-columns: 12% 42% 46%; }
  .chapter-body { padding-right: 30px; }
}
@media (max-width: 760px) {
  .wrap { width: calc(100% - 40px); }
  .site-header { height: 70px; padding: 0 20px; }
  .hero-inner { width: calc(100% - 40px); padding-bottom: 45px; }
  .hero-copy { padding-top: 72px; }
  .hero h1 { font-size: clamp(54px, 13vw, 76px); }
  .hero-deck { font-size: 15px; }
  .hero-figure { height: 370px; border-radius: 20px; }
  .hero-stamp { top: 8%; right: 5%; }
  .premise { padding: 85px 0; }
  .premise h2 { font-size: 43px; }
  .premise-layout > div > p { font-size: 15px; }
  .chapter { min-height: 0; padding: 75px 0; }
  .chapter-body h2 { font-size: 42px; }
  .chapter-body > p { font-size: 15px; }
  .contract-paper, .signal-board, .stop-poster { border-radius: 18px; }
}