/* Hesabatk Articles Pro - Public */
.insights-hero{position:relative;overflow:hidden;padding:155px 0 82px;color:#fff;background:radial-gradient(circle at 12% 12%,rgba(216,183,76,.2),transparent 28%),radial-gradient(circle at 88% 25%,rgba(19,157,118,.26),transparent 33%),linear-gradient(135deg,#031914,#052d23 58%,#0b523f)}.insights-hero .container{position:relative;z-index:2}.insights-eyebrow{display:inline-flex;align-items:center;gap:8px;margin-bottom:18px;padding:7px 12px;border:1px solid rgba(241,214,108,.28);border-radius:99px;color:#f1d66c;background:rgba(255,255,255,.06);font-size:.78rem;font-weight:900}.insights-hero h1{max-width:850px;margin:0;font-size:clamp(2.7rem,5vw,5.2rem);font-weight:900;line-height:1.12}.insights-hero h1 span{display:block;color:#f1d66c}.insights-hero .col-lg-7>p{max-width:760px;margin:22px 0 0;color:#cfe1db;font-size:1.06rem}.insights-search{display:grid;max-width:720px;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;margin-top:28px;overflow:hidden;border:1px solid rgba(255,255,255,.18);border-radius:17px;background:rgba(255,255,255,.1);backdrop-filter:blur(12px)}.insights-search>i{color:#f1d66c;text-align:center}.insights-search input{min-width:0;padding:15px 5px;border:0;outline:0;color:#fff;background:transparent}.insights-search input::placeholder{color:#a8c3ba}.insights-search button{align-self:stretch;padding:0 22px;border:0;color:#2d250d;background:#f1d66c;font-weight:900}.insights-trust{display:flex;flex-wrap:wrap;gap:16px;margin-top:25px;color:#cfe1db;font-size:.8rem}.insights-trust span{display:inline-flex;align-items:center;gap:6px}.insights-trust i{color:#f1d66c}.insights-board{padding:24px;border:1px solid rgba(255,255,255,.16);border-radius:28px;background:rgba(255,255,255,.1);box-shadow:0 35px 80px rgba(0,0,0,.22);backdrop-filter:blur(16px)}.insights-board-head{display:flex;align-items:center;justify-content:space-between}.insights-board-head small,.insights-board-head strong{display:block}.insights-board-head small{color:#b8d2c8;font-size:.68rem}.insights-board-head>i{display:grid;width:50px;height:50px;place-items:center;border-radius:16px;color:#f1d66c;background:rgba(255,255,255,.08);font-size:1.35rem}.insights-board-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:21px 0}.insights-board-grid>div{padding:15px;border-radius:16px;color:#102d24;background:#fff}.insights-board-grid i{display:grid;width:36px;height:36px;margin-bottom:9px;place-items:center;border-radius:11px;color:#08745a;background:#e8f6f1}.insights-board-grid strong,.insights-board-grid span{display:block}.insights-board-grid strong{font-size:.8rem}.insights-board-grid span{color:#6d7e78;font-size:.64rem}.insights-board-note{display:flex;gap:10px;padding:13px;border-radius:14px;color:#d7e8e1;background:rgba(241,214,108,.08);font-size:.72rem}.insights-board-note i{color:#f1d66c}
.insights-categories{border-bottom:1px solid #dce7e2;background:#fff}.insights-category-scroll{display:flex;gap:8px;overflow-x:auto;padding:18px 0}.insights-category-scroll a{display:inline-flex;flex:0 0 auto;align-items:center;gap:8px;padding:9px 12px;border:1px solid #dce7e2;border-radius:99px;color:#6d7e78;background:#fff;font-size:.74rem;font-weight:850}.insights-category-scroll a i{color:var(--cat,#08745a)}.insights-category-scroll a strong{display:grid;min-width:23px;height:23px;place-items:center;border-radius:50%;color:#08745a;background:#e8f6f1;font-size:.62rem}.insights-category-scroll a.active,.insights-category-scroll a:hover{border-color:#08745a;color:#fff;background:#08745a}.insights-category-scroll a.active i,.insights-category-scroll a:hover i,.insights-category-scroll a.active strong,.insights-category-scroll a:hover strong{color:#fff}.insights-category-scroll a.active strong,.insights-category-scroll a:hover strong{background:rgba(255,255,255,.15)}
.insights-featured{display:grid;overflow:hidden;grid-template-columns:1.1fr .9fr;border:1px solid #dce7e2;border-radius:30px;background:#fff;box-shadow:0 20px 55px rgba(5,52,40,.12)}.insights-featured-media{min-height:480px;overflow:hidden;background:#063b2e}.insights-featured-media>img{width:100%;height:100%;object-fit:cover}.insights-featured-placeholder{display:grid;height:100%;min-height:480px;place-items:center;align-content:center;gap:11px;color:#fff;background:linear-gradient(135deg,#031914,#08745a)}.insights-featured-placeholder i{display:grid;width:110px;height:110px;place-items:center;border:3px solid rgba(255,255,255,.72);border-radius:30px;color:#f2d66d;font-size:3.4rem}.insights-featured-content{display:flex;flex-direction:column;justify-content:center;padding:clamp(30px,5vw,58px)}.insights-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;color:#6d7e78;font-size:.72rem}.insights-category-badge{padding:6px 10px;border-radius:99px;color:var(--chip,#08745a);background:#eef8f5;font-weight:900}.insights-featured-content h2{margin:18px 0 8px;font-size:clamp(1.8rem,3vw,2.9rem);font-weight:900;line-height:1.32}.insights-featured-content h3{margin:0 0 15px;color:#08745a;font-size:1rem}.insights-featured-content>p{color:#6d7e78;font-size:.94rem}.insights-author{display:flex;align-items:center;gap:10px;margin:21px 0}.insights-author-avatar{display:grid;width:43px;height:43px;place-items:center;border-radius:14px;color:#fff;background:#08745a;font-weight:900}.insights-author strong,.insights-author small{display:block}.insights-author small{color:#6d7e78;font-size:.66rem}.insights-read{display:inline-flex;align-items:center;gap:8px;color:#08745a;font-size:.8rem;font-weight:900}.insights-read:hover{gap:12px;color:#045b46}
.insights-list-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:34px}.insights-list-head .section-title{margin-bottom:0}.insights-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.insights-card{display:flex;min-width:0;overflow:hidden;flex-direction:column;border:1px solid #dce7e2;border-radius:24px;background:#fff;box-shadow:0 12px 35px rgba(6,55,42,.06);transition:.25s}.insights-card:hover{transform:translateY(-6px);box-shadow:0 20px 55px rgba(5,52,40,.12)}.insights-card-media{position:relative;display:block;height:225px;overflow:hidden;background:#074332}.insights-card-media>img{width:100%;height:100%;object-fit:cover;transition:.4s}.insights-card:hover .insights-card-media>img{transform:scale(1.04)}.insights-card-placeholder{display:grid;height:100%;place-items:center;align-content:center;gap:9px;color:#fff;background:linear-gradient(135deg,#04231b,#098165)}.insights-card-placeholder i{display:grid;width:76px;height:76px;place-items:center;border:2px solid rgba(255,255,255,.6);border-radius:22px;color:#f2d66d;font-size:2rem}.insights-card-placeholder span{color:#cce0d8;font-size:.7rem}.insights-featured-label{position:absolute;top:14px;right:14px;padding:6px 10px;border-radius:99px;color:#30270d;background:#f4d567;font-size:.68rem;font-weight:900}.insights-card-body{display:flex;flex:1;flex-direction:column;padding:22px}.insights-card-body h3{display:-webkit-box;min-height:62px;overflow:hidden;margin:15px 0 9px;font-size:1.1rem;font-weight:900;line-height:1.55;-webkit-box-orient:vertical;-webkit-line-clamp:2}.insights-card-body>p{display:-webkit-box;min-height:70px;overflow:hidden;margin:0;color:#6d7e78;font-size:.84rem;-webkit-box-orient:vertical;-webkit-line-clamp:3}.insights-card-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:18px;border-top:1px solid #dce7e2}.insights-card-footer>div{display:flex;gap:10px;color:#6d7e78;font-size:.66rem}.insights-pagination{display:flex;justify-content:center;gap:7px;margin-top:35px}.insights-pagination a{display:grid;width:39px;height:39px;place-items:center;border:1px solid #dce7e2;border-radius:12px;color:#6d7e78;background:#fff;font-size:.75rem;font-weight:900}.insights-pagination a.active,.insights-pagination a:hover{border-color:#08745a;color:#fff;background:#08745a}.insights-empty{padding:55px;border:1px dashed #b8cdc5;border-radius:25px;color:#6d7e78;background:#fff;text-align:center}.insights-empty i{font-size:2.7rem}.insights-paths{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.insights-paths a{position:relative;padding:24px;border:1px solid #dce7e2;border-radius:21px;color:#102d24;background:#fff}.insights-paths a:hover{transform:translateY(-4px);box-shadow:0 20px 55px rgba(5,52,40,.12)}.insights-paths>a>span{position:absolute;top:10px;left:13px;color:rgba(8,116,90,.1);font-size:2.4rem;font-weight:900}.insights-paths i{display:grid;width:49px;height:49px;margin-bottom:17px;place-items:center;border-radius:15px;color:#08745a;background:#e8f6f1}.insights-paths h3{font-size:.96rem}.insights-paths p{margin:0;color:#6d7e78;font-size:.76rem}.insights-cta,.article-cta{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:42px;border-radius:30px;color:#fff;background:linear-gradient(135deg,#05251d,#08745a);box-shadow:0 30px 70px rgba(5,52,40,.2)}.insights-cta span,.article-cta>div>span{color:#f2d66d;font-size:.8rem;font-weight:900}.insights-cta h2,.article-cta h2{max-width:760px;margin:8px 0 10px;font-size:clamp(1.6rem,3vw,2.7rem);font-weight:900}.insights-cta p,.article-cta p{max-width:760px;margin:0;color:#cce0d8}
.article-progress{position:fixed;top:0;right:0;z-index:4000;width:0;height:4px;background:linear-gradient(90deg,#d8b74c,#1fc490)}.article-hero{padding:140px 0 0;background:radial-gradient(circle at 90% 15%,rgba(8,116,90,.1),transparent 28%),linear-gradient(180deg,#edf8f4,#fff)}.article-breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-bottom:26px;color:#6d7e78;font-size:.73rem}.article-category-line{display:flex;flex-wrap:wrap;align-items:center;gap:9px}.article-category-line>span:last-child{padding:6px 10px;border-radius:99px;color:#765f0a;background:#fff3c4;font-size:.68rem;font-weight:900}.article-category-badge{display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border-radius:99px;color:var(--cat,#08745a);background:#eef8f5;font-size:.72rem;font-weight:900}.article-hero h1{max-width:1080px;margin:20px 0 12px;color:#102d24;font-size:clamp(2.4rem,5vw,5rem);font-weight:900;line-height:1.15}.article-hero h2{max-width:920px;margin:0 0 15px;color:#08745a;font-size:clamp(1rem,2vw,1.4rem)}.article-excerpt{max-width:930px;color:#4c625a;font-size:1.04rem;line-height:1.95}.article-meta{display:flex;align-items:center;justify-content:space-between;gap:25px;margin:30px 0;padding:18px 0;border-top:1px solid #dce7e2;border-bottom:1px solid #dce7e2}.article-author-brief{display:flex;align-items:center;gap:10px}.article-author-brief>img,.article-author-brief>span{width:48px;height:48px;border-radius:15px}.article-author-brief>img{object-fit:cover}.article-author-brief>span{display:grid;place-items:center;color:#fff;background:#08745a;font-weight:900}.article-author-brief strong,.article-author-brief small{display:block}.article-author-brief small{color:#6d7e78;font-size:.67rem}.article-meta-items{display:flex;flex-wrap:wrap;gap:15px;color:#6d7e78;font-size:.72rem}.article-cover{height:min(58vw,650px);margin:0;overflow:hidden;border-radius:30px 30px 0 0;background:#dce9e4;box-shadow:0 25px 65px rgba(5,52,40,.18)}.article-cover img{width:100%;height:100%;object-fit:cover}.article-main{padding-top:70px}.article-layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:55px;align-items:start}.article-sidebar{position:sticky;top:100px;display:grid;gap:13px}.article-toc,.article-share{overflow:hidden;border:1px solid #dce7e2;border-radius:19px;background:#fff}.article-toc>span,.article-share>span{display:block;padding:13px 15px;color:#fff;background:#054c3a;font-size:.75rem;font-weight:900}.article-toc nav{display:grid;padding:8px 0}.article-toc a{padding:8px 15px;color:#6d7e78;font-size:.72rem}.article-toc a.is-subsection{padding-right:27px;font-size:.68rem}.article-toc small{padding:10px 15px;color:#6d7e78;font-size:.68rem}.article-share>div{display:flex;gap:7px;padding:13px 15px 6px}.article-share a,.article-share button{display:grid;width:38px;height:38px;place-items:center;border:1px solid #dce7e2;border-radius:11px;color:#08745a;background:#fff}.article-share small{display:block;min-height:25px;padding:3px 15px 10px;color:#08745a;font-size:.65rem}.article-column{min-width:0;max-width:900px}.article-points{margin-bottom:40px;padding:27px;border:1px solid #c9dfd6;border-radius:24px;background:#f1f8f5}.article-points-head{display:flex;align-items:center;gap:13px;margin-bottom:18px}.article-points-head>i{display:grid;width:48px;height:48px;place-items:center;border-radius:15px;color:#735e12;background:#fff3c4}.article-points-head span{color:#08745a;font-size:.7rem;font-weight:900}.article-points-head h2{margin:2px 0;font-size:1.15rem}.article-point-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.article-point-grid>div{padding:15px;border-radius:15px;background:#fff}.article-point-grid i{color:#08745a}.article-point-grid h3{margin:8px 0 5px;font-size:.82rem}.article-point-grid p{margin:0;color:#6d7e78;font-size:.72rem}.article-content{color:#283d36;font-size:1rem;line-height:2.05}.article-content h2,.article-content h3{scroll-margin-top:100px;color:#102d24;font-weight:900}.article-content h2{margin:48px 0 17px;padding-right:17px;border-right:4px solid #d8b74c;font-size:clamp(1.45rem,2.4vw,2.1rem)}.article-content h3{margin:32px 0 12px;font-size:1.2rem}.article-content ul,.article-content ol{display:grid;gap:8px;margin:18px 0 25px;padding-right:24px}.article-content li::marker{color:#08745a}.article-content table{width:100%;margin:25px 0;border-collapse:collapse;box-shadow:0 0 0 1px #dce7e2}.article-content th,.article-content td{padding:12px;border-bottom:1px solid #dce7e2;text-align:right}.article-content th{color:#fff;background:#054c3a}.article-quote{margin:42px 0;padding:30px;border-radius:23px;color:#fff;background:linear-gradient(135deg,#05251d,#08745a)}.article-quote i{color:#f2d66d;font-size:2rem}.article-quote p{margin:8px 0 0;font-size:1.15rem;font-weight:850}.article-section-head{margin-bottom:20px}.article-section-head>span{color:#08745a;font-size:.72rem;font-weight:900}.article-section-head h2{margin:4px 0;font-size:1.55rem}.article-gallery-section,.article-sources,.article-comments{margin-top:50px}.article-gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.article-gallery button{position:relative;min-height:260px;padding:0;overflow:hidden;border:0;border-radius:19px;background:#dce9e4}.article-gallery img{width:100%;height:100%;object-fit:cover}.article-gallery span{position:absolute;inset:auto 0 0;padding:35px 13px 12px;color:#fff;background:linear-gradient(transparent,rgba(3,25,20,.88));font-size:.72rem}.article-disclaimer{display:flex;gap:10px;margin-top:38px;padding:17px;border:1px solid #e9d99e;border-radius:16px;color:#5f501a;background:#fff9df}.article-sources ol{display:grid;gap:9px;padding-right:21px}.article-sources li{color:#6d7e78;font-size:.78rem}.article-sources a{color:#08745a;font-weight:850}.article-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:35px;padding-top:25px;border-top:1px solid #dce7e2}.article-tags a{padding:6px 10px;border-radius:99px;color:#08745a;background:#e8f6f1;font-size:.7rem}.article-author-card{display:grid;grid-template-columns:90px 1fr;gap:20px;margin-top:45px;padding:25px;border:1px solid #dce7e2;border-radius:23px;background:#fff;box-shadow:0 13px 35px rgba(6,55,42,.07)}.article-author-card>img,.article-author-placeholder{width:90px;height:90px;border-radius:23px}.article-author-card>img{object-fit:cover}.article-author-placeholder{display:grid;place-items:center;color:#fff;background:#08745a;font-size:1.8rem}.article-author-card p{color:#6d7e78;font-size:.78rem}.article-reviewed{display:inline-flex;gap:6px;margin-top:10px;color:#08745a;font-size:.68rem}.article-cta{margin-top:45px;padding:30px}.article-comment-list{display:grid;gap:12px;margin-bottom:28px}.article-comment-list article{display:grid;grid-template-columns:46px 1fr;gap:13px;padding:17px;border:1px solid #dce7e2;border-radius:17px;background:#fff}.article-comment-list article>span{display:grid;width:46px;height:46px;place-items:center;border-radius:14px;color:#fff;background:#08745a}.article-comment-form{padding:24px;border:1px solid #dce7e2;border-radius:21px;background:#f1f8f5}.article-comment-form label{display:block;margin-bottom:6px;font-size:.76rem}.article-comment-form .btn-primary-site{margin-top:16px}.article-honeypot{position:absolute;left:-10000px}.article-lightbox{position:fixed;inset:0;z-index:3000;display:grid;padding:25px;place-items:center;background:rgba(2,16,12,.9)}.article-lightbox[hidden]{display:none}.article-lightbox>button{position:absolute;top:20px;left:20px;width:45px;height:45px;border:0;border-radius:50%;color:#fff;background:rgba(255,255,255,.1)}.article-lightbox img{max-width:100%;max-height:80vh;border-radius:18px}
@media(max-width:1050px){.insights-paths{grid-template-columns:repeat(2,1fr)}.article-layout{grid-template-columns:1fr}.article-sidebar{position:static;grid-template-columns:1fr auto}}@media(max-width:991px){.insights-featured{grid-template-columns:1fr}.insights-featured-media,.insights-featured-placeholder{min-height:340px}.insights-grid{grid-template-columns:repeat(2,1fr)}.insights-list-head,.insights-cta,.article-cta{align-items:flex-start;flex-direction:column}}@media(max-width:767px){.insights-hero{padding:120px 0 55px}.insights-hero h1,.article-hero h1{font-size:2.35rem}.insights-search{grid-template-columns:38px 1fr}.insights-search button{grid-column:1/-1;padding:11px}.insights-grid,.insights-paths,.article-point-grid,.article-gallery{grid-template-columns:1fr}.article-meta{align-items:flex-start;flex-direction:column}.article-cover{height:300px}.article-sidebar{grid-template-columns:1fr}.article-author-card{grid-template-columns:1fr}}
\n/* Markup compatibility */
.insights-author>span{display:grid;width:43px;height:43px;place-items:center;border-radius:14px;color:#fff;background:#08745a;font-weight:900}
.article-author-card>span{display:grid;width:90px;height:90px;place-items:center;border-radius:23px;color:#fff;background:#08745a;font-size:1.8rem;font-weight:900}
.article-author-card em{display:inline-flex;align-items:center;gap:6px;margin-top:10px;color:#08745a;font-size:.68rem;font-style:normal;font-weight:850}
.article-comments-closed{padding:18px;border:1px dashed #bfd2ca;border-radius:16px;color:#6d7e78;background:#f4f8f6;text-align:center}
.insights-featured-section,.insights-paths-section{overflow:hidden}

/* --------------------------------------------------------------------------
   Article sharing controls
   -------------------------------------------------------------------------- */
.article-share {
  --article-share-size: 38px;
  --article-share-color: #08745a;
  --article-share-bg: #ffffff;
  --article-share-hover-bg: #08745a;
  --article-share-hover-color: #ffffff;
}

.article-share-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 13px 15px 7px;
}

.article-share .article-share-button {
  display: inline-grid;
  width: var(--article-share-size);
  height: var(--article-share-size);
  flex: 0 0 var(--article-share-size);
  padding: 0;
  place-items: center;
  border: 1px solid #dce7e2;
  border-radius: 11px;
  color: var(--article-share-color);
  background: var(--article-share-bg);
  box-shadow: 0 5px 14px rgba(5, 52, 40, 0.05);
  transition:
    color 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s ease;
}

.article-share .article-share-button:hover,
.article-share .article-share-button:focus-visible {
  border-color: var(--article-share-hover-bg);
  color: var(--article-share-hover-color);
  background: var(--article-share-hover-bg);
  transform: translateY(-2px);
}

.article-share .article-share-button svg {
  width: 48%;
  height: 48%;
  fill: currentColor;
}

.article-share .article-share-button[hidden] {
  display: none;
}

.article-share--bottom {
  margin-top: 36px;
  border-radius: 20px;
  box-shadow: 0 12px 32px rgba(6, 55, 42, 0.07);
}

.article-share--bottom > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.article-share--bottom > span::after {
  content: "شارك المعرفة مع فريقك";
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.62rem;
  font-weight: 700;
}

.article-share [data-article-copy-message] {
  min-height: 24px;
}

@media (max-width: 767px) {
  .article-share--bottom > span::after {
    display: none;
  }
}

/* =========================================================
   Hesabatk Article Mobile Stabilization v3
   Scope: article pages only.
   Keeps the global mobile-wide-viewport compensation used by the rest
   of the website and prevents article-only horizontal expansion.
   ========================================================= */
body.article-pro-page {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
}

body.article-pro-page > main,
body.article-pro-page .article-hero,
body.article-pro-page .article-main,
body.article-pro-page .article-layout,
body.article-pro-page .article-sidebar,
body.article-pro-page .article-column,
body.article-pro-page .article-content {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

body.article-pro-page .article-content,
body.article-pro-page .article-content * {
  overflow-wrap: anywhere;
  word-break: normal;
}

body.article-pro-page .article-content img,
body.article-pro-page .article-content iframe,
body.article-pro-page .article-content video {
  max-width: 100%;
  height: auto;
}

body.article-pro-page .article-content pre,
body.article-pro-page .article-content table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Keep the anti-spam field accessible to the form without placing it
   thousands of pixels outside the viewport. The old left:-10000px rule
   was capable of creating article-only horizontal overflow on phones. */
body.article-pro-page .article-honeypot {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
  left: auto !important;
  right: auto !important;
  inset-inline-start: auto !important;
}

@media (max-width: 1199.98px) {
  body.article-pro-page .article-layout,
  html.mobile-device body.article-pro-page .article-layout {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  body.article-pro-page .article-sidebar,
  body.article-pro-page .article-column,
  html.mobile-device body.article-pro-page .article-sidebar,
  html.mobile-device body.article-pro-page .article-column {
    position: static;
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0;
  }

  body.article-pro-page .article-sidebar,
  html.mobile-device body.article-pro-page .article-sidebar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  body.article-pro-page .article-toc,
  body.article-pro-page .article-share,
  html.mobile-device body.article-pro-page .article-toc,
  html.mobile-device body.article-pro-page .article-share {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  body.article-pro-page .article-toc nav,
  html.mobile-device body.article-pro-page .article-toc nav {
    display: flex;
    width: 100%;
    max-width: 100%;
    gap: 0;
    overflow-x: auto;
    padding: 7px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  body.article-pro-page .article-toc a,
  body.article-pro-page .article-toc a.is-subsection,
  html.mobile-device body.article-pro-page .article-toc a,
  html.mobile-device body.article-pro-page .article-toc a.is-subsection {
    flex: 0 0 auto;
    max-width: 220px;
    padding: 9px 11px;
    overflow: hidden;
    border-left: 1px solid #e3ece8;
    border-radius: 9px;
    font-size: 0.68rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (max-width: 767px) {
  body.article-pro-page .article-hero {
    padding-top: 104px;
  }

  body.article-pro-page .article-hero > .container,
  body.article-pro-page .article-main > .container,
  body.article-pro-page .section-soft > .container {
    width: 100%;
    max-width: 100%;
    padding-inline: 16px;
  }

  body.article-pro-page .article-breadcrumb {
    gap: 5px;
    margin-bottom: 16px;
    font-size: 0.68rem;
    line-height: 1.65;
  }

  body.article-pro-page .article-category-line {
    gap: 7px;
  }

  body.article-pro-page .article-category-badge,
  body.article-pro-page .article-category-line > span:last-child {
    padding: 5px 8px;
    font-size: 0.64rem;
  }

  body.article-pro-page .article-hero h1 {
    width: 100%;
    max-width: 100%;
    margin: 15px 0 10px;
    font-size: clamp(1.75rem, 8vw, 2.25rem);
    line-height: 1.3;
    letter-spacing: 0;
  }

  body.article-pro-page .article-hero h2 {
    width: 100%;
    max-width: 100%;
    margin-bottom: 10px;
    font-size: 0.96rem;
    line-height: 1.8;
  }

  body.article-pro-page .article-excerpt {
    width: 100%;
    max-width: 100%;
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.9;
  }

  body.article-pro-page .article-meta {
    display: flex;
    width: 100%;
    align-items: flex-start;
    flex-direction: column;
    gap: 13px;
    margin: 21px 0 0;
    padding: 14px 0;
  }

  body.article-pro-page .article-author-brief,
  body.article-pro-page .article-meta-items {
    width: 100%;
    min-width: 0;
  }

  body.article-pro-page .article-meta-items {
    gap: 8px 12px;
    font-size: 0.66rem;
  }

  body.article-pro-page .article-cover {
    width: 100%;
    height: clamp(220px, 65vw, 320px);
    border-radius: 21px 21px 0 0;
  }

  body.article-pro-page .article-main {
    padding-top: 32px;
  }

  body.article-pro-page .article-points,
  body.article-pro-page .article-author-card,
  body.article-pro-page .article-comment-form,
  body.article-pro-page .article-cta,
  body.article-pro-page .article-quote {
    width: 100%;
    max-width: 100%;
    padding: 18px;
    border-radius: 18px;
  }

  body.article-pro-page .article-point-grid,
  body.article-pro-page .article-gallery,
  body.article-pro-page .article-author-card,
  body.article-pro-page .article-comment-list article,
  body.article-pro-page .insights-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  body.article-pro-page .article-content {
    font-size: 0.95rem;
    line-height: 2;
  }

  body.article-pro-page .article-content h2 {
    margin: 38px 0 14px;
    padding-right: 11px;
    font-size: 1.38rem;
    line-height: 1.5;
  }

  body.article-pro-page .article-content h3 {
    margin-top: 27px;
    font-size: 1.08rem;
    line-height: 1.55;
  }

  body.article-pro-page .article-content ul,
  body.article-pro-page .article-content ol {
    padding-right: 21px;
  }

  body.article-pro-page .article-share-actions,
  body.article-pro-page .article-share > div {
    display: flex;
    max-width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    padding-inline: 12px;
  }

  body.article-pro-page .article-cta {
    align-items: stretch;
    flex-direction: column;
    gap: 16px;
  }

  body.article-pro-page .article-cta .btn-primary-site {
    width: 100%;
  }
}

/* A real phone may request a desktop-sized layout viewport. In that case,
   force only the article structure to one column while preserving the global
   mobile-wide-viewport font and drawer compensation from style.css. */
html.mobile-device body.article-pro-page .article-layout {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

html.mobile-device body.article-pro-page .article-sidebar,
html.mobile-device body.article-pro-page .article-column {
  position: static;
  width: 100%;
  max-width: none;
  min-width: 0;
  margin: 0;
}

html.mobile-device body.article-pro-page .article-sidebar {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

html.mobile-device body.article-pro-page .article-toc,
html.mobile-device body.article-pro-page .article-share {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

@media (max-width: 390px) {
  body.article-pro-page .article-hero > .container,
  body.article-pro-page .article-main > .container,
  body.article-pro-page .section-soft > .container {
    padding-inline: 12px;
  }

  body.article-pro-page .article-hero h1 {
    font-size: 1.72rem;
  }
}