* { margin: 0; padding: 0; box-sizing: border-box }
:root {
  --bg: #111219;
  --ink: #f4f3ef;        
  --body: #b9b8b2;       
  --dim: #77767f;        
  --accent: #9260e5;
  --line: #26272f;       
  --serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', serif;
  --mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
}
html { scroll-behavior: smooth }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  color: var(--body); line-height: 1.75; font-size: 15.5px; background: var(--bg);
}
a { color: var(--ink); text-decoration: none }
a:hover { color: #fff }
::selection { background: rgba(146, 96, 229, 0.35); color: #fff }

.topbar { border-bottom: 1px solid var(--line); background: var(--bg); position: sticky; top: 0; z-index: 5 }
.topbar-in { max-width: 54rem; margin: 0 auto; padding: 16px 22px; display: flex; align-items: center }
.logo { font-weight: 800; letter-spacing: -0.02em; font-size: 17px; color: var(--ink) }
.logo .dot { color: var(--accent) }
.logo small { font-weight: 500; color: var(--dim); font-size: 12px; margin-left: 8px; letter-spacing: .04em }
.back { margin-left: auto; font-size: 13px; color: var(--dim) }
.back:hover { color: var(--ink) }

.doc { max-width: 54rem; margin: 0 auto; padding: 84px 22px 90px }
.eyebrow { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; color: var(--dim) }
.eyebrow::after { content: ''; display: block; width: 44px; height: 1px; background: var(--accent); margin-top: 14px }
.chip {
  display: inline-block; font-family: var(--mono); font-size: 9px; font-weight: 600; letter-spacing: .18em;
  border: 1px solid var(--accent); color: var(--accent); border-radius: 3px;
  padding: 2px 8px; vertical-align: 2px; margin-left: 12px;
}
.hero { max-width: 46rem }
h1 {
  font-family: var(--serif); font-weight: 500; font-size: 54px; line-height: 1.08;
  letter-spacing: -0.015em; color: var(--ink); margin: 26px 0 24px;
}
h1 .glow { color: var(--ink); font-style: italic }
.lead { font-size: 17.5px; color: var(--body); max-width: 42rem }
.lead b { color: var(--ink); font-weight: 600 }
.lead i { color: #d8d7d0; font-family: var(--serif); font-size: 18.5px }
.cta-row { display: flex; gap: 14px; margin: 34px 0 8px; flex-wrap: wrap; align-items: center }
.cta {
  display: inline-block; background: var(--ink); color: #14151c;
  font-weight: 650; font-size: 14.5px; border-radius: 3px; padding: 14px 28px;
  letter-spacing: .01em; transition: background .15s;
}
.cta:hover { background: #fff; color: #14151c }
.ghost {
  display: inline-block; color: var(--ink); font-weight: 500; font-size: 14.5px;
  border-bottom: 1px solid var(--dim); padding: 2px 1px; border-radius: 0;
}
.ghost:hover { border-bottom-color: var(--ink) }

.shot {
  width: 100%; border-radius: 4px; margin: 64px 0 12px; display: block;
  border: 1px solid var(--line);
}
.caption { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); margin-bottom: 64px }

.cols { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0; margin: 10px 0 56px; border-top: 1px solid var(--line) }
@media (max-width: 720px) { .cols { grid-template-columns: 1fr } h1 { font-size: 38px } }
.col { padding: 28px 26px 30px 0; border-right: 1px solid transparent }
.col + .col { padding-left: 26px; border-left: 1px solid var(--line) }
@media (max-width: 720px) { .col + .col { border-left: 0; padding-left: 0; border-top: 1px solid var(--line) } .col { padding-right: 0 } }
.col .n { font-family: var(--mono); font-size: 11px; color: var(--accent); letter-spacing: .22em; margin-bottom: 14px }
h2 { font-family: var(--serif); font-weight: 500; font-size: 21px; color: var(--ink); letter-spacing: -0.005em; margin-bottom: 10px }
.col p, .rules li { font-size: 14px; color: var(--body); line-height: 1.7 }

.rules { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 30px 0 34px; margin: 0 0 56px }
.rules h2 { margin-bottom: 6px }
.rules ul { margin: 12px 0 0; list-style: none }
.rules li { margin: 10px 0; padding-left: 22px; position: relative }
.rules li::before { content: '—'; position: absolute; left: 0; color: var(--accent) }
.rules li b { color: var(--ink) }

.foot-cta { text-align: left; padding: 0 0 56px; margin: 0 }
.foot-cta h2 { font-size: 30px }
.foot-cta p { color: var(--body); margin: 10px 0 26px; max-width: 36rem }

.foot { border-top: 1px solid var(--line); padding-top: 22px; font-size: 12.5px; color: var(--dim); display: flex; gap: 24px; flex-wrap: wrap }
.foot a { color: var(--dim) }
.foot a:hover { color: var(--ink) }