/* UNBND dark theme for the inner pages (races, join, payment, rules, support, upload).
   Loaded after each page's own styles: it turns the light cards dark and gives every page the homepage's look:
   glass header, a pink-lit page top with film grain, layered cards, pill buttons and the big footer. */

/* The pages' colour names, re-pointed for dark: "white" is now a card, "paper" an input, "black" the ink */
:root {
  --white: #131317;
  --paper: #0c0c0f;
  --line: rgba(255,255,255,.12);
  --muted: #a3a3ad;
  --black: #f4f4f6;
  --ink: #070708;
  --edge: rgba(255,255,255,.08);
  --edge-2: rgba(255,255,255,.15);
  --text-2: rgba(255,255,255,.74);
  --green: #19c37d;
  --ease: cubic-bezier(.2,.8,.2,1);
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .7 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --spot: radial-gradient(420px circle at var(--mx, -999px) var(--my, -999px), rgba(254,144,174,.11), transparent 45%);
  color-scheme: dark;
}
html { background: var(--ink); }
body { background: var(--ink); color: #fff; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
::selection { background: var(--pink); color: #000; }
html { overflow-x: clip; }

/* ---------- Header (same as the homepage) ---------- */
.hdr { position: sticky; top: 0; z-index: 40; background: rgba(7,7,8,.62); -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px); border-bottom: 1px solid transparent; padding-top: env(safe-area-inset-top, 0px); transition: background .35s, border-color .35s; }
html.scrolled .hdr { background: rgba(7,7,8,.84); border-bottom-color: var(--edge); }
.hdr-in { max-width: 1200px; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; gap: 8px; height: 68px; }
@media (min-width: 760px) { .hdr-in { padding: 0 32px; } }
.hdr .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; color: #fff; }
.hdr .brand b { display: block; font: italic 900 1.8rem/.86 "Barlow Condensed", "Arial Narrow", sans-serif; letter-spacing: -.01em; }
.hdr .brand small { display: block; font: 700 .58rem/1 "Barlow Condensed", sans-serif; letter-spacing: .34em; text-transform: uppercase; color: var(--pink); margin-top: 4px; }
.hdr .hnav { display: none; gap: 2px; }
.hdr .hnav a { position: relative; text-decoration: none; font: 700 .98rem/1 "Barlow Condensed", sans-serif; text-transform: uppercase; letter-spacing: .09em; padding: 12px; color: rgba(255,255,255,.7); transition: color .2s; }
.hdr .hnav a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 5px; height: 2px; border-radius: 2px; background: var(--pink); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.hdr .hnav a:hover { color: #fff; } .hdr .hnav a:hover::after { transform: scaleX(1); }
.hdr .hnav a[aria-current="page"] { color: #fff; } .hdr .hnav a[aria-current="page"]::after { transform: scaleX(1); }
.hdr .ig { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; text-decoration: none; color: #fff; transition: background .2s, color .2s; }
.hdr .ig:hover { color: var(--pink); background: rgba(255,255,255,.06); }
.hdr .ig svg { width: 22px; height: 22px; }
.hdr .join { text-decoration: none; display: inline-flex; align-items: center; gap: 8px; background: var(--pink); color: #000; border-radius: 999px; padding: 9px 9px 9px 16px; font: 800 1rem/1 "Barlow Condensed", sans-serif; text-transform: uppercase; letter-spacing: .07em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 8px 24px -12px rgba(254,144,174,.7); transition: transform .2s var(--ease); }
.hdr .join:hover { transform: translateY(-1px); }
.hdr .join small { background: #000; color: var(--pink); border-radius: 999px; padding: 5px 8px; font: 800 .82rem/1 "Barlow Condensed", sans-serif; letter-spacing: .02em; }
.hdr .burger { width: 44px; height: 44px; border: 1px solid var(--edge-2); border-radius: 50%; background: rgba(255,255,255,.03); display: grid; place-content: center; gap: 5px; cursor: pointer; padding: 0; margin-left: 2px; }
.hdr .burger i { display: block; width: 18px; height: 2px; border-radius: 2px; background: #fff; transition: transform .3s var(--ease); }
.hdr .burger[aria-expanded="true"] i:first-child { transform: translateY(3.5px) rotate(45deg); }
.hdr .burger[aria-expanded="true"] i:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.sheet { position: fixed; inset: calc(env(safe-area-inset-top, 0px) + 68px) 0 0; z-index: 39; padding: 14px 20px 32px; overflow-y: auto;
  background: radial-gradient(500px 360px at 100% 0%, rgba(254,144,174,.16), transparent 70%), var(--ink); }
.sheet[hidden] { display: none; }
.sheet a.row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 17px 2px; border-bottom: 1px solid var(--edge); text-decoration: none; color: #fff; font: italic 800 2rem/1 "Barlow Condensed", sans-serif; text-transform: uppercase; animation: sheetIn .5s var(--ease) both; }
.sheet a.row:nth-child(2) { animation-delay: .03s; } .sheet a.row:nth-child(3) { animation-delay: .06s; } .sheet a.row:nth-child(4) { animation-delay: .09s; }
.sheet a.row:nth-child(5) { animation-delay: .12s; } .sheet a.row:nth-child(6) { animation-delay: .15s; } .sheet a.row:nth-child(7) { animation-delay: .18s; }
.sheet a.row small { font: 500 .88rem/1.2 Barlow, sans-serif; text-transform: none; color: var(--muted); text-align: right; }
.sheet a.row[aria-current="page"] { color: var(--pink); }
.sheet .sjoin { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 24px; border-radius: 999px; padding: 16px; background: var(--pink); color: #000; text-decoration: none; font: 800 1.1rem/1 "Barlow Condensed", sans-serif; letter-spacing: .07em; text-transform: uppercase; animation: sheetIn .5s .2s var(--ease) both; }
.sheet .sjoin span { background: #000; color: var(--pink); border-radius: 999px; padding: 5px 9px; }
@keyframes sheetIn { from { opacity: 0; transform: translateY(12px); } }
html.locked { overflow: hidden; }
@media (min-width: 960px) { .hdr .hnav { display: flex; } .hdr .burger, .sheet { display: none !important; } }
@media (max-width: 380px) { .hdr .join small { display: none; } .hdr .join { padding: 10px 14px; } }

/* ---------- Page top: lit pink from the corner, with track lanes, film grain and speed lines ---------- */
.hero { isolation: isolate; background: radial-gradient(min(900px, 120vw) 340px at 88% -16%, rgba(254,144,174,.3), transparent 70%), var(--ink) !important; color: #fff; padding-top: 40px !important; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: var(--grain); opacity: .08; mix-blend-mode: overlay;
  -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
.hero::after { background: repeating-linear-gradient(115deg, transparent 0 64px, rgba(254,144,174,.12) 64px 66px) !important;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 35%, rgba(0,0,0,.6) 70%, transparent 100%) !important; mask-image: linear-gradient(to bottom, transparent 0%, #000 35%, rgba(0,0,0,.6) 70%, transparent 100%) !important; }
.hero-inner { z-index: 2; }
.hero-inner::before { content: "UNBND · Mumbai"; display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; padding: 7px 13px 7px 12px; border-radius: 999px; font: 700 .74rem/1 "Barlow Condensed", sans-serif; letter-spacing: .26em; text-transform: uppercase; color: rgba(255,255,255,.85); background: rgba(255,255,255,.05); border: 1px solid var(--edge-2); }
.hero h1 { color: #fff; letter-spacing: -.02em; text-shadow: -.05em 0 0 rgba(254,144,174,.55), -.1em 0 0 rgba(254,144,174,.2); }
.hero .tagline { color: var(--text-2); font-weight: 500; }
.hero .speed { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.hero .speed i { position: absolute; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--pink)); box-shadow: 0 0 12px rgba(254,144,174,.6); left: -40%; width: 36%; opacity: 0; animation: unbndZip 3.6s cubic-bezier(.5,0,.3,1) infinite; }
.hero .speed i:nth-child(1) { top: 30%; }
.hero .speed i:nth-child(2) { top: 46%; width: 24%; animation-delay: 1.2s; }
.hero .speed i:nth-child(3) { top: 62%; width: 42%; animation-delay: 2.4s; background: linear-gradient(90deg, transparent, #fff); box-shadow: none; }
@keyframes unbndZip { 0% { transform: translateX(0); opacity: 0; } 15% { opacity: .85; } 100% { transform: translateX(380%); opacity: 0; } }

/* ---------- Cards, inputs and buttons ---------- */
.card, .group, .run, .feat, .rc, .mbox, .modal-box { background: var(--spot), linear-gradient(180deg, #17171c, #111115); border: 1px solid var(--edge); color: #fff;
  box-shadow: 0 40px 80px -46px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.05) !important; }
input[type="text"], input[type="tel"], input[type="email"], input[type="number"], input[type="url"], select, textarea { color: #fff; background-color: var(--paper); border-color: var(--line); transition: border-color .2s, box-shadow .2s, background-color .2s; }
input::placeholder, textarea::placeholder { color: #7d7d88; }
input:hover, select:hover, textarea:hover { border-color: var(--edge-2); }
input:focus, select:focus, textarea:focus { background-color: #08080a !important; border-color: var(--pink) !important; box-shadow: 0 0 0 4px rgba(254,144,174,.16); }
.btn { background: var(--pink); color: #000; border-radius: 999px; letter-spacing: .05em; box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 12px 30px -16px rgba(254,144,174,.6); transition: transform .25s var(--ease), box-shadow .25s var(--ease), opacity .2s; }
.btn:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 18px 40px -16px rgba(254,144,174,.8); }
.btn:active { transform: scale(.98); }
.btn.pink { background: var(--pink); color: #000; }
.btn[disabled] { transform: none; }
.copy { background: var(--paper); color: #fff; }
.idin b { background: #2a2a31 !important; color: var(--pink) !important; }   /* part of the box, not a button */
.err, .summary { color: #ff8a9c; }
.summary { background: rgba(208,2,27,.14) !important; border-color: rgba(255,95,109,.5) !important; }
.summary li, .summary b { color: #ffc2cc; }
a { color: inherit; }
.hint { color: var(--muted); }
.spinner { border-color: var(--paper); border-top-color: var(--pink); }
:focus-visible { outline-color: var(--pink); }

/* ---------- Footer (same as the homepage) ---------- */
.site-foot { display: none; }
.sfoot { position: relative; overflow: hidden; background: #000; color: rgba(255,255,255,.8); padding: 0; border-top: 1px solid var(--edge); margin-top: 64px; font-size: 16px; }
.sfoot .finish { height: 12px; background: repeating-conic-gradient(#fff 0 25%, #000 0 50%) 0 0 / 12px 12px; opacity: .9; }
.sfoot .sf-in { max-width: 1200px; margin: 0 auto; padding: 56px 20px 0; }
@media (min-width: 760px) { .sfoot .sf-in { padding: 56px 32px 0; } }
.sfoot .sf-in::after { content: "UNBND"; display: block; margin: 34px 0 -.2em; font: italic 900 clamp(6rem, 31vw, 25rem)/.78 "Barlow Condensed", "Arial Narrow", sans-serif; letter-spacing: -.045em; text-align: center; white-space: nowrap; pointer-events: none;
  color: transparent; -webkit-text-stroke: 1px rgba(254,144,174,.28); background: linear-gradient(180deg, rgba(254,144,174,.16), transparent 75%); -webkit-background-clip: text; background-clip: text; }
.sfoot .fgrid { display: grid; gap: 34px; }
.sfoot .fbrand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: #fff; }
.sfoot .fbrand img { width: 52px; height: 52px; }
.sfoot .fbrand b { display: block; font: italic 900 2.8rem/.85 "Barlow Condensed", sans-serif; }
.sfoot .fbrand small { display: block; font: 700 .68rem/1 "Barlow Condensed", sans-serif; letter-spacing: .32em; text-transform: uppercase; margin-top: 6px; color: var(--pink); }
.sfoot p { margin: 14px 0 0; max-width: 34ch; color: var(--text-2); }
.sfoot h3 { margin: 0 0 12px; font: 700 .76rem/1 "Barlow Condensed", sans-serif; letter-spacing: .24em; text-transform: uppercase; color: var(--pink); }
.sfoot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sfoot a { text-decoration: none; color: rgba(255,255,255,.85); transition: color .2s; } .sfoot a:hover { color: var(--pink); }
.sfoot .igf { display: inline-flex; gap: 8px; align-items: center; }
.sfoot .igf svg { width: 20px; height: 20px; }
.sfoot .fcols { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.sfoot .fbot { margin-top: 44px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.1); font-size: .88rem; color: rgba(255,255,255,.5); }
@media (min-width: 760px) { .sfoot .fgrid { grid-template-columns: 1.2fr 2fr; } .sfoot .fcols { grid-template-columns: repeat(3, 1fr); } }

@media (prefers-reduced-motion: reduce) { .hero .speed { display: none; } .sheet a.row, .sheet .sjoin { animation: none; } }

/* ---------- Page details ---------- */
/* Numbered steps and rules */
.step-n, .rule .n { background: transparent !important; color: var(--pink) !important; box-shadow: inset 0 0 0 2px var(--pink); }   /* step numbers: outlined, not filled like buttons */
.rule p { color: rgba(255,255,255,.75); }
.signoff span { -webkit-text-stroke: 0; }
/* Payment */
.copyrow .copy { background: var(--pink); color: #000; }
.qr { border-color: var(--pink); background: #fff; }
.ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.upfor { color: #fff; }
/* Races */
.feat h2 { color: #fff; }
.countdown div { background: #000; color: #fff; border: 1px solid var(--edge); }
.countdown b { color: var(--pink); }
.rc .cover > b { background: #000; }
.actions .primary { background: var(--pink); color: #000; border-color: var(--pink); box-shadow: 0 10px 26px -14px rgba(254,144,174,.7); }
.actions button, .actions a { border-color: rgba(255,255,255,.28); border-radius: 999px; padding-inline: 16px; transition: border-color .2s, color .2s, transform .2s var(--ease); }
.actions button:not(.primary):hover, .actions a:hover { border-color: var(--pink); color: var(--pink); }
.rdi button { border-radius: 999px; padding: 11px 16px; letter-spacing: .03em; transition: transform .2s var(--ease); }
.rdi button:hover { transform: translateY(-1px); }
.raceday { background: var(--spot), linear-gradient(180deg, #150c10, #0b0b0e); border-color: rgba(254,144,174,.6); box-shadow: 0 30px 70px -40px rgba(254,144,174,.45); }
.entry { background: rgba(25,195,125,.14); color: var(--green); }
.entry.paid { background: rgba(254,144,174,.14); color: var(--pink); }
.rc-warn { background: rgba(208,2,27,.16); color: #ffc2cc; border-color: #ff5f6d; }
.rc-warn strong { color: #ff8a9c; }
.skeleton { background: linear-gradient(90deg, #17171b, #222228, #17171b) 0 0 / 200% 100%; }
.prog i { background: var(--pink); }
.anon input { accent-color: var(--pink); }
.rates input:checked + span { background: var(--pink); color: #000; }
.bib { background: #fff; color: #000; border-color: #000; }
.bib .club { background: #000; }
/* Join (registration) */
.run { background: var(--white) !important; }
.meta b, .big input { color: #fff; }
.big:focus-within { border-bottom-color: var(--pink); }
.big input::placeholder { color: #6e6e79; }
.wb, .fix { background: rgba(254,144,174,.1); }
.cp, .quick, .chip.opt, .rv-row .edit, kbd { background: var(--paper); border-color: var(--line); color: #fff; }
.cp:focus-visible, .ck:has(input:focus-visible) { outline-color: var(--pink); }
.choice:hover { border-color: #3a3a44; }
.choice .key, .choice .tick { border-color: #4a4a55; }
.choice .tick::after, .ck .box::after { border-color: #000; }
.choice.on { background: var(--pink); color: #000; border-color: var(--pink); }
.choice.on .t small { color: #2a0f17; }
.choice.on .meter i { background: rgba(0,0,0,.2); } .choice.on .meter i.f { background: #000; }
.meter i { background: #3a3a44; } .meter i.f { background: var(--pink); }
.sz svg { fill: #4a4a55; }
.ck .box { background: var(--paper); border-color: #4a4a55; }
.ck.on { background: rgba(254,144,174,.1); }
.ck.on .box { background: var(--pink); border-color: var(--pink); }
.ck .rules { color: rgba(255,255,255,.7); }
.rv-row { border-top-color: var(--line); }
.back { background: var(--paper); color: #fff; }
.next.ready { background: var(--pink); color: #000; }
.chip.req { background: none; color: var(--pink); padding: 0; }
.big input, .big input:focus { background: transparent !important; border: 0 !important; }

/* Only things you can click look like buttons: labels are plain text */
.chip.opt { background: none !important; border: 0 !important; padding: 0 !important; color: var(--muted) !important; }
.perks { gap: 8px 18px !important; }
.perks li { background: none !important; padding: 0 0 0 20px !important; position: relative; border-radius: 0 !important; }
.perks li::before { content: "✓"; position: absolute; left: 0; color: var(--pink); font-weight: 800; }