/* ==========================================================================
   TOKENS. Landing page se same. Naya font ek bhi nahi:
   Inter Tight har heading par, Inter body aur UI par.
   ========================================================================== */
:root{
  --bg:#050505; --ink:#EDEAE5; --ink-2:#9B9895; --gold:#D3B07C;
  --hair:rgba(255,255,255,.07); --hair-2:rgba(255,255,255,.11);
  --mute:#8B8B8B; --down:#FF4B4B;
  --display:"Inter Tight","Inter",system-ui,-apple-system,Helvetica,Arial,sans-serif;
  --sans:"Inter",system-ui,-apple-system,Helvetica,Arial,sans-serif;
  --col:1280px; --nav-h:88px;
  --ease:cubic-bezier(.22,.61,.36,1);
  color-scheme:dark;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{ min-height:100dvh; background:var(--bg); color:var(--ink); font-family:var(--sans);
      overflow-x:hidden; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
body.is-locked{ overflow:hidden; }
ul,ol{ list-style:none; } a{ color:inherit; text-decoration:none; } svg{ display:block; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:4px; }

.skip{ position:fixed; top:10px; left:10px; z-index:200; padding:10px 16px;
       border:1px solid var(--gold); border-radius:8px; background:#0d0c0a;
       color:var(--gold); font-size:14px; transform:translateY(-200%);
       transition:transform .2s var(--ease); }
.skip:focus-visible{ transform:none; }

/* ==========================================================================
   NAV
   ========================================================================== */
.nav{ position:sticky; top:0; z-index:20; height:var(--nav-h);
      background:rgba(5,5,5,.88); backdrop-filter:blur(14px);
      -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--hair); }
.nav__in{ max-width:var(--col); height:100%; margin-inline:auto; padding-inline:28px;
          display:flex; align-items:center; gap:24px; }
.brand{ display:flex; align-items:center; gap:11px; flex:none; }
.brand svg{ width:24px; height:24px; color:var(--ink); }
.brand span{ font-family:var(--display); font-size:24px; font-weight:600; letter-spacing:-.022em; }
.links{ display:flex; align-items:center; gap:38px; margin-inline:auto; }
.links a{ font-size:17px; font-weight:450; transition:color .25s var(--ease); }
.links a:hover{ color:var(--gold); }
.links a[aria-current="page"]{ color:var(--gold); }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px;
      border-radius:999px; font-size:16px; font-weight:500; white-space:nowrap; flex:none;
      transition:transform .3s var(--ease), background-color .3s var(--ease),
                 border-color .3s var(--ease), box-shadow .3s var(--ease); }
.btn--light{ height:46px; padding-inline:26px; background:#fff; color:#0A0A0A; }
.btn--light:hover{ transform:translateY(-1px); box-shadow:0 10px 30px -12px rgba(255,255,255,.4); }

.burger{ display:none; width:42px; height:42px; margin-right:-6px; place-items:center; }
.burger i{ display:block; width:19px; height:1.5px; background:var(--ink); border-radius:2px;
           transition:transform .3s var(--ease), opacity .2s var(--ease); }
.burger i + i{ margin-top:5px; }
.burger[aria-expanded="true"] i:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] i:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] i:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

.drawer{ position:fixed; inset:var(--nav-h) 0 0; z-index:15;
         padding:8px clamp(20px,6vw,40px) 40px; background:var(--bg); overflow-y:auto;
         opacity:0; visibility:hidden; transform:translateY(-8px);
         transition:opacity .26s var(--ease), transform .3s var(--ease), visibility 0s linear .3s; }
.drawer.is-open{ opacity:1; visibility:visible; transform:none; transition-delay:0s,0s,0s; }
.drawer a{ display:block; padding:20px 2px; font-size:19px; border-bottom:1px solid var(--hair); }
.drawer .btn{ width:100%; margin-top:28px; height:52px; }

/* ==========================================================================
   TITLE PAGE
   Ek bada sirnaam, uske neeche chhoti bio, aur ek meta patti. Whitepaper ka
   title page yahi hota hai: pehle wo kya hai, phir wo kis tareekh ka hai.
   ========================================================================== */
.wrap{ max-width:var(--col); margin-inline:auto; padding-inline:28px; }

