/* Unfair Tech — the homepage: option C, "Paper".
   The wireframe on the studio's paper theme (gathera-type.html's "Paper",
   gatheraapp.com's ground): ink type, one gradient, soft colour gathering at the
   edges. The product shows up once, in the opening reel, then leaves the page
   clean. Loads after styles.css, which carries the shared tokens, buttons and
   dialog. */

html, body { color-scheme: light; background: #F1F2F4; color: #14161A; }

.paper-ground { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background: #F1F2F4; }
.paper-ground i { position: absolute; width: 46vw; height: 46vw; border-radius: 50%; filter: blur(70px); }
.paper-ground i:nth-child(1) { left: -14vw; top: -18vw; background: #38BDF8; opacity: .28; }
.paper-ground i:nth-child(2) { right: -16vw; top: -10vw; background: #7C3AED; opacity: .18; }
.paper-ground i:nth-child(3) { left: 8vw; bottom: -30vw; background: #2E7CF6; opacity: .2; }
.paper-ground i:nth-child(4) { right: 2vw; bottom: -32vw; background: #FDDB4B; opacity: .26; }
.paper-ground .grain { opacity: .06; }

.page { position: relative; z-index: 2; display: flex; flex-direction: column; min-height: 100svh; }

/* ── Top: the splat in its tile, Contact ───────────────────────────────────── */
.top { position: relative; z-index: 8; display: flex; justify-content: space-between; align-items: flex-start;
  padding: max(env(safe-area-inset-top), clamp(18px, 2.8vw, 44px)) var(--gutter) 0; }
.tile-splat { width: clamp(52px, 4.8vw, 72px); height: clamp(52px, 4.8vw, 72px); border-radius: 27.5%; display: grid; place-items: center;
  background: linear-gradient(160deg, #16294a, #0c1526); box-shadow: 0 12px 28px rgba(20, 30, 60, .22), inset 0 1px 0 rgba(255, 255, 255, .12); }
.tile-splat img { width: 70%; height: auto; display: block; }
.contact-btn { margin-top: clamp(4px, .9vw, 14px); padding: 12px 2px; border: 0; background: none; cursor: pointer; color: #14161A;
  font: 600 clamp(12px, 1vw, 15px)/1 var(--disp); letter-spacing: .14em; text-transform: uppercase; transition: opacity .2s var(--ease); }
.contact-btn:hover { opacity: .65; }

/* ── The lockup ─────────────────────────────────────────────────────────────── */
.lock { position: relative; z-index: 6; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: clamp(20px, 5vh, 56px) var(--gutter) clamp(20px, 4vh, 48px); }
.wm { margin: 0; line-height: 0; }
.wm-svg { display: block; width: clamp(300px, 50vw, 940px); height: auto; overflow: visible; color: #14161A; }
.tag { margin: clamp(12px, 1.6vw, 24px) 0 0; font: 300 clamp(16px, 2.3vw, 42px)/1.2 var(--disp); letter-spacing: .03em; text-transform: uppercase; text-wrap: balance; color: #3A404B; }
.tag em { font-style: italic; }
.svc { margin: clamp(12px, 1.6vw, 26px) 0 0; padding: 0; list-style: none; font: 600 clamp(13px, 1.1vw, 19px)/1.7 var(--disp); letter-spacing: .04em; color: #6B7078; }
.svc li { display: inline-block; }
.svc li:not(:last-child)::after { content: "·"; margin: 0 .55em; }
.bar-rule { width: clamp(120px, 13.6vw, 272px); height: 2px; margin: clamp(30px, 6.4vh, 84px) auto clamp(24px, 5vh, 64px); border: 0; border-radius: 2px; background: #14161A; opacity: .85; }

/* ── 2027 · Inquiries ───────────────────────────────────────────────────────── */
.ask { display: flex; flex-direction: column; align-items: center; width: 100%; }
.ask h2 { margin: 0; display: grid; gap: 6px; font-weight: inherit; }
.ask .yr { font: 700 clamp(32px, 3vw, 56px)/1 var(--disp); letter-spacing: -.03em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ask .jl { font: 600 clamp(14px, 1.2vw, 20px)/1 var(--disp); letter-spacing: .12em; text-transform: uppercase; color: #14161A; }
.ask .join { margin-top: clamp(18px, 3vh, 30px); width: min(100%, 520px); max-width: none; }
.pill-field { position: relative; }
.pill-field input[type="email"] { width: 100%; height: 60px; padding: 0 130px 0 26px; border-radius: 999px; border: 1px solid rgba(20, 22, 26, .14);
  background: rgba(255, 255, 255, .85); color: #14161A; font: 400 16px/1 var(--disp); box-shadow: 0 16px 40px -18px rgba(20, 30, 60, .28); }
.pill-field input::placeholder { color: #8B9099; }
.pill-field input:focus { outline: none; border-color: #2E7CF6; box-shadow: 0 0 0 4px rgba(46, 124, 246, .15); }
.pill-field .btn { position: absolute; right: 6px; top: 6px; height: 48px; padding: 0 24px; border-radius: 999px; background: #14161A; color: #fff; box-shadow: none; }
.pill-field .btn:hover { background: #2B3140; }
.ask .join-done { justify-content: center; color: #14161A; }
.ask .join-done .ok { background: rgba(18, 128, 92, .12); color: #12805C; }
.ask .join-status { text-align: center; color: #6B7078; }
.ask .join.is-error .join-status { color: #B42318; }

.foot { position: relative; z-index: 6; margin-top: auto; display: flex; justify-content: space-between; gap: 8px 20px; flex-wrap: wrap;
  padding: 18px var(--gutter) max(env(safe-area-inset-bottom), 22px); font: 500 12px/1.5 var(--ui); color: #6B7078; }
.foot a { color: inherit; text-underline-offset: 3px; }
.foot a:hover { color: #14161A; }

/* ── The opening ceremony ────────────────────────────────────────────────────
   Two beats, never blocking — any click, key or scroll skips to the end, and
   reduced motion never sees it. First the reel: the product, all at once, for
   --t0. Then, as it whisks away, the name: UNFAIR resolves from wide-and-blurred
   to tight-and-sharp, the strike crosses out UN, TECH slides in and locks on,
   and the page rises around it. */
:root { --t0: 3.2s; }
.wm-svg .L, .wm-svg .w-strike { transform-box: fill-box; }
.intro .wm-svg { animation: wm-focus 1.1s var(--ease) calc(var(--t0) + .15s) both; }
.intro .w-unfair .L { animation: wm-track 1.15s var(--ease) calc(var(--t0) + .15s) both; }
.intro .w-strike { transform-origin: 0 50%; animation: wm-strike .55s cubic-bezier(.65, 0, .35, 1) calc(var(--t0) + 1.1s) both; }
.intro .w-word { animation: wm-center .8s var(--ease) calc(var(--t0) + 1.6s) both; }
.intro .w-tech .L { animation: wm-tech .8s var(--ease) calc(var(--t0) + 1.6s + var(--i) * 50ms) both; }
@keyframes wm-focus { from { opacity: 0; filter: blur(16px); } 55% { opacity: 1; } to { opacity: 1; filter: blur(0); } }
@keyframes wm-track { from { transform: translateX(var(--o)); } to { transform: none; } }
@keyframes wm-strike { from { transform: scaleX(0); } to { transform: none; } }
@keyframes wm-center { from { transform: translateX(var(--shift)); } to { transform: none; } }
@keyframes wm-tech { from { opacity: 0; transform: translateX(340px); } to { opacity: 1; transform: none; } }

.intro .top { animation: fade 1s var(--ease) calc(var(--t0) + 2.3s) both; }
.intro .lock .tag { animation: rise .9s var(--ease) calc(var(--t0) + 2.15s) both; }
.intro .lock .svc { animation: rise .9s var(--ease) calc(var(--t0) + 2.27s) both; }
.intro .lock .bar-rule { animation: rise .9s var(--ease) calc(var(--t0) + 2.39s) both; }
.intro .ask { animation: rise .9s var(--ease) calc(var(--t0) + 2.51s) both; }
.intro .foot { animation: fade 1s var(--ease) calc(var(--t0) + 2.6s) both; }

@media (prefers-reduced-motion: reduce) {
  .intro *, .intro .wm-svg { animation: none !important; }
  .reel { display: none !important; }
}

/* ── The reel ──────────────────────────────────────────────────────────────────
   Eight screens from the real product — the console's Ticket Sales and live
   gate scans, a broadcast, App Analytics, the visitor app, the crew app at the
   gate, a fair's website and an email campaign — laid out on a 1280×760 stage
   (600×900 on a tall screen) that the page scales to fit. Each one enters,
   runs, then leaves in its own direction (--ex/--ey/--er), in --x order. */
.reel { display: none; }
.intro .reel, .reel-out .reel { display: block; position: fixed; inset: 0; z-index: 30; overflow: hidden; pointer-events: none;
  font-family: var(--app); color: #fff; -webkit-font-smoothing: antialiased; }
.reel-out .reel { opacity: 0; transition: opacity .35s ease; }
.r-sprite { position: absolute; }
.reel-stage { position: absolute; left: 50%; top: 50%; width: 1280px; height: 760px; margin: -380px 0 0 -640px; scale: var(--s, .8); }
.reel-drift { position: absolute; inset: 0; animation: reel-drift calc(var(--t0) + 1.2s) cubic-bezier(.3, 0, .4, 1) both; }
@keyframes reel-drift { from { scale: .975; } to { scale: 1.03; } }

.sc { position: absolute; left: var(--l); top: var(--t); width: var(--w); rotate: var(--r, 0deg);
  animation: sc-out 1.15s cubic-bezier(.65, 0, .35, 1) calc(var(--t0) + var(--x) * 45ms) both; }
.sc-in { animation: sc-in .9s var(--ease) calc(var(--d) * 1s + .05s) both; }
@keyframes sc-in { from { opacity: 0; transform: translateY(30px) scale(.96); } }
@keyframes sc-out {
  40% { opacity: 1; filter: blur(0); }
  to { translate: var(--ex) var(--ey); rotate: calc(var(--r, 0deg) + var(--er)); scale: .92; opacity: 0; filter: blur(5px); }
}

/* Where each one sits, and where it goes. */
.s-web   { --l: 6px;   --t: 50px;  --w: 390px; --r: -3deg;  --ex: -80vw; --ey: -80vh;  --er: -8deg; }
.s-mail  { --l: 468px; --t: 22px;  --w: 290px;              --ex: 4vw;   --ey: -100vh; --er: -4deg; }
.s-stats { --l: -14px; --t: 410px; --w: 300px; --r: 1.5deg; --ex: -80vw; --ey: 80vh;   --er: -10deg; }
.s-sales { --l: 360px; --t: 166px; --w: 560px;              --ex: 0vw;   --ey: 110vh;  --er: -4deg; }
.s-push  { --l: 896px; --t: 44px;  --w: 320px; --r: 2deg;   --ex: 72vw;  --ey: -88vh;  --er: 10deg; }
.s-scans { --l: 690px; --t: 452px; --w: 300px;              --ex: 70vw;  --ey: 92vh;   --er: 8deg; }
.s-app   { --l: 136px; --t: 246px; --w: 236px; --r: -5deg;  --ex: -100vw; --ey: 16vh;  --er: -14deg; }
.s-crew  { --l: 962px; --t: 282px; --w: 226px; --r: 5deg;   --ex: 100vw; --ey: 20vh;   --er: 14deg; }
@media (max-aspect-ratio: 4/5) {
  .reel-stage { width: 600px; height: 1100px; margin: -550px 0 0 -300px; }
  .s-web   { --l: -150px; --t: 40px;  --ex: -110vw; --ey: -70vh; }
  .s-mail  { --l: 330px;  --t: 6px;   --ey: -110vh; }
  .s-push  { --l: 300px;  --t: 150px; --ex: 110vw; --ey: -70vh; }
  .s-sales { --l: 20px;   --t: 304px; --ey: 130vh; }
  .s-stats { --l: -140px; --t: 680px; --ex: -110vw; --ey: 70vh; }
  .s-app   { --l: 16px;   --t: 500px; --ex: -140vw; }
  .s-crew  { --l: 368px;  --t: 520px; --ex: 140vw; }
  .s-scans { --l: 170px;  --t: 780px; --ex: 90vw; --ey: 110vh; }
}

/* The console's surfaces. */
.r-card { padding: 18px 20px; border-radius: 18px; background: linear-gradient(180deg, #13233F, #0E1B32);
  border: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 50px 90px -34px rgba(10, 20, 42, .6), 0 18px 40px -20px rgba(10, 20, 42, .5); }
.ri { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.r-hd { display: flex; align-items: center; gap: 12px; }
.r-hd > div { flex: 1; min-width: 0; }
.r-hd b { display: block; font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; }
.r-hd small { display: block; margin-top: 3px; font-size: 11px; line-height: 1.35; color: rgba(255, 255, 255, .56); }
.r-hd.lg b { font-size: 20px; font-weight: 800; letter-spacing: -.025em; }
.r-hd.lg small { font-size: 11.5px; }
.r-badge { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; }
.r-badge.gold { background: rgba(232, 169, 49, .14); color: #E8A931; box-shadow: inset 0 0 0 1px rgba(232, 169, 49, .3); }
.r-badge.blue { background: rgba(74, 139, 212, .17); color: #86B6EE; }
.r-badge.violet { background: rgba(139, 127, 214, .18); color: #B2A8F4; }
.r-badge.pink { background: rgba(236, 72, 153, .15); color: #F49BCB; }
.r-pill { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font-size: 10.5px; font-weight: 700;
  background: rgba(255, 255, 255, .07); color: rgba(255, 255, 255, .72); }
.r-pill > i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.r-pill.live { background: rgba(16, 185, 129, .13); color: #6EE7B7; }
.r-pill.live > i { background: #10B981; animation: r-ping 1.6s ease-out infinite; }
@keyframes r-ping { from { box-shadow: 0 0 0 0 rgba(16, 185, 129, .55); } to { box-shadow: 0 0 0 7px rgba(16, 185, 129, 0); } }
.r-bar { height: 6px; border-radius: 3px; overflow: hidden; background: rgba(255, 255, 255, .08); }
.r-bar i { display: block; height: 100%; border-radius: 3px; transform-origin: 0 50%; scale: 0 1; }
@keyframes r-grow { to { scale: 1 1; } }
@keyframes r-draw { to { stroke-dashoffset: 0; } }
@keyframes r-fade { to { opacity: 1; } }
@keyframes r-gone { to { opacity: 0; } }
@keyframes r-rise { from { opacity: 0; translate: 0 12px; } }

/* Ticket Sales */
.r-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; }
.r-k { padding: 12px 13px 11px; border-radius: 13px; background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .07); }
.r-k > span { display: flex; justify-content: space-between; align-items: center; font-size: 11.5px; font-weight: 600; color: rgba(255, 255, 255, .72); }
.r-k u { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; }
.r-k u .ri { width: 13px; height: 13px; }
.r-k u.green { background: rgba(16, 185, 129, .15); color: #34D399; }
.r-k u.blue { background: rgba(74, 139, 212, .17); color: #86B6EE; }
.r-k u.gold { background: rgba(232, 169, 49, .15); color: #E8A931; }
.r-k b { display: block; margin-top: 8px; font-size: 21px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.r-k em { display: block; margin-top: 4px; font-size: 10.5px; font-style: normal; font-weight: 600; color: #34D399; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r-chart { margin: 14px -20px 0; padding: 14px 20px 0; border-top: 1px solid rgba(255, 255, 255, .06); }
.r-ch-hd { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; }
.r-legend { display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 600; color: rgba(255, 255, 255, .6); }
.r-legend i { width: 8px; height: 8px; border-radius: 2px; }
.r-legend .g { background: #E8A931; }
.r-legend .b { margin-left: 8px; background: #4A8BD4; }
.r-chart svg { display: block; width: 520px; height: 130px; margin-top: 10px; overflow: visible; }
.r-grid { fill: none; stroke: rgba(255, 255, 255, .06); }
.r-area { opacity: 0; animation: r-fade 1.1s ease 1.3s forwards; }
.r-line { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: r-draw 1.9s cubic-bezier(.45, 0, .2, 1) .55s forwards; }
.r-line.g { stroke: #E8A931; }
.r-line.b { stroke: #4A8BD4; animation-delay: .7s; }
.r-now, .r-now-ring { fill: #E8A931; opacity: 0; transform-box: fill-box; transform-origin: center; }
.r-now { animation: r-fade .3s ease 2.35s forwards; }
.r-now-ring { animation: r-ring 1.3s ease-out 2.45s infinite; }
@keyframes r-ring { from { opacity: .55; transform: scale(1); } to { opacity: 0; transform: scale(3.4); } }
.r-days { display: flex; justify-content: space-between; margin-top: 6px; font-size: 10px; color: rgba(255, 255, 255, .42); }

/* Live gate scans: new rows push in from the top. */
.r-feed-win { height: 176px; margin: 10px -4px 0; overflow: hidden; -webkit-mask-image: linear-gradient(#000 78%, transparent); mask-image: linear-gradient(#000 78%, transparent); }
.r-feed { margin: 0; padding: 0; list-style: none; translate: 0 -132px; animation: r-feed 2.7s cubic-bezier(.3, 0, .2, 1) .75s both; }
@keyframes r-feed { 0%, 14% { translate: 0 -132px; } 30%, 47% { translate: 0 -88px; } 63%, 80% { translate: 0 -44px; } 96%, 100% { translate: 0 0; } }
.r-feed li { height: 44px; display: flex; align-items: center; gap: 10px; padding: 0 6px; border-radius: 10px; }
.r-feed li:nth-child(3) { animation: r-flash 1.1s ease 1.25s both; }
.r-feed li:nth-child(2) { animation: r-flash 1.1s ease 1.95s both; }
.r-feed li:nth-child(1) { animation: r-flash 1.1s ease 2.65s both; }
@keyframes r-flash { from { background: rgba(16, 185, 129, .16); } to { background: transparent; } }
.r-feed li > i { width: 7px; height: 7px; border-radius: 50%; background: #10B981; flex: none; }
.r-feed div { min-width: 0; }
.r-feed b { display: block; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.r-feed small { display: block; margin-top: 2px; font-size: 10.5px; color: rgba(255, 255, 255, .5); }
.r-feed time { margin-left: auto; font-size: 10px; color: rgba(255, 255, 255, .42); white-space: nowrap; }
.r-foot { margin: 8px 0 0; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .07); font-size: 10.5px; line-height: 1.5; color: rgba(255, 255, 255, .6); }
.r-foot b { color: #fff; font-variant-numeric: tabular-nums; }
.r-foot em { font-style: normal; font-weight: 700; color: #F87171; }

/* Broadcast: sending → delivered. */
.r-field { margin-top: 10px; padding: 8px 11px; border-radius: 10px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); }
.r-hd + .r-field { margin-top: 14px; }
.r-field small { display: block; font-size: 9px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: rgba(255, 255, 255, .45); }
.r-field b { display: block; margin-top: 3px; font-size: 13px; font-weight: 700; }
.r-field span { display: block; margin-top: 3px; font-size: 11px; line-height: 1.4; color: rgba(255, 255, 255, .72); }
.r-aud { display: flex; gap: 6px; margin-top: 10px; }
.r-aud span { padding: 5px 10px; border-radius: 999px; font-size: 10px; font-weight: 700; color: rgba(255, 255, 255, .62); border: 1px solid rgba(255, 255, 255, .12); }
.r-aud .on { color: #F5D9A6; background: rgba(232, 169, 49, .14); border-color: rgba(232, 169, 49, .45); }
.r-send { margin-top: 12px; }
.r-send .r-bar i { background: linear-gradient(90deg, #2B5EA7, #4A8BD4); animation: r-grow 1.4s cubic-bezier(.45, 0, .2, 1) .55s forwards; }
.r-send p { display: flex; justify-content: space-between; align-items: center; margin: 7px 0 0; font-size: 10.5px; color: rgba(255, 255, 255, .62); }
.r-send p b { color: #fff; font-variant-numeric: tabular-nums; }
.r-ok { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: #34D399; opacity: 0; animation: r-fade .35s ease 1.95s forwards; }
.r-ok .ri { width: 12px; height: 12px; stroke-width: 3; }
.r-state { background: rgba(74, 139, 212, .16); color: #86B6EE; animation: r-delivered .35s ease 1.95s forwards; }
@keyframes r-delivered { to { background: rgba(16, 185, 129, .13); color: #6EE7B7; } }
.r-sw { display: grid; }
.r-sw > span { grid-area: 1 / 1; }
.r-sw > span:first-child { animation: r-gone .3s ease 1.95s forwards; }
.r-sw > span:last-child { opacity: 0; animation: r-fade .3s ease 2s forwards; }

/* App Analytics */
.r-k4 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.r-k4 > div { padding: 10px 11px 9px; border-radius: 12px; background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .07); }
.r-k4 small { display: block; font-size: 10px; font-weight: 600; color: rgba(255, 255, 255, .6); }
.r-k4 b { display: block; margin-top: 4px; font-size: 16px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.r-k4 svg { display: block; width: 100%; height: 22px; margin-top: 6px; overflow: visible; }
.r-spark { fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: r-draw 1.7s cubic-bezier(.45, 0, .2, 1) .6s forwards; }

/* Email campaign */
.r-mail-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.r-mail-stats small { display: block; font-size: 9.5px; font-weight: 600; color: rgba(255, 255, 255, .55); }
.r-mail-stats b { display: block; margin-top: 3px; font-size: 16px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.r-mail .r-bar { margin-top: 10px; }
.r-mail .r-bar i { width: 46%; background: linear-gradient(90deg, #EC4899, #8B5CF6); animation: r-grow 1.6s cubic-bezier(.45, 0, .2, 1) .6s forwards; }

/* A fair's website */
.r-win { overflow: hidden; border-radius: 14px; background: #0E1B32; border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 50px 90px -34px rgba(10, 20, 42, .6), 0 18px 40px -20px rgba(10, 20, 42, .5); }
.r-chrome { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: #172A47; }
.r-chrome > i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .18); }
.r-url { display: flex; align-items: center; gap: 5px; margin: 0 auto; translate: -14px 0; padding: 3px 12px; border-radius: 7px; background: rgba(0, 0, 0, .25); font-size: 10px; color: rgba(255, 255, 255, .7); }
.r-url .ri { width: 10px; height: 10px; }
.r-site { padding: 12px 16px 16px; background: radial-gradient(90% 120% at 88% 0%, rgba(232, 169, 49, .3), transparent 55%), linear-gradient(170deg, #1C3762, #0D1E35 72%); }
.r-nav { display: flex; align-items: center; gap: 12px; font-size: 9.5px; color: rgba(255, 255, 255, .7); }
.r-nav b { margin-right: auto; font-size: 10.5px; font-weight: 800; letter-spacing: -.01em; color: #fff; }
.r-nav em { padding: 5px 10px; border-radius: 999px; font-style: normal; font-weight: 800; background: #E8A931; color: #152A4A; }
.r-hero { margin-top: 20px; animation: r-rise .9s var(--ease) .5s both; }
.r-hero small { font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #E8A931; }
.r-hero h4 { margin: 6px 0 0; font-size: 27px; line-height: 1; font-weight: 800; letter-spacing: -.035em; }
.r-hero p { max-width: 250px; margin: 8px 0 0; font-size: 10.5px; line-height: 1.45; color: rgba(255, 255, 255, .7); }
.r-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 14px; }
.r-tiles span { height: 44px; display: flex; align-items: flex-end; padding: 7px 8px; border-radius: 10px; font-size: 9.5px; font-weight: 800; animation: r-rise .8s var(--ease) both; }
.r-tiles .t-rodeo { background: linear-gradient(160deg, #F97316, #9A3412); animation-delay: .75s; }
.r-tiles .t-stage { background: linear-gradient(160deg, #8B5CF6, #4C1D95); animation-delay: .85s; }
.r-tiles .t-rides { background: linear-gradient(160deg, #3B82F6, #1E3A8A); animation-delay: .95s; }

/* The phones: the product's own canvas, navy to night. */
.r-phone { aspect-ratio: 236 / 486; padding: 7px; border-radius: 38px; background: #0A0F1A;
  box-shadow: 0 60px 100px -34px rgba(10, 20, 42, .7), 0 20px 40px -20px rgba(10, 20, 42, .5), inset 0 0 0 1.5px #273142; }
.r-screen { position: relative; height: 100%; overflow: hidden; border-radius: 31px;
  background: radial-gradient(90% 50% at 90% 0%, rgba(232, 169, 49, .16), transparent 60%), linear-gradient(180deg, #152A4A, #0D1E35 55%, #08131F); }
.r-screen::before { content: ""; position: absolute; top: 8px; left: 50%; z-index: 6; width: 64px; height: 19px; margin-left: -32px; border-radius: 10px; background: #05070B; }
.r-sb { position: relative; z-index: 3; display: flex; justify-content: space-between; align-items: center; padding: 11px 22px 10px 24px; margin-bottom: -10px; font-size: 10.5px; font-weight: 700;
  background: linear-gradient(#152A4A 62%, rgba(21, 42, 74, 0)); }
.r-crewapp .r-sb { background: none; }
.r-sig { display: flex; align-items: flex-end; gap: 1.5px; }
.r-sig i { width: 2.5px; border-radius: 1px; background: #fff; }
.r-sig i:nth-child(1) { height: 4px; } .r-sig i:nth-child(2) { height: 5.5px; } .r-sig i:nth-child(3) { height: 7px; } .r-sig i:nth-child(4) { height: 8.5px; }

/* The visitor app: home, and a broadcast arriving. */
.r-scroll { padding: 18px 14px 0; animation: r-scroll 2.6s cubic-bezier(.45, 0, .25, 1) .95s both; }
@keyframes r-scroll { to { translate: 0 -58px; } }
.r-kicker { margin: 0; font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #E8A931; }
.r-scroll h5 { margin: 6px 0 12px; font-size: 22px; line-height: 1.06; font-weight: 800; letter-spacing: -.03em; }
.r-announce { display: flex; gap: 8px; padding: 9px 10px; border-radius: 12px; font-size: 10px; line-height: 1.4; color: #F5D9A6;
  background: rgba(232, 169, 49, .12); border: 1px solid rgba(232, 169, 49, .28); }
.r-announce .ri { width: 14px; height: 14px; margin-top: 1px; color: #E8A931; }
.r-stat3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 10px; }
.r-stat3 > div { padding: 9px 4px 8px; border-radius: 12px; text-align: center; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); }
.r-stat3 u { width: 22px; height: 22px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; background: rgba(139, 92, 246, .2); color: #C4B5FD; }
.r-stat3 u .ri { width: 12px; height: 12px; }
.r-stat3 b { display: block; margin-top: 4px; font-size: 17px; font-weight: 800; }
.r-stat3 small { display: block; font-size: 8.5px; color: rgba(255, 255, 255, .6); }
.r-act { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 9px 10px; border-radius: 12px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); }
.r-act u { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; }
.r-act u .ri { width: 15px; height: 15px; }
.r-act u.gold { background: rgba(232, 169, 49, .16); color: #E8A931; }
.r-act u.blue { background: rgba(74, 139, 212, .18); color: #86B6EE; }
.r-act b { display: block; font-size: 11.5px; font-weight: 700; }
.r-act small { display: block; font-size: 9px; color: rgba(255, 255, 255, .55); }
.r-tonight { margin-top: 8px; padding: 12px; border-radius: 14px; background: radial-gradient(120% 90% at 85% 0%, rgba(232, 169, 49, .38), transparent 60%), linear-gradient(160deg, #3B2A6B, #1B2A55); }
.r-tonight small { display: block; font-size: 8.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #F5D9A6; }
.r-tonight b { display: block; margin-top: 4px; font-size: 13px; line-height: 1.2; font-weight: 800; }
.r-tonight span { display: inline-block; margin-top: 8px; padding: 4px 9px; border-radius: 999px; font-size: 9px; font-weight: 800; background: #E8A931; color: #152A4A; }
.r-note { position: absolute; left: 8px; right: 8px; top: 32px; z-index: 5; display: flex; gap: 8px; padding: 9px 10px; border-radius: 16px; color: #111827;
  background: rgba(246, 247, 250, .96); box-shadow: 0 14px 30px -8px rgba(0, 0, 0, .55);
  translate: 0 -150%; opacity: 0; animation: r-note .75s cubic-bezier(.2, .9, .25, 1.08) 2.05s forwards; }
@keyframes r-note { to { translate: 0 0; opacity: 1; } }
.r-note-ic { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 7px; background: linear-gradient(160deg, #16294a, #0c1526); }
.r-note-ic img { width: 72%; height: auto; display: block; }
.r-note > div { min-width: 0; }
.r-note small { display: block; font-size: 8.5px; color: #6B7280; }
.r-note small b { font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #374151; }
.r-note > div > b { display: block; margin-top: 2px; font-size: 10.5px; font-weight: 800; }
.r-note span { display: block; font-size: 9.5px; line-height: 1.35; color: #374151; }
.r-tabbar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; display: grid; grid-template-columns: repeat(4, 1fr); padding: 8px 6px 15px;
  background: #0A1626; border-top: 1px solid rgba(255, 255, 255, .08); }
.r-tabbar span { position: relative; display: grid; justify-items: center; gap: 3px; font-size: 8.5px; font-weight: 600; color: rgba(255, 255, 255, .5); }
.r-tabbar .ri { width: 16px; height: 16px; }
.r-tabbar .on { color: #E8A931; }
.r-tabbar em { position: absolute; top: -3px; right: 11px; min-width: 13px; height: 13px; display: grid; place-items: center; border-radius: 7px;
  font-size: 8px; font-style: normal; font-weight: 800; background: #E8A931; color: #152A4A; }

/* The crew app: scan, then the valid-ticket sheet. */
.r-crewapp { background: linear-gradient(180deg, #13284A, #0A1628); }
.r-crewapp::after { content: ""; position: absolute; inset: 0; z-index: 4; background: rgba(4, 8, 16, .5); opacity: 0; animation: r-fade .45s ease 1.45s forwards; }
.r-crew-hd { padding: 18px 16px 0; }
.r-crew-hd small { display: block; font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #E8A931; }
.r-crew-hd b { display: block; margin-top: 4px; font-size: 15px; font-weight: 800; letter-spacing: -.02em; }
.r-finder { position: relative; width: 150px; height: 150px; margin: 20px auto 0; border-radius: 18px; overflow: hidden;
  background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, .07), rgba(0, 0, 0, .3)); }
.r-finder > i { position: absolute; width: 26px; height: 26px; border: 3px solid #E8A931; }
.r-finder > i:nth-child(1) { top: 9px; left: 9px; border-right: 0; border-bottom: 0; border-radius: 9px 0 0 0; }
.r-finder > i:nth-child(2) { top: 9px; right: 9px; border-left: 0; border-bottom: 0; border-radius: 0 9px 0 0; }
.r-finder > i:nth-child(3) { bottom: 9px; left: 9px; border-right: 0; border-top: 0; border-radius: 0 0 0 9px; }
.r-finder > i:nth-child(4) { bottom: 9px; right: 9px; border-left: 0; border-top: 0; border-radius: 0 0 9px 0; }
.r-qr { position: absolute; left: 36px; top: 36px; width: 78px; height: 78px; rotate: -4deg; }
.r-scanline { position: absolute; left: 14px; right: 14px; top: 18px; height: 2px; border-radius: 1px; background: linear-gradient(90deg, transparent, #E8A931, transparent);
  box-shadow: 0 0 12px rgba(232, 169, 49, .9); animation: r-scan .55s ease-in-out .3s 2 alternate both; }
@keyframes r-scan { to { top: 130px; } }
.r-hint { margin: 12px 0 0; text-align: center; font-size: 10px; color: rgba(255, 255, 255, .55); }
.r-crew-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 14px 0; }
.r-crew-stats > div { padding: 10px; border-radius: 12px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); }
.r-crew-stats b { display: block; font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
.r-crew-stats small { display: block; margin-top: 2px; font-size: 8.5px; color: rgba(255, 255, 255, .55); }
.r-valid { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; padding: 20px 16px 18px; border-radius: 24px 24px 0 0; text-align: center;
  background: #F8FAFC; color: #1F2937; box-shadow: 0 -20px 40px rgba(0, 0, 0, .35); translate: 0 105%; animation: r-sheet .7s cubic-bezier(.2, .9, .2, 1) 1.45s forwards; }
@keyframes r-sheet { to { translate: 0 0; } }
.r-check { width: 54px; height: 54px; margin: 0 auto; display: grid; place-items: center; border-radius: 50%; background: #D1FAE5; color: #059669;
  scale: .4; opacity: 0; animation: r-pop .5s cubic-bezier(.3, 1.6, .5, 1) 1.9s forwards; }
.r-check .ri { width: 26px; height: 26px; stroke-width: 3; }
@keyframes r-pop { to { scale: 1; opacity: 1; } }
.r-valid > b { display: block; margin-top: 10px; font-size: 16px; font-weight: 800; letter-spacing: -.01em; }
.r-valid p { margin: 4px 0 0; font-size: 10.5px; line-height: 1.4; color: #4B5563; }
.r-valid-row { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 10px; padding: 8px; border-radius: 10px; font-size: 9.5px; color: #374151; background: #EEF2F7; }
.r-valid-row .ri { width: 12px; height: 12px; }
.r-done { display: block; margin-top: 10px; padding: 9px; border-radius: 12px; font-size: 11.5px; font-weight: 700; color: #fff; background: linear-gradient(180deg, #4A8BD4, #2B5EA7); }

/* ── Small screens ──────────────────────────────────────────────────────────── */
@media (max-width: 560px) {
  .wm-svg { width: 86vw; }
  .svc { max-width: 22em; }
  .pill-field input[type="email"] { padding-right: 26px; }
  .pill-field .btn { position: static; width: 100%; margin-top: 10px; height: 54px; }
  .foot { justify-content: center; text-align: center; }
}