/* ============================================================================
   Chandramilan — hub-native stylesheet (4ab.in Great Services).
   ONE stylesheet. Replaces ab-design-system.css + chandramilan-abv2.css.
   Tokens follow _build/_shell.css (the hub shell) exactly, so the page reads as
   part of 4ab.in; the legacy variable names the pages' own inline <style> blocks
   already use are kept as aliases so no page-level CSS had to be rewritten.
   LIGHT ONLY (hub rule). No site header / footer / floating bar — the hub supplies them.
   ========================================================================== */

:root{
  /* --- hub tokens (verbatim from _build/_shell.css) --- */
  --navy:#0A2B63; --ink:#0F2039; --body-c:#3E5068; --muted:#7D8DA3;
  --blue:#0862F9; --blue-ink:#0A50C7; --blue-mid:#609CF2; --sky:#EAF3FE; --sky-2:#D6E8FD;
  --purple:#6D3BBF; --purple-soft:#F3EDFF;
  --paper:#F3F6FB; --cream:#F7F9FD; --card:#FFFFFF; --line:#E3E9F2; --hair:#EDF1F7;
  --c1:#F59E0B;--c2:#0862F9;--c3:#10B981;--c4:#8B5CF6;--c5:#0D9488;--c6:#EC4899;--c7:#F97316;--c8:#06B6D4;
  --n1:#B45309;--n2:#0A50C7;--n3:#15803D;--n4:#6D28D9;--n5:#0F766E;--n6:#BE185D;--n7:#C2410C;--n8:#0E7490;
  --l1:#FEF3C7;--l2:#DCEBFF;--l3:#D1FAE5;--l4:#EDE9FE;--l5:#CCFBF1;--l6:#FCE7F3;--l7:#FFEDD5;--l8:#CFFAFE;
  --r-sm:12px; --r-md:16px; --r-lg:22px;
  --shadow:0 4px 18px rgba(10,43,99,.06); --lift:0 14px 34px rgba(10,43,99,.12);
  --font-ui:"Roboto",system-ui,-apple-system,sans-serif;
  --font-brand:"Poppins",sans-serif;
  --font-hi:"Noto Sans Devanagari","Poppins",sans-serif;

  /* --- legacy aliases the pages' inline styles reference (do not remove) --- */
  --body:#3E5068;                      /* was never defined in the old CSS — defined here */
  --font-display:"Poppins",sans-serif;
  --navy-600:#0A50C7; --navy-900:#0F2039; --navy-950:#0A1730; --navy-tint:#EAF3FE;
  --gold:#0862F9;                      /* hub maps the legacy "gold" action colour to primary blue */
  --gold-ink:#0A50C7; --gold-soft:#C7DDFB; --gold-100:#EAF3FE; --gold-300:#9CC5FA;
  --gold-wash:#EAF3FE; --gold-ring:rgba(8,98,249,.30);
  --amber:#B45309; --amber-soft:#FEF3C7;   /* real gold kept as the heritage accent hue */
  --green-ink:#15803D; --tint-green:#D1FAE5;
  --line-soft:#EDF1F7;
  --ck-ink:#0F2039; --ck-body:#3E5068; --ck-line:#E3E9F2; --ck-muted:#7D8DA3;
  --radius:16px; --shadow-lg:0 14px 34px rgba(10,43,99,.12);
}

/* accent hue helpers — .kN (hub) and .ab-tint-N (this site's markup) are the same thing */
.k1,.ab-tint-1{--accent:var(--c1);--accent-ink:var(--n1);--wash:var(--l1)}
.k2,.ab-tint-2{--accent:var(--c2);--accent-ink:var(--n2);--wash:var(--l2)}
.k3,.ab-tint-3{--accent:var(--c3);--accent-ink:var(--n3);--wash:var(--l3)}
.k4,.ab-tint-4{--accent:var(--c4);--accent-ink:var(--n4);--wash:var(--l4)}
.k5,.ab-tint-5{--accent:var(--c5);--accent-ink:var(--n5);--wash:var(--l5)}
.k6,.ab-tint-6{--accent:var(--c6);--accent-ink:var(--n6);--wash:var(--l6)}
.k7{--accent:var(--c7);--accent-ink:var(--n7);--wash:var(--l7)}
.k8{--accent:var(--c8);--accent-ink:var(--n8);--wash:var(--l8)}

