/* Sam's brand family: orange,
midnight navy,
and warm white. */
:root {
  --ink: #0b1c2a;
  --muted: #59656e;
  --orange: #ff601f;
  --paper: #fffaf1;
  --line: #e5dfd5;
  --cream: #fff7e8;
}
::selection {
  background: #ff601f;
  color: #0b1c2a;
}
header {
  background: #0b1c2af2;
  color: var(--cream);
  border-bottom-color: #ffffff15;
  min-height: 72px;
}
header .brand img {
  width: 106px;
  height: auto;
}
.nav-cta {
  border-color: #fff7e855;
  transition:
    background 0.2s,
    border-color 0.2s;
}
.nav-cta:hover {
  background: #ff601f;
  border-color: #ff601f;
  color: var(--ink);
}
nav a:hover {
  color: #ff9668;
}
.hero {
  color: var(--cream);
  background: radial-gradient(ellipse at 50% 49%, #19323e 0%, #102531 36%, #0b1c2a 74%);
  padding-top: 110px;
}
.intro-subtitle,
.hero .play-hint,
.hero .scroll {
  color: #bdc7cb;
}
.hero-description {
  color: #e6e5df;
}
.sam-replay-row button {
  color: var(--cream);
  min-height: 36px;
}
.terminal-ground {
  background: radial-gradient(ellipse, #e5e0ce21 0%, #d3dfda0c 42%, transparent 70%);
}
.terminal-shadow {
  background: radial-gradient(ellipse, #00000080, transparent 68%);
}
.hero a:focus-visible,
.hero button:focus-visible,
header a:focus-visible,
footer a:focus-visible,
.philosophy a:focus-visible {
  outline-color: #ff9668;
}
.hero .scroll span {
  color: #ff9668;
}
.handoff h2 span {
  color: #6a757b;
}
.number,
.choice.active span {
  color: #b54416;
}
.choice.active {
  background: #f4e8d8;
}
.choice:hover:not(.active) {
  background: #f8f0e4;
}
.sam-response {
  border-color: var(--line);
  box-shadow: 0 18px 65px #0b1c2a09;
}
.sam-symbol {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
}
.example-badge {
  background: #f4efe7;
}
.context-button:hover {
  background: #183a4b;
}
.context-quote {
  background: #fff0e4;
}
.philosophy {
  background: var(--ink);
  color: var(--cream);
}
.philosophy h2 em {
  color: #ff9668;
}
.philosophy .section-index,
.philosophy p {
  color: #bdc7cb;
}
.button.light {
  background: var(--cream);
}
.button.light:hover {
  color: var(--ink);
}
footer {
  background: var(--ink);
  color: var(--cream);
  border-top: 1px solid #ffffff18;
  padding-top: 38px;
  padding-bottom: 38px;
}
footer .brand img {
  width: 156px;
  height: auto;
}
footer p,
footer > span {
  color: #bdc7cb;
}
@media (max-width: 760px) {
  header .brand img {
    width: 96px;
  }
  .hero {
    padding-top: 116px;
  }
  .nav-cta {
    padding: 10px 17px;
  }
  footer .brand img {
    width: 132px;
  }
}