/* ===========================================================================
   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;--orange:#FF7300}
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}
  /* The standing line is now two long lines ("Swarnangka Samaddar" over
     "Authorised Person · Angel One"), so both it and the wordmark scale with the
     viewport rather than sitting at fixed sizes — at 375px the fixed values ran
     off the screen and clipped "One". */
  .mark .wm{font-size:clamp(19px,6.3vw,24px)}
  .mark .markline{font-size:clamp(6.6px,2.12vw,8.6px);letter-spacing:.055em;
    padding-left:clamp(6px,2.2vw,9px);line-height:1.3}
}
@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;
  touch-action:pan-y}   /* horizontal gestures drive the carousel; vertical stays page scroll */
.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;position:relative;overflow:hidden;
  background:linear-gradient(90deg,var(--blue) 0%,var(--blue) 42%,rgba(46,81,255,.22) 100%)}
/* comet: a bright head with the tail trailing behind it, run once each time the
   headline changes. The bar itself never moves — only this overlay travels. */
.rule::after{content:"";position:absolute;top:0;bottom:0;left:0;width:34%;
  border-radius:inherit;pointer-events:none;opacity:0;transform:translateX(-120%);
  background:linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.18) 52%,
    rgba(255,255,255,.62) 84%,
    rgba(255,255,255,.96) 100%)}
.rule.sweep::after{animation:comet .62s cubic-bezier(.32,.72,.28,1) both}
@keyframes comet{
  0%  {opacity:0;transform:translateX(-120%)}
  14% {opacity:1}
  82% {opacity:1}
  100%{opacity:0;transform:translateX(300%)}
}
@media (prefers-reduced-motion:reduce){.rule.sweep::after{animation:none}}
@media (max-width:760px){.rule{margin-left:auto;margin-right:auto}}
.micro{margin:12px 0 0;font-size:13px;color:var(--blue);font-weight:700;
  text-wrap:balance}   /* balance where supported; the width cap below is the fallback */
/* Bold widened this line and it wrapped with "extra." alone on line two.
   text-wrap:balance is ignored by some engines, so the break is forced with a
   width cap instead — it lands after "Person", giving two even lines. */
@media (max-width:760px){.micro{max-width:250px;margin-left:auto;margin-right:auto}}

/* ---- hero carousel  [PARKED — markup lives in _parked/hero-v1, kept so the
   previous banner can be restored without rebuilding it] -------------------------------------------------------
   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 */
  /* sized to match .panel-lead, the blue panel's headline. max-width is the
     hero's own (34ch, not the panel's 24ch) so the longest line still lands in
     three, which is what keeps the reserved block short. */
  font-size:clamp(21px,2.9vw,30px);line-height:1.14;max-width:34ch}
@media (max-width:640px){.hero-h{font-size:20px;max-width:none}}
/* 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 .17s ease,transform .17s ease}
.hero-h .hs.on{opacity:1;transform:none;pointer-events:auto;
  transition:opacity .3s ease .15s,transform .3s ease .15s}
@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 .16s ease,transform .16s ease}
  .hero-h .hs.on{transform:none;transition:opacity .28s ease .14s,transform .28s ease .14s}
}
@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)}
/* product-specific disclaimers sit with the products they qualify */
.proddisc{margin:14px 0 0;font-size:12px;line-height:1.55;color:var(--meta);
  border-left:2px solid var(--line);padding-left:12px}
@media (max-width:640px){.proddisc{font-size:12.5px}}

/* 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)}

/* the label and its badge share one line; nowrap stops "For pro traders /
   Priority services" breaking into two rows in a 218px card */
.ptag{flex-wrap:nowrap;white-space:nowrap;min-width:0;
  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(--orange);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%;
  /* .btn is nowrap at a fixed 46px, which clips any label longer than the card.
     The plan CTA is founder-editable in config.js, so it wraps and grows instead
     of clipping whatever text is put there. */
  white-space:normal;height:auto;min-height:46px;line-height:1.2;
  padding-top:9px;padding-bottom:9px;text-wrap:balance}

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

/* ---- banner: Angel One creatives, three across, infinitely slidable -------
   Replaces the headline+portrait hero (parked in _parked/hero-v1). The tiles
   are square because the artwork is square and the statutory line is baked into
   its foot — cropping to a wide strip would cut off the very thing that has to
   be displayed. */
.aobarwrap{position:relative}
/* Auto-running AND hand-slidable, so it has to be a real scroll container: a
   CSS transform marquee cannot be dragged. app.js advances scrollLeft on a
   timer and hands control over the moment a finger or pointer takes hold.
   Snapping stays off — it would haul the row back every frame. */
