/* ===== Mahishika tokens (named by the colour you see) ===== */
:root{
  --blue-25:#D3E9FB; --blue-500:#2490EA; --blue-800:#1270bf; --blue-900:#1065ac;
  --navy-300:#33408d; --navy-400:#2d397e; --navy-500:#28326F; --navy-700:#1d2451; --navy-800:#181e42; --navy-900:#121733;
  --slate-25:#F2F2F3; --slate-200:#989ca4; --slate-800:#61656d;
  --cyan-25:#D6F3F9; --cyan-500:#32C1E2; --cyan-950:#1787a1;
  --green-25:#B7EBD2; --green-500:#10A55F;
  --red-25:#F8D6D4; --red-500:#DB3226;
  --orange-25:#FDE9D0; --orange-500:#F69313;

  --p-design:var(--orange-500); --p-design-tint:var(--orange-25);
  --p-video:var(--red-500);     --p-video-tint:var(--red-25);
  --p-tech:var(--cyan-500);     --p-tech-tint:var(--cyan-25);
  --p-mkt:var(--green-500);     --p-mkt-tint:var(--green-25);

  --ink:var(--navy-800); --muted:var(--slate-800); --line:#E1E2E6;
  --primary:var(--blue-800); --primary-hover:var(--blue-900);
  --nav-h:70px;
}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-family:"Poppins","Segoe UI",system-ui,sans-serif; color:var(--ink); line-height:1.7; -webkit-font-smoothing:antialiased; background:#fff}
h1,h2,h3,h4{font-family:inherit; font-weight:700; line-height:1.15; letter-spacing:-0.02em; color:var(--navy-500)}
h2{font-size:clamp(1.7rem,3.2vw,2.4rem)}
h3{font-size:1.1rem; font-weight:600; letter-spacing:-0.01em; color:var(--navy-700)}
a{color:var(--primary)} a:hover{color:var(--primary-hover)}
:focus-visible{outline:3px solid var(--blue-500); outline-offset:3px}
.mh-sec{padding:clamp(3rem,7vw,5.5rem) 0; scroll-margin-top:calc(var(--nav-h) + 8px)}
.mh-soft{background:var(--slate-25)}
.mh-lede{color:var(--muted); font-size:1.08rem; max-width:54ch}
.mh-head{max-width:22ch}
.mh-head + .mh-lede{margin-top:1rem}
.mh-mt{margin-top:2.25rem}

