/* ============================================================================
   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}
/* FIXED, not absolute, at every width. The strip around it is a horizontal
   scroller (overflow-x:auto), and an absolutely positioned child of a
   scroller is clipped by it: the menu opened to its full 383px and the
   browser showed a 2px sliver, so "समाज" looked like a dead button. The rule
   below used to try `overflow-y:visible` on the strip, but CSS does not allow
   one axis to be visible while the other scrolls — it silently computes back
   to auto, which is why that fix never took. Taking the sheet out of the flow
   is the only thing that actually works. cm-ui.js sets top (and, on desktop,
   left) from the button's measured position. */
.cm-subwrap>.cm-submenu{position:fixed;z-index:26;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,.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,.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)}

/* ===== Advanced Discovery: a filter is a BLOCK, not a chip =================
   `.filter` used to sit in the pill/chip selector above, so every filter row
   was laid out as a little rounded inline-flex pill with white-space:nowrap.
   Inside a 300px left panel that put the label and its controls on the same
   line and they overlapped -- "Marital Status" sat on top of its own select.
   There was already a @media(max-width:700px) block undoing it for phones;
   the desktop panel is just as narrow, so the fix belongs at every width and
   the phone block is now only the extra squeeze it needs.
   ========================================================================= */
.filter{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  width:100%;box-sizing:border-box;
  padding:10px 12px;border-radius:14px;
  background:var(--sky);color:var(--blue-ink);
  font:600 11.5px var(--font-ui);letter-spacing:.02em;
  white-space:normal;                 /* nowrap is what crushed the row */
}
.filter > .fhead{flex:0 0 100%;width:100%;margin-bottom:2px}
.filter select,.filter input,.filter .seg,.filter .segbtn{min-width:0}
.filter select,.filter input{flex:1 1 140px}
.filter .seg{display:flex;flex:1 1 100%;gap:6px}
.filter .seg > *{flex:1 1 0;text-align:center}
/* only a hint that is a DIRECT child of the filter takes its own row. One that
   sits inside .fhead is the small "Required" note beside the label; giving it
   100% width pushed the label down to 49px and broke it across two lines. */
