/* Your Roman Way waiting list: black, white and one gold, large centred statements. Satoshi throughout. */
@font-face { font-family:"Satoshi"; src:url("/fonts/Satoshi-Variable.woff2") format("woff2"); font-weight:300 900; font-display:swap; }

:root {
  --bg:#050506; --panel:#0b0c10; --hair:rgba(255,255,255,.09); --hair-2:rgba(255,255,255,.18);
  --text:#f5f5f7; --soft:#b3b5bd; --dim:#878993; --gold:#ffd84a; --red:#ff3b2f;
  --gutter:clamp(18px,4vw,44px);
  --ease:cubic-bezier(.23,1,.32,1);
  color-scheme:dark;
}
*, *::before, *::after { box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:76px; background:var(--bg); }
body { margin:0; background:var(--bg); color:var(--text); font:400 17px/1.55 "Satoshi",system-ui,-apple-system,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; }
/* three faint leaks of light, so the black isn't flat */
body::before { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(30% 28% at 16% 24%,rgba(255,216,74,.075),transparent 70%),radial-gradient(34% 30% at 84% 68%,rgba(255,128,64,.06),transparent 70%),radial-gradient(28% 26% at 68% 6%,rgba(96,124,255,.05),transparent 70%); }
::selection { background:var(--gold); color:#111; }
img, svg, video { display:block; max-width:100%; }
img { height:auto; }
h1, h2, h3, p, ul, ol { margin:0; padding:0; }
ul, ol { list-style:none; }
a { color:var(--gold); text-underline-offset:.2em; text-decoration-thickness:1px; }
b { font-weight:700; }
:focus-visible { outline:2px solid var(--gold); outline-offset:3px; border-radius:6px; }
[hidden] { display:none !important; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.skip { position:absolute; left:12px; top:-60px; z-index:40; background:var(--gold); color:#111; padding:10px 14px; border-radius:10px; }
.skip:focus { top:12px; }
.small { font-size:14px; line-height:1.5; color:var(--dim); }
.center { text-align:center; }

/* Bar: nearly invisible over the opening, dark once you scroll */
.bar { position:fixed; top:0; left:0; right:0; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:14px max(var(--gutter),calc((100vw - 1400px) / 2)); transition:background-color .3s ease, box-shadow .3s ease; }
.bar.solid { background:rgba(5,5,6,.92); box-shadow:0 1px 0 var(--hair); }
.mark { display:inline-flex; align-items:center; gap:9px; color:#fff; text-decoration:none; font-weight:700; font-size:16px; letter-spacing:-.01em; white-space:nowrap; }
.mark img { border-radius:50%; }
.bar-nav { display:none; }
.bar-cta { flex:none; padding:8px 16px; border-radius:999px; color:#fff; text-decoration:none; font-weight:600; font-size:15px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.28); transition:background-color .18s ease, color .18s ease, box-shadow .18s ease; }

/* Buttons: gold, with the arrow in its own circle */
.btn { display:flex; align-items:center; justify-content:center; gap:12px; font:inherit; font-weight:700; font-size:16px; line-height:1; white-space:nowrap; color:#111; background:var(--gold); border:0; border-radius:999px; padding:9px 9px 9px 24px; min-height:52px; cursor:pointer; text-decoration:none; transition:transform 160ms var(--ease), background-color 160ms ease; }
.btn:active { transform:scale(.97); }
.btn[disabled] { opacity:.65; cursor:progress; }
.btn .arrow { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:rgba(0,0,0,.14); }
.btn-inline { display:inline-flex; }
.btn-big { min-height:60px; font-size:18px; padding-left:30px; }

/* Hero: one full screen, the wall of reels behind it */
.hero { position:relative; min-height:100svh; display:flex; align-items:center; justify-content:center; overflow:hidden; padding:96px var(--gutter) 56px; text-align:center; }
.wall { position:absolute; inset:-14% -18%; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; transform:rotate(-7deg); opacity:.4; }
.col { display:grid; gap:14px; align-content:start; animation:drift 46s ease-in-out infinite alternate; }
.col:nth-child(2n) { margin-top:-90px; animation-direction:alternate-reverse; }
.col-wide { display:none; }
.col img { width:100%; aspect-ratio:9/16; object-fit:cover; border-radius:14px; }
@keyframes drift { from { transform:translateY(-26px); } to { transform:translateY(26px); } }
.hero::after { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(70% 58% at 50% 46%,rgba(5,5,6,.95) 0%,rgba(5,5,6,.84) 52%,rgba(5,5,6,.45) 100%),linear-gradient(180deg,rgba(5,5,6,.55) 0%,transparent 24%,transparent 62%,var(--bg) 100%); }
.hero-in { position:relative; z-index:1; width:100%; max-width:760px; display:flex; flex-direction:column; align-items:center; }
.kicker { font-size:15px; font-weight:500; color:rgba(255,255,255,.82); margin-bottom:14px; }
h1 { font-size:clamp(44px,8.6vw,92px); font-weight:700; line-height:1.03; letter-spacing:-.035em; color:#fff; text-wrap:balance; max-width:9.6em; }
.lead { margin-top:18px; max-width:32em; font-size:clamp(18px,1.5vw,21px); line-height:1.42; color:var(--soft); text-wrap:balance; }

.signup { width:100%; max-width:560px; margin-top:26px; display:grid; gap:12px; text-align:left; }
.join { display:grid; gap:8px; padding:8px; border-radius:26px; background:rgba(11,12,16,.82); box-shadow:inset 0 0 0 1px var(--hair-2); transition:box-shadow .18s ease; }
.join:focus-within { box-shadow:inset 0 0 0 1px rgba(255,216,74,.6); }
.join input { width:100%; font:inherit; font-size:17px; color:#fff; background:none; border:0; outline:0; padding:12px 16px; text-align:center; caret-color:var(--gold); }
.join input::placeholder, .opt-field input::placeholder { color:var(--dim); opacity:1; }
.opt-field { display:grid; gap:7px; text-align:center; }
.opt-field span { font-size:14px; font-weight:500; color:rgba(255,255,255,.82); }
.opt-field small { font-size:14px; color:var(--dim); }
.opt-field input { width:100%; font:inherit; font-size:16px; color:#fff; background:rgba(11,12,16,.7); border:0; border-radius:14px; box-shadow:inset 0 0 0 1px var(--hair); padding:13px 16px; outline:0; caret-color:var(--gold); transition:box-shadow .18s ease; }
.opt-field input:focus { box-shadow:inset 0 0 0 1px rgba(255,216,74,.6); }
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.ok { display:flex; gap:9px; align-items:flex-start; justify-content:center; font-size:13px; line-height:1.4; color:var(--soft); cursor:pointer; text-wrap:balance; }
.ok input { flex:none; width:18px; height:18px; margin:1px 0 0; accent-color:var(--gold); cursor:pointer; }
.ok a { color:var(--soft); }
.form-err { color:#fff; background:rgba(255,59,47,.2); box-shadow:inset 0 0 0 1px rgba(255,59,47,.55); border-radius:10px; padding:9px 13px; font-size:14px; font-weight:500; text-align:center; }

.gold-pill { margin-top:18px; padding:9px 18px; border-radius:999px; background:rgba(255,216,74,.1); box-shadow:inset 0 0 0 1px rgba(255,216,74,.38); color:var(--gold); font-weight:500; font-size:15px; line-height:1.35; text-wrap:balance; }
.live { margin-top:14px; display:inline-flex; align-items:center; gap:8px; font-size:15px; color:var(--soft); }
.live b { color:#fff; }
.live i { width:9px; height:9px; border-radius:50%; background:var(--red); box-shadow:0 0 0 4px rgba(255,59,47,.2); }
.live-c { display:flex; justify-content:center; margin:28px 0 0; }
.play-link { margin-top:16px; display:inline-flex; align-items:center; gap:10px; color:#fff; font-weight:500; font-size:16px; text-decoration:none; }
.play-link i { display:grid; place-items:center; width:32px; height:32px; border-radius:50%; box-shadow:inset 0 0 0 1px var(--hair-2); transition:background-color .18s ease, color .18s ease; }

.done { display:grid; gap:12px; justify-items:center; text-align:center; outline:none; }
.done h3 { font-size:clamp(24px,3vw,32px); font-weight:700; letter-spacing:-.02em; line-height:1.15; color:#fff; }
.done p { color:var(--soft); }

/* Sections: one large statement, centred */
.sec { max-width:1240px; margin:0 auto; padding:clamp(70px,11vh,130px) var(--gutter) 0; }
.state { font-size:clamp(38px,6.4vw,76px); font-weight:700; line-height:1.05; letter-spacing:-.035em; color:#fff; text-align:center; text-wrap:balance; }
.state span { color:rgba(255,255,255,.42); }
.sub { margin:16px auto 0; max-width:34em; text-align:center; font-size:clamp(17px,1.4vw,19px); line-height:1.45; color:var(--soft); text-wrap:balance; }

.stats { margin:clamp(34px,6vh,64px) 0 22px; display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--hair); }
.stats li { padding:24px 10px; text-align:center; color:var(--soft); font-size:15px; line-height:1.35; border-bottom:1px solid var(--hair); }
.stats li:nth-child(odd) { border-right:1px solid var(--hair); }
.stats b { display:block; margin-bottom:5px; font-size:clamp(34px,4.4vw,52px); font-weight:500; line-height:1.05; letter-spacing:-.03em; color:#fff; }

.device { width:min(66vw,320px); margin:clamp(30px,5vh,52px) auto 14px; padding:9px; border-radius:42px; background:#101116; box-shadow:0 0 0 1px var(--hair-2),0 40px 90px rgba(0,0,0,.8); }
.device video { width:100%; aspect-ratio:9/16; object-fit:cover; background:#000; border-radius:33px; }

.film { display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x proximity; margin:clamp(28px,5vh,48px) calc(var(--gutter) * -1) 0; padding:2px var(--gutter) 10px; scrollbar-width:thin; scrollbar-color:#2a2b32 transparent; }
.film li { position:relative; flex:0 0 38vw; max-width:170px; scroll-snap-align:center; }
.film img { width:100%; aspect-ratio:9/16; object-fit:cover; border-radius:14px; box-shadow:0 0 0 1px var(--hair); }
.film span { position:absolute; left:0; right:0; bottom:0; padding:30px 10px 10px; border-radius:0 0 14px 14px; font-size:13px; font-weight:500; line-height:1.2; color:#fff; background:linear-gradient(180deg,transparent,rgba(5,5,6,.92)); }
.film b { color:var(--gold); margin-right:3px; }

.vote { display:grid; gap:22px; margin:clamp(30px,5vh,52px) auto 16px; max-width:900px; align-items:center; }
.vote-frame { width:min(62vw,260px); margin:0 auto; aspect-ratio:9/16; object-fit:cover; border-radius:20px; box-shadow:0 0 0 1px var(--hair-2); }
.vote-card { background:var(--panel); border-radius:22px; box-shadow:inset 0 0 0 1px var(--hair); padding:clamp(20px,3vw,34px); }
.vote-tag { color:var(--gold); font-size:14px; font-weight:500; }
.vote-q { margin-top:8px; font-size:clamp(20px,2.2vw,25px); font-weight:500; line-height:1.28; letter-spacing:-.015em; color:#fff; }
.opts { display:grid; gap:9px; margin-top:18px; }
.opt { display:flex; align-items:center; gap:12px; width:100%; font:inherit; font-weight:500; font-size:17px; line-height:1.25; color:#fff; text-align:left; background:rgba(255,255,255,.035); border:0; border-radius:13px; box-shadow:inset 0 0 0 1px var(--hair-2); padding:13px 15px; cursor:pointer; transition:background-color .15s ease, box-shadow .15s ease, transform 160ms var(--ease), opacity .2s ease; }
.opt:active { transform:scale(.985); }
.opt i { flex:none; display:grid; place-items:center; width:27px; height:27px; border-radius:50%; font-style:normal; font-size:14px; background:rgba(255,255,255,.1); }
.opt.picked { background:rgba(255,216,74,.1); box-shadow:inset 0 0 0 1px rgba(255,216,74,.6); }
.opt.picked i { background:var(--gold); color:#111; }
.opt.other { opacity:.45; }
.opts.closed .opt { cursor:default; }
.vote-res { margin-top:16px; display:grid; gap:10px; justify-items:start; color:var(--soft); animation:rise 400ms var(--ease) both; }
.vote-win { color:#fff; font-size:19px; }
.vote-win b { color:var(--gold); }
@keyframes rise { from { opacity:0; transform:translateY(10px); } }

.term { margin:clamp(30px,5vh,52px) auto 0; max-width:900px; background:var(--panel); border-radius:18px; box-shadow:inset 0 0 0 1px var(--hair); overflow:hidden; }
.term-bar { position:relative; display:flex; align-items:center; gap:7px; padding:13px 16px; border-bottom:1px solid var(--hair); }
.term-bar i { width:10px; height:10px; border-radius:50%; background:#2b2c33; }
.term-bar span { position:absolute; left:0; right:0; text-align:center; font:13px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; color:var(--dim); }
.term-body { padding:clamp(16px,2.6vw,26px); font:14px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; color:#e8e8ec; }
.term-in { min-height:3em; }
.term-in em { font-style:normal; color:var(--gold); }
.term-in .caret { display:inline-block; width:8px; height:1.05em; margin-left:2px; vertical-align:-.15em; background:var(--gold); animation:blink 1s steps(2) infinite; }
@keyframes blink { to { opacity:0; } }
.term-steps { display:grid; gap:11px; margin-top:12px; }
.term-steps li { display:grid; grid-template-columns:20px minmax(0,1fr); column-gap:6px; }
.term-steps u { text-decoration:none; color:var(--gold); }
.term-steps b { font-weight:600; color:#fff; }
.term-steps small { grid-column:2; font-size:13px; color:var(--dim); }
.term-steps em { grid-column:2; justify-self:start; margin-top:4px; font-style:normal; font-size:12px; color:var(--gold); background:rgba(255,216,74,.1); border-radius:999px; padding:2px 9px; }
.term-done b { color:var(--gold); }
.js .term.armed .term-steps li { visibility:hidden; }
.js .term.armed .term-steps li.show { visibility:visible; animation:rise 260ms var(--ease) both; }
.term-foot { padding:13px clamp(16px,2.6vw,26px); border-top:1px solid var(--hair); font-size:14px; color:var(--dim); }

.box { margin:clamp(30px,5vh,52px) auto 0; max-width:1060px; display:grid; border-top:1px solid var(--hair); }
.box li { padding:24px 18px; border-bottom:1px solid var(--hair); }
.box svg { width:24px; height:24px; fill:none; stroke:var(--gold); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; margin-bottom:14px; }
.box h3 { font-size:19px; font-weight:700; letter-spacing:-.01em; color:#fff; margin-bottom:5px; }
.box p { font-size:16px; line-height:1.45; color:var(--soft); }

.offer { position:relative; border-radius:28px; padding:clamp(34px,6vw,70px) clamp(18px,4vw,56px); background:radial-gradient(60% 34% at 50% 0%,rgba(255,216,74,.13),transparent 75%),linear-gradient(180deg,#0e0f13,#07070a); box-shadow:inset 0 0 0 1px var(--hair-2); }
.gets { margin:clamp(26px,5vh,46px) auto 0; max-width:940px; display:grid; text-align:center; }
.gets li { padding:22px 10px; border-bottom:1px solid var(--hair); }
.gets li:last-child { border-bottom:0; }
.get-tag { color:var(--gold); font-size:14px; font-weight:500; margin-bottom:7px; }
.gets h3 { font-size:22px; font-weight:700; line-height:1.15; letter-spacing:-.02em; color:#fff; margin-bottom:7px; }
.gets p:last-child { font-size:16px; line-height:1.45; color:var(--soft); text-wrap:balance; }
.big-off { font-size:clamp(70px,9vw,104px); font-weight:700; line-height:1; letter-spacing:-.04em; color:var(--gold); }
.signup-c { margin:24px auto 14px; }

.honest { margin:clamp(30px,5vh,52px) auto 0; max-width:1000px; display:grid; border-radius:22px; background:var(--panel); box-shadow:inset 0 0 0 1px var(--hair); overflow:hidden; }
.honest li { padding:clamp(20px,3vw,32px); border-bottom:1px solid var(--hair); }
.honest li:last-child { border-bottom:0; }
.honest h3 { font-size:18px; font-weight:700; color:#fff; margin-bottom:6px; }
.honest p { font-size:16px; line-height:1.48; color:var(--soft); }

.faq { margin:clamp(26px,5vh,46px) auto 0; max-width:800px; border-top:1px solid var(--hair); }
.faq details { border-bottom:1px solid var(--hair); }
.faq summary { list-style:none; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:17px 2px; font-size:18px; font-weight:500; color:#fff; cursor:pointer; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary i { position:relative; flex:none; width:30px; height:30px; border-radius:50%; box-shadow:inset 0 0 0 1px var(--hair-2); transition:transform 220ms var(--ease); }
.faq summary i::before, .faq summary i::after { content:""; position:absolute; left:9px; right:9px; top:14px; height:2px; background:#fff; border-radius:2px; }
.faq summary i::after { transform:rotate(90deg); }
.faq details[open] summary i { transform:rotate(45deg); }
.faq details p { padding:0 44px 18px 2px; color:var(--soft); }

.sec-end { display:grid; justify-items:center; gap:22px; padding-bottom:clamp(40px,8vh,90px); }

.foot { max-width:1240px; margin:0 auto; padding:clamp(40px,7vh,70px) var(--gutter) calc(92px + env(safe-area-inset-bottom)); }
.foot-in { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px 24px; padding-top:22px; border-top:1px solid var(--hair); margin-bottom:12px; }
.foot nav { display:flex; flex-wrap:wrap; gap:8px 20px; }
.foot nav a { color:var(--soft); font-size:15px; text-decoration:none; }

/* Follows you on a phone, once no form is on screen */
.sticky { position:fixed; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom)); z-index:30; display:flex; align-items:center; justify-content:center; gap:10px; color:#111; background:var(--gold); border-radius:999px; padding:15px 18px; text-decoration:none; box-shadow:0 12px 34px rgba(0,0,0,.65); animation:rise 280ms var(--ease) both; }
.sticky b { font-size:17px; }
.sticky span { font-size:13px; font-weight:500; }

/* Privacy and thanks */
.legal { max-width:720px; margin:0 auto; padding:clamp(70px,12vh,120px) var(--gutter) 60px; color:var(--soft); }
.legal h1 { font-size:clamp(40px,7vw,68px); margin-bottom:12px; }
.legal h2 { margin-top:26px; font-size:18px; font-weight:700; color:#fff; }
.legal p { margin-top:8px; }
.legal .y { color:var(--gold); }
.back { display:inline-block; margin-top:28px; font-weight:500; }

@media (hover:hover) and (pointer:fine) {
  a:hover { color:#fff; }
  .btn:hover { background:#ffe27a; color:#111; }
  .bar-cta:hover { background:var(--gold); color:#111; box-shadow:none; }
  .opt:hover { background:rgba(255,255,255,.07); }
  .play-link:hover i { background:#fff; color:#111; }
  .faq summary:hover i { box-shadow:inset 0 0 0 1px rgba(255,255,255,.5); }
  .film img { transition:transform 220ms var(--ease); }
  .film li:hover img { transform:translateY(-4px); }
}

@media (min-width:640px) {
  .join { display:flex; align-items:center; border-radius:999px; padding:6px 6px 6px 8px; }
  .join label { flex:1; min-width:0; }
  .join input { text-align:left; padding:10px 14px; }
  .btn { flex:none; }
  .stats { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .stats li { border-right:1px solid var(--hair); padding:30px 10px; }
  .stats li:last-child { border-right:0; }
  .box { grid-template-columns:1fr 1fr; }
  .box li:nth-child(odd) { border-right:1px solid var(--hair); }
  .honest { grid-template-columns:1fr 1fr; }
  .honest li:nth-child(odd) { border-right:1px solid var(--hair); }
  .honest li:nth-last-child(2) { border-bottom:0; }
  .film li { flex-basis:24vw; }
  .term-steps li { grid-template-columns:22px minmax(0,auto) minmax(0,1fr) auto; column-gap:12px; align-items:baseline; }
  .term-steps small { grid-column:3; }
  .term-steps em { grid-column:4; margin:0; }
}

@media (min-width:1000px) {
  body { font-size:18px; }
  .bar-nav { display:flex; gap:clamp(18px,2.2vw,34px); margin:0 auto; }
  .bar-nav a { padding:6px 0; color:rgba(255,255,255,.72); text-decoration:none; font-size:15px; font-weight:500; white-space:nowrap; transition:color .2s ease; }
  .sticky { display:none !important; }
  .foot { padding-bottom:40px; }
  .wall { grid-template-columns:repeat(6,minmax(0,1fr)); gap:20px; inset:-22% -6%; }
  .col { gap:20px; }
  .col-wide { display:grid; }
  .col img { border-radius:18px; }
  .hero::after { background:radial-gradient(52% 62% at 50% 46%,rgba(5,5,6,.96) 0%,rgba(5,5,6,.86) 52%,rgba(5,5,6,.42) 100%),linear-gradient(180deg,rgba(5,5,6,.5) 0%,transparent 22%,transparent 66%,var(--bg) 100%); }
  h1 { font-size:clamp(60px,min(6.2vw,10.4vh),104px); }
  .hero { padding-top:84px; padding-bottom:36px; }
  .kicker { margin-bottom:10px; }
  .lead { margin-top:14px; }
  .signup { margin-top:20px; gap:10px; }
  .gold-pill { margin-top:14px; }
  .play-link { margin-top:12px; }
  .hero-in { max-width:960px; }
  .ok { font-size:14px; }
  .film { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:12px; overflow:visible; margin-left:0; margin-right:0; padding:2px 0; }
  .film li { max-width:none; }
  .vote { grid-template-columns:minmax(240px,300px) minmax(0,1fr); gap:clamp(24px,4vw,50px); }
  .vote-frame { width:100%; margin:0; }
  .box { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .box li { padding:30px 26px; }
  .box li:nth-child(odd) { border-right:0; }
  .box li:not(:nth-child(3n)) { border-right:1px solid var(--hair); }
  .gets { grid-template-columns:repeat(3,minmax(0,1fr)); align-items:start; }
  .gets li { padding:6px clamp(16px,2.4vw,30px); border-bottom:0; border-right:1px solid var(--hair); }
  .gets li:last-child { border-right:0; }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation:none !important; transition:none !important; }
}