/* ==========================================================================
   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; --up:#9FE84B; --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:64px;
  --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%; background:var(--bg); }
body{ min-height:100dvh; background:transparent; color:var(--ink); font-family:var(--sans);
      -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
body.is-locked{ overflow:hidden; }
ul{ 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:6px; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ==========================================================================
   APP BAR
   Landing page ka nav nahi hai. Ye andar ka bar hai: logo chhota, tabs
   chaudi, aur daayen taraf sirf account ke kaam ke buttons. Andar aa chuke
   user ko bechne wale links nahi chahiye, jaana kahan hai wo chahiye.
   ========================================================================== */
.bar{ position:sticky; top:0; z-index:30; height:var(--nav-h);
      background:rgba(5,5,5,.9); backdrop-filter:blur(14px);
      -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--hair); }
/* Bar poori chaudai leta hai aur kinare se sirf 20px door rehta hai. Pehle
   yahan max-width thi, jisse bade screen par logo beech ki taraf khisak jaata
   tha aur bar tairta hua lagta tha. App bar ko screen se chipka rehna chahiye,
   content ki tarah beech mein nahi baithna chahiye. */
.bar__in{ height:100%; padding-inline:20px;
          display:flex; align-items:center; gap:8px; }

/* Logo ke neeche koi tile nahi. Tile ki zaroorat tab hoti hai jab nishaan ko
   background se alag karna ho; yahan wo pehle se hi akela khada hai, aur tile
   use ek button jaisa bana deti thi. */
.mark{ display:flex; align-items:center; gap:11px; width:auto; height:30px; flex:none; color:var(--ink); }
.mark svg{ width:24px; height:24px; flex:none; }
.mark span{ font-family:var(--display); font-size:21px; font-weight:600; letter-spacing:-.022em; line-height:1; }

/* Tabs plain text hain, pill nahi.

   Active tab safed aur bhaari hai, baaki halke grey. Pill lagane se active
   tab button jaisa lagta tha, aur bar par pehle se do asli buttons hain, to
   teen alag cheezein ek jaisi dikhne lagti thi. Sirf rang aur mota-pan se hi
   yeh farak saaf ho jaata hai.

   Gap 26px hai, padding nahi, taki shabdon ke beech ki door unke apne haath
   mein rahe aur wo ek doosre se chipke na lagein. */
/* Tabs beech mein hain. margin-inline:auto dono taraf barabar jagah kha
   leta hai, isliye wo logo aur daayen wale buttons ke theek beech mein
   baithti hain, chahe donon ki chaudai kuch bhi ho. Iske liye .bar__end se
   margin-left:auto hatana zaroori tha, warna do auto margin aapas mein lad
   jaate. */
.tabs{ display:flex; align-items:center; gap:26px; margin-inline:auto; }
.tabs a{ display:inline-flex; align-items:center; height:100%;
         font-size:14.5px; font-weight:450; color:#8E8A85;
         transition:color .2s var(--ease); }
