/* Saturn: black, Saturn red #ff3b1f, Inter Tight heavy headlines, JetBrains Mono numbers. */
:root { --bg: #050505; --s1: #0e0e0e; --s2: #171717; --line: rgba(255,255,255,.09); --text: #f4f4f2; --muted: rgba(244,244,242,.58); --accent: #ff3b1f; --up: #2fd68a; --down: #ff5468; --font: "Inter Tight", Inter, Arial, sans-serif; --mono: "JetBrains Mono", ui-monospace, monospace; --wrap: 1180px; --g: clamp(20px, 4vw, 40px) }
* { box-sizing: border-box; margin: 0; padding: 0 }
html { background: var(--bg); color-scheme: dark; scroll-behavior: smooth; scrollbar-color: rgba(255,255,255,.18) transparent; scrollbar-width: thin }
body { background: var(--bg); color: var(--text); font: 16px/1.55 var(--font); -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; min-height: 100vh; display: flex; flex-direction: column }
main { flex: 1 } a { color: inherit; text-decoration: none } img { display: block; max-width: 100% } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer } em { font-style: normal }
::-webkit-scrollbar { width: 8px } ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: 999px } ::-webkit-scrollbar-thumb:hover { background: rgba(255,59,31,.6) }
.wrap { width: 100%; max-width: calc(var(--wrap) + var(--g) * 2); margin: 0 auto; padding-inline: var(--g) }
.muted { color: var(--muted) } .up { color: var(--up) } .down { color: var(--down) } .mono { font-family: var(--mono) } .red { color: var(--accent) }
.btn { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 22px; border-radius: 999px; font-weight: 600; font-size: 15px; white-space: nowrap; transition: opacity .15s, background .15s }
.btn.red { background: var(--accent); color: #fff } .btn.red:hover { opacity: .9 }
.btn.ghost { border: 1px solid rgba(255,255,255,.28) } .btn.ghost:hover { background: rgba(255,255,255,.07) }
.btn.big { height: 54px; padding: 0 30px; font-size: 16px }

.bar { position: absolute; top: 0; left: 0; right: 0; z-index: 20 }
.bar .wrap { height: 76px; display: flex; align-items: center; gap: 34px }
.brand { display: inline-flex; align-items: center; gap: 10px; font: 700 21px var(--font); letter-spacing: -.035em } .brand img { width: 30px; height: 30px }
.bar nav { display: flex; gap: 28px; margin-left: auto; font-size: 15px; color: rgba(244,244,242,.72) } .bar nav a:hover, .bar nav a.on { color: #fff }
.solidbar { position: sticky; background: rgba(5,5,5,.86); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line) }

.hero { position: relative; isolation: isolate; min-height: min(100vh, 980px); display: flex; align-items: flex-end; overflow: hidden }
.hero picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; z-index: -2 }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, var(--bg) 2%, rgba(5,5,5,.55) 34%, rgba(5,5,5,.1) 62%, rgba(5,5,5,.5) 100%) }
.hero .wrap { padding-block: 0 88px; text-align: center; display: flex; flex-direction: column; align-items: center }
.hero h1 { font: 800 clamp(48px, 8vw, 112px)/.95 var(--font); letter-spacing: -.035em; max-width: 9.5em; text-wrap: balance }
.hero h1 .red { display: block }
.hero .lead { margin-top: 24px; font-size: clamp(17px, 1.6vw, 20px); color: rgba(244,244,242,.8); max-width: 33em }
.ctas { display: flex; gap: 12px; margin-top: 34px; flex-wrap: wrap; justify-content: center }
.ca { margin-top: 20px; display: inline-flex; gap: 12px; align-items: center; height: 38px; padding: 0 18px; border-radius: 999px; background: rgba(14,14,14,.75); border: 1px solid var(--line); font: 13px var(--mono); color: var(--muted); cursor: pointer } .ca b { color: var(--accent); font-weight: 500 }

.nums { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line) }
.nums div { padding: 36px 0; text-align: center } .nums div + div { border-left: 1px solid var(--line) }
.nums b { display: block; font: 700 clamp(38px, 4.6vw, 64px)/1 var(--font); letter-spacing: -.045em } .nums span { display: block; margin-top: 10px; color: var(--muted); font-size: 14px }

section.s { padding-block: clamp(72px, 9vw, 120px); border-bottom: 1px solid var(--line) }
.s h2 { font: 800 clamp(34px, 4.4vw, 60px)/1 var(--font); letter-spacing: -.035em; max-width: 13em; text-wrap: balance }
.s .intro { margin-top: 18px; color: var(--muted); font-size: 18px; max-width: 36em }
.two { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 90px); align-items: center }

/* an order ticket drawn like the app, with its status timeline */
.tkt { background: var(--s1); border: 1px solid var(--line); border-radius: 18px; padding: 24px; font-size: 15px }
.tkt .h { display: flex; align-items: center; gap: 12px } .tkt .h img { width: 38px; height: 38px; border-radius: 50%; background: var(--s2) } .tkt .h b { font-size: 19px; font-weight: 700 } .tkt .h small { display: block; color: var(--muted); font-size: 13px }
.tkt .h .side { margin-left: auto; padding: 5px 12px; border-radius: 999px; background: rgba(47,214,138,.14); color: var(--up); font-weight: 600; font-size: 13px }
.tkt dl { display: grid; grid-template-columns: 1fr auto; gap: 10px 16px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line) } .tkt dt { color: var(--muted) } .tkt dd { font-family: var(--mono); text-align: right }
.tl { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); display: grid; gap: 14px }
.tl div { display: grid; grid-template-columns: 18px 1fr auto; gap: 12px; align-items: center } .tl i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--accent) } .tl i.f { background: var(--accent) } .tl span { color: var(--muted); font: 13px var(--mono) }

