/* ==========================================================================
   PRIVACY NOTICE

   Ye file terms.css ki hamshakl hai, kyunki dono ek hi tarah ke document
   hain: bada sirnaam, phir ginti wale sections. Alag file isliye rakhi hai
   ki har page apni CSS khud le kar chale.

   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, rules, terms and funded 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; }
}