.aobar{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  border-radius:2px;cursor:grab}
.aobar::-webkit-scrollbar{display:none}
.aobar.dragging{cursor:grabbing}
.aorow{display:flex;gap:14px;width:max-content}
.aoslide{flex:0 0 var(--aow);aspect-ratio:1/1;border-radius:16px;overflow:hidden;background:#04123f}
.aoslide img{width:100%;height:100%;object-fit:cover;display:block;
  -webkit-user-drag:none;user-select:none;pointer-events:none}
:root{--aow:calc((min(1080px,100vw - 44px) - 28px)/3)}
@media (max-width:900px){:root{--aow:calc((100vw - 44px - 14px)/2)}}
@media (max-width:640px){:root{--aow:calc(100vw - 76px)}.aorow{gap:10px}}}



#lbframe .aofull{width:100%;height:auto;display:block;border-radius:10px}
#lbframe video.aofull{background:#000}


/* ---- Stepwise account opening -------------------------------------------
   A rail rather than a grid: 20 screens in Angel One's flow condense to 8
   stages, which is too many to read as a block but reads fine one at a time.
   Scroll-snap does the work; the arrows are the desktop affordance. */
.open-steps{margin-top:26px}
.open-steps .bandhead{align-items:center}
.onav{display:flex;gap:7px}
.oarrow{width:34px;height:34px;border-radius:50%;border:1.4px solid var(--line);background:#fff;
  color:var(--blue);font-size:19px;line-height:1;cursor:pointer;display:grid;place-items:center;
  transition:border-color .18s ease,background .18s ease,color .18s ease}
