/* ===========================================================================
   superswarna.com — Authorised Person of Angel One Limited
   White ground, black text, Angel One royal blue #2E51FF on every button,
   box and banner. Green only on small pills. Typeface: Archivo Expanded for
   the wordmark (the largest type on the site), Barlow for everything else.
   Built from the approved mockup — do not restyle without re-approval.
   =========================================================================== */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}}
img{max-width:100%;display:block}
a{color:#2E51FF}
.skip{position:absolute;left:-9999px;top:0;background:#2E51FF;color:#fff;padding:10px 16px;
  border-radius:0 0 8px 0;z-index:100;font-weight:700}
.skip:focus{left:0}
:focus-visible{outline:3px solid #2E51FF;outline-offset:2px;border-radius:4px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
body{margin:0;background:#fff;padding-bottom:var(--dock,0px)}

/* ============================ THE PAGE ============================ */
:root{--dock:0px;--blue:#2E51FF;--navy:#16246B;--ink:#0B0D12;--meta:#5B6478;--grey:#F2F4F8;
  --line:rgba(11,13,18,.11);--green:#11AF4B}
body{font-family:"Barlow",system-ui,sans-serif;color:var(--ink);background:#fff;font-size:15px;
  line-height:1.55;-webkit-font-smoothing:antialiased}
.wrap{max-width:1080px;margin:0 auto;padding:0 22px;min-width:0}
@media (max-width:640px){.wrap{padding:0 16px}}

/* masthead — the largest type on the site, and nothing underlines it */
.bar{position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid var(--line)}
.bar-in{max-width:1080px;margin:0 auto;padding:14px 22px;display:flex;align-items:center;
  justify-content:space-between;gap:14px}
.mark{text-decoration:none;color:var(--ink);display:inline-flex;align-items:center;gap:13px;
  min-width:0}
.mark .wm{line-height:.9;white-space:nowrap;
  font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 118;font-weight:800;
  font-size:38px;letter-spacing:-.032em}
.mark i{font-style:normal;color:var(--blue)}
/* the standing line sits BESIDE the wordmark, divided by a rule — never under it */
.mark .markline{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:11.5px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--meta);line-height:1.28;
  padding-left:13px;border-left:1px solid var(--line);white-space:nowrap}
@media (max-width:640px){
  .bar-in{padding:11px 16px}
  .mark{gap:9px}
  .mark .wm{font-size:24px}
  .mark .markline{font-size:8.5px;letter-spacing:.11em;padding-left:9px;line-height:1.25}
}
@media (max-width:360px){.mark .markline{display:none}}

.btn{display:inline-flex;align-items:center;justify-content:center;text-align:center;border:0;
  cursor:pointer;text-decoration:none;font-family:"Barlow",sans-serif;font-weight:700;border-radius:11px;
  padding:0 18px;height:46px;font-size:14.5px;letter-spacing:-.01em;white-space:nowrap}
.b-p{background:var(--blue);color:#fff}
.b-s{background:#fff;color:var(--blue);box-shadow:inset 0 0 0 1.7px var(--blue)}
.b-sm{height:40px;font-size:13.5px;padding:0 14px}
.duo{display:flex;gap:9px;flex-wrap:wrap;margin-top:22px}
@media (max-width:640px){.duo{display:grid;grid-template-columns:1.3fr 1fr}}
.navcta{display:flex;gap:8px;align-items:center}
@media (max-width:640px){
  /* the sticky dock already carries both actions; a header button here is
     redundant AND is the single thing that overflowed a 320px screen */
  .navcta{display:none}
}

/* hero — every headline is now SMALLER than the wordmark */
/* ---- HERO: banner card (option B) ----------------------------------------
   The hero is a grey rounded card inside the same centred column, with the
   portrait standing on its bottom edge. The 640px text column is what lets the
   headline and the lede each run TWO lines instead of three; the old 16ch cap
   is gone. Below 760px the card dissolves back to plain white and the whole
   thing centres, exactly as it is now. */
.hero{padding:28px 0 6px}
.heroin{display:grid;gap:30px;align-items:end;grid-template-columns:640px 1fr;
  background:var(--grey);border-radius:22px;padding:38px 40px 0;overflow:hidden}
.herotxt{padding-bottom:38px;min-width:0}
@media (max-width:900px){.heroin{grid-template-columns:1fr 300px;padding:30px 28px 0}}
@media (max-width:760px){
  .heroin{grid-template-columns:1fr;gap:20px;text-align:center;justify-items:center;
    background:transparent;border-radius:0;padding:0;overflow:visible}
  .herotxt{padding-bottom:0}
}
.kicker{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:12px;
  letter-spacing:.2em;text-transform:uppercase;margin:0;color:var(--blue)}
/* The visible hero headline IS the real <h1> — there is no hidden keyword line.
   .h1 remains for the inner pages, which use a <p role=heading>. */
h1,.h1{font-size:42px;font-weight:800;letter-spacing:-.032em;line-height:1.06;margin:11px 0 0;
  text-wrap:balance;max-width:31ch;color:var(--ink)}
@media (max-width:900px){h1,.h1{font-size:36px}}
@media (max-width:760px){h1,.h1{font-size:24px;max-width:none;line-height:1.1}}
.lede{margin:16px 0 0;font-size:17.5px;line-height:1.5;color:var(--meta);max-width:78ch}
@media (max-width:760px){.lede{font-size:14px;max-width:none}}
.rule{height:6px;border-radius:99px;margin:15px 0 0;max-width:360px;
  background:linear-gradient(90deg,var(--blue) 0%,var(--blue) 42%,rgba(46,81,255,.22) 100%)}
@media (max-width:760px){.rule{margin-left:auto;margin-right:auto}}
.micro{margin:12px 0 0;font-size:13px;color:var(--meta)}

/* ---- hero carousel -------------------------------------------------------
   All six headlines occupy the SAME grid cell, so the <h1> is always as tall
   as its longest line and the hero never jumps as slides change. */
.hero-h{display:grid;align-items:end}   /* bottom-aligned: the slack left by a
   short headline sits ABOVE the text as padding, not as a gap over the rule */
/* The outgoing line clears BEFORE the incoming one arrives — a symmetric
   crossfade leaves both headlines legible at once, which reads as ghosting
   at this weight. Out: .26s. In: .45s, held back .24s. */
.hero-h .hs{grid-area:1/1;opacity:0;transform:translateY(9px);pointer-events:none;
  transition:opacity .26s ease,transform .26s ease}
.hero-h .hs.on{opacity:1;transform:none;pointer-events:auto;
  transition:opacity .45s ease .24s,transform .45s ease .24s}
@media (max-width:760px){
  /* on the phone the headline slides in from the side, as specified.
     overflow-x:clip contains the waiting slides — without it their 24px offset
     pushes the whole page sideways. clip (not hidden) so no scroll container
     is created and the vertical is left alone. */
  .hero-h{overflow-x:clip;overflow-y:visible}
  .hero-h .hs{transform:translateX(24px);transition:opacity .24s ease,transform .24s ease}
  .hero-h .hs.on{transform:none;transition:opacity .42s ease .22s,transform .42s ease .22s}
}
@media (prefers-reduced-motion:reduce){
  .hero-h .hs{transition:none;transform:none}
}
.hdots{display:flex;gap:7px;margin:16px 0 0}
@media (max-width:760px){.hdots{justify-content:center;margin-top:14px}}
.hdots button{width:7px;height:7px;padding:0;border:0;border-radius:99px;cursor:pointer;
  background:rgba(22,36,107,.22);transition:width .3s ease,background .3s ease}
.hdots button.on{width:22px;background:var(--blue)}
.hdots button:hover{background:rgba(22,36,107,.42)}
.hdots button.on:hover{background:var(--blue)}
.hdots button:focus-visible{outline:2px solid var(--blue);outline-offset:3px}


/* the face — a cutout on white. The source ground is lifted to pure #FFF, so on
   desktop the square edge is genuinely invisible and no mask is needed.
   The circle is MOBILE ONLY, where the hero centres. */
/* No isolation and no ground here: multiply has to reach the grey hero card
   for the portrait to read as a cut-out. (The black screen was a class-name
   collision, not this.) */
.faces{position:relative;width:300px;height:300px;margin:0 0 0 auto;align-self:end;overflow:hidden}
/* multiply drops the cut-out's white ground into the card tint, so it reads as
   a cut-out standing on the card rather than a photo in a box */
.faces img{mix-blend-mode:multiply}
@media (max-width:760px){
  .faces{width:216px;height:216px;margin:0 auto;border-radius:50%;align-self:auto}
  .faces img{mix-blend-mode:normal}   /* white ground on white page — no blend */
}
.faces img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  opacity:0;transition:opacity .9s ease}
.faces img.on{opacity:1}
/* The tagline runs the FULL hero width so it holds on one line. Boxed into the
   360px face column it could only ever break into three. */
.facecap{margin:26px 0 4px;font-weight:800;line-height:1.25;color:var(--ink);
  text-align:center;letter-spacing:-.025em;text-wrap:balance;
  font-size:clamp(17px,2.28cqi,25px)}
.facecap b{color:var(--blue);font-weight:800}
/* one line wherever it fits; below that it breaks at the comma, not at random */
@media (min-width:620px){.facecap{white-space:nowrap;text-wrap:nowrap}}
/* a 19ch cap was forcing three ragged lines; full width balances to two */
@media (max-width:619px){.facecap{max-width:none;text-wrap:balance;line-height:1.2}}

/* contained blue panel */
/* Each panel + its section sits in its own .chapter. A sticky element only
   sticks WITHIN its parent, so this is what makes panel N get pushed out by
   panel N+1 instead of the two overlapping — which is why the pinning read as
   "not working" even though it was pinning. */
.chapter{position:relative}
.panel{background:var(--blue);color:#fff;border-radius:18px;padding:20px 22px 22px;margin-top:32px;
  position:sticky;top:72px;z-index:15;
  box-shadow:0 10px 24px -18px rgba(11,13,18,.55)}
@media (max-width:640px){.panel{top:56px;padding:16px 17px 17px}}
.panel .bn{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:11.5px;
  letter-spacing:.2em;text-transform:uppercase;margin:0;opacity:.72}
.panel h2{margin:5px 0 0;font-size:23px;font-weight:800;letter-spacing:-.028em;line-height:1.1}
.panel p{margin:6px 0 0;font-size:14.5px;line-height:1.45;color:rgba(255,255,255,.88);max-width:58ch}
@media (max-width:640px){.panel{padding:17px 17px 19px}.panel h2{font-size:20px}}

.sec{padding:20px 0 8px}
.rows{list-style:none;margin:0;padding:0}
.rows li{display:flex;gap:12px;padding:14px 0;border-top:1px solid var(--line);min-width:0}
.rows li:first-child{border-top:0}
.k{flex:none;width:22px;height:22px;border-radius:99px;display:grid;place-items:center;
  background:var(--blue);color:#fff;font-size:11px;font-weight:700;margin-top:3px}
.rows h3{margin:0;font-size:16px;font-weight:800;letter-spacing:-.016em;line-height:1.25;
  overflow-wrap:anywhere}
.rows p{margin:4px 0 0;font-size:14.5px;line-height:1.5;color:var(--meta);max-width:60ch;min-width:0}
@media (min-width:820px){.rows{display:grid;grid-template-columns:1fr 1fr;gap:0 36px}
  .rows li:nth-child(2){border-top:0}}
.pill{display:inline-block;margin-left:6px;padding:2px 6px;border-radius:5px;
  background:rgba(17,175,75,.14);color:var(--green);font-size:10px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;vertical-align:middle}

.zeros{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px;grid-template-columns:repeat(3,1fr)}
@media (max-width:640px){.zeros{grid-template-columns:1fr 1fr}}
.zeros li{background:var(--grey);border-radius:13px;padding:15px 13px}
.zn{display:block;font-size:30px;font-weight:800;letter-spacing:-.05em;line-height:1;
  font-variant-numeric:tabular-nums}
.zl{display:block;font-size:12.5px;line-height:1.35;color:var(--meta);margin-top:7px;font-weight:600}
.foot{margin:10px 0 0;font-size:12px;color:var(--meta)}

/* plans — four cards, HUF among them */
.plans{margin-top:16px;display:grid;gap:11px;grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){
  .plans{display:flex;gap:11px;overflow-x:auto;scroll-snap-type:x mandatory;
    padding:2px 16px 12px;margin:16px -16px 0;scrollbar-width:none;touch-action:pan-x;
    max-width:100vw}
  .plans::-webkit-scrollbar{display:none}
  .plan{flex:0 0 76%;scroll-snap-align:center}
}
.plan{border:1px solid var(--line);border-radius:16px;padding:15px 15px 17px;background:#fff;
  display:flex;flex-direction:column}
.plan.feat{border-color:var(--blue);border-width:1.8px;box-shadow:0 10px 30px -18px rgba(46,81,255,.7)}

.ptag{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:10.5px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--blue);display:flex;
  justify-content:space-between;align-items:center;gap:8px;margin:0}

.ptag em{font-style:normal;background:var(--blue);color:#fff;padding:3px 7px;border-radius:5px}
.plan h3{margin:8px 0 0;font-size:17.5px;font-weight:800;letter-spacing:-.026em;line-height:1.14}
.plan dl{margin:11px 0 0}
.plan dl div{padding:8px 0;border-top:1px solid var(--line)}
.plan.huf dl div{border-color:rgba(255,255,255,.22)}
.plan dl div:first-child{border-top:0}
.plan dt{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:10px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--meta)}

.plan dd{margin:3px 0 0;font-size:13.5px;font-weight:700;line-height:1.35}
.plan dd .sub{text-decoration:none;display:block;font-size:11.5px;font-weight:500;color:var(--meta);
  margin-top:2px}
.plan.huf dd .sub{color:#C6D2FF}
.plan .spacer{flex:1;min-height:12px}
.plan .btn{width:100%}

.plannote{margin:11px 0 0;font-size:12px;color:var(--meta)}

.ra{margin-top:16px;background:var(--navy);color:#fff;border-radius:18px;padding:20px 22px 22px}
.ra .kicker{color:#93A6FF}
.ra h3{margin:7px 0 0;font-size:21px;font-weight:800;letter-spacing:-.026em;line-height:1.16}
.ra p{margin:8px 0 0;font-size:14.5px;line-height:1.5;color:#C6D2FF;max-width:60ch}
.trust{list-style:none;margin:16px 0 0;padding:15px 12px;background:var(--grey);border-radius:14px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;text-align:center}
@media (max-width:520px){.trust{grid-template-columns:1fr 1fr;gap:14px 8px}}
.tn{display:block;font-size:21px;font-weight:800;letter-spacing:-.032em;line-height:1}
.tl{display:block;font-size:11px;line-height:1.3;color:var(--meta);margin-top:5px;font-weight:600}

.chead{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-top:32px}
.chead h2{margin:0;font-size:23px;font-weight:800;letter-spacing:-.028em}
.rail{display:flex;gap:10px;overflow-x:auto;padding:14px 0 6px;scrollbar-width:none;
  touch-action:pan-x;max-width:100%}
.rail::-webkit-scrollbar{display:none}
.card{flex:0 0 176px;border-radius:13px;background:var(--grey);overflow:hidden;
  text-decoration:none;color:inherit;display:block;position:relative}

.bandhead{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-top:30px}
.bandhead h2{margin:0;font-size:23px;font-weight:800;letter-spacing:-.028em}
.bandhead a{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--blue);text-decoration:none;white-space:nowrap}
.bandsub{margin:5px 0 0;font-size:13.5px;color:var(--meta)}
.igcard{flex:0 0 152px;border-radius:13px;overflow:hidden;background:var(--grey)}
.igthumb{aspect-ratio:1;background:linear-gradient(140deg,#2E51FF,#16246B);display:grid;
  place-items:center;color:#fff;font-weight:800;font-size:13px;text-align:center;padding:0 12px;
  line-height:1.2;letter-spacing:-.02em}
.thumb{height:94px;border-radius:13px 13px 0 0;background:var(--navy);display:grid;place-items:center}
.thumb.ig{background:var(--blue)}
.thumb.post{background:#E4E9F6}
.thumb.post span{color:var(--navy);font-weight:800;font-size:14px;text-align:center;padding:0 10px;
  line-height:1.15;letter-spacing:-.02em}
.play{width:32px;height:32px;border-radius:99px;background:#fff;display:grid;place-items:center;
  color:var(--navy);font-size:11px;padding-left:2px}
.cmeta{padding:10px 11px 12px}
.ch{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--blue)}
.ct{font-size:12.5px;line-height:1.35;margin-top:3px;font-weight:600}

.contact{margin-top:32px;background:var(--grey);border-radius:18px;padding:22px}
.contact h2{margin:0;font-size:23px;font-weight:800;letter-spacing:-.028em}
.clist{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px;grid-template-columns:repeat(3,1fr)}
@media (max-width:640px){.clist{grid-template-columns:1fr}}
.clist li{background:#fff;border-radius:12px;padding:14px}
.clabel{display:block;font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:11px;
  letter-spacing:.17em;text-transform:uppercase;color:var(--blue)}
.cval{display:block;margin-top:5px;font-size:16px;font-weight:800;letter-spacing:-.02em;
  overflow-wrap:anywhere;font-style:normal;min-width:0}
.cval.sm{font-size:13.5px;font-weight:700;line-height:1.4}

.reg{margin-top:14px;background:var(--navy);color:#fff;border-radius:18px;padding:20px 22px}
.reg .kicker{color:#93A6FF}
.reglist{margin:12px 0 0;display:grid}
@media (min-width:760px){.reglist{grid-template-columns:1fr 1fr;gap:0 34px}}
.reglist div{display:flex;justify-content:space-between;gap:14px;padding:9px 0;
  border-top:1px solid rgba(255,255,255,.2)}
.reglist dt{margin:0;font-size:13px;color:#A9B7FF}
.reglist dd{margin:0;font-size:13px;font-weight:700;text-align:right;
  font-variant-numeric:tabular-nums;overflow-wrap:anywhere;min-width:0}
.reglist dt{overflow-wrap:anywhere;min-width:0}

.legal{margin-top:26px;border-top:1px solid var(--line);padding:20px 0 34px;color:#6B7488;
  font-size:12.5px;line-height:1.7}
.legal p{margin:0 0 9px;max-width:78ch}
.legal b{color:var(--ink);font-weight:700}
.legal .warn{color:var(--ink);font-weight:700;font-size:13.5px;margin-top:14px}
.legal .copy{margin-top:14px;font-size:12px;display:flex;justify-content:space-between;gap:14px;
  flex-wrap:wrap;border-top:1px solid var(--line);padding-top:12px}
.legal .copy a{color:var(--blue);font-weight:700;text-decoration:none}
.dock{position:sticky;bottom:0;z-index:22;display:grid;grid-template-columns:1.35fr 1fr;gap:9px;
  padding:10px 16px 13px;background:linear-gradient(to top,#fff 68%,rgba(255,255,255,0))}
@media (min-width:900px){.dock{display:none}}

/* ---------- the value strip: what "through me" is actually worth ---------- */
.values{display:grid;gap:10px;margin-top:16px;grid-template-columns:repeat(3,1fr)}
@media (max-width:640px){.values{grid-template-columns:1fr}}
.value{background:var(--blue);color:#fff;border-radius:14px;padding:15px 16px 16px}
.vn{display:block;font-size:26px;font-weight:800;letter-spacing:-.04em;line-height:1}
.vt{display:block;margin-top:7px;font-size:13.5px;font-weight:700;line-height:1.3}
.vd{display:block;margin-top:4px;font-size:12.5px;line-height:1.4;color:rgba(255,255,255,.82)}

/* ---------- players open ON the site ---------- */
.card{cursor:pointer}
.igcard{cursor:pointer}
/* NOTE: .lb is the LIGHTBOX overlay and nothing else may use that class.
   The analyst stat label was called .lb and inherited position:fixed + a
   near-black background from this rule, which painted the whole screen dark. */
.lb{position:fixed;inset:0;z-index:60;background:rgba(6,8,16,.86);display:none;
  align-items:center;justify-content:center;padding:20px}
.lb.open{display:flex}
.lbin{width:min(880px,100%);background:#0B0D12;border-radius:16px;overflow:hidden;position:relative}
.lbin.sq{width:min(460px,100%)}
.lbframe{aspect-ratio:16/9;background:#000;display:grid;place-items:center}
.lbin.sq .lbframe{aspect-ratio:1}
.lbframe iframe{width:100%;height:100%;border:0;display:block}
.lbmeta{padding:13px 16px 15px;color:#fff}
.lbmeta b{display:block;font-size:15px;font-weight:700;line-height:1.3}
.lbmeta s{text-decoration:none;display:block;margin-top:4px;font-size:12.5px;color:#93A6FF}
.lbx{position:absolute;top:9px;right:9px;width:34px;height:34px;border-radius:99px;border:0;
  background:rgba(255,255,255,.92);color:#0B0D12;font:700 17px/1 "Barlow",sans-serif;cursor:pointer;z-index:2}
.lbnote{padding:16px;color:#C6D2FF;font-size:13px;line-height:1.5;text-align:center}
.lbnote code{color:#fff;font-size:11.5px;word-break:break-all}



/* ===================== ARTICLE PAGES (HUF, Navi Mumbai) ===================== */
.art{padding:30px 0 10px}
.art .kicker{margin-bottom:10px}
.art h1{font-size:clamp(27px,4.4vw,38px);max-width:22ch;margin:0}
.art .stand{margin:16px 0 0;font-size:clamp(16px,2.2vw,19px);line-height:1.5;color:var(--meta);
  max-width:60ch}
.prose{padding:6px 0 10px}
.prose h2{font-size:clamp(21px,3vw,27px);font-weight:800;letter-spacing:-.028em;line-height:1.14;
  margin:34px 0 0;max-width:26ch;scroll-margin-top:78px}
.prose h3{font-size:17.5px;font-weight:800;letter-spacing:-.02em;margin:22px 0 0}
.prose p{margin:11px 0 0;font-size:16px;line-height:1.62;color:var(--meta);max-width:68ch}
.prose p strong,.prose li strong{color:var(--ink);font-weight:700}
.prose ul,.prose ol{margin:12px 0 0;padding-left:20px;max-width:68ch}
.prose li{margin:8px 0;font-size:16px;line-height:1.55;color:var(--meta)}
.toc{margin:24px 0 0;padding:16px 18px;background:var(--grey);border-radius:14px}
.toc p{margin:0 0 8px;font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:12px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--meta)}
.toc ol{margin:0;padding-left:20px;columns:1}
@media (min-width:680px){.toc ol{columns:2;column-gap:28px}}
.toc li{margin:3px 0;font-size:14.5px;break-inside:avoid;color:var(--ink)}
.toc a{text-decoration:none;font-weight:600}
.toc a:hover{text-decoration:underline}

/* the form list — HUF page only */
.files{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px;grid-template-columns:1fr 1fr}
@media (max-width:640px){.files{grid-template-columns:1fr}}
.files a{display:flex;align-items:center;gap:11px;background:var(--grey);border-radius:12px;
  padding:13px 14px;color:var(--ink);text-decoration:none;font-size:14.5px;font-weight:700;
  line-height:1.3;transition:background-color .15s ease}
.files a:hover,.files a:focus-visible{background:#E6EAF6}
.files i{flex:none;font-style:normal;font-family:"Barlow Condensed",sans-serif;font-size:10.5px;
  letter-spacing:.11em;background:var(--navy);color:#fff;padding:4px 6px;border-radius:5px;font-weight:700}
.files .sub{text-decoration:none;display:block;font-weight:500;font-size:12.5px;color:var(--meta);
  margin-top:2px}
.callout{margin:22px 0 0;background:var(--blue);color:#fff;border-radius:16px;padding:20px 22px 22px}
.callout h3{margin:0;font-size:20px;font-weight:800;letter-spacing:-.026em;color:#fff}
.callout p{margin:8px 0 0;color:rgba(255,255,255,.9);font-size:15px;max-width:56ch}
.callout .duo{margin-top:16px}
.callout .b-s{background:#fff;color:var(--blue);box-shadow:none}
.crumb{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:12px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--meta);padding-top:22px}
.crumb a{color:var(--meta);text-decoration:none}
.crumb a:hover{color:var(--blue)}

/* video thumbnails now carry a real image */
.thumb{position:relative}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:34px;height:34px;border-radius:99px;background:#fff;display:grid;place-items:center;
  color:var(--navy);font-size:12px;padding-left:2px}
.card:hover .thumb .play,.card:focus-visible .thumb .play{background:var(--blue);color:#fff}

/* Two long-labelled buttons in a 1.3fr/1fr grid clip on a phone, because .btn
   is nowrap. The dock keeps two columns — its labels are short — everything
   else stacks. Found by screenshot; overflow-x:clip was hiding it. */
@media (max-width:560px){
  .duo{grid-template-columns:1fr}
  .callout .duo,.art .duo{grid-template-columns:1fr}
}
.dock{grid-template-columns:1.35fr 1fr}


/* Sub-labels were <s>, which MEANS "no longer accurate" and renders struck
   through. Wrong element; it read as deleted text the moment CSS was late.
   One class, and it fails to plain small text instead. */
.sub{display:block;text-decoration:none;font-weight:500;font-size:12.5px;
  color:var(--meta);margin-top:2px;line-height:1.35}
.reglist .sub{color:#A9B7FF}

.files .sub{color:var(--meta)}

/* The tagline now IS the plans headline, so it carries more weight than a
   normal panel head and needs no eyebrow above it. */
.panel .panel-lead{font-size:clamp(21px,2.9vw,30px);line-height:1.14;max-width:24ch;margin:0}
@media (max-width:640px){.panel .panel-lead{font-size:20px;max-width:none}}


/* ========================= WEIGHT 2 =========================
   Blue is now spent on four things only: the plans panel, the two question
   heads and the Why Swarna panel. Everything that used to be a solid blue or
   navy block is a bordered glass box on a faint wash — glass needs something
   to be glass against, so its section carries the wash. */

.wash{background:
   radial-gradient(680px 300px at 12% 0%, rgba(46,81,255,.10), transparent 62%),
   radial-gradient(520px 280px at 92% 40%, rgba(46,81,255,.07), transparent 60%),
   #FBFCFE;
  border-radius:22px;padding:22px;margin-top:16px}
@media (max-width:640px){.wash{padding:15px;border-radius:18px}}
.glass{background:rgba(255,255,255,.82);border:1px solid rgba(11,13,18,.13);border-radius:18px;
  box-shadow:0 1px 2px rgba(11,13,18,.05),0 16px 32px -22px rgba(11,13,18,.45)}
/* blur is the most expensive property in CSS on a phone — flat fill instead */

/* ---- plan card hover: reverse to blue (option A) ---- */
.plan{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background-color .18s ease}
@media (hover:hover){
  .plan:hover{background:var(--blue);border-color:var(--blue);transform:translateY(-4px);
    box-shadow:0 18px 36px -20px rgba(46,81,255,.9)}
  .plan:hover h3,.plan:hover dd{color:#fff}
  .plan:hover .ptag{color:#BCCBFF}
  .plan:hover .ptag em{background:#fff;color:var(--blue)}
  .plan:hover dt{color:#A9BCFF}
  .plan:hover .sub{color:#D8E1FF}
  .plan:hover dl div{border-color:rgba(255,255,255,.28)}
  .plan:hover .btn{background:#fff;color:var(--blue)}
  .plan:hover .pill{background:rgba(255,255,255,.9);color:var(--blue)}
}

/* ---- three-step process line ---- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);margin-top:20px;position:relative}
.step{display:flex;flex-direction:column;align-items:center;text-align:center;position:relative;padding:0 8px}
.step:not(:last-child)::after{content:"";position:absolute;top:21px;left:calc(50% + 26px);
  right:calc(-50% + 26px);height:2px;background:linear-gradient(90deg,var(--blue),rgba(46,81,255,.25))}
.sn{width:42px;height:42px;border-radius:99px;background:var(--blue);color:#fff;display:grid;
  place-items:center;font-weight:800;font-size:17px;position:relative;z-index:2;box-shadow:0 0 0 5px #fff}
.st{margin-top:10px;font-size:14.5px;font-weight:700;letter-spacing:-.015em;line-height:1.25;max-width:16ch}
@media (max-width:640px){
  .steps{grid-template-columns:1fr;gap:14px;margin-top:16px}
  .step{flex-direction:row;text-align:left;gap:13px;align-items:center;padding:0}
  .step:not(:last-child)::after{top:42px;left:20px;right:auto;width:2px;height:14px;
    background:linear-gradient(180deg,var(--blue),rgba(46,81,255,.25))}
  .sn{width:38px;height:38px;font-size:15px;flex:none}
  .st{margin-top:0;max-width:none;font-size:14px}
}

/* ---- collapsible questions, blue heads ---- */
details.q{margin-top:20px}
details.q > summary{list-style:none;cursor:pointer;padding:17px 20px;display:flex;align-items:center;
  gap:14px;background:var(--blue);border-radius:16px}
details.q > summary::-webkit-details-marker{display:none}
details.q[open] > summary{border-radius:16px 16px 0 0}
.qt{flex:1;font-size:clamp(19px,2.4vw,25px);font-weight:800;letter-spacing:-.028em;color:#fff}
.qp{flex:none;width:30px;height:30px;position:relative}
.qp::before,.qp::after{content:"";position:absolute;background:#fff;border-radius:2px;transition:transform .22s}
.qp::before{left:0;top:14px;width:30px;height:3px}
.qp::after{left:14px;top:0;width:3px;height:30px}
details.q[open] .qp::after{transform:scaleY(0)}
.qbody{background:var(--grey);border-radius:0 0 16px 16px;padding:18px 20px 20px}
@media (max-width:640px){details.q > summary{padding:14px 16px}.qbody{padding:15px 16px 17px}}

/* ---- Angel One as a superapp ---- */
.supers{display:grid;gap:9px;grid-template-columns:repeat(4,1fr);margin-top:14px}
@media (max-width:640px){.supers{grid-template-columns:1fr 1fr}}
.super{background:#fff;border:1px solid var(--line);border-radius:13px;padding:13px}
.super b{display:block;font-size:14.5px;font-weight:800;letter-spacing:-.015em}
.super span{display:block;font-size:11.5px;color:var(--meta);margin-top:3px;line-height:1.35}

/* ---- value tiles: glass, not solid blue ---- */
.value{background:rgba(255,255,255,.82);border:1px solid rgba(11,13,18,.13);border-radius:14px;
  padding:15px 16px 16px;color:var(--ink);box-shadow:0 1px 2px rgba(11,13,18,.05)}
.vn{display:block;font-size:26px;font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--blue)}
.vt{display:block;margin-top:7px;font-size:13.5px;font-weight:700;color:var(--ink)}
.vd{display:block;margin-top:4px;font-size:12.5px;line-height:1.4;color:var(--meta)}

/* ---- research block: glass, not navy ---- */
.ra{margin-top:0;background:rgba(255,255,255,.86);border:1px solid rgba(11,13,18,.13);
  border-radius:18px;padding:20px 22px 22px;color:var(--ink);}
.ra .kicker{color:var(--blue)}
.ra h3{color:var(--ink)}
.ra p,.ra .rabody{color:var(--meta)}
.ra .ranote{color:var(--meta);font-size:12.5px}

/* ---- analyst cards ---- */
.ras{display:grid;gap:11px;grid-template-columns:1fr 1fr;margin-top:14px}
@media (max-width:640px){.ras{grid-template-columns:1fr}}
.rac{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff}
.rah{display:flex;align-items:center;gap:12px;padding:13px 14px;background:#F4F6FC}
.rav{width:44px;height:44px;border-radius:99px;background:var(--navy);color:#fff;display:grid;
  place-items:center;font-weight:800;font-size:15px;flex:none}
.ran{font-size:16px;font-weight:800;letter-spacing:-.02em;line-height:1.2}
.rar{font-size:11.5px;color:var(--meta);margin-top:2px;font-variant-numeric:tabular-nums}
.ill{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:9.5px;letter-spacing:.13em;
  text-transform:uppercase;background:#EEF1F8;color:#5B6478;padding:3px 7px;border-radius:5px;
  border:1px solid var(--line);flex:none}
.rab{padding:12px 14px 14px}
.stat{display:flex;justify-content:space-between;gap:12px;background:#F4F6FC;border-radius:10px;padding:10px 12px}
.stat .slb{font-size:10.5px;color:var(--meta);font-family:"Barlow Condensed",sans-serif;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;display:block}
.stat .vv{font-size:16px;font-weight:800;color:var(--green);margin-top:2px;display:block}
.stat .vv.r{color:var(--ink);font-size:13.5px;font-weight:700}
.stat .vv .g{color:var(--green)}.stat .vv .rd{color:#D92D20}
.rast{font-size:12.5px;color:var(--meta);margin-top:9px;line-height:1.45}
.rapills{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.rapill{font-size:11px;font-weight:700;padding:4px 9px;border-radius:6px;border:1px solid var(--line);color:var(--meta)}
.rapill.on{border-color:rgba(17,175,75,.5);color:var(--green);background:rgba(17,175,75,.08)}
.radisc{margin:12px 0 0;font-size:11.5px;color:var(--meta);line-height:1.45}

/* ---- feed: the play mark no longer covers the frame; newest three flagged ---- */
.thumb .play{position:absolute;left:9px;bottom:9px;top:auto;transform:none;width:26px;height:26px;
  font-size:9px}
.newpill{position:absolute;right:9px;top:9px;background:var(--green);color:#fff;
  font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;padding:3px 7px;border-radius:5px;z-index:2}


/* Registration block: every value is now a single line, so rows sit on one
   baseline and the rules line up across all three columns. The sub-lines that
   made it ragged are folded into the label instead. */
.reg{padding:22px 0 24px}
.reglist{display:grid;gap:0 34px;grid-template-columns:1fr}
@media (min-width:620px){.reglist{grid-template-columns:1fr 1fr}}
@media (min-width:900px){.reglist{grid-template-columns:repeat(3,1fr)}}
.reglist div{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:9px 0;border-top:1px solid rgba(255,255,255,.2);min-height:0}
.reglist dt{margin:0;font-size:12.5px;color:#A9B7FF;white-space:nowrap;
  font-family:"Barlow Condensed",sans-serif;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
.reglist dd{margin:0;font-size:13.5px;font-weight:700;text-align:right;
  font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.reglist .sub{display:none}

/* ===== Footer parity: the legal block, the registration block and the contact
   card now share one width and one inset, so their left and right edges line
   up down the page. The 78ch cap is gone — it was what left the legal text
   ragged at about 60% while the card above it ran full width. */
.legal{margin-top:26px;border-top:0;padding:0 0 34px;color:#6B7488}
.legal .wrap{background:var(--grey);border-radius:18px;padding:22px 24px 24px;
  max-width:1036px;margin:0 auto}
@media (max-width:640px){.legal .wrap{padding:17px 17px 19px;border-radius:16px;
  margin-inline:16px;width:auto}}
.legal p{margin:0 0 11px;max-width:none}
.legal .warn{margin-top:16px}
.legal .copy{margin-top:16px;padding-top:14px;border-top:1px solid rgba(11,13,18,.13)}

/* the registration block sits in the same column, same radius, same inset */
.reg{background:var(--navy);border-radius:18px;padding:22px 24px 24px;margin-top:20px}
.reg .wrap{padding:0;max-width:none}
@media (max-width:640px){.reg{padding:17px 17px 19px;border-radius:16px}}

/* ===== Mobile disclosure: a synopsis plus a link, not the full block =====
   The mandated warning stays VISIBLE on the phone — it is short and it is the
   one line the Code says may not be abbreviated. Everything else moves to
   /disclosures behind a link. Desktop is unchanged and still carries it all. */
.reg-lite{display:none}
@media (max-width:860px){
  .reg-lite{display:block;margin-top:20px}
  .reg-lite .wrap{background:var(--grey);border-radius:16px;padding:16px 17px 17px;margin-inline:16px;width:auto}
  .rl-line{margin:0;font-size:12px;line-height:1.6;color:var(--meta)}
  .rl-line b{color:var(--ink);font-weight:700}
  .rl-warn{margin:10px 0 0;font-size:12.5px;line-height:1.5;color:var(--ink);font-weight:700}
  .rl-link{display:inline-block;margin-top:12px;font-family:"Barlow Condensed",sans-serif;font-weight:700;
    font-size:12.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--blue);text-decoration:none}
  /* the long blocks fold away on the phone */
  .reg,.legal{display:none}
}

/* ===== Mobile: the slider card at the centre gets the desktop hover look =====
   A phone has no hover, so the card under the thumb is chosen by position
   instead. Same reverse-to-blue as option A. */
@media (hover:none){
  .plan.is-center{background:var(--blue);border-color:var(--blue);
    box-shadow:0 14px 30px -18px rgba(46,81,255,.9)}
  .plan.is-center h3,.plan.is-center dd{color:#fff}
  .plan.is-center .ptag{color:#BCCBFF}
  .plan.is-center .ptag em{background:#fff;color:var(--blue)}
  .plan.is-center dt{color:#A9BCFF}
  .plan.is-center .sub{color:#D8E1FF}
  .plan.is-center dl div{border-color:rgba(255,255,255,.28)}
  .plan.is-center .btn{background:#fff;color:var(--blue)}
  .plan:active{transform:scale(.985)}
}

/* ===== The hero CTAs are redundant on a phone — the sticky dock has both ===== */
@media (max-width:860px){.hero .duo{display:none}.hero .micro{margin-top:4px}}