/* ===== base ===== */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html,body{margin:0}
body{background:var(--card);color:var(--body-c);font:15.5px/1.62 var(--font-ui);overflow-x:hidden}
:lang(hi),[lang="hi"]{font-family:var(--font-hi)}
img,svg,video{max-width:100%}
img{height:auto}
a{color:var(--blue-ink);text-decoration:none}
a:hover{color:var(--blue)}
h1,h2,h3,h4,h5,h6{margin:0 0 .5em;color:var(--ink);font-family:var(--font-brand);font-weight:600;letter-spacing:-.012em;line-height:1.25}
h1{font-size:clamp(25px,3.4vw,34px)}
h2{font-size:clamp(19px,2.3vw,24px)}
h3{font-size:17px}
h4{font-size:15px}
p{margin:0 0 .85em}
ul,ol{margin:0 0 .9em;padding-left:1.15em}
li{margin:.25em 0}
b,strong{color:var(--ink);font-weight:600}
hr{border:0;border-top:1px solid var(--line);margin:22px 0}
small{font-size:12.5px}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:6px}
::selection{background:var(--sky-2);color:var(--ink)}

/* ===== page frame (inside the hub's .hs-box) ===== */
.ab-page,.page{padding:20px 0 34px}
.ab-wrap,.container,.wrap,.detail-wrap,.acct-wrap,.vf-shell{width:100%;max-width:1180px;margin:0 auto;padding:0 20px}
.ab-s,.section,.sec{margin:0 0 26px}
.ab-s:last-child,.section:last-child{margin-bottom:0}

/* ===== page head: compact eyebrow + h1 + one-line lede (spec §28) ===== */
.cm-head{padding:6px 0 14px;border-bottom:1px solid var(--hair);margin-bottom:18px}
.cm-head h1{margin:2px 0 6px}
.cm-head .lead,.cm-head .ab-lede,.cm-head p{margin:0;color:var(--body-c);font-size:15px;max-width:76ch}
.kicker,.eyebrow,.ab-eyebrow,.ab-kicker,.acct-kicker,.cm-kicker{
  display:inline-flex;align-items:center;gap:7px;margin:0;
  font:600 10.5px/1 var(--font-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--blue-ink)}
.ab-eyebrow s,.eyebrow s{display:inline-block;width:16px;height:2px;background:var(--blue);text-decoration:none;border-radius:2px}
.ab-eyebrow i,.eyebrow i{font-style:normal}
.ab-eyebrow svg,.eyebrow svg,.kicker svg{width:13px;height:13px;flex:none;fill:none;stroke:currentColor;stroke-width:2}
.ab-eyebrow img,.eyebrow img{width:22px;height:22px;object-fit:contain}
.ab-eyebrow small,.eyebrow small{font:600 9.5px var(--font-ui);letter-spacing:.09em;color:var(--muted)}
.ab-eyebrow b,.eyebrow b{color:inherit;font-weight:600}

/* compact hero — only the ones we keep; never a full-bleed panel */
.ab-hero,.hero,.page-hero,.cm-hero{margin:0 0 18px}
.ab-hero__panel,.hero-copy{padding:0}
.ab-hero h1,.hero h1{font-size:clamp(26px,3.6vw,36px)!important;margin:4px 0 8px}
.ab-hero .lead,.ab-hero .ab-lede,.hero .lead{font-size:15.5px;color:var(--body-c);max-width:78ch;margin:0}
/* index.html keeps ONE compact two-column hero (spec §28: large hero on Home only) */
.hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:30px;align-items:center;
  padding:22px 24px;background:linear-gradient(135deg,var(--sky) 0%,#fff 58%);
  border:1px solid var(--line);border-radius:var(--r-lg);max-width:1180px;margin:0 auto}
.hero-copy{min-width:0}
.hero-copy h1{font-size:clamp(28px,3.3vw,40px)!important;margin:10px 0 10px}
.hero-copy .gold-word,h1 .gold-word,h1>span{color:var(--blue-ink)}
.hero-desc{font-size:15px;color:var(--body-c);max-width:62ch;margin:0}
.hero-visual{min-width:0;display:grid;gap:12px;justify-items:center}
.hero-visual .arch{max-width:290px;margin:0 auto}
.hero-visual img{max-width:100%;height:auto}
.trust{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px;margin-top:18px;justify-content:start}
.trust-item{display:flex;align-items:center;gap:9px;min-width:0}
.trust-item b,.trust-item>div>b{font-size:13.5px}
.trust-item small,.trust-item span{font-size:11.5px;color:var(--muted)}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:20px;padding:18px 16px}
  .hero-visual .arch{max-width:200px}
}