.oarrow:hover{border-color:var(--blue);background:var(--blue);color:#fff}
.oarrow:disabled{opacity:.32;cursor:default}
.oarrow:disabled:hover{border-color:var(--line);background:#fff;color:var(--blue)}
.oarrow:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
@media (hover:none){.onav{display:none}}   /* a thumb swipes; arrows are for a pointer */

.orail{list-style:none;margin:8px 0 0;
  /* overflow-x also clips the Y axis, so the 3px hover lift was shaved off the
     top of every card — this is the room it needs */
  padding:6px 2px 8px;display:flex;gap:11px;
  overflow-x:auto;scroll-snap-type:x mandatory;   /* no scroll-behavior:smooth — it never
     completes on this rail; app.js tweens the arrows instead */
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.orail::-webkit-scrollbar{display:none}
.ostep{flex:0 0 242px;scroll-snap-align:start;background:var(--grey);border:1.4px solid transparent;
  border-radius:14px;padding:15px 16px 17px;min-height:150px;
  transition:background .2s ease,border-color .2s ease,transform .2s ease,box-shadow .2s ease,color .2s ease}
/* reverses to blue on hover, the same treatment as the plan cards */
@media (hover:hover){
  .ostep:hover{background:var(--blue);border-color:var(--blue);transform:translateY(-3px);
    box-shadow:0 14px 30px -20px rgba(46,81,255,.85)}
  .ostep:hover h3{color:#fff}
  .ostep:hover p{color:rgba(255,255,255,.86)}
  .ostep:hover .on{background:#fff;color:var(--blue)}
}
.ostep .on{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:var(--blue);color:#fff;font-family:"Barlow Condensed",sans-serif;font-weight:700;
  font-size:14px;line-height:1;transition:background .2s ease,color .2s ease}
.ostep h3{margin:10px 0 0;font-size:15.5px;font-weight:800;letter-spacing:-.02em;color:var(--ink);
  transition:color .2s ease}
.ostep p{margin:5px 0 0;font-size:13px;line-height:1.45;color:var(--meta);
  transition:color .2s ease}
@media (max-width:760px){
  .ostep{flex:0 0 78%;min-height:0}
  .orail{gap:10px}
  }

/* footnote marker on the brokerage qualifier under the plan cards */
.ast{color:var(--blue);font-weight:800;margin-right:2px}

.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}
/* the Angel One video band sits in the same grey box the other sections use.
   The rail keeps scrolling inside it, and bleeds to the box edge so a card is
   cut by the boundary rather than stopping short of it — which is the cue that
   there are more. */
.aobox{margin-top:32px;background:var(--grey);border-radius:18px;padding:20px 22px 16px;overflow:hidden}
.aobox .bandhead{margin:0}
.aobox .bandhead h2{margin:0;font-size:23px;font-weight:800;letter-spacing:-.028em}
.aobox .rail{padding:14px 0 4px;margin-right:-22px}
.aobox .card{background:#fff}
@media (max-width:640px){
  .aobox{padding:16px 16px 12px}
  .aobox .rail{margin-right:-16px}
  .aobox .bandhead h2{font-size:20px}
}
.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}
/* Touch targets. The phone and email render ~22-25px tall — fine for a mouse,
   under the 44px both Apple and Google ask for on a thumb, and they are the two
   conversions on the page. The hit area is grown with a pseudo-element instead
   of padding so the card layout does not move. Each list item holds exactly one
   link, so the enlarged areas cannot overlap each other. */
@media (hover:none){
  a.cval{position:relative}
  a.cval::after{content:"";position:absolute;left:0;right:0;top:50%;
    transform:translateY(-50%);height:44px}
}

.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;
  /* an app bar, not content that happens to sit low: a solid ground, a hairline
     and a lift. env(safe-area-inset-bottom) keeps it clear of the iPhone home
     indicator, which the old gradient version sat underneath. */
  padding:10px 16px calc(13px + env(safe-area-inset-bottom,0px));
  background:#fff;border-top:1px solid var(--line);
  box-shadow:0 -8px 22px -16px rgba(11,13,18,.45)}
@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;
  color:inherit}
/* the slim variant: one line stretched the width of the bar, no sub-line */
.panel.slim{padding:13px 20px;border-radius:14px;
  /* nowrap keeps the link beside the sentence; the sentence wraps inside its own
     column instead of taking the whole band and pushing the link onto a row of
     its own. Below 640px it does wrap, and the divider is dropped there. */
  display:flex;align-items:stretch;gap:8px 18px;flex-wrap:nowrap}
@media (max-width:640px){.panel.slim{flex-wrap:wrap}}
.panel.slim .panel-lead{flex:1 1 auto;min-width:0;align-self:center}
.panel.slim .panel-note{display:flex;align-items:center}
.panel-note{flex:0 0 auto;font-size:12px;font-weight:700;letter-spacing:.01em;white-space:nowrap;
  color:rgba(255,255,255,.84);text-decoration:none;
  /* a hairline divides the sentence from the link when they share a line */
  border-left:1px solid rgba(255,255,255,.34);padding-left:18px;
  transition:color .18s ease,border-color .18s ease}
.panel-note span{border-bottom:1px solid rgba(255,255,255,.38);padding-bottom:1px}
.panel-note:hover span{border-color:#fff}
.panel-note:hover{color:#fff}
.panel-note:focus-visible{outline:2px solid #fff;outline-offset:3px}
/* once it wraps below the sentence a left hairline points at nothing, so the
   divider only exists while the two actually share a line */
@media (max-width:640px){.panel-note{font-size:11.5px;border-left:0;padding-left:0}}
.panel.slim .panel-lead{font-size:clamp(13.5px,1.72vw,19px);line-height:1.3;max-width:none;
  letter-spacing:-.02em}
@media (max-width:640px){.panel.slim{padding:12px 15px}}   /* it is an <h1> now, and the h1 rule sets a dark ink colour that
     beat the panel's inherited white — this keeps it white on the blue */
@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)}
}

/* ---- collapsible questions, blue heads ---- */
details.q{margin-top:20px}
/* the run of blue boxes alternates blue, navy, blue down the page */
details.q.navy > summary{background:var(--navy)}
details.q.navy .qbody{border-color:var(--navy)}
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}
/* two rows, laid out as a grid: title and the plus on the first, the intro line
   across the full width beneath. Flex wrapping left the plus stranded in the
   middle of the row. */
details.q > summary{display:grid;grid-template-columns:1fr auto;gap:0 14px;align-items:center}
.qt{grid-column:1;grid-row:1}
.qp{grid-column:2;grid-row:1}
/* second row of the summary: the line that introduces what is inside. It is
   repeated at the top of the panel, so it is dropped the moment the panel opens
   rather than being read twice. */
.qtease{grid-column:1 / -1;grid-row:2;margin:7px 0 0;font-size:14.5px;line-height:1.45;
  color:rgba(255,255,255,.86);font-weight:400;max-width:70ch}
details.q[open] > summary .qtease{display:none}
details.q[open] > summary{padding-bottom:15px}
@media (max-width:640px){.qtease{font-size:13.5px;margin-top:6px}}
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;
    position:relative}
  .rl-link::after{content:"";position:absolute;left:0;right:0;top:50%;
    transform:translateY(-50%);height:44px}
  /* 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}}

/* ---- the nudge -----------------------------------------------------------
   "Open Demat Account" scrolls here, and without a pointer the visitor lands in
   a wall of four cards with no idea which control actually opens an account.
   A drawn orange arrow points at the first card's button, then fades. */
.nudge{position:absolute;z-index:14;pointer-events:none;opacity:0;
  transition:opacity .3s ease}
