/* ==========================================================================
   TOKENS. Baaki pages se same. Naya font ek bhi nahi.
   ========================================================================== */
: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;
  --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; background:var(--bg); }
body{ min-height:100dvh; background:transparent; color:var(--ink); font-family:var(--sans);
      overflow-x:clip; -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); }

.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),
                 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
   ========================================================================== */
.wrap{ max-width:var(--col); margin-inline:auto; padding-inline:28px; }

.head{ padding:84px 0 52px; 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:16ch;
  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:26px auto 0; max-width:62ch; font-size:16.5px; line-height:1.68; color:var(--ink-2); }
.head__bio b{ color:var(--ink); font-weight:500; }
.head__date{ margin-top:22px; font-size:12.5px; letter-spacing:.06em; color:var(--mute); }

/* ==========================================================================
   DOCUMENT

   Ek hi column, 74ch chaudi. Legal text lambi lines par sabse jaldi chhoot
   jaata hai, kyunki nazar ko har line ke baad wapas shuru mein aana padta
   hai. 74 akshar par aankh bina dhoondhe agli line pakad leti hai.
   ========================================================================== */
.doc{ max-width:74ch; margin:0 auto; padding-bottom:88px; }

.sec{ padding-top:40px; }
.sec + .sec{ margin-top:8px; border-top:1px solid var(--hair); }

.sec__h{ display:flex; align-items:baseline; gap:16px; }
.sec__n{ font-family:var(--display); font-size:14px; font-weight:500;
         color:var(--gold); font-variant-numeric:tabular-nums; }
.sec__h h2{ font-family:var(--display); font-size:clamp(20px,2.1vw,26px); font-weight:500;
            line-height:1.16; letter-spacing:-.028em; color:#F3F0EA; }

.sec p{ margin-top:18px; font-size:15.5px; line-height:1.78; color:var(--ink-2); }
.sec p b{ color:var(--ink); font-weight:500; }
.sec a{ color:var(--gold); }
.sec a:hover{ text-decoration:underline; text-underline-offset:3px; }

/* Numbered clauses. Number CSS counter se aate hain, markup se nahi, taki
   beech mein koi clause jodo ya hatao to baaki apne aap sarak jayen. */
.cl{ counter-reset:c; margin-top:18px; }
.cl li{ position:relative; counter-increment:c;
        padding:11px 0 11px 40px; border-top:1px solid var(--hair);
        font-size:15px; line-height:1.72; color:var(--ink-2); }
.cl li::before{ content:"(" counter(c) ")"; position:absolute; left:0; top:12px;
                font-size:13px; color:#6C6864; font-variant-numeric:tabular-nums; }
.cl li b{ color:var(--ink); font-weight:500; }

/* Ek hi callout poore document mein, aur wo simulated accounts par hai. Wahi
   ek baat hai jo galat samajhne par sabse mehngi padti hai. */
.note{ display:flex; gap:14px; margin-top:22px; padding:18px 20px;
       border:1px solid rgba(211,176,124,.28); border-radius:12px;
       background:rgba(211,176,124,.05);
       font-size:14.5px; line-height:1.7; color:#D8D4CD; }
.note svg{ flex:none; width:17px; height:17px; margin-top:3px; color:var(--gold); }
.note b{ color:#F0E6D4; 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){
  .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; }
}
@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 36px; }
  .sec{ padding-top:32px; }
  .doc{ padding-bottom:60px; }
  .foot__in{ padding:44px 20px 0; }
  .foot__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:34px 24px; }
}
@media (max-width:520px){ .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
   Same category navigation as the landing, assets and legal pages.
   ========================================================================== */
.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; }
}