.btn{font-weight:600; border-radius:12px; padding:.8rem 1.35rem; transition:transform .15s ease, background-color .15s ease}
.btn:hover{transform:translateY(-2px)} .btn:focus{box-shadow:none}
.btn-mh{background:var(--primary); border:2px solid var(--primary); color:#fff}
.btn-mh:hover{background:var(--primary-hover); border-color:var(--primary-hover); color:#fff}
.btn-mh-outline{background:transparent; border:2px solid var(--navy-500); color:var(--navy-500)}
.btn-mh-outline:hover{background:var(--navy-500); color:#fff}
.btn-mh-light{background:#fff; border:2px solid #fff; color:var(--navy-500)}
.btn-mh-light:hover{background:var(--blue-25); border-color:var(--blue-25); color:var(--navy-700)}

/* placeholders */
.ph{background:#FFF3D6; box-shadow:inset 0 -2px 0 var(--orange-500); border-radius:3px; padding:0 .15em}
body.no-ph .ph{background:none; box-shadow:none}
.mh-ribbon{background:var(--navy-900); color:#fff; font-size:.82rem; padding:.55rem 0}
.mh-ribbon .container{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap}
.mh-ribbon button{background:transparent; border:1.5px solid rgba(255,255,255,.5); color:#fff; border-radius:99px; font:500 .78rem "Poppins",sans-serif; padding:.15rem .9rem; cursor:pointer}
.mh-ribbon button[aria-pressed="true"]{background:#fff; color:var(--navy-900)}

/* navbar */
.mh-nav{background:rgba(255,255,255,.95); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); padding:.7rem 0; min-height:var(--nav-h)}
.mh-nav .navbar-brand img{height:40px; width:auto; display:block}
.mh-nav .nav-link{color:var(--slate-800); font-weight:500; font-size:.95rem; padding-left:.9rem; padding-right:.9rem}
.mh-nav .nav-link:hover,.mh-nav .nav-link.active{color:var(--navy-500)}
.mh-nav .dropdown-menu{border:1px solid var(--line); border-radius:14px; padding:.5rem; box-shadow:0 12px 30px rgba(40,50,111,.12)}
.mh-nav .dropdown-item{border-radius:8px; padding:.55rem .8rem; font-weight:500; font-size:.92rem; display:flex; align-items:center; color:var(--navy-800)}
.mh-nav .dropdown-item i{width:.7rem; height:.7rem; border-radius:50%; margin-right:.7rem; background:var(--dc)}
@media (max-width:991.98px){.mh-nav .btn{margin:.75rem 0 .5rem}}

/* ===== hero ===== */
.mh-hero{padding:clamp(2.5rem,6vw,4.5rem) 0 clamp(2.5rem,6vw,4rem)}
.mh-hero h1{font-size:clamp(2.1rem,4.8vw,3.5rem); letter-spacing:-0.035em; line-height:1.08; max-width:15ch}
.mh-hero .mh-lede{margin-top:1.4rem; font-size:1.15rem}
.mh-search{position:relative; max-width:540px; margin-top:2rem}
.mh-search input{width:100%; border:2px solid var(--navy-500); border-radius:14px; padding:.95rem 1.1rem .95rem 3.1rem; font:500 1rem "Poppins",sans-serif; color:var(--ink); background:#fff}
.mh-search input:focus{outline:none; box-shadow:0 0 0 4px rgba(36,144,234,.25); border-color:var(--blue-500)}
.mh-search svg{position:absolute; left:1rem; top:50%; width:22px; height:22px; margin-top:-11px; color:var(--navy-500)}
.mh-pop{margin-top:.9rem; font-size:.85rem; color:var(--muted)}
.mh-pop button{background:#fff; border:1.5px solid var(--line); border-radius:99px; padding:.15rem .8rem; font:500 .82rem "Poppins",sans-serif; color:var(--navy-800); margin:.2rem .3rem .2rem 0; cursor:pointer; transition:border-color .15s}
.mh-pop button:hover{border-color:var(--navy-500)}
.mh-tiles{display:grid; grid-template-columns:1fr 1fr; gap:8px; max-width:420px; margin-left:auto}
.mh-tile{aspect-ratio:1/1; padding:1rem 1.1rem; text-align:left; background:var(--pt); border:2px solid var(--pc); display:flex; flex-direction:column; justify-content:flex-end; cursor:pointer; font:inherit; color:var(--navy-900);
  animation:mh-settle 1.3s cubic-bezier(.16,1,.3,1) both; animation-delay:var(--d); transition:transform .15s}
.mh-tile:hover{transform:translateY(-4px)}
.mh-tile:nth-child(1){border-radius:100% 12px 12px 12px}
.mh-tile:nth-child(2){border-radius:12px 100% 12px 12px; align-items:flex-end; text-align:right}
.mh-tile:nth-child(3){border-radius:12px 12px 12px 100%}
.mh-tile:nth-child(4){border-radius:12px 12px 100% 12px; align-items:flex-end; text-align:right}
.mh-tile strong{font-size:1.1rem; font-weight:700; letter-spacing:-0.02em}
.mh-tile span{font-size:.8rem; color:var(--navy-800)}
@keyframes mh-settle{from{transform:translate(var(--x),var(--y)) rotate(var(--r)); opacity:.2} to{transform:none; opacity:1}}
@media (prefers-reduced-motion:reduce){.mh-tile{animation:none}}
@media (max-width:991.98px){.mh-tiles{margin:2.5rem auto 0}}

/* ===== featured ===== */
.mh-feat{display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(1.5rem,4vw,3rem); align-items:center}
.mh-feat-img{aspect-ratio:4/3; border-radius:20px 20px 20px 110px; border:2px solid var(--blue-500); background:repeating-linear-gradient(135deg,var(--blue-25) 0 16px,#fff 16px 32px); display:flex; align-items:flex-end; padding:1rem; font-size:.85rem; color:var(--navy-800); text-decoration:none}
.mh-feat-img span{background:#fff; border-radius:99px; padding:.1rem .8rem}
.mh-feat h2{margin:.9rem 0 .9rem; font-size:clamp(1.6rem,3vw,2.3rem)}
.mh-feat h2 a{color:inherit; text-decoration:none}
.mh-feat h2 a:hover{color:var(--primary)}
.mh-feat p{color:var(--muted); font-size:1.02rem; max-width:48ch}
@media (max-width:991.98px){.mh-feat{grid-template-columns:1fr}}

.mh-cat{display:inline-flex; align-items:center; background:var(--pt); color:var(--navy-900); border-radius:99px; padding:.12rem .8rem; font-size:.78rem; font-weight:600}
.mh-cat i{width:.55rem; height:.55rem; border-radius:50%; background:var(--pc); margin-right:.45rem}
.mh-by{display:flex; align-items:center; margin-top:1rem}
.mh-by .av{width:36px; height:36px; border-radius:50%; background:var(--pt); color:var(--pc); display:flex; align-items:flex-end; justify-content:center; overflow:hidden; flex:none; margin-right:.7rem}
.mh-by .av svg{width:82%; height:auto}
.mh-by strong{display:block; font-size:.85rem; color:var(--navy-700); line-height:1.3}
.mh-by .t{font-size:.76rem; color:var(--slate-800)}
.mh-by .t + .t{border-left:1px solid var(--slate-200); margin-left:.5rem; padding-left:.5rem}

/* ===== filters + grid ===== */
.mh-bar{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; margin-bottom:1.5rem}
.mh-pills{display:flex; flex-wrap:wrap}
.mh-pills button,.mh-ind{background:#fff; border:1.5px solid var(--line); color:var(--navy-800); border-radius:99px; padding:.45rem 1.05rem; font:500 .9rem "Poppins",sans-serif; margin:0 .5rem .6rem 0; cursor:pointer; transition:border-color .15s, background-color .15s}
.mh-pills button:hover,.mh-ind:hover{border-color:var(--navy-500)}
.mh-pills button[aria-pressed="true"],.mh-ind[aria-pressed="true"]{background:var(--navy-500); border-color:var(--navy-500); color:#fff}
.mh-status{display:flex; align-items:center; font-size:.9rem; color:var(--muted); margin-bottom:1.25rem; min-height:1.8rem}
.mh-status button{background:none; border:0; color:var(--primary); font:600 .85rem "Poppins",sans-serif; text-decoration:underline; text-underline-offset:3px; cursor:pointer; margin-left:.75rem}
.mh-card{height:100%; display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; transition:transform .18s, box-shadow .18s}
.mh-card:hover{transform:translateY(-4px); box-shadow:0 16px 34px rgba(40,50,111,.10)}
.mh-card-img{display:flex; align-items:flex-end; aspect-ratio:16/10; padding:.8rem; font-size:.78rem; color:var(--navy-800); text-decoration:none; background:repeating-linear-gradient(135deg,var(--pt) 0 14px,#fff 14px 28px); border-bottom:1px solid var(--line); border-radius:0 0 0 56px}
.mh-card-img span{background:#fff; border-radius:99px; padding:.05rem .7rem}
.mh-card-body{padding:1.15rem 1.25rem 1.3rem; display:flex; flex-direction:column; flex:1}
.mh-card h3{margin:.8rem 0 .5rem; font-size:1.08rem; line-height:1.3}
.mh-card h3 a{color:var(--navy-700); text-decoration:none}
.mh-card h3 a:hover{color:var(--primary)}
.mh-card p{color:var(--muted); font-size:.9rem; line-height:1.6; margin:0}
.mh-card .mh-by{margin-top:auto; padding-top:1rem}
.mh-empty{text-align:center; padding:3rem 1rem; border:1.5px dashed var(--slate-200); border-radius:16px; color:var(--muted)}
.mh-empty strong{display:block; color:var(--navy-700); font-size:1.1rem; margin-bottom:.3rem}

/* ===== reading paths ===== */
.mh-path{height:100%; background:#fff; border:1px solid var(--line); border-top:5px solid var(--pc); border-radius:16px; padding:1.3rem 1.25rem 1.4rem}
.mh-path h3{margin-bottom:.3rem; font-size:1.12rem}
.mh-path .say{color:var(--slate-800); font-size:.82rem; margin-bottom:1rem}
.mh-path ol{list-style:none; counter-reset:p; margin:0; padding:0}
.mh-path li{counter-increment:p; position:relative; padding-left:2rem; margin-bottom:.75rem; font-size:.9rem; line-height:1.45}
.mh-path li::before{content:counter(p); position:absolute; left:0; top:.05rem; width:1.35rem; height:1.35rem; border-radius:50%; background:var(--pt); border:2px solid var(--pc); font-size:.7rem; font-weight:700; color:var(--navy-800); display:flex; align-items:center; justify-content:center}
.mh-path li a{color:var(--navy-700); font-weight:500; text-decoration:none}
.mh-path li a:hover{color:var(--primary); text-decoration:underline}

/* ===== lead magnet ===== */
.mh-lead{background:var(--navy-500); color:#fff}
.mh-lead h2{color:#fff; max-width:17ch}
.mh-lead .mh-lede{color:var(--blue-25)}
.mh-sub{margin-top:1.75rem; display:flex; flex-wrap:wrap; max-width:520px}
.mh-sub input{flex:1 1 220px; border:2px solid #fff; border-radius:12px; padding:.8rem 1rem; font:400 1rem "Poppins",sans-serif; margin:0 .6rem .6rem 0; min-width:0}
.mh-sub input:focus{outline:none; box-shadow:0 0 0 4px rgba(211,233,251,.5)}
.mh-sub-note{font-size:.85rem; color:var(--blue-25); min-height:1.4em; margin:.25rem 0 0; width:100%}
.mh-paper{background:#fff; color:var(--ink); border-radius:16px 16px 16px 72px; padding:1.5rem 1.6rem 1.7rem; box-shadow:0 20px 44px rgba(0,0,0,.25); transform:rotate(1.5deg); max-width:420px; margin-left:auto}
.mh-paper h3{font-size:1.15rem; margin-bottom:.2rem}
.mh-paper small{display:block; color:var(--slate-800); margin-bottom:1rem; font-size:.8rem}
.mh-paper ul{list-style:none; margin:0; padding:0}
.mh-paper li{display:flex; align-items:center; padding:.5rem 0; border-top:1px solid var(--line); font-size:.88rem}
.mh-paper li::before{content:""; width:1.05rem; height:1.05rem; border:2px solid var(--navy-500); border-radius:5px; margin-right:.8rem; flex:none}
.mh-paper li:nth-child(-n+2)::before{background:var(--green-500); border-color:var(--green-500)}
@media (max-width:991.98px){.mh-paper{margin:2.5rem auto 0; transform:none}}

/* ===== authors ===== */
.mh-author{text-align:left; width:100%; height:100%; background:#fff; border:1px solid var(--line); border-radius:16px 16px 16px 48px; padding:1.25rem; cursor:pointer; font:inherit; transition:transform .15s, border-color .15s}
.mh-author:hover{transform:translateY(-3px); border-color:var(--pc)}
.mh-author .av{width:64px; height:64px; border-radius:50%; background:var(--pt); color:var(--pc); display:flex; align-items:flex-end; justify-content:center; overflow:hidden; margin-bottom:.9rem}
.mh-author .av svg{width:80%; height:auto}
.mh-author strong{display:block; color:var(--navy-700); font-size:1rem}
.mh-author small{display:block; color:var(--muted); font-size:.82rem; line-height:1.4; margin:.15rem 0 .6rem}
.mh-author span{font-size:.82rem; font-weight:600; color:var(--primary)}
.mh-badge{display:inline-block; font-size:.78rem; padding:.15rem .75rem; border-radius:99px; background:var(--orange-25); color:var(--navy-800)}

/* ===== CTA band ===== */
.mh-cta{background:var(--blue-25); border-radius:24px 24px 24px 90px; padding:clamp(1.75rem,4vw,3rem); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap}
.mh-cta h2{max-width:20ch; margin-bottom:.6rem}
.mh-cta p{color:var(--navy-800); margin:0; max-width:46ch}
@media (max-width:767.98px){.mh-cta .btn{margin-top:1.25rem}}

/* footer */
.mh-footer{padding:3.5rem 0 2rem; border-top:1px solid var(--line)}
.mh-footer img{height:40px; width:auto}
.mh-footer .tag{color:var(--muted); max-width:34ch; margin-top:1rem; font-size:.92rem}
.mh-footer h4{font-size:.95rem; font-weight:600; letter-spacing:0; margin-bottom:.8rem; color:var(--navy-800)}
.mh-footer ul{list-style:none; margin:0; padding:0}
.mh-footer li{margin-bottom:.4rem; font-size:.92rem}
.mh-footer li a{color:var(--muted); text-decoration:none}
.mh-footer li a:hover{color:var(--navy-500)}
.mh-legal{margin-top:2rem; padding-top:1.4rem; border-top:1px solid var(--line); color:var(--slate-800); font-size:.85rem}

/* ===== Article page ===== */
.mh-article-head{padding-bottom:0}
.mh-crumbs{font-size:.9rem; color:var(--slate-800); margin-bottom:1.25rem}
.mh-crumbs a{color:var(--navy-700); text-decoration:none}
.mh-crumbs a:hover{color:var(--primary)}
.mh-article-head .mh-cat{margin-bottom:1rem}
.mh-article-head h1{max-width:24ch; margin-bottom:1rem}
.mh-article-head .mh-by{margin-top:1.5rem}
.mh-article-cover{margin:2.5rem 0 0}
.mh-article-cover img{display:block; width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:20px 20px 20px 110px; border:2px solid var(--blue-500)}
.mh-article-body{max-width:70ch; margin:2.5rem auto 0; font-size:1.075rem; line-height:1.75; color:var(--navy-800)}
.mh-article-body h2{margin:2.25rem 0 .75rem; font-size:1.6rem}
.mh-article-body h3{margin:1.75rem 0 .5rem; font-size:1.25rem}
.mh-article-body p{margin:0 0 1.1rem}
.mh-article-body ul,.mh-article-body ol{padding-left:1.25rem; margin:0 0 1.25rem}
.mh-article-body li{margin-bottom:.5rem}
.mh-article-body a{color:var(--primary); text-decoration:underline}
.mh-article-body img{max-width:100%; height:auto; border-radius:14px; margin:1.5rem 0}
.mh-article-author{max-width:70ch; margin:3rem auto 0; display:flex; align-items:center; gap:1rem; background:var(--slate-25); border-radius:16px; padding:1.25rem}
.mh-article-author .av{width:64px; height:64px; border-radius:50%; background:var(--blue-25); color:var(--navy-700); display:flex; align-items:flex-end; justify-content:center; overflow:hidden; flex:none}
.mh-article-author .av svg{width:80%; height:auto}
.mh-article-author .av img{width:100%; height:100%; object-fit:cover}
.mh-article-author small{display:block; color:var(--slate-800)}
.mh-article-author p{margin:.35rem 0 0; color:var(--navy-800); font-size:.95rem}