.nudge.on{opacity:1}
.nudge svg{display:block;filter:drop-shadow(0 6px 14px rgba(255,115,0,.45))}
.nudge .bob{animation:nudgebob 1.05s ease-in-out 5 alternate}
@keyframes nudgebob{from{transform:translateY(0)}to{transform:translateY(9px)}}
@media (prefers-reduced-motion:reduce){.nudge .bob{animation:none}}
/* the card outline is set inline by app.js — it competes with .feat and
   .is-center and inline is the only thing that reliably wins */
.plan.nudged .btn.b-p{background:var(--orange)}

/* ---- phones: fewer sideways rails, and a floor under the body type -------
   The banner, the steps, the plan cards and the videos all scrolled sideways.
   Four horizontal rails stacked down one screen means four places a vertical
   swipe can be caught, which is most of what "not responsive" feels like in the
   hand. The steps are a read-through list rather than a choice, so on a phone
   they become a grid and need no gesture at all. */
@media (max-width:760px){
  /* one sliding row, as asked — the steps are read one at a time rather than
     taken in at a glance */
  .orail{gap:9px;padding:6px 2px 8px}
  .ostep{flex:0 0 76%;min-height:0;padding:13px 14px 15px}
  .ostep h3{font-size:14px;margin-top:8px}
  .ostep p{font-size:12.5px;line-height:1.4}
  .onav{display:none}

  /* Running copy gets a floor. The uppercase micro-labels (.ch, dt, .ptag,
     .clabel, .slb) stay small on purpose — they are a different typographic
     role and read fine in condensed caps. */
  .ct{font-size:13.5px;line-height:1.35}
  .zl,.vd,.plannote,.foot,.rl-line,.rl-warn,.rl-link,.ranote,.radisc{font-size:13px}
  .sub{font-size:12.5px}
  .panel-note{font-size:12.5px}
}


/* ---- policy page: the eleven clauses ------------------------------------
   The clauses used to run as one long left-aligned column inside a 1080px
   wrap, leaving the right half of a desktop screen empty. As full-width bands
   they fill the measure, and the page opens as a scannable list of eleven
   questions rather than a wall to read top to bottom. */
details.q.pol{margin-top:11px}
details.q.pol .qn{display:inline-grid;place-items:center;min-width:29px;height:29px;padding:0 6px;
  border-radius:8px;background:rgba(255,255,255,.16);color:#fff;margin-right:12px;
  font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:15px;letter-spacing:.04em;
  vertical-align:2px}
details.q.pol .qt{font-size:clamp(17px,2vw,21px)}
details.q.pol .qbody{padding:20px 22px 22px}
/* running text inside a clause wants a readable measure, not the full band */
details.q.pol .qbody > *{max-width:74ch}
details.q.pol .qbody p{margin:0 0 11px;font-size:15px;line-height:1.6;color:var(--ink)}
details.q.pol .qbody p:last-child{margin-bottom:0}
details.q.pol .qbody ul,details.q.pol .qbody ol{margin:0 0 12px;padding-left:20px}
details.q.pol .qbody li{margin:5px 0;font-size:15px;line-height:1.55}
details.q.pol .qbody h3{margin:16px 0 7px;font-size:16px;font-weight:800;letter-spacing:-.02em}
@media (max-width:640px){
  details.q.pol .qbody{padding:15px 16px 17px}
  details.q.pol .qbody p,details.q.pol .qbody li{font-size:14.5px}
  details.q.pol .qn{min-width:25px;height:25px;font-size:13.5px;margin-right:9px}
}
/* the contents list reads as two balanced columns instead of a ragged block */
.toc ol{columns:2;column-gap:34px}
@media (max-width:640px){.toc ol{columns:1}}

/* ---- registration: the broker's own identity leads the block -------------
   AOL asked for their registration details, name and address alongside the AP's,
   and for the SEBI number to be prominent rather than one row in a list. */
.regtop{border-bottom:1px solid rgba(255,255,255,.16);padding:0 0 13px;margin:10px 0 12px}
.regco{margin:0;font-size:17px;font-weight:800;letter-spacing:-.02em;color:#fff}
.regsebi{margin:5px 0 0;font-size:16px;font-weight:800;letter-spacing:-.01em;color:#fff}
.regsebi b{color:#9FB4FF}
.regaddr{margin:7px 0 0;font-size:12.5px;line-height:1.55;color:rgba(255,255,255,.72);max-width:74ch}
.regsub{margin:0 0 13px;font-size:12.5px;line-height:1.55;color:rgba(255,255,255,.72);max-width:74ch}
@media (max-width:640px){
  .regco{font-size:15.5px}.regsebi{font-size:15px}
  .regaddr,.regsub{font-size:12.5px}
}