table.memes { width: 100%; border-collapse: collapse; margin-top: 40px; font-size: 15px }
table.memes th { text-align: right; font-weight: 400; font-size: 13px; color: var(--muted); padding: 0 0 12px } table.memes th:first-child, table.memes td:first-child { text-align: left }
table.memes td { text-align: right; padding: 14px 0; border-top: 1px solid var(--line); font-family: var(--mono); white-space: nowrap } table.memes td + td, table.memes th + th { padding-left: 18px }
.coin { display: flex; align-items: center; gap: 12px; font-family: var(--font) } .coin img { width: 30px; height: 30px; border-radius: 50%; background: var(--s2) } .coin b { font-weight: 700 } .coin small { display: block; color: var(--muted); font-size: 12px }
table.memes a.set { color: var(--accent); font-family: var(--font); font-weight: 600 } table.memes tr:hover td { background: rgba(255,255,255,.02) }

ol.how { list-style: none; counter-reset: h; margin-top: 44px; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line) }
ol.how li { counter-increment: h; padding: 28px 24px 0 0 } ol.how li + li { padding-left: 24px; border-left: 1px solid var(--line) }
ol.how li::before { content: counter(h); display: block; font: 700 46px/1 var(--font); color: var(--accent); letter-spacing: -.04em; margin-bottom: 18px }
ol.how b { display: block; font-size: 19px; font-weight: 700; letter-spacing: -.02em } ol.how span { display: block; color: var(--muted); margin-top: 8px; font-size: 15px }

dl.safe { margin-top: 40px; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr) }
dl.safe dt, dl.safe dd { padding: 20px 0; border-top: 1px solid var(--line) } dl.safe dt { font-weight: 700; font-size: 18px; padding-right: 24px } dl.safe dd { color: var(--muted) }

.faq { margin-top: 36px } .faq details { border-top: 1px solid var(--line) } .faq details:last-child { border-bottom: 1px solid var(--line) }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; padding: 22px 0; font-weight: 700; font-size: 19px; letter-spacing: -.01em } .faq summary::-webkit-details-marker { display: none }
.faq summary::after { content: "+"; color: var(--accent); font: 400 24px/1 var(--mono); transition: transform .25s } .faq details[open] summary::after { transform: rotate(45deg) }
.faq p { color: var(--muted); padding-bottom: 22px; max-width: 44em }

.end { padding-block: clamp(90px, 12vw, 160px); text-align: center } .end h2 { margin: 0 auto } .end .ctas { margin-top: 30px }
.foot { background: #000; padding: 60px 0 70px }
.foot .wrap { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap } .foot p { color: rgba(255,255,255,.5); font-size: 13px; margin-top: 12px }
.foot .cols { display: flex; gap: 64px; font-size: 14px } .foot .cols div { display: grid; gap: 10px; align-content: start } .foot .cols b { font-weight: 600 } .foot .cols a { color: rgba(255,255,255,.62) } .foot .cols a:hover { color: #fff }

/* docs */
.page-top { padding-block: 150px 56px; border-bottom: 1px solid var(--line) } .page-top h1 { font: 800 clamp(42px, 6vw, 84px)/.95 var(--font); letter-spacing: -.055em } .page-top p { margin-top: 18px; color: var(--muted); font-size: 18px; max-width: 38em }
.doc { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 56px; padding-block: 64px; border-bottom: 1px solid var(--line) }
.doc h2 { font: 800 30px/1.05 var(--font); letter-spacing: -.04em; position: sticky; top: 100px; align-self: start }
.doc p, .doc li { color: var(--muted); max-width: 44em } .doc p + p { margin-top: 12px } .doc b { color: var(--text); font-weight: 600 } .doc ul { padding-left: 20px } .doc li + li { margin-top: 8px }
.doc code { font: 13px var(--mono); background: var(--s2); padding: 2px 6px; border-radius: 5px; color: var(--text) }
.doc table { width: 100%; border-collapse: collapse } .doc td { padding: 14px 0; border-top: 1px solid var(--line); vertical-align: top } .doc td:first-child { color: var(--muted); width: 36%; padding-right: 16px } .doc td a { font: 13px var(--mono); color: var(--accent) }

@media (max-width: 900px) {
  .bar nav { display: none } .bar .wrap { justify-content: space-between }
  .two, .doc, dl.safe { grid-template-columns: 1fr } .doc { gap: 20px } .doc h2 { position: static }
  ol.how { grid-template-columns: 1fr 1fr; row-gap: 28px } ol.how li:nth-child(3) { border-left: 0; padding-left: 0 }
  .nums { grid-template-columns: 1fr } .nums div + div { border-left: 0; border-top: 1px solid var(--line) }
  .hs { display: none } dl.safe dd { border-top: 0; padding-top: 0 }
}
@media (max-width: 560px) { ol.how { grid-template-columns: 1fr } ol.how li + li { border-left: 0; padding-left: 0 } .ctas .btn { flex: 1 } .foot .cols { gap: 36px; flex-wrap: wrap } }