/* Meta patti hata di, to title page mein sirf teen cheezein bachi hain:
   eyebrow, sirnaam aur bio. Teen cheezon ko baayen se align karne par daayen
   taraf badi khaali jagah bach jaati thi. Beech mein rakhne par teenon ek hi
   dhure par baith jaati hain aur page ka title page jaisa lagta hai, na ki
   adhoora document.

   max-width ch mein hai, percent mein nahi. Line ki lambai akshar ginti se
   tay hoti hai, screen ki chaudai se nahi. */
.head{ padding:80px 0 56px; text-align:center; }
.head__eyebrow{ font-size:12px; font-weight:500; letter-spacing:.2em;
                text-transform:uppercase; color:var(--gold); }
.head h1{
  margin:20px auto 0; max-width:19ch;
  font-family:var(--display); font-size:clamp(38px,5.4vw,76px); font-weight:400;
  line-height:1.03; letter-spacing:-.038em;
  background:linear-gradient(180deg,#FFFDFA 0%,#DCD7CF 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.head__bio{ margin:28px auto 0; max-width:64ch; font-size:16.5px; line-height:1.68; color:var(--ink-2); }
.head__bio b{ color:var(--ink); font-weight:500; }

/* ==========================================================================
   THE DOCUMENT
   Baayen ek thehri hui fehrist, daayen padhne ka hissa.

   Fehrist sticky hai kyunki ye page lamba hai aur bina uske padhne wale ko
   pata nahi chalta ki wo document mein kahan hai. Number sirf sajawat nahi:
   support se baat karte waqt "rule 04" kehna "loss limits wala hissa" kehne
   se kaafi tez hai.
   ========================================================================== */
.doc{
  display:grid; grid-template-columns:236px minmax(0,1fr); gap:72px;
  padding:52px 0 96px; border-top:1px solid var(--hair);
}

/* --- contents ------------------------------------------------------------- */
.toc{ position:sticky; top:calc(var(--nav-h) + 28px); align-self:start; }
.toc__label{ padding-bottom:14px; border-bottom:1px solid var(--hair);
             font-size:11px; font-weight:500; letter-spacing:.16em;
             text-transform:uppercase; color:var(--mute); }

/* Char groups. Group ka naam gold hai aur uske andar ke links grey, isliye
   nazar pehle group par girti hai phir andar. Pehla group upar ki lakeer ke
   saath lagta hai, isliye uska margin sifar rakha hai. */
.toc__group{ margin-top:26px; font-size:11px; font-weight:600; letter-spacing:.16em;
             text-transform:uppercase; color:var(--gold); }
.toc__group:first-of-type{ margin-top:18px; }
.toc ol{ margin-top:8px; }
.toc ol + .toc__group{ margin-top:22px; }

.toc a{
  display:grid; grid-template-columns:26px minmax(0,1fr); gap:12px;
  padding:10px 0 10px 12px; margin-left:-12px;
  border-left:1px solid transparent;
  font-size:14px; line-height:1.35; color:#8E8A85;
  transition:color .25s var(--ease), border-color .25s var(--ease);
}
.toc a i{ font-style:normal; font-variant-numeric:tabular-nums; color:#6C6864;
          transition:color .25s var(--ease); }
.toc a:hover{ color:var(--ink); }
.toc a:hover i{ color:var(--gold); }

/* Padhne wala jis hisse par hai wahi ujaagar hota hai. Rang ke saath ek patli
   lakeer bhi lagti hai, kyunki akele rang par bharosa karna theek nahi: rang
   ka farak halka hota hai aur har screen par ek jaisa nahi dikhta. */
.toc a.is-here{ color:var(--ink); border-left-color:var(--gold); }
.toc a.is-here i{ color:var(--gold); }

/* --- sections -------------------------------------------------------------
   scroll-margin-top zaroori hai. Sticky nav ke neeche anchor par jaane se
   heading nav ke peeche chhup jaati thi; ye usse neeche rok deta hai.
   -------------------------------------------------------------------------- */
/* Body mein bhi wahi char group. Ye sirf dohrav nahi: fehrist tang screen par
   upar chali jaati hai, aur uske baad padhne wale ko group ka pata sirf yahin
   se chalta hai. */
.part{ display:flex; align-items:center; gap:16px;
       margin-top:64px; padding-bottom:16px; border-bottom:1px solid var(--hair-2);
       font-size:11px; font-weight:600; letter-spacing:.18em;
       text-transform:uppercase; color:var(--gold); }
.part:first-child{ margin-top:0; }
.part::after{ content:""; flex:1; height:1px; background:var(--hair); }

.rule{ padding-top:44px; scroll-margin-top:calc(var(--nav-h) + 24px); }
.part + .rule{ padding-top:34px; }
.rule + .rule{ margin-top:12px; border-top:1px solid var(--hair); }

.rule__h{ display:flex; align-items:baseline; gap:18px; }
.rule__no{ font-family:var(--display); font-size:15px; font-weight:500;
           letter-spacing:.04em; color:var(--gold); font-variant-numeric:tabular-nums; }
.rule__h h2{ font-family:var(--display); font-size:clamp(23px,2.4vw,32px); font-weight:500;
             line-height:1.14; letter-spacing:-.03em; color:#F3F0EA; }

.rule p{ margin-top:20px; max-width:74ch; font-size:15.5px; line-height:1.75; color:var(--ink-2); }
.rule p b{ color:var(--ink); font-weight:500; }
.rule p + p{ margin-top:16px; }

/* Numbered clauses. `ol` par counter isliye hai ki number CSS se aayen, markup
   se nahi. Beech mein koi clause jodo ya hatao to baaki apne aap sarak jaate
   hain, haath se numbering theek karne ki zaroorat nahi padti. */
.clauses{ counter-reset:clause; margin-top:24px; max-width:74ch; }
.clauses li{
  position:relative; counter-increment:clause;
  padding:13px 0 13px 46px; border-top:1px solid var(--hair);
  font-size:15px; line-height:1.7; color:var(--ink-2);
}
.clauses li::before{
  content:counter(clause,decimal-leading-zero);
  position:absolute; left:0; top:14px;
  font-size:12.5px; font-weight:500; color:#6C6864;
  font-variant-numeric:tabular-nums;
}
.clauses li b{ color:var(--ink); font-weight:500; }
.clauses li em{ font-style:normal; color:#E4B9B9; }

/* --- key figures ---------------------------------------------------------- */
.figs{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px;
       margin-top:28px; border:1px solid var(--hair-2); border-radius:14px;
       overflow:hidden; background:var(--hair); }
.figs div{ padding:20px 22px; background:#0B0B0A; }
.figs span{ font-size:11px; font-weight:500; letter-spacing:.14em;
            text-transform:uppercase; color:var(--mute); }
.figs b{ display:block; margin-top:10px; font-family:var(--display);
         font-size:clamp(24px,2.4vw,32px); font-weight:400; letter-spacing:-.035em;
         color:#F3F0EA; font-variant-numeric:tabular-nums; }

/* --- table ---------------------------------------------------------------- */
.tbl{ margin-top:28px; border:1px solid var(--hair-2); border-radius:14px; overflow:hidden; }
.tbl__scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
table{ width:100%; min-width:560px; border-collapse:collapse; }
th,td{ padding:14px 18px; text-align:right; font-size:14px; white-space:nowrap;
       border-bottom:1px solid var(--hair); font-variant-numeric:tabular-nums; }
th:first-child,td:first-child{ text-align:left; }
thead th{ font-family:var(--display); font-size:17px; font-weight:500;
          letter-spacing:-.025em; color:#F0ECE5; background:#0D0D0C; }
thead th:first-child{ font-family:var(--sans); font-size:11px; font-weight:500;
                      letter-spacing:.16em; text-transform:uppercase; color:var(--mute); }
tbody th{ font-weight:400; color:#C9C5BE; font-size:14px; }
tbody td{ color:var(--ink-2); }
tbody tr:last-child th,tbody tr:last-child td{ border-bottom:0; }
.is-gold{ color:var(--gold); }

/* --- callout --------------------------------------------------------------
   Ek hi callout poore document mein, aur wo breach wale hisse par hai. Agar
   har section par ek dabba hota to koi bhi dabba dhyan na kheenchta.
   -------------------------------------------------------------------------- */
.note{
  display:flex; gap:14px; margin-top:26px; padding:18px 20px; max-width:74ch;
  border:1px solid rgba(255,75,75,.28); border-radius:12px;
  background:rgba(255,75,75,.05);
  font-size:14.5px; line-height:1.68; color:#D6D2CB;
}
.note svg{ flex:none; width:17px; height:17px; margin-top:3px; color:#E48A8A; }
.note b{ color:#F0DADA; font-weight:500; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.foot{ border-top:1px solid var(--hair); }
.foot__in{ max-width:var(--col); margin-inline:auto; padding:56px 28px 0; }
.foot__grid{ display:grid; grid-template-columns:minmax(0,1.35fr) repeat(4,minmax(0,1fr)); gap:44px 32px; }
.foot__brand p{ margin-top:20px; max-width:30ch; font-size:14px; line-height:1.62; color:var(--ink-2); }
.foot__brand small{ display:block; margin-top:12px; font-size:14px; color:#7E7A75; }
.foot__col h4{ font-family:var(--display); font-size:15px; font-weight:600;
               letter-spacing:-.014em; color:var(--ink); }
.foot__col ul{ margin-top:22px; display:grid; gap:14px; }
.foot__col a{ display:inline-flex; align-items:center; gap:6px; font-size:14.5px;
              color:#A5A19B; transition:color .25s var(--ease); }
.foot__col a:hover{ color:var(--ink); }
.foot__col a.is-ext::after{ content:"↗"; font-size:12px; color:#6F6B66;
  transition:color .25s var(--ease), transform .25s var(--ease); }
.foot__col a.is-ext:hover::after{ color:var(--gold); transform:translate(1px,-1px); }
.foot__warn{ margin-top:44px; padding:24px 0 28px; border-top:1px solid var(--hair);
             display:grid; gap:14px; font-size:12px; line-height:1.75; color:#8A8680; }
.foot__warn b{ color:#ADA8A1; font-weight:500; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1040px){
  .doc{ grid-template-columns:200px minmax(0,1fr); gap:44px; }
  .foot__grid{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:40px 24px; }
  .foot__brand{ grid-column:1 / -1; }
  .foot__brand p{ max-width:46ch; }
}

/* Tang screen par fehrist sticky nahi rehti. Sticky column ke liye jagah hi
   nahi bachti, aur upar chipki hui patti aadhi screen kha jaati hai. Wo ek
   saadi soochi ban jaati hai jo document ke shuru mein ek baar dikhti hai. */
@media (max-width:860px){
  :root{ --nav-h:70px; }
  .links{ display:none; }
  .burger{ display:grid; }
  .nav__in{ padding-inline:20px; }
  .nav .btn--light{ height:40px; padding-inline:18px; font-size:14.5px; }
  .wrap{ padding-inline:20px; }
  .head{ padding:52px 0 40px; }
  .doc{ grid-template-columns:minmax(0,1fr); gap:0; padding:40px 0 64px; }
  .toc{ position:static; margin-bottom:40px; }
  .toc ol{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 20px; }
  .rule{ padding-top:40px; }
  .foot__in{ padding:44px 20px 0; }
  .foot__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:34px 24px; }
}
@media (max-width:520px){
  .toc ol{ grid-template-columns:minmax(0,1fr); }
  .foot__grid{ grid-template-columns:minmax(0,1fr); }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important;
    animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

/* ==========================================================================
   NAVIGATION CONTROLS
   Rules page header mirrors the landing page navigation: category menus on
   desktop and expandable groups inside the mobile drawer.
   ========================================================================== */
.nav{ position:relative; background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; }
.links{ gap:46px; }
.links a{ color:var(--ink); white-space:nowrap; }
.nav-auth{ display:flex; align-items:center; gap:10px; flex:none; }
.nav-auth .btn{ width:110px; }
.btn--login{ height:46px; padding-inline:20px; border:1px solid var(--hair-2); background:transparent; color:var(--ink); }
.btn--login:hover{ border-color:rgba(211,176,124,.55); color:var(--gold); background:rgba(211,176,124,.06); }

.nav-item{ position:relative; }
.nav-trigger{ display:inline-flex; align-items:center; gap:7px; height:42px; padding:0 13px;
  border:1px solid transparent; border-radius:999px; color:var(--ink); font:inherit;
  font-size:17px; font-weight:450; cursor:pointer;
  transition:color .25s var(--ease),background-color .25s var(--ease),border-color .25s var(--ease); }
.nav-trigger svg{ width:12px; height:12px; transition:transform .3s var(--ease); }
.nav-item:hover .nav-trigger,.nav-item:focus-within .nav-trigger,.nav-item.is-open .nav-trigger,
.nav-trigger[aria-expanded="true"]{ color:#F3EFE8; background:linear-gradient(180deg,#1A1712 0%,#0F0D0B 100%);
  border-color:rgba(211,176,124,.34); box-shadow:0 8px 22px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.05); }
.nav-item:hover .nav-trigger svg,.nav-item:focus-within .nav-trigger svg,.nav-item.is-open .nav-trigger svg,
.nav-trigger[aria-expanded="true"] svg{ transform:rotate(180deg); }
.nav-menu{ position:absolute; top:calc(100% + 8px); left:50%; z-index:30; display:grid; gap:4px;
  min-width:252px; padding:12px; border:1px solid rgba(211,176,124,.2); border-radius:18px;
  background:linear-gradient(150deg,rgba(22,20,17,.98) 0%,rgba(8,8,8,.99) 78%);
  box-shadow:0 26px 70px rgba(0,0,0,.58),inset 0 1px 0 rgba(255,255,255,.055);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); opacity:0; visibility:hidden;
  pointer-events:none; transform:translate(-50%,-7px); transition:opacity .22s var(--ease),transform .28s var(--ease),visibility 0s linear .28s; }
.nav-menu::before{ content:""; position:absolute; top:-9px; left:0; right:0; height:10px; }
.nav-item:hover .nav-menu,.nav-item:focus-within .nav-menu,.nav-item.is-open .nav-menu,
.nav-menu.is-open{ opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%,0); transition-delay:0s; }
.nav-menu a{ display:flex; align-items:center; justify-content:space-between; gap:18px; padding:13px 14px;
  border-radius:11px; font-size:15px; font-weight:500; letter-spacing:-.01em; color:#D8D4CC;
  transition:background-color .25s var(--ease),color .25s var(--ease),transform .25s var(--ease); }
.nav-menu a::after{ content:"↗"; opacity:0; color:var(--gold); transform:translate(-4px,4px); transition:opacity .25s var(--ease),transform .25s var(--ease); }
.nav-menu a:hover,.nav-menu a:focus-visible{ background:rgba(211,176,124,.11); color:#F5F2ED; transform:translateX(2px); }
.nav-menu a:hover::after,.nav-menu a:focus-visible::after{ opacity:1; transform:none; }

.drawer-group{ border-bottom:1px solid var(--hair); }
.drawer-trigger{ display:flex; align-items:center; justify-content:space-between; width:100%; padding:20px 2px;
  border:0; background:none; color:var(--ink); font:inherit; font-size:19px; text-align:left; cursor:pointer; }
.drawer-trigger svg{ width:14px; height:14px; transition:transform .3s var(--ease); }
.drawer-group.is-open .drawer-trigger{ color:var(--gold); }
.drawer-group.is-open .drawer-trigger svg{ transform:rotate(180deg); }
.drawer-submenu{ max-height:0; overflow:hidden; opacity:0; transition:max-height .4s var(--ease),opacity .25s var(--ease); }
.drawer-group.is-open .drawer-submenu{ max-height:280px; opacity:1; }
.drawer-submenu a{ padding:12px 2px 12px 20px; border:0; font-size:15px; color:var(--ink-2); }
.drawer-submenu a:hover{ color:var(--gold); }
.drawer-auth{ display:none; }

@media (max-width:1040px){ .links{ gap:30px; } }
@media (max-width:860px){
  .links,.nav-auth{ display:none; }
  .drawer-auth{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:28px; }
  .drawer-auth .btn{ height:50px; margin-top:0; }
}

@media (prefers-reduced-motion:reduce){
  .nav-trigger,.nav-trigger svg,.nav-menu,.nav-menu a,.nav-menu a::after,
  .drawer-trigger svg,.drawer-submenu{ transition-duration:.001ms !important; }
}