* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body{
  font-family: 'Roboto Condensed', sans-serif;
  background: radial-gradient(circle at top, #111 0%, #070707 45%, #000 100%);
  color: #fff;
  text-align: center;
}

.page{
  max-width: 520px;
  margin: 0 auto;
  padding: 0 1rem 2rem;
}

.hero{
  padding: 1.25rem 1rem 1rem;
  background: rgba(0,0,0,.82);
  border-bottom: 2px solid rgba(255,215,0,.45);
  border-radius: 0 0 18px 18px;
  margin-bottom: 1rem;
}

.hero.slim{ padding: 1.25rem 1rem; }

.heroTop{
  display: flex;
  gap: .9rem;
  align-items: center;
  justify-content: center;
}

.logo{
  width: 64px;
  height: 64px;
  border-radius: 14px;
  object-fit: contain;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  padding: 6px;
}

h1, h2{
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 1px;
}

h1{
  font-size: 2.4rem;
  line-height: 1;
}

.tagline{
  color: rgba(255,255,255,.78);
  margin-top: .35rem;
  font-size: .95rem;
}

.heroPoster{
  margin-top: .9rem;
}

.poster{
  width: 100%;
  border-radius: 16px;
  border: 1px solid rgba(255,215,0,.22);
  box-shadow: 0 12px 40px rgba(0,0,0,.55);
}

.card{
  text-align: left;
  background: rgba(15,15,15,.92);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 1.1rem 1rem;
  margin: 0.9rem 0;
  box-shadow: 0 10px 25px rgba(0,0,0,.35);
}

.card h2{
  font-size: 1.55rem;
  margin-bottom: .5rem;
  text-transform: uppercase;
}

.lead{
  color: rgba(255,255,255,.86);
  line-height: 1.45;
  margin-bottom: .75rem;
}

.primary-btn{
  display: inline-flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  background: linear-gradient(180deg, #ffd86b 0%, #d4a83b 100%);
  color: #111;
  font-weight: 900;
  text-transform: uppercase;
  border: none;
  border-radius: 14px;
  padding: 0.95rem 1rem;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
  box-shadow: 0 10px 22px rgba(0,0,0,.35);
}

.primary-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(0,0,0,.45);
}

.tiny{
  margin-top: .65rem;
  font-size: .85rem;
  color: rgba(255,255,255,.70);
  line-height: 1.35;
}

.steps{
  list-style: decimal inside;
  margin: .4rem 0 .2rem;
  color: rgba(255,255,255,.88);
  line-height: 1.45;
}

.steps li + li{ margin-top: .35rem; }

.bullets{
  margin-top: .35rem;
  padding-left: 1.2rem;
  color: rgba(255,255,255,.86);
  line-height: 1.45;
}

.bullets li + li{ margin-top: .35rem; }

.note{
  margin-top: .75rem;
  padding: .75rem .85rem;
  border-radius: 14px;
  background: rgba(255,215,0,.08);
  border: 1px solid rgba(255,215,0,.18);
}

.callout{
  margin-top: .6rem;
  padding: .75rem .85rem;
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
}

.inlineLink{
  color: #ffd86b;
  text-decoration: none;
  border-bottom: 1px dashed rgba(255,216,107,.45);
}

.inlineLink:hover{
  border-bottom-color: rgba(255,216,107,.95);
}

.mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: .92em;
}

.footer{
  margin-top: 1rem;
  padding: 1rem 0 .5rem;
  color: rgba(255,255,255,.65);
  font-size: .9rem;
  text-align: center;
}