/* Repbelt website. Built by rig/build-launch-site.js: edit there, not here. */
@font-face { font-family:"Dela Gothic One"; src:url(fonts/dela-gothic-one-latin.woff2) format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:"Zen Kaku Gothic New"; src:url(fonts/zen-kaku-400-latin.woff2) format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:"Zen Kaku Gothic New"; src:url(fonts/zen-kaku-700-latin.woff2) format("woff2"); font-weight:700; font-display:swap; }
@font-face { font-family:"Zen Kaku Gothic New"; src:url(fonts/zen-kaku-900-latin.woff2) format("woff2"); font-weight:900; font-display:swap; }
:root { --paper:#fbfbf9; --ink:#170b06; --ink2:#3b2a22; --ember:#ff4f12; --ember-deep:#d63a0c; --cream:#fff8ee; --rule:4px; --g:14px;
  --display:"Dela Gothic One", "Arial Black", sans-serif; --body:"Zen Kaku Gothic New", system-ui, -apple-system, sans-serif;
  color-scheme:light; }
* { box-sizing:border-box; }
html { background:var(--paper); scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body { margin:0; color:var(--ink); font:400 18px/1.6 var(--body); -webkit-tap-highlight-color:rgba(255,79,18,.25); touch-action:manipulation; overflow-x:clip; }
@media (pointer: fine) { html { overscroll-behavior-y:none; } }
img, svg { max-width:100%; } a { color:inherit; text-underline-offset:5px; text-decoration-thickness:2px; }
::selection { background:var(--ember); color:#111; }
:focus-visible { outline:3px solid var(--ember); outline-offset:3px; }
h1, h2, h3 { font-family:var(--display); font-weight:400; line-height:1; letter-spacing:-.01em; text-wrap:balance; margin:0; }
[id] { scroll-margin-top:92px; }
.wrap { max-width:1200px; margin:0 auto; padding:0 24px; }
.skip { position:absolute; left:12px; top:-60px; z-index:100; background:var(--ink); color:#fff; padding:10px 14px; font-weight:900; }
.skip:focus { top:12px; }
/* Header */
header.site { position:sticky; top:0; z-index:50; background:rgba(251,251,249,.94); backdrop-filter:saturate(1.4) blur(10px); border-bottom:var(--rule) solid var(--ink); }
header.site .wrap { display:flex; align-items:center; gap:24px; min-height:64px; }
.brand img { display:block; height:26px; width:auto; }
nav.main { display:flex; gap:28px; margin-left:auto; }
nav.main a { position:relative; text-decoration:none; color:var(--ink2); font-weight:900; font-size:13px; letter-spacing:.12em; text-transform:uppercase; padding:12px 0; }
nav.main a::after { content:""; position:absolute; left:0; right:0; bottom:4px; height:4px; background:var(--ember); transform:scaleX(0); transform-origin:left; transition:transform .25s cubic-bezier(.16,1,.3,1); }
nav.main a:hover { color:var(--ink); } nav.main a:hover::after { transform:scaleX(.4); }
nav.main a.on, nav.main a[aria-current="page"] { color:var(--ink); } nav.main a.on::after, nav.main a[aria-current="page"]::after { transform:none; }
header.site .get { display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:0 16px; border-radius:99px; background:var(--ink); color:#fff; text-decoration:none; font-weight:900; font-size:14px; transition:background .15s; }
header.site .get:hover { background:#3b2a22; } header.site .get svg, .sheet .sget svg { width:15px; height:15px; fill:currentColor; flex:none; }
/* The belt under the bar: white to flame, filling as you read down the page. */
.climb-bar { position:absolute; left:0; right:0; bottom:-10px; height:6px; background:#e4e0da; pointer-events:none; }
.climb-bar i { display:block; height:100%; background:linear-gradient(90deg, #f4f5fa 0.00% 6.67%, #f5c542 6.67% 13.33%, #ff8a2a 13.33% 20.00%, #3fb56b 20.00% 26.67%, #2f6fdf 26.67% 33.33%, #8b5cf6 33.33% 40.00%, #7a4a2a 40.00% 46.67%, #1a1726 46.67% 53.33%, #1a1726 53.33% 60.00%, #1a1726 60.00% 66.67%, #c0262d 66.67% 73.33%, #c0262d 73.33% 80.00%, #c0262d 80.00% 86.67%, #f5c542 86.67% 93.33%, #fffaf0 93.33% 100.00%); background-size:100vw 100%; clip-path:inset(0 calc(100% - var(--p, 0%)) 0 0); }
.menu { display:none; align-items:center; gap:8px; min-height:40px; padding:0 12px; margin-left:auto; border:3px solid var(--ink); background:#fff; color:var(--ink); font:900 13px var(--body); letter-spacing:.08em; text-transform:uppercase; cursor:pointer; }
.menu i { position:relative; width:14px; height:10px; border-top:3px solid var(--ink); border-bottom:3px solid var(--ink); transition:transform .2s; }
.menu i::after { content:""; position:absolute; left:0; right:0; top:50%; height:3px; margin-top:-1.5px; background:var(--ink); }
.menu[aria-expanded="true"] i { border-color:transparent; } .menu[aria-expanded="true"] i::after { transform:rotate(45deg); box-shadow:0 0 0 0 var(--ink); }
.menu[aria-expanded="true"] i::before { content:""; position:absolute; left:0; right:0; top:50%; height:3px; margin-top:-1.5px; background:var(--ink); transform:rotate(-45deg); }
.sheet { position:absolute; left:0; right:0; top:100%; margin-top:10px; background:var(--ink); color:var(--cream); padding:12px 20px 22px; display:flex; flex-direction:column; max-height:calc(100dvh - 80px); overflow:auto; overscroll-behavior:contain; box-shadow:0 24px 40px -12px rgba(23,11,6,.5); }
.sheet[hidden] { display:none; }
.sheet a { display:flex; justify-content:space-between; align-items:center; gap:12px; color:var(--cream); text-decoration:none; font:400 28px/1.15 var(--display); padding:12px 0; border-bottom:2px solid rgba(255,248,238,.15); }
.sheet a small { font:900 12px var(--body); color:#d9cfc4; letter-spacing:.08em; text-transform:uppercase; }
.sheet a[aria-current="page"] { color:var(--ember); }
.sheet .sget { justify-content:center; gap:10px; margin-top:18px; min-height:54px; border:0; background:var(--ember); color:#111; font:900 16px var(--body); }
/* The App Store button */
.store { display:inline-flex; align-items:center; gap:12px; min-height:60px; padding:10px 22px 10px 18px; text-decoration:none; background:var(--ink); color:#fff; border:3px solid var(--ink); box-shadow:0 6px 0 var(--cream); transition:transform .12s, box-shadow .12s; }
.store:hover { transform:translateY(2px); box-shadow:0 4px 0 var(--cream); }
.store svg { width:26px; height:26px; flex:none; fill:#fff; } .store span { display:flex; flex-direction:column; font-weight:900; font-size:20px; line-height:1.05; }
.store em { font-style:normal; font-weight:700; font-size:12px; letter-spacing:.02em; }
.store.on-paper { box-shadow:0 6px 0 var(--ember); } .store.on-paper:hover { box-shadow:0 4px 0 var(--ember); }
/* Sections */
.sec { padding:72px 0; border-bottom:var(--rule) solid var(--ink); }
.sec h2 { font-size:clamp(34px, 4.6vw, 60px); margin-bottom:16px; }
.lead { font-size:clamp(18px, 1.6vw, 21px); max-width:60ch; margin:0 0 28px; color:var(--ink2); }
.note { font-weight:700; color:var(--ink2); }
.more { font-weight:900; }
/* Cover */
.cover { background:var(--ember); padding:14px 0 18px; border-bottom:var(--rule) solid var(--ink); }
.spread { position:relative; min-height:min(76vh, 680px); border:var(--rule) solid var(--ink); overflow:hidden; background:radial-gradient(70% 90% at 40% 45%, #ffd23f 0%, #ff8a2a 36%, #ff4f12 66%, #d63a0c 100%); }
.spread .lines { position:absolute; inset:0; width:100%; height:100%; stroke:var(--ink); opacity:var(--power, .2); transition:opacity .4s; }
.dots { position:absolute; inset:0; background-image:radial-gradient(var(--ink) 1.4px, transparent 2px); background-size:9px 9px; opacity:.16; mask-image:linear-gradient(270deg, #000, transparent 50%); -webkit-mask-image:linear-gradient(270deg, #000, transparent 50%); }
.heroBtn { position:absolute; left:3%; bottom:-3%; height:98%; z-index:2; background:none; border:0; padding:0; cursor:pointer; }
.heroBtn img { height:100%; width:auto; display:block; filter:drop-shadow(10px 10px 0 rgba(23,11,6,.3)); }
.heroBtn:focus-visible { outline:4px solid var(--ink); outline-offset:-4px; }
.vert { position:absolute; right:20px; top:20px; bottom:20px; z-index:2; display:flex; flex-direction:column; align-items:center; }
.vert .name { writing-mode:vertical-rl; text-orientation:upright; font-family:var(--display); font-size:clamp(34px, min(6vw, calc((min(76vh, 680px) - 64px) / 7.3)), 88px); line-height:1; letter-spacing:-.06em; }
.vert .name span { color:var(--ink); opacity:.72; transition:opacity .25s, color .25s; }
.vert .name span.lit { opacity:1; text-shadow:5px 5px 0 var(--cream); } .vert .name.full span { color:var(--cream); text-shadow:5px 5px 0 var(--ink); }
.copy { position:absolute; left:45%; bottom:26px; right:150px; z-index:3; }
.copy h1 { font-size:clamp(40px, 4.6vw, 72px); line-height:.95; background:var(--cream); border:var(--rule) solid var(--ink); padding:14px 18px; width:fit-content; margin-bottom:12px; }
.copy p { margin:0 0 18px; background:var(--cream); border:3px solid var(--ink); padding:12px 16px; font-weight:700; max-width:46ch; font-size:18px; }
.copy .row { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.copy .row small { font-weight:900; background:var(--cream); padding:4px 8px; border:2px solid var(--ink); }
.status { position:absolute; left:22px; top:20px; z-index:3; }
.sticker { display:inline-block; font-weight:900; background:var(--cream); border:3px solid var(--ink); padding:4px 10px; transform:rotate(-2deg); font-size:15px; }
.sfx { position:absolute; left:20%; top:16%; z-index:4; font:400 clamp(60px, 9vw, 140px)/1 var(--display); color:var(--cream); -webkit-text-stroke:8px var(--ink); paint-order:stroke fill; transform:rotate(-10deg); pointer-events:none; }
.pop { position:absolute; z-index:20; pointer-events:none; white-space:nowrap; transform:translate(-50%, 0); font:400 32px/1 var(--display); color:#fff; -webkit-text-stroke:6px var(--ink); paint-order:stroke fill; }
.pop.hot { color:var(--ember); }
/* Friends and teams */
.friends .grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:48px; align-items:center; }
.friends ul.points { list-style:none; padding:0; margin:0 0 24px; display:grid; gap:14px; }
.friends ul.points li { padding-left:30px; position:relative; } .friends ul.points li::before { content:""; position:absolute; left:0; top:.45em; width:14px; height:14px; background:var(--ember); border:3px solid var(--ink); transform:rotate(45deg); }
.friends ul.points b { display:block; font-weight:900; }
.league { position:relative; border:var(--rule) solid var(--ink); background:var(--ink); color:var(--cream); padding:22px; box-shadow:12px 12px 0 var(--ember); }
.league .ex { position:absolute; right:22px; bottom:20px; font-size:12px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; color:#d9cfc4; }
.team { display:grid; grid-template-columns:1fr auto; gap:6px 16px; align-items:end; }
.team + .team { margin-top:20px; padding-top:20px; border-top:2px dashed rgba(255,248,238,.3); }
.team h3 { font-size:24px; } .team .total { font:400 28px/1 var(--display); color:var(--ember); font-variant-numeric:tabular-nums; text-align:right; }
.team.them .total { color:var(--cream); }
.team small { grid-column:1 / -1; color:#d9cfc4; font-size:15px; }
.five { grid-column:1 / -1; display:grid; grid-template-columns:repeat(5, 1fr); gap:10px; margin-top:6px; }
.mem { aspect-ratio:1; border:3px solid var(--cream); background:#2a1d17; padding:0; display:block; width:100%; position:relative; }
button.mem { cursor:pointer; transition:transform .15s, background .15s; } button.mem:hover { background:#4a2e20; transform:translateY(-3px); }
button.mem:focus-visible { outline:3px solid var(--ember); outline-offset:3px; }
.mem img { width:100%; height:100%; display:block; } .team.them .mem { border-color:#8a776a; }
.bar { display:flex; height:22px; border:3px solid var(--cream); margin-top:22px; background:#5b4a40; }
.bar i { display:block; height:100%; width:48.6%; background:var(--ember); transition:width .5s cubic-bezier(.16,1,.3,1); }
.gap { display:flex; justify-content:space-between; gap:12px; margin-top:8px; font-weight:900; font-size:15px; } .gap span:last-child { color:#d9cfc4; }
.tip span { color:#d9cfc4; letter-spacing:.04em; }
.tip { margin:16px 0 0; font-weight:900; font-size:14px; letter-spacing:.06em; text-transform:uppercase; color:var(--ember); }
.passed { position:absolute; left:50%; top:50%; z-index:6; transform:translate(-50%, -50%) rotate(-4deg); background:var(--ember); color:#111; padding:10px 22px; font:400 clamp(28px, 3.6vw, 48px)/1 var(--display); border:4px solid var(--ink); white-space:nowrap; box-shadow:8px 8px 0 var(--cream); }
/* Features with phones */
.feat { display:grid; grid-template-columns:1fr 1fr; gap:24px 56px; align-items:center; padding:8px 0; max-width:1040px; margin:0 auto; }
.feat + .feat { border-top:3px solid var(--ink); }
.plans { max-width:1040px; margin:24px auto 0; padding-top:40px; border-top:3px solid var(--ink); } .plans h3 { font-size:clamp(28px, 3vw, 40px); margin-bottom:12px; } .plans p { margin:0; max-width:60ch; color:var(--ink2); }
.chips { list-style:none; padding:0; margin:20px 0; display:flex; flex-wrap:wrap; gap:10px; } .chips li { font-weight:900; background:#fff; border:3px solid var(--ink); padding:6px 12px; box-shadow:4px 4px 0 var(--ink); } .chips li:nth-child(n+8) { background:var(--ember); }
.features .lead { margin-bottom:8px; }
.feat.flip .txt { order:2; }
.feat h3 { font-size:clamp(28px, 3vw, 40px); margin-bottom:12px; } .feat p { margin:0; max-width:46ch; color:var(--ink2); }
.feat .tag { display:inline-block; font-weight:900; font-size:14px; letter-spacing:.08em; text-transform:uppercase; color:var(--ember-deep); margin-bottom:10px; }
/* The near-3D phone */
.stage { perspective:1600px; display:flex; justify-content:center; padding:16px 0 28px; }
.device { position:relative; width:min(250px, 68vw); margin:0; transform-style:preserve-3d; transform:rotateY(var(--ry)) rotateX(var(--rx)) rotateZ(var(--rz)); transition:transform .7s cubic-bezier(.16,1,.3,1); }
.device::before { content:""; position:absolute; inset:0; border-radius:48px; background:linear-gradient(90deg, #0d0d10, #2b2b31 50%, #0d0d10); transform:translateZ(-14px); box-shadow:34px 46px 70px -18px rgba(23,11,6,.42), 10px 14px 24px -8px rgba(23,11,6,.3); }
.device::after { content:""; position:absolute; left:-3px; top:21%; width:4px; height:64px; border-radius:2px; background:#3b3b42; box-shadow:0 84px 0 #3b3b42; transform:translateZ(-7px); }
.bezel { position:relative; border-radius:48px; padding:9px; background:linear-gradient(145deg, #5b5b63 0%, #1c1c20 18%, #0b0b0d 55%, #2e2e34 100%); box-shadow:inset 0 0 0 1px rgba(255,255,255,.22), inset 0 0 0 3px #050506; }
.bezel img { display:block; width:100%; height:auto; border-radius:40px; background:#0b0e1a; }
.bezel::after { content:""; position:absolute; inset:9px; border-radius:40px; pointer-events:none; background:linear-gradient(115deg, rgba(255,255,255,.2) 0%, rgba(255,255,255,.05) 26%, transparent 44%); }
.island { position:absolute; top:19px; left:50%; width:31%; height:24px; transform:translateX(-50%); background:#000; border-radius:14px; }
/* Streak */
.streak { background:var(--ink); color:var(--cream); }
.streak h2 { color:var(--cream); } .streak .lead { color:#e6dcd1; }
.streak .grid { display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center; }
.week { list-style:none; padding:0; margin:0 0 26px; display:grid; grid-template-columns:repeat(7, 1fr); gap:8px; max-width:520px; }
.week li { display:flex; flex-direction:column; align-items:center; gap:6px; font-weight:900; font-size:13px; color:#d9cfc4; }
.week span { width:100%; aspect-ratio:1; display:grid; place-items:center; border:3px solid #8a776a; }
.week .t span { background:var(--ember); border-color:var(--cream); } .week .r span { border-style:dashed; }
.week svg { width:58%; height:58%; }
.legend { display:flex; gap:22px; flex-wrap:wrap; font-weight:700; font-size:15px; color:#e6dcd1; margin:0 0 22px; }
.legend i { display:inline-block; width:14px; height:14px; margin-right:6px; vertical-align:-2px; border:2px solid var(--cream); } .legend .t { background:var(--ember); } .legend .r { border-style:dashed; border-color:#8a776a; }
.streak ul.facts2 { list-style:none; padding:0; margin:0; display:grid; gap:12px; }
.streak ul.facts2 li { border-top:2px solid rgba(255,248,238,.25); padding-top:12px; } .streak ul.facts2 b { color:var(--ember); }
/* How it works: three beats */
.steps { list-style:none; counter-reset:s; padding:0; margin:0 0 28px; display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
.steps li { counter-increment:s; border-top:var(--rule) solid var(--ink); padding-top:12px; }
.steps li::before { content:counter(s); font:400 44px/1 var(--display); color:var(--ember); -webkit-text-stroke:2px var(--ink); paint-order:stroke fill; display:block; margin-bottom:6px; }
.steps h3 { font-size:24px; margin-bottom:6px; } .steps p { margin:0; color:var(--ink2); }
.beats { position:relative; display:flex; height:min(54vh, 460px); min-height:380px; }
.beat { all:unset; box-sizing:border-box; position:relative; flex:1; border:var(--rule) solid var(--ink); overflow:hidden; background:var(--paper); cursor:pointer; transition:flex .5s cubic-bezier(.16,1,.3,1), filter .3s; }
.beat:nth-child(1) { clip-path:polygon(0 0, 100% 0, 90% 100%, 0 100%); margin-right:-4%; }
.beat:nth-child(2) { clip-path:polygon(10% 0, 100% 0, 90% 100%, 0 100%); margin:0 -4%; }
.beat:nth-child(3) { clip-path:polygon(10% 0, 100% 0, 100% 100%, 0 100%); margin-left:-4%; background:var(--ink); }
.beats.focus .beat { filter:grayscale(1) brightness(.92); } .beats.focus .beat.on { flex:1.8; filter:none; }
.beat:focus-visible { outline:4px solid var(--ember); outline-offset:-10px; }
.tone { position:absolute; inset:0; background-image:radial-gradient(var(--ink) 1.1px, transparent 1.6px); background-size:7px 7px; }
.beat .lines { position:absolute; inset:0; width:100%; height:100%; stroke:var(--ember); opacity:.7; }
.beat img { position:absolute; left:50%; bottom:-2%; height:var(--h); width:auto; transform:translateX(-50%); }
.beat .lbl { position:absolute; top:16px; left:14%; z-index:2; font-family:var(--display); font-size:21px; line-height:1; background:#fff; border:3px solid var(--ink); padding:8px 10px; }
.beat:nth-child(1) .lbl { left:16px; } .beat:nth-child(3) .lbl { background:var(--ember); }
.beat .lbl small { display:block; font:900 13px var(--body); margin-top:4px; }
.beats .ex { position:absolute; right:14px; bottom:10px; z-index:5; font-size:12px; font-weight:900; background:#fff; padding:2px 6px; border:2px solid var(--ink); }
.btn { font:inherit; font-weight:900; min-height:48px; padding:0 18px; border:3px solid var(--ink); background:#fff; color:var(--ink); cursor:pointer; box-shadow:0 4px 0 var(--ink); transition:transform .12s, box-shadow .12s; }
.btn:hover { transform:translateY(1px); box-shadow:0 3px 0 var(--ink); } .btn:active { transform:translateY(3px); box-shadow:0 1px 0 var(--ink); }
.head-row { display:flex; justify-content:space-between; align-items:end; gap:16px; flex-wrap:wrap; }
/* Ranks: the belt strip */
.bspread { position:relative; min-height:min(60vh, 520px); border:var(--rule) solid var(--ink); overflow:hidden; background:var(--bg, radial-gradient(70% 80% at 62% 40%, #ff9b78 0%, #ff5a1f 60%, #bf4417 100%)); }
.wipe { position:absolute; inset:0; z-index:0; pointer-events:none; clip-path:circle(0 at 50% 100%); }
.bspread .lines { position:absolute; inset:0; width:100%; height:100%; z-index:1; stroke:var(--ink); opacity:.45; }
.bspread img.hero { position:absolute; right:8%; bottom:-3%; height:96%; width:auto; z-index:2; filter:drop-shadow(10px 10px 0 rgba(23,11,6,.3)); }
.now { position:absolute; left:24px; top:24px; z-index:4; background:var(--cream); border:3px solid var(--ink); padding:10px 14px; font-weight:900; }
.now b { font-family:var(--display); font-weight:400; font-size:30px; display:block; line-height:1; }
.say { position:absolute; right:30%; top:12%; z-index:4; background:var(--cream); border:4px solid var(--ink); border-radius:50%; padding:14px 22px; font:400 24px/1 var(--display); opacity:0; transition:opacity .2s; pointer-events:none; }
.say.on { opacity:1; }
.belts { display:flex; margin-top:var(--g); border:var(--rule) solid var(--ink); touch-action:none; cursor:ew-resize; }
.belts button { all:unset; flex:1; height:52px; background:var(--c); border-right:2px solid var(--ink); cursor:inherit; transition:flex .25s cubic-bezier(.16,1,.3,1); }
.belts button:last-child { border-right:0; } .belts button[aria-pressed="true"] { flex:2.2; outline:4px solid var(--cream); outline-offset:-8px; }
.belts button:focus-visible { outline:4px solid var(--ink); outline-offset:-6px; }
.bcap { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; font-weight:900; margin-top:12px; font-size:15px; }
/* Trust */
.trust ul { list-style:none; padding:0; margin:0 0 24px; display:grid; grid-template-columns:repeat(4, 1fr); gap:24px; }
.trust li { border-top:var(--rule) solid var(--ink); padding-top:12px; } .trust b { display:block; font:400 21px/1.15 var(--display); margin-bottom:6px; } .trust span { color:var(--ink2); }
/* FAQ */
.faq .qa { max-width:860px; border-top:3px solid var(--ink); }
.faq details { border-bottom:3px solid var(--ink); }
.faq summary { cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:16px; align-items:center; padding:18px 0; font:400 clamp(19px, 1.8vw, 23px)/1.2 var(--display); }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:""; flex:none; width:16px; height:16px; border-right:4px solid var(--ink); border-bottom:4px solid var(--ink); transform:rotate(45deg) translate(-3px, -3px); transition:transform .2s; }
.faq details[open] summary::after { transform:rotate(-135deg) translate(-3px, -3px); }
.faq details p { margin:0 0 20px; max-width:66ch; color:var(--ink2); }
/* Final call to action */
.final { background:radial-gradient(80% 110% at 50% 40%, #ffd23f 0%, #ff9a3a 45%, #ff6a2a 100%); text-align:center; }
.final h2 { font-size:clamp(42px, 6.4vw, 88px); } .final .lead { margin-inline:auto; color:var(--ink); font-weight:700; }
.final .note { display:block; margin-top:16px; color:var(--ink); }
/* Inner pages */
.page-head { padding:56px 0 32px; } .page-head h1 { font-size:clamp(40px, 5.6vw, 72px); margin-bottom:14px; }
.who { display:inline-flex; margin-top:6px; border:3px solid var(--ink); }
.who button { font:inherit; font-weight:900; min-height:44px; padding:0 22px; cursor:pointer; border:0; background:#fff; color:var(--ink); }
.who button[aria-pressed="true"] { background:var(--ink); color:#fff; }
.ranks { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:16px; }
.ranks li { border:var(--rule) solid var(--ink); background:#fff; padding:12px; display:flex; flex-direction:column; gap:8px; min-width:0; }
.ranks img { width:100%; height:auto; aspect-ratio:200 / 238; object-fit:contain; display:block; }
.ranks b { font:400 clamp(16px, 4.4vw, 20px)/1.1 var(--display); overflow-wrap:anywhere; hyphens:auto; } .ranks span { display:block; font-size:14px; overflow-wrap:anywhere; color:var(--ink2); }
.ranks .belt i { display:inline-block; width:22px; height:10px; background:var(--c); border:2px solid var(--ink); margin-right:6px; vertical-align:middle; }
.doc { padding:56px 0 72px; } .doc .wrap { max-width:820px; }
.doc h1 { font-size:clamp(40px, 5.6vw, 72px); margin-bottom:14px; } .doc h2 { font-size:30px; margin:44px 0 12px; }
.doc .muted { color:var(--ink2); } .doc li { margin:6px 0; } .doc a { font-weight:700; }
.doc details { border-bottom:3px solid var(--ink); } .doc summary { cursor:pointer; font-weight:900; padding:14px 0; }
.doc table { border-collapse:collapse; width:100%; display:block; overflow-x:auto; } .doc td, .doc th { text-align:left; padding:8px; vertical-align:top; border:2px solid var(--ink); }
/* Footer */
footer.site { padding:48px 0 36px; }
footer.site .wrap { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:24px; }
footer.site .fbrand img { height:24px; width:auto; } footer.site .fbrand p { max-width:34ch; color:var(--ink2); margin:12px 0 0; }
footer.site b { display:block; margin-bottom:8px; } footer.site nav { display:flex; flex-direction:column; gap:2px; }
footer.site nav a { text-decoration:none; padding:5px 0; } footer.site nav a:hover { text-decoration:underline; }
footer.site small { grid-column:1 / -1; color:var(--ink2); padding-top:18px; border-top:2px solid var(--ink); }
/* Phones and tablets */
@media (max-width: 960px) {
  nav.main, header.site .get { display:none; } .menu { display:inline-flex; }
  .spread { min-height:0; } .heroBtn { height:350px; left:-4%; top:52px; bottom:auto; } .vert .name { font-size:38px; }
  .copy { position:relative; left:auto; right:auto; bottom:auto; margin:396px 62px 16px 14px; } .copy h1 { font-size:34px; } .copy p { font-size:16px; }
  .sfx { top:30%; left:6%; font-size:48px; -webkit-text-stroke:6px var(--ink); }
  .friends .grid, .streak .grid { grid-template-columns:1fr; gap:32px; }
  .feat { grid-template-columns:1fr; gap:8px; padding:16px 0; } .feat.flip .txt { order:0; }
  .stage { padding:8px 0 24px; } .device { width:min(240px, 64vw); }
  .steps { grid-template-columns:1fr; gap:14px; }
  .bspread { min-height:620px; } .bspread img.hero { height:62%; right:-6%; } .say { right:40%; top:auto; bottom:44%; font-size:20px; }
  .belts button { height:44px; } .trust ul { grid-template-columns:1fr 1fr; } .ranks { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; }
  footer.site .wrap { grid-template-columns:1fr 1fr; } footer.site .fbrand { grid-column:1 / -1; }
  .sec { padding:56px 0; } .league { box-shadow:8px 8px 0 var(--ember); padding:18px; }
}
@media (max-width: 640px) { .chips { gap:8px; } .chips li { font-size:14px; padding:4px 9px; box-shadow:3px 3px 0 var(--ink); } .beats { height:360px; min-height:0; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; overscroll-behavior-x:contain; } .beats::-webkit-scrollbar { display:none; } .beat, .beats.focus .beat.on { flex:0 0 80%; height:100%; clip-path:none !important; margin:0 !important; scroll-snap-align:start; } .beat:nth-child(1) img { height:56%; } .beat:nth-child(2) img { height:66%; } .beat:nth-child(3) img { height:74%; } .beat .lbl, .beat:nth-child(1) .lbl { left:14px; top:14px; font-size:19px; } .beats .ex { right:auto; left:calc(80% - 82px); } }
@media (max-width: 420px) { .wrap { padding:0 16px; } .five { gap:6px; } .trust ul { grid-template-columns:1fr; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } *, *::before, *::after { transition-duration:.01ms !important; animation:none !important; } }
@media print { header.site, .sheet, .skip, .cover .heroBtn, .beats, .belts, .league button { display:none; } }
/* Heroes page: choose your fighter */
.fbar { display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-top:6px; } .fbar .who { margin-top:0; } .fhint { font-size:14px; color:var(--ink2); }
.fight { display:grid; grid-template-columns:minmax(0, 1.05fr) minmax(0, 1fr); gap:20px; align-items:start; }
.fstage { position:relative; overflow:hidden; min-height:500px; background:#fff; border:var(--rule) solid var(--ink); box-shadow:0 7px 0 var(--ink); }
.fstage .glow { position:absolute; inset:0; background:radial-gradient(60% 55% at 32% 62%, color-mix(in srgb, var(--belt) 55%, transparent), transparent 70%); transition:background .3s; }
.fstage .tone { position:absolute; inset:0; background-image:radial-gradient(rgba(23,11,6,.13) 1px, transparent 1.6px); background-size:6px 6px; pointer-events:none; }
.fstage .lines { position:absolute; inset:0; width:100%; height:100%; stroke:var(--ink); opacity:.16; pointer-events:none; }
.fstage .big { position:absolute; left:-2%; bottom:-4%; height:92%; aspect-ratio:200 / 238; z-index:2; border:0; padding:0; background:none; cursor:pointer; }
.fstage .big img { width:100%; height:100%; display:block; filter:drop-shadow(6px 6px 0 rgba(0,0,0,.18)); }
.fstage .info { position:absolute; right:18px; top:18px; z-index:3; width:min(54%, 320px); text-align:right; }
.fstage .num { font:900 12px var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--ink2); }
.fstage .nm { font:400 clamp(40px, 6vw, 68px)/.95 var(--display); margin:6px 0 10px; overflow-wrap:anywhere; }
.fstage .chip { display:inline-block; padding:4px 10px; border:3px solid var(--ink); background:var(--belt); color:var(--on); font:900 12px var(--body); letter-spacing:.06em; text-transform:uppercase; }
.fstage .lvl { display:block; margin-top:10px; font:400 20px var(--display); }
.fstage .bub { position:absolute; right:18px; bottom:78px; z-index:3; width:min(54%, 320px); margin:0; background:#fff; border:3px solid var(--ink); border-radius:22px; padding:12px 16px; font-size:15px; font-weight:700; }
.fstage .bub::after { content:""; position:absolute; left:-12px; bottom:20px; width:16px; height:16px; background:#fff; border-left:3px solid var(--ink); border-bottom:3px solid var(--ink); transform:rotate(45deg) skewX(8deg); }
.fstage .move { position:absolute; right:18px; bottom:18px; z-index:3; min-height:44px; border:3px solid var(--ink); background:var(--ember); color:#111; font:400 16px var(--display); padding:8px 16px; cursor:pointer; box-shadow:0 4px 0 var(--ink); }
.fstage .move:active { transform:translateY(3px); box-shadow:0 1px 0 var(--ink); } .fstage .move:disabled { background:#e9e4dc; cursor:default; }
.fstage .stamp { position:absolute; left:20px; top:20px; z-index:4; display:none; width:100px; height:100px; border:3px solid #c8322a; border-radius:50%; place-items:center; text-align:center; color:#c8322a; font:400 13px/1.1 var(--display); transform:rotate(-12deg); background:rgba(255,255,255,.85); }
.locked .fstage .stamp { display:grid; } .locked .fstage .big img { filter:brightness(0) opacity(.75); }
.fsfx { position:absolute; z-index:5; pointer-events:none; white-space:nowrap; font:400 46px/1 var(--display); color:var(--ember); -webkit-text-stroke:7px var(--ink); paint-order:stroke fill; transform:translate(-50%, -50%) rotate(-8deg); }
.roster { display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:8px; }
.tile { position:relative; aspect-ratio:1; border:3px solid var(--ink); background:#fff; cursor:pointer; overflow:hidden; padding:0; transition:transform .15s, box-shadow .15s; }
.tile img { width:100%; height:100%; object-fit:cover; display:block; }
.tile::after { content:""; position:absolute; left:0; right:0; bottom:0; height:9px; background:var(--belt); border-top:2px solid var(--ink); }
.tile .lv { position:absolute; left:4px; top:3px; font:900 10px var(--body); background:var(--ink); color:#fff; padding:0 5px; }
.tile .lk { position:absolute; inset:0; display:grid; place-items:center; font:400 13px var(--display); color:#fff; text-shadow:0 2px 0 var(--ink); }
.tile .lk[hidden] { display:none; }
.tile:hover { transform:translateY(-3px); } .tile[aria-pressed="true"] { transform:translateY(-5px); box-shadow:0 5px 0 var(--ink); outline:3px solid var(--ember); outline-offset:-7px; }
.tile.dark img { filter:brightness(0) opacity(.55); }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
@media (pointer: coarse) { .fhint { display:none; } }
@media (max-width:900px) { .fight { grid-template-columns:1fr; } .fstage { min-height:440px; } }
@media (max-width:480px) { .fstage { min-height:400px; } .fstage .info, .fstage .bub { width:58%; } .fstage .bub { font-size:13px; bottom:74px; } .fstage .nm { font-size:38px; } .roster { gap:6px; } }
.invite-row { margin:0 0 14px; }
#copied { margin-left:10px; font-weight:700; }