.filter > .hint,.filter > .mini-tag{flex:0 0 100%;width:100%}
.filter .fhead{display:flex;align-items:baseline;gap:8px;width:100%}
.filter .fhead > span:first-child{flex:1 1 auto}
.filter .fhead .hint{flex:0 0 auto;width:auto;margin-left:auto;background:none;color:var(--muted);font-weight:500}
.filter.active{background:var(--blue);color:#fff}

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

/* ============================================================================
   v20 — Aniket 2026-09-19: "first page ka design pehle wali website ki tarah
   hero banner mein chahiye".
   The standalone site's hero was a warm cream BANNER —
   .hero{background:linear-gradient(180deg,#fdf9f2,#f9f0e2)} — and the move into
   the hub shell left it transparent, so the opening screen read as loose text on
   white instead of a banner. The gradient is the original one, restored, with the
   rounding the hub's content box needs.
   ========================================================================= */
.cm-hero, section.ab-hero.cm-hero {
  background: linear-gradient(180deg, #fdf9f2, #f9f0e2);
  position: relative; overflow: hidden;
  border-radius: 18px; border: 1px solid #f0e3cd;
  padding: 26px 0 30px; margin: 14px 14px 22px;
}
.cm-hero .ab-hero__panel { background: none; box-shadow: none; padding: 0; }
.cm-hero .hero-grid { align-items: center; }
.cm-hero h1 { line-height: 1.22; margin-bottom: 10px; }
.cm-hero .hero-desc { max-width: 58ch; }
.cm-hero .trust { margin-top: 16px; }
@media (max-width: 760px) { .cm-hero { margin: 10px 8px 16px; padding: 20px 0 22px; border-radius: 14px; } }


/* ═══════════ the portal's own menu bar (owner 2026-09-19: "Menu sahi Karo")
   Measured at 375px before this: nav.cm-sub is display:flex with flex-wrap:
   wrap, so its seven items broke onto two rows (tops 23 and 57). hub-shell
   then places its ☰ control, .hs-ctl, ABSOLUTELY at left:187 top:34 -- which
   is between the two rows -- so the button sat directly on top of "Biodata"
   and "＋ Profile बनाएँ".

   One row that scrolls sideways is the honest shape for seven items on a
   phone: nothing is hidden, nothing overlaps, and the reader already knows
   how to swipe a row of chips. The ☰ leaves the scrolling content and pins
   itself to the right edge with position:sticky, so it stays reachable while
   the items slide under it. */
nav.cm-sub.hs-topbar-RETIRED{
  flex-wrap:nowrap !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  align-items:center !important;
  /* so the END of the list clears the pinned button instead of coming to
     rest underneath it */
  padding-right:48px !important;
}
nav.cm-sub.hs-topbar-RETIRED::-webkit-scrollbar{display:none}
nav.cm-sub.hs-topbar-RETIRED > *{flex:0 0 auto !important}

/* the ☰: out of the flow of the scroller, parked at the right edge. A solid
   backing is needed because the items now pass underneath it. */
nav.cm-sub.hs-topbar-RETIRED > .hs-ctl{
  position:sticky !important;
  right:0 !important;
  left:auto !important;
  top:auto !important;
  margin-left:auto !important;
  flex:0 0 auto !important;
  background:var(--cream,#FBF7EF) !important;
  box-shadow:-10px 0 10px -6px var(--cream,#FBF7EF) !important;
  border-radius:10px !important;
  z-index:2 !important;
}

/* at 375px seven items plus the button is tight; a little less padding buys
   about one more item on screen before a swipe is needed */
@media(max-width:480px){
  nav.cm-sub.hs-topbar-RETIRED{gap:4px !important;padding-left:8px !important}
  nav.cm-sub.hs-topbar-RETIRED > a,
  nav.cm-sub.hs-topbar-RETIRED > button{padding-left:9px !important;padding-right:9px !important}
}


/* ═══════════ the hero, back to its navy-and-gold (owner 2026-09-19) ═══════
   "ist page ko aisa banana tha" / "ye colour combination bola tha maine".

   WHY IT TURNED BLUE AND WHITE. Nothing drifted — the hub import remapped the
   palette on purpose. In :root above:

       --gold:#0862F9;   / * hub maps the legacy "gold" action colour to primary blue * /
       --amber:#B45309;  / * real gold kept as the heritage accent hue * /

   So every rule that still asks for var(--gold) — the heading's second line
   among them — now paints blue, and .ab-hero__panel had its background
   removed, which dropped the navy the gold was designed to sit on. Gold on
   white is unreadable (1.7:1), so losing the navy and keeping the gold was
   never an option; the import chose blue instead.

   This restores the pair together, scoped to .cm-hero only. Everywhere else
   --gold stays mapped to blue, which is what the rest of the hub expects.
   Literal hexes, not var(--gold), precisely because that token means blue
   here. */

.cm-hero .ab-hero__panel{
  background:linear-gradient(155deg,#123A7A 0%,#0C2D64 44%,#08224C 100%) !important;
  border-radius:26px !important;
  padding:26px 20px 30px !important;
  box-shadow:0 18px 44px rgba(8,34,76,.28) !important;
  overflow:hidden;
}
/* the section's own divider belonged to a light header, not to a dark panel */
.cm-hero.cm-head{border-bottom:0 !important;padding-bottom:0 !important}

/* the pill above the heading */
.cm-hero .eyebrow{
  display:inline-flex;align-items:center;gap:7px;
  border:1px solid rgba(255,255,255,.30) !important;
  background:rgba(255,255,255,.07) !important;
  color:#D9E5F8 !important;
  border-radius:999px;padding:6px 14px;font-size:12.5px;
}
.cm-hero .eyebrow svg{width:15px;height:15px;fill:#F0C96A;stroke:none}

/* line one white, line two gold — the pairing the page was designed around */
.cm-hero h1{color:#FFFFFF !important}
.cm-hero h1 .gold-word{
  color:#F0C96A !important;
  -webkit-text-fill-color:#F0C96A;   /* in case a gradient clip is inherited */
  background:none !important;
}
.cm-hero .hero-desc,.cm-hero .lead,.cm-hero p{color:#C6D5EB !important}

/* the four trust items: light discs keep the icons' own dark strokes legible,
   which is what they were drawn for */
.cm-hero .trust-icon{background:#FFFFFF !important;border-color:rgba(255,255,255,.55) !important}
.cm-hero .trust-item{color:#FFFFFF !important}
.cm-hero .trust-item b,.cm-hero .trust-item strong{color:#FFFFFF !important}
.cm-hero .trust-item span,.cm-hero .trust-item small,.cm-hero .trust-item i{color:#AFC3E0 !important}

/* the emblem keeps its light card; only the caption below it sits on navy */
.cm-hero .arch-caption b{color:#FFFFFF !important}
.cm-hero .arch-caption span{color:#F0C96A !important}

/* the member count stays a light card, as in the design */
.cm-hero .family-card{
  background:rgba(255,255,255,.94) !important;
  border:1px solid rgba(255,255,255,.35) !important;
}
.cm-hero .family-card .num{color:#0A2B63 !important}
.cm-hero .family-card small{color:#54657F !important}

@media(max-width:700px){
  .cm-hero .ab-hero__panel{padding:20px 15px 24px !important;border-radius:20px !important}
}

/* Two light backgrounds sat INSIDE the navy panel and painted straight over
   it: .hero-grid carries linear-gradient(135deg,var(--sky),#fff), and the
   section itself still carries the old cream hero gradient. Setting the panel
   navy alone changed nothing a reader could see -- the measured background
   behind the heading was still #EAF3FE and white-on-light came to 1.12:1.
   These come after the panel rule so they win on order. */
.cm-hero,.cm-hero.ab-hero{background:none !important}
.cm-hero .hero-grid{background:none !important}

/* ═══════════ the portal's own brand header (owner 2026-09-19: logo for this)
   The live pages had no <header> at all -- they opened straight into the menu
   and nothing on screen said whose site it was. The reference design carries
   the CK roundel and the samaj name above the menu, so that is what this is.
   assets/ck-logo.png was already in the repo and is already the favicon. */
.cm-brand{
  background:var(--cream,#F7F9FD);
  border-bottom:1px solid var(--line,#E3E9F2);
  padding:9px 14px;
}
.cm-brand__a{display:inline-flex;align-items:center;gap:11px;text-decoration:none}
.cm-brand__a img{width:42px;height:42px;flex:0 0 42px;border-radius:50%;display:block}
.cm-brand__t{display:flex;flex-direction:column;line-height:1.16;min-width:0}
.cm-brand__t b{
  font-family:var(--font-hi,inherit);
  font-size:17px;font-weight:700;color:var(--navy,#0A2B63);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cm-brand__t small{
  font-size:9.5px;letter-spacing:.14em;font-weight:600;
  /* the heritage gold, not var(--gold) -- the hub remapped that token to blue */
  color:#8A6D1F;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
@media(max-width:420px){
  .cm-brand{padding:8px 12px}
  .cm-brand__a img{width:36px;height:36px;flex:0 0 36px}
  .cm-brand__t b{font-size:15px}
  .cm-brand__t small{font-size:8.5px;letter-spacing:.1em}
}


/* ═══════════ portal, mobile pass 2 (owner 2026-09-19) ════════════════════
   "बायोडाटा के पेज को हटाकर प्रोफाइल का ही रहने दो", "मोबाइल पर एक ही लाइन में",
   "हीरो मोबाइल पर फुल पेज", "समाज वाला ऑप्शन ... श्रिंक हो रहा है",
   "एडवांस्ड डिस्कवरी वाले पेज पर भी सब कुछ खराब". */

/* ---- 1. Biodata leaves the menu ---------------------------------------
   The profile page already carries the same biodata, so the item was a
   second door to one room. The FILE is left in place and still opens: any
   link already shared, bookmarked or indexed would otherwise 404. */
/* The "+ Profile बनाएँ" CTA points at biodata.html too, so a plain
   href match hid the site's main call to action along with the menu
   item. Only the menu entry goes. */
nav.cm-sub a[href*="biodata"]:not(.cm-sub-cta){display:none !important}

/* ---- 2. the menu, one line -------------------------------------------
   The earlier rules were written as nav.cm-sub.hs-topbar-RETIRED and stopped
   matching the moment the brand header was added above: hub-shell moves its
   hs-topbar class onto whatever it decides is the top bar, and that is now
   .cm-brand. Verified — the nav's class list is plain "cm-sub". Nothing is
   keyed to hs-topbar any more. */
nav.cm-sub{
  flex-wrap:nowrap !important;
  overflow-x:auto !important;
  /* overflow-y is deliberately NOT set: with overflow-x:auto the browser
     forces the other axis to auto too, so writing `visible` here achieved
     nothing. The समाज sheet escapes by being position:fixed instead. */
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  align-items:center !important;
}
nav.cm-sub::-webkit-scrollbar{display:none}
nav.cm-sub > *{flex:0 0 auto !important}
@media(max-width:480px){
  nav.cm-sub{gap:4px !important;padding-left:8px !important;padding-right:8px !important}
  nav.cm-sub > a,nav.cm-sub > button,nav.cm-sub .cm-subwrap > button{
    padding-left:9px !important;padding-right:9px !important
  }
}

/* ---- 3. the समाज dropdown --------------------------------------------
   .cm-submenu is absolute with left:0;right:0 inside .cm-subwrap, and that
   wrapper is only as wide as the "समाज ▾" button — measured 72px. So the
   whole panel was being squeezed into 72px and every item wrapped into a
   56px ribbon. On a phone it becomes a full-width sheet instead; cm-ui.js
   sets its top, because a fixed element cannot work that out on its own. */
@media(max-width:700px){
  .cm-subwrap{position:static !important}
  .cm-submenu{
    position:fixed !important;
    left:10px !important; right:10px !important; width:auto !important;
    min-width:0 !important; max-height:66vh !important; overflow-y:auto !important;
    z-index:90 !important;
    border-radius:16px !important;
    box-shadow:0 18px 44px rgba(10,43,99,.22) !important;
  }
  .cm-submenu a{
    display:flex !important; align-items:center; gap:10px;
    width:auto !important; min-height:46px; padding:10px 14px !important;
    white-space:normal !important;
  }
}

/* ---- 4. the hero, edge to edge on a phone ------------------------------
   It was sitting inside the hub box's 14px margin AND the page's own
   padding AND the panel's, so three gutters stacked up on a 375px screen. */
@media(max-width:700px){
  /* 2026-09-21: this pulled the hero 14px past BOTH edges. The three
     gutters it was written to cancel are not all there any more -- on the
     portal home main.ab-page computes to 0 horizontal padding -- so the
     negative margins made the hero 403px wide inside a 375px screen. The
     page has no horizontal scroll, so the surplus was simply CLIPPED and
     the right edge of every hero line was cut off. Zero gets the same
     edge-to-edge look here, and degrades to a normal gutter rather than a
     clip anywhere the padding does still exist. */
  .cm-hero{margin-left:0 !important;margin-right:0 !important;max-width:100% !important}
  .cm-hero .ab-hero__panel{
    border-radius:0 !important;
    padding:18px 16px 22px !important;
    box-shadow:none !important;
  }
  .cm-hero .container{padding-left:0 !important;padding-right:0 !important;max-width:none !important}
  /* the page's own top gap above the hero */
  main.ab-page{padding-top:0 !important}
}

/* ---- 5. Advanced Discovery -------------------------------------------
   Every .filter is inline-flex with nowrap and came out 197px wide on a
   375px screen, so the label and its controls were crammed into one pill
   and overlapped — "Looking for" sat on top of Bride/Groom. On a phone each
   filter becomes a full-width block with its label on its own line. */
@media(max-width:700px){
  .panel .filter,.filter{
    display:flex !important;
    flex-wrap:wrap !important;
    width:100% !important;
    box-sizing:border-box !important;
    border-radius:14px !important;
    padding:10px 12px !important;
    gap:8px !important;
    align-items:center !important;
  }
  .filter > .fhead{flex:0 0 100% !important;width:100% !important;margin-bottom:2px}
  .filter select,.filter input,.filter .seg,.filter .segbtn{min-width:0 !important}
  .filter select,.filter input{flex:1 1 140px !important}
  /* the Bride / Groom style toggles share the row evenly instead of spilling */
  .filter .seg{display:flex !important;flex:1 1 100% !important;gap:6px !important}
  .filter .seg > *{flex:1 1 0 !important;text-align:center}
  .filter > .hint,.filter > .mini-tag{flex:0 0 100% !important;width:100% !important}
  .panel.left{padding:12px !important}
}

/* The Discovery layout grid resolved its single column to 504.562px on a
   375px screen, so .panel.left was 505px wide and everything in it ran off
   the right edge -- and .hs-box clips, so those controls were not merely
   ugly, they were unreachable. A bare 1fr track never shrinks below the
   content's min-content width; minmax(0,1fr) is what allows it to. The
   min-width:0 does the same job for the flex/grid children inside. */
@media(max-width:900px){
  .container.layout{grid-template-columns:minmax(0,1fr) !important}
  .container.layout > *,.panel,.panel.left,.panel.right{min-width:0 !important;max-width:100% !important}
}

/* Diwali offer pricing on the plan cards -- see the block at the end of
   membership.js. Kept here because the .html files are generated. */
.mem-price__was{color:var(--muted,#6F6F6F);font-weight:500;opacity:.7;margin-right:4px}
.mem-price__off{display:inline-block;margin-left:8px;padding:4px 9px;border-radius:999px;background:#E8F5EC;color:#177A39;font:600 12px/1 Roboto,sans-serif;vertical-align:middle;white-space:nowrap}

/* ===========================================================================
   2026-09-21 — three things the owner hit from WhatsApp's in-app browser.
   ======================================================================== */

/* 1. The sign-in chip, first item in the section nav. Kept visually quieter
      than the section links so it reads as a utility, not another section --
      but it is never hidden, which was the whole problem. */
.cm-sub__acct{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;
  padding:7px 13px;border-radius:999px;border:1px solid var(--line,#E7E2D6);
  background:#fff;color:var(--navy,#1B2A5E);font:600 13px/1 Roboto,sans-serif;
  text-decoration:none;white-space:nowrap}
.cm-sub__acct::before{content:"";width:16px;height:16px;flex:0 0 16px;
  background:currentColor;opacity:.75;
  -webkit-mask:var(--cm-acct-ic) center/contain no-repeat;
  mask:var(--cm-acct-ic) center/contain no-repeat}
.cm-sub__acct.is-in{border-color:#177A39;color:#177A39;background:#E8F5EC}
:root{--cm-acct-ic:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm0 2c-5 0-9 2.5-9 5.5V22h18v-2.5c0-3-4-5.5-9-5.5Z'/></svg>")}

/* 2. After payment: the way back to the page they were on. It sits ABOVE the
      WhatsApp/Call dock using the height the dock publishes, because two
      things pinned to the same edge cover each other. */
.cm-backbar{position:fixed;left:0;right:0;bottom:var(--hs-dock-h,0px);z-index:60;
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;
  padding:11px 14px;background:#12322A;color:#F3FBF6;
  font:600 14px/1.35 Roboto,sans-serif;box-shadow:0 -6px 18px rgba(0,0,0,.18)}
.cm-backbar button{padding:9px 16px;border:0;border-radius:999px;
  background:#F6C453;color:#3E2A05;font:700 14px/1 Roboto,sans-serif;cursor:pointer}

/* 3. The home hero heading. It topped out at 40px, which the owner found too
      heavy once the hub gave the page its full width. Trimmed, not redesigned. */
.hero-copy h1{font-size:clamp(25px,2.8vw,33px)!important}

/* ---- the menu button, pinned to the right of the section nav ------------
   Owner 2026-09-21: "main menu ke right mein hamburger menu laga do."
   Sticky, not just last-child: .cm-sub scrolls sideways, so an ordinary last
   item lives off the right edge and is never seen. */
/* In the brand bar: pushed to the right by margin-left:auto, so it never sits
   over anything. No sticky, no shadow -- it is not floating over a scroller
   any more, it is simply the last item of a one-line header. */
.cm-brand{display:flex;align-items:center;gap:10px}
.cm-brand__a{flex:1 1 auto;min-width:0}
.cm-sub__menu{flex:0 0 auto;margin-left:auto;
  display:inline-flex;flex-direction:column;justify-content:center;gap:4px;
  width:40px;height:36px;padding:0 10px;cursor:pointer;
  border:1px solid var(--line,#E7E2D6);border-radius:11px;background:#fff}
.cm-sub__menu span{display:block;height:2px;border-radius:2px;
  background:var(--navy,#1B2A5E)}
/* Phones only. On desktop hub-shell's own button is still on screen and
   two menu buttons a few hundred pixels apart is worse than one. */
@media(min-width:761px){.cm-sub__menu{display:none}}

/* On a phone the floating brand-row button is now a duplicate, and two menu
   buttons a row apart is worse than none. Portal-only file, so no other site
   loses its own. */
@media(max-width:760px){
  /* NOT display:none. The drawer's open/closed transform is set INLINE by
     hub-shell.js, not by CSS, so only hub-shell's own handler can open it --
     and a display:none button does not run it. Hidden this way the button
     leaves no mark (it is position:fixed, so nothing reflows) while the twin
     in the nav can still forward a click to it. */
  /* only while cm-ui.js has really built the twin (P1-15, 2026-10-02) */
  html.cm-twin .hs-fab{opacity:0 !important;pointer-events:none !important}

  /* The drawer sat at left:25px / right:10px -- nearly full width but with
     uneven gutters, which is why it read as a panel floating in the middle
     rather than a drawer. Owner 2026-09-21: "menu centre mein dikh raha tha".
     Anchored to the right instead, under the button that now opens it. */
  nav.hs-nav{left:auto !important;right:8px !important;
             width:min(340px,calc(100vw - 16px)) !important}
}

/* ---- current plan / upgrade / the quiet code link ---------------------- */
.cm-codelink{margin:18px 0 8px;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.cm-codelink button{background:none;border:0;padding:0;cursor:pointer;
  font:600 14px/1.3 Roboto,sans-serif;color:var(--blue,#1F5FBF);text-decoration:underline}
.cm-codelink small{color:var(--muted,#6F6F6F);font-size:12.5px;line-height:1.5;max-width:60ch}
.mem-buy.is-current,.mem-buy.is-lower,.ab-btn.is-current,.ab-btn.is-lower{
  opacity:.55;cursor:default;pointer-events:auto}
.ab-btn.is-upgrade,.mem-buy.is-upgrade{background:#177A39;border-color:#177A39;color:#fff}
.cm-current-note{margin:10px 0 0;padding:8px 11px;border-radius:10px;
  background:#E8F5EC;color:#177A39;font:600 12.5px/1.4 Roboto,sans-serif}

/* ---- the hero, tidied inside (2026-09-21) -------------------------------
   Measured at 375px, both of these are real and both are visible in the
   owner's screenshots.

   1. A 27px CREAM BAND above the dark panel. .cm-hero keeps padding-top:26px
      from when it had its own cream gradient, but a later rule sets its
      background to none — so that padding now shows the page behind it as a
      stray strip between the nav and the hero. On a phone the panel should
      start straight away.

   2. A RAGGED TRUST GRID. The four items measured 46, 46, 70, 70 px, because
      "Meaningful connections" wraps to two lines and drags its row with it.
      At 159px per column, minus the icon, no sane font size fits that phrase
      on one line — so rather than shrink text until it is hard to read, all
      four rows are given the same height and the grid reads as deliberate.
   ---------------------------------------------------------------------- */
@media(max-width:700px){
  .cm-hero{padding-top:0 !important}
  .cm-hero .ab-hero__panel{border-radius:0 !important}

  .cm-hero .trust-item{align-items:flex-start;min-height:66px}
  .cm-hero .trust-item small,
  .cm-hero .trust-item span span{line-height:1.35}
}

/* ═══ P1-15 (2026-10-02, audit UX-034) — the 4AB ☰ on a phone ═══════════
   Measured at 390 on all 21 pages: there is no .cm-brand row any more and
   cm-ui.js is not loaded by any page, so the twin menu button above is never
   built — yet .hs-fab was still hidden (opacity:0) for its sake, and hub-shell
   had parked its controls absolutely in the middle of the scrolling pills.
   Result: no menu button at all, and "＋ Profile" half cut off with no cue.

   Now the hide applies only while the twin really exists (html.cm-twin, set by
   cm-ui.js), and in the strip the ☰ and the "＋ Profile बनाएँ" call to action
   are pinned to the right edge (sticky inside the scroller, so they keep their
   own place at the end and the last pill can still be scrolled clear of
   them). The section pills slide underneath, and a cream fade on the left of
   the pinned pair is the cue that there is more to swipe. Existing tokens. */
@media(max-width:760px){
  nav.cm-sub{scroll-snap-type:x proximity}
  nav.cm-sub > a,nav.cm-sub > .cm-subwrap{scroll-snap-align:start}
  nav.cm-sub > .hs-ctl{
    position:sticky !important; right:0 !important; left:auto !important;
    top:auto !important; transform:none !important;
    margin-left:auto !important; flex:0 0 auto !important; z-index:3 !important;
    padding-left:4px; background:var(--cream,#FBF7EF); border-radius:12px;
  }
  nav.cm-sub{padding-top:4px !important;padding-bottom:4px !important}
  /* 44px wherever hub-shell parks it, the hub slim bar included (discover.html) */
  .hs-ctl .hs-fab{width:44px !important;height:44px !important;
    min-width:44px;padding:0 !important;justify-content:center;align-items:center}
  nav.cm-sub > .cm-sub-cta{
    position:sticky; right:48px; z-index:2;
    box-shadow:-18px 0 12px -4px var(--cream,#FBF7EF), 0 0 0 4px var(--cream,#FBF7EF);
  }
}

/* ---- 4 Oct 2026: phone nav wraps instead of swiping ---------------------
   Owner saw "समाज" cut off at the right edge: the strip is a sideways
   scroller and the pinned "+ Profile बनाएँ" pill (sticky, right:48px) sat
   on top of it, so the dropdown button was half hidden until you swiped.
   Every section is now visible on two rows; nothing needs a swipe. The
   dropdown sheet stays position:fixed (cm-ui.js sets its top). */
@media(max-width:760px){
  nav.cm-sub{flex-wrap:wrap !important;overflow-x:visible !important;
    justify-content:center !important;row-gap:6px !important;scroll-snap-type:none !important}
  nav.cm-sub > .cm-sub-cta{position:static !important;box-shadow:none !important}
  nav.cm-sub > .hs-ctl{position:static !important;background:none !important}
}

/* ---- 4 Oct 2026: one layout on every ChandraMilan page ------------------
   Owner: "menu sabhi ek type" + the footer notice / Create-profile banner were
   full-bleed and unstyled on 18 pages. Measured before: the nav ran 0–1261px
   on account/plans, 20–1160 on community, 68–1208 on help, 20–1241 on index.
   Now nav, notice and banner share one 1140px centred column everywhere.
   Page-level <style> blocks (index/discover) load after this file and win. */
nav.cm-sub{box-sizing:border-box;max-width:1140px;width:auto;margin-left:auto !important;margin-right:auto !important;
  padding:8px 10px !important;min-height:51px}
.cm-notice{box-sizing:border-box;max-width:1140px;margin:28px auto 0 !important;width:calc(100% - 40px);border-radius:16px;
  padding:16px 20px;line-height:1.65;font-size:13px}
.container .cm-notice,.wrap .cm-notice{width:100%}
.cm-cta{box-sizing:border-box;max-width:1140px;width:calc(100% - 40px);margin:26px auto 44px !important;
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding:28px 32px;border-radius:22px;color:#fff;
  background:radial-gradient(520px 260px at 92% 15%,rgba(240,201,106,.25),transparent 60%),linear-gradient(135deg,#0B1F4D,#1B2A5E 60%,#243B7A);
  box-shadow:0 18px 40px rgba(11,31,77,.22);border:1px solid rgba(224,180,75,.35)}
.container .cm-cta,.wrap .cm-cta{width:100%}
.cm-cta h3{margin:0;font-size:clamp(18px,2vw,24px);color:#F3E3B3;font-weight:700}
.cm-cta p{margin:6px 0 0;font-size:13.5px;color:#fff;opacity:.85}
.cm-cta .cm-cta-btn{height:48px;padding:0 24px;border-radius:14px;display:inline-flex;align-items:center;gap:8px;
  background:linear-gradient(150deg,#F0C96A,#E0B44B);color:#1B2A5E !important;font-weight:800;text-decoration:none;
  box-shadow:0 8px 20px rgba(224,180,75,.35)}
.cm-cta .cm-cta-btn:hover{filter:brightness(1.06);background:linear-gradient(150deg,#F5D47F,#E6BC55)}
@media(max-width:700px){.cm-notice,.cm-cta{width:calc(100% - 24px)}.cm-cta{padding:22px 18px;text-align:center;justify-content:center}
  .cm-cta .cm-cta-btn{width:100%;justify-content:center}}
/* community/history: their section.container had margin-left:0 (not centred) */
main.ab-page > section.container{margin-left:auto;margin-right:auto}
/* centre every page section.container (community/history were pinned left) */
body .ab-page section.container{margin-left:auto !important;margin-right:auto !important}
main.ab-page.container{margin-left:auto !important;margin-right:auto !important}

/* ---- 4 Oct 2026 (owner, phone): menu in ONE line incl. "+ Profile बनाएँ"; समाज moved to the END.
   Replaces the two-row wrap. Sideways swipe if it does not fit; समाज sheet stays position:fixed. ---- */
@media(max-width:760px){
  nav.cm-sub{flex-wrap:nowrap !important;overflow-x:auto !important;justify-content:flex-start !important;row-gap:0 !important;scrollbar-width:none}
  nav.cm-sub::-webkit-scrollbar{display:none}
  nav.cm-sub > *{flex:0 0 auto !important}
  nav.cm-sub > a,nav.cm-sub .cm-subwrap > button{padding:6px 10px !important;font-size:12.5px !important}
  nav.cm-sub > .cm-sub-sp{display:none !important}
  nav.cm-sub > .cm-sub-cta{order:7;position:static !important;box-shadow:none !important}
  nav.cm-sub > .cm-subwrap{order:8}
  nav.cm-sub > .hs-ctl{order:9;position:sticky !important;right:0 !important;background:var(--cream,#FBF7EF) !important;border-radius:12px}
}

/* ---- 4 Oct 2026: the site footer (hub-shell .hs-foot) is dark navy. This file colours every b/strong/h1-h6
   with var(--ink) (dark), which made the footer headings invisible on ChandraMilan pages. Let the footer
   keep its own colours; hub-shell rules (more specific) still win. Also keep the last footer line clear of
   the fixed WhatsApp / Call / Help bar on phones. ---- */
.hs-foot :is(b,strong,h1,h2,h3,h4,h5,h6){color:inherit}
@media(max-width:760px){.hs-foot{padding-bottom:64px}}

/* ---- 4 Oct 2026 (owner): header AND the ChandraMilan menu stay visible on every page while scrolling.
   Phones: when hub-shell shows its own "4AB | page | ☰" bar (.hs-pbar, sticky top:0) the menu pins
   right under it (height measured by cm-install.js into --cm-pbar-h). When the menu itself is hub-shell
   top bar (.hs-topbar) it is already pinned at 0. PC: the menu pins at the top. ---- */
nav.cm-sub:not(.hs-topbar){position:sticky;top:var(--cm-pbar-h,0px);z-index:58;background:#F7F9FD;box-shadow:0 6px 16px rgba(27,42,94,.08)}