.content-layout{
  --sb-width:300px;
  --sb-gray-bg:#f3f1ec;
  --sb-gray-line:#d5d3cd;
  --sb-gray-text:#9a9994;

  max-width:1160px !important;
  margin:0 auto !important;
  padding:24px 20px !important;
  background:#ffffff !important;
  display:flex !important;
  flex-direction:row !important;
  align-items:flex-start !important;
  gap:24px !important;
  border-radius:0;
}
html.dark-mode .content-layout{
  --sb-gray-bg:#2b2c31;
  --sb-gray-line:#3c3d42;
  --sb-gray-text:#7c7b76;
  background:#1b1c20 !important;
}

.main-content{
  flex:1 !important;
  min-width:0 !important;
}

.sidebar{
  flex:0 0 var(--sb-width) !important;
  width:var(--sb-width) !important;
  min-width:var(--sb-width) !important;
  position:sticky;
  top:20px;
  display:flex !important;
  flex-direction:column !important;
  gap:20px;
}

.ad-unit{
  width:100%;
}
.ad-unit-label{
  font-size:10px;
  font-weight:700;
  letter-spacing:0.6px;
  text-transform:uppercase;
  color:var(--sb-gray-text);
  text-align:center;
  margin:0 0 6px;
}
.ad-slot{
  width:100%;
  background:var(--sb-gray-bg);
  border:1px dashed var(--sb-gray-line);
  border-radius:6px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--sb-gray-text);
  font-size:12px;
  font-weight:600;
}
.ad-slot-300x250{ height:250px; }
.ad-slot-300x600{ height:600px; }
.ad-slot-300x100{ height:100px; }

/* ---------------------------------------------------------------
   Moved here from the inline style="" that was duplicated on all 5
   pages. Placed ABOVE the media queries so the mobile rules below
   can still win. Desktop rendering is byte-identical to before.
   --------------------------------------------------------------- */
.content-layout{
  display:flex!important;
  flex-direction:row!important;
  align-items:flex-start!important;
  gap:24px!important;
  max-width:1160px;
  margin:0 auto;
  padding:24px 20px;
  background:#fff;
}
.sidebar{
  flex:0 0 300px!important;
  width:300px!important;
  min-width:300px!important;
  display:flex!important;
  flex-direction:column!important;
  gap:20px!important;
}

@media (max-width:768px){
  .content-layout{flex-direction:column !important; padding:16px !important;}
  .sidebar{
    width:100% !important;
    min-width:unset !important;
    max-width:var(--sb-width);
    margin:0 auto;
    position:static;
  }
}

@media (max-width:400px){
  .content-layout{padding:12px !important; gap:16px !important;}
  .sidebar{max-width:100%;}
  .ad-slot-300x600{height:400px;}
}

.follow-card{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px;
  border:1px solid #eceae5;
  border-radius:10px;
  background:#fff;
  text-decoration:none;
  transition:border-color .15s, box-shadow .15s;
}
.follow-card:hover{border-color:#e2231a; box-shadow:0 4px 14px rgba(226,35,26,0.12);}
.follow-card-icon{
  flex-shrink:0;
  width:36px; height:36px;
  border-radius:50%;
  border:1.5px solid #e2231a;
  color:#e2231a;
  display:flex;
  align-items:center;
  justify-content:center;
}
.follow-card-icon svg{width:16px; height:16px;}
.follow-card-body{flex:1; min-width:0;}
.follow-card-title{
  display:block;
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
  font-size:13px;
  font-weight:700;
  color:#181818;
  margin-bottom:2px;
}
.follow-card-sub{
  display:block;
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
  font-size:11.5px;
  color:#79776f;
  line-height:1.3;
}
.follow-card-cta{
  flex-shrink:0;
  padding:7px 12px;
  border-radius:7px;
  background:#e2231a;
  color:#fff;
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
}
html.dark-mode .follow-card{background:#212227; border-color:#3c3d42;}
html.dark-mode .follow-card:hover{border-color:#e2231a;}
html.dark-mode .follow-card-title{color:#f0efea;}
html.dark-mode .follow-card-sub{color:#9a9994;}

@media (max-width:360px){
  .follow-card{flex-wrap:wrap;}
  .follow-card-cta{width:100%; text-align:center; margin-top:4px;}
}