/* ==========================================================================
   Bootstrap 5 theming bridge — maps Bootstrap components to the Med-X look.
   Loaded AFTER bootstrap.min.css so these win. The original Med-X brand
   styles follow below unchanged.
   ========================================================================== */
:root{
  --bs-body-bg:#FBFBF9;
  --bs-body-color:#1A2A2F;
  --bs-body-font-family:"Cairo", system-ui, sans-serif;
  --bs-body-font-size:17px;
  --bs-body-line-height:1.65;
  --bs-primary:#298A9B;
  --bs-primary-rgb:41,138,155;
  --bs-link-color:#298A9B;
  --bs-link-color-rgb:41,138,155;
  --bs-link-hover-color:#236E7D;
  --bs-border-color:#E7EBEA;
  --bs-emphasis-color:#1A2A2F;
}
html[lang="en"]{ --bs-body-font-family:"Plus Jakarta Sans", system-ui, sans-serif; }

/* ---- container: match Med-X 1200px ---- */
.container{ max-width:1200px; padding-inline:24px; }
@media (max-width:640px){ .container{ padding-inline:18px; } }

/* ---- navbar ---- */
.navbar{ position:sticky; top:0; z-index:50; padding:0; background:transparent; transition:.2s ease; }
.navbar > .container{ min-height:74px; align-items:center; }
.navbar.is-scrolled{ background:color-mix(in oklch, white 82%, transparent); backdrop-filter:blur(14px); box-shadow:0 1px 0 var(--line), 0 6px 20px rgba(20,50,55,.05); }
.navbar-brand{ padding:0; margin:0; }
.navbar-brand img{ height:38px; width:auto; }
.navbar-nav{ gap:4px; }
.navbar-nav .nav-link{ padding:9px 15px; border-radius:999px; font-weight:600; font-size:15.5px; color:var(--ink-2); transition:.15s; }
.navbar-nav .nav-link:hover,.navbar-nav .nav-link:focus{ color:var(--ink); background:var(--surface-2); }
.navbar-nav .nav-link.active{ color:var(--primary); background:var(--c-50); }
.navbar-toggler{ border:none; padding:6px; color:var(--ink); }
.navbar-toggler:focus{ box-shadow:none; }
.mx-navactions{ flex:none; }

/* ---- buttons ---- */
.btn{ border-radius:999px; font-weight:700; padding:12px 22px; font-size:16px;
  display:inline-flex; align-items:center; justify-content:center; gap:8px; transition:.18s ease; }
.btn-primary{ --bs-btn-bg:var(--primary); --bs-btn-border-color:var(--primary);
  --bs-btn-hover-bg:var(--primary-700); --bs-btn-hover-border-color:var(--primary-700);
  --bs-btn-active-bg:var(--primary-700); --bs-btn-active-border-color:var(--primary-700);
  --bs-btn-color:#fff; --bs-btn-hover-color:#fff;
  box-shadow:0 6px 16px color-mix(in oklch, var(--c-500) 38%, transparent); }
.btn-primary:hover{ transform:translateY(-1px); }
.btn-ghost{ --bs-btn-bg:var(--surface); --bs-btn-color:var(--ink); --bs-btn-border-color:var(--line);
  --bs-btn-hover-bg:var(--surface); --bs-btn-hover-color:var(--primary); --bs-btn-hover-border-color:var(--c-300);
  border-width:1.5px; }
html[dir="rtl"] .btn svg{ transform:scaleX(-1); }

/* ---- forms ---- */
.form-control{ border:1.5px solid var(--line); border-radius:12px; padding:13px 16px; font-size:1rem; color:var(--ink); background:var(--surface); }
.form-control:focus{ border-color:var(--c-300); box-shadow:0 0 0 4px var(--c-100); }
.form-label{ font-size:14px; font-weight:700; color:var(--ink); margin-bottom:7px; }
textarea.form-control{ min-height:130px; resize:vertical; }

/* ---- accordion (FAQ) ---- */
.accordion{ --bs-accordion-bg:var(--surface); --bs-accordion-border-color:var(--line);
  --bs-accordion-active-bg:var(--c-50); --bs-accordion-active-color:var(--primary);
  --bs-accordion-btn-focus-box-shadow:none; --bs-accordion-color:var(--ink); }