.tabs a:hover{ color:var(--ink); }
.tabs a[aria-current="page"]{ color:#FBF9F5; font-weight:600; }

.bar__end{ display:flex; align-items:center; gap:10px; }
.icon{ display:grid; place-items:center; width:32px; height:32px;
       border:1px solid var(--hair); border-radius:50%; color:#9A9691;
       transition:color .2s var(--ease), border-color .2s var(--ease); }
.icon:hover{ color:var(--ink); border-color:rgba(211,176,124,.4); }
.icon svg{ width:16px; height:16px; }
.avatar{ width:30px; height:30px; border-radius:50%; flex:none;
         background:linear-gradient(135deg,#D3B07C,#8B6F45); }

.burger{ display:none; width:36px; height:36px; place-items:center; }
.burger i{ display:block; width:17px; height:1.5px; background:var(--ink); border-radius:2px; }
.burger i + i{ margin-top:5px; }

/* ==========================================================================
   HEAD
   ========================================================================== */
.wrap{ max-width:var(--col); margin-inline:auto; padding-inline:24px; }

.head{ padding:72px 0 0; text-align:center; }
.head h1{ margin:0 auto; max-width:16ch;
  font-family:var(--display); font-size:clamp(32px,4.4vw,54px); font-weight:600;
  line-height:1.06; letter-spacing:-.035em; color:#FBF9F5; }
.head p{ margin:16px auto 0; max-width:56ch; font-size:16px; line-height:1.6; color:var(--ink-2); }

/* --- stats ----------------------------------------------------------------
   Teen ginti, beech mein hairline. Ye wahi teen number hain jo hero par bhi
   hain, isliye page badalne par kuch naya seekhna nahi padta.
   -------------------------------------------------------------------------- */
.stats{ display:flex; align-items:stretch; justify-content:center; flex-wrap:wrap;
        gap:0; margin-top:38px; }
/* `:not(.stat)`, because this class name is used by two different components.
 *
 * `dashboard.css` and `terminal.css` both define `.stats`, and terminal.html loads both.
 * The terminal's version is the market strip — Mark, Change 24h, Funding 1h, Volume 24h,
 * Max leverage — and its items are `<div class="stat">`. A bare `.stats div` reaches every
 * one of them and hands each 68px of horizontal padding and a left border, neither of which
 * `terminal.css` overrides because it has no idea this rule exists.
 *
 * Measured: each stat was 139-156px wide around 70-88px of content, so the five came to
 * 813px in a 740px strip and Max leverage wrapped onto a line of its own. On every laptop,
 * since the terminal shipped. It looked like a layout that had not been thought about, and
 * it was a layout that had been overruled from another file.
 *
 * The narrow selector is the small fix. The real one is that a generic descendant selector
 * under a generic class name is a landmine in a codebase where stylesheets are loaded
 * together, and the next component to want a `.stats` will step on it again. */
.stats div:not(.stat){ padding:2px 34px; text-align:center; }
.stats div:not(.stat) + div:not(.stat){ border-left:1px solid var(--hair); }
.stats b{ display:block; font-family:var(--display);
          font-size:clamp(24px,2.6vw,32px); font-weight:600;
          letter-spacing:-.03em; color:#F5F2ED; font-variant-numeric:tabular-nums; }
.stats span{ display:block; margin-top:6px; font-size:12.5px; color:var(--mute); }

/* ==========================================================================
   PRICING
   ========================================================================== */
/* Two products, said out loud.
 *
 * This was one flat five-column grid holding the whole catalogue, so eight plans wrapped to
 * five and then three — and the break landed exactly where crypto ends and predictions
 * begin, by arithmetic rather than by design. It read as a grid that had run out of room.
 *
 * An account trades ONE vertical for its whole life: the choice between them is the purchase,
 * not a filter on it. So they are two labelled groups now, and the row break means what it
 * looks like.
 *
 * Both rows keep the SAME column count, so a $5,000 prediction card is exactly as wide as a
 * $5,000 crypto card and the two rows line up. Sizing each row to its own count would make
 * the three prediction cards a third wider, which is the non-uniformity this is fixing. */
.plans{ display:grid; gap:34px; padding:52px 0 20px; }
.plans__group{ display:grid; gap:14px; }
.plans__row{
  display:grid; grid-template-columns:repeat(var(--cols,5),minmax(0,1fr)); gap:12px;
}
.plans__label{
  font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--mute);
}

.plan{ position:relative; display:flex; flex-direction:column; min-width:0;
       padding:26px 20px 20px;
       border:1px solid var(--hair-2); border-radius:18px;
       background:linear-gradient(180deg,#0E0E0D 0%,#080808 100%);
       transition:transform .3s var(--ease), border-color .3s var(--ease); }
.plan:hover{ transform:translateY(-4px); border-color:rgba(211,176,124,.4); }

.plan--best{ border-color:rgba(211,176,124,.5);
             background:linear-gradient(180deg,#141210 0%,#0A0A09 100%); }
.plan--best::before{ content:""; position:absolute; inset:-1px -1px auto; height:2px;
                     border-radius:18px 18px 0 0;
                     background:linear-gradient(90deg,#B9925A,#E2C58E); }
.plan__tag{ position:absolute; top:12px; right:14px; font-size:9.5px; font-weight:500;
            letter-spacing:.12em; text-transform:uppercase; color:var(--gold); }

/* Which market the plan is for. Above the size, because it is the thing that makes two
   cards with the same headline different, and a reader who sees "$5K" first has already
   formed the wrong comparison by the time they reach it. */
.plan__market{ font-size:10.5px; font-weight:500; letter-spacing:.09em; text-transform:uppercase;
               color:var(--gold); margin-bottom:10px; }

.plan__size{ font-family:var(--display); font-size:clamp(30px,3vw,42px); font-weight:600;
             line-height:1; letter-spacing:-.04em; color:#F5F2ED; }
.plan__cap{ margin-top:12px; font-size:11px; line-height:1.4; color:var(--mute); }

/* Fee ke upar aur neeche lakeerein thi, jo use ek alag patti bana deti thi
   aur door se wo button jaisi lagti thi.

   Card mein pehle se lakeerein hain: har dl row ke neeche ek. Fee par bhi
   lagane se card ke andar do alag tarah ki lakeerein ho jaati thi, ek jo
   rows baantti hai aur ek jo kuch bhi nahi baantti. Ab fee bas ek bada number
   hai jo apni jagah khud bana leta hai, jagah se, dabbe se nahi. */
.plan__fee{ margin-top:22px; }
.plan__fee b{ font-family:var(--display); font-size:32px; font-weight:600;
              letter-spacing:-.03em; color:#F5F2ED; font-variant-numeric:tabular-nums; }
.plan__fee em{ font-style:normal; margin-left:6px; font-size:12px; color:var(--mute); }
.plan__fee span{ display:block; margin-top:6px; font-size:10.5px; color:var(--mute); }
.plan__fee s{ margin-right:5px; color:#6D6965; }

.plan dl{ margin-top:22px; }
.plan dl > div:first-child{ border-top:1px solid var(--hair); }
.plan dl > div{ display:flex; align-items:center; justify-content:space-between; gap:8px;
                padding:9px 0; border-bottom:1px solid var(--hair); }
.plan dt{ font-size:11.5px; color:var(--mute); }
.plan dd{ font-size:11.5px; font-weight:600; color:#ECE9E4; text-align:right; }
.plan dd.good{ color:var(--gold); }

.plan__go{ display:flex; align-items:center; justify-content:space-between; gap:10px;
           min-height:44px; margin-top:auto; padding:0 14px; border-radius:10px;
           background:#F1EFEB; color:#0A0A0A; font-size:12px; font-weight:600;
           transition:transform .25s var(--ease), box-shadow .25s var(--ease); }
.plan__go span{ font-size:17px; line-height:1; }
.plan__go:hover{ transform:translateY(-1px); box-shadow:0 12px 26px -16px rgba(255,255,255,.8); }
.plan--best .plan__go{ background:linear-gradient(105deg,#B9925A,#E2C58E); }

.fine{ padding:8px 0 80px; font-size:12px; line-height:1.75; color:#7E7A75; max-width:86ch; }
.fine a{ color:var(--gold); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
/* `min()` so a three-plan group stays three across here rather than being padded out to
   the wider count. The breakpoint is a ceiling, not a target — the same reasoning the
   challenge grid already uses. */
@media (max-width:1160px){
  .plans__row{ grid-template-columns:repeat(min(var(--cols,5),3),minmax(0,1fr)); }
}
@media (max-width:900px){
  .tabs{ gap:20px; }
  .burger{ display:grid; }
  .stats div{ padding-inline:22px; }
}
@media (max-width:760px){
  .tabs{ display:none; }
  .bar__in{ padding-inline:16px; }
  .wrap{ padding-inline:16px; }
  .head{ padding-top:48px; }
  .stats{ margin-top:28px; }
  .stats div{ padding:10px 18px; }
  .stats div + div{ border-left:0; }
  .plans__row{ grid-template-columns:repeat(min(var(--cols,5),2),minmax(0,1fr)); gap:10px; }
}
@media (max-width:480px){ .plans__row{ grid-template-columns:minmax(0,1fr); } }

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

/* The account panel used to live here, and only here — 110 lines of CSS beside 200 lines of
   markup in `dashboard.html`, which is why the header's avatar could only OPEN it on this
   one page and had to navigate to it from the other three.

   It is `account.css` and `account.js` now, loaded by every page that has a header.

   It also had to move for a fault that was already live: `terminal.css` and `checkout.css`
   load AFTER this file and define their own `.panel`, `.side` and `.empty`. Same
   specificity, later in the cascade, so theirs won — the panel was being restyled by
   whichever page it happened to open on. Every rule in `account.css` is scoped under
   `.modal` so that cannot happen in either direction. */