:root{
      --hero-green-1:#2a3510; --hero-green-2:#1a2207;
      --brand-green:#0a7d33; --cta-green-1:#2f9e2f; --cta-green-2:#1d7f1d;
      --ink:#0f1c33; --body:#4b5563; --muted:#9aa3ad;
      --display:'FONTSPRING DEMO - Roc Grotesk', Inter, sans-serif;
    }
   

    /* ============ HERO ============ */
    .blog-hero{position:relative;overflow:hidden;color:#fff;text-align:center;
      background:url("/ms-assets/img/resources/blog/images/blogs.webp");
      padding:200px 20px 150px;background-size: cover;background-repeat: no-repeat;}
    .blog-hero .wm{position:absolute;top:-2vw;left:50%;transform:translateX(-50%);
      font-family:var(--display);font-weight:800;font-size:24vw;line-height:1;
      color:rgba(255,255,255,.05);letter-spacing:.01em;pointer-events:none;user-select:none;white-space:nowrap}
    .blog-hero h1{position:relative;color: #FFF;
text-align: center;
font-family: "FONTSPRING DEMO - Roc Grotesk";
font-size: 72px;
font-style: normal;
font-weight: 700;
line-height: 72px; /* 100% */
letter-spacing: -1.44px;margin-bottom:18px}
    .blog-hero .sub{position:relative;color: #FFF;
text-align: center;
font-family: Roboto;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 25px; /* 156.25% */
letter-spacing: -0.2px;}
    .chips{position:relative;display:flex;gap:14px;justify-content:center;margin-top:40px;flex-wrap:wrap}
    .chip{display:inline-flex;align-items:center;gap:10px;padding:11px 20px;border-radius:999px;
      border:1px solid rgba(255,255,255,.45);color:#fff;text-decoration:none;color: #FFF;
font-family: Inter;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 20px; /* 125% */transition:background .2s}
    .chip:hover{background:rgba(255,255,255,.12)}
    .chip .x{font-size:15px;line-height:1}
    .chip.active{background:#fff;color:#1a2207;font-weight:600;border-color:#fff}

    /* ============ WHITE SHEET ============ */
    .sheet{position:relative;max-width:1240px;margin:-90px auto 0;background:#fff;
      border-radius:26px;padding:46px 48px 56px;box-shadow:0 24px 70px rgba(4,21,39,.14) ; margin-bottom: 70px;}

    /* Featured + sidebar */
    .top-row{display:grid;grid-template-columns:1.65fr 1fr;gap:40px}
    .featured{position:relative;display:block;border-radius:18px;overflow:hidden;
      min-height:440px;background:#e9e9e9;text-decoration:none}
    .featured img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
    .featured .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05) 35%,rgba(0,0,0,.74))}
    .featured .fx{position:absolute;left:32px;right:32px;bottom:30px;color:#fff}
    .cat-pill{display:inline-flex;align-items:center;gap:8px;background:#fff;color: #297907;
font-family: Inter;
font-size: 14.775px;
font-style: normal;
font-weight: 600;
line-height: 19.7px; /* 133.333% */padding:7px 16px;border-radius:999px;margin-bottom:16px}
    .cat-pill::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--brand-green)}
    .featured h2{color: #FFF;
font-family: Roboto;
font-size: 40px;
font-style: normal;
font-weight: 700;
line-height: 46.172px; /* 115.43% */margin-bottom:12px}
    .featured .meta{color: #E5E7EB;
font-family: Inter;
font-size: 17.238px;
font-style: normal;
font-weight: 400;
line-height: 24.625px; /* 142.857% */}
    .side h3{color: #1F1F1F;
font-family: Inter;
font-size: 29.55px;
font-style: normal;
font-weight: 700;
line-height: 39.4px; /* 133.333% */margin-bottom:8px}
    .side-item{display:flex;gap:16px;align-items:center;text-decoration:none;padding:16px 0;border-bottom:1px solid #f1f1f1}
    .side-item:last-child{border-bottom:none}
    .side-item img{width:66px;height:66px;border-radius:14px;object-fit:cover;background:#e9e9e9;flex-shrink:0}
    .side-item .ph{width:66px;height:66px;border-radius:14px;background:linear-gradient(135deg,#2a3510,#4c6320);flex-shrink:0}
    .side-item .t{color: #1F1F1F;
font-family: Roboto;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 24.625px; /* 153.906% */}
    .side-item .m{color: #737373;
font-family: Inter;
font-size: 14.775px;
font-style: normal;
font-weight: 400;
line-height: 19.7px; /* 133.333% */margin-top:7px}

    /* Founders corner grid */
    .fc-head{display:flex;justify-content:space-between;align-items:center;margin:56px 0 26px}
    .fc-head h3{font-family:var(--display);font-size:28px;font-weight:800;color:var(--ink)}
    .fc-arrows{display:flex;gap:10px}
    .fc-arrows a,.fc-arrows span{width:42px;height:42px;border:1px solid #e3e3e3;border-radius:50%;
      display:flex;align-items:center;justify-content:center;color:var(--ink);text-decoration:none;font-size:17px}
    .fc-arrows span{color:#d0d0d0}
    .post-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:28px}
    .post-card{background:#f6f6f6;border-radius:16px;overflow:hidden;display:flex;flex-direction:column;
      text-decoration:none;transition:box-shadow .2s,transform .2s}
    .post-card:hover{box-shadow:0 12px 32px rgba(4,21,39,.12);transform:translateY(-2px)}
    .post-card img{width:100%;height:210px;object-fit:cover;background:#e9e9e9}
    .pc-body{padding:22px;display:flex;flex-direction:column;gap:11px}
    .pc-cat{display:inline-flex;align-items:center;gap:8px;color: #737373;
font-family: Inter;
font-size: 14.775px;
font-style: normal;
font-weight: 400;
line-height: 19.7px; /* 133.333% */margin-top:7px}
    .pc-cat::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--brand-green)}
    .pc-body h4{color: #1F1F1F;
font-family: Inter;
font-size: 20.55px;
font-style: normal;
font-weight: 700;
line-height: 30.4px; /* 133.333% */}
    .pc-body p{color: #1F1F1F;
font-family: Roboto;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 24.625px; /* 153.906% */}
    .pc-meta{color: #737373;
font-family: Inter;
font-size: 14.775px;
font-style: normal;
font-weight: 400;
line-height: 19.7px; /* 133.333% */margin-top:7px;margin-top:auto;padding-top:6px}

    /* Pagination */
    .pager-row{display:flex;align-items:center;margin-top:46px;border-top:1px solid #efefef;padding-top:34px}
    .pager{display:flex;gap:10px;justify-content:center;flex:1;margin-left:104px}
    .pager a,.pager .cur{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;
      justify-content:center;text-decoration:none;color:var(--ink);font-size:14px}
    .pager .cur{background:var(--ink);color:#fff}
    .pager-arrows{display:flex;gap:26px;font-size:18px}
    .pager-arrows a{color:var(--ink);text-decoration:none}
    .pager-arrows span{color:#d0d0d0}

    /* Newsletter */
    .nl{max-width:1240px;margin:64px auto;border-radius:24px;padding:58px 60px;color:#fff;
      background:linear-gradient(120deg,var(--cta-green-1),var(--cta-green-2));
      display:grid;grid-template-columns:1.05fr 1fr;gap:36px;align-items:center;font-family:Inter,sans-serif}
    .nl h2{font-family:var(--display);font-size:44px;font-weight:800;line-height:1.12;margin-bottom:16px}
    .nl .lead{color:#e2f4e0;line-height:1.65;font-size:15px;max-width:420px}
    .nl-right .lbl{font-size:14px;margin-bottom:12px;color:#eafae8}
    .nl-form{display:flex;gap:12px;flex-wrap:wrap}
    .nl-form input{flex:1;min-width:230px;height:54px;border:none;border-radius:999px;padding:0 24px;font-size:15px;font-family:inherit}
    .nl-form button{height:54px;padding:0 34px;border:none;border-radius:999px;background:#cdeec4;
      color:#124a12;font-weight:700;font-size:15px;cursor:pointer}
    .nl-right .fine{font-size:12px;color:#d8eed6;margin-top:12px}
    .nl-right .fine u{cursor:pointer}
    .empty{padding:70px 0;text-align:center;color:var(--body)}

        @media (max-width: 767px) {
    .sheet {
        margin-bottom: 40px !important;
    }
}

    @media(max-width:960px){
      .blog-hero h1 {
        font-size: 40px;
        line-height: 45px;
      }
      .featured h2 {
         font-size: 22px;
        line-height: 29px;
      }
      .blog-hero {
   
    background: url(/ms-assets/img/resources/blog/images/blogs.webp) #213500;
    padding: 200px 20px 150px;
    background-size: contain;
    background-repeat: no-repeat;
}
      .top-row{grid-template-columns:1fr}
      .sheet{margin:-70px 16px 0;padding:30px 22px 40px}
      .nl{grid-template-columns:1fr;margin:48px 16px;padding:38px 28px}
      .pager{margin-left:0}
      .post-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:28px}
      .pager-arrows{display:none}
    }