.article-shell{
  background:#fff;
}

.article-loading{
  min-height:52vh;
  display:grid;
  place-items:center;
  background:#f7f9fb;
}

.article-loading h1{
  margin:16px 0 8px;
  color:#103730;
  font-size:clamp(2rem, 5vw, 4rem);
}

.article-hero{
  position:relative;
  min-height:620px;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
  background:#0d2f28;
}

.article-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(180deg, rgba(8,30,25,.12) 0%, rgba(8,30,25,.74) 100%);
}

.article-hero img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

.article-hero-content{
  position:relative;
  z-index:2;
  width:100%;
  color:#fff;
  padding:120px 0 70px;
}

.article-hero-copy{
  max-width:900px;
}

.article-hero h1{
  font-size:clamp(2.4rem, 5vw, 5rem);
  line-height:1.03;
  letter-spacing:0;
  margin:14px 0 18px;
}

.article-lead{
  max-width:760px;
  font-size:1.12rem;
  color:rgba(255,255,255,.92);
}

.article-meta{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
  color:rgba(255,255,255,.9);
  font-weight:700;
}

.article-layout{
  display:grid;
  grid-template-columns:minmax(0, 760px) minmax(280px, 360px);
  gap:52px;
  align-items:start;
  padding:76px 0 90px;
}

.article-content{
  font-size:1.08rem;
  color:#38434c;
}

.article-content p{
  margin:0 0 24px;
}

.article-content h2{
  color:#103730;
  font-size:2rem;
  line-height:1.15;
  margin:44px 0 18px;
}

.article-checks{
  margin:34px 0;
  padding:26px;
  border:1px solid #dfece8;
  border-radius:22px;
  background:#f5fbf9;
}

.article-checks h2{
  margin-top:0;
}

.article-checks ul{
  display:grid;
  gap:12px;
  list-style:none;
  padding:0;
  margin:0;
}

.article-checks li{
  display:flex;
  gap:12px;
  font-weight:700;
  color:#22312b;
}

.article-checks li::before{
  content:"✓";
  flex:0 0 auto;
  color:#0f9d7a;
  font-weight:900;
}

.article-sidebar{
  position:sticky;
  top:112px;
  display:grid;
  gap:18px;
}

.article-panel{
  border:1px solid #e6e8eb;
  border-radius:22px;
  background:#fff;
  padding:24px;
  box-shadow:0 10px 30px rgba(16,40,34,.08);
}

.article-panel h2,
.article-panel h3{
  color:#103730;
  margin:0 0 10px;
}

.article-panel p{
  color:#62666d;
  margin:0 0 18px;
}

.related-list{
  display:grid;
  gap:12px;
}

.related-link{
  display:block;
  padding:14px;
  border-radius:14px;
  background:#f7f9fb;
  border:1px solid #e6e8eb;
}

.related-link strong{
  display:block;
  color:#103730;
  line-height:1.2;
  margin-bottom:4px;
}

.related-link span{
  color:#62666d;
  font-size:.92rem;
}

.article-cta{
  margin-top:36px;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

@media (max-width:980px){
  .article-layout{
    grid-template-columns:1fr;
  }

  .article-sidebar{
    position:static;
  }
}

@media (max-width:720px){
  .article-hero{
    min-height:560px;
  }

  .article-layout{
    padding:56px 0 70px;
    gap:28px;
  }
}

.article-checks li::before{
  content:"✓";
}

.article-brand-panel{
  overflow:hidden;
  padding:0;
}

.article-brand-panel > img{
  width:100%;
  aspect-ratio:16 / 10;
  object-fit:cover;
}

.article-brand-panel > div{
  padding:24px;
}

.related-link{
  display:grid;
  grid-template-columns:82px 1fr;
  gap:12px;
  align-items:center;
}

.related-link img{
  width:82px;
  height:72px;
  object-fit:cover;
  border-radius:12px;
}