:root{
  --mh-content-max:1320px;
  --mh-gutter:clamp(20px,4.2vw,64px);
}
*{box-sizing:border-box}
.mh-page{width:100%;overflow-x:clip}
.mh-shell{width:min(calc(100% - (2 * var(--mh-gutter))),var(--mh-content-max));margin-inline:auto}

.mh-hero{background:linear-gradient(180deg,#eef5fc 0%,#fff 100%);padding:64px 0 40px;text-align:center}
.mh-hero__eyebrow{margin:0 0 10px;color:var(--brand);font-size:14px;font-weight:700;letter-spacing:.02em}
.mh-hero h1{margin:0 0 16px;font-size:clamp(26px,3.6vw,40px);line-height:1.32;font-weight:800;color:var(--ink);max-width:780px;margin-inline:auto}
.mh-hero p{margin:0 auto;max-width:620px;color:#3f4c5e;font-size:16px;line-height:1.9}

.mh-filters-section{padding:28px 0 0;margin-top:64px}
.mh-filters{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;list-style:none;margin:0;padding:0}
.mh-filter{display:inline-flex;align-items:center;min-height:42px;padding:0 20px;border-radius:999px;border:1px solid #d7e0ea;background:#fff;color:#3f4c5e;font-size:13.5px;font-weight:700;font-family:inherit;cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease}
.mh-filter:hover{border-color:var(--brand)}
.mh-filter.is-active{background:var(--brand);color:#fff;border-color:var(--brand)}

.mh-grid-section{padding:40px 0 56px;margin-top:64px}
.mh-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.mh-card{position:relative;display:flex;flex-direction:column;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 6px 20px rgba(20,40,70,.08);text-decoration:none;color:inherit;transition:box-shadow .2s ease,transform .2s ease}
.mh-card:hover{box-shadow:0 14px 34px rgba(20,40,70,.1);transform:translateY(-2px)}
.mh-card[hidden]{display:none}
.mh-card__media{position:relative;height:170px;overflow:hidden;background:#0b1a2c}
.mh-card__media img{width:100%;height:100%;object-fit:cover;display:block}
.mh-card__media--product{background:linear-gradient(180deg,#f3f7fb,#e3e9f0)}
.mh-card__media--product img{object-fit:contain;padding:14px 0}
.mh-card__body{padding:20px 20px 22px;display:flex;flex-direction:column;gap:10px;flex:1}
.mh-card__tag{display:inline-flex;align-self:flex-start;padding:4px 12px;border-radius:999px;background:var(--pale);color:var(--brand-dark);font-size:12px;font-weight:700}
.mh-card__body h3{margin:0;font-size:18px;line-height:1.4;font-weight:800;color:var(--ink)}
.mh-card__excerpt{margin:0;color:#556275;font-size:13.5px;line-height:1.8;flex:1}
.mh-card__meta{display:flex;align-items:center;gap:8px;color:#8a94a3;font-size:12px;margin-top:auto}
.mh-card__meta span:not(:last-child)::after{content:"·";margin-inline-start:8px;color:#c3ccd6}
.mh-card__cta{display:inline-flex;align-items:center;gap:6px;color:var(--brand);font-size:13.5px;font-weight:700}
.mh-card__cta::after{content:"";width:6px;height:6px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-inline-start:2px}

.mh-empty{display:none;text-align:center;padding:60px 20px;color:#5a6879;font-size:15px}
.mh-empty.is-visible{display:block}

.mh-closing{background:#0b1a2c;color:#fff;padding:56px 0;margin-top:96px;text-align:center}
.mh-closing h2{margin:0 0 12px;font-size:24px;line-height:1.4;font-weight:800}
.mh-closing p{margin:0 auto 24px;max-width:560px;color:#c6d2e0;font-size:15px;line-height:1.85}
.mh-btn{display:inline-flex;align-items:center;gap:8px;min-height:52px;padding:0 26px;border-radius:10px;font-size:15px;font-weight:700;text-decoration:none}
.mh-btn--primary{background:var(--brand);color:#fff}
.mh-btn--primary:hover{background:var(--brand-dark)}

@media (max-width:1040px){
  .mh-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .mh-hero{padding:48px 0 32px}
  .mh-filters-section{margin-top:40px}
  .mh-grid-section{padding:32px 0 40px;margin-top:40px}
  .mh-closing{margin-top:56px}
  .mh-grid{grid-template-columns:1fr}
  .mh-filters{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px}
  .mh-filter{flex:none;white-space:nowrap}
}

/* Final CTA: same gap above it as on the solution pages; two equal buttons (Bale outline + Telegram filled),
   laid out like the About hub's two-button CTA */
.mh-final-cta{margin-top:clamp(40px,5.2vw,88px)}
@media(min-width:1041px){
.mh-final-cta .gs-final-cta__inner{grid-template-columns:min(8.9vw,128px) minmax(0,1fr) min(14.4vw,207px) min(14.4vw,207px)}
.mh-final-cta .gs-final-cta__button{grid-column:4}
.mh-final-cta .gs-final-cta__phone{grid-column:3}
}
.mh-final-cta .gs-final-cta__phone{justify-self:stretch;justify-content:center;height:min(3.75vw,54px);box-sizing:border-box;background:#fff;border:1.5px solid var(--gs-brand,#206BEE);border-radius:min(.43vw,6.2px);padding:0 min(1.15vw,16.6px);font-size:min(1.05vw,15.1px)}
.mh-final-cta .gs-final-cta__phone:hover{background:#f3f8ff}
@media(max-width:1040px){
.mh-final-cta .gs-final-cta__phone{height:auto;min-height:48px;border-radius:7px;padding:0 18px;font-size:15px}
}
@media(min-width:621px) and (max-width:1040px){
.mh-final-cta .gs-final-cta__inner{grid-template-columns:58px 1fr 1fr;grid-template-areas:"icon copy copy" ". phone button"}
}
@media(max-width:620px){
.mh-final-cta .gs-final-cta__phone{width:100%;min-height:50px}
}