/* ===== product sub-nav strip ===== */
.cm-sub{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin:0 0 18px;padding:9px 10px;
  background:var(--cream);border:1px solid var(--line);border-radius:999px}
.cm-sub a,.cm-sub>span>button{display:inline-flex;align-items:center;gap:5px;padding:7px 13px;border-radius:999px;
  font:600 13px var(--font-ui);color:var(--body-c);white-space:nowrap;background:transparent;border:0;cursor:pointer}
.cm-sub a:hover,.cm-sub>span>button:hover{background:#fff;color:var(--blue);box-shadow:var(--shadow)}
.cm-sub a.on{background:var(--blue);color:#fff;box-shadow:0 5px 14px rgba(8,98,249,.26)}
.cm-sub .cm-sub-sp{flex:1 1 auto}
.cm-sub .cm-sub-cta{background:var(--navy);color:#fff}
.cm-sub .cm-sub-cta:hover{background:var(--blue);color:#fff}
.cm-subwrap{position:relative}
.cm-subwrap>.cm-submenu{position:absolute;z-index:26;top:calc(100% + 8px);left:0;min-width:262px;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--lift);padding:7px;display:none}
.cm-subwrap.open>.cm-submenu{display:block}
.cm-submenu a{display:flex;gap:9px;align-items:flex-start;padding:8px 10px;border-radius:10px;white-space:normal;font-weight:500}
.cm-submenu a i{font-style:normal;font-size:15px;line-height:1.35;width:20px;flex:none;text-align:center}
.cm-submenu a small{display:block;font-size:11.5px;color:var(--muted);font-weight:400}
.cm-submenu a:hover{background:var(--sky)}
.cm-submenu-h{display:block;margin:6px 4px 2px;padding-top:7px;border-top:1px solid var(--hair);
  font:600 9.5px var(--font-ui);letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
@media (max-width:700px){
  .cm-sub{border-radius:var(--r-md);padding:8px;gap:6px}
  .cm-sub a,.cm-sub>span>button{padding:6px 11px;font-size:12.5px}
  .cm-sub .cm-sub-sp{display:none}
  .cm-subwrap>.cm-submenu{left:0;right:0;min-width:0}
}

/* ===== cards / panels ===== */
.card,.ab-card,.acard,.rcard,.panel,.acct-panel,.searchcard,.family-card,.story-block{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:15px 16px}
.ab-card{position:relative;display:flex;flex-direction:column;gap:5px}
.ab-card--interactive{transition:transform .16s,box-shadow .16s,border-color .16s}
.ab-card--interactive:hover{transform:translateY(-2px);box-shadow:var(--lift);border-color:var(--sky-2)}
.ab-card__title,.card h4,.ab-card h3{font:600 15.5px var(--font-brand);color:var(--ink);margin:0 0 4px}
.ab-card__icon,.ab-icon--glow,.stat-icon,.trust-icon,.fc-icon{
  width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:20px;font-style:normal;
  background:linear-gradient(145deg,#fff,var(--wash,var(--sky)));
  box-shadow:0 5px 13px color-mix(in srgb,var(--accent,var(--blue)) 20%,transparent);margin-bottom:6px}
.ab-panel,.article{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px 22px}
.ab-panel>:last-child,.card>:last-child,.ab-card>:last-child{margin-bottom:0}
/* tinted surfaces — DOUBLED class selectors on purpose: the pages' own unlayered `.card`
   rule sets `background:var(--card)` at (0,1,0) and is loaded after this file, so a single
   `.ab-tint-1` ties and loses. Do not "tidy" the repetition away. */
.ab-tint-1.ab-tint-1,.ab-tint-2.ab-tint-2,.ab-tint-3.ab-tint-3,
.ab-tint-4.ab-tint-4,.ab-tint-5.ab-tint-5,.ab-tint-6.ab-tint-6{
  background:linear-gradient(160deg,var(--wash) 0%,#fff 78%);border-color:color-mix(in srgb,var(--accent) 24%,var(--line))}
.ab-tint-1 .ab-card__title,.ab-tint-2 .ab-card__title,.ab-tint-3 .ab-card__title,
.ab-tint-4 .ab-card__title,.ab-tint-5 .ab-card__title,.ab-tint-6 .ab-card__title{color:var(--ink)}

/* callouts / notes */
.ab-callout,.leadbox,.note,.notice,.info,.hint,.role-note,.section-note,.acct-note,.pay-note,.cm-note,.disclaimer,.jnote{
  background:var(--sky);border:1px solid var(--sky-2);border-left:3px solid var(--blue);
  border-radius:var(--r-sm);padding:12px 14px;font-size:14px;color:var(--body-c)}
.ab-callout b,.leadbox b,.note b{color:var(--navy)}
.cm-warn{background:var(--l1);border-color:#F2DCA0;border-left-color:var(--c1)}
.cm-warn b{color:var(--n1)}
.muted,.cm-note,.hint,.meta,.rmeta,.sec-sub,.section-sub,.dis-title,.acct-note{color:var(--muted)}
.meta,.rmeta,.hint{font-size:13px}

/* ===== grids ===== */
.ab-grid,.grid,.grid-foot,.stats-grid,.plan-grid,.age-grid,.hero-grid,.profiles,.results,.rows,.cm-cardrow{
  display:grid;gap:14px}
.ab-grid,.grid{grid-template-columns:repeat(auto-fit,minmax(248px,1fr))}
.ab-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.ab-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.ab-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1000px){.ab-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}.ab-grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
  .ab-grid,.grid,.ab-grid--2,.ab-grid--3,.ab-grid--4,.stats-grid,.plan-grid,.age-grid,.hero-grid{grid-template-columns:1fr}
}

/* ===== buttons ===== */
.btn,.ab-btn,.cm-btn,.cta,.cm-cta-btn,.gobtn,.jsubmit,.search-btn,.buy,.plan-buy,.apply,.clear,button.tagbtn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;border-radius:999px;
  padding:10px 18px;font:600 13.5px var(--font-ui);cursor:pointer;border:1px solid transparent;
  background:var(--cream);color:var(--navy);white-space:nowrap;transition:.16s;text-align:center}
.btn:hover,.ab-btn:hover,.cm-btn:hover{box-shadow:var(--shadow)}
.ab-btn--gold,.btn.primary,.btn-primary,.cm-primary,.primary,.plan-buy--gold,.buy,.jsubmit,.search-btn,
a.ab-btn--gold,a.btn.primary{background:var(--blue);color:#fff;box-shadow:0 6px 16px rgba(8,98,249,.26)}
.ab-btn--gold:hover,.btn.primary:hover,.buy:hover{background:var(--blue-ink);color:#fff}
.ab-btn--line,.btn.ghost,.ab-btn--ghost,.btn-line{background:#fff;border-color:var(--blue);color:var(--blue)}
.ab-btn--line:hover,.btn.ghost:hover{background:var(--sky);color:var(--blue-ink)}
.btn.navy,.cm-cta-btn{background:var(--navy);color:#fff}
.btn.navy:hover,.cm-cta-btn:hover{background:var(--blue);color:#fff}
.btn-sm,.btn.mini{padding:6px 12px;font-size:12px}
button{font-family:inherit}

/* ===== pills / chips / tags / badges ===== */
.pill,.ab-pill,.chip,.tag,.mini-tag,.mini-pill,.ab-badge,.badge,.status,.filter,.tagbtn,.st-gold,.st-ink,.st-maroon,.st-sage{
  display:inline-flex;align-items:center;gap:5px;
  font:600 11.5px var(--font-ui);letter-spacing:.02em;padding:4px 10px;border-radius:999px;
  background:var(--sky);color:var(--blue-ink);white-space:nowrap}
.ab-pills,.chips,.tags,.mini-tags,.filter-sub,.pagination{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.pill.on,.chip.on,.tagbtn.on,.tagbtn.active,.filter.active,.chip.active{background:var(--blue);color:#fff}
.st-gold,.badge.gold{background:var(--l1);color:var(--n1)}
.st-sage,.badge.live,.tick{background:var(--l3);color:var(--n3)}
.st-maroon,.badge.soon,.danger{background:var(--l6);color:var(--n6)}
.st-ink{background:var(--paper);color:var(--navy)}
/* verification-status labels (spec §18) */
.cm-vs{font:700 9.5px var(--font-ui);letter-spacing:.09em;text-transform:uppercase;padding:3px 8px;border-radius:999px;vertical-align:middle}
.cm-vs--doc{background:var(--l3);color:var(--n3)}
.cm-vs--fam{background:var(--l1);color:var(--n1)}
.cm-vs--res{background:var(--l4);color:var(--n4)}

/* ===== tables → cards on mobile ===== */
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{padding:9px 11px;text-align:left;border-bottom:1px solid var(--hair);vertical-align:top}
th{font:600 12px var(--font-ui);letter-spacing:.04em;text-transform:uppercase;color:var(--muted);background:var(--cream)}
tr:last-child td{border-bottom:0}
.cm-tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-md)}
.cm-tablewrap table{min-width:520px}

/* ===== long-form article / history chapters ===== */
.article p,.ab-panel p,.chapter p,.content p{max-width:none}
.chapter{padding:16px 0 4px;border-top:1px solid var(--hair)}
.chapter:first-of-type{border-top:0;padding-top:4px}
.chapter h2{font-size:19px;margin:0 0 8px;scroll-margin-top:84px}
.chapter h3{font-size:15.5px;margin:14px 0 6px}
.lead,.ab-lede,.hero-desc,.sec-sub,.section-sub{font-size:15.5px;color:var(--body-c)}
.ab-ruled{border-top:1px solid var(--line);padding-top:14px;margin-top:14px}
.ab-h2,.section-title,.sec-title,.left-title,.fhead,.dis-title,.discovery-head,.acct-head,.section-head h2{
  font:600 20px var(--font-brand);color:var(--ink);margin:0 0 8px}
.ab-h4{font:600 15px var(--font-brand);color:var(--ink);margin:0 0 6px}

/* sticky TOC → compact <details> on mobile */
.cm-toc{position:sticky;top:12px;align-self:start;max-height:calc(100vh - 40px);overflow:auto;
  background:var(--cream);border:1px solid var(--line);border-radius:var(--r-md);padding:12px}
.cm-toc a{display:block;padding:4px 6px;border-radius:7px;font-size:13px;color:var(--body-c)}
.cm-toc a:hover{background:#fff;color:var(--blue)}
details.cm-toc-m{background:var(--cream);border:1px solid var(--line);border-radius:var(--r-md);padding:10px 12px;margin-bottom:16px}
details.cm-toc-m>summary{cursor:pointer;font:600 13.5px var(--font-ui);color:var(--navy);list-style:none}
details.cm-toc-m>summary::-webkit-details-marker{display:none}
details.cm-toc-m>summary::after{content:"▾";float:right;color:var(--muted)}
details.cm-toc-m[open]>summary::after{content:"▴"}
.cm-toclist{margin:10px 0 2px;padding:0 0 0 2px;list-style:none;counter-reset:ch;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:2px 14px}
.cm-toclist li{counter-increment:ch;margin:0}
.cm-toclist a{display:block;padding:4px 6px;border-radius:7px;font-size:12.8px;color:var(--body-c)}
.cm-toclist a::before{content:counter(ch) ". ";color:var(--muted);font-variant-numeric:tabular-nums}
.cm-toclist a:hover{background:#fff;color:var(--blue)}
.cm-xref{margin:8px 0 0;padding:8px 11px;background:var(--sky);border-left:3px solid var(--blue);
  border-radius:0 var(--r-sm) var(--r-sm) 0;font-size:13.5px}
.cm-xref a{font-weight:600}

/* ===== forms (biodata / discover / login — markup untouched) ===== */
.field,.jfield,.vf-row,.pinrow{margin:0 0 12px}
label,.vf-row__label,.field>b,.jfield>b{display:block;font:600 12.5px var(--font-ui);color:var(--ink);margin:0 0 5px}
input,select,textarea{width:100%;font:15px var(--font-ui);color:var(--ink);background:#fff;
  border:1px solid var(--line);border-radius:11px;padding:10px 12px;transition:.15s}
input:hover,select:hover,textarea:hover{border-color:var(--sky-2)}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 3px var(--gold-ring)}
input[type=checkbox],input[type=radio]{width:auto;accent-color:var(--blue)}
textarea{min-height:90px;resize:vertical}
select{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A50C7' stroke-width='2' stroke-linecap='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 11px center;background-size:17px;padding-right:34px}
::placeholder{color:#A8B4C6}
fieldset{border:1px solid var(--line);border-radius:var(--r-md);padding:14px 16px;margin:0 0 16px}
legend{font:600 13px var(--font-brand);color:var(--navy);padding:0 6px}

/* ===== images / avatars ===== */
.photo,.avatar,.ravatar,.initials,.initial{border-radius:14px;object-fit:cover;background:var(--sky);
  display:grid;place-items:center;color:var(--blue-ink);font:600 20px var(--font-brand)}

/* ===== compact roadmap cards (knowledge / directory service layers) ===== */
.cm-plan{display:grid;grid-template-columns:repeat(auto-fit,minmax(252px,1fr));gap:10px;margin:14px 0 0}
.cm-plan>div{padding:12px 13px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:linear-gradient(150deg,var(--wash,var(--sky)) 0%,#fff 74%);scroll-margin-top:80px}
.cm-plan b{display:block;font:600 14px var(--font-brand);color:var(--ink);margin-bottom:3px}
.cm-plan span{display:block;font-size:13px;color:var(--body-c);line-height:1.5}
@media (max-width:640px){.cm-plan{grid-template-columns:1fr}}

/* ===== "आगे पढ़ें / Related" row (spec §25) ===== */
.cm-rel{margin:28px 0 0;padding:18px 0 0;border-top:1px solid var(--line)}
.cm-rel>h2{font:600 13px var(--font-ui);letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin:0 0 11px}
.cm-rel-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:10px}
.cm-rel-row a{display:block;padding:12px 13px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:linear-gradient(150deg,var(--wash,var(--sky)) 0%,#fff 72%);transition:.16s}
.cm-rel-row a:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:color-mix(in srgb,var(--accent,var(--blue)) 34%,var(--line))}
.cm-rel-row b{display:block;font:600 14px var(--font-brand);color:var(--ink);margin-bottom:2px}
.cm-rel-row span{display:block;font-size:12px;color:var(--muted);line-height:1.4}

/* ===== site notice strip (verification + Udyam — kept from the old footer) ===== */
.cm-notice{margin:24px 0 0;padding:15px 16px;background:var(--cream);border:1px solid var(--line);
  border-radius:var(--r-md);font-size:12.8px;color:var(--body-c);line-height:1.6}
.cm-notice b{color:var(--navy)}
.cm-notice>div+div{margin-top:9px;padding-top:9px;border-top:1px dotted var(--sky-2)}
.cm-notice .cm-udyam-no{font-variant-numeric:tabular-nums}

/* Decorative ::before/::after "blobs" sit outside their box (right:-90px / -100px) and the old
   page CSS clipped them on rules this file now owns. `clip`, not `hidden`: hidden would break a
   sticky child. Anything that paints a decorative pseudo gets clipped here. */
.page-hero,.join,.hero-grid,.banner,.cm-cta,.searchcard{position:relative;overflow:clip}

/* ===== misc helpers used by page-level markup ===== */
.hidden,[hidden]{display:none!important}
.full{grid-column:1/-1}
.cm-flow{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.cm-num{display:inline-grid;place-items:center;width:23px;height:23px;border-radius:50%;flex:none;
  background:var(--blue);color:#fff;font:700 12px var(--font-ui)}
.ab-step__no,.num,.step-amt{display:inline-grid;place-items:center;min-width:26px;height:26px;padding:0 7px;border-radius:999px;
  background:var(--sky);color:var(--blue-ink);font:700 12.5px var(--font-ui)}
.ab-timeline{display:grid;gap:12px}
.cm-cardlink{color:inherit}
.cm-cardlink:hover .ab-card__title{color:var(--blue)}
.cm-soon{font:700 9.5px var(--font-ui);letter-spacing:.07em;color:var(--n1);background:var(--l1);padding:3px 7px;border-radius:999px}

/* ===== print ===== */
@media print{
  .cm-sub,.cm-rel{display:none}
  body{background:#fff}
  .ab-panel,.card,.ab-card{border-color:#ccc;box-shadow:none}
}

/* ===== mobile ===== */
@media (max-width:760px){
  body{font-size:15px}
  .ab-wrap,.container,.wrap,.detail-wrap,.acct-wrap,.vf-shell{padding:0 14px}
  .ab-page,.page{padding:14px 0 26px}
  .ab-panel,.article{padding:15px 14px;border-radius:var(--r-md)}
  .cm-hero--home{padding:18px 15px}
  .cm-toc{position:static;max-height:none}
  th,td{padding:8px 9px}
  /* a long label in a nowrap pill is the one thing that still pushes a phone sideways */
  .pill,.ab-pill,.chip,.tag,.mini-tag,.mini-pill,.ab-badge,.badge,.status,.st-gold,.st-ink,.st-maroon,.st-sage{white-space:normal}
  /* fixed-track grids from the old desktop-first CSS */
  .flow,.steps,.facts,.factgrid,.quota-grid,.jgrid{grid-template-columns:1fr!important}
}
@media (max-width:420px){
  .ab-wrap,.container,.wrap,.detail-wrap{padding:0 12px}
  .btn,.ab-btn,.cm-btn{padding:9px 14px;font-size:13px}
}