/* ============================================================ MANAS DESIGN SYSTEM — v1.1 LAYER (additive) Loads after mds.css. Same scope rules: .mds / mds-* / --mds-*. Adds: P2 mobile fix · trust restructure · FAQ · polish. ============================================================ */ /* ---------- P2 · Mobile: kill the redundant floating WhatsApp + notch clearance ---------- On mds pages the sticky mobar already carries Book / Assess / Call, so the JoinChat bubble is a duplicate that also overlaps content. Hide it only where the mobar shows (mobile). Desktop keeps the floating bubble untouched. */ @media(max-width:899px){ body.mds-page .joinchat, body.mds-page #joinchat, body.mds-page .joinchat__button{display:none!important} } /* iPhone home-indicator clearance for the sticky bar + its reserved space */ .mds-mobar{padding-bottom:env(safe-area-inset-bottom)} .mds.mds-has-mobar{padding-bottom:calc(64px + env(safe-area-inset-bottom))} @media(min-width:900px){.mds.mds-has-mobar{padding-bottom:0}} /* subtle press feedback on the mobar */ .mds-mobar a{transition:background .2s var(--mds-ease),transform .12s var(--mds-ease)} .mds-mobar a:active{transform:scale(.97)} /* ---------- P3 · Trust bar restructure ---------- Numbers row (data) sits above a quiet institutional strip (credibility), instead of six mixed tiles. Reuses .mds-it for the numbers. */ .mds-trust-nums{grid-template-columns:repeat(3,1fr)!important;gap:22px 14px} @media(min-width:760px){.mds-trust-nums{grid-template-columns:repeat(3,1fr)!important}} .mds-trust-strip{border-top:1px solid var(--mds-line);margin-top:8px;padding:22px 0 6px;text-align:center} .mds-trust-lab{display:inline-flex;align-items:center;gap:10px;font-size:11px;font-weight:700; letter-spacing:.16em;text-transform:uppercase;color:var(--mds-ink-soft);margin-bottom:14px} .mds-trust-lab::before,.mds-trust-lab::after{content:"";width:22px;height:1.5px;background:var(--mds-gold)} .mds-trust-orgs{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 0} .mds-org{font-family:var(--mds-display);font-size:1.02rem;font-weight:600;color:var(--mds-forest);padding:0 20px;line-height:1.2;position:relative} .mds-org+.mds-org::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:5px;height:5px;border-radius:50%;background:var(--mds-gold);opacity:.5} @media(max-width:560px){.mds-org{padding:0 12px;font-size:.92rem}.mds-org+.mds-org::before{width:4px;height:4px}} /* ---------- P5 · FAQ (static, KSES-safe — divs/spans only, no
) ---------- */ .mds-faq{max-width:840px;margin:44px auto 0} .mds-faq-item{position:relative;background:#fff;border:1px solid var(--mds-line);border-radius:var(--mds-r-md); padding:24px 28px 24px 30px;box-shadow:var(--mds-e1);margin-bottom:14px;overflow:hidden; transition:transform .28s var(--mds-ease),box-shadow .28s var(--mds-ease)} .mds-faq-item::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--mds-teal-grad);opacity:.85} .mds-faq-item:hover{transform:translateY(-3px);box-shadow:var(--mds-e2)} .mds-faq-q{font-family:var(--mds-display);font-weight:600;font-size:1.16rem;color:var(--mds-forest);line-height:1.3;margin:0} .mds-faq-a{color:var(--mds-ink-soft);font-size:14.75px;line-height:1.68;margin-top:10px} .mds-faq-a a{color:var(--mds-cta);font-weight:600;text-decoration:underline;text-decoration-color:var(--mds-gold);text-underline-offset:3px} /* ---------- Polish · serif-italic accent echo in section heads ---------- Lets a word inside any section H2 carry the hero's italic-serif motif. */ .mds-sec-head h2 em,.mds-priya h2 em,.mds-final h2 em{font-style:italic;font-weight:500;color:var(--mds-cta)} .mds-final h2 em{color:var(--mds-gold)} /* ---------- Polish · richer card-link affordance ---------- */ .mds-lk{display:inline-flex;align-items:center;gap:6px;transition:gap .25s var(--mds-ease),color .2s} .mds-card:hover .mds-lk{gap:10px;color:var(--mds-cta-h)} /* ---------- Polish · a second, quieter gold moment on the featured testimonial ---------- */ .mds-t.mds-feat{border-color:rgba(201,168,76,.34)} .mds-t.mds-feat::after{content:"";position:absolute;left:0;right:0;top:0;height:3px; background:linear-gradient(90deg,transparent,var(--mds-gold),transparent);opacity:.8} /* ---------- Polish · gentle section seam so bands don't hard-cut ---------- */ .mds-band-sage,.mds-band-sage-solid{position:relative} /* ---------- "The space" gallery (styles ship now; content drops in on photo upload) ---------- */ .mds-space{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:44px} @media(min-width:900px){.mds-space{grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr}} .mds-space figure{position:relative;margin:0;border-radius:var(--mds-r-md);overflow:hidden; border:1px solid rgba(201,168,76,.22);box-shadow:var(--mds-e1);aspect-ratio:4/5; transition:transform .3s var(--mds-ease),box-shadow .3s var(--mds-ease)} .mds-space figure.mds-wide{grid-column:span 2;aspect-ratio:8/5} .mds-space figure:hover{transform:translateY(-4px);box-shadow:var(--mds-e2)} .mds-space figure .mds-simg{position:absolute;inset:0;background-size:cover;background-position:center; transition:transform .6s var(--mds-ease);filter:saturate(.96) contrast(1.02)} .mds-space figure:hover .mds-simg{transform:scale(1.06)} .mds-space figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 16px 12px; background:linear-gradient(180deg,transparent,rgba(18,58,44,.72));color:#fff;font-size:12.5px;font-weight:600;letter-spacing:.02em} /* ============================================================ v1.2.1 · FONT-FORCE — higher specificity (body.mds-page .mds ...). WHY: the global theme CSS *and* the UAG/Gutenberg stylesheet both set h1-h6 font-family with !important, and UAG loads AFTER the plugin, so an equal-specificity !important rule loses on source order. Prefixing with body.mds-page raises specificity so mds wins regardless of load order. Fonts loaded via @import at top of mds.css (survives LiteSpeed stripping). Scoped to mds pages only — live non-mds pages untouched. ============================================================ */ body.mds-page .mds h1,body.mds-page .mds h2,body.mds-page .mds h3,body.mds-page .mds h4,body.mds-page .mds .mds-deg,body.mds-page .mds .mds-inst-name,body.mds-page .mds .mds-tl-role,body.mds-page .mds .mds-faq-q,body.mds-page .mds .mds-n,body.mds-page .mds .mds-org{font-family:var(--mds-display)!important} body.mds-page .mds,body.mds-page .mds p,body.mds-page .mds a,body.mds-page .mds li,body.mds-page .mds span,body.mds-page .mds div,body.mds-page .mds button,body.mds-page .mds .mds-eyebrow,body.mds-page .mds .mds-cta,body.mds-page .mds .mds-faq-a,body.mds-page .mds .mds-lede,body.mds-page .mds .mds-hero-sub,body.mds-page .mds .mds-l,body.mds-page .mds .mds-lk,body.mds-page .mds .mds-chip,body.mds-page .mds .mds-q,body.mds-page .mds .mds-who{font-family:var(--mds-body)!important} body.mds-page .mds .mds-hindi{font-family:var(--mds-hindi)!important} /* ============================================================ v1.3 · P6 CHROME — header/nav/footer polish, SCOPED to mds pages. LIVE-FROZEN LAW: scoped to body.mds-page, so it is DORMANT on every current live (non-mds) page. It activates automatically only when a page adopts the design system — i.e. when v2 content is copied to live. Never put this in global Customizer CSS. NOTE: no ">" child combinators anywhere (update_css escapes them; keeping the plugin consistent with that rule). ============================================================ */ @media(min-width:922px){ body.mds-page #masthead .main-navigation .menu-link{ font-family:var(--mds-body,'Hanken Grotesk',system-ui,sans-serif)!important; font-weight:600!important;letter-spacing:.005em!important;position:relative!important; } body.mds-page #masthead .main-navigation .menu-item .menu-link::after{ content:""!important;position:absolute!important;left:12px;right:12px;bottom:4px;height:2px; background:#C9A84C!important;border-radius:2px;transform:scaleX(0);transform-origin:left center; transition:transform .28s cubic-bezier(.2,.6,.2,1)!important;pointer-events:none; } body.mds-page #masthead .main-navigation .menu-item .menu-link:hover::after, body.mds-page #masthead .main-navigation .menu-item.current-menu-item .menu-link::after{transform:scaleX(1)!important} body.mds-page #masthead .main-navigation .sub-menu .menu-link::after{display:none!important} } body.mds-page #masthead{box-shadow:0 1px 0 rgba(201,168,76,.28),0 4px 18px rgba(26,77,58,.05)} body.mds-page #colophon{border-top:3px solid #C9A84C!important} body.mds-page #colophon .widget-title{font-family:var(--mds-display,'Fraunces',Georgia,serif)!important;color:var(--mds-forest,#1A4D3A)!important} /* ============================================================ v1.3 · IMAGERY — support inside the space gallery so tiles get native lazy-loading + srcset (works alongside the existing background-image span form; both render identically). ============================================================ */ .mds-space figure img.mds-simg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center} .mds-hero-fig img.mds-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center} /* ============================================================ v1.3 · UTILITY CLASSES — replace repeated inline styles in content (audit flagged inline style attrs as an HTML-bloat driver). ============================================================ */ .mds .mds-ic--lg{width:30px;height:30px;color:var(--mds-cta)} .mds .mds-hero-narrow{max-width:730px;padding:58px 0 28px} .mds .mds-mt-sm{margin-top:12px} .mds .mds-mt-md{margin-top:14px} /* ── v1.3.3 · LINK-HOVER CYAN LEAK (11 Jul 2026) ───────────────────────────── Astra: `a:hover, a:focus { color: var(--ast-global-color-0) }` = #3AA6B9 (cyan). The design system never reset it, so `.mds-cta--primary` — the single most important button on every page ("Book Your First Session") — turned CYAN on hover on ALL 7 mds pages. Missed by manual sweeps because they read the computed colour before the CSS transition settled (a false pass); caught by the AUDITOR linter. Buttons and links leak separately: resetting `button` does NOT reset `a`. Fix the CTAs explicitly, and neutralise every other link inside .mds. */ .mds a.mds-cta--primary, .mds a.mds-cta--primary:hover, .mds a.mds-cta--primary:focus, .mds a.mds-cta--primary:active{color:#fff!important} .mds a.mds-cta--outline:hover, .mds a.mds-cta--outline:focus{color:#fff!important} .mds a.mds-cta--od, .mds a.mds-cta--od:hover, .mds a.mds-cta--od:focus{color:#123A2C!important} .mds a.mds-cta--od-outline:hover, .mds a.mds-cta--od-outline:focus{color:#1A4D3A!important} /* any non-CTA link inside .mds keeps its inherited colour on hover */ .mds a:not([class*="mds-cta"]):hover, .mds a:not([class*="mds-cta"]):focus{color:inherit!important} /* ── v1.3.4 · HERO CARD + HERO BAND (12 Jul 2026) ──────────────────────────── The design system defines a TWO-COLUMN hero (.mds-hero-inner = 1.05fr 1fr, copy left / visual right) but only home-v2 ever used it. The 6 service pages and the assessments hub were built single-column with no band and no visual — so the most valuable real estate on the site (above the fold) was doing nothing, and read as a bare white page. .mds-hero-fig is IMAGE-ONLY (aspect-ratio 4/4.4, overflow:hidden), so it cannot hold the trust stats. This adds .mds-hero-card: the right-hand slot for proof — price, duration, credentials — WITHOUT any image dependency, so it ships before the real clinic photos land. On /assessments/ this also drags the PAID LADDER above the fold (₹299 Dr-Priya-reviewed report), which the revenue audit named as the #1 conversion fix. Previously those stats sat in a strip BELOW the hero. */ .mds .mds-hero-card{ background:#fff; border:1px solid rgba(201,168,76,.34); border-radius:var(--mds-r-md,18px); padding:8px 30px; box-shadow:0 26px 60px rgba(20,50,40,.11), 0 0 0 7px rgba(232,245,226,.55); } .mds .mds-hero-card-item{padding:20px 0;border-bottom:1px solid var(--mds-sage,#E8F5E2)} .mds .mds-hero-card-item:last-child{border-bottom:0} body.mds-page .mds .mds-hero-card-n{ /* !important: the design system's own body-font force (.mds div{...Hanken!important}) out-ranks this otherwise — the stat numbers rendered in Hanken, not Fraunces. */ font-family:var(--mds-display,'Fraunces',Georgia,serif)!important; font-size:1.9rem;line-height:1.15;font-weight:600; color:var(--mds-forest,#1A4D3A);letter-spacing:-.015em; } body.mds-page .mds .mds-hero-card-l{ margin-top:5px;font-size:.83rem;line-height:1.55; color:#6d7b73; } @media(max-width:899px){ .mds .mds-hero-card{padding:6px 22px;margin-top:8px} body.mds-page .mds .mds-hero-card-n{font-size:1.6rem} } /* ── v1.3.5 · HERO MEDIA + OVERLAPPING PROOF CARD (12 Jul 2026) ────────────── Manu: "if home has a pic in hero should not all pages have a pic to be consistent?" — Right instinct, wrong lever if taken literally. Consistency belongs to the STRUCTURE, not to identical payloads. But a bare white card on a sage band, on 7 pages, does read as sterile — it doesn't look like a place that exists. And swapping the card OUT for a photo would delete the exact proof that converts (price · duration · credentials on service pages; the Rs.299 Dr-Priya-reviewed report on /assessments/, which the revenue audit named the #1 above-the-fold fix). So: BOTH, in one component. Portrait photo fills the right column; the proof card overlaps its lower edge. Same structure on all 8 pages. Sizing: .mds-hero-fig renders ~519x571 CSS px => needs ~1040px wide at 2x DPR. The 1204x1600 originals clear that natively. The 720x1280 files would be UPSCALED 1.4x and look soft on screen no matter how high their per-pixel sharpness score is — pick by native size, not by sharpness alone. */ body.mds-page .mds .mds-hero-media{position:relative;padding-bottom:96px} body.mds-page .mds .mds-hero-media .mds-hero-fig{ aspect-ratio:4/4.05; /* slightly shorter: the card takes the lower third */ animation:none; /* no float — the card is anchored to it */ } /* proof card overlaps the photo's lower edge */ body.mds-page .mds .mds-hero-media .mds-hero-card{ position:absolute;left:26px;right:26px;bottom:0; padding:4px 24px; background:rgba(255,255,255,.94); backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px); border:1px solid rgba(201,168,76,.4); box-shadow:0 22px 50px rgba(20,50,40,.20); } body.mds-page .mds .mds-hero-media .mds-hero-card-item{padding:13px 0} body.mds-page .mds .mds-hero-media .mds-hero-card-n{font-size:1.5rem} body.mds-page .mds .mds-hero-media .mds-hero-card-l{font-size:.78rem} @media(max-width:899px){ body.mds-page .mds .mds-hero-media{padding-bottom:0} body.mds-page .mds .mds-hero-media .mds-hero-card{ position:static;margin-top:-42px;margin-left:14px;margin-right:14px; } body.mds-page .mds .mds-hero-media .mds-hero-fig{aspect-ratio:4/3.4} } /* ══════════════════════════════════════════════════════════════════════════════ v1.4.0 · MOBILE-FIRST CORRECTION (12 Jul 2026) ───────────────────────────────────────────────────────────────────────────── Manu: "95% of consumers are mobile, most ads open on mobile." The system was built and linted at 1440px. That optimised the 5% case. Audited 8 pages x 4 devices (375/390/360/768). Every defect below was MEASURED, not guessed. D1 HERO TALLER THAN THE PHONE. 110-158% of viewport on every page (home 158%vh on iPhone SE). An ad click landed on hero and NOTHING else — the visitor had to scroll before seeing a single word of proof. D2 HERO TOUCHED THE SCREEN EDGE on home. Cause: markup combines class="mds-wrap mds-hero-inner", and .mds-hero-inner{padding:44px 0 60px} is a SHORTHAND that overwrites .mds-wrap{padding:0 22px} -> horizontal padding became 0. Fixed with padding-block so the wrap keeps its gutters. D3 H1 NEVER SCALED DOWN. clamp(2.5rem,6.4vw,4.2rem): at 390px, 6.4vw=25px, so the clamp floored at its MINIMUM of 40px. A 40px headline on a 390px screen, eating 137px of vertical space. D4 CARD ROWS UNEQUAL. Cards matched within a row but rows differed (219/219/195) -> a 2x2 read as mismatched blocks. D5 TAP TARGETS BELOW 44px. mds-lk 24px, mh2-filter 34px, mh2-tab 43px. Below the WCAG/Apple/Google minimum — thumb-hostile. ══════════════════════════════════════════════════════════════════════════ */ /* ── D2 · gutters can never be destroyed by a padding shorthand ────────────── */ body.mds-page .mds .mds-wrap{padding-left:22px;padding-right:22px} /* NO `padding` shorthand here: it re-zeroes left/right on home, where the element is class="mds-wrap mds-hero-inner". padding-block ONLY. */ body.mds-page .mds .mds-hero-inner{padding-block:44px 60px} @media(min-width:900px){ body.mds-page .mds .mds-wrap{padding-left:44px;padding-right:44px} body.mds-page .mds .mds-hero-inner{padding-block:70px 90px} } /* nothing may bleed past the viewport, ever */ body.mds-page .mds{overflow-x:clip} /* ── D4 · every card in a grid is the SAME height, across rows too ─────────── */ body.mds-page .mds .mds-grid{grid-auto-rows:1fr} body.mds-page .mds .mds-card{height:100%} body.mds-page .mds .mds-card-body{display:flex;flex-direction:column;height:100%} @media(max-width:899px){ /* ── D3 · typography that actually scales on a phone ───────────────────── */ body.mds-page .mds .mds-hero h1{ font-size:clamp(1.85rem, 7.8vw, 2.35rem)!important; /* ~30px @390, was 40px */ line-height:1.14!important; letter-spacing:-.018em; } body.mds-page .mds h2{font-size:clamp(1.5rem, 6.2vw, 1.9rem)!important;line-height:1.2!important} body.mds-page .mds h4{font-size:1.06rem!important} body.mds-page .mds .mds-hero-sub{font-size:1rem!important;line-height:1.6!important} body.mds-page .mds .mds-lede{font-size:1rem!important;line-height:1.62!important} body.mds-page .mds{font-size:16px} /* ── D1 · hero must FIT, and show the next section beneath it ──────────── */ body.mds-page .mds .mds-hero-inner{padding-block:26px 30px;gap:22px} body.mds-page .mds .mds-section{padding:44px 0} body.mds-page .mds .mds-hero-cta{gap:10px} /* compact proof card: was 322px of a 844px screen */ body.mds-page .mds .mds-hero-card{padding:2px 18px} body.mds-page .mds .mds-hero-card-item{padding:12px 0} body.mds-page .mds .mds-hero-card-n{font-size:1.32rem!important} body.mds-page .mds .mds-hero-card-l{font-size:.79rem;line-height:1.45} /* ── D5 · thumb-sized targets (44px = WCAG / Apple / Google minimum) ───── */ body.mds-page .mds .mds-cta{min-height:50px;padding:14px 22px;font-size:1rem} body.mds-page .mds .mds-lk{min-height:44px;display:inline-flex;align-items:center} .mh2 .mh2-tab, .mh2 .mh2-filter, .mh2 .mh2-more, .mh2 .mh2-rung{min-height:44px!important;padding-top:11px!important;padding-bottom:11px!important} /* full-width primary CTA — the single most-tapped element on the site */ body.mds-page .mds .mds-hero-cta{flex-direction:column;align-items:stretch} body.mds-page .mds .mds-hero-cta .mds-cta{width:100%;justify-content:center} body.mds-page .mds .mds-final-cta{flex-direction:column;align-items:stretch} body.mds-page .mds .mds-final-cta .mds-cta{width:100%;justify-content:center} /* decorative dots were bleeding past the viewport edge */ body.mds-page .mds .mds-dot{display:none} } /* very small phones */ @media(max-width:380px){ body.mds-page .mds .mds-wrap{padding-left:18px;padding-right:18px} body.mds-page .mds .mds-hero h1{font-size:1.72rem!important} } /* ── v1.4.1 · SHORT PHONES (iPhone SE / 667px tall) ────────────────────────── After v1.4.0 the hero fitted on a 390x844 iPhone 14 (85-92%vh) but still overflowed the 375x667 SE (107-129%vh). The SE is the shortest screen in common use and ads land on it too. Tighten vertical rhythm further when the VIEWPORT IS SHORT — keyed on height, not width, because that is the actual constraint. */ @media(max-width:899px) and (max-height:720px){ body.mds-page .mds .mds-hero-inner{padding-block:18px 22px;gap:16px} body.mds-page .mds .mds-hero h1{font-size:1.62rem!important;line-height:1.12!important} body.mds-page .mds .mds-hero-sub{font-size:.94rem!important;line-height:1.55!important} body.mds-page .mds .mds-hero-card{padding:0 16px} body.mds-page .mds .mds-hero-card-item{padding:9px 0} body.mds-page .mds .mds-hero-card-n{font-size:1.16rem!important} body.mds-page .mds .mds-hero-card-l{font-size:.74rem;line-height:1.4} body.mds-page .mds .mds-cta{min-height:46px;padding:12px 18px} body.mds-page .mds .mds-hero-cta{gap:8px} body.mds-page .mds .mds-section{padding:36px 0} } /* the home hero figure is a portrait 4/4.4 crop — far too tall stacked on a phone, where it sits ABOVE the copy. Cap it so the headline stays visible. */ @media(max-width:899px){ body.mds-page .mds .mds-hero-fig{aspect-ratio:16/10;max-height:230px} body.mds-page .mds .mds-hero-media .mds-hero-fig{aspect-ratio:4/3.2;max-height:300px} } @media(max-width:899px) and (max-height:720px){ body.mds-page .mds .mds-hero-fig{max-height:180px} } /* ============================================================ v1.4.2 — MOBILE FOLD CORRECTION (13 Jul 2026) Three defects found by rendering at 390px, not by reading CSS: 1. DUPLICATE BOTTOM BAR. The site already ships a sitewide mobile CTA — #mns-mob-cta (Book / Call / WhatsApp, z-index 99999, injected into on EVERY page). .mds-mobar was a second, weaker bar stacked underneath it on home. Retire .mds-mobar; the incumbent is better (3 actions vs 2) and already universal. 2. THE FOLD WAS TEXT + TWO SLABS. Two 59px full-width buttons stacked = 130px of button dominating the first screen, with the Astra mobile header already eating 154px above. Demote the SECONDARY action to a link-weight control: one solid primary, one quiet link. Restores hierarchy without losing the action. 3. HERO IMAGE STARVED. v1.3.5 capped .mds-hero-fig at 180-230px to "keep the headline visible" — but that made the hero read as empty. The image is the warmth; on a phone it should carry the fold, not hide from it. Give it real presence and buy the space back from padding instead. ============================================================ */ /* 1 · retire the redundant bar (markup also removed from home v2) */ body.mds-page .mds-mobar{display:none!important} body.mds-page{padding-bottom:0!important} @media(max-width:899px){ /* 2 · buy back vertical space: the header already took 154px */ body.mds-page .mds .mds-hero-inner{padding-block:14px 26px!important} body.mds-page .mds .mds-hero .mds-eyebrow{margin-bottom:8px!important;font-size:.66rem!important} body.mds-page .mds .mds-hero h1{font-size:2rem!important;line-height:1.14!important;margin:0 0 10px!important} body.mds-page .mds .mds-hero-sub{margin:0 0 16px!important} /* 2b · ONE primary slab; secondary drops to link weight */ body.mds-page .mds .mds-hero-cta{flex-direction:column;align-items:stretch;gap:6px!important} body.mds-page .mds .mds-hero-cta .mds-cta--primary{ width:100%;min-height:52px!important;font-size:1rem!important;box-shadow:0 6px 18px rgba(27,94,82,.22)} body.mds-page .mds .mds-hero-cta .mds-cta--outline, body.mds-page .mds .mds-hero-cta .mds-cta--ghost{ width:auto;align-self:center;min-height:44px!important; background:transparent!important;border:0!important;box-shadow:none!important; padding:10px 8px!important;font-size:.92rem!important;font-weight:600!important; text-decoration:underline;text-underline-offset:3px} /* 3 · let the image breathe — it is the warmth of the fold */ body.mds-page .mds .mds-hero-fig{aspect-ratio:4/3!important;max-height:none!important;margin-top:4px} body.mds-page .mds .mds-hero-media .mds-hero-fig{aspect-ratio:4/3!important;max-height:none!important} /* proof card: compact, so it can sit with the image not below the fold */ body.mds-page .mds .mds-hero-card{margin-top:14px} } /* short phones (SE/mini): height is the constraint, not width */ @media(max-width:899px) and (max-height:720px){ body.mds-page .mds .mds-hero-fig{aspect-ratio:16/10!important;max-height:190px!important} body.mds-page .mds .mds-hero h1{font-size:1.78rem!important} body.mds-page .mds .mds-hero-inner{padding-block:10px 20px!important} } /* ============================================================ v1.4.3 — hero-media now that the MARKUP finally exists. Wiring the real image in pushed the hero back to 108-120%vh on a phone (image 260 + proof card 268 + copy). An ad click must land on a hero that FITS. Shrink the figure and compact the card when the two are stacked — the image stays the hero, the card stays visible. ============================================================ */ @media(max-width:899px){ body.mds-page .mds .mds-hero-media .mds-hero-fig{ aspect-ratio:16/10!important;max-height:196px!important} body.mds-page .mds .mds-hero-media .mds-hero-card{ margin-top:-30px!important;padding:2px 18px!important} body.mds-page .mds .mds-hero-media .mds-hero-card-item{padding:8px 0!important} body.mds-page .mds .mds-hero-media .mds-hero-card-n{font-size:1.12rem!important} body.mds-page .mds .mds-hero-media .mds-hero-card-l{font-size:.72rem!important;line-height:1.38!important} body.mds-page .mds .mds-hero-media .mds-hero-card-item:last-child{display:none} /* 3rd stat: keep the fold */ } @media(max-width:899px) and (max-height:720px){ body.mds-page .mds .mds-hero-media .mds-hero-fig{max-height:150px!important} body.mds-page .mds .mds-hero-media .mds-hero-card-item{padding:6px 0!important} } /* ============================================================ v1.4.4 — the hero OPENING, judged on a real phone (13 Jul 2026) Manu, on an iPhone: image sat at y=597 of an 844px screen — under the copy, under both CTAs, under the byline, clipped by the fold. And the stats card OVERLAPPED the photo. I designed that overlap and never looked at it on a phone; it reads as a box dumped on a picture. Fix: (a) compress everything above the image so the photo lands INSIDE the fold; (b) stop the overlap — card sits BELOW the photo on mobile. The overlap stays on desktop, where there is room for it to look deliberate rather than accidental. ============================================================ */ @media(max-width:899px){ /* (a) claw back the space above the image */ body.mds-page .mds .mds-hero-sub{ font-size:.93rem!important;line-height:1.5!important;margin:0 0 14px!important} body.mds-page .mds .mds-hero-note{ font-size:.78rem!important;line-height:1.4!important;margin:10px 0 0!important;opacity:.85} body.mds-page .mds .mds-hero-cta{margin-top:2px!important} /* the image is the warmth — it must be SEEN, not scrolled to */ body.mds-page .mds .mds-hero-fig{ aspect-ratio:16/10!important;max-height:210px!important;margin-top:14px!important} /* (b) NO OVERLAP on mobile — card sits under the photo, its own object */ body.mds-page .mds .mds-hero-media .mds-hero-fig{ aspect-ratio:16/10!important;max-height:196px!important} body.mds-page .mds .mds-hero-media .mds-hero-card{ position:static!important;margin:12px 0 0!important; margin-left:0!important;margin-right:0!important; padding:4px 18px!important;border-radius:14px; background:#fff!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important; box-shadow:0 8px 22px rgba(20,50,40,.10)!important} } @media(max-width:899px) and (max-height:720px){ body.mds-page .mds .mds-hero-fig{max-height:168px!important} body.mds-page .mds .mds-hero-media .mds-hero-fig{max-height:150px!important} } /* ============================================================ v1.4.5 — REAL CLINIC PHOTOS + hero geometry follows the library (13 Jul 2026, Manu-approved slate) The tall desktop hero (4/4.4 home, 4/4.05 service) was designed before anyone looked at the photographs. The library is 42 shots at 1280x720 and 33 at 720x1280 — and EVERY frame of Dr. Priya is one or the other. A tall crop upscales 10419 by 1.59x: the founder, soft, on the most valuable image slot on the site. Geometry serves the photographs, not the reverse. Desktop hero goes 16/10 — identical to mobile, so the crop no longer recomposes between breakpoints, and the whole library renders at native resolution. ============================================================ */ body.mds-page .mds .mds-hero-fig{aspect-ratio:16/10} body.mds-page .mds .mds-hero-media .mds-hero-fig{aspect-ratio:16/10} body.mds-page .mds .mds-hero-media{padding-bottom:74px} /* ══════════════════════════════════════════════════════════════════════════════ v1.4.6 · 13 Jul 2026 — THE STATS CARD WAS EATING THE PHOTOGRAPH ───────────────────────────────────────────────────────────────────────────── v1.4.5 shortened the desktop hero to 16/10 so the 1280px clinic photos would stop being upscaled. It did NOT touch the stats card. The card's height is fixed by its content — three stacked rows, ~250px — and it is absolutely positioned to bottom:0 of .mds-hero-media. Shortening the photo therefore made the card cover MORE of it, not less: photo 519x525 (4/4.05) -> card covered ~30% photo 519x324 (16/10) -> same card covers 55–75% <- measured live The change made to SAVE the photographs was burying them. Fix: on desktop the card comes OFF the photo and sits BELOW it with a small tuck — the treatment mobile already uses. 16/10 is kept, so nothing upscales. The photographs (10480 / 10494 / 10495 / 10476) are now actually visible. No copy changed. ============================================================================ */ @media(min-width:900px){ body.mds-page .mds .mds-hero-media{padding-bottom:0} body.mds-page .mds .mds-hero-media .mds-hero-card{ position:static; left:auto;right:auto;bottom:auto; margin:-38px 16px 0; padding:4px 24px; background:#fff; backdrop-filter:none; -webkit-backdrop-filter:none; box-shadow:0 14px 34px rgba(20,50,40,.13); } } /* ══════════════════════════════════════════════════════════════════════════════ v1.4.7 · 13 Jul 2026 — THE MOBILE HERO IMAGE WAS A POSTAGE STAMP ───────────────────────────────────────────────────────────────────────────── THE BUG: .mds-hero-fig carried BOTH `aspect-ratio:16/10` AND a `max-height`. In WebKit the clamped BLOCK size is fed back through the ratio, so the box loses its INLINE size too: max-height:150px × 16/10 = 240px wide Measured in real WebKit at 390×709: the figure rendered 240×150 inside a 346px column — 69% of the width — while the proof card beside it was full width. The image was not merely short, it was NARROW. ** aspect-ratio + max-height must NEVER be combined on this box. ** Note: `(max-height:720px)` was written as a "short phones / iPhone SE" rule. It is not. iOS Safari's viewport is ~709px on a normal iPhone 12 once the address bar is counted — so the 150px clamp was the DEFAULT phone experience, for 95% of the audience. The stylesheet had also been arguing with itself: v1.4.2 wrote "the image is the warmth; on a phone it should carry the fold, not hide from it" — and v1.4.3 immediately re-capped it to 196px. THE FIX: no max-height on the figure, ever. Explicit width:100% + a ratio. Tall viewports get 16/10, short ones 16/9 — the HEIGHT flexes, the WIDTH never collapses. Vertical rhythm bought back from the sub-copy and grid gap so the hero does not grow. VERIFIED in WebKit across all 8 v2 pages at 390×709: image 69% → 100% of the column, hero height unchanged (107%vh → 108%vh), zero horizontal overflow. ============================================================================ */ @media(max-width:899px){ body.mds-page .mds .mds-hero-fig, body.mds-page .mds .mds-hero-media .mds-hero-fig{ width:100%!important; max-width:none!important; max-height:none!important; height:auto!important; aspect-ratio:16/10!important; } body.mds-page .mds .mds-hero-sub{font-size:.95rem!important;line-height:1.5!important;margin:0 0 12px!important} body.mds-page .mds .mds-hero-inner{gap:14px!important;padding-block:12px 20px!important} body.mds-page .mds .mds-hero-media .mds-hero-card{margin-top:-26px!important} } /* short viewport = ANY iPhone in Safari with the address bar showing. Shorten the crop — never the width. */ @media(max-width:899px) and (max-height:760px){ body.mds-page .mds .mds-hero-fig, body.mds-page .mds .mds-hero-media .mds-hero-fig{ aspect-ratio:16/9!important; max-height:none!important; } } /* ══════════════════════════════════════════════════════════════════════════════ v1.4.8 · 13 Jul 2026 — THE PHOTOGRAPH WAS PAINTING OVER THE PRICE ───────────────────────────────────────────────────────────────────────────── A REGRESSION INTRODUCED BY v1.4.6. The proof card used to be `position:absolute` — which PAINTS ABOVE its siblings. v1.4.6 lifted it off the photo by switching it to `position:static` + a negative margin. The LAYOUT was right. The PAINT ORDER was not. `.mds-hero-fig` is `position:relative`. Per CSS 2.1 Appendix E, a positioned box paints ABOVE both the background AND the inline text of a NON-positioned sibling — regardless of DOM order. So the photograph was drawn straight over the top of the card. And the card's first row is the PRICE. Measured in WebKit: desktop 1440 — the ₹ figure was 78% covered by .mds-hero-fig, all 5 pages iPhone 390 — 57-71% covered by .mds-slide ** A NEGATIVE MARGIN MOVES A BOX. IT DOES NOT RAISE IT. ** If a box must sit ON something, it must be POSITIONED and carry a z-index. ============================================================================ */ body.mds-page .mds .mds-hero-media .mds-hero-fig{z-index:1} body.mds-page .mds .mds-hero-media .mds-hero-card{position:relative!important;z-index:3!important} /* ══════════════════════════════════════════════════════════════════════════════ v1.4.9 · 13 Jul 2026 — THE TABLET DEAD ZONE (640–899px) ───────────────────────────────────────────────────────────────────────────── NOBODY HAD EVER RENDERED THIS RANGE. The desktop grid starts at 900px, so every iPad in portrait, every iPad Air, and every half-screen laptop window received the PHONE layout stretched across a ~730px container: 768px "Book a Session" button = 724px wide image 724×453 899px "Book a Session" button = 855px wide image 855×534 An 855-pixel-wide button, sitting next to body copy that wraps at 391px. Incoherent — and it was the default on every iPad. FIX: a real tablet band. The single column is constrained to a 620px centred measure, and the CTA becomes a proper button beside its link instead of a full-bleed slab. The photograph keeps real presence (620×388). CHOSEN BY RENDERING three candidates in WebKit and LOOKING at them. A 2-column mini-desktop was rejected: it shrank the photo back to 329×205 — precisely the defect v1.4.7 had just removed. VERIFIED at 768 and 834 across all 8 pages: CTA 724px → 230px, zero occlusion, zero horizontal overflow, hero 45–87%vh. ============================================================================ */ @media(min-width:640px) and (max-width:899px){ body.mds-page .mds .mds-hero-inner{max-width:620px;margin-inline:auto} body.mds-page .mds .mds-hero-cta{flex-direction:row!important;align-items:center!important;gap:16px!important} body.mds-page .mds .mds-hero-cta .mds-cta--primary{width:auto!important;min-width:230px} body.mds-page .mds .mds-hero-cta .mds-cta--outline, body.mds-page .mds .mds-hero-cta .mds-cta--ghost{align-self:center!important} } /* ══════════════════════════════════════════════════════════════════════════════ v1.5.0 · 13 Jul 2026 — THE CARD WAS SHOVED 26px RIGHT (regression from v1.4.8) ───────────────────────────────────────────────────────────────────────────── Base CSS: `.mds-hero-card{position:absolute; left:26px; right:26px; bottom:0}`. Under `absolute`, left/right are EDGES and define the box. v1.4.8 changed it to `position:relative` to fix the paint order — and under `relative`, `left:26px` stops being an edge and becomes a 26px RIGHTWARD SHIFT (and `right` is ignored entirely). v1.4.6's DESKTOP rule happened to reset left/right/bottom. The MOBILE path never did. So on phones and tablets the card sat 26px off-centre — and at 390px its right edge landed at 394px, i.e. CLIPPED OFF THE SCREEN. ** CHANGING `position` WITHOUT RESETTING `left/right/top/bottom` IS A BUG. Those properties do not mean the same thing in a different position mode. ** ============================================================================ */ body.mds-page .mds .mds-hero-media .mds-hero-card{ position:relative!important; z-index:3!important; left:auto!important; right:auto!important; bottom:auto!important; top:auto!important; } /* ══════════════════════════════════════════════════════════════════════════════ v1.5.1 · 13 Jul 2026 — CONTRAST (WCAG AA) + LINE LENGTH ───────────────────────────────────────────────────────────────────────────── 1 · CONTRAST. `.mds-hero-card-l` hardcoded `color:#6d7b73`, bypassing the design token. Measured: #6d7b73 on white 4.44:1 ← FAILS WCAG AA (needs 4.5) #6d7b73 on sage 3.93:1 ← FAILS badly The token `--mds-ink-soft` (#4a5d53) is 7.0:1 and was correct all along. #5f6d65 keeps the light "muted label" feel AND passes on every surface: white 5.44 · sage 4.81 · cream 4.81 This is the PRICE LABEL under every ₹ figure, on all 8 pages. 2 · MEASURE. The featured testimonial ran to ~126 characters per line on desktop. Comfortable measure is 45–75; 90 is the outer limit. ============================================================================ */ body.mds-page .mds .mds-hero-card-l{color:#5f6d65} body.mds-page .mds .mds-t.mds-feat .mds-q{max-width:34em;margin-left:auto;margin-right:auto} /* ══════════════════════════════════════════════════════════════════════════════ v1.6.0 · 13 Jul 2026 — .mds-footer ───────────────────────────────────────────────────────────────────────────── Replaces the Astra HFB footer ON MDS PAGES ONLY. The old footer is hidden, not deleted — deactivate the plugin and it comes straight back. WHAT THE OLD FOOTER GOT WRONG (all measured, 13 Jul 2026): · NO phone, NO address, NO email — a physical clinic whose footer never said where it was. The strongest local-SEO signal there is, simply absent. · Social icons were 18x18px TAP TARGETS (need 44x44). · Nav links 38px tall on mobile (need 44). · ZERO headings — 14 links in one flat, ungrouped list. · Tablet rendered FOUR EQUAL COLUMNS AT 145px each. · No Book a Session. No Sachetana. No service pages. COLOURS — every value here was checked against WCAG AA: ink #1A4D3A on sage #E8F5E2 = 8.58:1 ✅ muted #5f6d65 on sage #E8F5E2 = 4.81:1 ✅ (NOT #6d7b73 — that is 3.93:1) CTA #ffffff on #1B5E52 = 8.10:1 ✅ GOLD #C9A84C is 2.02:1 on sage — it is used ONLY as a 2px decorative rule, NEVER as text. Decorative graphics are exempt; gold text is not. ============================================================================ */ body.mds-page #colophon{display:none!important} body.mds-page .mds-footer{background:#E8F5E2;color:#1A4D3A;border-top:1px solid rgba(26,77,58,.10);font-family:'Inter',system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased} body.mds-page .mds-foot-wrap{max-width:1180px;margin:0 auto;padding:52px 26px 0} body.mds-page .mds-foot-eyebrow{font-size:.71rem;letter-spacing:.15em;text-transform:uppercase;font-weight:700;color:#1A4D3A;margin:0 0 16px;line-height:1.4} body.mds-page .mds-foot-eyebrow::after{content:"";display:block;width:26px;height:2px;background:#C9A84C;margin-top:9px;border-radius:2px} /* ---- VISIT US band ---- */ body.mds-page .mds-foot-nap{padding-bottom:34px;border-bottom:1px solid rgba(26,77,58,.12)} body.mds-page .mds-foot-nap-grid{display:grid;grid-template-columns:1fr 1fr .95fr;gap:30px} body.mds-page .mds-foot-centre{font-style:normal;font-size:.92rem;line-height:1.72;color:#5f6d65} body.mds-page .mds-foot-centre-n{display:block;font-weight:700;color:#1A4D3A;font-size:1rem;margin-bottom:6px} body.mds-page .mds-foot-centre-n em{display:inline-block;font-style:normal;font-weight:600;font-size:.63rem;letter-spacing:.1em;text-transform:uppercase;color:#5f6d65;background:rgba(26,77,58,.07);border-radius:999px;padding:3px 9px;margin-left:6px;vertical-align:middle} body.mds-page .mds-foot-hours{display:block;margin-top:13px;padding-top:12px;border-top:1px solid rgba(26,77,58,.11);font-size:.88rem} body.mds-page .mds-foot-hours b{color:#1A4D3A;font-weight:600} body.mds-page .mds-foot-collab{display:block;margin-top:10px;font-size:.82rem;line-height:1.6;color:#5f6d65} body.mds-page .mds-foot-reach{display:flex;flex-direction:column;gap:9px} body.mds-page .mds-foot-tel{display:flex;flex-direction:column;justify-content:center;min-height:46px;text-decoration:none;line-height:1.3} body.mds-page .mds-foot-tel span{font-size:.66rem;letter-spacing:.11em;text-transform:uppercase;color:#5f6d65;font-weight:600} body.mds-page .mds-foot-tel b{font-size:1.04rem;color:#1A4D3A;font-weight:700;letter-spacing:.01em} body.mds-page .mds-foot-tel:hover b{text-decoration:underline} body.mds-page .mds-foot-mail{display:flex;align-items:center;min-height:44px;color:#5f6d65;font-size:.9rem;text-decoration:none;border-bottom:1px solid transparent;align-self:flex-start} body.mds-page .mds-foot-mail:hover{color:#1A4D3A;border-bottom-color:rgba(26,77,58,.3)} body.mds-page .mds-foot-cta{display:inline-flex;align-items:center;justify-content:center;gap:9px;background:#1B5E52;color:#fff;min-height:48px;padding:0 24px;border-radius:999px;font-weight:600;font-size:.94rem;text-decoration:none;margin-top:8px;box-shadow:0 5px 16px rgba(27,94,82,.22);transition:transform .18s ease} body.mds-page .mds-foot-cta:hover{color:#fff;transform:translateY(-1px)} /* ---- brand + link columns ---- */ body.mds-page .mds-foot-main{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:34px;padding:36px 0 30px} body.mds-page .mds-foot-logo{display:inline-block;line-height:0} body.mds-page .mds-foot-logo img{width:64px;height:64px;border-radius:12px} body.mds-page .mds-foot-tag{margin:14px 0 0;font-size:.94rem;line-height:1.7;color:#5f6d65;max-width:30ch} body.mds-page .mds-foot-social{display:flex;gap:4px;list-style:none;margin:14px 0 0;padding:0} body.mds-page .mds-foot-social a{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:50%;color:#1A4D3A;transition:background .16s ease} body.mds-page .mds-foot-social a:hover{background:rgba(26,77,58,.09)} body.mds-page .mds-foot-social svg{width:19px;height:19px;fill:currentColor} body.mds-page .mds-foot-msme{display:flex;align-items:center;gap:10px;margin:16px 0 0;font-size:.72rem;line-height:1.5;color:#5f6d65} body.mds-page .mds-foot-msme img{width:64px;height:36px;object-fit:contain;flex:none} body.mds-page .mds-foot-col ul{list-style:none;margin:0;padding:0} body.mds-page .mds-foot-col a{display:flex;align-items:center;min-height:38px;color:#5f6d65;text-decoration:none;font-size:.91rem;line-height:1.45;transition:color .14s ease} body.mds-page .mds-foot-col a:hover{color:#1A4D3A} /* ---- legal bar ---- */ body.mds-page .mds-foot-legal{display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:space-between;align-items:center;padding:18px 0 26px;border-top:1px solid rgba(26,77,58,.12)} body.mds-page .mds-foot-copy{margin:0;font-size:.83rem;color:#5f6d65} body.mds-page .mds-foot-entities{flex-basis:100%;width:100%;margin:0 0 6px;font-size:.78rem;line-height:1.65;color:#6a776f;max-width:none} body.mds-page .mds-foot-entities strong{font-weight:600;color:#4a5d53} body.mds-page .mds-foot-legal-links{display:flex;flex-wrap:wrap;gap:2px 20px;list-style:none;margin:0;padding:0} body.mds-page .mds-foot-legal-links a{display:flex;align-items:center;min-height:34px;color:#5f6d65;font-size:.83rem;text-decoration:none} body.mds-page .mds-foot-legal-links a:hover{color:#1A4D3A;text-decoration:underline} /* ---- TABLET 640-899: two columns. NEVER four at 145px. ---- */ @media (max-width:899px){ body.mds-page .mds-foot-nap-grid{grid-template-columns:1fr 1fr} body.mds-page .mds-foot-reach{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;align-items:center;gap:12px 30px;margin-top:8px;padding-top:18px;border-top:1px solid rgba(26,77,58,.11)} body.mds-page .mds-foot-cta{margin-top:0;margin-left:auto} body.mds-page .mds-foot-main{grid-template-columns:1fr 1fr;gap:24px 34px} body.mds-page .mds-foot-brand{grid-column:1/-1;padding-bottom:8px} body.mds-page .mds-foot-tag{max-width:46ch} /* touch: every standalone control clears 44px */ body.mds-page .mds-foot-col a{min-height:44px} body.mds-page .mds-foot-legal-links a{min-height:44px} } /* ---- PHONE ---- */ @media (max-width:639px){ body.mds-page .mds-foot-wrap{padding:40px 20px 0} body.mds-page .mds-foot-nap-grid{grid-template-columns:1fr;gap:26px} body.mds-page .mds-foot-reach{flex-direction:column;align-items:stretch;gap:6px} body.mds-page .mds-foot-cta{margin-left:0;margin-top:10px;width:100%} body.mds-page .mds-foot-main{grid-template-columns:1fr;gap:6px;padding:30px 0 24px} body.mds-page .mds-foot-brand{padding-bottom:18px} body.mds-page .mds-foot-col{border-top:1px solid rgba(26,77,58,.10);padding-top:16px} body.mds-page .mds-foot-legal{justify-content:flex-start;padding-bottom:calc(26px + env(safe-area-inset-bottom))} } /* ══════════════════════════════════════════════════════════════════════════════ v1.6.1 · 13 Jul 2026 — two defects in v1.6.0's own footer, caught by rendering it ───────────────────────────────────────────────────────────────────────────── 1 · CONTRAST. The "MAIN CENTRE" / "BY APPOINTMENT" pill sets its background to rgba(26,77,58,.07), which composites over sage into rgb(217,232,214) — a DARKER surface than the #E8F5E2 the muted token was checked against. #5f6d65 on sage #E8F5E2 = 4.81:1 ✅ #5f6d65 on pill rgb(217,232,214) = 4.26:1 ❌ FAILS AA Measured from rendered pixels, not assumed from CSS. #4a5d53 (the real --mds-ink-soft token) gives 5.52:1 on that pill. ** A COLOUR IS ONLY "COMPLIANT" AGAINST A SPECIFIC BACKGROUND. Tint the background and the ratio you validated no longer exists. ** 2 · LENGTH. The footer came out at 2,190px on a phone — 2.6 screens, and LONGER than the old one (1.6). It carries far more (two centres, hours, two lines, email, CTA), but three single-column link lists were most of the height. Two-up on phone: ~2,190px -> ~1,700px, with tap targets still ≥44px. ============================================================================ */ body.mds-page .mds-foot-centre-n em{color:#4a5d53} @media (max-width:639px){ body.mds-page .mds-foot-col ul{display:grid;grid-template-columns:1fr 1fr;column-gap:16px} body.mds-page .mds-foot-col a{min-height:44px;font-size:.88rem} body.mds-page .mds-foot-legal-links{gap:0 18px} } /* ══════════════════════════════════════════════════════════════════════════════ v1.6.4 · 17 Jul 2026 — .mds-author (canonical guide / byline person card) ───────────────────────────────────────────────────────────────────────────── The system had a LARGE founder feature (.mds-priya) but no COMPACT person card for "your guide" bylines on service pages. Every page that needed one built a bespoke inline grid — and sachetana's `grid-template-columns:260px 1fr` broke twice: on mobile the text column computed to 0px, and on desktop once LiteSpeed lazyload injected a