.accordion-item{ border:1px solid var(--line)!important; border-radius:14px!important; margin-bottom:12px; overflow:hidden; }
.accordion-button{ font-size:1.08rem; font-weight:700; color:var(--ink); padding:18px 20px; }
.accordion-button:not(.collapsed){ color:var(--primary); box-shadow:none; }
.accordion-button:focus{ box-shadow:none; border-color:var(--line); }
.accordion-button::after{ --bs-accordion-btn-icon:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23298A9B' stroke-width='2.6' stroke-linecap='round'%3e%3cpath d='M12 5v14M5 12h14'/%3e%3c/svg%3e"); --bs-accordion-btn-active-icon:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23298A9B' stroke-width='2.6' stroke-linecap='round'%3e%3cpath d='M5 12h14'/%3e%3c/svg%3e"); background-size:1rem; }
.accordion-body{ color:var(--ink-2); font-size:1.02rem; line-height:1.7; padding:0 20px 20px; }

/* ---- nav-underline (disease tabs) ---- */
.nav-underline{ --bs-nav-underline-link-active-color:var(--primary); --bs-nav-underline-gap:8px;
  border-bottom:1px solid var(--line); margin:24px 0 30px; flex-wrap:wrap; }
.nav-underline .nav-link{ color:var(--ink-2); font-weight:700; font-size:15px; padding:12px 6px; border:0; border-bottom:3px solid transparent; }
.nav-underline .nav-link:hover{ color:var(--ink); }
.nav-underline .nav-link.active{ color:var(--primary); border-bottom-color:var(--primary); background:none; }

/* ---- card base (refined by .mx-card) ---- */
.card{ --bs-card-border-color:var(--line); --bs-card-border-radius:var(--radius); --bs-card-bg:var(--surface); }

/* ---- newsletter button on dark panel ---- */
.mx-news .btn-primary{ --bs-btn-bg:var(--c-400); --bs-btn-color:var(--c-900); --bs-btn-hover-bg:#fff; --bs-btn-hover-color:var(--c-900); box-shadow:none; }

/* ---- footer rows ---- */
.mx-footer__row{ border-bottom:1px solid rgba(255,255,255,.1); }

/* ---- article + disease detail wrappers (Bootstrap rows replace old CSS grids) ---- */
.mx-art-wrap{ max-width:1060px; margin-inline:auto; padding-top:44px; }
.mx-art-wrap .mx-prose{ max-width:none; }

:root{
  /* cyan scale from logo */
  --c-50:#EFFAFC; --c-100:#D6F1F6; --c-200:#ADE3EC; --c-300:#7FD2DF;
  --c-400:#5BC0D0; --c-500:#36A7B9; --c-600:#298A9B; --c-700:#236E7D;
  --c-800:#1D5663; --c-900:#173E48;

  --bg:#FBFBF9;
  --surface:#FFFFFF;
  --surface-2:#F4F6F6;
  --ink:#1A2A2F;
  --ink-2:#4D5E63;
  --ink-3:#7C8A8E;
  --line:#E7EBEA;
  --line-2:#EFF2F1;

  --primary:var(--c-600);
  --primary-700:var(--c-700);

  /* category accents — shared L/C, varied hue */
  --cat-general: oklch(0.68 0.10 212);
  --cat-nutrition: oklch(0.68 0.10 150);
  --cat-diseases: oklch(0.64 0.11 252);
  --cat-women: oklch(0.70 0.10 8);
  --cat-children: oklch(0.76 0.11 66);
  --cat-mental: oklch(0.64 0.10 298);
  --cat-meds: oklch(0.68 0.10 190);
  --cat-fitness: oklch(0.71 0.12 42);

  --radius:18px;
  --radius-sm:12px;
  --shadow-sm:0 1px 2px rgba(20,50,55,.05), 0 2px 8px rgba(20,50,55,.04);
  --shadow-md:0 4px 14px rgba(20,50,55,.08), 0 12px 32px rgba(20,50,55,.06);
  --shadow-lg:0 10px 40px rgba(20,50,55,.12);
  --maxw:1200px;
  --ff-ar:"Cairo", system-ui, sans-serif;
  --ff-en:"Plus Jakarta Sans", system-ui, sans-serif;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--ff-ar); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
html[lang="en"] body{ font-family:var(--ff-en); }
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer; border:none; background:none;}
input{font-family:inherit;}
::selection{background:var(--c-200);}
:focus-visible{outline:3px solid var(--c-300); outline-offset:2px; border-radius:6px;}

.mx-container{max-width:var(--maxw); margin-inline:auto; padding-inline:24px;}

/* category color cascade */
[data-cat="general"]{--cat:var(--cat-general);}
[data-cat="nutrition"]{--cat:var(--cat-nutrition);}
[data-cat="diseases"]{--cat:var(--cat-diseases);}
[data-cat="women"]{--cat:var(--cat-women);}
[data-cat="children"]{--cat:var(--cat-children);}
[data-cat="mental"]{--cat:var(--cat-mental);}
[data-cat="meds"]{--cat:var(--cat-meds);}
[data-cat="fitness"]{--cat:var(--cat-fitness);}
[data-cat]{ --cat-bg:color-mix(in oklch, var(--cat) 12%, white);
  --cat-bg-2:color-mix(in oklch, var(--cat) 22%, white);
  --cat-ink:color-mix(in oklch, var(--cat) 72%, #102024);}

/* ---------- buttons ---------- */
.mx-btn{display:inline-flex; align-items:center; gap:8px; font-weight:700;
  padding:13px 22px; border-radius:999px; font-size:16px; transition:.18s ease; white-space:nowrap;}
.mx-btn--primary{background:var(--primary); color:#fff; box-shadow:0 6px 16px color-mix(in oklch, var(--c-500) 38%, transparent);}
.mx-btn--primary:hover{background:var(--primary-700); transform:translateY(-1px);}
html[dir="rtl"] .mx-btn svg, html[dir="rtl"] .mx-link__arrow{transform:scaleX(-1);}

.mx-link{display:inline-flex; align-items:center; gap:6px; color:var(--primary); font-weight:700; font-size:16px; white-space:nowrap;}
.mx-link:hover{color:var(--primary-700);}
.mx-link:hover .mx-link__arrow{transform:translateX(3px);}
html[dir="rtl"] .mx-link:hover .mx-link__arrow{transform:scaleX(-1) translateX(3px);}

/* ---------- header ---------- */
.mx-header{position:sticky; top:0; z-index:50; transition:.2s ease;}
.mx-header.is-scrolled{background:color-mix(in oklch, white 82%, transparent); backdrop-filter:blur(14px); box-shadow:0 1px 0 var(--line), 0 6px 20px rgba(20,50,55,.05);}
.mx-header__inner{display:flex; align-items:center; gap:20px; height:74px;}
.mx-brand__logo{height:38px; width:auto;}
.mx-nav{display:flex; align-items:center; gap:4px; margin-inline:auto;}
.mx-nav__link{padding:9px 15px; border-radius:999px; font-weight:600; font-size:15.5px; color:var(--ink-2); transition:.15s; white-space:nowrap;}
.mx-nav__link:hover{color:var(--ink); background:var(--surface-2);}
.mx-nav__link.is-active{color:var(--primary); background:var(--c-50);}
.mx-header__actions{display:flex; align-items:center; gap:8px;}
.mx-iconbtn{width:42px; height:42px; border-radius:50%; display:grid; place-items:center; color:var(--ink-2); transition:.15s;}
.mx-iconbtn:hover{background:var(--surface-2); color:var(--ink);}
.mx-langbtn{display:flex; align-items:center; gap:6px; padding:9px 15px; border-radius:999px;
  border:1.5px solid var(--line); font-weight:700; font-size:14px; color:var(--ink); background:var(--surface); transition:.15s; min-height:42px;}
.mx-langbtn:hover{border-color:var(--c-300); color:var(--primary);}
.mx-menubtn{display:none; width:42px; height:42px; border-radius:12px; place-items:center; color:var(--ink);}
.mx-mobilenav{display:none; flex-direction:column; padding:8px 24px 18px; gap:2px; background:var(--surface); border-top:1px solid var(--line);}
.mx-mobilenav a{padding:13px 12px; border-radius:12px; font-weight:600; color:var(--ink-2);}
.mx-mobilenav a:hover{background:var(--surface-2); color:var(--ink);}

/* ---------- hero ---------- */
.mx-hero{position:relative; padding-top:34px; padding-bottom:44px; overflow:hidden;}
.mx-hero::before{content:""; position:absolute; inset-inline-start:50%; top:-340px; transform:translateX(-50%);
  width:1100px; height:700px; background:radial-gradient(ellipse at center, var(--c-100), transparent 62%); opacity:.7; z-index:-1;}
.mx-hero__grid{display:grid; grid-template-columns:1.15fr .85fr; gap:54px; align-items:center;}
.mx-hero__eyebrow{display:inline-flex; align-items:center; gap:8px; color:var(--primary); font-weight:700;
  background:var(--c-50); padding:7px 15px; border-radius:999px; font-size:14.5px; margin-bottom:20px;}
.mx-hero__title{font-size:clamp(2.1rem, 4.4vw, 3.35rem); line-height:1.18; font-weight:800; letter-spacing:-.01em; margin:0 0 18px; color:var(--ink); text-wrap:balance;}
.mx-hero__sub{font-size:1.15rem; color:var(--ink-2); margin:0 0 28px; max-width:34em; line-height:1.7;}

.mx-search{display:flex; align-items:center; gap:8px; background:var(--surface); border:1.5px solid var(--line);
  border-radius:999px; padding:7px 7px 7px 20px; box-shadow:var(--shadow-md); max-width:560px; transition:.18s;}
html[dir="rtl"] .mx-search{padding:7px 20px 7px 7px;}
.mx-search:focus-within{border-color:var(--c-300); box-shadow:0 0 0 4px var(--c-100), var(--shadow-md);}
.mx-search__icon{color:var(--ink-3); flex:none;}
.mx-search__input{flex:1; border:none; outline:none; background:none; font-size:1.05rem; color:var(--ink); padding:10px 4px; min-width:0;}
.mx-search__input::placeholder{color:var(--ink-3);}
.mx-search__btn{background:var(--primary); color:#fff; font-weight:700; padding:12px 26px; border-radius:999px; font-size:16px; transition:.18s; flex:none;}
.mx-search__btn:hover{background:var(--primary-700);}

.mx-suggest{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:18px;}
.mx-suggest__label{color:var(--ink-3); font-size:14px; font-weight:600;}
.mx-suggest__chips{display:flex; flex-wrap:wrap; gap:8px;}
.mx-chip{padding:7px 14px; border-radius:999px; background:var(--surface); border:1.5px solid var(--line);
  font-size:14px; color:var(--ink-2); font-weight:600; transition:.15s;}
.mx-chip:hover{border-color:var(--c-300); color:var(--primary); background:var(--c-50);}

/* hero art */
.mx-hero__art{position:relative;}
.mx-hero__illo{position:relative; aspect-ratio:1/1; border-radius:32px;
  background:linear-gradient(150deg, var(--c-100), var(--c-200)); border:1px solid color-mix(in oklch,var(--c-300) 50%, white);
  display:grid; place-items:center; box-shadow:var(--shadow-lg); overflow:hidden;}
.mx-hero__illo::after{content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(45deg, transparent 0 22px, color-mix(in oklch,var(--c-300) 22%, transparent) 22px 23px);}
.mx-hero__illoicon{color:color-mix(in oklch,var(--c-600) 55%, white); position:relative; z-index:1;}
.mx-hero__illolabel{position:absolute; bottom:18px; inset-inline:0; text-align:center; font-family:ui-monospace,monospace;
  font-size:12px; color:color-mix(in oklch,var(--c-700) 70%, white); z-index:1;}
.mx-hero__badge{position:absolute; bottom:22px; inset-inline-start:-18px; display:flex; align-items:center; gap:9px;
  background:var(--surface); padding:11px 16px; border-radius:14px; box-shadow:var(--shadow-md); font-weight:700; font-size:14.5px; color:var(--ink);}
.mx-hero__badgeicon{width:24px; height:24px; border-radius:50%; background:var(--cat-nutrition,#3aa); display:grid; place-items:center; color:#fff; background:oklch(0.68 0.13 150);}
.mx-hero__float{position:absolute; width:50px; height:50px; border-radius:16px; background:var(--surface); box-shadow:var(--shadow-md); display:grid; place-items:center; color:var(--primary);}
.mx-hero__float--a{top:-16px; inset-inline-end:30px; color:var(--cat-diseases);}
.mx-hero__float--b{top:42%; inset-inline-end:-18px; color:var(--cat-meds);}

/* stats */
.mx-stats{display:flex; gap:14px; flex-wrap:wrap; margin-top:46px; padding-top:30px; border-top:1px solid var(--line);}
.mx-stat{display:flex; align-items:center; gap:13px; flex:1; min-width:180px;}
.mx-stat__icon{width:46px; height:46px; border-radius:14px; background:var(--c-50); color:var(--primary); display:grid; place-items:center; flex:none;}
.mx-stat__n{font-size:1.7rem; font-weight:800; line-height:1; color:var(--ink); font-family:var(--ff-en);}
.mx-stat__l{font-size:14.5px; color:var(--ink-2); margin-top:4px;}

/* ---------- generic section ---------- */
.mx-section{padding-block:56px;}
.mx-section--tight{padding-block:20px 36px;}
.mx-sechead{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:30px;}
.mx-kicker{color:var(--primary); font-weight:700; font-size:14px; letter-spacing:.02em; margin-bottom:8px; display:flex; align-items:center; gap:6px;}
.mx-kicker--gold{color:oklch(0.62 0.13 60);}
.mx-h2{font-size:clamp(1.6rem,3vw,2.15rem); font-weight:800; margin:0; letter-spacing:-.01em; color:var(--ink);}
.mx-sechead__sub{margin:8px 0 0; color:var(--ink-2); font-size:1.05rem;}

/* ---------- category badge ---------- */
.mx-catbadge{display:inline-flex; align-items:center; align-self:flex-start; font-size:13px; font-weight:700; padding:5px 12px; border-radius:999px;
  background:var(--cat-bg); color:var(--cat-ink); width:fit-content;}

/* ---------- categories grid ---------- */
.mx-catgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.mx-catcard{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:24px 20px;
  display:flex; flex-direction:column; align-items:flex-start; gap:14px; transition:.2s ease; position:relative; overflow:hidden;}
.mx-catcard::before{content:""; position:absolute; inset-inline-start:0; top:0; bottom:0; width:4px; background:var(--cat); transform:scaleY(0); transform-origin:top; transition:.22s;}
.mx-catcard:hover{transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:transparent;}
.mx-catcard:hover::before{transform:scaleY(1);}
.mx-catcard__icon{width:54px; height:54px; border-radius:16px; background:var(--cat-bg); color:var(--cat-ink); display:grid; place-items:center; transition:.2s;}
.mx-catcard:hover .mx-catcard__icon{background:var(--cat); color:#fff;}
.mx-catcard__name{font-weight:700; font-size:1.08rem; color:var(--ink); line-height:1.3;}
.mx-catcard__count{font-size:13.5px; color:var(--ink-3); font-weight:600; white-space:nowrap;}

/* ---------- thumbnail panel ---------- */
.mx-thumb{position:relative; border-radius:var(--radius); overflow:hidden;
  background:linear-gradient(145deg, var(--cat-bg), var(--cat-bg-2)); display:grid; place-items:center;}
.mx-thumb__icon{color:color-mix(in oklch, var(--cat) 55%, white); position:relative; z-index:1;}
.mx-thumb__glow{position:absolute; width:140%; height:140%; background:radial-gradient(circle at 30% 25%, color-mix(in oklch,var(--cat) 18%,transparent), transparent 60%);}
.mx-thumb__dot{position:absolute; border-radius:50%; background:color-mix(in oklch,var(--cat) 30%, white);}
.mx-thumb__dot--1{width:14px; height:14px; top:18px; inset-inline-end:24px; opacity:.7;}
.mx-thumb__dot--2{width:30px; height:30px; bottom:20px; inset-inline-start:26px; opacity:.5;}
.mx-thumb--big{border-radius:22px;}

/* ---------- article card ---------- */
.mx-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  display:flex; flex-direction:column; transition:.2s ease;}
.mx-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:transparent;}
.mx-card .mx-thumb{border-radius:0;}
.mx-card__body{padding:20px; display:flex; flex-direction:column; gap:11px; flex:1;}
.mx-card__title{font-size:1.18rem; font-weight:700; line-height:1.4; margin:2px 0 0; color:var(--ink);}
.mx-card:hover .mx-card__title{color:var(--primary-700);}
.mx-card__excerpt{font-size:15px; color:var(--ink-2); margin:0; line-height:1.6; flex:1;}
.mx-card__meta{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
  padding-top:13px; border-top:1px solid var(--line-2); font-size:13px; color:var(--ink-3);}
.mx-card__reviewer{display:inline-flex; align-items:center; gap:7px; font-weight:600; color:var(--ink-2);}
.mx-avatar{width:22px; height:22px; border-radius:50%; background:var(--c-100); color:var(--c-700); display:grid; place-items:center; flex:none;}
.mx-card__time{display:inline-flex; align-items:center; gap:5px; font-weight:600; white-space:nowrap;}

/* ---------- featured ---------- */
.mx-featured{display:grid; grid-template-columns:1fr 1.05fr; gap:36px; align-items:center;
  background:var(--surface); border:1px solid var(--line); border-radius:26px; padding:22px; box-shadow:var(--shadow-sm); transition:.2s;}
.mx-featured:hover{box-shadow:var(--shadow-md);}
.mx-featured .mx-thumb{height:100%; min-height:300px;}
.mx-featured__body{display:flex; flex-direction:column; gap:14px; padding-inline:6px;}
.mx-featured__title{font-size:clamp(1.5rem,2.6vw,2.05rem); font-weight:800; line-height:1.28; margin:4px 0 0; color:var(--ink); letter-spacing:-.01em;}
.mx-featured__excerpt{font-size:1.08rem; color:var(--ink-2); margin:0; line-height:1.65;}
.mx-featured__meta{display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-size:14px; color:var(--ink-2); margin-top:2px;}
.mx-featured__meta strong{color:var(--ink); font-weight:700;}
.mx-dot-sep{width:4px; height:4px; border-radius:50%; background:var(--ink-3); opacity:.5;}
.mx-featured__cta{align-self:flex-start; margin-top:8px;}

/* ---------- split: latest + most read ---------- */
.mx-split{display:grid; grid-template-columns:1fr 340px; gap:40px; align-items:start;}
.mx-grid2{display:grid; grid-template-columns:repeat(2,1fr); gap:22px;}
.mx-grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}

.mx-mostread{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:24px; position:sticky; top:90px;}
.mx-mostread__title{display:flex; align-items:center; gap:9px; font-size:1.2rem; font-weight:800; margin:0 0 8px; color:var(--ink);}
.mx-mostread__title svg{color:var(--primary);}
.mx-mostread__list{list-style:none; margin:0; padding:0;}
.mx-mostread__list li{border-top:1px solid var(--line-2);}
.mx-rank{display:flex; gap:14px; padding:15px 4px; align-items:flex-start; transition:.15s;}
.mx-rank:hover{padding-inline-start:8px;}
.mx-rank__num{font-family:var(--ff-en); font-size:1.5rem; font-weight:800; color:var(--c-200); line-height:1; flex:none; width:26px;}
.mx-rank:hover .mx-rank__num{color:var(--primary);}
.mx-rank__title{font-weight:700; font-size:15px; line-height:1.45; color:var(--ink); display:block;}
.mx-rank:hover .mx-rank__title{color:var(--primary-700);}
.mx-rank__meta{display:flex; align-items:center; gap:10px; margin-top:8px;}
.mx-rank__views{display:inline-flex; align-items:center; gap:4px; font-size:12.5px; color:var(--ink-3); font-weight:600;}

/* ---------- browse by need ---------- */
.mx-browse-wrap{background:var(--surface-2);}
.mx-browsegrid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
.mx-browse{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:26px 22px;
  display:flex; flex-direction:column; gap:10px; position:relative; transition:.2s ease; min-height:200px;}
.mx-browse:hover{transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:transparent;}
.mx-browse__icon{width:56px; height:56px; border-radius:16px; background:var(--cat-bg); color:var(--cat-ink); display:grid; place-items:center; margin-bottom:6px;}
.mx-browse__title{font-weight:800; font-size:1.16rem; color:var(--ink);}
.mx-browse__desc{font-size:14.5px; color:var(--ink-2); line-height:1.55; flex:1;}
.mx-browse__arrow{color:var(--cat-ink); transition:.2s;}
.mx-browse:hover .mx-browse__arrow{transform:translateX(4px);}
html[dir="rtl"] .mx-browse:hover .mx-browse__arrow{transform:scaleX(-1) translateX(4px);}

/* ---------- newsletter ---------- */
.mx-news{background:linear-gradient(135deg, var(--c-700), var(--c-900)); border-radius:28px; padding:48px;
  display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap; position:relative; overflow:hidden;}
.mx-news::after{content:""; position:absolute; inset-inline-end:-80px; top:-80px; width:320px; height:320px;
  background:radial-gradient(circle, color-mix(in oklch,var(--c-400) 40%,transparent), transparent 70%);}
.mx-news__copy{display:flex; gap:18px; align-items:flex-start; max-width:520px; position:relative; z-index:1;}
.mx-news__icon{width:54px; height:54px; border-radius:16px; background:rgba(255,255,255,.14); color:#fff; display:grid; place-items:center; flex:none;}
.mx-news__title{color:#fff; font-size:1.55rem; font-weight:800; margin:0 0 8px;}
.mx-news__sub{color:var(--c-100); margin:0; line-height:1.6; font-size:1.02rem;}
.mx-news__form{display:flex; gap:10px; position:relative; z-index:1; flex-wrap:wrap;}
.mx-news__input{border:none; border-radius:999px; padding:15px 22px; font-size:16px; min-width:260px; background:#fff; color:var(--ink);}
.mx-news__input::placeholder{color:var(--ink-3);}
.mx-news .mx-btn--primary{background:var(--c-400); color:var(--c-900);}
.mx-news .mx-btn--primary:hover{background:#fff;}
.mx-news__done{display:flex; align-items:center; gap:10px; color:#fff; font-weight:700; font-size:1.1rem; background:rgba(255,255,255,.14); padding:15px 26px; border-radius:999px;}
.mx-news__note{width:100%; color:var(--c-200); font-size:13px; margin:14px 0 0; position:relative; z-index:1;}

/* ---------- footer ---------- */
.mx-footer{background:var(--ink); color:#C9D6D9; padding-block:54px 28px; margin-top:20px;}
.mx-footer__top{display:grid; grid-template-columns:1.3fr 2fr; gap:40px; padding-bottom:36px; border-bottom:1px solid rgba(255,255,255,.1);}
.mx-footer__logo{height:34px; filter:brightness(1.4); margin-bottom:16px;}
.mx-footer__tag{color:#9FB0B4; line-height:1.7; margin:0; font-size:15px; max-width:30em;}
.mx-footer__cols{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.mx-footer__col h4{color:#fff; font-size:15px; font-weight:700; margin:0 0 14px;}
.mx-footer__col ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px;}
.mx-footer__col a{color:#9FB0B4; font-size:14.5px; transition:.15s;}
.mx-footer__col a:hover{color:var(--c-300);}
.mx-disclaimer{display:flex; gap:14px; align-items:flex-start; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  border-radius:16px; padding:20px 22px; margin:30px 0; }
.mx-disclaimer__icon{color:var(--c-300); flex:none;}
.mx-disclaimer strong{color:#fff; display:block; margin-bottom:5px; font-size:15px;}
.mx-disclaimer p{margin:0; font-size:14px; line-height:1.65; color:#9FB0B4;}
.mx-footer__bottom{display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; font-size:14px; color:#8A9B9F;}
.mx-footer__legal{display:flex; gap:20px;}
.mx-footer__legal a:hover{color:var(--c-300);}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .mx-nav{display:none;}
  .mx-menubtn{display:grid;}
  .mx-mobilenav{display:flex;}
  .mx-hero__grid{grid-template-columns:1fr; gap:36px;}
  .mx-hero__art{max-width:420px; margin-inline:auto; width:100%;}
  .mx-featured{grid-template-columns:1fr;}
  .mx-split{grid-template-columns:1fr;}
  .mx-mostread{position:static;}
  .mx-catgrid{grid-template-columns:repeat(3,1fr);}
  .mx-browsegrid{grid-template-columns:repeat(2,1fr);}
  .mx-grid3{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:640px){
  body{font-size:16px;}
  .mx-container{padding-inline:18px;}
  .mx-section{padding-block:40px;}
  .mx-catgrid{grid-template-columns:repeat(2,1fr);}
  .mx-grid2,.mx-grid3,.mx-browsegrid{grid-template-columns:1fr;}
  .mx-sechead{flex-direction:column; align-items:flex-start; gap:12px;}
  .mx-search{flex-wrap:nowrap;}
  .mx-search__btn{padding:12px 18px;}
  .mx-news{padding:32px 24px;}
  .mx-news__form{width:100%;}
  .mx-news__input{min-width:0; flex:1;}
  .mx-footer__top{grid-template-columns:1fr; gap:28px;}
  .mx-footer__cols{grid-template-columns:1fr 1fr;}
  .mx-stat__n{font-size:1.45rem;}
}
@media (prefers-reduced-motion: reduce){
  *{transition:none !important; scroll-behavior:auto !important;}
}


/* ===================== inner pages ===================== */

/* Med-X — inner page styles (shared across all sub-pages). */

/* ---------- breadcrumb ---------- */
.mx-crumb{display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:14px; color:var(--ink-3); padding-block:22px 0;}
.mx-crumb a{color:var(--ink-2); font-weight:600;}
.mx-crumb a:hover{color:var(--primary);}
.mx-crumb__sep{opacity:.5;}
html[dir="rtl"] .mx-crumb__sep svg{transform:scaleX(-1);}
.mx-crumb__cur{color:var(--ink-3); font-weight:600;}

/* ---------- generic page hero ---------- */
.mx-pagehero{padding:34px 0 8px; position:relative;}
.mx-pagehero__eyebrow{display:inline-flex; align-items:center; gap:8px; color:var(--primary); font-weight:700; background:var(--c-50); padding:6px 14px; border-radius:999px; font-size:14px; margin-bottom:16px;}
.mx-pagehero__title{font-size:clamp(1.9rem,3.6vw,2.9rem); font-weight:800; letter-spacing:-.01em; margin:0 0 14px; color:var(--ink); text-wrap:balance;}
.mx-pagehero__sub{font-size:1.12rem; color:var(--ink-2); margin:0; max-width:46em; line-height:1.7;}

/* ---------- article ---------- */
.mx-art-header{max-width:820px; margin-inline:auto; text-align:center; padding-top:18px;}
.mx-art-header .mx-catbadge{margin-inline:auto;}
.mx-art-title{font-size:clamp(1.9rem,3.6vw,3rem); font-weight:800; line-height:1.22; letter-spacing:-.01em; margin:16px 0 16px; color:var(--ink); text-wrap:balance;}
.mx-art-standfirst{font-size:1.2rem; color:var(--ink-2); line-height:1.7; margin:0 0 26px; text-wrap:pretty;}
.mx-art-meta{display:flex; align-items:center; justify-content:center; gap:18px; flex-wrap:wrap; padding:20px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.mx-byline{display:flex; align-items:center; gap:11px; text-align:start;}
.mx-byline__av{width:44px; height:44px; border-radius:50%; background:var(--c-100); color:var(--c-700); display:grid; place-items:center; font-weight:800; flex:none; font-size:1rem;}
.mx-byline__name{font-weight:700; color:var(--ink); font-size:15px; line-height:1.3;}
.mx-byline__role{font-size:13px; color:var(--ink-3);}
.mx-meta-chip{display:inline-flex; align-items:center; gap:6px; font-size:13.5px; color:var(--ink-2); font-weight:600;}
.mx-meta-chip svg{color:var(--ink-3);}
.mx-meta-sep{width:1px; height:32px; background:var(--line);}
.mx-share{display:inline-flex; gap:8px;}
.mx-share button{width:38px; height:38px; border-radius:50%; border:1.5px solid var(--line); display:grid; place-items:center; color:var(--ink-2); transition:.15s;}
.mx-share button:hover{border-color:var(--c-300); color:var(--primary); background:var(--c-50);}

.mx-cover{max-width:1000px; margin:30px auto 0; border-radius:24px; overflow:hidden;}
.mx-cover .mx-thumb{border-radius:24px;}

.mx-art-layout{display:grid; grid-template-columns:260px 1fr; gap:48px; align-items:start; max-width:1060px; margin-inline:auto; padding-top:44px;}
.mx-toc{position:sticky; top:96px;}
.mx-toc__title{font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-3); margin:0 0 14px;}
.mx-toc__list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; border-inline-start:2px solid var(--line);}
.mx-toc__list a{display:block; padding:8px 16px; font-size:14.5px; color:var(--ink-2); font-weight:600; border-inline-start:2px solid transparent; margin-inline-start:-2px; transition:.15s; line-height:1.4;}
.mx-toc__list a:hover{color:var(--primary);}
.mx-toc__list a.is-active{color:var(--primary); border-inline-start-color:var(--primary);}

.mx-prose{max-width:680px; font-size:1.12rem; line-height:1.85; color:#2C3A3F;}
.mx-prose h2{font-size:1.65rem; font-weight:800; color:var(--ink); margin:42px 0 14px; letter-spacing:-.01em; scroll-margin-top:96px;}
.mx-prose h2:first-child{margin-top:0;}
.mx-prose p{margin:0 0 18px;}
.mx-prose ul{margin:0 0 22px; padding:0; list-style:none; display:flex; flex-direction:column; gap:11px;}
.mx-prose ul li{position:relative; padding-inline-start:30px;}
.mx-prose ul li::before{content:""; position:absolute; inset-inline-start:4px; top:11px; width:9px; height:9px; border-radius:50%; background:var(--c-400); box-shadow:0 0 0 4px var(--c-100);}

.mx-key{background:var(--c-50); border:1px solid var(--c-200); border-radius:18px; padding:24px 26px; margin:0 0 32px;}
.mx-key__title{display:flex; align-items:center; gap:9px; font-size:1.05rem; font-weight:800; color:var(--c-800); margin:0 0 14px;}
.mx-key ul{margin:0;}
.mx-key ul li::before{background:var(--c-600); box-shadow:0 0 0 4px white;}

.mx-callout{display:flex; gap:14px; border-radius:16px; padding:18px 20px; margin:8px 0 24px; font-size:1.02rem; line-height:1.65;}
.mx-callout svg{flex:none; margin-top:2px;}
.mx-callout--info{background:var(--c-50); color:var(--c-800);}
.mx-callout--info svg{color:var(--c-600);}
.mx-callout--warn{background:oklch(0.96 0.04 40); color:oklch(0.42 0.11 40);}
.mx-callout--warn svg{color:oklch(0.62 0.14 40);}

.mx-reviewbar{display:flex; align-items:center; gap:12px; background:oklch(0.97 0.03 150); border:1px solid oklch(0.88 0.06 150); border-radius:14px; padding:14px 18px; margin:30px 0; font-size:14.5px; color:oklch(0.40 0.08 150); font-weight:600;}
.mx-reviewbar svg{color:oklch(0.58 0.12 150); flex:none;}

/* FAQ accordion */
.mx-faq{margin-top:40px;}
.mx-faq__h{font-size:1.5rem; font-weight:800; color:var(--ink); margin:0 0 18px;}
.mx-acc{border:1px solid var(--line); border-radius:14px; margin-bottom:12px; overflow:hidden; background:var(--surface);}
.mx-acc__q{width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 20px; font-size:1.08rem; font-weight:700; color:var(--ink); text-align:start;}
.mx-acc__q:hover{background:var(--surface-2);}
.mx-acc__icon{flex:none; width:28px; height:28px; border-radius:50%; background:var(--c-50); color:var(--primary); display:grid; place-items:center; transition:.2s;}
.mx-acc.is-open .mx-acc__icon{background:var(--primary); color:#fff; transform:rotate(45deg);}
.mx-acc__a{max-height:0; overflow:hidden; transition:max-height .28s ease; color:var(--ink-2); font-size:1.02rem; line-height:1.7;}
.mx-acc__a-inner{padding:0 20px 20px;}

/* references */
.mx-refs{margin-top:40px; background:var(--surface-2); border-radius:18px; padding:26px 28px;}
.mx-refs__h{display:flex; align-items:center; gap:9px; font-size:1.2rem; font-weight:800; color:var(--ink); margin:0 0 16px;}
.mx-refs ol{margin:0; padding-inline-start:22px; display:flex; flex-direction:column; gap:10px; color:var(--ink-2); font-size:14.5px; line-height:1.6;}
.mx-refs ol li{padding-inline-start:6px;}

/* author card */
.mx-authorcard{display:flex; gap:18px; align-items:flex-start; border:1px solid var(--line); border-radius:18px; padding:24px; margin-top:34px; background:var(--surface);}
.mx-authorcard__av{width:64px; height:64px; border-radius:50%; background:var(--c-100); color:var(--c-700); display:grid; place-items:center; font-weight:800; font-size:1.3rem; flex:none;}
.mx-authorcard__label{font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-3); margin-bottom:4px;}
.mx-authorcard__name{font-size:1.2rem; font-weight:800; color:var(--ink); margin:0 0 6px;}
.mx-authorcard__role{color:var(--ink-2); font-size:15px; margin:0;}

.mx-related{padding-block:56px;}

@media (max-width:900px){
  .mx-art-layout{grid-template-columns:1fr; gap:24px;}
  .mx-toc{display:none;}
  .mx-prose{max-width:none;}
}
@media (max-width:640px){
  .mx-art-meta{gap:12px;}
  .mx-meta-sep{display:none;}
}

/* ===================== directory / listing ===================== */
.mx-toolbar{display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; margin:30px 0 22px;}
.mx-filtersearch{display:flex; align-items:center; gap:8px; background:var(--surface); border:1.5px solid var(--line); border-radius:999px; padding:5px 5px 5px 18px; box-shadow:var(--shadow-sm); flex:1; min-width:260px; max-width:460px; transition:.18s;}
html[dir="rtl"] .mx-filtersearch{padding:5px 18px 5px 5px;}
.mx-filtersearch:focus-within{border-color:var(--c-300); box-shadow:0 0 0 4px var(--c-100);}
.mx-filtersearch input{flex:1; border:none; outline:none; background:none; font-size:1rem; color:var(--ink); padding:9px 4px; min-width:0;}
.mx-filtersearch svg{color:var(--ink-3); flex:none;}
.mx-results-n{color:var(--ink-3); font-size:14.5px; font-weight:600; white-space:nowrap;}

.mx-chips{display:flex; gap:9px; flex-wrap:wrap; margin-bottom:30px;}
.mx-fchip{padding:9px 18px; border-radius:999px; border:1.5px solid var(--line); background:var(--surface); font-size:14.5px; font-weight:600; color:var(--ink-2); transition:.15s; min-height:42px;}
.mx-fchip:hover{border-color:var(--c-300); color:var(--primary);}
.mx-fchip.is-active{background:var(--ink); border-color:var(--ink); color:#fff;}

/* disease cards */
.mx-dgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.mx-dcard{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:24px; display:flex; flex-direction:column; gap:12px; transition:.2s; position:relative; overflow:hidden;}
.mx-dcard::before{content:""; position:absolute; inset-inline-start:0; top:0; bottom:0; width:4px; background:var(--cat); transform:scaleY(0); transform-origin:top; transition:.22s;}
.mx-dcard:hover{transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:transparent;}
.mx-dcard:hover::before{transform:scaleY(1);}
.mx-dcard__top{display:flex; align-items:center; gap:13px;}
.mx-dcard__icon{width:48px; height:48px; border-radius:14px; background:var(--cat-bg); color:var(--cat-ink); display:grid; place-items:center; flex:none;}
.mx-dcard__name{font-size:1.18rem; font-weight:800; color:var(--ink); line-height:1.3;}
.mx-dcard:hover .mx-dcard__name{color:var(--primary-700);}
.mx-dcard__sum{font-size:14.5px; color:var(--ink-2); line-height:1.6; margin:0; flex:1;}
.mx-dcard__foot{display:flex; align-items:center; justify-content:space-between; padding-top:13px; border-top:1px solid var(--line-2);}
.mx-dcard__more{display:inline-flex; align-items:center; gap:6px; color:var(--primary); font-weight:700; font-size:14px;}
html[dir="rtl"] .mx-dcard__more svg{transform:scaleX(-1);}

/* drug list */
.mx-druglist{display:flex; flex-direction:column; gap:12px;}
.mx-drug{display:grid; grid-template-columns:auto 1.4fr 1.6fr 1fr auto; gap:20px; align-items:center; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:18px 22px; transition:.18s;}
.mx-drug:hover{box-shadow:var(--shadow-md); border-color:transparent; transform:translateY(-2px);}
.mx-drug__icon{width:46px; height:46px; border-radius:13px; background:var(--cat-bg); color:var(--cat-ink); display:grid; place-items:center; flex:none;}
.mx-drug__name{font-size:1.12rem; font-weight:800; color:var(--ink);}
.mx-drug__sub{font-size:13px; color:var(--ink-3); margin-top:2px;}
.mx-drug__cell-l{font-size:12px; color:var(--ink-3); font-weight:600; margin-bottom:3px; display:none;}
.mx-drug__cell{font-size:14.5px; color:var(--ink-2);}
.mx-drug__type{font-size:13px; font-weight:700; padding:5px 12px; border-radius:999px; background:var(--cat-bg); color:var(--cat-ink); white-space:nowrap;}
.mx-drug__arrow{color:var(--ink-3);}
html[dir="rtl"] .mx-drug__arrow svg{transform:scaleX(-1);}
.mx-drug:hover .mx-drug__arrow{color:var(--primary);}

/* symptom cards */
.mx-sgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
.mx-scard{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:24px; display:flex; flex-direction:column; gap:10px; align-items:flex-start; transition:.2s;}
.mx-scard:hover{transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:transparent;}
.mx-scard__icon{width:52px; height:52px; border-radius:15px; background:var(--cat-bg); color:var(--cat-ink); display:grid; place-items:center;}
.mx-scard__name{font-size:1.15rem; font-weight:800; color:var(--ink);}
.mx-scard__area{font-size:13px; color:var(--ink-3); font-weight:600;}
.mx-scard__causes{margin-top:auto; font-size:13px; color:var(--cat-ink); font-weight:700; background:var(--cat-bg); padding:5px 12px; border-radius:999px;}

/* doctor cards */
.mx-docgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.mx-doccard{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:26px; text-align:center; transition:.2s; display:flex; flex-direction:column; align-items:center;}
.mx-doccard:hover{transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:transparent;}
.mx-doccard__av{width:84px; height:84px; border-radius:50%; background:linear-gradient(145deg, var(--cat-bg), var(--cat-bg-2)); color:var(--cat-ink); display:grid; place-items:center; font-weight:800; font-size:1.7rem; margin-bottom:16px;}
.mx-doccard__name{font-size:1.22rem; font-weight:800; color:var(--ink); margin:0 0 4px;}
.mx-doccard__spec{color:var(--cat-ink); font-weight:700; font-size:14.5px; margin-bottom:14px;}
.mx-doccard__bio{color:var(--ink-2); font-size:14.5px; line-height:1.6; margin:0 0 18px; flex:1;}
.mx-doccard__count{display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:700; color:var(--ink-2); background:var(--surface-2); padding:8px 16px; border-radius:999px;}

/* ===================== disease detail ===================== */
.mx-detail{display:grid; grid-template-columns:1fr 320px; gap:44px; align-items:start; padding-top:34px;}
.mx-tabs{display:flex; gap:8px; flex-wrap:wrap; margin:24px 0 30px; border-bottom:1px solid var(--line); padding-bottom:0;}
.mx-tab{padding:12px 18px; font-size:15px; font-weight:700; color:var(--ink-2); border-bottom:3px solid transparent; margin-bottom:-1px; transition:.15s; white-space:nowrap;}
.mx-tab:hover{color:var(--ink);}
.mx-tab.is-active{color:var(--primary); border-bottom-color:var(--primary);}
.mx-tabpanel h2{font-size:1.55rem; font-weight:800; color:var(--ink); margin:0 0 16px;}
.mx-tabpanel p{font-size:1.1rem; line-height:1.8; color:#2C3A3F; margin:0 0 14px;}
.mx-sidebox{background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:24px; position:sticky; top:96px;}
.mx-sidebox h3{font-size:1.05rem; font-weight:800; color:var(--ink); margin:0 0 14px; display:flex; align-items:center; gap:8px;}
.mx-sidebox h3 svg{color:oklch(0.62 0.14 40);}
.mx-complist{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px;}
.mx-complist li{display:flex; align-items:center; gap:10px; font-size:14.5px; color:var(--ink-2); font-weight:600;}
.mx-complist li span{width:8px; height:8px; border-radius:50%; background:oklch(0.7 0.14 40); flex:none;}

/* ===================== drug detail ===================== */
.mx-drughead{display:flex; align-items:center; gap:20px; padding:30px 0 8px;}
.mx-drughead__icon{width:72px; height:72px; border-radius:20px; background:var(--cat-bg); color:var(--cat-ink); display:grid; place-items:center; flex:none;}
.mx-drughead__name{font-size:clamp(1.8rem,3vw,2.4rem); font-weight:800; color:var(--ink); margin:0;}
.mx-drughead__active{color:var(--ink-2); font-size:1.05rem; margin-top:4px;}
.mx-dsec{margin-top:34px;}
.mx-dsec__h{display:flex; align-items:center; gap:10px; font-size:1.3rem; font-weight:800; color:var(--ink); margin:0 0 16px;}
.mx-dsec__h .mx-dsec__ic{width:38px; height:38px; border-radius:11px; display:grid; place-items:center; flex:none;}
.mx-doselist{display:grid; gap:12px;}
.mx-dose{display:flex; align-items:center; justify-content:space-between; gap:16px; background:var(--surface-2); border-radius:13px; padding:16px 20px;}
.mx-dose__l{font-weight:700; color:var(--ink);}
.mx-dose__v{color:var(--ink-2); text-align:end;}
.mx-warnbox{background:oklch(0.97 0.03 40); border:1px solid oklch(0.88 0.06 40); border-radius:16px; padding:8px 24px;}
.mx-plain{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px;}
.mx-plain li{display:flex; gap:12px; font-size:1.05rem; line-height:1.6; color:#2C3A3F;}
.mx-plain li .mx-bullet{flex:none; width:24px; height:24px; border-radius:50%; display:grid; place-items:center; margin-top:1px;}

/* ===================== about ===================== */
.mx-mission{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; padding:40px 0;}
.mx-mission__art{aspect-ratio:4/3; border-radius:24px; background:linear-gradient(150deg,var(--c-100),var(--c-200)); display:grid; place-items:center; position:relative; overflow:hidden;}
.mx-mission__art::after{content:""; position:absolute; inset:0; background:repeating-linear-gradient(45deg, transparent 0 22px, color-mix(in oklch,var(--c-300) 20%, transparent) 22px 23px);}
.mx-mission__art svg{color:color-mix(in oklch,var(--c-600) 55%,white); position:relative; z-index:1;}
.mx-mission h2{font-size:2rem; font-weight:800; color:var(--ink); margin:0 0 16px;}
.mx-mission p{font-size:1.15rem; line-height:1.8; color:var(--ink-2); margin:0;}
.mx-values{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; padding:20px 0 30px;}
.mx-value{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:28px;}
.mx-value__icon{width:54px; height:54px; border-radius:15px; background:var(--c-50); color:var(--primary); display:grid; place-items:center; margin-bottom:16px;}
.mx-value h3{font-size:1.2rem; font-weight:800; color:var(--ink); margin:0 0 8px;}
.mx-value p{color:var(--ink-2); font-size:15px; line-height:1.6; margin:0;}
.mx-policy-wrap{background:var(--surface-2);}
.mx-policy{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:30px;}
.mx-step{position:relative; padding-top:8px;}
.mx-step__n{width:48px; height:48px; border-radius:50%; background:var(--primary); color:#fff; display:grid; place-items:center; font-weight:800; font-size:1.3rem; font-family:var(--ff-en); margin-bottom:16px;}
.mx-step h3{font-size:1.12rem; font-weight:800; color:var(--ink); margin:0 0 8px;}
.mx-step p{color:var(--ink-2); font-size:14.5px; line-height:1.6; margin:0;}

/* ===================== contact ===================== */
.mx-contact{display:grid; grid-template-columns:1.2fr .8fr; gap:44px; align-items:start; padding-top:20px;}
.mx-form{background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:32px; box-shadow:var(--shadow-sm);}
.mx-form h2{font-size:1.4rem; font-weight:800; color:var(--ink); margin:0 0 22px;}
.mx-field{margin-bottom:18px;}
.mx-field label{display:block; font-size:14px; font-weight:700; color:var(--ink); margin-bottom:7px;}
.mx-field input, .mx-field textarea{width:100%; border:1.5px solid var(--line); border-radius:12px; padding:13px 16px; font-size:1rem; color:var(--ink); background:var(--surface); transition:.15s; font-family:inherit;}
.mx-field input:focus, .mx-field textarea:focus{outline:none; border-color:var(--c-300); box-shadow:0 0 0 4px var(--c-100);}
.mx-field textarea{resize:vertical; min-height:130px;}
.mx-form__sent{display:flex; align-items:center; gap:12px; background:oklch(0.97 0.03 150); color:oklch(0.40 0.08 150); border-radius:14px; padding:22px; font-weight:700; font-size:1.08rem;}
.mx-reach{display:flex; flex-direction:column; gap:14px;}
.mx-reachcard{display:flex; align-items:center; gap:14px; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:20px;}
.mx-reachcard__icon{width:48px; height:48px; border-radius:13px; background:var(--c-50); color:var(--primary); display:grid; place-items:center; flex:none;}
.mx-reachcard__l{font-size:13px; color:var(--ink-3); font-weight:600;}
.mx-reachcard__v{font-size:1.05rem; font-weight:700; color:var(--ink); font-family:var(--ff-en);}

@media (max-width:1000px){
  .mx-dgrid{grid-template-columns:repeat(2,1fr);}
  .mx-sgrid{grid-template-columns:repeat(2,1fr);}
  .mx-docgrid{grid-template-columns:repeat(2,1fr);}
  .mx-detail{grid-template-columns:1fr;}
  .mx-sidebox{position:static;}
  .mx-mission{grid-template-columns:1fr; gap:28px;}
  .mx-mission__art{max-width:440px;}
  .mx-values{grid-template-columns:1fr;}
  .mx-policy{grid-template-columns:repeat(2,1fr);}
  .mx-contact{grid-template-columns:1fr;}
}
@media (max-width:640px){
  .mx-dgrid, .mx-sgrid, .mx-docgrid{grid-template-columns:1fr;}
  .mx-policy{grid-template-columns:1fr;}
  .mx-drug{grid-template-columns:auto 1fr auto; gap:14px;}
  .mx-drug__cell{display:none;}
  .mx-drug__type{display:none;}
}

/* ===================== article videos ===================== */
.mx-videos{margin:42px 0 6px;}
.mx-videos > h2{margin-bottom:6px;}
.mx-videos__sub{color:var(--ink-2); margin:0 0 22px; font-size:1.02rem; line-height:1.6; max-width:48em;}
.mx-videos__grid{display:grid; grid-template-columns:repeat(2,1fr); gap:24px;}
.mx-video{margin:0;}
.mx-video--inline{margin:28px 0; max-width:640px;}
.mx-video__frame{position:relative; aspect-ratio:16/9; border-radius:16px; overflow:hidden;
  border:1px solid var(--line); box-shadow:var(--shadow-sm);
  background:linear-gradient(140deg, var(--c-100), var(--c-50));}
.mx-video__iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}
.mx-video__poster{position:absolute; inset:0; width:100%; height:100%; padding:0; border:0;
  background:transparent; cursor:pointer; display:block; overflow:hidden;}
.mx-video__thumb{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.mx-video__poster::after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 40%, rgba(20,40,45,.28));}
.mx-video__play{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:1;
  width:68px; height:68px; border-radius:999px; background:rgba(255,255,255,.94); color:var(--primary);
  display:grid; place-items:center; box-shadow:0 10px 28px rgba(0,0,0,.28); transition:.18s ease;}
.mx-video__poster:hover .mx-video__play{transform:translate(-50%,-50%) scale(1.09); background:#fff;}
.mx-video__play svg{margin-inline-start:3px;}
html[dir="rtl"] .mx-video__play svg{transform:scaleX(-1); margin-inline-start:0; margin-inline-end:3px;}
.mx-video__badge{position:absolute; top:12px; inset-inline-start:12px; z-index:1;
  background:#FF0000; color:#fff; font-size:11.5px; font-weight:800; letter-spacing:.02em;
  padding:4px 9px; border-radius:6px; font-family:var(--ff-en);}
.mx-video__len{position:absolute; bottom:12px; inset-inline-end:12px; z-index:1;
  background:rgba(17,17,17,.84); color:#fff; font-size:12px; font-weight:600;
  padding:3px 8px; border-radius:6px; font-family:var(--ff-en);}
.mx-video__cap{margin-top:13px; font-size:1rem; color:var(--ink); font-weight:700; line-height:1.5;}
.mx-video__meta{display:block; color:var(--ink-3); font-weight:500; font-size:.9rem; margin-top:4px;}

/* ===================== empty state (search) ===================== */
.mx-empty{text-align:center; padding:60px 20px; display:flex; flex-direction:column; align-items:center; gap:14px;}
.mx-empty__icon{width:66px; height:66px; border-radius:18px; background:var(--c-50); color:var(--primary); display:grid; place-items:center;}
.mx-empty p{color:var(--ink-2); font-size:1.08rem; margin:0; max-width:30em;}
.mx-btn--ghost{background:var(--surface); color:var(--ink); border:1.5px solid var(--line);}
.mx-btn--ghost:hover{border-color:var(--c-300); color:var(--primary);}

@media (max-width:760px){
  .mx-videos__grid{grid-template-columns:1fr;}
}


/* ===== static-export helpers ===== */
.mx-tabpane[hidden]{ display:none; }
[data-results] > .row > div.is-hidden, [data-results] > .is-hidden{ display:none !important; }